:root{
    /* Palette inherited from the reader's "paper" theme — same product, same skin. */
    --paper:#f6f0e4; --paper2:#ece1cc; --panel:#fbf7ee;
    --ink:#2b2419; --ink-2:#5c5340; --ink-dim:#8a7d64; --rule:#ddd0b3;
    --rust:#a8452f; --rust-dark:#8a3524; --gold:#c9a227; --gold-soft:#e0c469;
    --dark:#1c140c; --dark-2:#2b2015; --cream:#ece0c6; --cream-dim:#a3937066;

    --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    --body:Georgia,"Iowan Old Style","Times New Roman",serif;
    --label:ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

    /* Paper grain — one SVG turbulence, reused by every textured surface. */
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* Paper grain lives on the body so section seams never show as bands. */
  body{margin:0;background-color:var(--paper);background-image:var(--grain);
       background-size:160px 160px;background-blend-mode:multiply;
       color:var(--ink);font-family:var(--body);
       font-size:16px;line-height:1.68;font-variant-numeric:oldstyle-nums;
       -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  ::selection{background:var(--gold-soft);color:var(--dark)}
  h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.08;
           letter-spacing:-.008em}
  p{margin:0}
  a{color:var(--rust);text-underline-offset:3px;text-decoration-thickness:1px}

  .wrap{max-width:1020px;margin:0 auto;padding:0 32px}
  .narrow{max-width:760px}

  /* Dark surfaces get their own grain — overlay, not multiply, so it lifts
     rather than muddies. Paper sections inherit the body grain instead. */
  .grain{position:relative;isolation:isolate}
  .grain::before{content:"";position:absolute;inset:0;background-image:var(--grain);
                 background-size:160px 160px;opacity:.22;mix-blend-mode:overlay;
                 pointer-events:none;z-index:0}
  .grain > *{position:relative;z-index:1}

  .eyebrow{font-family:var(--label);font-size:10.5px;font-weight:500;letter-spacing:.22em;
           text-transform:uppercase;color:var(--ink-dim);margin:0 0 18px}
  .dark .eyebrow{color:#9c8a63}
  .eyebrow .num{color:var(--gold);margin-right:.9em;font-variant-numeric:lining-nums}

  /* ---------- header ---------- */
  .dark{background:var(--dark-2);color:var(--cream)}
  header{position:sticky;top:0;z-index:20;background:rgba(28,20,12,.86);
         backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid #3a2a1c}
  .bar{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
  .mark{font-family:var(--display);font-size:20px;letter-spacing:.16em;text-transform:uppercase;
        color:var(--cream);text-decoration:none;white-space:nowrap}
  .mark b{color:var(--gold);font-weight:400}
  .bar nav a{font-family:var(--label);font-size:12px;letter-spacing:.06em;color:#a39370;
             text-decoration:none;margin-left:26px;padding-bottom:2px;
             border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
  .bar nav a:hover{color:var(--cream);border-bottom-color:var(--gold)}

  /* ---------- hero ---------- */
  .hero{background:
        radial-gradient(120% 80% at 50% 8%, #3a2a1c 0%, var(--dark-2) 42%, var(--dark) 100%);
        color:var(--cream);text-align:center;padding:92px 0 84px;overflow:hidden}
  .hero h1{font-size:clamp(42px,7.4vw,80px);font-weight:300;margin:0 0 22px}
  .hero h1 em{font-style:italic;color:var(--gold-soft)}
  .hero .sub{font-size:clamp(16px,2vw,18.5px);line-height:1.72;color:#b7a582;
             max-width:31em;margin:0 auto 52px}

  /* ---------- rsvp reticle ---------- */
  .stage{max-width:720px;margin:0 auto 46px}
  .reticle{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
           height:clamp(96px,15vw,138px);
           -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
           mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
  .reticle::before,.reticle::after{content:"";position:absolute;left:50%;width:1px;height:12px;
           background:linear-gradient(var(--gold),transparent);opacity:.6}
  .reticle::before{top:6px}
  .reticle::after{bottom:6px;background:linear-gradient(transparent,var(--gold))}
  .focal{font-family:var(--display);font-weight:300;font-size:clamp(38px,8.4vw,76px);
         color:#fdf8ee;white-space:nowrap;padding:0 .5em;
         text-shadow:0 0 60px rgba(224,196,105,.22)}
  .ghost{font-family:var(--display);font-weight:300;font-size:clamp(22px,4.4vw,40px);
         color:#8a7a58;opacity:.55;white-space:nowrap;overflow:hidden}
  .ghost.prev{text-align:right;direction:rtl}
  .ghost.next{text-align:left}
  .track{height:1px;background:#40301e;margin:0 auto;max-width:420px;overflow:hidden}
  .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rust),var(--gold));
           transition:width .14s linear}
  .meter{font-family:var(--label);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
         color:#7d6e50;margin-top:16px;font-variant-numeric:lining-nums}

  /* ---------- buttons ---------- */
  .cta{display:inline-block;font-family:var(--label);font-size:13.5px;font-weight:500;
       letter-spacing:.04em;text-decoration:none;padding:15px 34px;border-radius:2px;
       background:var(--rust);color:#fbf7ee;border:1px solid var(--rust);
       box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 10px 24px -14px rgba(168,69,47,.9);
       transition:background .2s,transform .2s,box-shadow .2s}
  .cta:hover{background:var(--rust-dark);transform:translateY(-1px);
             box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 16px 30px -14px rgba(168,69,47,.95)}
  .cta:active{transform:translateY(0)}
  .cta.ghost-btn{background:transparent;color:var(--cream);border-color:#5c4830;box-shadow:none;
                 margin-left:12px;opacity:.9}
  .cta.ghost-btn:hover{background:#33251699;border-color:var(--gold);color:#fff;opacity:1}

  /* ---------- sections ---------- */
  section{padding:96px 0}
  .split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,12fr);gap:56px;align-items:start}
  section h2{font-size:clamp(30px,4.4vw,44px);font-weight:400;margin:0 0 18px}
  section h2 em{font-style:italic;color:var(--rust)}
  .lede{font-size:17.5px;color:var(--ink-2);max-width:34em}

  /* Printer's ornament divider. */
  .ornament{display:flex;align-items:center;gap:18px;color:var(--gold);
            font-size:15px;line-height:1}
  .ornament::before,.ornament::after{content:"";flex:1;height:1px;
            background:linear-gradient(90deg,transparent,var(--rule),transparent)}

  /* ---------- axes ---------- */
  .axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:24px;margin-top:8px}
  .axis{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:30px 28px;
        box-shadow:0 1px 2px rgba(43,36,25,.04),0 12px 28px -22px rgba(43,36,25,.5);
        transition:transform .25s,box-shadow .25s,border-color .25s}
  .axis:hover{transform:translateY(-3px);border-color:#cdbb96;
              box-shadow:0 2px 4px rgba(43,36,25,.05),0 22px 40px -24px rgba(43,36,25,.55)}
  .glyph{font-family:var(--label);font-size:13px;letter-spacing:.34em;color:var(--gold);margin-bottom:16px}
  .axis h3{font-size:25px;margin:0 0 10px}
  .axis h3 i{color:var(--rust)}
  .axis p{font-size:14.5px;color:var(--ink-2);margin:0 0 18px}
  .axis ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
  .axis li{display:flex;gap:14px;font-size:13.5px;line-height:1.5;color:var(--ink-dim);
           padding:11px 0;border-bottom:1px solid var(--rule)}
  .axis li strong{flex:0 0 5.6em;color:var(--ink);font-weight:400;font-family:var(--display);
                  font-size:17px;line-height:1.25}

  /* ---------- library ---------- */
  .shelf{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:13px;padding:44px 0 0;margin-top:10px}
  .shelf-line{height:6px;border-radius:0 0 2px 2px;margin-bottom:38px;
        background:linear-gradient(180deg,#cbb68d,#96814f 55%,#6f5c33);
        box-shadow:0 12px 22px -12px rgba(43,36,25,.8)}
  .spine{position:relative;flex:0 1 auto;width:78px;height:164px;
         display:flex;align-items:center;justify-content:center;padding:20px 0 36px;
         border-radius:2px 2px 1px 1px;color:var(--cream);
         background:linear-gradient(100deg,#3d2c1d,#241a10 34%,#2f2115 72%,#1a1209);
         box-shadow:inset 0 0 0 1px #4a3927,inset -7px 0 14px -9px #000,
                    0 14px 22px -14px rgba(43,36,25,.95);
         transition:transform .28s cubic-bezier(.2,.7,.2,1)}
  .spine span{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;
              font-family:var(--display);font-size:16px;line-height:1;letter-spacing:.02em}
  .spine::before,.spine::after{content:"";position:absolute;left:10px;right:10px;height:1px;
         background:linear-gradient(90deg,transparent,#7d5f2c,transparent)}
  .spine::before{top:12px}
  .spine::after{bottom:30px}
  .spine em{position:absolute;left:0;right:0;bottom:13px;text-align:center;
            font-family:var(--label);font-style:normal;font-size:7.5px;letter-spacing:.16em;
            text-transform:uppercase;color:var(--gold);font-variant-numeric:lining-nums}
  .spine:hover{transform:translateY(-9px)}
  .spine.locked{color:#7d7057;
        background:linear-gradient(100deg,#eae0ca,#dbcdb0 42%,#e5dabf);
        box-shadow:inset 0 0 0 1px #cdbb96,inset -7px 0 14px -9px rgba(90,74,48,.4),
                   0 12px 20px -14px rgba(43,36,25,.85)}
  .spine.locked::before,.spine.locked::after{
        background:linear-gradient(90deg,transparent,#bfa87c,transparent)}
  .spine.locked em{color:#a08e68}
  .spine.tall{height:186px}
  .spine.short{height:146px}

  .note{position:relative;padding:6px 0 6px 26px;font-size:15px;color:var(--ink-2);max-width:42em}
  .note::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;
                background:linear-gradient(var(--gold),transparent)}

  /* ---------- closer ---------- */
  .closer{background:radial-gradient(110% 80% at 50% 0%,#33241680,transparent 70%),var(--dark);
          color:var(--cream);text-align:center;padding:104px 0 96px}
  .closer h2{font-size:clamp(30px,5vw,50px);font-weight:300;margin:0 0 18px}
  .closer h2 em{font-style:italic;color:var(--gold-soft)}
  .closer p{color:#b7a582;max-width:30em;margin:0 auto 40px}
  footer{background:var(--dark);color:#6f6249;font-family:var(--label);font-size:11.5px;
         letter-spacing:.05em;text-align:center;padding:26px 0 40px}

  /* ---------- reveal ---------- */
  .js-reveal [data-reveal]{opacity:0;transform:translateY(16px)}
  [data-reveal]{transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
  [data-reveal].in{opacity:1;transform:none}

  @media (max-width:880px){
    .split{grid-template-columns:1fr;gap:26px}
    section{padding:74px 0}
  }
  @media (max-width:620px){
    .wrap{padding:0 22px}
    /* Five spines have to fit the viewport; vertical text can't shrink below its width. */
    .shelf{gap:8px}
    .spine{width:58px}
    .spine span{font-size:14px}
    .bar nav{display:none}
    .hero{padding:64px 0 62px}
    .cta{display:block}
    .cta.ghost-btn{margin:12px 0 0}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation:none!important;transition:none!important}
    .js-reveal [data-reveal]{opacity:1;transform:none}
  }

  /* ---------- book & catalogue pages ---------- */
  .page{padding:56px 0 96px}
  .crumb{font-family:var(--label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
         color:var(--ink-dim);margin:0 0 26px}
  .crumb a{color:var(--ink-dim);text-decoration:none}
  .crumb a:hover{color:var(--rust);text-decoration:underline}
  .crumb span{margin:0 .55em;color:var(--rule)}

  .bookhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:start;
            padding-bottom:34px;border-bottom:1px solid var(--rule)}
  .bookhead h1{font-size:clamp(32px,5vw,52px);font-weight:400;margin:0 0 10px}
  .byline{font-family:var(--display);font-size:20px;font-style:italic;color:var(--ink-dim);margin:0 0 20px}
  .blurb{font-size:17.5px;color:var(--ink-2);max-width:34em;margin:0 0 26px}

  .tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px;font-family:var(--label);font-size:10.5px;
        letter-spacing:.12em;text-transform:uppercase}
  .tags span{border:1px solid var(--rule);border-radius:999px;padding:5px 12px;color:var(--ink-dim)}
  .tags span.on{border-color:#d8bd72;color:#8a6a1a;background:#f6eed6}

  .facts{margin:30px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
  .facts li{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule)}
  .facts b{flex:0 0 8.5em;font-weight:400;font-family:var(--label);font-size:10.5px;
           letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);padding-top:3px}

  .chapters{columns:2;column-gap:44px;margin:18px 0 0;padding:0;list-style:none}
  .chapters li{break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
  .chapters li i{font-style:normal;color:var(--gold);font-family:var(--label);font-size:10.5px;
                 letter-spacing:.1em;margin-right:12px;font-variant-numeric:lining-nums}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;
        background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
  .card{background:var(--panel);padding:20px 22px;text-decoration:none;color:inherit;display:block;
        transition:background .2s}
  .card:hover{background:#fff}
  .card h3{font-size:19px;margin:0 0 5px;line-height:1.2}
  .card .au{font-family:var(--display);font-style:italic;font-size:14.5px;color:var(--ink-dim)}
  .card p{font-size:13px;color:var(--ink-2);margin:9px 0 0;line-height:1.55}

  .group{margin:0 0 58px}
  .group h2{font-size:clamp(22px,3vw,30px);margin:0 0 6px}
  .group .count{font-family:var(--label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
                color:var(--ink-dim);margin:0 0 18px;font-variant-numeric:lining-nums}

  .sitefoot{border-top:1px solid var(--rule);padding:44px 0;font-size:13.5px;color:var(--ink-2)}
  .sitefoot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}
  .sitefoot h4{font-family:var(--label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
               color:var(--ink-dim);margin:0 0 10px;font-weight:500}
  .sitefoot ul{margin:0;padding:0;list-style:none;line-height:1.9}
  .sitefoot a{color:var(--ink-2);text-decoration:none}
  .sitefoot a:hover{color:var(--rust);text-decoration:underline}
  .sitefoot .fine{margin-top:34px;font-size:12px;color:var(--ink-dim)}

  @media (max-width:760px){
    .bookhead{grid-template-columns:1fr;gap:26px}
    .chapters{columns:1}
  }