/* Cutive Mono, a typewriter face. Reenie Beanie, a quick pointed hand. */
@font-face { font-family: 'Cutive Mono'; src: url('/fonts/cutive-mono.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Reenie Beanie'; src: url('/fonts/reenie-beanie.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Mrs Saint Delafield'; src: url('/fonts/mrs-saint-delafield.woff2') format('woff2'); font-display: swap; }
/* Bodoni Moda, Owen Earl's revival of Giambattista Bodoni (Parma, Manuale Tipografico, 1818).
   Its optical size axis keeps hairlines for big titles and sturdier strokes for reading. */
@font-face { font-family: 'Bodoni Moda'; src: url('/fonts/bodoni-moda.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/fonts/bodoni-moda-italic.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #F4F1EB;
  --ink: #161513;          /* typed text */
  --ink-soft: #4B4A46;
  --hand-ink: #1A1A1A;     /* handwriting in black pen */
  --red: #D81E24;          /* the provocative red */
  --ballpoint: #233F6B;    /* the fully handwritten version */
  --pencil: #6A6862;
  --hairline: #DDD8CE;
  --rule: #B9B3A7;         /* stronger rule for boxes and tables */
  --phi: 1.618;
  --card: #FFFFFF;

  --hand: 'Reenie Beanie', 'Bradley Hand', 'Segoe Print', cursive;
  --note: 'Reenie Beanie', 'Bradley Hand', cursive;
  --sign: 'Mrs Saint Delafield', 'Reenie Beanie', cursive;
  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;   /* titles only */
  --type: 'Cutive Mono', 'Courier Prime', 'Courier New', monospace; /* everything typed */

  --measure: 37rem;
  --text: clamp(.95rem, .9rem + .25vw, 1.05rem);
  --ease: cubic-bezier(.24,.83,.22,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--type); font-size: var(--text); font-weight: 400; line-height: 1.5; letter-spacing: 0; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; text-rendering: optimizeLegibility; font-kerning: normal; font-variant-ligatures: none;
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
::selection { background: #F6C9C7; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--red); }
strong { font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
em { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: .5rem 1rem; font-size: 1rem; z-index: 40; }
.skip:focus { left: 1rem; top: 1rem; }

/* ───────── top of the page ───────── */
.desk-top {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem;
  max-width: 76rem; margin: 0 auto; padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  font-size: .84rem; color: var(--ink);
}
.wordmark { justify-self: start; text-decoration: none; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15rem; letter-spacing: -.01em; min-height: 44px; display: inline-flex; align-items: center; }
.tools { grid-column: 2; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1.1rem; }
.tool {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink); min-height: 44px;
  text-decoration: underline; text-decoration-color: rgba(20,20,20,.25); text-underline-offset: .25em;
}
.tool:hover { color: var(--red); text-decoration-color: currentColor; }
.tool[aria-pressed="true"] { color: var(--red); }
.tool[hidden] { display: none; }

/* ───────── the letter ───────── */
.letter { padding: 0 clamp(1.5rem, 6vw, 4rem) 3rem; }
.sheet { position: relative; max-width: var(--measure); margin: 0 auto; padding: clamp(5rem, 11vw, 9rem) 0 clamp(6rem, 12vw, 9.5rem); }
.sheet + .sheet::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100vw, 64rem); height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 15%, var(--hairline) 85%, transparent);
}
.sheet--first { padding-top: clamp(4rem, 11vw, 8rem); }
.sheet::after { content: ''; display: table; clear: both; }
.sheet p { margin: 0 0 1.25em; }
.sheet > p:not(.dateline):not(.folio):not(.address):not(.closing):not(.signature):not(.fullname),
.entry > p:not(.entry__when):not(.entry__hand):not(.entry__link):not(.entry__intro), .gp-text {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; text-wrap: pretty;
}

.dateline { font-family: var(--hand); color: var(--hand-ink); font-size: 1.75em; text-align: right; margin-bottom: 1.6em !important; transform: rotate(-1deg); }
.salutation { position: relative; display: inline-block; margin: 0 0 1em; font-family: var(--hand); font-weight: 400; font-size: clamp(2.3rem, 4.6vw, 3.1rem); line-height: 1; color: var(--hand-ink); }
.sheet h2 { margin: 0 0 1em; font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem, 2.5vw + .6rem, 2.2rem); line-height: 1.12; letter-spacing: .005em; color: var(--ink); font-variation-settings: 'opsz' 96; }
.big { font-family: var(--serif); font-size: 1.28em; line-height: 1.34; font-style: italic; font-weight: 400; letter-spacing: -.01em; margin-top: 1.4em !important; }
.folio { position: absolute; bottom: 2rem; left: 0; right: 0; margin: 0 !important; text-align: center; font-family: var(--note); font-size: 1.2rem; color: var(--pencil); }

/* hand-drawn marks */
.doodle { position: absolute; pointer-events: none; overflow: visible; }
.doodle path { fill: none; stroke: var(--hand-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.doodle--under { left: 0; bottom: -.3em; width: 100%; height: .45em; }
.js .doodle path { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.4s var(--ease) .35s; }
.js .is-in .doodle path { stroke-dashoffset: 0; }

.margin-note { font-family: var(--note); color: var(--red); font-size: 1.55rem; line-height: 1.05; max-width: 12rem; transform: rotate(-3deg); }
.margin-note--right { float: right; margin: .2em -9rem 1em 1.5rem; text-align: center; }
.margin-note--left { float: left; width: 10rem; margin: .4em 0 1em -13rem; transform: rotate(3deg); }

.contents { margin-top: 2.8em; padding-top: 1.2em; border-top: 1px solid var(--hairline); }
.contents__title { font-family: var(--hand); color: var(--hand-ink); font-size: 1.8rem; margin: 0 0 .4em !important; transform: rotate(-1.5deg); width: fit-content; }
.contents ol { margin: 0; padding-left: 1.3em; columns: 2 14rem; column-gap: 2rem; font-size: .98em; }
.contents li { padding: .12em 0; }
.contents a { text-decoration-color: rgba(20,20,20,.25); }

/* printed photographs */
.photo {
  margin: .4em 0 1.2em; padding: .5rem .5rem 0; background: #fff; width: 18rem; max-width: 100%; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 16px 30px -16px rgba(0,0,0,.35);
  transform: rotate(var(--tilt, 0deg));
}
.photo img { display: block; width: 100%; height: auto; background: var(--hairline); border-radius: 1px; }
.photo figcaption { font-family: var(--note); color: var(--pencil); font-size: 1.25rem; line-height: 1.05; padding: .45rem .2rem .55rem; text-align: center; }
.photo--right { float: right; margin: .3em -9rem 1.2em 1.8rem; }
.photo--left  { float: left;  margin: .3em 1.8rem 1.2em -9rem; }
.photo--wide  { width: 24rem; }
.photo--small { width: 12rem; }
.photo--center { float: none; margin: 1.4em auto 1.8em; width: min(32rem, 100%); }
.spread { display: flex; gap: 1.6rem; align-items: flex-start; justify-content: center; margin: 1em 0 1.6em; clear: both; }
.spread .photo { width: 15rem; margin: 0; }
.spread .photo:nth-child(2) { margin-top: 2.5rem; width: 13.5rem; }

.press { list-style: none; margin: .6em 0 1em; padding: 0; }
.press li { padding: .5em 0; border-bottom: 1px solid var(--hairline); }
.press a { font-weight: 400; }
.when { font-family: var(--note); color: var(--pencil); font-size: 1.15em; margin-left: .35em; }

.address { font-size: 1.3em; font-weight: 400; margin: .2em 0 .9em !important; }
.address a { text-decoration-thickness: 1px; }
.signoff { margin-top: 2.6em; padding-left: clamp(0rem, 18vw, 13rem); }
.closing { font-family: var(--hand); color: var(--hand-ink); font-size: 2.3em; line-height: 1; margin-bottom: 0 !important; }
.signature { font-family: var(--sign); font-size: clamp(5.5rem, 17vw, 8rem); line-height: 1; margin: 0 0 0 .3em !important; color: var(--hand-ink); transform: rotate(-4deg); }
.fullname { font-family: var(--note); color: var(--pencil); font-size: 1.35em; margin-top: -.3em !important; padding-left: 1.4em; }

.colophon { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem 9rem; font-size: .88rem; line-height: 1.55; color: #6B6963; text-align: center; }
.colophon p { margin: .3rem 0; }

.toast {
  position: fixed; left: 50%; bottom: 6.5rem; transform: translate(-50%, 1rem); margin: 0; z-index: 50;
  background: var(--ink); color: #fff; font-size: .95rem; padding: .6rem 1rem; border-radius: 4px;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* paragraphs settle in as the reader arrives */
.js .sheet > * { opacity: 0; translate: 0 .5rem; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.js .sheet.is-in > * { opacity: 1; translate: 0 0; }
.js .sheet.is-in > :nth-child(2) { transition-delay: .08s; }
.js .sheet.is-in > :nth-child(3) { transition-delay: .16s; }
.js .sheet.is-in > :nth-child(4) { transition-delay: .24s; }
.js .sheet.is-in > :nth-child(n+5) { transition-delay: .32s; }
.js .sheet > .folio { opacity: 1; translate: none; }

/* ───────── the fully handwritten version ───────── */
[data-mode="hand"] body { font-family: var(--hand); font-weight: 400; font-size: clamp(1.6rem, 1.25rem + 1vw, 2.1rem); line-height: 1.3; color: var(--ballpoint); }
[data-mode="hand"] .sheet h2 { font-family: var(--hand); font-weight: 400; font-size: 1.7em; letter-spacing: 0; color: var(--ballpoint); transform: rotate(-.6deg); width: fit-content; }
[data-mode="hand"] .big { font-family: var(--hand); font-style: normal; font-weight: 400; font-size: 1.2em; }
[data-mode="hand"] .salutation, [data-mode="hand"] .dateline, [data-mode="hand"] .closing, [data-mode="hand"] .signature, [data-mode="hand"] .contents__title { color: var(--ballpoint); }
[data-mode="hand"] .sheet p:nth-of-type(3n+2) { transform: rotate(-.25deg); }
[data-mode="hand"] .desk-top { font-size: 1.2rem; }
[data-mode="hand"] .address { font-size: 1.3em; font-weight: 400; }
[data-mode="hand"] .contents ol { font-family: var(--note); color: var(--pencil); font-size: 1.15em; line-height: 1.2; }
[data-mode="hand"] .doodle path { stroke: var(--ballpoint); }

/* ───────── the search bar, always waiting at the bottom ───────── */
.composer {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  width: min(30rem, calc(100vw - 2rem)); transition: width .5s var(--ease);
}
.composer:focus-within, .is-agent .composer, .composer.is-thinking, .composer.is-listening { width: min(42rem, calc(100vw - 2rem)); }
.composer__chips { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-bottom: .55rem; transition: opacity .3s, transform .3s var(--ease); }
.composer__chips[hidden] { display: none; }
.composer:not(:focus-within) .composer__chips { opacity: 0; transform: translateY(6px); pointer-events: none; }
.composer__chips button {
  font: 400 .8rem/1.15 var(--type); color: var(--ink); background: rgba(250,248,243,.85); cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 4px; padding: .5rem .75rem; min-height: 36px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.composer__chips button:hover { border-color: rgba(20,20,20,.35); }
.composer__bar {
  position: relative; display: flex; align-items: center; gap: .25rem; padding: .3rem .35rem .3rem .95rem;
  background: rgba(250,248,243,.84); border: 1px solid rgba(20,20,20,.1); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 16px 40px -22px rgba(0,0,0,.35);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: box-shadow .4s var(--ease), border-color .4s;
}
.composer__bar:focus-within { border-color: rgba(20,20,20,.22); box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 22px 50px -22px rgba(0,0,0,.4); }
/* while the page is being written, a thin line of ink runs under the bar */
.composer__bar::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--ink), transparent); background-size: 40% 100%; background-repeat: no-repeat;
}
.is-thinking .composer__bar::after { opacity: .6; animation: ink 1.4s ease-in-out infinite; }
.is-listening .composer__bar::after { opacity: .8; background-image: linear-gradient(90deg, transparent, var(--red), transparent); animation: ink 1s ease-in-out infinite; }
@keyframes ink { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.composer__bar input { caret-color: var(--red); flex: 1; min-width: 0; min-height: 42px; border: 0; background: transparent; color: var(--ink); font: 400 .95rem/1.3 var(--type); padding: 0 .25rem; }
.composer__bar input::placeholder { color: #8C8A84; }
.composer__bar input:focus { outline: none; }
.composer__mic, .composer__send { flex: none; width: 38px; height: 38px; border-radius: 4px; border: 0; cursor: pointer; display: grid; place-items: center; background: transparent; color: var(--ink); transition: background .2s; }
.composer__mic:hover { background: rgba(20,20,20,.05); }
.composer__send { background: var(--ink); color: #fff; }
.composer__mic svg, .composer__send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.composer__mic[aria-pressed="true"] { background: #FBE3E0; color: var(--red); }
.composer__mic[hidden] { display: none; }
.composer__fine { position: absolute; left: 0; right: 0; top: calc(100% + 5px); margin: 0; text-align: center; font-size: .66rem; line-height: 1.3; color: #8C8A84; transition: opacity .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer:not(:focus-within) .composer__fine { opacity: 0; }
/* ───────── the page that writes itself ───────── */
.generated { padding: clamp(5.5rem, 11vw, 8rem) clamp(1.5rem, 6vw, 4rem) 16rem; }
.generated[hidden] { display: none; }
.generated__turns { list-style: none; margin: 0 auto; padding: 0; max-width: 54rem; }
.gturn { margin: 0 0 clamp(4rem, 9vw, 6rem); scroll-margin-top: 5rem; }
.gturn + .gturn { padding-top: clamp(3rem, 7vw, 4.5rem); border-top: 1px solid var(--hairline); }
.gturn__q { font-family: var(--hand); font-weight: 400; color: var(--hand-ink); font-size: clamp(2rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 0 0 1.4rem; transform: rotate(-.8deg); width: fit-content; max-width: 100%; }
.gturn__writing { display: flex; align-items: center; gap: .8rem; margin: 0; font-family: var(--note); color: var(--pencil); font-size: 1.5rem; }
.gturn__writing svg { width: 7.5rem; height: 1rem; overflow: visible; }
.gturn__writing path { fill: none; stroke: #B9B6AE; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 160; animation: scribble 1.6s ease-in-out infinite; }
@keyframes scribble { 0% { stroke-dashoffset: 160; } 60%, 100% { stroke-dashoffset: 0; } }
.gturn__plain { font-size: 1.15rem; }

.gp { display: flex; flex-direction: column; gap: 2rem; }
.gp-in { animation: gp-in .6s var(--ease) both; }
@keyframes gp-in { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
.gp-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.2vw + .5rem, 2.7rem); line-height: 1.1; letter-spacing: 0; color: var(--ink); max-width: 24ch; font-variation-settings: 'opsz' 96; }
.gp-lede { margin: 0; font-size: clamp(1rem, .92rem + .45vw, 1.2rem); line-height: 1.5; color: var(--ink); max-width: 44ch; font-weight: 400; letter-spacing: 0; }
.gp-text { margin: 0; max-width: 38rem; }
.gp-hand { margin: -.6rem 0 0; font-family: var(--note); color: var(--red); font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.05; transform: rotate(-1.2deg); width: fit-content; max-width: 30rem; }
.gp-section { margin: 1.6rem 0 -.6rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.8vw + .5rem, 1.6rem); letter-spacing: .005em; line-height: 1.2; }

.gp-photo { margin: .2rem 0; width: min(30rem, 100%); padding: .55rem .55rem 0; background: #fff; border-radius: 2px; transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 20px 40px -20px rgba(0,0,0,.4); animation: drop .8s var(--ease) both; }
.gp-photo--wide { width: 100%; max-width: 44rem; }
@keyframes drop { from { opacity: 0; transform: translateY(-18px) rotate(calc(var(--tilt, 0deg) * -3)) scale(.97); } }
.gp-photo img { display: block; width: 100%; height: auto; background: var(--hairline); }
.gp-photo figcaption { font-family: var(--note); color: var(--pencil); font-size: 1.3rem; text-align: center; padding: .45rem 0 .55rem; line-height: 1.05; }

.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1.4rem 1.2rem; }
.gp-card { display: flex; flex-direction: column; gap: .3rem; animation: gp-in .6s var(--ease) both; }
.gp-card__img { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #F4F2EE; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 30px -18px rgba(0,0,0,.35); margin-bottom: .6rem; }
.gp-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-card__img--empty { display: grid; place-items: center; font-family: var(--hand); font-size: 3.2rem; color: #C9C5BC; }
.gp-card__title { margin: 0; font-size: 1.35rem; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.gp-card__meta { margin: 0; font-size: .92rem; font-style: italic; color: var(--ink-soft); }
.gp-card__text { margin: 0; font-size: 1rem; line-height: 1.45; }

.gp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.gp-fact { display: flex; flex-direction: column; padding: .8rem 1rem 1rem 0; }
.gp-fact + .gp-fact { padding-left: 1rem; border-left: 1px solid var(--rule); }
.gp-fact::before { content: ''; width: 1.3rem; height: 2px; background: var(--ink); margin-bottom: .7rem; }
.gp-fact__value { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.gp-fact__label { color: var(--pencil); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; margin-top: .55rem; }

.gp-timeline { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 1.5px solid var(--ink); }
.gp-moment { position: relative; margin: 0 0 1.1rem; }
.gp-moment::before { content: ''; position: absolute; left: -2.02rem; top: .55em; width: .7rem; height: .7rem; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); }
.gp-moment__when { display: block; font-family: var(--hand); color: var(--red); font-size: 1.75rem; line-height: 1; margin-bottom: .1rem; }
.gp-moment__what { display: block; font-size: 1.1rem; line-height: 1.4; }

.gp-quote { margin: .4rem 0; max-width: 34rem; }
.gp-quote p { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-style: italic; font-weight: 400; line-height: 1.2; letter-spacing: -.015em; }
.gp-quote p::before { content: '\201C'; } .gp-quote p::after { content: '\201D'; }
.gp-quote cite { display: block; margin-top: .5rem; font-family: var(--note); font-style: normal; color: var(--pencil); font-size: 1.3rem; }

.gp-links { list-style: none; margin: 0; padding: 0; max-width: 38rem; }
.gp-links li { padding: .6rem 0; border-bottom: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; }
.gp-links a { font-weight: 400; }
.gp-links__note { font-family: var(--note); color: var(--pencil); font-size: 1.25rem; }

.gp-contact { display: flex; flex-direction: column; gap: .3rem; padding: 1.6rem 1.8rem; border: 1px solid var(--hairline); border-radius: 8px; max-width: 30rem; box-shadow: 0 14px 30px -22px rgba(0,0,0,.35); }
.gp-contact p { margin: 0 0 .3rem; }
.gp-contact > a { font-size: 1.5rem; }
.gp-contact__press { font-family: var(--note); color: var(--pencil); font-size: 1.25rem; }

.gp-pagelink { align-self: flex-start; background: none; border: 0; padding: .2rem 0; min-height: 40px; cursor: pointer; font: inherit; font-family: var(--hand); font-size: 1.8rem; color: var(--red); }
.gp-pagelink:hover { text-decoration: underline; }

.gp-choices { display: flex; flex-direction: column; gap: .9rem; margin-top: .8rem; }
.gp-choices__q { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: -.015em; line-height: 1.15; }
.gp-choices__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: .8rem; }
.gp-choice {
  text-align: left; cursor: pointer; font: inherit; color: var(--ink); background: #fff; padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--hairline); border-radius: 8px; box-shadow: 0 10px 24px -20px rgba(0,0,0,.3);
  transition: border-color .2s, transform .2s var(--ease); animation: gp-in .6s var(--ease) both;
}
.gp-choice:hover { border-color: var(--ink); transform: translateY(-2px); }
.gp-choice strong { display: block; font-weight: 400; font-size: 1.25rem; line-height: 1.15; }
.gp-choice span { display: block; margin-top: .3rem; font-size: .95rem; color: var(--ink-soft); line-height: 1.35; }

/* agent mode, the letter steps aside */
.is-agent .letter, .is-agent .colophon, .is-agent .field { display: none; }
.is-agent [data-action="mode"], .is-agent [data-action="share"], .is-agent [data-action="print"] { display: none; }

/* ───────── wide screens let things slip into the margin ───────── */
@media (max-width: 1180px) {
  .photo--right { margin-right: -.5rem; }
  .photo--left { margin-left: -.5rem; }
  .margin-note--right { margin-right: 0; }
  .margin-note--left { float: none; width: auto; max-width: 18rem; margin: 0 0 1em; transform: rotate(-1.5deg); }
}
@media (max-width: 720px) {
  .sheet { padding: 3.5rem 0 5rem; }
  .desk-top { grid-template-columns: 1fr; gap: 0; font-size: .9rem; }
  .tools { grid-column: auto; justify-self: start; justify-content: flex-start; }
  .photo--right, .photo--left { float: none; margin: 1.1em auto 1.4em; width: min(20rem, 92%); }
  .photo--small { width: min(14rem, 80%); }
  .photo--center { width: 100%; }
  .margin-note--right { float: none; margin: .4em auto 1em; max-width: none; text-align: center; }
  .spread { gap: .9rem; }
  .spread .photo { width: 50%; }
  .spread .photo:nth-child(2) { width: 46%; margin-top: 1.6rem; }
  .signoff { padding-left: 1rem; }
  .composer__fine { display: none; }
  .composer__bar input { font-size: .8rem; }
  .composer__chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .2rem; scrollbar-width: none; }
  .composer__chips button { flex: none; }
  .generated { padding-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .sheet > * { opacity: 1 !important; translate: none !important; transition: none !important; }
  .js .doodle path { stroke-dashoffset: 0; transition: none; }
  .gturn__writing path { animation: none !important; }
  .gp-in, .gp-photo, .gp-card, .gp-choice { animation: none !important; }
  .composer__bar::after { animation: none !important; }
}

@media print {
  @page { size: A4; margin: 14mm; }
  body { font-size: 12pt; }
  .desk-top, .colophon, .toast, .skip, .contents, .composer, .generated { display: none !important; }
  .letter { padding: 0; }
  .sheet { padding: 0 0 8mm; page-break-after: always; max-width: none; }
  .sheet::before { display: none; }
  .sheet:last-of-type { page-break-after: auto; }
  .js .sheet > * { opacity: 1 !important; translate: none !important; }
  .photo { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; width: 6.5cm; }
  .photo--right, .photo--left { margin-left: 1rem; margin-right: 0; }
  .photo--center { width: 11cm; }
  .folio { position: static; margin-top: 1em !important; }
  .press a::after { content: ' ' attr(href); font-size: 8pt; font-weight: 400; word-break: break-all; }
  .js .doodle path { stroke-dashoffset: 0; }
}



/* ───────── the "Lately" page, written through the CMS ───────── */
.entry { position: relative; padding: 2.4rem 0 1.6rem; }
.entry + .entry { border-top: 1px solid var(--hairline); }
.entry::after { content: ''; display: table; clear: both; }
.entry__intro { font-family: var(--note); color: var(--pencil); font-size: 1.45rem; line-height: 1.1; margin-top: -1.2em !important; }
.entry__when { display: inline-block; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: var(--ink); border: 1px solid var(--ink); padding: .4rem .6rem; margin: 0 0 .9rem !important; }
.entry__title { margin: 0 0 1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 1.6vw + .6rem, 1.7rem); line-height: 1.15; letter-spacing: .005em; }
.entry__hand { font-family: var(--note); color: var(--red); font-size: 1.5rem; line-height: 1.05; transform: rotate(-1.5deg); width: fit-content; }
.entry__link a { font-style: italic; }
.entry .photo { width: 15rem; }
.entry .photo--right { margin-right: -6rem; }
.entry .photo--left { margin-left: -6rem; }
@media (max-width: 1180px) { .entry .photo--right, .entry .photo--left { margin-left: 0; margin-right: 0; } }
@media (max-width: 720px) { .entry .photo { width: min(18rem, 90%); } }

/* ───────── the door to the CMS ───────── */
.consent { display: grid; place-items: center; min-height: 100svh; padding: 2rem 1.25rem; }
.consent__card { width: min(30rem, 100%); }
.consent__kicker { font-family: var(--hand); font-size: 1.8rem; color: var(--hand-ink); margin: 0 0 .5rem; transform: rotate(-1deg); width: fit-content; }
.consent h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.consent p { margin: 0 0 .8rem; }
.consent__error { color: var(--red); font-style: italic; }
.consent form { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.consent label { font-size: .9rem; color: var(--ink-soft); }
.consent input[type=password] { min-height: 46px; padding: 0 .9rem; border: 1px solid var(--hairline); border-radius: 4px; font: inherit; }
.consent input[type=password]:focus { outline: none; border-color: var(--ink); }
.consent__actions { display: flex; gap: .6rem; margin-top: .8rem; }
.consent__actions button { min-height: 44px; padding: 0 1.2rem; border-radius: 4px; border: 1px solid var(--hairline); background: #fff; font: inherit; cursor: pointer; }
.consent__actions .consent__allow { background: var(--ink); color: #fff; border-color: var(--ink); }


/* ───────── typewriting: words arrive one after another, softly ───────── */
.w { animation: word-in .4s steps(5, end) both; animation-delay: var(--d, 0ms); }
@keyframes word-in { from { opacity: 0; filter: blur(2.5px); } 60% { opacity: 1; filter: blur(.6px); } }
/* a ribbon that never inks quite evenly, and keys that sit a hair off the line */
.sheet p, .entry p, .gp-text { text-shadow: 0 0 .5px rgba(20,20,20,.3); }
.w:nth-of-type(7n+3) { opacity: .92; }
.w:nth-of-type(5n+2) { position: relative; top: .035em; }
.w:nth-of-type(11n+6) { position: relative; top: -.03em; }
.js .sheet > p.is-typed { opacity: 1; translate: none; transition: none; }

/* ───────── small gestures ───────── */
/* a soft blur at the foot of the screen, so the letter sinks under the bar */
.fade-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; height: 92px; z-index: 25; pointer-events: none;
  background: linear-gradient(to top, rgba(244,241,235,.94), rgba(244,241,235,0));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent);
}

/* a hairline that measures how far you have read */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 40; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: read linear both; animation-timeline: scroll(root); }
  @keyframes read { to { transform: scaleX(1); } }
}
.is-agent .progress { display: none; }

/* the first letter of the letter */
/* a raised initial: it grows up from the baseline instead of dropping into the next lines */
.lead::first-letter {
  font-size: 1.7em; line-height: .6; font-weight: 400; color: var(--red);
}
.lead { margin-top: .6em !important; }
[data-mode="hand"] .lead::first-letter { font-size: 1.3em; }

/* figures are numbered, like plates in a monograph */
.letter { counter-reset: fig; }
.letter .photo { counter-increment: fig; }
.letter .photo figcaption::before {
  content: 'fig. ' counter(fig, decimal-leading-zero); display: block; margin-bottom: .15rem;
  font: italic 400 .72rem/1 var(--serif); letter-spacing: .06em; color: #9A978F;
}

/* photographs straighten up when you look at them */
.photo, .gp-photo { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.photo:hover, .gp-photo:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 26px 44px -22px rgba(0,0,0,.42); }

/* links draw their underline in */
.sheet p a, .entry p a, .gp-text a, .colophon a {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .4s var(--ease), color .2s;
}
.sheet p a:hover, .entry p a:hover, .gp-text a:hover, .colophon a:hover { background-size: 0 1px; background-position: 100% 100%; }

/* a Braun-like pilot light in the bar */
.composer__led { flex: none; width: 7px; height: 7px; margin: 0 .35rem 0 .1rem; border-radius: 50%; background: #CFCCC4; box-shadow: inset 0 1px 1px rgba(0,0,0,.18); transition: background .3s, box-shadow .3s; }
.composer:focus-within .composer__led { background: #9E9B93; }
.is-thinking .composer__led { background: var(--ink); animation: led 1.1s ease-in-out infinite; }
.is-listening .composer__led { background: var(--red); box-shadow: 0 0 0 3px rgba(207,63,51,.18), 0 0 10px rgba(207,63,51,.6); animation: led .8s ease-in-out infinite; }
@keyframes led { 50% { opacity: .35; } }

/* the last words */
.verse { margin: 4.2rem 0 0; text-align: center; }
.verse p { margin: 0 !important; font-family: var(--sign); font-style: normal; color: var(--red); font-size: clamp(3rem, 10vw, 6.4rem); line-height: .92; letter-spacing: 0; text-wrap: balance; }
.verse cite { display: inline-block; margin-top: 1.4rem; font-style: normal; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: .4rem .7rem; }

/* a technical drawing's title block, to close */
.titleblock { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto 2.6rem; max-width: 34rem; border: 1px solid var(--ink); text-align: left; }
.titleblock div { padding: .45rem .6rem .5rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.titleblock div:nth-child(4n) { border-right: 0; }
.titleblock div:nth-last-child(-n+4) { border-bottom: 0; }
.titleblock dt { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pencil); }
.titleblock dd { margin: .15rem 0 0; font-size: .86rem; color: var(--ink); }

@media (max-width: 720px) {
  .titleblock { grid-template-columns: repeat(2, 1fr); }
  .titleblock div:nth-child(2n) { border-right: 0; }
  .titleblock div:nth-child(4n+1), .titleblock div:nth-child(4n+3) { border-right: 1px solid var(--ink); }
  .titleblock div:nth-last-child(-n+4) { border-bottom: 1px solid var(--ink); }
  .titleblock div:nth-last-child(-n+2) { border-bottom: 0; }
  .fade-bottom { height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .w { animation: none !important; }
  .composer__led { animation: none !important; }
  .photo:hover, .gp-photo:hover { transform: rotate(var(--tilt, 0deg)); }
}
@media print {
  .w { animation: none !important; }
  .fade-bottom, .progress { display: none !important; }
}

.gp + .gturn__writing { margin-top: 2rem; }


/* ═════════ the document: dated boxes, ruled tables, one loud word ═════════ */
.letter { counter-reset: fig sheet; }
.sheet { counter-increment: sheet; }

/* every sheet is dated and numbered, typed into a ruled box. Columns follow the golden ratio */
.docbox {
  display: grid; grid-template-columns: .618fr 1fr 1fr 1.618fr; margin: 0 0 clamp(2.4rem, 6vw, 3.8rem);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.docbox > div { padding: .65rem .8rem .75rem 0; min-width: 0; }
.docbox > div + div { padding-left: .8rem; border-left: 1px solid var(--rule); }
.docbox dt { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pencil); line-height: 1; }
.docbox dt::before { content: ''; display: block; width: 1.3rem; height: 2px; background: var(--ink); margin-bottom: .55rem; }
.docbox dd { margin: .3rem 0 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; overflow-wrap: anywhere; }
.docbox .docbox__wide { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
.docbox__n::before { content: counter(sheet, decimal-leading-zero); }
.docbox--turn { margin-bottom: 1.6rem; grid-template-columns: .618fr 1fr 1fr 1.618fr; }

/* ruled tables, like an engineering drawing */
.spec { width: 100%; clear: both; border-collapse: collapse; margin: 2rem 0 2.2rem; font-size: .8rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.spec caption { caption-side: top; text-align: left; padding: 0 0 .7rem; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pencil); }
.spec th, .spec td { padding: .65rem .9rem .65rem 0; text-align: left; font-weight: 400; vertical-align: baseline; border-bottom: 1px solid var(--hairline); line-height: 1.35; }
.spec tbody tr:last-child > * { border-bottom: 0; }
.spec thead th { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pencil); border-bottom: 1px solid var(--ink); }
.spec tbody th { letter-spacing: .02em; }
.spec:not(.spec--index) td { text-align: right; padding-right: 0; font-family: var(--serif); font-size: 1.45rem; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.spec--index { table-layout: fixed; }
.spec--index thead th:nth-child(1) { width: 3.4rem; }
.spec--index thead th:nth-child(2) { width: 36%; }
.spec--index td:first-child { color: var(--pencil); letter-spacing: .1em; }
.spec--index tbody th { padding-right: 1rem; }
@media (max-width: 720px) {
  .spec--index thead th:nth-child(2) { width: 40%; }
  .spec:not(.spec--index) td { font-size: 1.15rem; white-space: normal; }
}

/* a word set huge, in red, across the page. It writes itself in */
.slash {
  position: absolute; left: var(--x); top: var(--y); z-index: 3; pointer-events: none; white-space: nowrap; color: var(--red); mix-blend-mode: multiply;
  line-height: .8; transform: rotate(var(--r, -6deg)); transform-origin: 0 100%;
  font-size: calc(clamp(6.5rem, 26vw, 17rem) * var(--s, 1)); -webkit-text-stroke: .014em var(--red);
}
.slash--hand { font-family: var(--hand); }
.slash--script { font-family: var(--sign); }
.js .sheet .slash { opacity: 1; translate: none; transition: none; clip-path: inset(-15% 100% -15% 0); }
.js .sheet.is-in .slash { clip-path: inset(-15% 0 -15% 0); transition: clip-path 1.9s var(--ease) .6s; }
@media (max-width: 1180px) { .slash { left: calc(var(--x) * .4); } }

/* the generated page breaks the same way */
.gp-shout {
  position: relative; z-index: 3; margin: .4rem 0 -2.8rem; pointer-events: none; white-space: nowrap; color: var(--red); mix-blend-mode: multiply;
  font-family: var(--sign); font-size: clamp(5rem, 18vw, 12rem); line-height: .8; transform: rotate(-5deg); transform-origin: 0 100%;
  animation: write 1.7s var(--ease) .15s both;
}
.gp-shout { -webkit-text-stroke: .014em var(--red); }
.gp-shout--hand { font-family: var(--hand); transform: rotate(4deg); }
@keyframes write { from { clip-path: inset(-15% 100% -15% 0); } to { clip-path: inset(-15% 0 -15% 0); } }

/* ═════════ motion that follows the hand ═════════ */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; animation-timing-function: var(--ease); }
.composer { transition: width .75s cubic-bezier(.22, 1, .36, 1); }
.composer__bar { transition: box-shadow .5s var(--ease), border-color .5s, transform .5s var(--ease); }
.composer:focus-within .composer__bar { transform: translateY(-2px); }
.composer__chips button { transition: border-color .25s, transform .35s var(--ease), background .25s; }
.composer__chips button:hover { transform: translateY(-2px); background: #fff; }
.composer:focus-within .composer__chips button { animation: chip-in .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.composer__chips button:nth-child(1) { --i: 0; } .composer__chips button:nth-child(2) { --i: 1; } .composer__chips button:nth-child(3) { --i: 2; }
.composer__chips button:nth-child(4) { --i: 3; } .composer__chips button:nth-child(5) { --i: 4; }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px); } }
.composer__send svg, .composer__mic svg { transition: transform .35s var(--ease); }
.composer__send:hover svg { transform: translateY(-2px); }
.composer__mic:hover svg { transform: scale(1.1); }
.composer__send { transition: transform .3s var(--ease), background .2s; }
.composer__send:active { transform: scale(.94); }
.gturn { animation: turn-in .8s var(--ease) both; }
@keyframes turn-in { from { opacity: 0; transform: translateY(14px); } }
.gp > * { animation-delay: 0s; }
.gp > :nth-child(2) { animation-delay: .07s; } .gp > :nth-child(3) { animation-delay: .14s; } .gp > :nth-child(4) { animation-delay: .21s; }
.gp > :nth-child(5) { animation-delay: .28s; } .gp > :nth-child(6) { animation-delay: .35s; } .gp > :nth-child(7) { animation-delay: .42s; }
.gp > :nth-child(n+8) { animation-delay: .5s; }
.gp-choice:hover { transform: translateY(-3px); }
.gp-choice { transition: border-color .25s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.gp-choice:hover { box-shadow: 0 16px 30px -20px rgba(0,0,0,.4); }

/* the closing words, on every page the assistant writes too */
.gturn .verse { margin-top: 3.2rem; text-align: left; }
.gturn .verse p { font-size: clamp(2.4rem, 7vw, 4.4rem); }

@media (max-width: 720px) {
  .docbox { grid-template-columns: 1fr 1fr; }
  .docbox > div + div { padding-left: 0; border-left: 0; }
  .docbox > div:nth-child(2n) { padding-left: .8rem; border-left: 1px solid var(--rule); }
  .docbox > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .docbox > div:nth-child(3), .docbox > div:nth-child(4) { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sheet .slash, .js .sheet.is-in .slash { clip-path: none; transition: none; }
  .gp-shout, .gturn, .composer__chips button { animation: none !important; }
  .composer, .composer__bar { transition: none; }
}
@media print {
  .slash { display: none; }
  .docbox, .spec { break-inside: avoid; }
}


/* ═════════ direction: a wide white room, one thing at a time, nothing decorative ═════════ */
:root { --paper: #FFFFFF; --hairline: #EEEBE6; --rule: #D9D6D0; --text: 15px; }
body { font-size: 15px; line-height: 1.55; letter-spacing: -.012em; background: #fff; }
.fade-bottom { background: linear-gradient(to top, rgba(255,255,255,.94), rgba(255,255,255,0)); }
::selection { background: #FAD0CE; }

/* no navbar. Only the way back, and only inside the assistant */
.tool--back { position: fixed; top: .9rem; left: 1.25rem; z-index: 35; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.colophon .tools { display: flex; justify-content: center; gap: .3rem 1.6rem; margin: 0 0 2rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.colophon .tool { min-height: 36px; }

/* the field: the first thing you see is a lot of white and one picture */
.field { position: relative; min-height: 100svh; overflow: hidden; }
.field .wordmark { position: absolute; top: 1.1rem; left: 1.4rem; z-index: 2; font-size: 1.05rem; }
.field__meta { position: absolute; top: 1.5rem; right: 1.4rem; margin: 0; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--pencil); }
.field__stage { position: absolute; left: 50%; top: 49%; translate: -50% -50%; margin: 0; width: min(32vw, 24rem); height: min(54vh, 32rem); display: grid; place-items: center; }
.field__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity 1s var(--ease), filter 1s var(--ease), transform 1.4s var(--ease); }
.field__img:not([src]) { visibility: hidden; }
.field__img.is-out { opacity: 0; filter: blur(10px); transform: scale(.985); }
.field__cap { position: absolute; left: -2rem; right: -2rem; top: 100%; margin-top: 1rem; text-align: center; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pencil); }
.field__items { list-style: none; margin: 0; padding: 0; }
.field__items li { position: absolute; left: var(--x); top: var(--y); max-width: min(11.5rem, 24vw); z-index: 2; animation: drift 11s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
.field__items button { font: inherit; font-size: .9rem; background: none; border: 0; padding: .35rem 0; cursor: pointer; color: var(--ink-soft); text-align: left; transition: color .5s var(--ease), transform .5s var(--ease); }
.field__items button span { display: inline-block; margin-right: .75rem; font-size: .58rem; letter-spacing: .2em; color: var(--pencil); transition: color .5s; }
.field__items button:hover { color: var(--ink); }
.field__items button[aria-current="true"] { color: var(--red); transform: translateX(4px); }
.field__items button[aria-current="true"] span { color: var(--red); }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(8px, -10px, 0); } }
.field__hint { position: absolute; left: 1.4rem; bottom: 1.4rem; margin: 0; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--pencil); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
@media (max-width: 720px) {
  .field__stage { width: 52vw; height: 40vh; top: 47%; }
  .field__items button { font-size: .74rem; max-width: 9.5rem; }
  .field__items li { max-width: 7.5rem; }
  .field__meta { display: none; }
}

/* the letter itself: a narrow column of type in a wide room, sides alternating */
.letter { padding-inline: clamp(1.2rem, 5vw, 4rem); }
.sheet { max-width: 78rem; padding: clamp(6rem, 24vh, 15rem) 0; }
.sheet + .sheet::before { display: none; }
.sheet > p, .sheet > h1, .sheet > h2, .sheet > .docbox, .sheet > .spec, .sheet > .contents, .sheet > .press, .sheet > .signoff, .sheet > .verse, .sheet > .address { max-width: 32rem; }
.letter > .sheet:nth-of-type(even) > p, .letter > .sheet:nth-of-type(even) > h1, .letter > .sheet:nth-of-type(even) > h2, .letter > .sheet:nth-of-type(even) > .docbox,
.letter > .sheet:nth-of-type(even) > .spec, .letter > .sheet:nth-of-type(even) > .contents, .letter > .sheet:nth-of-type(even) > .press, .letter > .sheet:nth-of-type(even) > .signoff,
.letter > .sheet:nth-of-type(even) > .verse, .letter > .sheet:nth-of-type(even) > .address { margin-left: auto; }
@media (min-width: 1181px) {
  .letter > .sheet:nth-of-type(even) .photo--right { float: left; margin: .3em 2rem 1.2em -17rem; }
  .letter > .sheet:nth-of-type(even) .photo--left { float: right; margin: .3em -17rem 1.2em 2rem; }
  .photo--right { margin-right: -17rem; } .photo--left { margin-left: -17rem; }
  .margin-note--right { margin-right: -11rem; }
}

/* pictures are just pictures: no frames, no tilt, no shadows */
.photo, .gp-photo { padding: 0; background: none; box-shadow: none; border-radius: 0; transform: none; }
.photo:hover, .gp-photo:hover { transform: none; box-shadow: none; }
.photo img, .gp-photo img { border-radius: 0; }
.photo figcaption, .gp-photo figcaption { font-family: var(--type); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; color: var(--pencil); text-align: left; padding: .7rem 0 0; }
.letter .photo figcaption::before { font: 400 .62rem/1 var(--type); letter-spacing: .14em; color: var(--rule); margin-bottom: .35rem; font-style: normal; }
.photo--wide { width: 30rem; } .photo { width: 20rem; }

/* handwriting only where it says something: the greeting, the giant words, the margin, the signature */
.when, .entry__intro, .contents__title, .fullname, .gp-links__note, .gp-contact__press, .gp-fact__label, .gp-quote cite { font-family: var(--type); }
.when { font-size: .8em; letter-spacing: .08em; text-transform: uppercase; }
.contents__title { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pencil); transform: none; }
.fullname { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; padding-left: 1.4rem; }
.entry__intro { font-size: .8rem; margin-top: -.6em !important; }
.gturn__q { font-family: var(--type); font-size: 1.05rem; letter-spacing: -.01em; transform: none; color: var(--ink); }
.gturn__writing { font-family: var(--type); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

/* fewer lines, and the ones left are quiet */
.docbox { border-bottom: 0; border-top-color: var(--rule); }
.docbox > div + div { border-left: 0; }
.docbox .docbox__wide { border-top: 0; }
.spec { border-top-color: var(--rule); border-bottom: 0; }
.spec thead th { border-bottom-color: var(--rule); }
.spec th, .spec td { border-bottom-color: transparent; }
.contents { border-top: 0; padding-top: 0; }
.press li { border-bottom: 0; padding: .35em 0; }
.gturn + .gturn { border-top: 0; }
.gp-facts { border-top-color: var(--rule); border-bottom: 0; }
.gp-fact + .gp-fact { border-left: 0; }
.gp-links li { border-bottom: 0; }
.titleblock { border-color: var(--rule); }
.titleblock div { border-color: var(--rule); }

/* corners only where a thing has to be told from the page */
.composer__bar { border-radius: 2px; background: rgba(255,255,255,.9); }
.composer__chips button { border-radius: 2px; background: rgba(255,255,255,.92); }
.composer__mic, .composer__send { border-radius: 2px; }
.toast { border-radius: 2px; }
.gp-card__img, .gp-contact, .gp-choice { border-radius: 0; }
.gp-contact, .gp-choice { box-shadow: none; border-color: var(--rule); }
.gp-card__img { box-shadow: none; }

@media print { .field { display: none; } }
@media (prefers-reduced-motion: reduce) { .field__items li, .field__hint { animation: none; } .field__img { transition: none; } }


/* ═════════ the doorway ═════════ */
.intro { display: none; }
.is-intro .intro {
  position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; padding: 2rem 2rem 6rem; background: #fff; text-align: center;
  transition: opacity .9s var(--ease), filter .9s var(--ease);
}
html.is-intro, html.is-intro body { overflow: hidden; }
.intro.is-leaving { opacity: 0; filter: blur(10px); pointer-events: none; }
.intro__text { max-width: 21rem; }
.intro__text p { margin: 0 0 .7rem; font-size: .76rem; line-height: 1.55; letter-spacing: .02em; color: var(--ink-soft); text-wrap: balance; }
.intro__text .intro__lead { font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.2; color: var(--ink); margin-bottom: 1.1rem; letter-spacing: 0; }
.intro__go { position: absolute; left: 0; right: 0; bottom: max(1.6rem, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 1.1rem; opacity: 0; transform: translateY(6px); }
.intro.is-ready .intro__go { opacity: 1; transform: none; transition: opacity 1s var(--ease) var(--go, 0ms), transform 1s var(--ease) var(--go, 0ms); }
.intro__btn { font: inherit; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--ink); border: 0; border-radius: 2px; padding: .6rem 1rem; min-height: 40px; cursor: pointer; transition: transform .3s var(--ease), background .2s; }
.intro__btn:hover { transform: translateY(-2px); }
.intro__link { font: inherit; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: none; border: 0; padding: .6rem 0; min-height: 40px; cursor: pointer; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.intro__link:hover { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .intro, .intro__go { transition: none !important; } .intro__go { opacity: 1; transform: none; } }
@media print { .intro { display: none !important; } }

/* ═════════ a little rounder, and a very quiet shadow that opens when you reach for something ═════════ */
:root { --shadow-rest: 0 1px 1px rgba(20,20,20,.03), 0 4px 14px -12px rgba(20,20,20,.12); --shadow-lift: 0 1px 2px rgba(20,20,20,.04), 0 14px 30px -16px rgba(20,20,20,.2); }
.composer__bar { border-radius: 18px; box-shadow: var(--shadow-rest); }
.composer__bar:focus-within { box-shadow: var(--shadow-lift); }
.composer__chips button { border-radius: 999px; padding-inline: .9rem; box-shadow: var(--shadow-rest); }
.composer__mic, .composer__send { border-radius: 12px; }
.composer__send { box-shadow: var(--shadow-rest); }
.intro__btn { border-radius: 999px; padding-inline: 1.2rem; box-shadow: var(--shadow-rest); }
.toast { border-radius: 12px; }
.photo img, .gp-photo img, .field__img { border-radius: 10px; }
.gp-card__img, .gp-contact, .gp-choice { border-radius: 14px; box-shadow: var(--shadow-rest); }
.gp-card__img img { border-radius: 0; }
.gp-contact, .gp-choice { border-color: var(--hairline); }
.docbox, .spec { border-radius: 0; }

/* when the springs are loaded they take over the movement, so the stylesheet steps aside */
.has-motion .composer__chips button, .has-motion .composer__send, .has-motion .composer__mic, .has-motion .intro__btn { transition: none; }
.has-motion .composer__chips button:hover, .has-motion .intro__btn:hover, .has-motion .composer__send:active { transform: none; }
.has-motion .field__items button { transition: color .5s var(--ease); }
.has-motion .field__items button[aria-current="true"] { transform: none; }
.has-motion .gp-choice, .has-motion .gp-choice:hover { transform: none; transition: border-color .25s; }
.has-motion .gp-choice:hover, .has-motion .gp-contact:hover { box-shadow: none; }

/* ═════════ as little as possible ═════════ */
/* the field: one picture, one tiny line under it, a lot of white */
.field__items, .field__meta { display: none; }
.field__stage { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.field__stage:focus-visible { outline-offset: 10px; }
.field__cap { transition: opacity .6s var(--ease); }
.field__cap.is-out { opacity: 0; }
.field__hint { left: auto; right: 1.4rem; font-size: .8rem; letter-spacing: 0; }

/* the bar is a small pill that opens when you reach for it and closes when you leave */
.composer { width: 11.5rem; transition: width .7s cubic-bezier(.22, 1, .36, 1); }
.composer:focus-within, .composer:hover, .composer:has(input:not(:placeholder-shown)) { width: min(26rem, calc(100vw - 2rem)); }
.is-agent .composer:focus-within, .is-agent .composer:hover, .is-agent .composer:has(input:not(:placeholder-shown)) { width: min(36rem, calc(100vw - 2rem)); }
.composer.is-thinking, .composer.is-listening, .is-agent .composer { width: 11.5rem; }
.composer.is-thinking:focus-within, .composer.is-listening:focus-within { width: min(26rem, calc(100vw - 2rem)); }
.composer__bar { border-radius: 999px; padding: .15rem .3rem .15rem .8rem; }
.composer__bar input { min-height: 34px; font-size: .8rem; }
.composer__led { margin-right: .5rem; }
.composer__mic, .composer__send { width: 30px; height: 30px; border-radius: 999px; overflow: hidden; transition: width .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease); }
.composer__mic svg, .composer__send svg { width: 15px; height: 15px; }
.composer:not(:focus-within):not(:hover):not(:has(input:not(:placeholder-shown))) .composer__mic,
.composer:not(:focus-within):not(:hover):not(:has(input:not(:placeholder-shown))) .composer__send { width: 0; opacity: 0; pointer-events: none; margin: 0; }
.composer__fine { font-size: .58rem; }

/* each sheet is dated on one quiet line */
.docbox { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.1rem; border-top: 0; margin-bottom: clamp(2rem, 5vw, 3rem); }
.docbox > div, .docbox > div + div, .docbox .docbox__wide { display: flex; align-items: baseline; padding: 0; border: 0; grid-column: auto; }
.docbox .docbox__wide { flex-basis: 100%; margin-top: .5rem; }
.docbox .docbox__wide::before { display: none; }
.docbox dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.docbox dt::before { display: none; }
.docbox dd { margin: 0; font-size: .62rem; letter-spacing: .18em; color: var(--pencil); }
.docbox > div + div::before { content: '·'; margin-right: 1.1rem; color: var(--rule); }
.docbox__n::before { content: 'No. ' counter(sheet, decimal-leading-zero); }
.docbox--turn { margin-bottom: 1.2rem; }

@media (max-width: 720px) {
  .docbox { display: flex; }
  .docbox > div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .docbox > div:nth-child(n+3) { border-top: 0; }
  .composer { width: 10.5rem; }
}

/* ═════════ the conversation ═════════ */
.generated { padding-top: clamp(4.5rem, 10vw, 6rem); }
.generated__turns { max-width: 34rem; }
.gturn { margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.gturn__q { margin: 0 0 1rem auto; width: fit-content; max-width: 88%; padding: .6rem .95rem; border-radius: 18px 18px 4px 18px; background: #F5F4F1; font-size: .82rem; line-height: 1.45; text-align: left; }
.gp { gap: 1.2rem; }
.gp-title { font-size: clamp(1.25rem, 1.6vw + .7rem, 1.7rem); }
.gp-lede { font-size: .92rem; line-height: 1.55; }
.gp-shout { font-size: clamp(4rem, 15vw, 8rem); margin-bottom: -2rem; }
.gp-photo, .gp-photo--wide { width: min(22rem, 100%); }
.gturn .verse { margin-top: 2rem; }
.gturn .verse p { font-size: clamp(1.5rem, 4vw, 2rem); }

/* a map drawn from coordinates, with a red line that travels */
.gp-map { margin: .2rem 0; }
.gp-map svg { display: block; width: 100%; height: auto; overflow: visible; border-radius: 14px; background: #FBFAF8; }
.gp-map__grid line { stroke: var(--hairline); stroke-width: 1; }
.gp-map__route { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: route 2.4s var(--ease) .3s forwards; }
@keyframes route { to { stroke-dashoffset: 0; } }
.gp-map__pin { opacity: 0; animation: pin .6s var(--ease) forwards; }
@keyframes pin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.gp-map__pin circle { fill: var(--ink); }
.gp-map__pin circle.is-last { fill: var(--red); }
.gp-map__pin .gp-map__pulse { fill: none; stroke: var(--red); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(4.5); opacity: 0; } }
.gp-map__pin text { font: 400 11px var(--type); fill: var(--ink); letter-spacing: .02em; }
.gp-map figcaption { display: flex; flex-direction: column; gap: .15rem; padding-top: .8rem; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pencil); }

.gp-place { position: relative; padding: 1rem 1.1rem 1.1rem 2.6rem; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-rest); }
.gp-place__cross { position: absolute; left: 1.1rem; top: 1.25rem; width: 12px; height: 12px; }
.gp-place__cross::before, .gp-place__cross::after { content: ''; position: absolute; background: var(--red); }
.gp-place__cross::before { left: 5.5px; top: 0; width: 1px; height: 12px; }
.gp-place__cross::after { top: 5.5px; left: 0; height: 1px; width: 12px; }
.gp-place__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.gp-place__where { margin: .35rem 0 0; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pencil); }
.gp-place__text { margin: .7rem 0 0; font-size: .86rem; line-height: 1.5; }

/* red marker, in a hurry */
.gp-scrawl { position: relative; width: fit-content; margin: .2rem 0; padding-bottom: .5rem; color: var(--red); font-family: var(--hand); font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1; transform: rotate(-2deg); }
.gp-scrawl svg { position: absolute; left: -2%; bottom: 0; width: 104%; height: .55em; overflow: visible; }
.gp-scrawl path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: route 1.1s var(--ease) .35s forwards; vector-effect: non-scaling-stroke; }
.gp-scrawl path + path { animation-delay: .7s; }

/* the nudge */
.gp-nudge { margin: 0; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.gp-nudge::before { content: '~ '; } .gp-nudge::after { content: ' ~'; }
.gp-scratch { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; mix-blend-mode: multiply; animation: scratch-out .6s ease 1.9s forwards; }
.gp-scratch path { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; animation: route .7s cubic-bezier(.5, 0, .2, 1) forwards; }
.gp-scratch path + path { stroke-width: 3; animation-delay: .25s; }
@keyframes scratch-out { to { opacity: 0; } }
.is-nudged #generated, .is-nudged .composer { animation: buzz .7s linear; }
@keyframes buzz { 0%, 100% { translate: 0 0; } 8% { translate: -9px 3px; } 18% { translate: 8px -3px; } 28% { translate: -7px 2px; } 38% { translate: 7px -2px; } 50% { translate: -5px 1px; } 62% { translate: 4px 0; } 78% { translate: -2px 0; } }

@media (prefers-reduced-motion: reduce) { .gp-map__route, .gp-scrawl path { animation: none; stroke-dashoffset: 0; } .gp-map__pin { animation: none; opacity: 1; } .gp-map__pulse { animation: none; } }

.gp-map__lead { stroke: var(--rule); stroke-width: 1; }
.gp-choice strong { text-decoration: none; }
.gp-choices__q { font-weight: 400; }

/* a found photograph, with its credit */
.gp-pic { margin: .2rem 0; width: min(24rem, 100%); }
.gp-pic__frame { min-height: 9rem; border-radius: 12px; overflow: hidden; background: #F5F4F1; }
.gp-pic.is-loading .gp-pic__frame { animation: pic-wait 1.6s ease-in-out infinite; }
@keyframes pic-wait { 50% { background: #EFEDE8; } }
.gp-pic img { display: block; width: 100%; height: auto; }
.gp-pic figcaption { display: flex; flex-direction: column; gap: .2rem; padding-top: .6rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pencil); line-height: 1.5; }
.gp-pic figcaption small { font-size: .56rem; letter-spacing: .08em; opacity: .8; text-transform: none; }
.gp-pic figcaption a { color: inherit; }
.tool--back { padding: .35rem .75rem; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-decoration: none; box-shadow: var(--shadow-rest); }

/* ═════════ a conversation that feels like a phone: small, soft, and passing ═════════ */
/* the blocks are moved by springs now, so their own entrance animations step aside */
.gp--motion .gp-in, .gp--motion .gp-card, .gp--motion .gp-choice, .gp--motion .gp-photo, .gp--motion .gp-pic { animation: none; }
.gp__item { min-width: 0; }

/* the reader's message lifts from the bar like a sent bubble */
.gturn__q { transform-origin: 100% 100%; box-shadow: 0 1px 1px rgba(20,20,20,.03); }

/* typing, three dots in a pill */
.gturn__typing { display: inline-flex; gap: 5px; align-items: center; margin: .6rem 0 0; padding: .65rem .85rem; border-radius: 999px; background: #F2F1EE; box-shadow: var(--shadow-rest); transform-origin: 0 100%; }
.gturn__typing i { width: 6px; height: 6px; border-radius: 50%; background: #A8A59E; animation: dot 1.2s ease-in-out infinite; }
.gturn__typing i:nth-child(2) { animation-delay: .15s; } .gturn__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* what was said a moment ago fades a little, as conversation does. It comes back when you reach for it */
.gturn { transition: opacity .9s var(--ease), filter .9s var(--ease); }
.gturn:not(:last-child) { opacity: .5; filter: saturate(.5); }
.gturn:not(:last-child):hover, .gturn:not(:last-child):focus-within { opacity: 1; filter: none; }

/* photographs open like on a phone */
.photo img, .gp-photo img, .gp-pic img, .gp-card__img img { cursor: zoom-in; }
.zoom-veil { position: fixed; inset: 0; z-index: 95; background: rgba(255,255,255,.84); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); cursor: zoom-out; }
.zoom-img { position: fixed; z-index: 96; object-fit: cover; border-radius: 10px; cursor: zoom-out; }

/* the red hand takes the pen and writes over what is already on the page */
.gp-scrawl { margin: -1.8em 0 0 14%; z-index: 4; transform: rotate(-4deg); mix-blend-mode: multiply; pointer-events: none; }
.gp-scrawl span { display: inline-block; animation: write 1.4s cubic-bezier(.6, 0, .25, 1) .25s both; }
.gp-scrawl svg { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .gturn__typing i, .gp-scrawl span { animation: none; }
  .gturn:not(:last-child) { opacity: 1; filter: none; }
}

/* ═════════ a song, a film: small cards you can play and pass on ═════════ */
.gp-media { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--hairline); border-radius: 16px; background: #fff; box-shadow: var(--shadow-rest); }
.gp-media.is-loading { min-height: 6rem; }
.gp-media.is-loading .gp-media__art, .gp-media.is-loading .gp-media__title { animation: pic-wait 1.6s ease-in-out infinite; background: #F5F4F1; border-radius: 6px; }
.gp-media__art { flex: none; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: #F5F4F1; box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 8px 18px -12px rgba(20,20,20,.3); }
.gp-media__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-media__body { flex: 1; min-width: 0; }
.gp-media__kind { display: block; font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.gp-media__title { margin: .25rem 0 0; font-family: var(--serif); font-weight: 400; font-size: 1.1rem; line-height: 1.2; }
.gp-media__by { margin: .2rem 0 0; font-size: .7rem; color: var(--pencil); }
.gp-media__text { margin: .55rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.gp-media__note { margin: .5rem 0 0; font-family: var(--hand); font-size: 1.15rem; line-height: 1.1; color: var(--red); }
.gp-media__actions { display: flex; gap: 1rem; align-items: center; margin-top: .7rem; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; }
.gp-media__actions a { color: var(--ink); text-decoration: none; }
.gp-media__share { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: .35rem .7rem; border: 1px solid var(--hairline); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
.gp-media__play { flex: none; align-self: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.gp-media__play svg { width: 44px; height: 44px; }
.gp-media__track { fill: #fff; stroke: var(--hairline); stroke-width: 1.5; }
.gp-media__ring { fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 20px 20px; transition: stroke-dashoffset .25s linear; }
.gp-media__play path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.gp-media__play .gp-media__tri { fill: var(--ink); stroke: none; }
.gp-media--film { padding-left: 1.2rem; }

/* ═════════ one system for the conversation ═════════
   spacing  S1 4 · S2 8 · S3 12 · S4 16 · S5 24 · S6 40
   radius   R1 card 18 · P card pad 10 · R2 inner = R1 − B − P = 7 · R3 control 10 · R4 pill = h ÷ 2
   type     T1 9 caps · T2 12 · T3 13 body · T4 15 · T5 18 title
   motion   enter, quick and sheet springs, shared with assistant/motion.js */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px;
  --r1: 18px; --p: 10px; --b: 1px; --r2: calc(var(--r1) - var(--b) - var(--p)); --r3: 10px; --r4: 999px;
  --t1: .5625rem; --t2: .75rem; --t3: .8125rem; --t4: .9375rem; --t5: 1.125rem;
}

/* sizes come down, everything to the same scale */
.generated__turns { max-width: 32rem; }
.gp { gap: var(--s4); }
.gp-title { font-size: var(--t5); line-height: 1.25; }
.gp-lede, .gp-text, .gp-place__text, .gturn__plain { font-size: var(--t3); line-height: 1.55; }
.gp-section { font-size: var(--t4); }
.gp-hand { font-size: 1.35rem; }
.gturn__q { font-size: var(--t3); padding: var(--s2) var(--s3); border-radius: var(--r1) var(--r1) var(--s1) var(--r1); }
.docbox dd, .gp-map figcaption, .gp-pic figcaption, .gp-place__where, .gp-media__actions, .gp-media__kind, .gp-fact__label { font-size: var(--t1); }
.gturn .verse p { font-size: 1.6rem; }
.gturn .verse cite { font-size: var(--t1); padding: var(--s1) var(--s2); }
.gp-shout { font-size: clamp(3.4rem, 12vw, 6.5rem); margin-bottom: -1.6rem; }

/* every card is the same object: R1 corners, P padding, concentric inner corners */
.gp-media, .gp-place, .gp-choice, .gp-contact { border-radius: var(--r1); padding: var(--p) calc(var(--p) + var(--s1)); border: var(--b) solid var(--hairline); background: #fff; }
.gp-media { gap: var(--s3); padding: var(--p); }
.gp-media__art { width: 64px; height: 64px; border-radius: var(--r2); }
.gp-media__body { padding: var(--s1) 0; }
.gp-media__title { font-size: var(--t4); }
.gp-media__by { font-size: var(--t2); }
.gp-media__text { font-size: var(--t2); }
.gp-media__note { font-size: 1rem; }
.gp-media__share { border-radius: var(--r4); padding: var(--s1) var(--s3); }
.gp-media__play, .gp-media__play svg { width: 40px; height: 40px; }
.gp-media__play { margin-right: var(--s1); }
.gp-place { padding-left: calc(var(--p) + 22px); }
.gp-place__cross { left: var(--p); top: calc(var(--p) + 6px); }
.gp-place__name { font-size: var(--t4); }
.gp-choice strong { font-size: var(--t3); }
.gp-choice span { font-size: var(--t2); }
.gp-choices__q { font-size: var(--t4); }
.gp-choices__grid { gap: var(--s2); }
.gp-card__img, .gp-pic__frame, .gp-map svg, .gp-photo img, .photo img, .field__img { border-radius: var(--r3); }

/* hover is one gesture everywhere: a hair of lift, the shadow opens, nothing else */
.gp-media, .gp-place, .gp-choice, .gp-contact, .gp-card__img { transition: border-color .3s var(--ease); }
.gp-media:hover, .gp-place:hover, .gp-choice:hover { border-color: var(--rule); }

/* keeping something: a small bookmark in the corner, or a double tap */
.gp__item { position: relative; }
.gp__save { position: absolute; top: var(--s2); right: var(--s2); z-index: 5; display: none; place-items: center; width: 26px; height: 26px; padding: 0; border: var(--b) solid var(--hairline); border-radius: var(--r4); background: rgba(255,255,255,.9); box-shadow: var(--shadow-rest); cursor: pointer; opacity: 0; transition: opacity .25s var(--ease); backdrop-filter: blur(6px); }
.gp__item:has(.gp-media, .gp-place, .gp-photo, .gp-pic, .gp-map, .gp-card, .gp-quote, .gp-memory, .gp-facts) .gp__save { display: grid; }
.gp__item:hover .gp__save, .gp__save:focus-visible, .gp__save.is-on { opacity: 1; }
.gp__save svg { width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.gp__save.is-on svg { fill: var(--red); stroke: var(--red); }
.gp__kept { position: absolute; top: var(--s2); right: calc(var(--s2) + 32px); z-index: 5; padding: 3px var(--s2); border-radius: var(--r4); background: var(--ink); color: #fff; font-size: var(--t1); letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
@media (hover: none) { .gp__save { opacity: 1; } }

/* conversation tools, small pills in the corner, only in the conversation */
.chattools { display: none; position: fixed; top: .9rem; right: 1.25rem; z-index: 35; gap: var(--s1); align-items: center; }
.is-agent .chattools { display: flex; }
.chattools button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--s3); border: var(--b) solid var(--hairline); border-radius: var(--r4); background: rgba(255,255,255,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-rest); font: 400 var(--t1)/1 var(--type); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.chattools__n { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r4); background: var(--red); color: #fff; letter-spacing: 0; }
.chattools__note { position: absolute; top: calc(100% + 6px); right: 0; padding: 4px var(--s2); border-radius: var(--r4); background: var(--ink); color: #fff; font-size: var(--t1); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.tool--back { font-size: var(--t1); min-height: 30px; padding: 0 var(--s3); display: inline-flex; align-items: center; }

/* the Saved sheet rises from the bottom like on a phone */
.savedsheet__veil { position: fixed; inset: 0; z-index: 80; background: rgba(20,20,20,.12); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.savedsheet { position: fixed; left: 50%; bottom: 0; z-index: 81; width: min(30rem, 100vw); max-height: 72vh; margin-left: max(-15rem, -50vw); display: flex; flex-direction: column; padding: var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -20px 50px -30px rgba(20,20,20,.35); touch-action: none; }
.savedsheet__grab { align-self: center; width: 36px; height: 4px; margin: var(--s1) 0 var(--s3); border-radius: var(--r4); background: #DAD7D1; }
.savedsheet__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s3); }
.savedsheet__head h2 { margin: 0; font: 400 var(--t5)/1.2 var(--serif); }
.savedsheet__head button { border: 0; background: none; font: 400 var(--t1)/1 var(--type); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; color: var(--ink); padding: var(--s2) 0; }
.savedsheet__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s2); touch-action: pan-y; }
.savedsheet__list li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border: var(--b) solid var(--hairline); border-radius: 14px; }
.savedsheet__thumb { flex: none; width: 44px; height: 44px; border-radius: calc(14px - var(--b) - var(--s2)); overflow: hidden; background: #F5F4F1; }
.savedsheet__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.savedsheet__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.savedsheet__kind { font-size: var(--t1); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.savedsheet__body strong { font: 400 var(--t3)/1.3 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.savedsheet__body strong a { color: inherit; text-decoration: none; }
.savedsheet__text { font-size: var(--t2); color: var(--pencil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.savedsheet__remove { flex: none; border: 0; background: none; font: 400 var(--t1)/1 var(--type); letter-spacing: .14em; text-transform: uppercase; color: var(--pencil); cursor: pointer; padding: var(--s2); }
.savedsheet__empty { margin: var(--s4) 0; font-size: var(--t3); line-height: 1.6; color: var(--ink-soft); }

/* a memory pasted into the diary, a little turned, with a strip of tape */
.gp-memory { position: relative; width: min(13rem, 70%); margin: var(--s1) 0; padding: 6px 6px 0; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(20,20,20,.08), 0 14px 26px -16px rgba(20,20,20,.35); transform: rotate(var(--r)); }
.gp-memory--right { align-self: flex-end; margin-left: auto; }
.gp-memory::before { content: ''; position: absolute; top: -9px; left: 50%; width: 56px; height: 18px; margin-left: -28px; background: rgba(240,236,226,.78); transform: rotate(-3deg); box-shadow: 0 1px 1px rgba(20,20,20,.05); }
.gp-memory img { display: block; width: 100%; height: auto; border-radius: 1px; cursor: zoom-in; }
.gp-memory figcaption { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s1) var(--s3); }
.gp-memory__when { font-family: var(--hand); font-size: 1.15rem; line-height: 1; color: var(--red); }
.gp-memory__text { font-size: var(--t2); line-height: 1.4; color: var(--ink-soft); }
.gp__item:has(.gp-memory--right) { align-self: stretch; display: flex; justify-content: flex-end; }

@media (max-width: 720px) {
  .chattools { right: .75rem; }
  .chattools button { padding: 0 var(--s2); }
}
.savedsheet__body strong { text-decoration: none; }

/* ───────── the conversation, written live ─────────
   typewriter letters with a caret, red ink drawn stroke by stroke, cards you can open and let go */

/* typewriter: each letter strikes at its own moment, the caret rests after the last one */
.w { animation: none; white-space: nowrap; }
.c { opacity: 0; animation: strike 90ms var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes strike { from { opacity: 0; transform: translateY(.06em); } to { opacity: 1; transform: none; } }
.caret { display: inline-block; width: .5ch; height: .95em; margin-left: 1px; vertical-align: -.1em; background: var(--red); border-radius: 1px; opacity: 0; animation: caret 1.6s steps(1, end) var(--d, 0ms) forwards; }
@keyframes caret { 0%, 25%, 50% { opacity: 1; } 12%, 37%, 62%, 100% { opacity: 0; } }

/* the pen: single-stroke letters in red ink */
.pen { display: block; }
span.pen { display: inline-block; }
.pen__ink { display: inline; }
.pen__w { display: inline-block; margin-right: .3em; vertical-align: -.3em; }
.pen__w:last-child { margin-right: 0; }
.pen__word { display: block; overflow: visible; }
.pen__word path { fill: none; stroke: currentColor; stroke-width: var(--pen, 2.6); stroke-linecap: round; stroke-linejoin: round; }
.gp-hand { font-family: inherit; font-size: 1.5rem; line-height: 1.15; color: var(--red); --pen: 2.4; }
.gp-scrawl { font-family: inherit; font-size: clamp(1.9rem, 6vw, 2.4rem); --pen: 3.2; }
.gp-scrawl .pen { animation: none; }
.gp-shout--hand { font-family: inherit; color: var(--red); -webkit-text-stroke: 0; --pen: 2.2; line-height: 1; }
.gp-moment__when { font-family: inherit; font-size: 1.3rem; --pen: 2.6; }
.gp-memory__when { font-family: inherit; font-size: 1.05rem; --pen: 2.8; }

/* the page sits in the middle, like a sheet in the carriage */
.generated { padding-top: clamp(4rem, 18vh, 9rem); }
.generated__turns { margin-inline: auto; }
.gturn__q { margin: 0 auto var(--s5); text-align: center; border-radius: var(--r4); padding: var(--s2) var(--s4); }
.gturn__q .caret { background: var(--ink); }
.gturn .docbox--turn { justify-content: center; }

/* cards: open a little on a tap, fold back, or let go */
.gp__item.is-card { cursor: default; transform-style: preserve-3d; }
.gp__item.is-card:has(.gp-media, .gp-place, .gp-contact) { cursor: pointer; }
.gp__body { min-width: 0; }
.gp__close { position: absolute; top: var(--s2); right: calc(var(--s2) + 30px); z-index: 5; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: var(--b) solid var(--hairline); border-radius: var(--r4); background: rgba(255,255,255,.9); box-shadow: var(--shadow-rest); cursor: pointer; opacity: 0; transition: opacity .25s var(--ease); backdrop-filter: blur(6px); }
.gp__close svg { width: 11px; height: 11px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.gp__item:hover .gp__close, .gp__close:focus-visible { opacity: 1; }
.gp__item:has(.gp__close) .gp__kept { right: calc(var(--s2) + 62px); }
@media (hover: none) { .gp__close { opacity: 1; } }
.gp-media__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.is-open .gp-media__text { -webkit-line-clamp: unset; display: block; }
.gp-media__art { transition: width .45s var(--ease), height .45s var(--ease), border-radius .45s var(--ease); }
.is-open .gp-media--song { flex-wrap: wrap; }
.is-open .gp-media--song .gp-media__art { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r2); }
.is-open .gp-media, .is-open .gp-place, .is-open .gp-contact { box-shadow: var(--shadow-lift); border-color: var(--rule); }
.is-open .gp-place { padding-block: var(--s5); }
.is-open .gp-memory { width: min(22rem, 100%); }

/* the takeover: the whole screen for a moment */
.takeover { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(255,255,255,.72); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); cursor: pointer; }
.takeover__word { color: var(--red); font-size: clamp(4.5rem, 20vw, 13rem); --pen: 1.8; max-width: 92vw; text-align: center; line-height: 1; }
.takeover__img { width: min(78vw, 34rem); max-height: 78vh; object-fit: cover; border-radius: var(--r1); box-shadow: 0 30px 80px -30px rgba(20,20,20,.55); }
.takeover__wink { width: min(64vw, 22rem); overflow: visible; }
.takeover__wink path { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: route .7s var(--ease) forwards; }
.takeover__wink .d2 { animation-delay: .55s; }
.takeover__wink .d3 { animation-delay: .75s; }
.takeover__wink .d4 { animation-delay: .95s; }
.takeover__wink .lid { opacity: 0; }
.takeover__wink .eye { animation: route .4s var(--ease) .75s forwards, blink-out .01s linear 1.7s forwards; }
.takeover__wink .lid { animation: route .25s var(--ease) 1.7s forwards, blink-in .01s linear 1.7s forwards; }
@keyframes blink-out { to { opacity: 0; } }
@keyframes blink-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .c, .caret { animation: none; opacity: 1; }
  .caret { display: none; }
}
/* the older scrawl rules were written for one span and one underline; keep them off the pen's words */
.gp-scrawl .pen, .gp-scrawl .pen span { animation: none; clip-path: none; }
.gp-scrawl .pen__w { display: inline-block; }
.gp-scrawl svg.pen__word { position: static; display: block; }
.gp-scrawl .pen__word path { animation: none; vector-effect: none; stroke-width: var(--pen); }
.gp-hand { margin-top: 0; }
.gp-scrawl { margin-top: -.35em; }
.is-open .gp-media--song .gp-media__art { width: min(100%, 16rem); }

/* one grid: everything sits on the same centre line. No tilt, no frames, nothing that leaves the column.
   Text is justified; anything short or uncertain (labels, lists, facts) stays to the left. */
.gp-scratch { display: none; }
.is-nudged #generated, .is-nudged .composer { animation: none; }
.gp-hand, .gp-shout, .gp-shout--hand, .gp-memory, .gp-memory::before, .gp-photo, .photo, .gp-scrawl, .gturn__q,
.margin-note, .margin-note--left, .margin-note--right, .dateline, .signature, .contents__title, .entry__hand, .consent__kicker {
  transform: none; rotate: none;
}
.gp-memory::before { display: none; }
.gp-memory, .gp-photo, .photo { box-shadow: none; background: none; padding: 0; border-radius: 0; }
.gp-memory, .gp-memory--right { align-self: auto; margin: var(--s2) auto; width: min(18rem, 100%); }
.gp__item:has(.gp-memory--right) { display: block; }
.gp-scrawl { margin: 0 auto; width: fit-content; mix-blend-mode: normal; pointer-events: auto; }
.margin-note--left, .margin-note--right { float: none; width: auto; max-width: none; margin: 0 auto 1em; text-align: center; }
.verse cite, .gturn .verse cite { border: 0; padding: 0; background: none; }
.gp-quote, .gp-quote p { border: 0; background: none; padding: 0; box-shadow: none; }
.gturn .verse, .verse { text-align: center; }
.generated .gp__item { text-align: center; }
.generated .gp__item .gp-text, .generated .gp__item .gp-place__text, .generated .gp__item .gturn__plain {
  text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; margin-inline: auto;
}
.generated .gp-title, .generated .gp-lede, .generated .gp-quote, .generated .gp-hand, .generated .gp-shout { margin-inline: auto; }
.generated .gp-facts, .generated .gp-timeline, .generated .gp-links, .generated .gp-choices, .generated .spec { text-align: left; }