/* Verbatim Books · immersive / warm cinematic editorial
   Fonts: Libre Caslon Display (display) · Hanken Grotesk (body/labels) · Libre Caslon Text italic (accents)
   The store, big and warm: full-bleed photography, towering-stacks dark, the storefront teal-green
   as signature, amber lamp-glow. Editorial scale, not a template. */

:root{
  /* token contract (semantic names fixed; values bespoke) */
  --surface:    #f2e8d6;   /* warm aged paper (dominant page bg) */
  --surface-2:  #e9dcc4;   /* deeper paper / cards */
  --ink:        #221a12;   /* warm near-black text */
  --ink-soft:   #6c5b46;   /* muted brown text */
  --accent:     #1c7a63;   /* Verbatim teal-green (the storefront) */
  --accent-deep:#12503f;   /* deep green */
  --line:       #d8c7a8;   /* hairlines on paper */
  --font-display:"Libre Caslon Display", Georgia, serif;
  --font-body:  "Hanken Grotesk", system-ui, sans-serif;
  --font-label: "Hanken Grotesk", system-ui, sans-serif;

  /* extras */
  --dark:       #1a1209;   /* warm near-black (the dark shelves, lamp-lit) */
  --dark-2:     #241809;   /* panel on dark */
  --cream:      #f4ead7;   /* text on dark */
  --cream-soft: #cab896;   /* muted text on dark */
  --amber:      #d98a3d;   /* lamp glow / warm CTA */
  --amber-soft: #edb96f;   /* warm highlight (eyebrows, numbers) */
  --green:      #1c7a63;
  --green-bright:#27a085;

  --wrap: 78rem;
}

*{ box-sizing:border-box; }
html{ font-size:18px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }
body{
  margin:0; font-family:var(--font-body); font-size:1.06rem; line-height:1.65;
  color:var(--ink); background:var(--surface); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent-deep); text-decoration:none; }
/* aged-paper grain (secondhand-bookstore texture) */
body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.02; margin:0; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
::selection{ background:var(--accent); color:var(--cream); }

.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }
.eyebrow{ font-family:var(--font-label); font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.serif-i{ font-family:"Libre Caslon Text", Georgia, serif; font-style:italic; color:var(--ink-soft); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-label); font-weight:700; font-size:.82rem; letter-spacing:.04em; padding:.95rem 1.7rem; border-radius:2px; transition:transform .15s, box-shadow .15s, background .15s; }
.btn-green{ background:var(--green); color:#fff; box-shadow:0 10px 26px -12px rgba(28,122,99,.9); }
.btn-green:hover{ background:var(--green-bright); transform:translateY(-2px); }
.btn-amber{ background:var(--amber); color:#231405; }
.btn-amber:hover{ background:var(--amber-soft); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--cream); border:1.5px solid rgba(241,232,216,.5); }
.btn-ghost:hover{ border-color:var(--cream); background:rgba(241,232,216,.08); }
.arrowlink{ font-family:var(--font-label); font-weight:700; font-size:.8rem; letter-spacing:.04em; color:var(--accent-deep); display:inline-flex; align-items:center; gap:.4rem; }
.arrowlink .ar{ transition:transform .2s; }
.arrowlink:hover .ar{ transform:translateX(4px); }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60; transition:background .3s, box-shadow .3s, padding .3s; padding:1.1rem 0; }
.nav .row{ width:min(var(--wrap),92vw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav .brand img{ height:42px; width:auto; transition:height .3s; }
.nav nav{ display:flex; align-items:center; gap:1.6rem; }
.nav nav a{ font-family:var(--font-label); font-weight:600; font-size:.82rem; letter-spacing:.02em; color:var(--cream); opacity:.85; transition:opacity .2s, color .2s; }
.nav nav a:hover, .nav nav a[aria-current="page"]{ opacity:1; }
.nav nav a.cta{ background:var(--green); color:#fff; padding:.55rem 1.1rem; border-radius:2px; opacity:1; }
.nav nav a.cta:hover{ background:var(--green-bright); }
.nav.scrolled{ background:rgba(21,16,12,.92); backdrop-filter:blur(8px); padding:.6rem 0; box-shadow:0 10px 30px -18px rgba(0,0,0,.8); }
.nav.scrolled .brand img{ height:34px; }
/* on light subpages the nav starts solid */
.nav.solid{ background:var(--dark); }
.navtoggle{ display:none; background:none; border:0; cursor:pointer; padding:.3rem; }
.navtoggle span{ display:block; width:26px; height:2px; background:var(--cream); margin:5px 0; transition:.25s; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--cream); overflow:hidden; }
.hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center 38%; transform:scale(1.04); filter:brightness(.82) saturate(1.02); }
.hero::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(26,18,9,.5) 0%, rgba(26,18,9,.2) 26%, rgba(26,18,9,.55) 66%, rgba(26,18,9,.96) 100%),
  radial-gradient(120% 80% at 18% 88%, rgba(26,18,9,.72) 0%, rgba(26,18,9,0) 60%); }
.hero .inner{ position:relative; z-index:2; width:min(var(--wrap),92vw); margin:0 auto; padding:0 0 clamp(3rem,7vh,6rem); }
.hero .eyebrow{ color:var(--amber-soft); margin-bottom:1.2rem; text-shadow:0 1px 14px rgba(0,0,0,.6); }
.hero h1{ font-size:clamp(3.1rem, 8.4vw, 7.8rem); line-height:.94; max-width:15ch; text-shadow:0 2px 30px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5); }
.hero h1 em{ font-family:"Libre Caslon Text", Georgia, serif; font-style:italic; color:var(--amber-soft); }
.hero .sub{ font-size:clamp(1.1rem,1.8vw,1.38rem); max-width:44ch; margin:1.6rem 0 2.2rem; color:#eef0e2; text-shadow:0 1px 16px rgba(0,0,0,.7); }
.hero .actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.scrollcue{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--font-label); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cream-soft); display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scrollcue .ln{ width:1px; height:34px; background:linear-gradient(var(--cream-soft), transparent); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.5); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* ---------- stat strip ---------- */
.stats{ background:var(--dark); color:var(--cream); }
.stats .row{ width:min(var(--wrap),92vw); margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); }
.stats .s{ padding:2.6rem 1.4rem; text-align:center; border-left:1px solid rgba(241,232,216,.1); }
.stats .s:first-child{ border-left:0; }
.stats .n{ font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--amber-soft); }
.stats .l{ font-family:var(--font-label); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-soft); margin-top:.7rem; }
@media(max-width:720px){ .stats .row{ grid-template-columns:repeat(2,1fr); } .stats .s:nth-child(odd){ border-left:0; } .stats .s:nth-child(n+3){ border-top:1px solid rgba(241,232,216,.1); } }

/* ---------- generic section ---------- */
.sec{ padding:clamp(4rem,9vh,7.5rem) 0; }
.kicker{ color:var(--accent); margin-bottom:1.4rem; }

/* intro / editorial split */
.intro .grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media(max-width:880px){ .intro .grid{ grid-template-columns:1fr; } }
.intro .lead{ font-family:var(--font-display); font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.12; color:var(--ink); margin-bottom:1.4rem; }
.intro p.body{ font-size:1.12rem; color:var(--ink-soft); max-width:42ch; }
.framed{ position:relative; }
.framed img{ border-radius:2px; box-shadow:0 40px 70px -40px rgba(31,24,18,.7); }
.framed .tag{ position:absolute; left:-14px; bottom:24px; background:var(--green); color:#fff; font-family:var(--font-label); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.6rem 1rem; box-shadow:0 14px 30px -16px rgba(0,0,0,.6); }

/* ---------- full-bleed scale moment ---------- */
.scene{ position:relative; min-height:88vh; display:flex; align-items:center; color:var(--cream); overflow:hidden; }
.scene .bg{ position:absolute; inset:0; background-size:cover; background-position:center 30%; }
.scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(21,16,12,.86) 0%, rgba(21,16,12,.62) 42%, rgba(21,16,12,.2) 100%); }
.scene .inner{ position:relative; z-index:2; width:min(var(--wrap),92vw); margin-inline:auto; }
.scene blockquote{ margin:0; max-width:24ch; }
.scene .q{ font-family:var(--font-display); font-size:clamp(2.4rem,5.5vw,4.6rem); line-height:1.04; }
.scene .q em{ font-family:"Libre Caslon Text", Georgia, serif; font-style:italic; color:var(--amber-soft); }
.scene cite{ display:block; font-style:normal; margin-top:1.6rem; font-family:var(--font-label); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-soft); }

/* ---------- strange & wonderful strip ---------- */
.quirks{ background:var(--green); color:var(--cream); }
.quirks .wrap{ padding:clamp(3rem,6vh,4.5rem) 0; text-align:center; }
.quirks .eyebrow{ color:rgba(238,240,226,.72); margin-bottom:2rem; }
.quirks .row{ display:grid; grid-template-columns:repeat(5,1fr); }
.quirks .q{ padding:.4rem 1.1rem; border-left:1px solid rgba(238,240,226,.22); display:flex; flex-direction:column; gap:.5rem; }
.quirks .q:first-child{ border-left:0; }
.quirks .q .big{ font-family:var(--font-display); font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.04; }
.quirks .q .sm{ font-family:var(--font-label); font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(238,240,226,.78); }
@media(max-width:760px){ .quirks .row{ grid-template-columns:repeat(2,1fr); gap:1.6rem 0; } .quirks .q:nth-child(odd){ border-left:0; } .quirks .q:nth-child(2n){ border-left:1px solid rgba(238,240,226,.22); } .quirks .q:last-child{ grid-column:1 / -1; border-left:0; } }

/* ---------- what's inside (index of sections) ---------- */
.inside{ background:var(--dark); color:var(--cream); }
.inside .grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media(max-width:880px){ .inside .grid{ grid-template-columns:1fr; } }
.inside h2{ font-size:clamp(2.4rem,5vw,3.6rem); color:var(--cream); }
.inside .kicker{ color:var(--amber-soft); }
.inside .list{ list-style:none; margin:1.5rem 0 0; padding:0; }
.inside .list li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(241,232,216,.14); }
.inside .list .name{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--cream); }
.inside .list .meta{ font-family:var(--font-label); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-soft); white-space:nowrap; }
.inside .photo img{ border-radius:2px; box-shadow:0 40px 70px -40px rgba(0,0,0,.8); }
.inside .photo .cap{ font-family:var(--font-label); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-soft); margin-top:.7rem; }

/* ---------- departments (image tiles) ---------- */
.depts{ background:var(--surface); }
.depts .head{ text-align:center; margin-bottom:2.6rem; }
.depts h2{ font-size:clamp(2.2rem,5vw,3.4rem); color:var(--ink); }
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media(max-width:820px){ .tiles{ grid-template-columns:1fr; } }
.tile{ position:relative; min-height:24rem; display:flex; flex-direction:column; justify-content:flex-end; padding:1.8rem; color:var(--cream); overflow:hidden; border-radius:2px; isolation:isolate; }
.tile .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s ease; z-index:-2; }
.tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(21,16,12,.1) 0%, rgba(21,16,12,.45) 55%, rgba(21,16,12,.9) 100%); }
.tile:hover .bg{ transform:scale(1.06); }
.tile .num{ font-family:var(--font-label); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-soft); }
.tile h3{ font-size:2rem; margin:.4rem 0 .5rem; }
.tile p{ font-size:.98rem; color:#e3d7c4; margin:0 0 1.1rem; max-width:30ch; }
.tile .go{ font-family:var(--font-label); font-weight:700; font-size:.78rem; letter-spacing:.04em; color:#fff; display:inline-flex; gap:.4rem; align-items:center; }
.tile:hover .go .ar{ transform:translateX(4px); }
.tile .go .ar{ transition:transform .2s; }

/* ---------- quote band (warm) ---------- */
.quoteband{ background:var(--surface-2); text-align:center; }
.quoteband blockquote{ margin:0 auto; max-width:30ch; font-family:var(--font-display); font-size:clamp(1.9rem,4vw,3rem); line-height:1.18; color:var(--ink); }
.quoteband blockquote em{ font-family:"Libre Caslon Text", Georgia, serif; font-style:italic; color:var(--accent); }
.quoteband cite{ display:block; font-style:normal; margin-top:1.6rem; font-family:var(--font-label); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- footer ---------- */
.foot{ background:var(--dark); color:var(--cream-soft); padding:clamp(3.5rem,7vh,5.5rem) 0 2rem; }
.foot .grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.6rem; }
@media(max-width:760px){ .foot .grid{ grid-template-columns:1fr; gap:1.8rem; } }
.foot img.logo{ height:60px; width:auto; margin-bottom:1.2rem; }
.foot .blurb{ max-width:34ch; color:var(--cream-soft); }
.foot h4{ font-family:var(--font-label); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-soft); margin-bottom:.9rem; }
.foot a{ color:var(--cream); }
.foot a:hover{ color:var(--amber-soft); }
.foot .hours div{ display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; }
.foot .hours .t{ color:var(--cream-soft); }
.foot .bottom{ width:min(var(--wrap),92vw); margin:2.6rem auto 0; padding-top:1.3rem; border-top:1px solid rgba(241,232,216,.14); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--font-label); font-size:.72rem; letter-spacing:.02em; color:var(--cream-soft); }
.foot .bottom a{ color:var(--cream-soft); }
.foot .bottom a:hover{ color:var(--amber-soft); }

/* ---------- reveal ---------- */
.rise{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.rise.in{ opacity:1; transform:none; }

/* ---------- subpage header band ---------- */
.pagehead{ position:relative; padding:clamp(8rem,16vh,11rem) 0 clamp(3rem,6vh,4.5rem); color:var(--cream); overflow:hidden; }
.pagehead .bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.pagehead::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,16,12,.7), rgba(21,16,12,.82)); }
.pagehead .inner{ position:relative; z-index:2; width:min(var(--wrap),92vw); margin-inline:auto; }
.pagehead .eyebrow{ color:var(--amber-soft); margin-bottom:1rem; }
.pagehead h1{ font-size:clamp(2.8rem,7vw,5.5rem); line-height:.98; max-width:18ch; }
.pagehead p{ margin:1.2rem 0 0; max-width:48ch; color:#e6dac7; font-size:1.1rem; }

/* prose + cards for subpages */
.prose{ max-width:42rem; }
.prose h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--ink); margin:2.4rem 0 1rem; }
.prose h3{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink); margin:1.8rem 0 .6rem; }
.prose p{ font-size:1.1rem; color:var(--ink); }
.prose .serif-i{ color:var(--ink-soft); }
.notecard{ background:var(--surface-2); border-left:4px solid var(--green); padding:1.4rem 1.6rem; margin:1.6rem 0; }
.notecard .eyebrow{ color:var(--accent); display:block; margin-bottom:.5rem; }
.factgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.2rem; margin:2rem 0; }
.fact{ background:var(--surface-2); padding:1.3rem; border-radius:2px; }
.fact .k{ font-family:var(--font-label); font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.fact .v{ font-family:var(--font-display); font-size:1.45rem; color:var(--ink); margin-top:.3rem; }
.fact .v small{ font-family:var(--font-body); font-size:.95rem; color:var(--ink-soft); display:block; margin-top:.2rem; }

.hoursfull{ max-width:34rem; }
.hoursfull .r{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.hoursfull .r:last-child{ border:0; }
.hoursfull .d{ font-family:var(--font-display); font-size:1.4rem; color:var(--ink); }
.hoursfull .t{ color:var(--ink-soft); font-size:1.05rem; }
.hoursfull .r.today .d, .hoursfull .r.today .t{ color:var(--accent-deep); font-weight:700; }
.hoursfull .now{ background:var(--green); color:#fff; font-family:var(--font-label); font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.15rem .5rem; border-radius:2px; margin-left:.6rem; }

/* events list */
.bills{ max-width:46rem; }
.bills .bill{ display:grid; grid-template-columns:auto 1fr; gap:1.6rem; padding:1.6rem 0; border-bottom:1px solid var(--line); }
.bills .bill:last-child{ border:0; }
.bills .when{ text-align:center; min-width:5rem; }
.bills .when .mo{ font-family:var(--font-label); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.bills .when .dy{ font-family:var(--font-display); font-size:2.4rem; line-height:1; color:var(--ink); }
.bills .what h3{ font-size:1.6rem; color:var(--ink); }
.bills .what p{ margin:.3rem 0 0; color:var(--ink-soft); }

/* mobile nav */
@media(max-width:760px){
  .navtoggle{ display:block; }
  .nav nav{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; align-items:flex-start; justify-content:center; gap:1.4rem; background:var(--dark); padding:2rem; transform:translateX(100%); transition:transform .35s ease; }
  .nav nav.open{ transform:none; }
  .nav nav a{ font-size:1.1rem; opacity:1; }
  .nav.menu-open .navtoggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.menu-open .navtoggle span:nth-child(2){ opacity:0; }
  .nav.menu-open .navtoggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .hero .actions{ flex-direction:column; align-items:flex-start; }
  .hero .actions .btn{ width:100%; justify-content:center; }
}