/* KKCC Books - The Oud Library
   Layout: a black reading room framed by carved walnut bands top and bottom;
   aged brass lines, ivory type, one 1248px content column. Single dark theme by design. */
@font-face{font-family:"KKCC Display";src:url("/assets/fonts/amiri-latin-400.woff2") format("woff2");font-display:swap;font-weight:400}
@font-face{font-family:"KKCC Sans";src:url("/assets/fonts/ibm-plex-sans-latin-400.woff2") format("woff2");font-display:swap;font-weight:400}
@font-face{font-family:"KKCC Sans";src:url("/assets/fonts/ibm-plex-sans-latin-600.woff2") format("woff2");font-display:swap;font-weight:600}

:root{
  color-scheme:dark;
  --ink:#0d0b09;
  --surface:#15110d;
  --walnut:#2b1b12;
  --brass:#b89a63;
  --brass-light:#d0b27a;
  --brass-deep:#806135;
  --ivory:#f2e9d7;
  --body:#c9beaa;
  --muted:#a99c84;
  --line:rgba(184,154,99,.26);
  --line-strong:rgba(184,154,99,.5);
  --display:"KKCC Display",Georgia,"Times New Roman",serif;
  --sans:"KKCC Sans","Segoe UI",Arial,sans-serif;
  --content:1248px;
  --gutter:clamp(20px,6.67vw,96px);
  --frame:clamp(8px,2.1vw,30px);
  --walnut-img:url("/assets/textures/dark-walnut.webp");
  --hero-img:url("/assets/scenes/oud-library-hero.webp");
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);color:var(--ivory);direction:ltr;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--body);font-family:var(--sans);font-size:clamp(16px,.95rem + .2vw,18px);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brass-light);outline-offset:3px}
main{display:block;outline:none}

.skip-link{position:absolute;left:12px;top:-60px;z-index:50;background:var(--brass-light);color:#171109;padding:10px 16px;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}

.wrap{width:100%;max-width:calc(var(--content) + 2*var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

/* ---------- materials ---------- */
.walnut{background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.6)),var(--walnut-img) center/cover var(--walnut);border-block:1px solid var(--brass-deep);box-shadow:inset 0 4px 3px rgba(255,255,255,.03),inset 0 -5px 5px rgba(0,0,0,.6)}
.trim{height:16px;border-block-color:#5c4527}

.eyebrow{font-size:12.5px;line-height:1.4;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-light)}
.sep{display:inline-block;margin-inline:.55em;color:var(--brass-deep)}

.ornament{display:flex;align-items:center;gap:14px;width:min(196px,100%);color:var(--brass)}
.ornament span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--brass) 30%,var(--brass))}
.ornament span:last-child{background:linear-gradient(90deg,var(--brass),var(--brass) 70%,transparent)}
.ornament i{width:8px;height:8px;border:1px solid var(--brass);transform:rotate(45deg);flex:none}
.ornament-wide{width:100%;margin-block:28px 44px}
.ornament-wide span{background:var(--line-strong)}
.ornament-wide span:last-child{background:var(--line-strong)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:12px 28px;font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.btn-brass{background:linear-gradient(120deg,#d6b980,#b8995c);color:#171109;border:1px solid #e0c894;box-shadow:inset 0 0 0 3px rgba(214,185,128,.95),inset 0 0 0 4px rgba(70,48,20,.55)}
.btn-brass:hover{background:linear-gradient(120deg,#e0c48d,#c3a466)}
.btn-outline{background:rgba(21,17,13,.85);color:var(--ivory);border:1px solid var(--brass-deep)}
.btn-outline:hover{border-color:var(--brass-light);background:rgba(43,27,18,.65)}
.text-link{color:var(--ivory);text-decoration:none;font-size:17px;border-bottom:1px solid transparent;padding-block:6px;transition:border-color .2s,color .2s}
.text-link:hover{color:var(--brass-light);border-bottom-color:var(--brass-deep)}

/* ---------- header ---------- */
.site-header{position:relative;z-index:30;padding-block:12px}
.header-panel{margin-inline:var(--frame);padding-inline:max(12px,calc(var(--gutter) - var(--frame)));background:rgba(13,11,9,.84);border:1px solid rgba(184,154,99,.5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.03)}
.header-inner{max-width:var(--content);margin-inline:auto;min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:flex;flex-direction:column;text-decoration:none;padding-block:8px}
.wordmark-name{font-family:var(--display);font-size:clamp(24px,2.1vw,30px);line-height:1.05;letter-spacing:.04em;color:var(--brass-light)}
.wordmark-tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.site-nav ul{display:flex;gap:clamp(24px,3.6vw,52px)}
.site-nav a{display:inline-block;padding-block:12px;text-decoration:none;color:var(--body);font-size:16px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.site-nav a:hover{color:var(--ivory)}
.site-nav a[aria-current="page"]{color:var(--ivory);border-bottom-color:var(--brass-light)}
.menu-toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:8px 4px 8px 12px;background:none;border:0;color:var(--ivory);font:600 15px/1 var(--sans);cursor:pointer}
.menu-icon{position:relative;width:20px;height:12px;border-block:1px solid var(--brass-light)}
.menu-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--brass-light)}
.menu-toggle[aria-expanded="true"] .menu-icon{border-color:transparent}
.menu-toggle[aria-expanded="true"] .menu-icon::after{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-icon::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--brass-light);transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(560px,46vw,680px);display:flex;align-items:center;background:var(--ink)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:68% 50%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,11,9,.9) 0%,rgba(13,11,9,.72) 30%,rgba(13,11,9,.18) 52%,rgba(13,11,9,0) 70%),linear-gradient(0deg,rgba(13,11,9,.55),rgba(13,11,9,0) 30%)}
.hero-inner{padding-block:clamp(56px,7vw,96px)}
.hero-copy{max-width:min(740px,100%);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero-title{font-family:var(--display);font-size:clamp(44px,5.4vw,80px);line-height:1.1;color:var(--ivory);letter-spacing:.005em;margin-top:8px}
.hero-lede{font-size:clamp(17px,1.35vw,20px);color:var(--body);max-width:30em}
.hero .btn-brass{min-width:232px;margin-top:8px}
.hero-tags{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--brass);margin-top:4px}

/* ---------- sections ---------- */
.section{padding-block:clamp(48px,5.5vw,80px)}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(28px,3vw,40px)}
.section-title{font-family:var(--display);font-size:clamp(36px,3.4vw,50px);line-height:1.15;color:var(--ivory)}
.section-note{color:var(--body);font-size:17px}

/* ---------- gallery + cards ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5.4vw,80px)}
.book-card{display:flex;flex-direction:column;min-width:0}
.book-card-media{display:block;width:min(100%,400px);margin-inline:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.book-card-media img{width:100%;object-fit:contain}
.book-display-empty{display:grid;place-items:center;width:100%;aspect-ratio:1122/1402;max-width:100%;padding:24px;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.7)),var(--walnut-img) center/cover var(--walnut);border:1px solid var(--brass-deep);font-family:var(--display);font-size:clamp(20px,2vw,26px);color:var(--brass-light);text-align:center;text-wrap:balance}
.book-card-body{display:flex;flex-direction:column;flex:1;gap:14px;margin-top:26px;min-width:0}
.book-card-title{font-family:var(--display);font-size:clamp(28px,2.4vw,34px);line-height:1.18;color:var(--ivory)}
.book-card-title a{text-decoration:none}
.book-card-title a:hover{color:var(--brass-light)}
.book-card-desc{color:var(--body);max-width:34em}
.book-card-foot{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:auto;padding-top:14px}
.meta{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.book-card .btn-outline{min-width:156px}
.retailer-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:14px}
.retailer-row-label{color:var(--muted)}
.retailer-row ul{display:flex;flex-wrap:wrap;gap:0}
.retailer-row li+li::before{content:"\00b7";color:var(--brass-deep);padding-inline:2px}
.retailer-row a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;color:var(--brass-light);text-decoration:underline;text-decoration-color:rgba(208,178,122,.35);text-underline-offset:4px}
.retailer-row a:hover{text-decoration-color:var(--brass-light)}
.retailer-row li:first-child a{padding-left:0}

.series-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(40px,4vw,56px);padding-top:22px;border-top:1px solid var(--line)}
.series-strip-title{font-family:var(--display);font-size:clamp(26px,2.2vw,32px);color:var(--brass-light)}

/* ---------- inner pages ---------- */
.is-inner{position:relative;isolation:isolate}
.is-inner::before{content:"";position:absolute;inset:0 0 auto auto;width:min(70%,1000px);height:min(900px,100%);z-index:-1;pointer-events:none;background:var(--hero-img) 80% 0/cover no-repeat;opacity:.09;-webkit-mask-image:linear-gradient(to left,#000 20%,transparent),linear-gradient(to top,transparent,#000 40%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to left,#000 20%,transparent),linear-gradient(to top,transparent,#000 40%);mask-composite:intersect}
.page{padding-block:28px clamp(56px,6vw,88px)}
.breadcrumb{margin-bottom:clamp(28px,3vw,40px)}
.breadcrumb ol{display:flex;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.breadcrumb li+li::before{content:"/";padding-inline:.55em;color:var(--brass-deep)}
.breadcrumb a{color:var(--body);text-decoration:none;display:inline-block;padding-block:8px}
.breadcrumb a:hover{color:var(--brass-light)}
.breadcrumb [aria-current]{padding-block:8px;color:var(--muted)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 40px}
.page-head-text{max-width:760px;display:flex;flex-direction:column;gap:16px}
.page-title{font-family:var(--display);font-size:clamp(40px,4.4vw,62px);line-height:1.12;color:var(--ivory)}
.page-intro{font-size:clamp(17px,1.3vw,19px);color:var(--body);max-width:44em}
.page-count{padding-top:14px}

/* series index */
.series-list{margin-top:clamp(32px,3.4vw,48px);display:grid;gap:40px}
.series-panel{padding:10px;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.45)),var(--walnut-img) center/cover var(--walnut);border:1px solid var(--brass-deep);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.series-panel-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(24px,3.6vw,48px);background:rgba(13,11,9,.93);border:1px solid var(--line-strong)}
.series-panel-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.series-panel-title{font-family:var(--display);font-size:clamp(34px,3vw,44px);line-height:1.15;color:var(--ivory)}
.series-panel-title a{text-decoration:none}
.series-panel-title a:hover{color:var(--brass-light)}
.series-panel-desc{max-width:34em}
.series-panel-books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.series-panel-books img{width:100%;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}

/* book detail */
.detail-top{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:start}
.detail-media{display:flex;flex-direction:column;align-items:center;gap:22px}
.detail-media .book-display{width:100%;max-width:520px;object-fit:contain;filter:drop-shadow(0 22px 36px rgba(0,0,0,.6))}
.cover-btn{min-width:240px}
.detail-info{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-top:clamp(0px,1vw,10px);min-width:0}
.detail-title{font-family:var(--display);font-size:clamp(38px,3.9vw,56px);line-height:1.12;color:var(--ivory)}
.detail-subtitle{font-size:clamp(18px,1.5vw,21px);color:var(--brass-light);line-height:1.4}
.byline{font-size:16px;color:var(--body)}
.detail-summary{font-size:clamp(17px,1.3vw,19px);max-width:34em}
.find{width:100%;margin-top:14px;padding-top:24px;border-top:1px solid var(--line)}
.find-title{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-light);margin-bottom:16px}
.find-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.find-actions .btn{min-width:200px}
.find-link{display:inline-flex;align-items:center;gap:.4em;min-height:48px;padding-inline:8px;color:var(--brass-light);font-size:16px;font-weight:600;text-decoration:underline;text-decoration-color:rgba(208,178,122,.35);text-underline-offset:5px}
.find-link:hover{text-decoration-color:var(--brass-light)}
.find-note{margin-top:14px;font-size:14px;color:var(--muted)}

.detail-lower{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,7vw,104px);margin-top:clamp(48px,5vw,72px);padding-top:clamp(36px,3.6vw,48px);border-top:1px solid var(--line)}
.detail-about,.detail-facts{min-width:0}
.detail-h2{font-family:var(--display);font-size:clamp(30px,2.6vw,38px);line-height:1.2;color:var(--ivory);margin-bottom:18px}
.detail-desc{font-size:clamp(17px,1.3vw,19px);max-width:36em}
.features{margin-top:22px;display:grid;gap:12px}
.features li{display:flex;gap:18px;align-items:baseline}
.feature-num{font-size:13px;font-weight:600;color:var(--brass-light);font-variant-numeric:tabular-nums;letter-spacing:.04em;flex:none;width:22px}
.facts div{display:flex;justify-content:space-between;gap:24px;padding-block:12px;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted)}
.facts dd{margin:0;color:var(--ivory);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.also{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:clamp(48px,5vw,64px);padding-top:24px;border-top:1px solid var(--line)}
.also-title{font-family:var(--display);font-size:clamp(24px,2vw,30px);color:var(--brass-light)}
.also-list{display:flex;flex-wrap:wrap;gap:8px 28px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(36px,5.4vw,80px);align-items:center}
.about-media{margin:0;width:100%;max-width:440px;justify-self:center;border:1px solid var(--brass-deep);padding:8px;background:var(--surface);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4px rgba(184,154,99,.35)}
.about-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:78% 50%}
.about-media.is-portrait img{object-position:50% 20%}
.about-text{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.about-bio{font-size:clamp(17px,1.3vw,19px);max-width:34em}
.closing-line{margin-top:clamp(40px,4.6vw,64px);font-family:var(--display);font-size:clamp(24px,2.2vw,32px);color:var(--brass-light);text-align:center;text-wrap:balance}

/* 404 */
.not-found{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-block:clamp(64px,9vw,128px)}

/* ---------- footer ---------- */
.site-footer{margin-top:0}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:28px 30px}
.footer-mark{font-family:var(--display);font-size:clamp(24px,2vw,28px);letter-spacing:.04em;color:var(--brass-light);line-height:1.1}
.footer-line{font-size:15px;color:var(--body);margin-top:6px}
.footer-nav ul{display:flex;flex-wrap:wrap;gap:4px 22px}
.footer-nav a{display:inline-block;padding-block:10px;font-size:15px;color:var(--ivory);text-decoration:none}
.footer-nav a:hover{color:var(--brass-light)}

/* ---------- cover dialog ---------- */
.cover-dialog{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;background:var(--surface);color:var(--body);border:1px solid var(--brass-deep);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.cover-dialog::backdrop{background:rgba(5,4,3,.82)}
.cover-dialog[open]{display:flex;flex-direction:column}
.cover-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px 14px 22px;border-bottom:1px solid var(--line)}
.cover-dialog-title{font-family:var(--display);font-size:24px;color:var(--ivory)}
.dialog-close{min-height:44px;padding:8px 18px;font-size:15px}
.cover-dialog-body{padding:18px;display:flex;justify-content:center;min-height:0;overflow:auto}
.cover-dialog-body img{width:auto;max-width:100%;max-height:calc(100dvh - 190px);object-fit:contain}
.cover-dialog-note{padding:0 22px 18px;font-size:14px;color:var(--muted);text-align:center}

/* ---------- responsive ---------- */
@media (max-width:899px){
  .menu-toggle{display:inline-flex}
  .js .site-nav{display:none}
  .js .site-nav.is-open{display:block;position:absolute;left:var(--frame);right:var(--frame);top:calc(100% - 13px);background:var(--ink);border:1px solid rgba(184,154,99,.5);border-top:0;box-shadow:0 24px 40px rgba(0,0,0,.6)}
  .header-inner{min-height:60px;flex-wrap:wrap}
  .site-nav ul{flex-direction:column;gap:0}
  .js .site-nav.is-open ul{padding:8px max(12px,calc(var(--gutter) - var(--frame))) 14px}
  .site-nav a{display:block;padding-block:13px;font-size:17px;border-bottom:1px solid var(--line)}
  .site-nav li:last-child a{border-bottom-color:transparent}
  .site-nav a[aria-current="page"]{color:var(--brass-light);border-bottom-color:var(--line)}
  html:not(.js) .site-nav{width:100%}
  html:not(.js) .site-nav ul{flex-direction:row;flex-wrap:wrap;gap:0 20px}

  .hero{min-height:0;align-items:flex-end}
  .hero-img{object-position:74% 50%}
  .hero::before{background:linear-gradient(0deg,rgba(13,11,9,.94) 0%,rgba(13,11,9,.78) 45%,rgba(13,11,9,.45) 100%)}
  .hero-inner{padding-block:72px 56px}
  .hero .btn-brass{width:100%;max-width:420px}

  .gallery{grid-template-columns:minmax(0,1fr)}
  .book-card-media{width:min(100%,360px)}
  .book-card .btn-outline{width:100%}

  .series-panel-inner{grid-template-columns:minmax(0,1fr)}
  .series-panel-books{max-width:460px;width:100%;margin-inline:auto}
  .series-panel-text .btn{width:100%}

  .detail-top{grid-template-columns:minmax(0,1fr)}
  .detail-media .book-display{max-width:400px}
  .find-actions{flex-direction:column;align-items:stretch}
  .find-actions .btn{width:100%}
  .find-link{justify-content:center}
  .find-note{text-align:center}
  .detail-lower{grid-template-columns:minmax(0,1fr)}

  .about{grid-template-columns:minmax(0,1fr)}
  .about-media{max-width:380px}
  .about-text .btn{width:100%}

  .page-count{padding-top:0}
  .footer-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .cover-btn{width:100%;min-width:0}
  .retailer-row{gap:2px 10px}
}

/* ---------- motion ---------- */
@keyframes kkcc-settle{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
main.is-entering .page,main.is-entering .hero-copy,main.is-entering .shelves{animation:kkcc-settle .5s ease-out both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}