/* ==========================================================================
   THE HUMAN DISPATCH — Issue Nº 00
   Design rules inherited from the book: flat colour, no gradients, no drop
   shadows, no transparency effects. Seal (sienna) works like a red pen:
   annotations and marks only. The deep green is reserved for purchase actions.
   ========================================================================== */

/* ---------- 1. Fonts (local, WOFF2) ---------- */
@font-face{font-family:"Playfair Display";src:url("../fonts/PlayfairDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/PlayfairDisplay-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/PlayfairDisplay-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/PlayfairDisplay-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/SourceSans3-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/SourceSans3-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/SourceSans3-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. Tokens ---------- */
:root{
  --ink:#1B2838;
  --paper:#F5F0E8;
  --paper-2:#EEE7DA;      /* second paper tone for quiet panels */
  --slip:#FBF8F2;         /* stationery: email examples */
  --rule:#D5CCBA;
  --shadow:#2C2C2C;       /* body text */
  --ink-soft:#4A5568;

  --seal:#C45A3C;         /* marks, rules, art */
  --seal-ink:#A8422A;     /* seal as small text (5.3:1 on paper) */
  --sage:#7A8B6F;
  --sage-ink:#566548;     /* sage as small text (5.5:1 on paper) */

  --buy:#24573D;          /* The Green Signature: purchase actions only */
  --buy-hover:#1A4430;
  --buy-active:#123324;
  --on-buy:#F5F0E8;

  --on-ink:#F5F0E8;
  --on-ink-soft:#CBD1D8;
  --seal-on-ink:#E39A7F;
  --sage-on-ink:#A9B89C;
  --ink-line:#6F7F99;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{margin:0;background:var(--paper);color:var(--shadow);font:400 1.125rem/1.65 var(--sans);font-kerning:normal;text-rendering:optimizeLegibility;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
figure{margin:0}
[hidden]{display:none!important}
.prose{display:flow-root}
.mt-2{margin-top:2rem}.mt-25{margin-top:2.5rem}.mt-09{margin-top:.9rem}.mb-1{margin-bottom:1rem}
.mono-sm{font-size:.95em}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;margin:0}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sage);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--ink);text-decoration-thickness:2px}
em{font-family:var(--serif);font-style:italic}
strong{font-weight:600}
::selection{background:var(--ink);color:var(--paper)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.band-ink :focus-visible,.site-footer :focus-visible{outline-color:var(--paper)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--ink);color:var(--paper);padding:.75rem 1rem;font-weight:600;text-decoration:none}
.skip-link:focus{top:1rem}
[hidden]{display:none!important}

/* ---------- 4. Page grid ---------- */
.grid{display:grid;grid-template-columns:[full-start] 1.25rem [wide-start col-start] minmax(0,1fr) [col-end wide-end] 1.25rem [full-end]}
.grid>*,.subgrid>*{grid-column:col;min-width:0}
.grid>.subgrid{grid-column:full;display:grid;grid-template-columns:subgrid}
.grid>.wide,.subgrid>.wide{grid-column:wide}
.grid>.full{grid-column:full}
@media (min-width:760px){
  .grid{grid-template-columns:[full-start] minmax(1.5rem,1fr) [wide-start] minmax(0,4rem) [col-start] minmax(0,40rem) [col-end] minmax(0,4rem) [wide-end] minmax(1.5rem,1fr) [full-end]}
}
@media (min-width:1180px){
  .grid{grid-template-columns:[full-start] minmax(1.5rem,1fr) [wide-start col-start] minmax(0,38rem) [col-end] 2.5rem [margin-start] 17rem [margin-end wide-end] minmax(1.5rem,1fr) [full-end]}
  .grid>.margin{grid-column:margin}
}

/* ---------- 5. Type helpers ---------- */
.kicker{font:600 .75rem/1.35 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--seal-ink);margin:0 0 .6rem}
.band-ink .kicker{color:var(--seal-on-ink)}
h2{font-size:clamp(1.95rem,1.2rem + 2.6vw,2.8rem);line-height:1.12;letter-spacing:-.005em;margin:0 0 1.1rem}
h3{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);line-height:1.2;margin:0 0 .5rem}
h4{font-size:1.05rem;line-height:1.3;margin:0 0 .6rem}
.lead{font-size:1.25rem;line-height:1.6;color:var(--ink)}
.fine{font-size:.9375rem;line-height:1.5;color:var(--ink-soft)}
.band-ink .fine{color:var(--on-ink-soft)}
.mono{font-family:var(--mono)}
.section{padding-block:clamp(2.25rem,1.5rem + 3vw,3.5rem)}
.section::before{content:"";grid-column:wide;display:block;border-top:1px solid var(--ink);margin-bottom:clamp(1.5rem,1rem + 1.5vw,2.25rem)}
.section--first::before{display:none}
.section-head{margin-bottom:1.1rem}

/* margin notes: print-style marginalia. Beside the text on wide screens, inline elsewhere. */
.margin-note{font:italic 400 1rem/1.5 var(--serif);color:var(--seal-ink);margin:1.25rem 0 1.5rem;padding-left:1rem;border-left:1px solid var(--seal)}
.margin-note cite{display:block;margin-top:.35rem;font:600 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--ink-soft)}
.margin-note p{margin:0}
@media (min-width:1180px){
  .margin-note{float:right;clear:right;width:17rem;margin:.25rem -19.5rem 1rem 0}
}

/* ---------- 6. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:3.25rem;padding:.8rem 1.5rem;font:600 1.0625rem/1.2 var(--sans);letter-spacing:.005em;text-decoration:none;border:2px solid transparent;border-radius:2px;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;text-align:center}
.btn svg{width:1.1em;height:1.1em;flex:none;transition:transform .15s}
.btn:hover svg{transform:translateX(3px)}
/* Purchase: the Green Signature. !important guards against Gumroad's injected button stylesheet. */
.btn-buy{background:var(--buy)!important;color:var(--on-buy)!important;border:2px solid var(--buy)!important;border-radius:2px!important;font:600 1.0625rem/1.2 var(--sans)!important;text-transform:none!important;box-shadow:none!important;padding:.8rem 1.5rem!important;text-decoration:none!important}
.btn-buy:hover{background:var(--buy-hover)!important;border-color:var(--buy-hover)!important}
.btn-buy:active{background:var(--buy-active)!important;border-color:var(--buy-active)!important}
.btn-buy:focus-visible{outline:3px solid var(--ink)!important;outline-offset:3px!important}
.btn-buy .price{font-weight:700}
@media (max-width:479px){.btn-buy .dash{display:none}.btn-buy{gap:.6rem}}
/* Quiet: free edition and utilities */
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-quiet:hover{background:var(--paper-2)}
.btn-quiet:active{background:var(--rule)}
.btn-small{min-height:2.75rem;padding:.55rem 1rem;font-size:.9375rem}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink);min-height:2.75rem;padding:.55rem 1rem;font-size:.9375rem;font-weight:600}
.btn-line:hover{background:var(--paper-2)}
.btn-line[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;margin:1rem 0 0}
.cta-row .fine{margin:0}

/* ---------- 7. Proof strip (visible only while checkout/newsletter are unconfigured) ---------- */
.proof{background:var(--ink);color:var(--on-ink);font:600 .8125rem/1.45 var(--sans);letter-spacing:.04em;text-align:center;padding:.6rem 1rem}
.proof strong{letter-spacing:.18em;text-transform:uppercase;color:var(--seal-on-ink);margin-right:.5rem}

/* ---------- 8. Masthead ---------- */
.masthead{padding-top:.75rem}
.mast-bar{grid-column:wide;display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;font:600 .72rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:.35rem 0 .6rem;border-bottom:1px solid var(--ink)}
.mast-bar a{color:inherit;text-decoration:none;display:inline-block;padding:.45rem 0;margin:-.45rem 0}
.mast-bar a:hover{text-decoration:underline}
.mast-bar .mid{display:none}
@media (min-width:760px){.mast-bar .mid{display:inline}}
.nameplate{grid-column:wide;display:flex;align-items:center;justify-content:center;gap:.9rem;padding:.85rem 0 .7rem;text-decoration:none;color:var(--ink)}
.nameplate img{width:2.75rem;height:2.75rem;flex:none}
@media (max-width:479px){.nameplate{gap:.6rem}.nameplate img{width:2.25rem;height:2.25rem}.nameplate span{letter-spacing:.12em}}
.nameplate span{font:700 clamp(1.05rem,.6rem + 2.4vw,2.15rem)/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.nameplate:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.dateline{grid-column:wide;border-top:1px solid var(--ink);border-bottom:3px double var(--ink);padding:.4rem 0;text-align:center;font:italic 400 1rem/1.5 var(--serif);color:var(--ink-soft)}
.dateline .sep{margin:0 .5rem;font-style:normal;color:var(--sage)}
.toc{grid-column:wide;padding:.35rem 0 0}
.toc summary{font:600 .72rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;color:var(--ink);padding:.5rem 0;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";margin-left:.6rem;font-size:1rem}
.toc[open] summary::after{content:"\2212"}
.toc ol{list-style:none;display:flex;flex-wrap:wrap;gap:.1rem 1.25rem;padding:.2rem 0 .1rem}
.toc li{counter-increment:toc}
.toc a{display:inline-block;padding:.35rem 0;font:600 .9375rem/1.3 var(--sans);text-decoration:none;color:var(--ink)}
.toc a:hover{text-decoration:underline}
.toc ol{counter-reset:toc}
@media (min-width:760px){.toc summary{display:none}.toc ol{justify-content:center;padding:.2rem 0}}

/* ---------- 9. Hero (the opening of the letter) ---------- */
.hero{padding-block:clamp(1.75rem,1.25rem + 2vw,3rem) 1rem}
.hero h1{font-size:clamp(2.6rem,1.4rem + 4.8vw,4.2rem);line-height:1.04;letter-spacing:-.012em;margin:0 0 1rem}
.hero h1 em{font-weight:400;text-decoration:underline;text-decoration-color:var(--seal);text-decoration-thickness:.055em;text-underline-offset:.1em;text-decoration-skip-ink:none}
.standfirst{font:italic 400 clamp(1.15rem,1.05rem + .6vw,1.4rem)/1.45 var(--serif);color:var(--ink);margin:0 0 1.35rem}
.hero-cover{margin:.25rem auto 2rem;width:min(13rem,62%)}
.hero-cover img{width:100%;height:auto;aspect-ratio:640/828;background:var(--ink)}
.hero-cover figcaption{margin-top:.6rem;font:italic 400 .9375rem/1.4 var(--serif);color:var(--ink-soft);text-align:center}
@media (min-width:1180px){
  .hero-cover{grid-column:margin;grid-row:1 / span 6;align-self:start;margin:.5rem 0 0;width:100%;max-width:17rem}
}
.enclosure{border:1px solid var(--ink);background:var(--slip);padding:1.1rem 1.3rem 1.25rem}
.enclosure .kicker{margin-bottom:.4rem}
.enclosure .enc-title{font:700 1.35rem/1.2 var(--serif);color:var(--ink);margin:0 0 .4rem}
.enclosure p{margin:0 0 .5rem}
.enclosure .enc-text{font-size:1.0625rem}

/* ---------- 10. The letter ---------- */
.letter .mail-head{font:400 .8125rem/1.7 var(--mono);color:var(--ink-soft);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.7rem 0;margin:0 0 1.4rem}
.letter .mail-head div{display:flex;gap:1rem}
.letter .mail-head dt{flex:0 0 3.4rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.letter .mail-head dd{margin:0}
.letter .salutation{font:italic 400 1.3rem/1.4 var(--serif);color:var(--ink);margin-bottom:1rem}
.letter p.first::first-letter{font:700 4.1em/.78 var(--serif);float:left;padding:.07em .1em 0 0;color:var(--ink)}
.letter p{max-width:36rem}
.signoff{display:flex;align-items:center;gap:1rem;margin-top:1.4rem}
.signoff img{width:4.25rem;height:4.25rem;flex:none}
.signoff p{margin:0;font:italic 400 1.1rem/1.4 var(--serif);color:var(--ink)}
.signoff small{display:block;font:600 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--ink-soft);margin-top:.2rem}
.sprig{width:5.5rem;height:5.5rem;opacity:1}
@media (min-width:1180px){.sprig{float:right;clear:right;margin:.5rem -19.5rem 1rem 0;width:7rem;height:7rem}}
@media (max-width:1179px){.sprig{display:none}}

/* ---------- 11. Email Repair Shop ---------- */
.case{margin-top:clamp(2.5rem,1.5rem + 3vw,3.75rem)}
.case::before{content:"";grid-column:wide;border-top:1px solid var(--rule);margin-bottom:1.75rem}
.case:first-of-type{margin-top:1rem}
.case:first-of-type::before{display:none}
.case-head{margin-bottom:.6rem}
.case-tabs{margin:1.1rem 0 .25rem}
.js .case{margin-top:.75rem}
.js .case::before{display:none}
.js .case:first-of-type{margin-top:.75rem}
.case-head .byline{font:italic 400 1rem/1.4 var(--serif);color:var(--ink-soft);margin:0}
.case-tools{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin:1rem 0 .85rem}
.pen-btn svg{width:1.15em;height:1.15em}
.view-switch{display:none;border:1.5px solid var(--ink);border-radius:2px}
.view-switch button{font:600 .9375rem/1 var(--sans);background:transparent;color:var(--ink);border:0;min-height:2.75rem;padding:.5rem 1.1rem;cursor:pointer}
.view-switch button+button{border-left:1.5px solid var(--ink)}
.view-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:999px){.js .view-switch{display:inline-flex}}

.pair{display:grid;gap:1.25rem;align-items:start}
@media (min-width:1000px){.pair{grid-template-columns:1fr 1fr;gap:1.75rem}}
@media (max-width:999px){
  .js .case[data-view="before"] .slip--after,.js .case[data-view="before"] .notes--after{display:none}
  .js .case[data-view="after"] .slip--before,.js .case[data-view="after"] .notes--before{display:none}
}
.slip{position:relative;margin:0;background:var(--slip);border:1px solid var(--rule);padding:2.6rem 1.25rem 1.25rem;font:400 .875rem/1.7 var(--mono);color:var(--shadow)}
.slip-tab{position:absolute;left:-1px;top:-1px;font:700 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:.55rem .8rem;background:var(--ink);color:var(--paper)}
.slip--before .slip-tab{background:var(--seal-ink)}
.slip--after .slip-tab{background:var(--sage-ink)}
.slip-subject{font-weight:700;color:var(--ink);padding-bottom:.9rem;margin-bottom:1rem;border-bottom:1px solid var(--rule);font-size:.875rem;line-height:1.55}
.slip-subject .lbl{font-weight:400;color:var(--ink-soft);margin-right:.5rem}
.slip-body p{margin:0 0 1em;white-space:normal}
.slip-body .lines{margin:0 0 1em}
.slip-body .lines span{display:block;padding-left:1.35em;text-indent:-1.35em}
.slip-body p:last-child,.slip-body .lines:last-child{margin-bottom:0}
.slip-body{overflow-wrap:anywhere}

/* the editor's red pen */
.pen{background:transparent;color:inherit;padding:0 0 1px;border-bottom:2px solid var(--seal)}
.slip--after .pen{border-bottom-color:var(--sage)}
.pen-n{font:700 .68rem/1 var(--sans);color:var(--seal-ink);margin-left:.2rem;vertical-align:super;letter-spacing:0}
.slip--after .pen-n{color:var(--sage-ink)}
.pen.is-lit{background:var(--paper-2)}
.case.pen-off .pen{border-bottom-color:transparent}
.case.pen-off .pen-n{display:none}
.case.pen-off .notes-pair{display:none}

.notes-pair{display:grid;gap:1.25rem;margin-top:1.25rem}
@media (min-width:1000px){.notes-pair{grid-template-columns:1fr 1fr;gap:1.75rem}}
.notes h4{font:600 .75rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--seal-ink);margin-bottom:.8rem}
.notes--after h4{color:var(--sage-ink)}
.notes ol{list-style:none;counter-reset:n}
.notes li{counter-increment:n;position:relative;padding:0 0 .85rem 2.2rem;font-size:1rem;line-height:1.55}
.notes li::before{content:counter(n);position:absolute;left:0;top:.05rem;width:1.45rem;height:1.45rem;border:1.5px solid var(--seal);border-radius:50%;font:700 .75rem/1.25rem var(--sans);text-align:center;color:var(--seal-ink)}
.notes--after li::before{border-color:var(--sage);color:var(--sage-ink)}
.notes li.is-lit{background:var(--paper-2)}
.case-foot{font-size:.9375rem;color:var(--ink-soft);margin:1.25rem 0 0}

/* ---------- 12. Subject Line Workshop ---------- */
.tablist{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 1rem}
.tab{font:600 .9375rem/1.2 var(--sans);background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:2px;min-height:2.75rem;padding:.55rem 1rem;cursor:pointer}
.tab:hover{background:var(--paper-2)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.ws-meta{font:italic 400 1rem/1.45 var(--serif);color:var(--ink-soft);margin:0 0 1rem}
.inbox{list-style:none;border:1px solid var(--ink);background:var(--slip)}
.inbox>li{border-top:1px solid var(--rule)}
.inbox>li:first-child{border-top:0}
.inbox-row{display:grid;grid-template-columns:1.25rem 1fr auto;gap:.9rem;align-items:start;width:100%;text-align:left;background:transparent;border:0;margin:0;padding:1rem 1.1rem;font:inherit;color:inherit}
button.inbox-row{cursor:pointer;min-height:3.5rem}
button.inbox-row:hover{background:var(--paper-2)}
.dot{width:.75rem;height:.75rem;border-radius:50%;border:1.5px solid var(--ink);margin-top:.5rem;background:var(--ink)}
button.inbox-row[aria-expanded="true"] .dot{background:transparent}
.inbox-row--before .dot{border-color:var(--seal);background:transparent}
.inbox-from{display:block;font:600 .8125rem/1.3 var(--sans);letter-spacing:.04em;color:var(--ink-soft)}
.inbox-subject{display:block;font:600 1.0625rem/1.4 var(--sans);color:var(--ink)}
button.inbox-row[aria-expanded="true"] .inbox-subject{font-weight:400}
.inbox-row--before .inbox-subject{text-decoration:line-through;text-decoration-color:var(--seal);text-decoration-thickness:2px;font-weight:400}
.inbox-tag{font:700 .68rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--seal-ink);align-self:start;margin-top:.35rem;text-align:right}
.inbox-tag--n{color:var(--ink-soft)}
.inbox-note{margin:0;padding:0 1.1rem 1.1rem 3.25rem;font-size:1rem;line-height:1.55;color:var(--shadow)}
.inbox-note::before{content:"Why it works. ";font-weight:600;color:var(--sage-ink)}
@media (max-width:559px){.inbox-row--before{grid-template-columns:1.25rem 1fr}.inbox-row--before .inbox-tag{grid-column:2;margin-top:0;text-align:left}.inbox-row--before .inbox-tag{order:3}}
.ws-pattern{margin:1.1rem 0 0;font-size:1rem}
.ws-pattern strong{font:600 .75rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--seal-ink);margin-right:.4rem}
.workshop.is-live .ws-title{display:none}
.workshop:not(.is-live) .tablist{display:none}
.workshop:not(.is-live) [data-ws-panel]{margin-bottom:2.5rem}
.ws-counter{font:600 .875rem/1.4 var(--sans);color:var(--ink-soft);margin:.75rem 0 0}

/* ---------- 13. Inside the Edition ---------- */
.spread{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink);background:var(--rule)}
.spread button{display:block;padding:0;margin:0;border:0;background:var(--paper);cursor:zoom-in;position:relative}
.spread button+button{border-left:1px solid var(--ink)}
.spread img{width:100%;height:auto;aspect-ratio:1000/1294}
.spread-cap,.fig-cap{font:italic 400 .9375rem/1.45 var(--serif);color:var(--ink-soft);margin:.7rem 0 0}
.zoom-hint{display:block;margin-top:.15rem;font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--ink-soft)}
.contents-list{margin:1.6rem 0 0;padding:0;list-style:none;counter-reset:part;border-bottom:1px solid var(--rule)}
@media (min-width:900px){.contents-list{display:grid;grid-template-columns:1fr 1fr;column-gap:3rem}.contents-list li:last-child{grid-column:1/-1}}
.contents-list li{counter-increment:part;display:grid;grid-template-columns:2.4rem 1fr;gap:.25rem 1rem;padding:.85rem 0;border-top:1px solid var(--rule)}
.contents-list li::before{content:counter(part,decimal-leading-zero);font:700 .8rem/2.1 var(--sans);letter-spacing:.1em;color:var(--seal-ink)}
.contents-list h3{font-size:1.2rem;margin:0 0 .1rem}
.contents-list p{margin:0;font-size:1rem;line-height:1.5}
.contents-list .fmt{font:600 .72rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink);display:block;margin-top:.2rem}
.thumbs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.1rem 0 0}
@media (min-width:760px){.thumbs{grid-template-columns:repeat(6,1fr);gap:.9rem}}
@media (min-width:640px){.thumbs{grid-template-columns:repeat(3,1fr)}}
.thumbs button{display:block;width:100%;text-align:left;background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:zoom-in}
.thumbs img{width:100%;height:auto;aspect-ratio:520/673;border:1px solid var(--ink);background:var(--slip)}
.thumbs .t-landscape img{aspect-ratio:520/673;object-fit:cover;object-position:left top}
.thumbs button:hover img{border-color:var(--seal)}
.thumbs span{display:block;font:italic 400 .875rem/1.35 var(--serif);color:var(--ink-soft);margin-top:.4rem}
.thumbs b{font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--ink);display:block}
.bridge{margin-top:2rem;padding:1.15rem 1.5rem 1.25rem;border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.bridge p{margin:0 0 .25rem;font:italic 400 1.2rem/1.5 var(--serif);color:var(--ink)}
.bridge .cta-row{margin-top:.6rem}

/* viewer dialog */
dialog{border:0;padding:0;background:var(--ink);color:var(--on-ink);max-width:none;max-height:none}
dialog::backdrop{background:#0F1823}
.viewer{width:100vw;height:100dvh;margin:0;display:none}
.viewer[open]{display:grid;grid-template-rows:auto 1fr auto}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--ink-line)}
.viewer-bar p{margin:0;font:600 .875rem/1.4 var(--sans);letter-spacing:.04em;color:var(--on-ink)}
.viewer-stage{overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:1rem;-webkit-overflow-scrolling:touch}
.viewer-stage img{max-width:min(100%,64rem);width:auto;height:auto;max-height:none;background:var(--slip)}
.viewer-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;border-top:1px solid var(--ink-line)}
.viewer-foot p{margin:0;font:italic 400 .9375rem/1.4 var(--serif);color:var(--on-ink-soft);flex:1}
.viewer .btn-line,.notice .btn-line{color:var(--on-ink);border-color:var(--on-ink-soft)}
.viewer .btn-line:hover{background:var(--ink-line)}
.notice{width:min(32rem,calc(100vw - 2rem));margin:auto;background:var(--paper);color:var(--shadow);border:1px solid var(--ink);padding:1.75rem}
.notice h2{font-size:1.5rem;margin-bottom:.6rem}
.notice code{font:400 .875rem/1.5 var(--mono);background:var(--paper-2);padding:.1rem .35rem}
.notice .btn-line{color:var(--ink);border-color:var(--ink)}
.notice .btn-line:hover{background:var(--paper-2)}

/* ---------- 14. Year Wheel (ink band) ---------- */
.band-ink{background:var(--ink);color:var(--on-ink)}
.band-ink h2,.band-ink h3,.band-ink h4{color:var(--on-ink)}
.band-ink a{color:var(--on-ink);text-decoration-color:var(--sage-on-ink)}
.band-ink a:hover{text-decoration-color:var(--on-ink)}
.band-ink .section::before,.band-ink.section::before{border-top-color:var(--ink-line)}
.band-ink.section::before{border-top:1px solid var(--ink-line)}
.band-ink .lead{color:var(--on-ink)}
.wheel-duo{display:grid;gap:1.75rem;margin-top:1.5rem;align-items:start}
@media (min-width:1000px){.wheel-duo{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2.25rem}.wheel-duo .months{grid-template-columns:repeat(4,1fr)}}
.wheel-shot{margin:0}
.wheel-shot button{display:block;width:100%;padding:0;margin:0;border:1px solid var(--ink-line);background:var(--ink);cursor:zoom-in}
.wheel-shot img{width:100%;height:auto;aspect-ratio:1600/1160}
.wheel-shot figcaption{font:italic 400 .9375rem/1.45 var(--serif);color:var(--on-ink-soft);margin-top:.7rem}
@media (min-width:1000px){.wheel-duo{align-items:stretch}.wheel-shot{display:flex;flex-direction:column}.wheel-shot button{position:relative;flex:1 1 auto;min-height:24rem}.wheel-shot img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-fit:cover;object-position:left center}}
.wheel-try{margin:0}
.wheel-try .tablist{margin-top:1rem}
.band-ink .tab{color:var(--on-ink);border-color:var(--ink-line)}
.band-ink .tab:hover{background:var(--ink-line)}
.band-ink .tab[aria-selected="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.months{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.9rem 0 1rem}
@media (min-width:640px){.months{grid-template-columns:repeat(6,1fr)}}
.months .tab{padding:.5rem .25rem;text-align:center;letter-spacing:.1em;font-size:.875rem}
.months .tab small{display:block;font:600 .625rem/1.2 var(--sans);letter-spacing:.14em;margin-bottom:.2rem;opacity:1;color:var(--on-ink-soft)}
.months .tab[aria-selected="true"] small{color:var(--ink-soft)}
.month-detail{background:var(--paper);color:var(--shadow);padding:1.25rem 1.4rem 1.2rem}
.month-detail h3{color:var(--ink);font-size:1.45rem;margin-bottom:.3rem}
.month-detail .kicker{color:var(--seal-ink)}
.month-detail .m-head{font:italic 400 1.15rem/1.45 var(--serif);color:var(--ink);margin:0 0 1rem}
.month-detail ol{list-style:none;counter-reset:idea;margin:0 0 1rem}
.month-detail li{counter-increment:idea;padding:.55rem 0 .55rem 2.2rem;border-top:1px solid var(--rule);position:relative;font-weight:600;color:var(--ink)}
.month-detail li::before{content:counter(idea);position:absolute;left:0;top:.62rem;width:1.45rem;height:1.45rem;border:1.5px solid var(--sage);border-radius:50%;font:700 .75rem/1.25rem var(--sans);text-align:center;color:var(--sage-ink)}
.month-detail .m-foot{margin:0;font-size:.9375rem;color:var(--ink-soft)}
.static-months{margin-top:2rem;display:grid;gap:1.25rem}
.static-months h3{font-size:1.2rem}
.static-months ul{list-style:none}
.static-months li{padding:.2rem 0}
.js .static-months{display:none}

/* ---------- 15. The Complete Edition ---------- */
.offer-sheet{display:grid;gap:1.75rem;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:1.4rem 0;margin-top:.5rem}
@media (min-width:900px){.offer-sheet{grid-template-columns:1.25fr 1fr;gap:3rem}}
.ledger{margin:.6rem 0 0;padding:0}
.ledger>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.1rem 1rem;padding:.6rem 0;border-top:1px solid var(--rule)}
.ledger>div:first-child{border-top:0;padding-top:.2rem}
.ledger dt{font:700 1.1rem/1.3 var(--serif);color:var(--ink)}
.ledger dd{margin:0;font-size:1.0625rem;line-height:1.5}
.ledger .fmt{font:600 .72rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink);display:block}
.price-block{align-self:start}
.price-block .price-fig{font:700 clamp(3.5rem,2.5rem + 4vw,5.25rem)/1 var(--serif);color:var(--ink);margin:0 0 .35rem;letter-spacing:-.02em}
.price-block .price-fig small{font:600 .8125rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-left:.5rem;letter-spacing:.14em}
.price-block ul{list-style:none;margin:0 0 .5rem}
.price-block li{padding:.3rem 0 .3rem 1.6rem;position:relative;font-size:1.0625rem}
.price-block li::before{content:"";position:absolute;left:.15rem;top:.78rem;width:.5rem;height:.9rem;border:solid var(--buy);border-width:0 2px 2px 0;transform:rotate(40deg)}
.price-block .btn{width:100%}
@media (min-width:900px){.price-block .btn{width:auto}}
.price-block .fine{margin:.9rem 0 0}
.steps{list-style:none;counter-reset:step;display:grid;gap:.9rem;margin:.75rem 0 0}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.steps li{counter-increment:step;border-top:1px solid var(--ink);padding-top:.7rem;font-size:1.0625rem}
.steps li::before{content:"Step " counter(step);display:block;font:700 .72rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--seal-ink);margin-bottom:.25rem}
.faq{margin-top:2rem}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:.85rem 2.5rem .85rem 0;font:600 1.0625rem/1.4 var(--sans);color:var(--ink);position:relative;min-height:3rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.7rem;font:400 1.5rem/1 var(--sans);color:var(--seal-ink)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 1rem;padding-right:2.5rem;font-size:1.0625rem}

/* ---------- 16. Editor's note ---------- */
.editor p{max-width:36rem}
.ps{margin-top:1.5rem;font-size:1.0625rem}
.ps b{font:700 1rem/1 var(--serif);margin-right:.35rem}
.text-buy{color:var(--buy);font-weight:600;text-decoration-color:var(--buy);text-decoration-thickness:2px}
.text-buy:hover{color:var(--buy-hover);text-decoration-color:var(--buy-hover)}

/* ---------- 17. Free exit ---------- */
.free{background:var(--paper-2)}
.free-grid{display:grid;gap:1.75rem;align-items:start}
@media (min-width:760px){.free-grid{grid-template-columns:11rem 1fr;gap:2rem}}
.free-cover{width:min(9rem,50%)}
@media (min-width:760px){.free-cover{width:100%}}
.free-cover img{width:100%;height:auto;aspect-ratio:480/621;border:1px solid var(--ink)}
.free ul.plain{list-style:none;margin:0 0 1.25rem}
.free ul.plain li{padding:.25rem 0 .25rem 1.4rem;position:relative}
.free ul.plain li::before{content:"";position:absolute;left:0;top:.95rem;width:.55rem;border-top:1.5px solid var(--sage-ink)}
.optin{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--ink)}
.free .fmt-line{font:600 .72rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink);margin:0 0 1rem}
.optin h3{font-size:1.4rem}
.field{margin:1rem 0 .75rem}
.field label{display:block;font:600 .9375rem/1.3 var(--sans);color:var(--ink);margin-bottom:.35rem}
.field input[type=email],.field input[type=text]{width:100%;max-width:26rem;font:400 1.0625rem/1.3 var(--sans);color:var(--shadow);background:var(--slip);border:1.5px solid var(--ink);border-radius:2px;padding:.75rem .9rem;min-height:3rem}
.field input[type=email]:focus-visible,.field input[type=text]:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.consent{display:grid;grid-template-columns:1.75rem 1fr;gap:.7rem;align-items:start;margin:.75rem 0 1rem;font-size:1rem;line-height:1.5}
.consent input{width:1.5rem;height:1.5rem;margin:.1rem 0 0;accent-color:var(--ink)}
.form-msg{margin:1rem 0 0;padding:.9rem 1rem;border-left:3px solid var(--sage-ink);background:var(--slip);font-size:1rem}
.form-msg[data-state="error"]{border-left-color:var(--seal)}
.optin form[hidden]{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Free edition: a comfortable single-column form on phones and narrow tablets. */
@media (max-width:759px){
  .free-grid{grid-template-columns:minmax(0,1fr)}
  .free-grid>div{min-width:0}
  .free form,.free .field input[type=email],.free .field input[type=text]{width:100%;max-width:none}
  .free .btn-quiet{width:100%;max-width:100%;min-height:3.25rem}
  .free .consent{grid-template-columns:1.5rem minmax(0,1fr);gap:.75rem}
}

/* ---------- 18. Footer ---------- */
.site-footer{background:var(--ink);color:var(--on-ink-soft);padding-block:3rem 4.5rem;font-size:1rem}
.site-footer .foot-mark{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.site-footer .foot-mark img{width:3.25rem;height:3.25rem}
.site-footer .foot-mark span{font:700 1.2rem/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink)}
.site-footer .motto{font:italic 400 1.15rem/1.5 var(--serif);color:var(--on-ink);margin:0 0 1.5rem}
.site-footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin:0 0 1.5rem}
.site-footer a{color:var(--on-ink);text-decoration-color:var(--sage-on-ink);display:inline-block;padding:.3rem 0}
.site-footer p{margin:0 0 .5rem;font-size:.9375rem}

/* ---------- 19. Mobile purchase bar ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--paper);border-top:2px solid var(--ink);padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;gap:.75rem;transform:translateY(100%);transition:transform .2s}
.buybar.is-on{transform:none}
.buybar p{margin:0;font:600 .9375rem/1.25 var(--sans);color:var(--ink)}
.buybar p small{display:block;font-weight:400;color:var(--ink-soft);font-size:.8125rem}
.buybar .btn{min-height:2.9rem;padding:.55rem 1.1rem!important;font-size:1rem!important}
@media (max-width:759px){.js .buybar{display:flex}}

/* ---------- 20. Privacy page ---------- */
.doc h1{font-size:clamp(2.2rem,1.4rem + 3.5vw,3.4rem);margin:1rem 0 1rem}
.doc h2{font-size:1.5rem;margin:2.25rem 0 .5rem}
.doc ul{margin:0 0 1.1em 1.25rem}
.doc li{margin-bottom:.35rem}
.doc .stamp{font:italic 400 1rem/1.4 var(--serif);color:var(--ink-soft)}

/* ---------- 21. Noscript + print ---------- */
.noscript-note{background:var(--paper-2);border-bottom:1px solid var(--rule);padding:.6rem 1rem;font-size:.9375rem;text-align:center}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn svg,.buybar{transition:none}
}
@media print{
  .proof,.buybar,.toc,.view-switch,.pen-btn,dialog{display:none!important}
  body{background:#fff;font-size:11pt}
  .band-ink,.site-footer{background:#fff;color:#000}
}

/* ---------- compact phone layout ---------- */
@media (max-width:599px){
  .hero-cover{width:min(9.5rem,46%);margin-bottom:1.25rem}
  .hero-cover figcaption{display:none}
  /* Mobile: follow the single-column base grid; cover above text and form. */
  .free-grid{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .free-cover{width:min(9rem,50%)}
  .free .lead{font-size:1.0625rem}
  .contents-list p{font-size:.9375rem}
  .site-footer p+p{margin-top:.4rem}
  .free .btn-quiet{padding-inline:1rem}
}
@media (max-width:420px){.slip,.slip-subject{font-size:.8125rem}.slip{padding-inline:1rem}}

/* Gumroad's script appends an empty .logo-full span to every link it takes over; its own styles live in a shadow root, so it would only add a stray flex gap here. */
[data-buy] .logo-full{display:none}
.free form{margin-top:1.25rem}
.free .fine a{display:inline-block;padding-block:.2rem}