/* ShopGoblin — shared site styles. v0.1. Vol. I, May 2026. */

:root{
    --ink:#0B1426;
    --paper:#FAF7F2;
    --paper-2:#F2EDE3;
    --moss-2:#3F5A3E;
    --moss-3:#243822;
    --brass:#B08543;
    --brass-2:#8B6A35;
    --red:#B0392A;
    --mute:#6F6A60;

    --rule: 1px solid rgba(11,20,38,.18);
    --rule-soft: 1px solid rgba(11,20,38,.10);
    --rule-dark: 1px solid rgba(250,247,242,.18);

    --gutter: clamp(20px, 4vw, 56px);
    --container: 1320px;

    --f-serif: "Fraunces", "Times New Roman", serif;
    --f-sans: "Inter", system-ui, sans-serif;
    --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--f-sans);
    font-size:17px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-feature-settings:"ss01","liga","kern";
  }
  ::selection{background:var(--moss-2);color:var(--paper)}

  .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
  .full{padding:0 var(--gutter)}

  /* —— Mono caption baseline —— */
  .mono{
    font-family:var(--f-mono);
    font-size:11px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--mute);
  }
  .mono.ink{color:var(--ink)}
  .mono.paper{color:var(--paper)}
  .mono.brass{color:var(--brass)}

  .serif{font-family:var(--f-serif)}
  .it{font-style:italic;font-variation-settings:"opsz" 80,"SOFT" 80,"WONK" 0}
  .moss{color:var(--moss-2)}
  .brass{color:var(--brass)}
  .red{color:var(--red)}

  /* ============ NAV ============ */
  nav.top{
    border-bottom:var(--rule);
    background:var(--paper);
    position:sticky;top:0;z-index:50;
    backdrop-filter:saturate(120%) blur(8px);
  }
  nav.top .row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:14px var(--gutter);
    gap:24px;
  }
  nav.top .left,nav.top .right{display:flex;align-items:center;gap:28px}
  nav.top .right{justify-content:flex-end}
  nav.top a{
    color:var(--ink);text-decoration:none;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  }
  nav.top a:hover{color:var(--moss-2)}
  .wordmark{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 96,"SOFT" 30,"WONK" 0;
    font-weight:500;
    font-size:22px;
    letter-spacing:.01em;
    display:flex;align-items:center;gap:10px;
    text-decoration:none;color:var(--ink);
  }
  .wordmark .dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--moss-2);
    display:inline-block;
  }
  .cta{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--ink);color:var(--paper);
    border:none;cursor:pointer;
    padding:10px 16px;border-radius:999px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
    text-decoration:none;
    transition:transform .15s ease, background .15s ease;
  }
  .cta:hover{background:var(--moss-3);transform:translateY(-1px)}
  /* nav.top a (0,1,1) outranks .cta (0,1,0) — restore the CTA's paper text */
  nav.top a.cta,
  nav.top a.cta:hover{color:var(--paper)}
  .cta .arr{display:inline-block;transform:translateY(-1px)}

  /* ============ COLOPHON BAR ============ */
  .colophon{
    border-bottom:var(--rule);
    background:var(--paper-2);
  }
  .colophon .row{
    display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
    padding:9px var(--gutter);
  }
  .colophon .sep{color:rgba(11,20,38,.35)}

  /* ============ OPENING SPREAD ============ */
  .opener{
    padding:clamp(48px, 8vw, 120px) var(--gutter) clamp(56px, 9vw, 140px);
    border-bottom:var(--rule);
    position:relative;
    overflow:hidden;
  }
  .opener .grid{
    display:grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap:clamp(24px, 4vw, 64px);
    align-items:center;
    max-width:var(--container);margin:0 auto;
  }
  /* Hero portrait — the Goblin, framed like a book plate */
  .opener-portrait{
    margin:0;
    border:1px solid var(--ink);
    background:var(--paper-2);
    padding:16px 16px 0;
    position:relative;
  }
  .opener-portrait::after{
    content:"";
    position:absolute;inset:7px;
    border:1px solid rgba(11,20,38,.30);
    pointer-events:none;
  }
  .opener-portrait img{
    display:block;
    width:100%;height:auto;
    aspect-ratio:1/1;
    object-fit:cover;
    background:var(--paper);
  }
  .opener-portrait figcaption{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:13px 4px 12px;
    margin-top:14px;
    border-top:1px solid rgba(11,20,38,.30);
  }
  .opener-portrait figcaption .mono{white-space:nowrap}
  .opener h1{
    font-family:var(--f-serif);
    font-weight:400;
    font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 0;
    font-size:clamp(44px, 6.2vw, 88px);
    line-height:1.02;
    letter-spacing:-.022em;
    margin:0 0 28px;
    color:var(--ink);
    text-wrap:balance;
  }
  .opener h1 em{
    font-style:italic;
    font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0;
    color:var(--moss-2);
  }
  .lede{
    max-width:48ch;
    font-size:19px;
    line-height:1.55;
    color:#1a2438;
    margin:0 0 32px;
  }
  .lede .it{color:var(--ink)}
  .opener .cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:42px}
  .opener .meta{color:var(--mute)}
  .stamps{
    display:flex;flex-wrap:wrap;gap:10px;
    border-top:var(--rule);
    padding-top:22px;
  }
  .stamp{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid rgba(11,20,38,.35);
    padding:6px 12px;border-radius:999px;
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);
    background:transparent;
  }
  .stamp .pip{width:6px;height:6px;border-radius:50%;background:var(--moss-2)}
  .stamp.alt .pip{background:var(--brass)}
  .stamp.red .pip{background:var(--red)}

  .markrule{
    position:absolute;left:0;right:0;bottom:0;height:1px;
  }

  /* small ornaments */
  .ornament{
    font-family:var(--f-serif);
    color:var(--brass);
    font-size:24px;line-height:1;
    display:inline-block;
  }

  /* ============ TICKER ============ */
  .ticker{
    background:var(--ink);
    color:var(--paper);
    border-bottom:1px solid rgba(250,247,242,.10);
    overflow:hidden;
    position:relative;
  }
  .ticker .track{
    display:flex;gap:64px;
    padding:18px 0;
    animation:marquee 60s linear infinite;
    white-space:nowrap;
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 96,"SOFT" 50,"WONK" 0;
    font-size:28px;
    font-weight:400;
  }
  .ticker .track span{display:inline-flex;align-items:center;gap:18px}
  .ticker .track i{
    font-style:italic;color:var(--brass);
    font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0;
  }
  .ticker .track .sep{color:var(--moss-2);font-size:22px}
  @keyframes marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }

  /* ============ TABLE OF CONTENTS ============ */
  .toc{
    padding:clamp(72px, 9vw, 140px) var(--gutter);
    background:var(--paper);
    border-bottom:var(--rule);
  }
  .toc .grid{
    max-width:var(--container);margin:0 auto;
    display:grid;
    grid-template-columns: 280px 1fr;
    gap:clamp(24px, 5vw, 88px);
    align-items:start;
  }
  .toc .header{
    position:sticky;top:90px;
  }
  .toc h2{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:clamp(40px, 4.6vw, 64px);
    line-height:1;
    letter-spacing:-.02em;
    margin:14px 0 18px;
  }
  .toc h2 em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .toc .note{max-width:30ch;color:var(--mute);font-size:14px;line-height:1.55}
  .toc-list{list-style:none;margin:0;padding:0;border-top:var(--rule)}
  .toc-row{
    display:grid;
    grid-template-columns: 56px 1fr auto 64px;
    align-items:baseline;
    gap:18px;
    padding:18px 0;
    border-bottom:var(--rule-soft);
  }
  .toc-row:last-child{border-bottom:var(--rule)}
  .toc-row .num{
    font-family:var(--f-serif);
    font-style:italic;
    font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0;
    color:var(--brass);
    font-size:22px;
  }
  .toc-row .title{
    font-family:var(--f-serif);
    font-size:22px;
    line-height:1.25;
    font-variation-settings:"opsz" 96,"SOFT" 40,"WONK" 0;
  }
  .toc-row .title small{
    display:block;
    font-family:var(--f-sans);
    font-size:13.5px;
    color:var(--mute);
    margin-top:4px;
    letter-spacing:0;text-transform:none;
    line-height:1.45;
  }
  .toc-row .dots{
    border-bottom:1px dotted rgba(11,20,38,.25);
    align-self:end;
    margin-bottom:6px;
    transform:translateY(-2px);
  }
  .toc-row .pg{
    font-family:var(--f-mono);
    font-size:13px;
    color:var(--ink);
    text-align:right;
    letter-spacing:.06em;
  }

  /* ============ AUTHOR BIO (Penguin Classics style) ============ */
  .bio{
    background:var(--paper-2);
    padding:clamp(72px, 9vw, 140px) var(--gutter);
    border-bottom:var(--rule);
    position:relative;
  }
  .bio .grid{
    max-width:var(--container);margin:0 auto;
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:clamp(24px, 5vw, 80px);
    align-items:start;
  }
  .bio .label{margin-bottom:18px}
  .bio h2{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:clamp(40px, 4.6vw, 64px);
    line-height:1.02;
    letter-spacing:-.02em;
    margin:0 0 36px;
    max-width:18ch;
    text-wrap:balance;
  }
  .bio h2 em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .bio .body{
    column-count:2;
    column-gap:36px;
    font-size:16.5px;line-height:1.62;
    color:#1a2438;
  }
  .bio .body p{margin:0 0 1em}
  .bio .body p:first-child::first-letter{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:500;
    float:left;
    font-size:5.2em;
    line-height:.85;
    padding:6px 12px 0 0;
    color:var(--moss-3);
  }
  .bio .body em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 96,"SOFT" 80,"WONK" 0}

  .vitals{
    border-top:1px solid var(--ink);
    border-bottom:1px solid var(--ink);
    padding:6px 0;
  }
  .vitals .v-row{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:14px;
    padding:12px 0;
    border-bottom:var(--rule-soft);
    align-items:baseline;
  }
  .vitals .v-row:last-child{border-bottom:none}
  .vitals .k{
    font-family:var(--f-mono);
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--mute);
  }
  .vitals .vv{
    font-family:var(--f-serif);
    font-size:17.5px;
    font-variation-settings:"opsz" 96,"SOFT" 40,"WONK" 0;
    color:var(--ink);
  }
  .vitals .vv em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0}
  .vitals .head{
    font-family:var(--f-mono);
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);
    padding:6px 0 10px;
  }

  /* Goblin engraving portrait — image-based, framed like a book frontispiece */
  .goblin-mark{
    display:block;
    margin:0 auto 22px;
    width:170px;
    background:var(--paper-2);
    border:1px solid var(--ink);
    padding:10px 10px 0;
    position:relative;
  }
  .goblin-mark::after{
    content:"";
    position:absolute;inset:5px;
    border:1px solid rgba(11,20,38,.30);
    pointer-events:none;
  }
  .goblin-mark.lg{width:240px}
  .goblin-mark img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:cover;
    background:var(--paper);
  }
  .goblin-mark .nameplate{
    margin-top:8px;
    padding:6px 4px 8px;
    border-top:1px solid rgba(11,20,38,.35);
    text-align:center;
    font-family:var(--f-mono);
    font-size:9px;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--ink);
  }
  /* Profile cameo image — fills the existing .quote .cameo container */
  .quote .cameo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
  }

  /* ============ PULL QUOTE ============ */
  .quote{
    padding:clamp(72px, 9vw, 140px) var(--gutter);
    border-bottom:var(--rule);
    background:var(--paper);
  }
  .quote .grid{
    max-width:1180px;margin:0 auto;
    display:grid;
    grid-template-columns: 220px 1fr;
    gap:48px;
    align-items:center;
  }
  .quote .cameo{
    border:1px solid var(--ink);
    background:var(--paper-2);
    aspect-ratio: 1 / 1.15;
    display:flex;align-items:center;justify-content:center;
    padding:16px;
    position:relative;
  }
  .quote .cameo::after{
    content:"";
    position:absolute;inset:6px;
    border:1px solid rgba(11,20,38,.35);
    pointer-events:none;
  }
  blockquote.pull{
    margin:0;
    font-family:var(--f-serif);
    font-style:italic;
    font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0;
    font-weight:400;
    font-size:clamp(34px, 4.4vw, 60px);
    line-height:1.08;
    letter-spacing:-.018em;
    color:var(--ink);
    text-wrap:balance;
  }
  blockquote.pull .open{color:var(--brass);margin-right:.05em}
  blockquote.pull .close{color:var(--brass);margin-left:.05em}
  .quote .attrib{
    margin-top:28px;
    border-top:var(--rule);
    padding-top:14px;
  }

  /* ============ PRICING MENU ============ */
  .menu{
    padding:clamp(72px, 9vw, 140px) var(--gutter);
    background:var(--paper);
    border-bottom:var(--rule);
  }
  .menu .head{
    max-width:var(--container);margin:0 auto 56px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:end;
  }
  .menu h2{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:clamp(44px, 5.2vw, 76px);
    line-height:1;
    letter-spacing:-.02em;
    margin:14px 0 0;
    text-wrap:balance;
  }
  .menu h2 em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .menu .head .note{max-width:34ch;color:var(--mute);font-size:14.5px;line-height:1.55}
  .menu .list{
    max-width:var(--container);margin:0 auto;
    border-top:2px solid var(--ink);
  }
  .menu-row{
    display:grid;
    grid-template-columns: 80px 1fr 220px;
    gap:24px;
    align-items:baseline;
    padding:34px 0;
    border-bottom:var(--rule);
  }
  .menu-row .roman{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-size:44px;
    line-height:1;
    color:var(--ink);
  }
  .menu-row .body h3{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:34px;
    line-height:1.05;
    margin:0 0 10px;
    letter-spacing:-.015em;
  }
  .menu-row .body h3 em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .menu-row .body p{
    margin:0 0 8px;
    max-width:54ch;color:#26324a;font-size:15.5px;line-height:1.55;
  }
  .menu-row .body .incl{
    margin-top:14px;
    display:flex;flex-wrap:wrap;gap:8px 14px;
  }
  .menu-row .body .incl span{
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);
  }
  .menu-row .price{
    text-align:right;
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-size:54px;line-height:1;
    color:var(--ink);
    letter-spacing:-.02em;
  }
  .menu-row .price small{
    display:block;
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--mute);
    margin-top:10px;
    font-weight:400;
  }
  .menu-row.feature .body h3{color:var(--ink)}
  .menu-row.feature .price{color:var(--brass)}
  .menu-row .body .cta{margin-top:18px}
  .menu .foot{
    max-width:var(--container);margin:28px auto 0;
    display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
  }

  /* ============ HATE SECTION ============ */
  .hate{
    background:var(--moss-3);
    color:var(--paper);
    padding:clamp(72px, 9vw, 140px) var(--gutter);
    border-bottom:1px solid rgba(250,247,242,.18);
  }
  .hate .grid{
    max-width:var(--container);margin:0 auto;
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap:clamp(24px, 5vw, 88px);
    align-items:start;
  }
  .hate .label{color:rgba(250,247,242,.6);margin-bottom:18px}
  .hate h2{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:clamp(40px, 5vw, 72px);
    line-height:1;
    letter-spacing:-.02em;
    margin:0;
    text-wrap:balance;
  }
  .hate h2 em{font-style:italic;color:var(--brass);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .hate ol{
    margin:0;padding:0;list-style:none;
    border-top:var(--rule-dark);
    counter-reset:hates;
  }
  .hate li{
    counter-increment:hates;
    display:grid;
    grid-template-columns:64px 1fr;
    gap:18px;
    padding:22px 0;
    border-bottom:var(--rule-dark);
    align-items:baseline;
  }
  .hate li::before{
    content:counter(hates, upper-roman) ".";
    font-family:var(--f-serif);
    font-style:italic;
    font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0;
    font-size:22px;
    color:var(--brass);
  }
  .hate li p{
    margin:0;
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 96,"SOFT" 40,"WONK" 0;
    font-size:23px;line-height:1.32;
    color:var(--paper);
    text-wrap:pretty;
  }
  .hate li p em{font-style:italic;color:var(--brass);font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0}
  .hate .foot{
    grid-column:1 / -1;
    margin-top:36px;
    display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:18px;
    color:rgba(250,247,242,.6);
  }

  /* ============ ARTIFACT (PDF mockup) ============ */
  .artifact{
    padding:clamp(72px, 9vw, 140px) var(--gutter);
    background:var(--paper);
    border-bottom:var(--rule);
    overflow:hidden;
  }
  .artifact .grid{
    max-width:var(--container);margin:0 auto;
    display:grid;
    grid-template-columns: 1fr 1.05fr;
    gap:clamp(24px, 6vw, 96px);
    align-items:center;
  }
  .artifact h2{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:clamp(40px, 5vw, 72px);
    line-height:1;
    letter-spacing:-.02em;
    margin:14px 0 22px;
    text-wrap:balance;
  }
  .artifact h2 em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .artifact .body{max-width:46ch;color:#1a2438;font-size:16.5px;line-height:1.62;margin-bottom:24px}
  .artifact ul.specs{
    list-style:none;margin:0;padding:0;
    border-top:var(--rule);
  }
  .artifact ul.specs li{
    display:grid;grid-template-columns:140px 1fr;gap:14px;
    padding:12px 0;border-bottom:var(--rule-soft);
  }
  .artifact ul.specs li:last-child{border-bottom:var(--rule)}
  .artifact ul.specs .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .artifact ul.specs .v{font-family:var(--f-serif);font-size:17px;font-variation-settings:"opsz" 96,"SOFT" 40,"WONK" 0}
  .artifact ul.specs .v em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0}

  /* The PDF document mockup */
  .doc-stage{
    position:relative;
    aspect-ratio: 1 / 1.05;
    display:flex;align-items:center;justify-content:center;
  }
  .doc{
    position:relative;
    width:78%;
    aspect-ratio: 8.5 / 11;
    background:var(--paper-2);
    color:var(--ink);
    border:1px solid rgba(11,20,38,.25);
    box-shadow:
      0 1px 0 rgba(11,20,38,.06),
      0 30px 60px -20px rgba(11,20,38,.35),
      0 8px 20px -10px rgba(11,20,38,.2);
    transform:rotate(-4.5deg);
    padding:5.2% 6%;
    display:flex;flex-direction:column;
    overflow:hidden;
  }
  .doc::before{
    content:"";
    position:absolute;inset:8px;
    border:1px solid rgba(11,20,38,.18);
    pointer-events:none;
  }
  .doc .doc-head{
    display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid rgba(11,20,38,.45);
    padding-bottom:6px;
    font-family:var(--f-mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  }
  .doc .doc-num{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-size:42px;line-height:.9;
    margin:14px 0 4px;
  }
  .doc .doc-title{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 0;
    font-size:18px;line-height:1.08;
    margin:0 0 14px;
    max-width:14ch;
  }
  .doc .doc-title em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .doc .doc-rows{
    border-top:1px solid rgba(11,20,38,.35);
    margin-top:auto;
    padding-top:8px;
  }
  .doc .doc-row{
    display:grid;grid-template-columns:18px 1fr auto;gap:6px;
    padding:5px 0;
    border-bottom:1px dotted rgba(11,20,38,.25);
    font-size:9px;
    align-items:baseline;
  }
  .doc .doc-row .rn{font-family:var(--f-serif);font-style:italic;color:var(--brass);font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0}
  .doc .doc-row .rt{font-family:var(--f-serif);font-variation-settings:"opsz" 96,"SOFT" 40,"WONK" 0;font-size:10px}
  .doc .doc-row .rg{font-family:var(--f-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase}
  .doc .doc-row .rg.mild{color:var(--brass-2)}
  .doc .doc-row .rg.cons{color:var(--red)}
  .doc .doc-row .rg.ok{color:var(--moss-2)}
  .doc .doc-foot{
    margin-top:6px;
    display:flex;justify-content:space-between;
    font-family:var(--f-mono);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  }

  /* WAX SEAL */
  .seal{
    position:absolute;
    right:-10px;top:-20px;
    width:148px;height:148px;
    transform:rotate(12deg);
    z-index:3;
    filter: drop-shadow(0 8px 14px rgba(176,57,42,.35));
  }
  .seal svg{display:block;width:100%;height:100%}
  .doc-stage .corner-label{
    position:absolute;
    left:8%;bottom:6%;
    font-family:var(--f-mono);
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--mute);
    display:flex;align-items:center;gap:10px;
  }
  .doc-stage .corner-label .line{width:36px;height:1px;background:var(--mute)}

  /* ============ PROCESS strip ============ */
  .process{
    background:var(--paper-2);
    border-bottom:var(--rule);
    padding:clamp(56px, 7vw, 100px) var(--gutter);
  }
  .process .grid{
    max-width:var(--container);margin:0 auto;
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap:24px;
    align-items:start;
  }
  .process .head{
    grid-column:span 4;
    position:sticky;top:90px;
  }
  .process h2{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:clamp(36px, 4vw, 56px);
    line-height:1;
    letter-spacing:-.02em;
    margin:14px 0 16px;
  }
  .process h2 em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .process .steps{
    grid-column:span 8;
    border-top:var(--rule);
  }
  .process .step{
    display:grid;
    grid-template-columns: 90px 1fr 180px;
    gap:24px;
    padding:24px 0;
    border-bottom:var(--rule-soft);
    align-items:baseline;
  }
  .process .step:last-child{border-bottom:var(--rule)}
  .process .step .when{
    font-family:var(--f-mono);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--mute);
  }
  .process .step h4{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 0;
    font-weight:400;
    font-size:24px;
    line-height:1.15;
    margin:0 0 6px;
    letter-spacing:-.01em;
  }
  .process .step h4 em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .process .step p{margin:0;color:#26324a;font-size:14.5px;line-height:1.55;max-width:48ch}
  .process .step .glyph{
    font-family:var(--f-serif);
    font-style:italic;
    color:var(--brass);
    font-size:18px;
    text-align:right;
    font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0;
  }

  /* ============ TRADEMARKS bar ============ */
  .tm{
    background:var(--ink);color:var(--paper);
    padding:clamp(72px, 9vw, 120px) var(--gutter);
    border-bottom:1px solid rgba(250,247,242,.18);
  }
  .tm .grid{
    max-width:var(--container);margin:0 auto;
    display:grid;grid-template-columns: 1fr 1fr;
    gap:clamp(24px, 5vw, 80px);
    align-items:end;
  }
  .tm h2{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:clamp(40px, 5vw, 72px);
    line-height:1;
    letter-spacing:-.02em;
    margin:14px 0 0;text-wrap:balance;
  }
  .tm h2 em{font-style:italic;color:var(--brass);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .tm .marks{
    grid-column:1 / -1;
    margin-top:48px;
    display:grid;grid-template-columns:repeat(4, 1fr);gap:28px;
    border-top:var(--rule-dark);
    padding-top:28px;
  }
  .tm .mark .name{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;
    font-size:32px;line-height:1.05;
    margin:0 0 10px;
    color:var(--paper);
  }
  .tm .mark .name sup{
    font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
    color:var(--brass);vertical-align:super;
    margin-left:4px;
  }
  .tm .mark p{margin:0;color:rgba(250,247,242,.7);font-size:14px;line-height:1.5}

  /* ============ FAQ as marginalia ============ */
  .faq{
    padding:clamp(72px, 9vw, 140px) var(--gutter);
    background:var(--paper);
    border-bottom:var(--rule);
  }
  .faq .grid{
    max-width:var(--container);margin:0 auto;
    display:grid;grid-template-columns: 1fr 2fr;
    gap:clamp(24px, 5vw, 88px);
    align-items:start;
  }
  .faq .head{position:sticky;top:90px}
  .faq h2{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:clamp(36px, 4.4vw, 60px);
    line-height:1;letter-spacing:-.02em;
    margin:14px 0 16px;text-wrap:balance;
  }
  .faq h2 em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .faq .list{border-top:var(--rule)}
  .faq-item{
    display:grid;grid-template-columns: 220px 1fr;gap:24px;
    padding:24px 0;border-bottom:var(--rule-soft);
  }
  .faq-item:last-child{border-bottom:var(--rule)}
  .faq-item .q{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 0;
    font-size:20px;line-height:1.2;
    letter-spacing:-.01em;
  }
  .faq-item .q em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0}
  .faq-item .a{font-size:15.5px;line-height:1.6;color:#1a2438}
  .faq-item .a em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0}

  /* ============ SIGN OFF ============ */
  .signoff{
    padding:clamp(72px, 9vw, 140px) var(--gutter);
    background:var(--paper-2);
    text-align:left;
    border-bottom:var(--rule);
  }
  .signoff .inner{
    max-width:1000px;margin:0 auto;
    display:grid;grid-template-columns: 1fr 1fr;
    gap:48px;align-items:end;
  }
  .signoff h2{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-weight:400;
    font-size:clamp(40px, 5.4vw, 80px);
    line-height:.98;
    letter-spacing:-.022em;
    margin:14px 0 0;
    text-wrap:balance;
  }
  .signoff h2 em{font-style:italic;color:var(--moss-2);font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0}
  .signoff .right{
    display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  }
  .signoff .sig{
    font-family:var(--f-serif);
    font-style:italic;
    font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 0;
    font-size:38px;line-height:1;
    color:var(--moss-3);
  }
  .signoff .note{color:var(--mute);font-size:14px;max-width:36ch}

  /* ============ FOOTER COLOPHON ============ */
  footer.book{
    background:var(--paper);
    padding:48px var(--gutter) 32px;
  }
  footer.book .row{
    max-width:var(--container);margin:0 auto;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:32px;
    border-top:2px solid var(--ink);
    padding-top:28px;
  }
  footer.book h5{
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    margin:0 0 14px;color:var(--ink);font-weight:500;
  }
  footer.book a{
    display:block;color:var(--ink);text-decoration:none;
    font-size:14.5px;padding:4px 0;
  }
  footer.book a:hover{color:var(--moss-2)}
  footer.book .end{
    max-width:var(--container);margin:36px auto 0;
    padding-top:18px;
    border-top:var(--rule-soft);
    display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:14px;
  }
  footer.book .end em{
    font-family:var(--f-serif);font-style:italic;color:var(--moss-2);
    font-variation-settings:"opsz" 96,"SOFT" 90,"WONK" 0;
    font-size:15px;
  }
  footer.book .typefaces{
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
    max-width:60ch;
  }
  footer.book .mmxxvi{
    font-family:var(--f-serif);
    font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0;
    font-size:18px;color:var(--ink);
  }

  /* ============ Responsive ============ */
  @media (max-width: 920px){
    .opener .grid,
    .toc .grid,
    .bio .grid,
    .quote .grid,
    .menu .head,
    .hate .grid,
    .artifact .grid,
    .process .grid,
    .tm .grid,
    .faq .grid,
    .signoff .inner,
    .menu-row{ grid-template-columns: 1fr !important; }
    .menu-row{padding:24px 0}
    .menu-row .price{text-align:left}
    .bio .body{column-count:1}
    .toc-row{grid-template-columns:40px 1fr auto}
    .toc-row .dots{display:none}
    nav.top .left a:not(.cta){display:none}
    nav.top .right a:not(.cta){display:none}
    .process .step{grid-template-columns: 70px 1fr;}
    .process .step .glyph{display:none}
    .tm .marks{grid-template-columns:repeat(2,1fr)}
    footer.book .row{grid-template-columns:1fr 1fr}
    .faq-item{grid-template-columns:1fr}
    .hate li{grid-template-columns:40px 1fr}
    .seal{width:108px;height:108px;right:-6px;top:-12px}
  }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .ticker .track { animation: none !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ PRINT ============ */
@media print {
  @page { margin: 18mm 16mm; }
  html, body {
    background: #FAF7F2 !important;
    color: #0B1426 !important;
    font-size: 11pt;
    line-height: 1.45;
  }
  /* Hide chrome that doesn't belong on paper */
  nav.top, .ticker, .foot, .cta, .stamps, .summon-summary, .form-actions { display: none !important; }
  /* Dark sections to ink-on-paper */
  .hate, .tm, .three-lines, .final {
    background: #FAF7F2 !important;
    color: #0B1426 !important;
    border-top: 1px solid #0B1426 !important;
    border-bottom: 1px solid #0B1426 !important;
  }
  .hate *, .tm *, .three-lines *, .final * { color: #0B1426 !important; }
  /* PDF mockup shadow off */
  .artifact .doc {
    box-shadow: none !important;
    transform: none !important;
    border: 1px solid #0B1426 !important;
  }
  .seal { display: none !important; }
  /* Avoid splitting heading from next paragraph */
  h1, h2, h3 { page-break-after: avoid; }
  .toc-row, .menu-row, .step, .faq-item { page-break-inside: avoid; }
  a[href]::after {
    content: " (" attr(href) ")";
    font-family: "IBM Plex Mono", monospace;
    font-size: 9pt;
    color: #6F6A60;
  }
  a[href^="#"]::after, a[href^="mailto:"]::after { content: ""; }
}

/* Footer: decorative span entries should look like the surrounding links */
footer.book .col span {
  display: block;
  font-family: var(--f-serif);
  font-size: 14.5px;
  color: rgba(11,20,38,.7);
  padding: 4px 0;
}

/* ============ NOTEBOOK / NEWSLETTER section (home) ============ */
.notebook-home {
  padding: clamp(72px, 9vw, 140px) var(--gutter);
  border-bottom: var(--rule);
  background: var(--paper);
}
.notebook-home .inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.notebook-home .mono { color: var(--mute); margin: 0 0 22px; }
.notebook-home h2 {
  font-family: var(--f-serif);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -.028em;
  margin: 0 0 24px;
  max-width: 16ch;
}
.notebook-home h2 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 0;
  color: var(--moss-2);
}
.notebook-home .dek {
  font-family: var(--f-serif);
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 80;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  opacity: .82;
  max-width: 50ch;
  margin: 0;
}
.notebook-home .right { display: flex; flex-direction: column; gap: 12px; }
.notebook-home .sub-foot {
  margin-top: 18px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mute);
}
.notebook-home .sub-foot a {
  color: var(--moss-2);
  border-bottom: 1px solid rgba(63,90,62,.40);
  text-decoration: none;
}
.notebook-home .sub-foot a:hover { border-bottom-color: var(--moss-2); }

@media (max-width: 920px) {
  .notebook-home .inner { grid-template-columns: 1fr; }
}

/* ============ CRAFT POLISH ============ */

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Visible focus that respects the brand (no Chrome-blue boxes) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--moss-2);
  outline-offset: 3px;
  border-radius: 2px;
}
.cta:focus-visible {
  outline-color: var(--brass);
  outline-offset: 3px;
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker .track { animation: none !important; }
}

/* Better text rendering on retina/HiDPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* Selection colour matches the brand */
::selection { background: var(--moss-2); color: var(--paper); }
::-moz-selection { background: var(--moss-2); color: var(--paper); }

/* "Skip to content" link for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 1000;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* "Back to top" — appears after scroll, hidden by default */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--f-serif);
  font-size: 20px;
  z-index: 40;
  transition: background .15s ease, transform .15s ease;
}
.to-top:hover { background: var(--moss-3); transform: translateY(-2px); }
.to-top.is-visible { display: flex; }
@media (max-width: 600px) {
  .to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

/* Print stylesheet — useful since some buyers print the audit confirmation */
@media print {
  nav.top, .ticker, footer.book, .to-top, .skip-link { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
  .cta { display: none; }
  .colophon { display: none; }
}