/* ============================================================================
   MOCKUP B — "The Annual"
   Printed on paper, not a screen. Cream stock, black ink, one spot colour.
   Newsreader for reading, Archivo Black for the shouting, mono for the numbers.
   Column rules, a masthead with a date line, and the book treated like an
   artefact rather than a product card.
   ========================================================================== */
:root{
  --stock:#f2ede3;      /* paper */
  --stock2:#e8e1d3;     /* tinted panel */
  --ink:#14110d;
  --ink2:#463f33;
  --faint:#8b8172;
  --rule:#c9c0ae;
  --spot:#c4331e;       /* the one colour — a printer's red */
  --volt:#5a7d0a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--stock);color:var(--ink);font-family:'Newsreader',Georgia,serif;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.w{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3.5vw,40px)}
.mono{font-family:'JetBrains Mono',monospace}
.blk{font-family:'Archivo Black',sans-serif;font-weight:400}
.lbl{font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* masthead — a newspaper flag */
.flag{border-bottom:3px double var(--ink);padding:14px 0 0}
.flagtop{display:flex;justify-content:space-between;align-items:center;
font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;
color:var(--faint);padding-bottom:10px;border-bottom:1px solid var(--rule)}
.flagname{text-align:center;padding:18px 0 14px}
.flagname h1{font-family:'Archivo Black',sans-serif;font-weight:400;
font-size:clamp(1.9rem,7.4vw,5.2rem);line-height:.88;letter-spacing:-.045em;text-transform:uppercase}
.flagname h1 em{font-style:normal;color:var(--spot)}
.flagname .sub{font:400 clamp(11px,1.5vw,14px) 'Newsreader',serif;font-style:italic;
color:var(--ink2);margin-top:10px;letter-spacing:.02em}
.flagnav{display:flex;gap:clamp(10px,2.4vw,28px);justify-content:center;flex-wrap:wrap;
padding:11px 0;border-top:1px solid var(--rule)}
.flagnav a{font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink2);padding-bottom:2px;border-bottom:2px solid transparent}
.flagnav a:hover{color:var(--spot);border-bottom-color:var(--spot)}


/* HERO — the book is the product, so it sits in the middle with the buy row
   directly beneath it. Nobody should have to scroll to find out where to buy. */
.hero2{padding:clamp(28px,4.4vw,52px) 0 clamp(30px,4.6vw,54px);text-align:center;border-bottom:1px solid var(--rule)}
.hero2 .hl{margin:0 auto 14px;max-width:16em}
.hero2 .deck{margin:0 auto 26px;max-width:34em}
.coverC{max-width:250px;margin:0 auto clamp(20px,3vw,30px);position:relative}
.coverC img{width:100%;height:auto;aspect-ratio:900/1350;object-fit:contain;
border:1px solid var(--rule);box-shadow:8px 8px 0 var(--ink)}
.coverC .price{position:absolute;bottom:-12px;left:-12px;background:var(--spot);color:var(--stock);
font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.06em;padding:9px 13px;transform:rotate(-3deg)}
.buyrow{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:16px}
.bbtn{display:inline-flex;align-items:center;gap:8px;background:var(--stock);border:2px solid var(--ink);
color:var(--ink);font:700 12px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
padding:13px 18px;transition:.12s}
.bbtn:hover{background:var(--ink);color:var(--stock)}
.bbtn.prime{background:var(--ink);color:var(--stock)}
.bbtn.prime:hover{background:var(--spot);border-color:var(--spot)}
.bbtn svg{height:15px;width:auto}
.freeline{font:400 15px/1.6 'Newsreader',serif;color:var(--ink2);max-width:34em;margin:0 auto}
.freeline a{color:var(--spot);font-weight:600;border-bottom:1px solid var(--spot)}

/* lede — three columns like a front page */
.front{padding:clamp(26px,4vw,44px) 0;border-bottom:1px solid var(--rule)}
.fgrid{display:grid;grid-template-columns:1.6fr auto;gap:clamp(22px,4vw,48px);align-items:end}
.hl{font-family:'Archivo Black',sans-serif;font-weight:400;
font-size:clamp(1.9rem,5.4vw,3.7rem);line-height:.94;letter-spacing:-.04em;margin-bottom:16px}
.deck{font:400 clamp(15px,1.9vw,20px)/1.5 'Newsreader',serif;color:var(--ink2);margin-bottom:20px;
max-width:26em}
.deck b{font-weight:600;color:var(--ink)}
.byline{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
color:var(--faint);padding-top:12px;border-top:1px solid var(--rule)}
.bookshot{position:relative;max-width:270px;width:100%;justify-self:end;align-self:end}
.bookshot img{width:100%;height:auto;aspect-ratio:900/1350;object-fit:contain;
border:1px solid var(--rule);box-shadow:6px 6px 0 var(--ink)}
.bookshot .price{position:absolute;bottom:-12px;left:-12px;background:var(--spot);color:var(--stock);
font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.06em;padding:9px 13px;
transform:rotate(-3deg)}

/* numbers strip */
.nums{background:var(--ink);color:var(--stock);padding:clamp(16px,2.4vw,24px) 0}
.nums .w{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,26px)}
.num b{display:block;font-family:'JetBrains Mono',monospace;font-weight:700;
font-size:clamp(1.25rem,3.4vw,2.4rem);letter-spacing:-.03em;line-height:1}
.num span{display:block;font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.18em;
text-transform:uppercase;color:#a89e8c;margin-top:6px}

/* section head */
.sec{padding:clamp(34px,5.4vw,64px) 0;border-bottom:1px solid var(--rule)}
.sechead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
padding-bottom:12px;margin-bottom:clamp(20px,3vw,30px);border-bottom:2px solid var(--ink)}
.sechead h2{font-family:'Archivo Black',sans-serif;font-weight:400;
font-size:clamp(1.3rem,3.6vw,2.3rem);letter-spacing:-.04em;text-transform:uppercase}

/* retailers */
.shops{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;background:var(--rule)}
.shop{background:var(--stock);padding:clamp(16px,2.2vw,22px);display:flex;flex-direction:column;
gap:12px;min-height:132px;transition:background .14s}
.shop:hover{background:var(--stock2)}
.shop .mk{height:24px;display:flex;align-items:center}
.shop .mk svg{height:100%;width:auto;max-width:126px}
.shop .fm{font:400 13px 'Newsreader',serif;font-style:italic;color:var(--ink2);margin-top:auto}
.shop .ar{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--spot)}

/* free offer — a coupon */
.coupon{margin:clamp(30px,4.6vw,54px) 0;border:2px dashed var(--ink);padding:clamp(22px,3.4vw,34px);
display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,40px);align-items:center;
background:var(--stock2)}
.coupon h3{font-family:'Archivo Black',sans-serif;font-weight:400;
font-size:clamp(1.3rem,3.4vw,2.1rem);line-height:1.02;letter-spacing:-.035em;margin:8px 0 10px}
.coupon h3 em{font-style:normal;color:var(--spot)}
.coupon p{font:400 15px/1.55 'Newsreader',serif;color:var(--ink2);max-width:36em}
.coupon .was{text-decoration:line-through;color:var(--faint);font-family:'JetBrains Mono',monospace;font-size:.9em}
.btn{display:inline-block;background:var(--ink);color:var(--stock);
font:700 12px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
padding:16px 24px;white-space:nowrap;border:2px solid var(--ink);transition:.12s}
.btn:hover{background:var(--spot);border-color:var(--spot)}

/* contents — a real TOC with leader dots */
.toc-row{display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:baseline;
padding:13px 0;border-bottom:1px solid var(--rule)}
.toc-row .no{font:700 12px 'JetBrains Mono',monospace;color:var(--spot)}
.toc-row .ti{font:600 clamp(1rem,2.1vw,1.32rem) 'Newsreader',serif;letter-spacing:-.01em}
.toc-row .tx{font:400 13.5px/1.5 'Newsreader',serif;color:var(--ink2);margin-top:3px}
.toc-row .pg{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--faint);white-space:nowrap}
a.toc-row:hover .ti{color:var(--spot)}

/* why grid — two column editorial */
.why{columns:2;column-gap:clamp(26px,4vw,52px);column-rule:1px solid var(--rule)}
.why-i{break-inside:avoid;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--rule)}
.why-i h4{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:15px;
letter-spacing:-.02em;text-transform:uppercase;margin-bottom:5px}
.why-i h4 span{color:var(--spot);margin-right:7px}
.why-i p{font:400 14px/1.55 'Newsreader',serif;color:var(--ink2)}

/* tools — dense list */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;background:var(--rule)}
.tool{background:var(--stock);padding:15px 16px;transition:background .14s}
.tool:hover{background:var(--stock2)}
.tool .tn{font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--faint);display:block;margin-bottom:7px}
.tool h4{font:700 14.5px 'Archivo',sans-serif;letter-spacing:-.015em;margin-bottom:3px}
.tool:hover h4{color:var(--spot)}
.tool p{font:400 12.5px/1.45 'Newsreader',serif;color:var(--ink2)}

/* free downloads */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule)}
.dlc{background:var(--stock);padding:clamp(18px,2.6vw,26px);display:flex;flex-direction:column}
.dlc:hover{background:var(--stock2)}
.dlc .n{font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--spot);margin-bottom:12px}
.dlc h4{font-family:'Archivo Black',sans-serif;font-weight:400;
font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.04;letter-spacing:-.035em;
text-transform:uppercase;margin-bottom:9px}
.dlc p{font:400 13.5px/1.5 'Newsreader',serif;color:var(--ink2);flex:1;margin-bottom:15px}
.dlc .go{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.14em}
.dlc:hover .go{color:var(--spot)}

/* pull quote */
.pq{padding:clamp(34px,5.4vw,64px) 0;border-bottom:1px solid var(--rule);text-align:center}
.pq p{font:400 clamp(1.2rem,3.4vw,2.2rem)/1.3 'Newsreader',serif;font-style:italic;
max-width:20em;margin:0 auto;letter-spacing:-.01em}
.pq cite{display:block;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.18em;
text-transform:uppercase;font-style:normal;color:var(--faint);margin-top:18px}


.samples{background:var(--ink);color:var(--stock);padding:clamp(30px,4.6vw,54px) 0}
.samples .sechead{border-bottom-color:var(--stock)}
.samples .sechead h2{color:var(--stock)}
.samples .lbl{color:#a89e8c}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1px;background:#34302a}
.scard{background:var(--ink);padding:clamp(18px,2.6vw,26px);display:flex;flex-direction:column;transition:background .14s}
.scard:hover{background:#1f1b15}
.scard .sn{font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--spot);margin-bottom:11px}
.scard h4{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:clamp(1.1rem,2.3vw,1.45rem);
line-height:1.03;letter-spacing:-.035em;text-transform:uppercase;margin-bottom:9px}
.scard p{font:400 13.5px/1.52 'Newsreader',serif;color:#c2b8a6;flex:1;margin-bottom:15px}
.scard .go{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--stock)}
.scard:hover .go{color:var(--spot)}
.nodecoy{font:400 14.5px/1.6 'Newsreader',serif;font-style:italic;color:#c2b8a6;
max-width:44em;margin-bottom:clamp(20px,3vw,28px)}
.nodecoy b{font-style:normal;font-weight:600;color:var(--stock)}
footer{background:var(--ink);color:var(--stock);padding:clamp(30px,4.6vw,52px) 0 24px;margin-top:0}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(20px,3vw,36px);
padding-bottom:24px;border-bottom:1px solid #34302a}
.fg h5{font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;
color:var(--spot);margin-bottom:11px}
.fg a{display:block;font:400 13.5px 'Newsreader',serif;color:#c2b8a6;padding:4px 0}
.fg a:hover{color:var(--stock)}
.fb{padding-top:18px;font:400 11.5px/1.7 'Newsreader',serif;color:#8b8172}

@media(max-width:820px){
  .fgrid{grid-template-columns:1fr}
  .bookshot{max-width:200px;order:-1;justify-self:start;margin-bottom:6px}
  .nums .w{grid-template-columns:repeat(2,1fr);gap:16px}
  .coupon{grid-template-columns:1fr}
  .why{columns:1}
  .toc-row{grid-template-columns:28px 1fr}
  .toc-row .pg{grid-column:2}
}

/* ---- page-specific ---- */
.flagnav a.on{color:var(--spot);border-bottom-color:var(--spot)}
.fineprint{font:400 13px/1.6 'Newsreader',serif;font-style:italic;color:var(--faint);
margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);max-width:46em}
.fineprint b{font-style:normal;font-weight:600;color:var(--ink2)}
.bigdl{display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,40px);align-items:center;
background:var(--ink);color:var(--stock);padding:clamp(22px,3.4vw,34px);margin-top:8px}
.bigdl .lbl{color:#a89e8c}
.bigdl h3{font-family:'Archivo Black',sans-serif;font-weight:400;
font-size:clamp(1.3rem,3.2vw,2rem);line-height:1.04;letter-spacing:-.035em;margin:9px 0 8px}
.bigdl p{font:400 14.5px/1.55 'Newsreader',serif;color:#c2b8a6;max-width:36em}
.bigdl .btn{background:var(--spot);border-color:var(--spot);color:var(--stock)}
.bigdl .btn:hover{background:var(--stock);color:var(--ink);border-color:var(--stock)}
.board12{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
background:var(--rule);border:1px solid var(--rule);margin-top:8px}
.p12{background:var(--stock);padding:13px 15px;display:flex;align-items:baseline;gap:12px;transition:background .14s}
.p12:hover{background:var(--stock2)}
.p12 .r{font:700 13px 'JetBrains Mono',monospace;color:var(--spot);min-width:22px}
.p12 .n{font:600 15.5px 'Newsreader',serif;letter-spacing:-.01em;flex:1}
.p12:hover .n{color:var(--spot)}
.p12 .t{font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--faint)}
.mockwrap,.rosterwrap{border:1px solid var(--rule);padding:clamp(18px,2.6vw,26px);
background:var(--stock2);min-height:180px}
.tiergap{grid-column:1/-1;background:var(--ink);color:var(--stock);
font:700 9px 'JetBrains Mono',monospace;letter-spacing:.2em;padding:6px 15px}
@media(max-width:820px){.bigdl{grid-template-columns:1fr}}
.mockbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.slotbtn{background:var(--stock);border:1px solid var(--rule);color:var(--ink);
font:700 12px 'JetBrains Mono',monospace;padding:7px 11px;cursor:pointer}
.slotbtn.on{background:var(--ink);color:var(--stock);border-color:var(--ink)}
.slotbtn:hover{border-color:var(--spot);color:var(--spot)}
.mockwrap .btn{margin-top:4px}

.buyat{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;
color:var(--faint);margin:4px 0 16px}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
background:var(--rule);border:1px solid var(--rule);max-width:880px;margin:0 auto clamp(26px,4vw,40px)}
.lg{background:var(--stock);padding:18px 14px 15px;display:flex;flex-direction:column;
align-items:center;gap:9px;transition:background .14s}
.lg:hover{background:var(--stock2)}
.lgm{height:34px;display:flex;align-items:center;justify-content:center;width:100%}
.lgm svg{max-height:100%;max-width:132px;width:auto;height:auto}
.lgf{font:400 11.5px 'Newsreader',serif;font-style:italic;color:var(--faint)}
.freebar{background:var(--ink);color:var(--stock);padding:clamp(22px,3.4vw,34px);
display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,38px);align-items:center;text-align:left;
max-width:880px;margin:0 auto}
.fbl{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--spot)}
.freebar h3{font-family:'Archivo Black',sans-serif;font-weight:400;
font-size:clamp(1.25rem,3.2vw,2rem);line-height:1.04;letter-spacing:-.035em;margin:9px 0 9px}
.freebar h3 em{font-style:normal;color:var(--spot)}
.fbp{font:400 14.5px/1.55 'Newsreader',serif;color:#c2b8a6;max-width:38em}
.btn.big{font-size:13px;padding:18px 26px;background:var(--spot);border-color:var(--spot);color:var(--stock)}
.btn.big:hover{background:var(--stock);color:var(--ink);border-color:var(--stock)}
@media(max-width:760px){.freebar{grid-template-columns:1fr;text-align:center}.fbp{margin:0 auto}}