/* thanksfortheread: redraft 6, 2026-10-22, on his note on the copy document: "The layout is inelegant to me and
   visually dischordant. You have 5 kinds of font/sizings. Two boxes. Underlined text. This page should be as elegant
   and effortless as that calligraphy swoosh ... You've got a giant headline." His colours stay (his "A", same day).
   Rebuilt to the rules measured on eight vouched comps (runs/tftr_comps_2026-10-22/COMPS.md, "Synthesis"):
   - one family at one weight; italic, never bold, for emphasis (rule 1);
   - four sizes, about 1.5 apart: 13 / 19 / 28 / 42 px at desktop (rule 2);
   - the headline at about 2.2x the body, not a poster (rule 3);
   - body 19px, line-height 1.5, a column of about 60 characters (rule 4);
   - menu links undecorated; links in running text keep a thin brass underline, never colour alone (rule 5, W3C G183);
   - no filled button: the action is a brass text link with one arrow (rule 6);
   - prices inline at body size in hairline rows (rule 7);
   - no panels or cards: one ground, structure from space, hairlines only where items repeat (rule 8);
   - the sample pages as paper lying on the ground, unframed (rule 10);
   - one alignment for the whole scroll: a label column and a text column (rule 11).
   His colours are redraft 5's, by region, and stay so (2026-10-22: "I didn't want THE WHOLE SITE to be brown. You
   literally just had to leave the colors as they were"): the dark desk for the top line, the opening and the footer;
   the cream paper, with ink, for the reading sections and the secondary pages; brass links on the desk, amber links
   on the paper. The paper now runs edge to edge instead of sitting as an inset panel, so it is a band, not a box. */

@font-face{
  font-family:"Newsreader";
  /* WOFF2 first: 136,924 bytes against the WOFF's 162,588 (16% less), converted with fontTools and brotli 2026-10-17 */
  src:url("fonts/newsreader-vf-latin.woff2") format("woff2"),url("fonts/newsreader-vf-latin.woff") format("woff");
  font-weight:200 800; font-style:normal; font-display:swap;
}
/* The real italic (2026-10-20, his yes to the download): Newsreader Italic, OFL, subset to the roman's characters. */
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-vf-italic-latin.woff2") format("woff2");
  font-weight:200 800; font-style:italic; font-display:swap;
}

:root{
  /* his colours, kept (copy document, 2026-10-22: "A") */
  --ground:#1A1510; --text:#EFE7D8; --soft:#B9AE9D; --rule:#3A3128; --brass:#C9A15E; --brass-hover:#D8B577;
  --link:#C9A15E;
  /* the paper: the notes document's own paper and ink (D-42), and redraft 5's amber for links on it (5.25:1) */
  --paper:#F6F1E7; --ink:#1F1D1A; --ink-soft:#56524C; --paper-rule:#D9D2C6; --amber:#8A5A12; --brass-dk:#6E5224;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --w:380;                                              /* the one weight: light on dark reads heavier (45665 Spiekermann) */

  /* the four sizes */
  --s1:.8125rem;                                        /* 13: menu, labels, captions, footer */
  --s2:clamp(1.0625rem,1rem + .25vw,1.1875rem);         /* 17 -> 19: body, lists, prices, actions */
  --s3:clamp(1.375rem,1.2rem + .6vw,1.75rem);           /* 22 -> 28: section heads, the lead */
  --s4:clamp(1.875rem,1.5rem + 1.3vw,2.625rem);         /* 30 -> 42: the headline */

  --col:36rem;                                          /* about 60 characters at 19px */
  --gap:clamp(1.25rem,4vw,3.5rem);
  --section:clamp(4.5rem,10vw,11rem);                   /* space between sections (comps: 130-360px) */
  --pad:clamp(1.25rem,6vw,5rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--serif);font-size:var(--s2);font-weight:var(--w);
  line-height:1.5;letter-spacing:.005em;overflow-wrap:break-word;font-optical-sizing:auto;font-kerning:normal}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 1em;text-wrap:pretty}
b,strong{font-weight:inherit;font-style:italic}       /* emphasis by italic, never bold (rule 1) */
h1,h2,h3,legend{font-weight:var(--w)}

/* links: their own colour, as in redraft 5 (brass on the desk, amber on the paper), with a thin underline in the same
   colour, so a link never rests on colour alone (W3C G183) */
a{color:var(--link);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;
  text-underline-offset:.22em;transition:text-decoration-thickness .15s}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:1px}
.small{font-size:var(--s1);color:var(--soft)}
.nb{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.skip{position:absolute;left:1rem;top:-4rem;background:var(--text);color:var(--ground);padding:.75rem 1rem;z-index:10;text-decoration:none}
.skip:focus{top:1rem}

.wrap{width:100%;max-width:78rem;margin-inline:auto;padding-inline:var(--pad)}

/* the top line: the name and the menu, small, undecorated */
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1rem;padding-bottom:1rem}
.mark{font-size:var(--s2);text-decoration:none;margin:0;color:var(--text);letter-spacing:0}
.nav{display:flex;flex-wrap:wrap;gap:0 2rem}
.nav ul,.foot nav ul{list-style:none;margin:0;padding:0;display:contents}
.nav a,.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--s1);letter-spacing:.06em;
  color:var(--soft);text-decoration:none}
.nav a:hover,.foot nav a:hover,.nav a[aria-current="page"]{color:var(--text)}

/* one alignment for the whole scroll: a label column, then the text column */
.hang{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,var(--col));column-gap:var(--gap)}
.band{padding-top:var(--section)}
/* the paper, edge to edge: the reading sections on the home page, and the secondary pages */
.sheet,main.page{background:var(--paper);color:var(--ink);color-scheme:light;
  --text:var(--ink); --soft:var(--ink-soft); --rule:var(--paper-rule); --link:var(--amber); --brass:var(--brass-dk);
  --w:400; letter-spacing:normal}
.sheet{padding-bottom:var(--section)}
main.page{box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);padding-bottom:var(--section)}
.sheet :focus-visible,main.page :focus-visible{outline-color:var(--ink)}

/* the opening */
.hero{display:grid;grid-template-columns:minmax(0,40rem) minmax(0,1fr);column-gap:calc(var(--gap) * 1.5);align-items:start;
  padding-top:clamp(3rem,9vh,7rem);padding-bottom:var(--section)}
h1{font-size:var(--s4);line-height:1.12;letter-spacing:-.01em;margin:0 0 .6em;text-wrap:balance;max-width:16em}
.lead{font-size:var(--s3);line-height:1.35;margin:0 0 1.25rem;max-width:24em;text-wrap:pretty}
.nos{font-style:italic;color:var(--soft);margin:0 0 2.25rem}
.me{display:grid;grid-template-columns:64px minmax(0,var(--col));gap:1.25rem;align-items:start;margin:0 0 2.25rem}
.me img{width:64px;height:80px;object-fit:cover}
.me p{color:var(--soft)}
.me p:last-child{margin-bottom:0}

/* the action: a solid button, his call on round 2 (2026-10-23: "Send your script in button instead of arrow? What's
   the current design standard right now. Whatever that is do that."). The prevailing standard for the one primary
   action is a filled button; Walter backs a single loud action (KNOWLEDGE_BASE/designing_for_emotion_walter_for_the_site.md).
   Pickering's caution that a link should not look like a button (inclusive_design_patterns_for_the_site.md B30) is
   noted and overruled by his instruction. Brass on the desk, ink on the paper; body size; no arrow. */
.act{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.6rem;
  background:var(--btn-bg,var(--brass));color:var(--btn-fg,var(--ground));font-family:inherit;font-size:var(--s2);
  font-weight:450;text-decoration:none;border:0;border-radius:2px;cursor:pointer;transition:background-color .15s,opacity .15s}
.btn:hover{background:var(--btn-hover,var(--brass-hover))}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.sheet,main.page{--btn-bg:var(--ink); --btn-fg:var(--paper); --btn-hover:#3A3631}

/* the work: two real pages lying on the ground, unframed (rule 10) */
.sample{margin:0;padding-top:.5rem}
.pages{display:block;position:relative;width:min(100%,30rem);aspect-ratio:5/6;text-decoration:none}
.pages img{position:absolute;width:74%;transition:transform .3s ease}
.pages .behind{right:0;top:0;filter:brightness(.72)}
.pages .front{left:0;bottom:0}
.pages:hover .front{transform:translateY(-4px)}
.sample figcaption{margin:1.25rem 0 0;font-size:var(--s1);color:var(--soft)}
/* on the paper (the pricing page's sample) the pages need an edge: one soft, wide shadow (COMPS.md rule 10) */
main.page .pages img{box-shadow:0 1px 2px rgba(31,29,26,.10),0 10px 28px rgba(31,29,26,.14)}

/* sections */
h2{font-size:var(--s3);line-height:1.2;letter-spacing:-.005em;margin:0 0 1rem;text-wrap:balance}
.col > :last-child{margin-bottom:0}
.go{display:inline-flex;align-items:center;min-height:44px}

/* repeating items get hairlines, nothing else does (rule 8) */
.gets{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--rule)}
.gets li{padding:.85rem 0;border-bottom:1px solid var(--rule);text-wrap:pretty}
.nets{color:var(--soft)}

/* prices inline, at body size, in hairline rows (rule 7) */
.prices{margin:1.5rem 0 2rem;border-top:1px solid var(--rule)}
.prices > div{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.prices dt{color:var(--brass);font-variant-numeric:lining-nums}
.prices dd{margin:0;text-wrap:pretty}
#contact{margin-top:1.75rem}

/* the footer */
.foot{padding-top:3rem;padding-bottom:2.5rem}       /* straight after the paper: the change of ground is the edge */
.foot-cols{display:grid;grid-template-columns:minmax(0,15rem) repeat(2,minmax(0,1fr));gap:1rem var(--gap);margin-bottom:1.5rem}
.foot .mark{font-size:var(--s1);color:var(--text);margin-bottom:.25rem}
.foot nav{display:flex;flex-direction:column}
.foot .small{margin:0}

/* secondary pages: credits, privacy, terms, accessibility. Same ground, same column, no panel. */
main.page{padding-top:clamp(2.5rem,7vh,5rem)}
.page h1{margin-bottom:.5em}
.page-head{display:grid;grid-template-columns:min(9rem,30vw) minmax(0,var(--col));gap:var(--gap);align-items:start;margin-bottom:var(--section)}
.page-head .lead{font-size:var(--s2);color:var(--soft);margin-bottom:.5rem}
.page-head h1{margin-bottom:.4em}
.credit-list{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,var(--col));column-gap:var(--gap);padding-bottom:4rem}
.credit-list > h2{grid-column:1;grid-row:1 / span 99;margin:0 0 1rem}
.credit-list > :not(h2){grid-column:2}
.show,.row{padding:.9rem 0;border-bottom:1px solid var(--rule)}
.credit-list > h2 + *{border-top:1px solid var(--rule)}
.show h3{font-size:var(--s2);font-style:italic;margin:0}
.show .net,.show .sub,.row .sub,.row span:not(.yr),.yr{color:var(--soft)}
.show .net,.show .sub,.row .sub{font-size:var(--s1)}
.role,.row{display:flex;justify-content:space-between;gap:1rem}
.yr{white-space:nowrap;font-variant-numeric:tabular-nums}
.eps{list-style:none;margin:.35rem 0 0;padding:0;font-size:var(--s1);color:var(--soft)}
.prose{max-width:var(--col)}
.prose h2{margin:2.5rem 0 .75rem}
.prose ul{padding-left:1.2em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose .small:first-of-type{border-left:1px solid var(--rule);padding-left:1rem}
.open{border-bottom:1px dashed var(--brass);padding:0 .1em}

/* the pricing page: the text column, the sample beside it */
.price-grid{display:grid;grid-template-columns:minmax(0,40rem) minmax(0,1fr);gap:calc(var(--gap) * 1.5);align-items:start}
.price-main{max-width:var(--col)}
.price-main > .say{font-size:var(--s3);line-height:1.35;margin-bottom:var(--section)}
.price-side{position:sticky;top:2rem}
.price-side .pages{width:100%}
.price-side p{margin:1rem 0 0;font-size:var(--s1)}
.foot{background:var(--ground)}
.pricing section,.order{margin-bottom:var(--section)}
.level-list{list-style:none;margin:1.5rem 0 1.25rem;padding:0;border-top:1px solid var(--rule)}
.level-list li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.level-list .lv{color:var(--brass)}
.policies ul{list-style:none;margin:1.5rem 0;padding:0;border-top:1px solid var(--rule)}
.policies li{padding:.85rem 0;border-bottom:1px solid var(--rule);text-wrap:pretty}
.disclosure{color:var(--soft)}

/* the order form: rows on hairlines with a drawn radio, not boxed cards (rule 8). The circle's edge is the soft text
   colour, 8.3:1 on the ground, over the 3:1 a control's edge needs (WCAG 1.4.11). */
fieldset{border:0;margin:0 0 2.5rem;padding:0;min-width:0}
legend{font-size:var(--s1);letter-spacing:.06em;color:var(--soft);padding:0;margin-bottom:.75rem}
legend .small{font-size:inherit}
.choices{border-top:1px solid var(--rule);margin-bottom:.75rem}
.choices label{position:relative;display:block;cursor:pointer;border-bottom:1px solid var(--rule)}
.choices input{position:absolute;opacity:0;width:1px;height:1px}
.choices label > span{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto;column-gap:.25rem;align-items:baseline;
  padding:.85rem 0;min-height:48px}
.choices label > span::before{content:"";width:.9rem;height:.9rem;border:1px solid var(--soft);border-radius:50%;
  align-self:center;grid-row:1 / span 2}
.choices input:checked + span::before{background:var(--brass);border-color:var(--brass);box-shadow:inset 0 0 0 3px var(--paper)}
.choices input:focus-visible + span{outline:2px solid var(--brass);outline-offset:2px}
@media (forced-colors:active){.choices input:checked + span::before{background:CanvasText}}
.choices b{font-style:normal;grid-column:2;white-space:nowrap;padding-right:1rem}
.fmts label > span{color:var(--soft);grid-template-columns:1.75rem auto minmax(0,1fr)}
.fmts label > span b{color:var(--text)}
.fmts label > span{text-align:right}
.fmts label > span b{text-align:left}
.tn{grid-column:2}
.pr{grid-column:3;color:var(--brass)}
.when{margin:0 0 .5rem}
.total{margin:0 0 .75rem;min-height:1.5em}
.check{display:flex;gap:.75rem;align-items:center;min-height:44px;cursor:pointer}
.check input{width:1.1rem;height:1.1rem;accent-color:var(--brass);flex:0 0 auto}

/* narrower than a laptop: one column */
@media (max-width:56em){
  .hero,.price-grid,.hang,.credit-list,.page-head{grid-template-columns:minmax(0,1fr)}
  .credit-list > h2,.credit-list > :not(h2){grid-row:auto;grid-column:1}
  .sample{margin-top:2.5rem}
  .pages{width:min(100%,24rem)}
  .price-side{position:static;max-width:24rem}
  .page-head img{max-width:9rem}
}
@media (max-height:48em){.price-side{position:static}}
@media (max-width:40em){
  .top{flex-wrap:wrap;row-gap:0}
  .nav{width:100%;justify-content:space-between;gap:0 .75rem}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-cols > div:first-child{grid-column:1 / -1}
  .me{grid-template-columns:48px minmax(0,1fr);gap:1rem}
  .me img{width:48px;height:60px}
  .prices > div,.level-list li{grid-template-columns:4rem minmax(0,1fr)}
  .role,.row{flex-direction:column;gap:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* a phone or laptop set to dark: the paper dims a step so it does not glare at night (as in redraft 5) */
@media (prefers-color-scheme:dark){:root{--paper:#E9E2D5; --paper-rule:#CFC7B9}}