/* gussays.com: one page from the book. Tokens from the CCO design lock (Nov 11, 2026). */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#F5EBD4;--paper-2:#EDE1C6;--paper-field:#FBF5E6;--ink:#16130F;--ink-2:#5C554A;
  --lamp:#F2C84B;--shadow:#8D7FC0;--rule:rgba(22,19,15,.16);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:max(20px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0}

/* ---------- layout: phone first, one screen ---------- */
.page{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  width:100%;max-width:1080px;margin:0 auto;padding:clamp(20px,4svh,40px) var(--gutter) 8px}
.words{display:contents}
.series{order:1}
.title{order:2;margin:10px 0 0;font:600 clamp(48px,17vw,76px)/.92 var(--display);letter-spacing:-.02em;position:relative}
.t-anchor{position:relative}
.art{order:3;margin:-10px 0 -14px;width:78%;max-width:340px}
.gus{width:100%;mix-blend-mode:multiply}
.line{order:4;margin:6px 0 0;max-width:30ch;font-size:clamp(16px,4.3vw,19px);color:var(--ink-2);text-wrap:pretty}

/* ---------- footer ---------- */
.foot{text-align:center;padding:14px var(--gutter) max(18px,env(safe-area-inset-bottom,0px))}

/* ---------- desktop: words left, Gus right ---------- */
@media (min-width:860px){
  .page{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;justify-items:start;text-align:left;column-gap:24px;padding:48px 48px 16px}
  .words{display:flex;flex-direction:column;align-items:flex-start;grid-column:1;grid-row:1}
  .title{font-size:clamp(76px,8.2vw,120px);margin-top:14px}
  .line{margin-top:18px;max-width:34ch}
  .art{grid-column:2;grid-row:1;justify-self:center;width:min(480px,100%);max-width:520px;margin:0}
}
@media (min-width:860px) and (max-height:700px){.art{width:min(400px,100%)}}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}

/* ---------- 404: Gus startled ---------- */
.nf-page{gap:6px}
.nf-words{display:flex;flex-direction:column;align-items:center;gap:10px;order:2}
.nf-line{margin:0;font:600 clamp(34px,9vw,64px)/1 var(--display);letter-spacing:-.02em}
.nf-home{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-size:12px}
.nf-art{order:1;position:relative;margin:0;width:min(560px,92%)}
@media (min-width:860px){
  .nf-page{grid-template-columns:.9fr 1.1fr}
  .nf-words{grid-column:1;grid-row:1;align-items:flex-start}
  .nf-art{grid-column:2;grid-row:1;width:100%}
}


/* sign-up off: one plain line where the form sits */
.soon{order:5;position:relative;margin:22px 0 0;font:600 clamp(20px,5vw,24px)/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}