/* Dynasty Library — sales-free, publications-first, doctrine-locked. */

@font-face{font-family:'ArchivoBlack';src:url('../fonts/ArchivoBlack.ttf');font-display:swap}
@font-face{font-family:'BarlowCondensed';font-weight:500;src:url('../fonts/BarlowCondensed-Medium.ttf');font-display:swap}
@font-face{font-family:'BarlowCondensed';font-weight:600;src:url('../fonts/BarlowCondensed-SemiBold.ttf');font-display:swap}
@font-face{font-family:'BarlowCondensed';font-weight:700;src:url('../fonts/BarlowCondensed-Bold.ttf');font-display:swap}
@font-face{font-family:'Spectral';font-weight:400;src:url('../fonts/Spectral-Regular.ttf');font-display:swap}
@font-face{font-family:'Spectral';font-weight:500;src:url('../fonts/Spectral-Medium.ttf');font-display:swap}
@font-face{font-family:'Spectral';font-weight:600;src:url('../fonts/Spectral-SemiBold.ttf');font-display:swap}
@font-face{font-family:'Spectral';font-style:italic;src:url('../fonts/Spectral-Italic.ttf');font-display:swap}

:root{
  --ink:#0a0a0a;
  --near:#141414;
  --slate:#232323;
  --bone:#e7e4dd;
  --off:#f5f2ea;
  --amber:#F59E0B;
  --amber-soft:#c47c05;
  --mute:#8a8578;
  --edge:#2a2a2a;
  --ok:#22c55e;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'BarlowCondensed',system-ui,sans-serif;
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--off)}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 24px}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--edge);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:'ArchivoBlack';font-size:20px;letter-spacing:.02em;color:var(--off)}
.brand .amber{color:var(--amber)}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{
  font-family:'BarlowCondensed';font-weight:600;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bone);
}
.nav-links a:hover{color:var(--amber)}
.nav-cta{
  border:1px solid var(--amber);
  padding:8px 14px;border-radius:2px;
  font-size:13px;letter-spacing:.1em;
}

/* BACK — a Car runs forty-four minutes, so the way out cannot live at the
   bottom of it. The chip rides inside the already-sticky nav on every interior
   page: always reachable, never a floating object over the words. It is a plain
   link to a real destination rather than a history trick, so it is never dead. */
.nav-back{
  display:inline-flex;align-items:center;gap:8px;
  flex:0 0 auto;margin-right:20px;padding:7px 13px 7px 11px;
  border:1px solid var(--edge);border-radius:2px;
  background:rgba(35,35,35,.55);
  font-family:'BarlowCondensed';font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);white-space:nowrap;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.nav-back:hover{border-color:var(--amber);color:var(--amber);background:var(--slate)}
.nav-back .nb-arrow{font-size:15px;line-height:1;margin-top:-2px}
.nav-back .nb-short{display:none}
.nav-inner .nav-back ~ .brand{margin-right:auto}

/* HERO */
.hero{padding:100px 24px 60px;border-bottom:1px solid var(--edge)}
.eyebrow{
  font-family:'BarlowCondensed';font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);font-size:13px;margin-bottom:18px;
}
.hero h1{
  font-family:'ArchivoBlack';
  font-size:clamp(36px,5.8vw,68px);
  line-height:1.02;letter-spacing:-.01em;
  color:var(--off);margin-bottom:22px;max-width:16ch;
}
.hero h1 .amber{color:var(--amber);display:inline-block;margin-top:.15em}
.hero .lede{
  font-family:'Spectral';font-weight:400;
  font-size:clamp(18px,2.1vw,22px);
  line-height:1.55;color:var(--bone);
  max-width:64ch;margin-bottom:34px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-note{
  font-family:'Spectral';font-size:14px;color:var(--mute);
  margin-top:16px;line-height:1.5;
}
.btn{
  display:inline-block;padding:14px 22px;
  font-family:'BarlowCondensed';font-weight:700;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:2px;transition:transform .1s ease;cursor:pointer;
  border:none;
}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--amber);color:#0a0a0a}
.btn-amber:hover{background:#ffb020;color:#0a0a0a}
.btn-ghost{background:transparent;border:1px solid var(--edge);color:var(--bone)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}

/* PROMISE strip */
.promise{
  background:var(--near);
  border-bottom:1px solid var(--edge);
  padding:44px 24px;
}
.promise-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); /* 4 when FLIP relights */
  gap:26px;
}
.promise-item h3{
  font-family:'ArchivoBlack';font-size:22px;
  color:var(--off);margin-bottom:8px;letter-spacing:-.01em;
}
.promise-item p{
  font-family:'Spectral';font-size:15.5px;line-height:1.55;
  color:var(--bone);
}
@media (max-width:820px){.promise-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.promise-grid{grid-template-columns:1fr}}

/* Section shell */
.section{padding:80px 24px;border-bottom:1px solid var(--edge)}
.section h2{
  font-family:'ArchivoBlack';
  font-size:clamp(28px,3.8vw,42px);
  color:var(--off);margin-bottom:12px;letter-spacing:-.01em;
}
.section p.lead-note{
  font-family:'Spectral';font-size:15px;color:var(--mute);
  max-width:64ch;margin-top:-24px;margin-bottom:38px;line-height:1.55;
}
.section p.lead{
  font-family:'Spectral';font-size:18px;line-height:1.55;
  color:var(--bone);max-width:64ch;margin-bottom:38px;
}

/* Catalog rows */
.shelf-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:20px;gap:16px;flex-wrap:wrap;
}
.shelf-head h3{
  font-family:'ArchivoBlack';font-size:22px;color:var(--off);
  letter-spacing:-.01em;
}
.shelf-meta{
  font-family:'BarlowCondensed';font-weight:600;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);
}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
/* Four-title shelves (Dynasty Magazines) go 4-up on wide screens rather than
   leaving a single orphan card alone on a second row. Scoped to .grid-4 so no
   other shelf changes. */
@media (min-width:1040px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

/* Card */
.card{
  background:var(--near);
  border:1px solid var(--edge);
  border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .15s ease,transform .15s ease;
}
.card:hover{border-color:var(--amber-soft);transform:translateY(-2px)}
.card-cover{
  aspect-ratio:3/4;background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;
  color:var(--mute);
}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.card-cover-ph{
  font-family:'ArchivoBlack';font-size:16px;letter-spacing:.06em;
  color:#3a3a3a;text-align:center;padding:20px;
}
.card-body{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column}
.card-kicker{
  font-family:'BarlowCondensed';font-weight:700;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
  margin-bottom:8px;
}
.card-title{
  font-family:'ArchivoBlack';font-size:20px;color:var(--off);
  letter-spacing:-.01em;line-height:1.15;margin-bottom:8px;
}
.card-sub{
  font-family:'Spectral';font-size:14.5px;line-height:1.5;
  color:var(--bone);margin-bottom:14px;flex:1;
}
.card-meta{
  font-family:'BarlowCondensed';font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;
}
.card-meta span{white-space:nowrap}
.card-meta .dot{color:var(--slate)}
.card-cta{
  display:inline-block;font-family:'BarlowCondensed';font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);
}
.card.soon{opacity:.72}
.card.soon .card-cta{color:var(--mute);pointer-events:none}
.card.soon .card-title{color:var(--bone)}
.badge{
  display:inline-block;background:var(--slate);
  color:var(--off);font-family:'BarlowCondensed';font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;margin-left:6px;
}
.badge.available{background:rgba(34,197,94,.15);color:var(--ok)}
.badge.forge{background:rgba(245,158,11,.15);color:var(--amber)}

/* Card — library card gate */
.gate{
  background:linear-gradient(180deg,#171717 0%,#0e0e0e 100%);
  border:1px solid var(--edge);
  border-radius:6px;padding:36px;
  max-width:640px;margin:0 auto;
}
.gate-inner{display:flex;flex-direction:column;gap:14px}
.gate h3{
  font-family:'ArchivoBlack';font-size:26px;color:var(--off);
  letter-spacing:-.01em;
}
.gate p{
  font-family:'Spectral';font-size:16px;line-height:1.55;
  color:var(--bone);
}
.gate-form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;
}
.gate-form label{
  font-family:'BarlowCondensed';font-weight:600;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  display:flex;flex-direction:column;gap:6px;
}
.gate-form label{min-width:0}
.gate-form label.full{grid-column:1 / -1}
.gate-form input,.gate-form select{
  background:#0a0a0a;border:1px solid var(--edge);
  color:var(--off);font-family:'BarlowCondensed';font-weight:500;
  font-size:15px;padding:12px 14px;border-radius:2px;
  width:100%;min-width:0;box-sizing:border-box;
}
.gate-form input:focus,.gate-form select:focus{
  outline:none;border-color:var(--amber);
}
.gate-check{
  grid-column:1 / -1;
  display:flex;gap:10px;align-items:flex-start;
  font-family:'Spectral';font-size:14px;color:var(--bone);
  line-height:1.45;letter-spacing:0;text-transform:none;font-weight:400;
}
.gate-check input{margin-top:3px;accent-color:var(--amber);width:auto;flex:none}
.gate-submit{grid-column:1 / -1;margin-top:6px}
/* Phones: one column, tighter card padding, so the library card form fits a 320-375px screen. */
@media (max-width:520px){
  .gate{padding:24px 18px}
  .gate-form{grid-template-columns:minmax(0,1fr)}
}
.gate-err{
  grid-column:1 / -1;color:#ff8080;font-family:'Spectral';font-size:14px;
  margin-top:4px;
}
.gate-checkout{
  grid-column:1 / -1;font-family:'Spectral';font-size:15px;color:var(--bone);
  line-height:1.45;border-left:3px solid var(--amber);padding:6px 0 6px 12px;
}
.gate-checkout strong{color:var(--amber);font-weight:600}
.gate-done{
  text-align:center;padding:20px 0;
}
.gate-done .mark{
  font-family:'ArchivoBlack';font-size:52px;color:var(--ok);
  line-height:1;margin-bottom:12px;
}
.gate-fine{
  font-family:'Spectral';font-size:13px;color:var(--mute);
  margin-top:10px;line-height:1.4;
}

/* Doctrine callouts */
.doctrine{
  background:var(--near);border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);padding:60px 24px;
}
.doctrine-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;
}
@media (max-width:720px){.doctrine-grid{grid-template-columns:1fr}}
.doctrine h4{
  font-family:'ArchivoBlack';font-size:20px;color:var(--off);
  margin-bottom:10px;letter-spacing:-.01em;
}
.doctrine p{
  font-family:'Spectral';font-size:16px;line-height:1.55;
  color:var(--bone);
}
.doctrine .pull{
  border-left:3px solid var(--amber);
  padding-left:18px;
  font-family:'Spectral';font-style:italic;font-size:19px;
  color:var(--amber);margin:24px 0;line-height:1.5;
}

/* Footer */
.foot{padding:60px 24px 40px;border-top:1px solid var(--edge)}
.foot-inner{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.foot-title{
  font-family:'ArchivoBlack';font-size:16px;color:var(--off);
  letter-spacing:.02em;
}
.foot-doctrine{
  font-family:'BarlowCondensed';font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  margin-top:4px;
}
.foot-meta p{
  font-family:'BarlowCondensed';font-weight:500;font-size:13px;
  color:var(--mute);letter-spacing:.06em;
}
.foot-meta p.name{color:var(--bone)}

/* Accessibility helpers */
[hidden]{display:none !important}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* Issued card number — the one thing on the confirmation panel a reader has
   to be able to read across the room and write down. */
.gate-card{
  font-family:"Barlow Condensed",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(28px,5vw,42px);
  letter-spacing:.06em;
  line-height:1.15;
  margin:10px 0 14px;
  word-break:break-word;
}

/* RETURN DESK — circulation shelf and the three-choice fare. */
.desk{
  background:linear-gradient(180deg,#171717 0%,#0e0e0e 100%);
  border:1px solid var(--edge);
  border-radius:6px;padding:30px;margin-top:26px;
}
.desk-slots{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.desk-pip{
  width:13px;height:13px;border-radius:50%;
  border:1px solid var(--amber-soft);background:transparent;flex:none;
}
.desk-pip.filled{background:var(--amber);border-color:var(--amber)}
.desk-slot-label{
  font-family:'BarlowCondensed';font-weight:600;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  margin-left:8px;
}
.desk-empty{
  font-family:'Spectral';font-size:16px;line-height:1.55;
  color:var(--bone);margin-top:18px;
}
.desk-list{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.desk-item{
  border:1px solid var(--edge);border-radius:4px;
  background:#0a0a0a;padding:20px;
}
.desk-item-title{
  font-family:'ArchivoBlack';font-size:19px;color:var(--off);
  letter-spacing:-.01em;line-height:1.25;
}
.desk-item-due{
  font-family:'BarlowCondensed';font-weight:600;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  margin-top:7px;
}
.desk-item-actions{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px;
}
.desk-open{
  font-family:'BarlowCondensed';font-weight:600;font-size:14px;
  letter-spacing:.06em;color:var(--amber);
}
.desk-return{padding:9px 18px;font-size:14px}
.desk-return:disabled{opacity:.45;cursor:default}
.desk-fare{margin-top:20px;border-top:1px solid var(--edge);padding-top:18px}
.desk-fare-q{
  font-family:'Spectral';font-size:15px;color:var(--bone);line-height:1.5;
}
.desk-fare-opts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin-top:14px;
}
@media (max-width:640px){.desk-fare-opts{grid-template-columns:1fr}}
.desk-fare-btn{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  background:#111;border:1px solid var(--edge);border-radius:3px;
  padding:13px 15px;cursor:pointer;font:inherit;
}
.desk-fare-btn:hover{border-color:var(--amber);background:#151006}
.desk-fare-label{
  font-family:'BarlowCondensed';font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--off);
}
.desk-fare-sub{
  font-family:'Spectral';font-size:13.5px;color:var(--mute);line-height:1.4;
}
.desk-note{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.desk-note-label{
  font-family:'BarlowCondensed';font-weight:600;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}
.desk-note textarea{
  background:#0a0a0a;border:1px solid var(--edge);color:var(--off);
  font-family:'BarlowCondensed';font-weight:500;font-size:15px;
  padding:12px 14px;border-radius:2px;resize:vertical;
}
.desk-note textarea:focus{outline:none;border-color:var(--amber)}
.desk-note-send{align-self:flex-start}
.desk-flash{
  font-family:'Spectral';font-size:15px;color:var(--ok);
  margin-top:18px;line-height:1.5;
}

/* Four nav links do not fit a phone header. Tighten, then drop the Return
   Desk link on the narrowest screens — the desk is still on the page. */
@media (max-width:820px){
  .nav-links{gap:14px}
  .nav-links a{font-size:13px;letter-spacing:.05em}
}
@media (max-width:600px){
  .nav-links{gap:12px}
  .nav-links a[href="#desk"]{display:none}
  /* A thumb needs more than the desktop chip gives it. */
  .nav-back{margin-right:12px;padding:7px 13px;min-height:42px;letter-spacing:.1em}
  .nav-back .nb-word{display:none}
  .nav-back .nb-short{display:inline}
  .nav-back ~ .nav-links a[href="/#how"]{display:none}
  /* Nothing in a chip-bearing bar may wrap: a two-line brand or a broken
     "Library Card" reads as a bug, so the words hold one line and the type
     steps down. Scoped to bars that carry the chip — the front door has no
     chip and keeps the spacing it already had. */
  .nav-back ~ .brand{font-size:17px;white-space:nowrap;flex:0 0 auto}
  .nav-back ~ .nav-links{flex:0 0 auto}
  .nav-back ~ .nav-links a{white-space:nowrap;font-size:12px}
  /* The chip already goes where these links go, so it replaces them on a
     phone rather than adding a row above them. */
  .nav-back[href="/#publications"] ~ .nav-links a[href="/#publications"]{display:none}
  .nav-back[href="/music/"] ~ .nav-links a[href="./"],
  .nav-back[href="/music/"] ~ .nav-links a[href="../"]{display:none}
  /* The music pages carry a five-item primary nav that already wrapped on a
     phone before the chip existed. Rather than let the chip push it to three
     rows, give the links a clean row of their own beneath the chip and the
     name of the place. Browsers without :has() simply keep today's taller bar. */
  .nav-inner:has(.nav-back[href="/music/"]){
    /* music.css stacks this bar into a column on small screens, which would
       give the chip a row to itself. Row-and-wrap instead: the chip sits beside
       the name of the place, and the links keep the row they already had. */
    flex-direction:row;flex-wrap:wrap;align-items:center;row-gap:4px
  }
  .nav-inner:has(.nav-back[href="/music/"]) .nav-links{
    flex:1 0 100%;justify-content:flex-start;padding-bottom:6px
  }
}
@media (max-width:430px){
  /* Tightest phones: the card link lives on the front door and in the footer,
     so the bar keeps the way out and the name of the place. */
  .nav-back ~ .nav-links a[href="/card/"],
  .nav-back ~ .nav-links a[href="/#card"]{display:none}
  .nav-back ~ .brand{font-size:16px}
}
@media (max-width:359px){
  /* 320px phones: chip, name and Catalog measured 10px too wide. Step the
     chip and the name down one notch so the bar holds one row with no
     sideways scroll. Thumb target stays 42px tall. */
  .nav-back{margin-right:8px;padding:7px 10px;letter-spacing:.06em}
  .nav-back ~ .brand{font-size:14px;letter-spacing:0}
  .nav-back ~ .nav-links a{font-size:11px;letter-spacing:.04em}
}