/* The Human Is the Key: one stylesheet for every page. No framework, no script.
   Colour world: cream paper, brass and warm ink, with two night bands that
   behave like a book's endpapers. Every colour is a token on :root; the dark theme redefines the
   same tokens, and each band ("surface") maps them onto the roles the components use.
   Type: tracked capitals (wordmark, title line, numerals, drop cap) in the display face; every
   lowercase heading and all running text in the text face; small labels in the label face. */

/* ---------- fonts (self-hosted, OFL; licences sit beside the files) ---------- */
@font-face{font-family:"Libre Baskerville";src:url("fonts/libre-baskerville-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url("fonts/crimson-pro-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url("fonts/crimson-pro-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* fallbacks sized to the web fonts' average width and height, so nothing jumps when they arrive */
@font-face{font-family:"Libre Baskerville Fallback";src:local("Georgia");size-adjust:116.8%;ascent-override:83%;descent-override:23.1%;line-gap-override:0%}
@font-face{font-family:"Crimson Pro Fallback";src:local("Georgia");font-style:normal;size-adjust:89.8%;ascent-override:99.8%;descent-override:23.9%;line-gap-override:0%}
@font-face{font-family:"Crimson Pro Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:80.9%;ascent-override:110.8%;descent-override:26.6%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial");size-adjust:102.9%;ascent-override:94.3%;descent-override:24.3%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  color-scheme:light;
  /* light palette (contrast on paper / desk, WCAG) */
  --paper:#F9F5EA;          /* main ground */
  --desk:#E7E0D0;           /* hero, the Prologue invitation, the author note */
  --card:#FBF8F0;           /* spare ground (not used by the pages today) */
  --edge:#DDD3BC;           /* picture hairlines */
  --rule:#DCD3BE;           /* hairlines on paper */
  --rule-desk:#CBBFA4;      /* hairlines on desk */
  --field-edge:#8E836A;     /* form field outlines: 3.5:1 on the card, so a field reads as a field */
  --ink:#2A241C;            /* 14.1 / 11.7 */
  --ink-2:#4C4436;          /* 8.8 / 7.3 */
  --soft:#6A6049;           /* 5.7 / 4.72 */
  --brass-text:#735A28;     /* 5.98 / 4.96: brass for words */
  --brass:#8A6C33;          /* brass for rules, underlines and borders only */
  --sage-text:#5A6A4E;      /* 5.35 on paper; paper and card only */
  --button-bg:#2A241C;
  --button-fg:#F9F5EA;      /* 14:1 */
  --button-bg-hover:#433A2D;
  /* night: the two dark bands in the light theme */
  --night:#0F0D08;
  --night-rule:#39331F;
  --night-ink:#E2D9C4;      /* 13.8 */
  --night-ink-2:#CFC5AE;    /* 11.4 */
  --night-soft:#9A8F7A;     /* 6.1 */
  --night-brass:#C2A25C;    /* 8.0 */
  --night-bright:#D4B46A;   /* 9.7: band headings */
  --night-button-fg:#0F0D08;
  --night-button-hover:#D4B46A;
  --glow:rgba(194,162,92,.12);
  --shadow:42,36,28;
  /* type */
  --font-display:"Libre Baskerville","Libre Baskerville Fallback",Baskerville,"Baskerville Old Face",Georgia,serif;
  --font-text:"Crimson Pro","Crimson Pro Fallback","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-label:"Instrument Sans","Instrument Sans Fallback","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --step-0:clamp(1.1875rem,1.1rem + .35vw,1.3125rem);   /* body 19 to 21 */
  --step-h2:clamp(2rem,1.45rem + 1.7vw,2.875rem);       /* 32 to 46: the text face runs small */
  --step-quote:clamp(1.3125rem,1.12rem + .75vw,1.5625rem); /* 21 to 25 */
  --label:.78125rem;                                      /* 12.5 */
  --gutter:clamp(16px,4vw,48px);
  --pad:clamp(64px,9vw,128px);
  --measure:27em;
  /* roles: what the current surface paints with (paper unless a band says otherwise) */
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --fg-soft:var(--soft);
  --accent:var(--brass-text);
  --ornament:var(--brass);
  --hair:var(--rule);
  --heading:var(--ink);
  --btn-bg:var(--button-bg);
  --btn-fg:var(--button-fg);
  --btn-hover:var(--button-bg-hover);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --paper:#0F0D08;
    --desk:#15130D;
    --card:#1C1912;
    --edge:#2C2619;
    --rule:#39331F;
    --rule-desk:#3E3722;
    --field-edge:#7A705A;
    --ink:#E2D9C4;
    --ink-2:#CFC5AE;
    --soft:#9A8F7A;
    --brass-text:#C2A25C;
    --brass:#C2A25C;
    --sage-text:#93A37F;
    --button-bg:#C2A25C;
    --button-fg:#0F0D08;
    --button-bg-hover:#D4B46A;
    /* the night bands become lit panels, a clear step above the page and edged in brass */
    --night:#221E16;
    --night-rule:#43391F;
    --night-ink:#E2D9C4;
    --night-ink-2:#CFC5AE;
    --night-soft:#9A8F7A;     /* 5.20 on #221E16 */
    --night-brass:#C2A25C;    /* 6.81 */
    --night-bright:#D4B46A;   /* 8.33 */
    --night-button-fg:#0F0D08;
    --night-button-hover:#D4B46A;
    --glow:rgba(194,162,92,.10);
    --shadow:0,0,0;
  }
}

/* surfaces */
.s-paper{--bg:var(--paper);--hair:var(--rule)}
.s-card{--bg:var(--card);--hair:var(--rule)}
.s-desk{--bg:var(--desk);--hair:var(--rule-desk)}
.s-night{
  --bg:var(--night);--fg:var(--night-ink);--fg-2:var(--night-ink-2);--fg-soft:var(--night-soft);
  --accent:var(--night-brass);--ornament:var(--night-brass);--hair:var(--night-rule);--heading:var(--night-bright);
  --btn-bg:var(--night-brass);--btn-fg:var(--night-button-fg);--btn-hover:var(--night-button-hover);
}
.s-paper,.s-card,.s-desk,.s-night{background:var(--bg);color:var(--fg)}
@media (prefers-color-scheme:dark){
  .s-night{box-shadow:inset 0 1px 0 rgba(194,162,92,.32),inset 0 -1px 0 rgba(194,162,92,.32)}
  .signup-end{box-shadow:inset 0 1px 0 rgba(194,162,92,.32)}
  .endpaper__foot{box-shadow:none}
  .form-card{border-color:rgba(194,162,92,.32)}   /* the brass hairline the night bands use; the card stays visible on the dark desk */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-text);font-size:var(--step-0);line-height:1.55;
  font-kerning:normal;font-synthesis:none;font-variant-numeric:oldstyle-nums proportional-nums;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
main{flex:1 0 auto}
img{max-width:100%;height:auto}
picture{display:block}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--ornament);text-underline-offset:.2em;text-decoration-skip-ink:auto}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ornament);outline-offset:3px;border-radius:2px}
::selection{background:rgba(194,162,92,.28);color:inherit}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:10;padding:10px 16px;background:var(--btn-bg);color:var(--btn-fg);font-family:var(--font-label);font-size:var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px}

.wrap{width:min(100% - 2 * var(--gutter),1160px);margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.s{padding-block:var(--pad)}

/* labels: small spaced capitals, like JACK SANDS on the cover */
.eyebrow,.label{
  font-family:var(--font-label);font-size:var(--label);font-weight:400;line-height:1.4;
  letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:lining-nums;color:var(--accent);
}
h2{font-family:var(--font-text);font-size:var(--step-h2);line-height:1.08;color:var(--heading);letter-spacing:-.012em}
.intro{margin-top:18px;color:var(--fg-soft);max-width:24em}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1em}

/* ---------- masthead: the key from the cover beside a two-line wordmark ---------- */
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--fg);text-decoration:none}
.brand img{display:block;width:25px;height:40px}
.wordmark{display:flex;flex-direction:column;font-family:var(--font-display);font-size:.8125rem;line-height:1.22;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;padding-top:1px}
.nav{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none}
.nav a{display:inline-block;padding:12px 0;white-space:nowrap;font-family:var(--font-label);font-size:var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);text-decoration:none;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--ornament)}
@media (max-width:639px){
  .nav .nav-wide{display:none}
  .nav .nav-signup:only-child{display:block}   /* the Prologue held: Sign up is the only item */
  .brand img{width:22px;height:36px}
  .wordmark{font-size:.75rem;letter-spacing:.16em}
  .nav .opt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* ---------- hero: the idea leads; the cover carries the title in big letters ---------- */
.hero{padding-block:clamp(16px,3vw,40px) clamp(56px,5vw,72px);overflow:clip}
.hero .grid{align-items:center}
.hero__text{grid-column:1 / span 7}
.hero__book{grid-column:8 / span 5;justify-self:end;width:min(420px,100%);margin:0}
.hero .eyebrow{margin-bottom:14px}
h1{font-family:var(--font-display);font-size:clamp(1.0625rem,.9rem + .55vw,1.375rem);line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--heading)}
h1 .l{display:inline}
.subtitle{margin-top:4px;font-style:italic;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.35;color:var(--fg-soft)}
.mark{display:block;width:48px;height:1px;margin:30px 0 28px;border:0;background:var(--ornament)}
.idea{font-style:italic;font-size:clamp(1.875rem,1.05rem + 2.95vw,3.375rem);line-height:1.1;letter-spacing:-.012em;color:var(--fg)}
.idea .half{display:inline-block}
.status{margin-top:24px;font-size:1.125rem;color:var(--fg-soft)}
@media (min-width:768px) and (max-width:1023px){.idea{font-size:2rem}}

/* the hero's compact sign-up: pitch, then the button and the Prologue link on one row */
.hero .signup-slot{margin-top:40px;max-width:34em}
.signup-slot--hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:28px}
.signup-slot--hero .signup{display:contents}
.signup-slot--hero .signup__pitch{grid-column:1 / -1;font-size:1.0625rem;color:var(--fg-soft)}
.signup-slot--hero .signup__action{grid-column:1;grid-row:2;margin:20px 0 0}
.signup-slot--hero .hero__more{grid-column:2;grid-row:2;margin:20px 0 0;font-size:1.0625rem}
.signup-slot--hero .signup__note{grid-column:1 / -1;grid-row:3;margin-top:14px}
.hero__more a{color:var(--accent)}
@media (max-width:1023px){
  .signup-slot--hero{grid-template-columns:minmax(0,1fr)}
  .signup-slot--hero .hero__more{grid-column:1;grid-row:4;margin-top:16px}
}

/* the cover as an object: flat art, the hinge already painted in, one warm layered shadow */
.book{position:relative;isolation:isolate}
.book img{
  display:block;width:100%;height:auto;border-radius:1px 3px 3px 1px;
  box-shadow:0 1px 2px rgba(var(--shadow),.12),0 10px 20px -8px rgba(var(--shadow),.22),0 36px 72px -24px rgba(var(--shadow),.36);
}
.book--cream img{box-shadow:0 0 0 1px var(--edge),0 1px 2px rgba(var(--shadow),.12),0 10px 20px -8px rgba(var(--shadow),.22),0 36px 72px -24px rgba(var(--shadow),.36)}
.book__note{margin-top:18px;text-align:center;font-style:italic;font-size:1rem;line-height:1.4;color:var(--fg-soft)}
@media (prefers-color-scheme:dark){
  .book img{box-shadow:0 2px 4px rgba(0,0,0,.45),0 30px 60px -20px rgba(0,0,0,.8)}
  .book--dark img{box-shadow:0 0 0 1px rgba(194,162,92,.2),0 2px 4px rgba(0,0,0,.45),0 30px 60px -20px rgba(0,0,0,.8)}
  .book--dark::before{content:"";position:absolute;inset:-14% -34%;z-index:-1;background:radial-gradient(closest-side,var(--glow),rgba(194,162,92,0))}
  .book--dark::after{content:"";position:absolute;inset:0;border-radius:1px 3px 3px 1px;box-shadow:inset 0 0 0 1px rgba(226,217,196,.08);pointer-events:none}
}

@media (max-width:1023px){
  .hero__book{width:min(280px,100%)}
}
@media (max-width:767px){
  .hero .grid{grid-template-columns:minmax(0,1fr)}
  .hero__book{grid-column:1;grid-row:1;justify-self:center;width:min(220px,64vw);margin:8px 0 36px}
  .hero__text{grid-column:1;grid-row:2}
  .mark{margin:22px 0 20px}
  .hero .signup-slot{margin-top:28px}
}

/* ---------- sign-up block (the same block in every place it appears) ---------- */
.signup__pitch{color:var(--fg-2);max-width:30em}
.signup__action{margin:22px 0 14px}
.signup__note{font-size:1rem;line-height:1.5;color:var(--fg-soft);max-width:32em}
.button{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;
  border:1px solid transparent;border-radius:2px;background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-label);font-size:.8125rem;font-weight:700;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;text-align:center;
}
.button:hover{background:var(--btn-hover)}

/* ---------- the book ---------- */
.s-head{grid-column:1 / span 4}
.s-body{grid-column:5 / span 8}
.lede{font-size:clamp(1.3125rem,1.15rem + .55vw,1.5rem);line-height:1.5}
.excerpt{margin:40px 0 0;padding-left:24px;border-left:1px solid var(--ornament)}
.excerpt blockquote{margin:0}
.excerpt p{font-style:italic;color:var(--fg-2)}
.excerpt figcaption{margin-top:12px}
.made{margin-top:48px;max-width:var(--measure)}
.made::before{content:"";display:block;width:48px;height:1px;margin-bottom:22px;background:var(--ornament)}
.made__text{margin-top:10px;font-style:italic;color:var(--fg-soft)}
@media (max-width:899px){
  .s-head,.s-body{grid-column:1 / -1}
  .s-head{margin-bottom:28px}
}

/* ---------- six jobs (night band, the key glowing on black) ---------- */
.jobs{overflow:clip}
.jobs .grid{row-gap:0}
.jobs__key{grid-column:1 / span 4;grid-row:1;align-self:start;justify-self:center;position:relative;display:grid;place-items:center;padding:6px 0 0}
.jobs__key::before{content:"";position:absolute;inset:-25% -70%;background:radial-gradient(closest-side,rgba(194,162,92,.17),rgba(194,162,92,.05) 50%,rgba(194,162,92,0) 75%);pointer-events:none}
.jobs__key img{position:relative;display:block;width:205px;height:330px}
.jobs__body{grid-column:5 / span 8;grid-row:1}
.jobs .intro{max-width:30em}
.jobs__list{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;margin:52px 0 0;padding:0;list-style:none;counter-reset:job}
.jobs__list li{counter-increment:job;padding-top:20px;border-top:1px solid var(--hair)}
.jobs__list li::before{content:counter(job,upper-roman);display:block;margin-bottom:10px;font-family:var(--font-display);font-size:1.0625rem;letter-spacing:.12em;color:var(--accent)}
.jobs__list h3{font-family:var(--font-text);font-size:1.625rem;line-height:1.2;letter-spacing:-.005em;color:var(--fg)}
.jobs__list p{margin-top:8px;font-size:1.125rem;line-height:1.5;color:var(--fg-soft)}
.seventh{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:88px;padding-top:44px;border-top:1px solid var(--ornament)}
.seventh .label{grid-column:1 / span 4;padding-top:.85em}
.seventh__line{grid-column:5 / span 8;font-style:italic;font-size:clamp(1.75rem,1.2rem + 1.9vw,2.625rem);line-height:1.18;color:var(--fg);max-width:20em}
.seventh__gloss{grid-column:5 / span 8;margin-top:18px;color:var(--fg-soft);max-width:30em}
@media (max-width:1023px){
  .jobs__key{grid-column:1 / -1;grid-row:auto;padding:8px 40px 40px}
  .jobs__key::before{inset:-10% -20%}
  .jobs__key img{width:99px;height:160px}
  .jobs__body{grid-column:1 / -1;grid-row:auto}
  .seventh .label,.seventh__line,.seventh__gloss{grid-column:1 / -1}
  .seventh .label{padding-top:0}
  .seventh__line{margin-top:16px}
}
@media (max-width:639px){
  .jobs__list{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}
  .seventh{margin-top:48px;padding-top:32px}
}

/* ---------- a line from the top of every chapter: a contents page ---------- */
.lines__head{max-width:40em;margin-bottom:48px}
.lines__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(9,auto);grid-auto-flow:column;column-gap:64px;margin:0;padding:0;list-style:none}
.lines__list li{padding:18px 0 22px;border-top:1px solid var(--hair)}
.lines__list .label{display:block;margin-bottom:6px;color:var(--fg-soft)}
.lines__list .label .n{color:var(--accent)}
.lines__line{font-size:1.1875rem;line-height:1.45;color:var(--fg)}
@media (max-width:767px){
  .lines__list{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .lines__list li{padding:14px 0 16px}
  .lines__line{font-size:1.0625rem;line-height:1.45}
}

/* ---------- read the opening ---------- */
.opening .grid{align-items:center}
.art--polaroid{grid-column:1 / span 4;width:min(300px,100%)}
.opening__text{grid-column:5 / span 8}
.opening .lead{margin-top:20px;font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);line-height:1.4;color:var(--fg-2);max-width:22em}
.go{display:inline-block;margin-top:26px;font-size:1.25rem;color:var(--accent)}
@media (max-width:767px){
  .art--polaroid,.opening__text{grid-column:1 / -1}
  .art--polaroid{width:min(240px,70%);margin-bottom:36px}
}

/* ---------- from the book: excerpts, never testimonials ---------- */
/* one grid: the heading beside the first quote, every quote in the right-hand columns, and the
   flyer in the left column level with the Chapter 2 quote it illustrates (row 2), running beside
   the next two. On phones everything stacks in reading order, the flyer under its quote. */
.quotes__grid{row-gap:52px;align-items:start}
.quotes__aside{grid-column:1 / span 4;grid-row:1}
.quote{grid-column:5 / span 8;margin:0}
.quote blockquote{margin:0}
.quote p{font-style:italic;font-size:var(--step-quote);line-height:1.4;color:var(--fg);max-width:24em}
.quote p.hang{text-indent:-.42em}
@supports (hanging-punctuation:first){.quote p.hang{text-indent:0;hanging-punctuation:first}}
.quote figcaption{margin-top:12px}
.art{margin:0}
.art img{display:block;width:100%;height:auto;border:1px solid var(--edge)}
.art figcaption{margin-top:12px;font-style:italic;font-size:1rem;line-height:1.4;color:var(--fg-soft)}
.art--flyer{grid-column:1 / span 4;grid-row:2 / span 3;width:min(220px,100%);padding-top:6px}
@media (max-width:899px){
  .quotes__grid{row-gap:40px}
  .quotes__aside,.quote{grid-column:1 / -1}
  .quotes__aside{grid-row:auto}
  .art--flyer{grid-column:1 / -1;grid-row:auto;width:min(200px,64%);padding-top:0}
}

/* ---------- about the author ---------- */
.about .s-body p{max-width:var(--measure)}
.about .s-body p+p{margin-top:1em}

/* ---------- endpaper: the sign-up as a centred colophon, then contact and copyright ---------- */
.signup-end{padding-bottom:64px}
.colophon{max-width:36em;text-align:center}
.colophon h2{margin-bottom:22px}
.colophon .signup__pitch{font-size:var(--step-0);margin-inline:auto}
.colophon .signup__note{margin-inline:auto}
.back{display:inline-block;margin-top:26px;font-size:1.125rem;color:var(--accent)}
.endpaper__foot{padding-block:0 56px}
.lost + .endpaper__foot,.form-page + .endpaper__foot{padding-top:56px}   /* no night band above these footers */
.endpaper__foot .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.endpaper__foot .wrap::before{content:"";display:block;width:48px;height:1px;margin-bottom:22px;background:var(--ornament)}
.contact{color:var(--fg-2)}
.copyright{font-size:.9375rem;color:var(--fg-soft)}

/* ---------- the Prologue page ---------- */
.chapter{padding-block:clamp(40px,6vw,88px) var(--pad)}
.chapter__inner{width:min(100% - 2 * var(--gutter),var(--measure));margin-inline:auto}
.chapter h1{font-family:var(--font-text);font-size:clamp(2.5rem,1.7rem + 2.6vw,3.75rem);line-height:1.05;letter-spacing:-.015em;text-transform:none}
.chapter h1 .kicker{display:block;margin-bottom:16px;font-family:var(--font-label);font-size:var(--label);line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.chapter h1 .main{display:block}
.byline{margin-top:14px;font-style:italic;color:var(--fg-soft)}
.byline cite{font-style:normal}
.chapter .art--polaroid{width:min(320px,80%);margin:44px 0 52px}
.end-line{margin-top:22px;text-align:center;font-style:italic;color:var(--fg-soft);text-wrap:balance}
.chapter__body p{margin-top:1em;hyphens:manual}
.chapter__body p:first-child{margin-top:0}
.chapter__body p:first-child::first-letter{float:left;margin:.06em .1em 0 0;font-family:var(--font-display);font-size:3.55em;line-height:.82;color:var(--accent)}
.endmark{display:flex;justify-content:center;margin-top:56px}
.endmark img{display:block;width:25px;height:40px}
/* wide screens: the picture moves into the margin, so the first sentence starts near the top */
@media (min-width:1100px){
  .chapter__inner{width:min(100% - 2 * var(--gutter),1160px);display:grid;grid-template-columns:minmax(0,1fr) var(--measure) minmax(0,1fr);column-gap:56px}
  .chapter__inner>*{grid-column:2}
  .chapter .art--polaroid{grid-column:1;grid-row:3;justify-self:end;align-self:start;width:min(240px,100%);margin:50px 0 0}
  .chapter__body{grid-row:3;margin-top:44px}
}
@media (max-width:767px){
  .chapter .art--polaroid{width:200px;margin:32px auto 36px}
}

/* ---------- 404 ---------- */
.lost{padding-block:clamp(56px,10vw,140px)}
.lost .wrap{max-width:32em}
.lost .eyebrow{margin-bottom:16px}
.lost h1{font-family:var(--font-text);font-size:clamp(2.25rem,1.6rem + 2.4vw,3.25rem);line-height:1.1;letter-spacing:-.01em;text-transform:none}
.lost p{margin-top:18px;color:var(--fg-2)}

/* ---------- the sign-up form and its thank-you page: a card on the desk ---------- */
.form-page{padding-block:clamp(40px,8vw,104px)}
.form-card{
  max-width:34rem;margin-inline:auto;padding:clamp(28px,6vw,52px) clamp(22px,6vw,52px) clamp(28px,5vw,44px);
  border:1px solid var(--edge);border-radius:16px;
  box-shadow:0 1px 2px rgba(var(--shadow),.05),0 24px 48px -24px rgba(var(--shadow),.30);
}
.form-card__mark{display:flex;justify-content:center;margin-bottom:20px}
.form-card__mark img{width:auto;height:44px}
.form-card .eyebrow{text-align:center}
.form-card h1{
  margin-top:10px;text-align:center;font-family:var(--font-text);
  font-size:clamp(2rem,1.55rem + 1.8vw,2.75rem);line-height:1.1;letter-spacing:-.01em;text-transform:none;color:var(--heading)
}
.form-card__lede{margin:16px auto 0;max-width:26em;text-align:center;color:var(--fg-2)}
.form{display:grid;gap:22px;margin-top:34px}
.form__trap{display:none!important}
.field{display:grid;gap:8px}
.field label{font-family:var(--font-label);font-size:var(--label);line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.field__hint{letter-spacing:.06em;text-transform:none;color:var(--fg-soft)}
.field input,.field textarea{
  display:block;width:100%;min-height:54px;margin:0;padding:13px 16px;
  border:1px solid var(--field-edge);border-radius:10px;background:var(--paper);color:var(--fg);
  font-family:var(--font-text);font-size:1.1875rem;line-height:1.4;
  box-shadow:inset 0 1px 2px rgba(var(--shadow),.07);
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:128px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--ornament)}
.field input:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--ornament);outline-offset:2px;border-color:var(--ornament)
}
.form__submit{margin-top:6px}
.form__submit .button,.form-card__back .button{width:100%;min-height:56px;border-radius:10px;font-size:.875rem;cursor:pointer}
.form__submit .button{border:0;font-family:var(--font-label)}
.form-card__fine{margin-top:18px;text-align:center;font-size:1rem;line-height:1.5;color:var(--fg-soft)}
.form-card__fine + .form-card__fine{margin-top:8px}
.form-card__back{margin-top:32px}
@media (prefers-reduced-motion:no-preference){
  .field input,.field textarea{transition:border-color .15s ease,box-shadow .15s ease}
  .button{transition:background-color .15s ease}
}
@media (forced-colors:active){
  .field input,.field textarea{border-color:CanvasText}
  .field input:focus-visible,.field textarea:focus-visible{outline:2px solid Highlight}
}

/* ---------- small screens: spacing ---------- */
@media (max-width:639px){
  .lines__head{margin-bottom:32px}
  .quotes__grid{row-gap:34px}
  .endmark img{width:22px;height:36px}
  /* a hanging quote mark would sit inside the 16 px gutter on a phone */
  .quote p.hang{text-indent:0;hanging-punctuation:none}
}

@media (forced-colors:active){
  .button{border-color:ButtonText}
  .mark,.made::before,.endpaper__foot .wrap::before{background:CanvasText}
}
@media print{
  .masthead nav,.signup-slot,.skip{display:none}
  .s-night{background:none;color:#000}
}