/* 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; }
@media (hover: hover) and (pointer: fine) { 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;
}
@media (hover: hover) and (pointer: fine) { .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);
}
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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: .875rem; 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: .875rem; 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); }
@media (hover: hover) and (pointer: fine) { .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;
}
@media (hover: hover) and (pointer: fine) { .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: .875rem; }
  .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); }
@media (hover: hover) and (pointer: fine) { .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;
}
@media (hover: hover) and (pointer: fine) { .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: .875rem; 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: .875rem; 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: .875rem; 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; }
@media (hover: hover) and (pointer: fine) { .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); }
@media (hover: hover) and (pointer: fine) { .composer__send:hover svg { transform: translateY(-2px); } }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .gp-choice:hover { transform: translateY(-3px); } }
.gp-choice { transition: border-color .25s, transform .4s var(--ease), box-shadow .4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .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(54svh, 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; }
@media (hover: hover) and (pointer: fine) { .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: 40svh; 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; }
@media (hover: hover) and (pointer: fine) { .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: .875rem; 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: .875rem; 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; }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .has-motion .gp-choice, .has-motion .gp-choice:hover { transform: none; transition: border-color .25s; } }
@media (hover: hover) and (pointer: fine) { .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); }
@media (hover: hover) and (pointer: fine) { .composer:focus-within, .composer:hover, .composer:has(input:not(:placeholder-shown)) { width: min(26rem, calc(100vw - 2rem)); } }
@media (hover: hover) and (pointer: fine) { .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: .875rem; }
.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; }
@media (hover: hover) and (pointer: fine) { .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: .875rem; }

/* 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: .875rem; 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: .875rem; 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: .875rem; 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: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pencil); }
.gp-place__text { margin: .7rem 0 0; font-size: .875rem; 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: .875rem; 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: 100dvh; 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: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pencil); line-height: 1.5; }
.gp-pic figcaption small { font-size: .875rem; 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); }
@media (hover: hover) and (pointer: fine) { .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: .875rem; 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: .875rem; color: var(--pencil); }
.gp-media__text { margin: .55rem 0 0; font-size: .875rem; 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: .875rem; 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); }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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: 72dvh; 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, 18svh, 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; }
@media (hover: hover) and (pointer: fine) { .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: 78dvh; 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; }

/* iOS Safari zooms the page when a field under 16px is focused */
@media (pointer: coarse) { .composer #ask-input, #ask-input { font-size: 16px !important; } }

/* no handwriting: what used to be pen is now quiet typed text */
.pen--plain { font-family: var(--type); font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft, var(--ink)); transform: none; }
.gp-shout { transform: none; }

/* slower, calmer: letters strike one after another and each fades in softly */
.c { animation-duration: 240ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@keyframes gp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* a wall of small cards, like a pinboard: columns, natural photo shapes, lots of air */
.gp-grid { display: block; columns: 3 9.5rem; column-gap: 1.5rem; max-width: 44rem; margin-inline: auto; }
.gp-card { break-inside: avoid; margin: 0 0 2rem; gap: .2rem; animation: gp-in 1.1s cubic-bezier(.22, 1, .36, 1) both; }
.gp-card:nth-child(1) { animation-delay: .2s; } .gp-card:nth-child(2) { animation-delay: .5s; } .gp-card:nth-child(3) { animation-delay: .8s; }
.gp-card:nth-child(4) { animation-delay: 1.1s; } .gp-card:nth-child(5) { animation-delay: 1.4s; } .gp-card:nth-child(n+6) { animation-delay: 1.7s; }
.gp-card__img { aspect-ratio: 1 / 1; border-radius: 10px; margin-bottom: .7rem; box-shadow: none; }
.gp-card__img--empty { font-family: var(--serif); font-size: 2rem; }
.gp-card__title { font-size: .92rem; line-height: 1.25; letter-spacing: 0; text-align: left; }
.gp-card__meta { font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--ink-soft); text-align: left; }
.gp-card__text { font-size: .875rem; line-height: 1.55; color: var(--ink-soft); text-align: left; margin-top: .3rem; }
@media (max-width: 520px) { .gp-grid { columns: 2 8rem; column-gap: 1rem; } }

/* hover and focus: no red lines, only a soft lift and a quiet outline */
@media (hover: hover) and (pointer: fine) { a:hover, .tool:hover, .intro__link:hover { color: var(--ink-soft); } }
:focus-visible { outline: 1px solid rgba(20, 20, 20, .35); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .sheet p a:hover, .entry p a:hover, .gp-text a:hover, .colophon a:hover { background-size: 100% 1px; opacity: .6; } }
.gp-card__img img { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), opacity .6s; }
@media (hover: hover) and (pointer: fine) { .gp-card:hover .gp-card__img img { transform: scale(1.04); } }

/* nothing in the conversation is smaller than 14px (small sizes above were raised to .875rem) */
.gp-card__title { font-size: 1.05rem; }
.gp-card__meta { font-size: .875rem; letter-spacing: .04em; text-transform: none; }
.gp-card__text { font-size: .9rem; line-height: 1.6; }
.pen--plain { font-size: .875rem; letter-spacing: .1em; }
.gp-grid { columns: 3 11rem; column-gap: 1.75rem; max-width: 52rem; }
.gp-card { margin-bottom: 2.4rem; }
@media (max-width: 520px) { .gp-grid { columns: 2 9rem; column-gap: 1rem; } }

/* the pieces that were still under 14px */
.gturn__q, .gturn__q .w, .gturn__q .c { font-size: max(14px, .9rem); }
.gp-lede, .gp-lede .w, .gp-lede .c, .gp-text, .gp-text .w, .gp-text .c, .gturn__plain, .gturn__plain .w, .gturn__plain .c { font-size: max(15px, .95rem); }
.gp-choice strong { font-size: 1.1rem; }
.gp-choice span { font-size: .9rem; }
.docbox--turn dt, .docbox--turn dd, .docbox dt, .docbox dd, .gturn .verse cite, .verse cite { font-size: .875rem; }

/* ───── quieter, plainer: no handwriting except the verse at the signature ───── */
:root { --hand: var(--serif); --note: var(--serif); --sign: var(--serif); --verse-hand: 'Mrs Saint Delafield', 'Reenie Beanie', cursive; }
.slash { display: none !important; }
.docbox--turn { display: none; }
.composer:not(:focus-within) .composer__fine { opacity: 0; }

/* the signature: the name typed, the verse written by hand above and below it */
.signoff { padding-left: 0; text-align: center; margin: 5rem auto 3rem; max-width: 32rem; }
.signoff .closing { font-family: var(--type); font-size: .9rem; color: var(--ink-soft); margin-bottom: 3rem !important; }
.signoff .signature { font-family: var(--type); font-size: clamp(1.1rem, 3vw, 1.35rem); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); transform: none; margin: 1.1rem 0 !important; line-height: 1.4; }
.signoff .signoff__verse { font-family: var(--verse-hand); color: var(--red); font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1; margin: 0 !important; }
.sheet > .signoff { max-width: 32rem; margin-left: auto; margin-right: auto; }

/* titles: plain, centred, on every screen */
.sheet > h1, .sheet > h2, .contents__title, .gp-title, .gp-lede, .gp-choices__q, .gp-quote, .entry h3 { text-align: center; margin-inline: auto; transform: none; width: auto; }
.sheet > h1, .sheet > h2 { max-width: 32rem; margin-left: auto !important; margin-right: auto !important; }
.dateline { text-align: center; transform: none; }

/* ═════ ONE COLUMN ═════
   The letter is a single centred column on every screen. Nothing floats out of it, nothing
   alternates sides, nothing is drawn over it. Typed text is set flush left: a typewriter face
   cannot be justified without opening holes between the words. */
:root { --col: 36rem; --gutter: clamp(1.25rem, 5vw, 2rem); }
.sheet { max-width: calc(var(--col) + 2 * var(--gutter)); padding: clamp(3.5rem, 9vw, 6rem) var(--gutter) clamp(3.5rem, 9vw, 6rem); }
.letter > .sheet > *, .letter > .sheet:nth-of-type(n) > * { max-width: var(--col); margin-left: auto !important; margin-right: auto !important; float: none; }
.sheet p, .entry p, .sheet > p:not(.dateline):not(.folio):not(.address):not(.closing):not(.signature):not(.fullname) {
  text-align: left; hyphens: manual; -webkit-hyphens: manual; word-spacing: normal; text-wrap: pretty;
}
.sheet > h1, .sheet > h2, .salutation { display: block; text-align: center; margin-bottom: 1.6rem; }
.doodle, .slash, .progress { display: none !important; }
.lead::first-letter { color: inherit; font-size: inherit; float: none; margin: 0; font-family: inherit; }

/* the sheet's label: one quiet line */
.sheet > .docbox { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1rem; border: 0; margin-bottom: 2rem !important; }
.sheet > .docbox > div, .sheet > .docbox > div + div { padding: 0; border: 0; }
.sheet > .docbox dt, .sheet > .docbox .docbox__wide { display: none; }
.sheet > .docbox dd { margin: 0; color: var(--ink-soft, #6B6963); letter-spacing: .12em; }

/* pictures sit inside the column */
.photo, .photo--left, .photo--right, .photo--wide, .photo--small, .photo--center, .entry .photo {
  float: none !important; display: block; width: 100% !important; max-width: var(--col); margin: 2.4rem auto !important; transform: none;
}
.photo--small { width: min(100%, 22rem) !important; }
.photo figcaption { text-align: center; padding-top: .7rem; }
.spread { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; margin: 2.4rem auto !important; }
.spread .photo, .spread .photo:nth-child(2) { width: 100% !important; margin: 0 !important; }

/* margin notes and pull lines become quiet lines in the column */
.margin-note, .margin-note--left, .margin-note--right {
  display: block; width: auto !important; max-width: var(--col); margin: 2rem auto !important; float: none;
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--ink-soft, #6B6963); text-align: center; transform: none;
}
.big { color: var(--ink); font-size: 1.2rem; text-align: center !important; margin: 2.2rem auto !important; }

/* tables and lists keep to the column */
.spec, .contents, .press { width: 100%; }
.sheet > .docbox > div + div::before { content: none; }
.composer, .composer.is-thinking, .composer.is-listening, .is-agent .composer { width: 15.5rem; }
/* the works wall can be wider than the reply column, so it reads as a board, centred on the page */
.generated .gp-grid { width: min(60rem, calc(100vw - 2.5rem)); max-width: none; position: relative; left: 50%; translate: -50% 0; margin-inline: 0; columns: 4 12rem; column-gap: 1.75rem; }
@media (max-width: 520px) { .generated .gp-grid { columns: 2 9rem; column-gap: 1rem; } }

/* ═════ MOBILE PLATFORM LAYER ═════ */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, textarea, select { font-size: 16px; }
button, a, [role="button"], .gp-choice, .gp-card__img, summary { touch-action: manipulation; }
button, [role="button"], .gp-choice, .tool, .intro__go button, .chattools button { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* touch gets its feedback on press, since it has no hover */
button:active, .gp-choice:active, .tool:active { opacity: .72; transition: opacity 100ms ease-out; }
/* fixed bars keep clear of the notch and the home indicator */
.tool--back { top: calc(.9rem + env(safe-area-inset-top, 0px)); left: calc(1.25rem + env(safe-area-inset-left, 0px)); }
.chattools { top: calc(.9rem + env(safe-area-inset-top, 0px)); right: calc(1.25rem + env(safe-area-inset-right, 0px)); }
.savedsheet { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.savedsheet__list { overscroll-behavior: contain; }
.intro { min-height: 100svh; }

/* ═════ ONE GRID FOR THE CONVERSATION ═════
   Same column and gutters as the letter: replies sit in a centred 36rem column. Short lines
   (title, answer, question) are centred; longer typed text is flush left, never justified. */
.generated { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px)); }
.gturn { max-width: var(--col); margin-left: auto; margin-right: auto; }
.generated .gp__item .gp-text, .generated .gp__item .gp-place__text, .generated .gp__item .gturn__plain { text-align: left; text-align-last: auto; hyphens: manual; -webkit-hyphens: manual; }
.generated .gp-lede { max-width: 30rem; }
.generated .gp-choices__grid { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.gturn__q { max-width: min(30rem, 100%); }
/* nothing readable under 14px in the letter either */
.contents__title, .spec th, .spec td, .spec caption, .photo figcaption, .letter .photo figcaption::before { font-size: .875rem; }
.spec:not(.spec--index) td { font-size: 1.3rem; }
.spec th, .spec--index th, .spec thead th { font-size: .875rem !important; }

/* ═════ BODY TEXT, TWO POINTS SMALLER ═════ */
body { font-size: 13px; }
.sheet p, .entry p, .sheet > p:not(.dateline):not(.folio):not(.address):not(.closing):not(.signature):not(.fullname) { font-size: 13px; }
.gp-text, .gp-text .w, .gp-text .c, .gturn__plain, .gturn__plain .w, .gturn__plain .c, .gp-card__text, .gp-place__text { font-size: 13px; }
.gp-lede, .gp-lede .w, .gp-lede .c { font-size: 14px; }

/* ═════ THE SIGNATURE: one handwritten line ═════ */
.signoff .signoff__verse { font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.05; text-wrap: balance; margin-top: .4rem !important; }

/* ═════ THE OPENING: a slow strip of small cards ═════ */
.field__stage { display: none; }
.field__carousel {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.field__track { list-style: none; margin: 0; padding: 1rem 0; display: flex; gap: clamp(.9rem, 2vw, 1.5rem); width: max-content; }
.field__card { flex: none; width: clamp(5.5rem, 9vw, 7.5rem); opacity: 0; transform: translateY(14px) scale(.92); }
.field__card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: #F4F2EE; }
.field__card span { display: block; margin-top: .55rem; font-size: 11px; letter-spacing: .06em; line-height: 1.3; color: var(--ink-soft, #6B6963); text-align: center; }
.field.is-playing .field__card { animation: card-in 1.1s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 160ms); }
.field.is-playing .field__track { animation: strip 80s linear 2.4s infinite; }
@keyframes card-in { to { opacity: 1; transform: none; } }
@keyframes strip { to { transform: translateX(calc(-50% - clamp(.45rem, 1vw, .75rem))); } }
@media (hover: hover) and (pointer: fine) { .field__carousel:hover .field__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) {
  .field__card { opacity: 1; transform: none; animation: none !important; }
  .field__track { animation: none !important; }
  .field__carousel { overflow-x: auto; }
}
.signoff, .signoff p, .sheet .signoff p { text-align: center !important; }

/* ═════ THE OLD SITE'S GRID (cris-olmedo.framer.website) ═════
   Three equal columns, 20px outer margin, 20px gutters; one column with 10px margins on phones.
   Mono at 14px for the about text, which starts on the second column. Work cards are bare
   pictures with a 3px radius; the name sits in white on a 20% shade, shown on hover with a mouse
   and always on touch. */
:root { --g-margin: 20px; --g-gap: 20px; --sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
@media (max-width: 809px) { :root { --g-margin: 10px; --g-gap: 10px; } }

/* header bar */
.field .wordmark { display: none; }
.field__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--g-margin) 14px;
  font-family: var(--type); font-size: 14px; letter-spacing: .02em; text-transform: uppercase;
}
.field__bar a, .field__bar button { color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.field__name { justify-self: start; }
.field__nav { display: flex; gap: 1.2rem; }
.field__nav a { color: var(--ink-soft, #8C8A84); }
.field__contact { justify-self: end; }
@media (hover: hover) and (pointer: fine) { .field__bar a:hover, .field__bar button:hover { color: var(--ink-soft, #8C8A84); } }

/* the field: header, about, then the strip of cards, in normal flow */
.field { display: flex; flex-direction: column; justify-content: center; gap: clamp(2.5rem, 7svh, 4.5rem); min-height: 100svh; padding: 6rem 0 7rem; }
.field__about {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--g-gap); padding: 0 var(--g-margin);
  font-family: var(--type); font-size: 14px; line-height: 1.4; color: var(--ink);
}
.field__about > * { grid-column: 2 / span 2; max-width: 680px; margin: 0 0 1em; text-align: left; }
.field__roles-title { margin-top: 1.4em !important; }
.field__roles { list-style: none; padding: 0; }
.field__roles li { margin: 0 0 .9em; }
@media (max-width: 809px) {
  .field__about { grid-template-columns: 1fr; padding: 0 20px; }
  .field__about > * { grid-column: 1; }
  .field__nav { display: none; }
}
.field__carousel { position: relative; top: auto; translate: none; }

/* the works wall in the conversation: the old site's board */
.generated .gp-grid {
  width: calc(100vw - 2 * var(--g-margin)); max-width: 1440px;
  columns: 3; column-gap: var(--g-gap);
}
@media (max-width: 809px) { .generated .gp-grid { columns: 1; } }
@media (min-width: 810px) and (max-width: 1099px) { .generated .gp-grid { columns: 2; } }
.gp-card { margin: 0 0 var(--g-gap); gap: 0; }
.gp-card__img { position: relative; margin: 0; border-radius: 3px; box-shadow: none !important; background: #F4F2EE; overflow: hidden; }
.gp-card__img img { border-radius: 0; }
.gp-card__label {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px;
  background: rgba(0, 0, 0, .2); color: #fff; font-family: var(--sans); font-size: 16px; line-height: 1.2; text-align: right;
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .gp-card:hover .gp-card__label { opacity: 1; }
  .gp-card:hover .gp-card__img img { transform: none; }
}
@media (hover: none), (pointer: coarse) {
  .gp-card__label { opacity: 1; justify-content: center; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .35)); }
}
.gp-card--plain .gp-card__img { aspect-ratio: 4 / 3; background: #EDEBE6; }
.gp-card--plain .gp-card__label { opacity: 1; background: none; color: var(--ink); justify-content: flex-start; align-items: flex-end; text-align: left; }

/* ═════ THE CHAT ROOM ═════
   Once you type, the letter steps away and you are in a blank white room. Until the first
   question is sent the field rests in the middle of the screen; then it settles at the bottom. */
.is-agent .field, .is-agent .letter, .is-agent .colophon { display: none; }
body.is-agent { background: #fff; }
body.is-agent:not(:has(.gturn)) .composer {
  bottom: 50%; transform: translate(-50%, 50%);
  width: min(36rem, calc(100vw - 2rem)) !important;
}
body.is-agent .composer { transition: bottom .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), width .7s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { body.is-agent .composer { transition: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
body.is-agent:not(:has(.gturn)) .composer__fine { white-space: normal; text-overflow: clip; overflow: visible; }

/* ═════ "TALK TO HIM": a calm hover ═════
   No jump and no shadow: the pill softens to a deep grey, the letters open a little and a small
   arrow slides in from the left. On touch it only answers the press. */
.intro__btn { position: relative; display: inline-flex; align-items: center; gap: 0; box-shadow: none !important; transform: none !important;
  transition: background-color .5s cubic-bezier(.22, 1, .36, 1), letter-spacing .5s cubic-bezier(.22, 1, .36, 1), gap .5s cubic-bezier(.22, 1, .36, 1), padding .5s cubic-bezier(.22, 1, .36, 1); }
.intro__btn::after { content: '→'; display: inline-block; width: 0; overflow: hidden; opacity: 0; transform: translateX(-6px);
  transition: width .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .intro__btn:hover { background-color: #2B2A28; letter-spacing: .2em; gap: .55rem; }
  .intro__btn:hover::after { width: 1em; opacity: 1; transform: none; }
}
.intro__btn:active { background-color: #3A3936; transition-duration: .1s; }
.intro__btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ═════ PORTFOLIO WALL: Pinterest, 70% wide, centred, rounded ═════ */
.generated .gp-grid {
  width: min(70vw, 1180px); left: 50%; translate: -50% 0;
  columns: 4 12rem; column-gap: 16px;
}
@media (max-width: 1099px) { .generated .gp-grid { width: min(86vw, 900px); columns: 3 11rem; } }
@media (max-width: 809px) { .generated .gp-grid { width: calc(100vw - 40px); columns: 2; column-gap: 12px; } }
.gp-card { margin: 0 0 16px; }
.gp-card__img { border-radius: 16px; overflow: hidden; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.gp-card__label { border-radius: 16px; font-size: 14px; padding: 12px; }
@media (max-width: 809px) { .gp-card { margin-bottom: 12px; } .gp-card__img, .gp-card__label { border-radius: 14px; } .gp-card__label { font-size: 13px; padding: 10px; } }

/* cards inside a block wait for that block's turn, then arrive one after another */
.gp-card { animation-delay: calc(var(--item-delay, 0ms) + .25s); }
.gp-card:nth-child(2) { animation-delay: calc(var(--item-delay, 0ms) + .4s); }
.gp-card:nth-child(3) { animation-delay: calc(var(--item-delay, 0ms) + .55s); }
.gp-card:nth-child(4) { animation-delay: calc(var(--item-delay, 0ms) + .7s); }
.gp-card:nth-child(5) { animation-delay: calc(var(--item-delay, 0ms) + .85s); }
.gp-card:nth-child(6) { animation-delay: calc(var(--item-delay, 0ms) + 1s); }
.gp-card:nth-child(7) { animation-delay: calc(var(--item-delay, 0ms) + 1.15s); }
.gp-card:nth-child(8) { animation-delay: calc(var(--item-delay, 0ms) + 1.3s); }
.gp-card:nth-child(n+9) { animation-delay: calc(var(--item-delay, 0ms) + 1.45s); }
@keyframes gp-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* ═════ THE OPENING AS A LETTER ═════
   "Dear reader" first, then the belief, then the about, all centred and set high on the page,
   arriving one line after another. */
.field { justify-content: flex-start; padding-top: clamp(5.5rem, 16svh, 9rem); gap: clamp(2rem, 6svh, 3.5rem); }
.field__about { display: block; max-width: 34rem; margin: 0 auto; padding: 0 20px; text-align: center; }
.field__about > * { max-width: none; margin: 0 auto 1em; text-align: center; }
.field__dear { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin-bottom: .6em !important; }
.field__belief { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3; margin-bottom: 1.4em !important; text-wrap: balance; }
.field__roles { padding: 0; }
.field__about > *, .field__carousel { opacity: 0; transform: translateY(10px); }
.field.is-playing .field__about > *, .field.is-playing .field__carousel { animation: line-in 1.1s cubic-bezier(.22, 1, .36, 1) forwards; }
.field.is-playing .field__about > :nth-child(1) { animation-delay: .1s; }
.field.is-playing .field__about > :nth-child(2) { animation-delay: .9s; }
.field.is-playing .field__about > :nth-child(3) { animation-delay: 1.7s; }
.field.is-playing .field__about > :nth-child(4) { animation-delay: 2.4s; }
.field.is-playing .field__about > :nth-child(5) { animation-delay: 2.8s; }
.field.is-playing .field__about > :nth-child(n+6) { animation-delay: 3.2s; }
.field.is-playing .field__carousel { animation-delay: 3.6s; }
.field.is-playing .field__card { animation-delay: calc(3.6s + var(--i) * 140ms); }
.field.is-playing .field__track { animation-delay: 6s; }
@keyframes line-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .field__about > *, .field__carousel { opacity: 1; transform: none; animation: none !important; } }

/* ═════ THE LETTER, LINE BY LINE ═════ */
.js .sheet.is-in > *:not(.is-seen) { opacity: 0; translate: 0 .75rem; }
.js .sheet > .is-seen { opacity: 1; translate: 0 0; transition: opacity .9s cubic-bezier(.22, 1, .36, 1), translate .9s cubic-bezier(.22, 1, .36, 1); transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .js .sheet > * { opacity: 1 !important; translate: none !important; } }

/* ═════ A FINE GRID OF SMALL PHOTOGRAPHS ═════ */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 2.4rem auto !important; max-width: 30rem;
  border-top: 1px solid var(--hairline, #E6E3DD); border-left: 1px solid var(--hairline, #E6E3DD); }
.photo-grid .photo { margin: 0 !important; padding: 10px; border-right: 1px solid var(--hairline, #E6E3DD); border-bottom: 1px solid var(--hairline, #E6E3DD); width: auto !important; position: relative; }
.photo-grid .photo img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; }
.photo-grid .photo figcaption { font-size: 12px; padding-top: .5rem; letter-spacing: .06em; }
@media (max-width: 520px) { .photo-grid { max-width: 100%; } .photo-grid .photo { padding: 6px; } }

/* ═════ LIKE, SAVE, DOWNLOAD, LINKEDIN ═════ */
.letter figure.photo { position: relative; }
.photo__actions { display: flex; justify-content: center; gap: 2px; margin-top: .45rem; opacity: .55; transition: opacity .3s ease; }
.photo:hover .photo__actions, .photo__actions:focus-within { opacity: 1; }
@media (hover: none) { .photo__actions { opacity: 1; } }
.photo__act { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: 999px; color: var(--ink); cursor: pointer; padding: 0; transition: background-color .25s ease; }
@media (hover: hover) and (pointer: fine) { .photo__act:hover { background: #F2F0EC; } }
.photo__act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.photo__act[data-act="share"] svg { fill: currentColor; stroke: none; }
.photo__act[aria-pressed="true"] svg { fill: currentColor; }
.photo__act[data-act="like"][aria-pressed="true"] { color: var(--red); }
.photo__act.is-pop svg { animation: pop .45s cubic-bezier(.22, 1.6, .36, 1); }
@keyframes pop { 40% { transform: scale(1.35); } }
.photo-grid .photo__actions { gap: 0; }
.photo-grid .photo__act { width: 26px; height: 26px; }
.photo-grid .photo__act svg { width: 13px; height: 13px; }

/* ═════ NOTES (reflections) ═════ */
.notes { list-style: none; padding: 0; margin: 1.8rem auto !important; }
.notes li { display: grid; gap: .3rem; padding: 1rem 0; border-top: 1px solid var(--hairline, #E6E3DD); text-align: left; }
.notes li:last-child { border-bottom: 1px solid var(--hairline, #E6E3DD); }
.notes strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.notes span { color: var(--ink-soft, #6B6963); font-size: 13px; line-height: 1.5; }
.field__contact { grid-column: 3; }

/* 2026-11-02 letter pass */
/* each letter settles more gently, and each block takes longer to arrive */
.c { animation-duration: 320ms; }
.photo-grid--two { grid-template-columns: repeat(2, 1fr); max-width: none; }
.photo-grid--two .photo img { aspect-ratio: 16 / 9; }
.photo-grid--four { grid-template-columns: repeat(4, 1fr); max-width: none; }
.photo-grid--four .photo img { aspect-ratio: 2 / 3; }
@media (max-width: 640px) { .photo-grid--four { grid-template-columns: repeat(2, 1fr); } .photo-grid--two { grid-template-columns: 1fr; } }

/* titles sit flush left, on the same edge as the text */
.sheet > h1, .sheet > h2, .salutation, .contents__title, .entry h3,
.generated .gp-title, .generated .gp-choices__q { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }
.sheet > h1, .sheet > h2 { max-width: var(--col); width: 100%; margin-left: auto !important; margin-right: auto !important; }
.generated .gp-title, .generated .gp-choices__q { width: 100%; }
.generated .gp-lede { text-align: left !important; max-width: none; margin-left: 0 !important; }

/* ═════ PHOTOGRAPHS IN THE LETTER, QUIETER ═════
   The sheet's label sits on the left like the titles. No figure numbers. A single photo is
   always small; larger moments use two side by side. The caption appears over the picture on
   hover, or on a first tap on touch screens. The actions sit inside the picture, 16px from its
   bottom right corner. */
.sheet > .docbox { justify-content: flex-start; }
.letter .photo figcaption::before { content: none !important; display: none; }
.letter .photo:not(.photo--grid):not(.spread .photo) { width: min(100%, 22rem) !important; max-width: 22rem; }
.letter .photo--small-h img { aspect-ratio: 4 / 3; object-fit: cover; }
.letter .spread { max-width: 30rem; }

.letter figure.photo { position: relative; }
.letter .photo > img { display: block; }
.letter .photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 16px 150px 16px 16px; text-align: left;
  font-family: var(--type); font-size: 12px; letter-spacing: .04em; line-height: 1.35; color: #fff; text-transform: none;
  background: linear-gradient(transparent, rgba(0, 0, 0, .45)); border-radius: 0 0 10px 10px;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.letter .photo-grid .photo figcaption { left: 10px; right: 10px; bottom: 10px; border-radius: 0 0 6px 6px; padding: 10px 10px 34px; font-size: 11px; }
@media (hover: hover) and (pointer: fine) { .letter .photo:hover figcaption { opacity: 1; } }
.letter .photo.is-captioned figcaption { opacity: 1; }

.photo__actions {
  position: absolute; right: 16px; bottom: 16px; margin: 0; gap: 2px; padding: 3px; opacity: 1;
  background: rgba(255, 255, 255, .86); border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.letter .photo-grid .photo__actions { right: 16px; bottom: 16px; padding: 2px; }
.photo__act { width: 28px; height: 28px; }
.photo__act svg { width: 14px; height: 14px; }
.photo-grid .photo__act { width: 22px; height: 22px; }
.photo-grid .photo__act svg { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  .photo__actions { opacity: 0; transition: opacity .3s ease; }
  .letter .photo:hover .photo__actions, .photo__actions:focus-within { opacity: 1; }
}

/* ═════ DOING THINGS TOGETHER: form, budget, board ═════ */
.gt { text-align: left; border: 1px solid var(--hairline, #E6E3DD); border-radius: 16px; padding: 20px; background: #fff; display: grid; gap: 14px; }
.gt__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.gt__intro { margin: 0; font-size: 14px; color: var(--ink-soft, #6B6963); line-height: 1.5; }
.gt-field { display: grid; gap: 6px; font-size: 14px; }
.gt-field span { color: var(--ink-soft, #6B6963); }
.gt input, .gt select, .gt textarea {
  font: 400 16px/1.4 var(--type); color: var(--ink); background: #FAF9F7; border: 1px solid var(--hairline, #E6E3DD);
  border-radius: 10px; padding: 10px 12px; width: 100%; min-width: 0; transition: border-color .2s, background-color .2s;
}
.gt input:focus, .gt select:focus, .gt textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.gt textarea { resize: vertical; }
.gt-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gt-inline { flex: 1 1 12rem; }
.gt-btn { font: 400 14px/1 var(--type); letter-spacing: .04em; color: #fff; background: var(--ink); border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer; transition: background-color .3s ease, opacity .3s ease; }
.gt-btn--quiet { color: var(--ink); background: #F2F0EC; }
.gt-btn:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .gt-btn:not(:disabled):hover { background: #2B2A28; } .gt-btn--quiet:not(:disabled):hover { background: #E8E5DF; } }
.gt-status { margin: 0; font-size: 14px; }
.gt-status--error { color: var(--red); }
.gt-fine { margin: 0; font-size: 12px; color: #9A978F; }
.gt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gt-table th { text-align: left; font-weight: 400; color: var(--ink-soft, #6B6963); padding: 6px 4px; border-bottom: 1px solid var(--hairline, #E6E3DD); }
.gt-table td { padding: 4px; vertical-align: middle; }
.gt-table td input { padding: 8px 10px; }
.gt-table td:nth-child(2), .gt-table th:nth-child(2) { width: 4.5rem; }
.gt-table td:nth-child(3), .gt-table th:nth-child(3) { width: 7rem; }
.gt-table tfoot th, .gt-table tfoot td { border-top: 1px solid var(--ink); padding-top: 10px; color: var(--ink); }
.gt-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gt-x { border: 0; background: none; font-size: 18px; line-height: 1; color: #9A978F; cursor: pointer; padding: 4px 6px; }
.gt-board__canvas { width: 100%; height: auto; aspect-ratio: 800 / 520; border: 1px solid var(--hairline, #E6E3DD); border-radius: 12px; touch-action: none; cursor: crosshair; background: #fff; }
.gt-note { font: 400 14px/1.3 var(--type); color: #3A372F; overflow: hidden; height: 100%; }
@media (max-width: 520px) {
  .gt { padding: 16px; }
  .gt-table th:nth-child(4), .gt-table td:nth-child(4) { display: none; }
}

/* ───────── ONE TYPE SCALE IN THE CONVERSATION ─────────
   Two sizes and one typeface for everything the reply writes: 13px to read, 11px for small print.
   The reader's own message sits on the right, like a sent message. */
.generated { --read: 13px; --small: 11px; }
.generated .gp-lede, .generated .gp-lede .w, .generated .gp-lede .c,
.generated .gp-text, .generated .gp-text .w, .generated .gp-text .c,
.generated .gturn__plain, .generated .gp-moment__what, .generated .gp-place__text,
.generated .gp-choice strong, .generated .gp-contact, .generated .gp-contact p, .generated .gp-contact > a,
.generated .gt, .generated .gt-status, .generated .gt-table, .generated .gt-note, .generated .gt-btn {
  font-family: var(--type); font-size: var(--read); line-height: 1.55; letter-spacing: normal;
}
.generated .gp-choice span, .generated .gp-contact__press, .generated .gt-fine, .generated .gt-table th,
.generated .docbox--turn dt, .generated .docbox--turn dd, .chattools button {
  font-family: var(--type); font-size: var(--small); line-height: 1.45;
}
/* the reader's message, right aligned with the tail on its corner */
.generated .gturn__q {
  font-family: var(--type); font-size: var(--read); line-height: 1.55; letter-spacing: normal;
  margin: 0 0 var(--s5) auto; width: fit-content; max-width: min(80%, 28rem);
  text-align: left; padding: var(--s2) var(--s3); border-radius: var(--r1) var(--r1) var(--s1) var(--r1);
  transform-origin: 100% 100%;
}
/* cards say things in the same order and alignment as the text around them */
.generated .gp-contact { align-items: flex-start; text-align: left; gap: var(--s1); }
.generated .gp-contact > a { margin: var(--s1) 0; }
.generated .gp-choice { text-align: left; }
.generated .gp-choice strong { font-weight: 400; }
.generated .gp-choice span { margin-top: var(--s1); color: var(--pencil); }
.generated .gp-choice:focus:not(:focus-visible) { outline: none; }
/* the floating Saved and Download pills get a quiet band so text never runs under them */
.is-agent .chattools::before { content: ''; position: fixed; inset: 0 0 auto 0; height: calc(5.6rem + env(safe-area-inset-top, 0px)); background: linear-gradient(#fff 70%, rgba(255,255,255,0)); z-index: -1; pointer-events: none; }

/* ───────── THE CANVAS ─────────
   The conversation runs down a dotted board, like FigJam. Every block can be picked up and left aside:
   at once with a mouse, after a short hold with a finger. Each one has an X that lets it go. */
.is-agent .generated {
  background-color: #fff;
  background-image: radial-gradient(circle, #ECEAE5 .6px, transparent .9px);
  background-size: 22px 22px; background-attachment: local;
}
.gp__spot { position: relative; touch-action: auto; }
@media (hover: hover) and (pointer: fine) { .gp__spot { cursor: grab; } }
.gp__spot.is-lifted { z-index: 30; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.gp__spot.is-lifted > .gp__item { transform: rotate(-.6deg) scale(1.01); transition: transform .2s var(--ease); }
.gp__spot :is(img, .gp-contact, .gp-media, .gp-place, .gp-quote) { transition: box-shadow .3s var(--ease); }
.gp__spot.is-lifted :is(img, .gp-contact, .gp-media, .gp-place, .gp-quote) { box-shadow: 0 26px 50px -24px rgba(20,20,20,.38); }
.gp__item { transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
/* the X sits in the corner of every block; next to the bookmark when there is one */
.gp__item:not(:has(.gp__save[style*="display"], .gp-media, .gp-place, .gp-photo, .gp-pic, .gp-map, .gp-card, .gp-quote, .gp-memory, .gp-facts)) .gp__close { right: var(--s2); top: 0; }
@media (hover: none) {
  .gp__close { opacity: 0; }
  .gp__item.is-card .gp__close, .is-lifted .gp__close { opacity: 1; }
}
html.is-dragging, html.is-dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
.gp__spot img { -webkit-user-drag: none; user-drag: none; }
/* single objects are only as wide as themselves, so the X and the bookmark sit on their corner */
.gp__spot:has(> .gp__item .gp-contact, > .gp__item .gp-photo, > .gp__item .gp-media, > .gp__item .gp-place, > .gp__item .gp-memory, > .gp__item .gp-pic) { width: fit-content; max-width: 100%; }

/* the writing bar comes first: always whole, always in front of anything left floating */
body.is-agent .composer { z-index: 60; width: min(36rem, calc(100vw - 2rem)) !important; }
body.is-agent::after { content: ''; position: fixed; inset: auto 0 0 0; height: calc(7rem + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(255,255,255,0), #fff 62%); z-index: 50; pointer-events: none; }
/* what you leave on the board floats a little */
.gp__spot.is-placed:not(.is-lifted) :is(img, .gp-contact, .gp-media, .gp-place, .gp-quote) { box-shadow: 0 18px 40px -24px rgba(20,20,20,.3); }
/* things left hanging off the edge never make the page scroll sideways */
html:has(body.is-agent), body.is-agent { overflow-x: clip; }
/* on a picture, save and X float inside it, 16px from its bottom right corner */
.gp__item.has-pic .gp__save, .gp__item.has-pic .gp__close { top: auto; bottom: calc(var(--pic-b, 0px) + 16px); display: grid; }
.gp__item.has-pic .gp__save { right: calc(var(--pic-r, 0px) + 16px); }
.gp__item.has-pic .gp__close { right: calc(var(--pic-r, 0px) + 16px + 26px + 8px); }
.gp__item.has-pic .gp__kept { top: auto; bottom: calc(var(--pic-b, 0px) + 16px + 34px); right: calc(var(--pic-r, 0px) + 16px); }

/* ───────── HOW A REPLY ARRIVES ─────────
   Pictures surface from a soft blur once they have loaded, over a quiet tone that already holds their place.
   Choices come last, one after the other. The dots of someone typing sit only in the silences. */
.generated .gp__item .gp-card__img { background-color: #F4F3F0; }
.generated .gp__item img { transition: opacity .7s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1), scale 1.2s cubic-bezier(.22, 1, .36, 1); }
.generated .gp__item img:not(.is-in) { opacity: 0; filter: blur(12px); scale: 1.03; }
@keyframes choice-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.gp--motion .gp-choices__grid > * { animation: choice-in .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--item-delay, 0ms) + 260ms); }
.gp--motion .gp-choices__grid > :nth-child(2) { animation-delay: calc(var(--item-delay, 0ms) + 380ms); }
.gp--motion .gp-choices__grid > :nth-child(3) { animation-delay: calc(var(--item-delay, 0ms) + 500ms); }
.gp__pending { margin-top: var(--s2); }
.gp__pending { background: none; box-shadow: none; padding-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .generated .gp__item img:not(.is-in) { opacity: 1; filter: none; scale: 1; }
  .gp--motion .gp-choices__grid > * { animation: none; }
}
/* kept out of the layout until its turn; letters keep counting their time underneath */
.gp__spot.is-waiting { height: 0; overflow: hidden; visibility: hidden; margin: 0; }
.gp__spot.is-waiting > .gp__item { margin: 0; }

/* ───────── WHAT THE VOICE IS DOING ─────────
   One quiet line per tool, the working one shimmering, ticked once it has answered. */
.gsteps { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.gsteps__step { display: flex; align-items: center; gap: var(--s2); font: 400 11px/1.45 var(--type); letter-spacing: .04em; color: var(--pencil); }
.gsteps__mark { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--hairline); font-size: 9px; color: var(--ink); }
.gsteps__step:not(.is-done) .gsteps__mark { border-color: var(--pencil); border-right-color: transparent; animation: gsteps-spin .9s linear infinite; }
.gsteps__step:not(.is-done) { background: linear-gradient(90deg, var(--pencil) 30%, #C9C6BF 50%, var(--pencil) 70%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gsteps-shine 1.6s linear infinite; }
.gsteps__step.is-done { color: var(--pencil); }
@keyframes gsteps-spin { to { rotate: 360deg; } }
@keyframes gsteps-shine { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .gsteps__step, .gsteps__mark { animation: none !important; } .gsteps__step:not(.is-done) { color: var(--pencil); background: none; } }

/* on a photo: ♥ to like it, a speech bubble to talk about it, the X to let it go; inside the picture, bottom right */
.gp__like, .gp__ask { position: absolute; 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); -webkit-backdrop-filter: blur(6px); }
.gp__like svg, .gp__ask svg { width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.gp__like.is-on svg { fill: var(--red); stroke: var(--red); }
.gp__item.has-pic .gp__ask { bottom: calc(var(--pic-b, 0px) + 16px); right: calc(var(--pic-r, 0px) + 16px); }
.gp__item.has-pic .gp__like { bottom: calc(var(--pic-b, 0px) + 16px); right: calc(var(--pic-r, 0px) + 16px + 34px); }
.gp__item.has-pic .gp__close { right: calc(var(--pic-r, 0px) + 16px + 68px); }
@media (hover: hover) and (pointer: fine) { .gp__item:hover :is(.gp__like, .gp__ask), .gp__like:focus-visible, .gp__ask:focus-visible { opacity: 1; } }
@media (hover: none) { .gp__like, .gp__ask { opacity: 1; } }
.gp__like.is-on { opacity: 1; }

/* ───────── WORST CASES ─────────
   What a long link, a big number, a small phone or a quiet network did to the conversation, fixed. */
/* a link or an email inside a reply breaks where it must instead of running off the page */
.w--long { white-space: normal; }
.generated :is(.gp-lede, .gp-text, .gp-title, .gp-section, .gp-quote, .gp-moment__what, .gp-place__text, .gturn__plain, .gp-contact, .gp-links) { overflow-wrap: anywhere; }
/* the note under a link belongs to the small print */
.generated .gp-links__note { display: block; margin-top: 2px; font-family: var(--type); font-size: var(--small, 11px); line-height: 1.45; color: var(--pencil); }
/* on a phone the X is always there, so cards keep its corner free */
@media (hover: none) { .gp__item.is-card :is(.gp-contact, .gp-media, .gp-place) { padding-right: 44px; } }
/* the budget: the description takes the room and wraps, numbers always get enough to be read whole */
.gt-table { table-layout: fixed; }
.gt-table th:nth-child(2), .gt-table td:nth-child(2) { width: 5.5rem; }
.gt-table th:nth-child(3), .gt-table td:nth-child(3) { width: 7.5rem; }
.gt-table th:nth-child(4), .gt-table td:nth-child(4) { width: 7.5rem; }
.gt-table th:nth-child(5), .gt-table td:nth-child(5) { width: 2.25rem; }
.gt-table td textarea { resize: none; line-height: 1.35; min-height: 0; overflow-wrap: anywhere; }
.gt-table input[type="number"] { font-variant-numeric: tabular-nums; padding-inline: 8px; }
.gt-num { overflow-wrap: anywhere; }
/* each line is two rows, at every width: what it is, then quantity, price and subtotal */

.gt-table, .gt-table tbody, .gt-table tfoot { display: block; width: 100%; }
.gt-table thead { display: none; }
.gt-table tbody tr { display: grid; grid-template-columns: 5.5rem minmax(7rem, 1fr) minmax(6rem, auto) 2rem; gap: 6px 8px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.gt-table tbody td { display: block; width: auto !important; padding: 0; }
.gt-table tbody td:first-child { grid-column: 1 / -1; }
.gt-table th:nth-child(4), .gt-table td:nth-child(4) { display: block; }
.gt-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; color: var(--pencil); }
.gt-table tbody td.gt-num { padding-bottom: 10px; text-align: right; }
.gt-table tfoot tr { display: flex; justify-content: space-between; padding-top: 10px; }
.gt-table tfoot td:empty { display: none; }

/* on a phone the way back is an arrow and the tools close up, so neither hides the other */
@media (max-width: 640px) {
  .tool--back { min-width: 30px; padding: 0; justify-content: center; left: calc(.75rem + env(safe-area-inset-left, 0px)); }
  .tool--back .tool__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chattools { right: calc(.75rem + env(safe-area-inset-right, 0px)); }
  .chattools button { padding: 0 var(--s2); letter-spacing: .06em; }
}
.gturn__wait { display: flex; align-items: center; gap: var(--s3); }
.gturn__wait .gturn__typing { margin-top: 0; }
.gturn__slow { font: 400 11px/1.45 var(--type); color: var(--pencil); }
@media (max-width: 420px) {
  .gt-table tbody tr { grid-template-columns: 5rem minmax(0, 1fr) 2rem; }
  .gt-table tbody td.gt-num { grid-column: 1 / -1; grid-row: 3; padding-bottom: 0; }
  .gt-table tbody td:last-child { grid-column: 3; grid-row: 2; }
  .gt-table tbody td.gt-num:empty { display: none; }
  .gt-table tbody td.gt-num::before { display: inline; margin-right: 6px; }
}
.gt-table td.gt-num:empty::before { content: none; }
.gt-table tbody tr { grid-template-columns: 6.5rem minmax(7rem, 1fr) minmax(6rem, auto) 2rem; }
@media (max-width: 420px) { .gt-table tbody tr { grid-template-columns: 5rem minmax(0, 1fr) 2rem; } .gt-table input[type="number"] { padding-inline: 6px; } }
.gt-table td textarea { field-sizing: content; max-height: 7.5em; }
@media (max-width: 420px) {
  .gt-table tbody td:first-child { grid-column: 1 / 3; grid-row: 1; }
  .gt-table tbody td:last-child { grid-column: 3; grid-row: 1; align-self: start; }
  .gt-table tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .gt-table tbody td:nth-child(3) { grid-column: 2 / 4; grid-row: 2; }
}

/* ───────── WHAT HE HANDS YOU ─────────
   A shared thing is a card thrown across the table: it lands a little crooked and stays that way.
   A product is a catalogue sheet: photo, name, a short spec in typewriter, and a way to ask for one. */
.gp-share { position: relative; width: min(100%, 23rem); padding: var(--s4) var(--s4) var(--s3); border: var(--b) solid var(--hairline); border-radius: 14px; background: #fff; box-shadow: 0 22px 40px -26px rgba(20,20,20,.35), 0 1px 2px rgba(20,20,20,.04); transform-origin: 30% 80%; }
.gp-share::before { content: ''; position: absolute; top: -7px; left: 50%; width: 46px; height: 14px; translate: -50% 0; rotate: -2deg; background: rgba(236, 233, 224, .85); border: 1px solid rgba(20,20,20,.05); } /* a strip of tape */
.gp-share__from { margin: 0 0 var(--s2); font: 400 11px/1.4 var(--type); letter-spacing: .14em; text-transform: uppercase; color: var(--pencil); }
.gp-share__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.gp-share__note { margin: var(--s2) 0 0; font: 400 13px/1.55 var(--type); color: var(--ink-soft); }
.gp-share__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.gp-share__play { font: 400 13px/1 var(--type); color: #fff; background: var(--ink); border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.gp-share__actions a { font: 400 13px/1 var(--type); color: var(--ink); }
.gp-share__player { display: block; width: 100%; margin-top: var(--s3); border: 0; border-radius: 10px; background: #F4F3F0; }
.gp-share--pinterest .gp-share__player { max-width: 345px; }
.gp-share.is-playing { rotate: 0deg !important; transition: rotate .4s var(--ease); }

.gp-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); width: 100%; padding: var(--s4); border: var(--b) solid var(--hairline); border-radius: 18px; background: #fff; }
@media (min-width: 640px) { .gp-product:has(.gp-product__img) { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; } }
.gp-product__img { border-radius: 12px; overflow: hidden; background: #F4F3F0; }
.gp-product__img img { display: block; width: 100%; height: auto; }
.gp-product__name { margin: 0 0 var(--s3); font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.gp-product__spec { margin: 0 0 var(--s3); border-top: 1px solid var(--hairline); }
.gp-product__spec > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s2); padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.gp-product__spec dt { font: 400 11px/1.5 var(--type); letter-spacing: .12em; text-transform: uppercase; color: var(--pencil); }
.gp-product__spec dd { margin: 0; font: 400 13px/1.5 var(--type); color: var(--ink); }
.gp-product__text { margin: 0 0 var(--s3); font-size: 13px; }
.gp-product__ask { font: 400 13px/1 var(--type); color: var(--ink); background: #F2F0EC; border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .gp-product__ask:hover { background: #E8E5DF; } .gp-share__play:hover { background: #2B2A28; } }

/* ───────── THE + BESIDE THE FIELD ─────────
   Everything the conversation can hand over, as a small fan of chips above the bar. */
.composer__plus { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: -4px; padding: 0; border: var(--b) solid var(--hairline); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: rotate .35s cubic-bezier(.22, 1, .36, 1), background-color .2s; }
.composer__plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.composer.is-menu .composer__plus { rotate: 45deg; background: var(--ink); color: #fff; border-color: var(--ink); }
.composer__menu { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s2); padding: var(--s2); border: var(--b) solid var(--hairline); border-radius: 18px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 22px 50px -26px rgba(20,20,20,.35); transform-origin: 0 100%; }
.composer__menu[hidden] { display: none; }
.composer__menu:not([hidden]) { animation: menu-in .32s cubic-bezier(.22, 1, .36, 1) both; }
.composer__menu button { font: 400 13px/1 var(--type); color: var(--ink); background: #F5F4F1; border: 0; border-radius: 999px; padding: 9px 13px; cursor: pointer; }
.composer__menu:not([hidden]) button { animation: chip-in .38s cubic-bezier(.22, 1, .36, 1) both; }
.composer__menu button:nth-child(2) { animation-delay: 25ms; } .composer__menu button:nth-child(3) { animation-delay: 50ms; }
.composer__menu button:nth-child(4) { animation-delay: 75ms; } .composer__menu button:nth-child(5) { animation-delay: 100ms; }
.composer__menu button:nth-child(6) { animation-delay: 125ms; } .composer__menu button:nth-child(7) { animation-delay: 150ms; }
.composer__menu button:nth-child(8) { animation-delay: 175ms; } .composer__menu button:nth-child(9) { animation-delay: 200ms; }
@media (hover: hover) and (pointer: fine) { .composer__menu button:hover { background: #ECEAE5; } .composer__plus:hover { background: #F5F4F1; } }
@keyframes menu-in { from { opacity: 0; scale: .96; translate: 0 6px; } }
@keyframes chip-in { from { opacity: 0; translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .composer__menu, .composer__menu button { animation: none !important; } .composer__plus { transition: none; } }
.generated .gp-product, .generated .gp-share { text-align: left; }

/* ───────── A ROW TO SWIPE ─────────
   Sheets and shared cards fanned out in a row: native scroll with snap points, the edge fading
   where there is more to see, arrows only for a mouse. */
.gp-carousel { position: relative; width: 100%; }
.gp-carousel__track { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 14px 2px 22px; scrollbar-width: none; outline: none; }
.gp-carousel__track::-webkit-scrollbar { display: none; }
.gp-carousel:not(.is-end) .gp-carousel__track { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.gp-carousel:not(.is-start):not(.is-end) .gp-carousel__track { mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.gp-carousel:not(.is-start).is-end .gp-carousel__track { mask-image: linear-gradient(90deg, transparent, #000 48px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); }
.gp-carousel__slide { flex: 0 0 min(82%, 19rem); scroll-snap-align: start; display: flex; }
.gp-carousel__slide > * { flex: 1; }
.gp-carousel .gp-product { grid-template-columns: minmax(0, 1fr) !important; align-content: start; }
.gp-carousel .gp-share { width: 100%; }
.gp-carousel__track:focus-visible { outline: 1px solid rgba(20,20,20,.35); outline-offset: 4px; border-radius: 12px; }
.gp-carousel__nav { display: none; justify-content: flex-end; gap: 6px; margin-top: -6px; }
@media (hover: hover) and (pointer: fine) { .gp-carousel__nav { display: flex; } }
.gp-carousel__nav button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: var(--b) solid var(--hairline); border-radius: 50%; background: #fff; font: 400 14px/1 var(--type); color: var(--ink); cursor: pointer; transition: opacity .2s, background-color .2s; }
.gp-carousel__nav button:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .gp-carousel__nav button:not(:disabled):hover { background: #F5F4F1; } }

/* ═════════════ ONE TYPE SYSTEM ═════════════
   The last word on text, for the home, the letter and the conversation alike.
   Typewriter in two sizes: 13px to read, 11px for small print, and 11px capitals with one tracking for labels.
   Bodoni in four steps: XL for the greetings, L for titles, M for names and numbers, S in italics for quotes.
   It sets size, leading and tracking only (never the typeface), and leaves the handwritten version alone. */
:root {
  --t-read: 13px;   --t-read-lh: 1.6;
  --t-small: 11px;  --t-small-lh: 1.45;
  --t-caps: .12em;
  --s-xl: clamp(2.1rem, 1.55rem + 2.2vw, 3rem);    --s-xl-lh: 1.04;
  --s-l: clamp(1.55rem, 1.25rem + 1.2vw, 2.1rem);  --s-l-lh: 1.12;
  --s-m: 1.3rem;                                    --s-m-lh: 1.2;
  --s-s: 1.12rem;                                   --s-s-lh: 1.42;
}

/* typewriter, to read */
html:not([data-mode="hand"]) :is(
  .lead, .sheet > p:not([class]), .notes span, .spec--index td, .contents a, .contents li,
  .field__about p:not(.field__dear):not(.field__belief), .colophon p, .titleblock dd, .closing, .skip,
  .intro__text p:not(.intro__lead), .intro__text p:not(.intro__lead) .w, .intro__text p:not(.intro__lead) .c,
  .press li > a, .press li > span:not(.when), .field__roles li, .address, .address a,
  .gp-product__text, .gp-share__note, .gp-product__spec dd, .gp-share__actions a, .gp-share__play, .gp-product__ask
) { font-size: var(--t-read) !important; line-height: var(--t-read-lh) !important; letter-spacing: 0 !important; }

/* typewriter, small print */
html:not([data-mode="hand"]) :is(
  .photo figcaption, .field__card span, .composer__fine, .tool, .gt-fine, .gsteps__step, .gturn__slow
) { font-size: var(--t-small) !important; line-height: var(--t-small-lh) !important; letter-spacing: .02em !important; }

/* typewriter, labels in capitals */
html:not([data-mode="hand"]) :is(
  .docbox dt, .docbox dd, .when, .spec th, .spec caption, .pencil, .titleblock dt,
  .field__nav button, .field__nav a, .field__name, .intro__btn, .intro__link, .field__hint,
  .gp-share__from, .gp-product__spec dt, .field__contact, .gp-fact__label, .generated .gp-quote cite
) { font-size: var(--t-small) !important; line-height: var(--t-small-lh) !important; letter-spacing: var(--t-caps) !important; text-transform: uppercase; }
html:not([data-mode="hand"]) .spec--index td:first-child { letter-spacing: var(--t-caps) !important; }

/* Bodoni XL: the greetings */
html:not([data-mode="hand"]) :is(.salutation, .field__dear) { font-size: var(--s-xl) !important; line-height: var(--s-xl-lh) !important; letter-spacing: -.01em !important; }

/* Bodoni L: titles */
html:not([data-mode="hand"]) :is(.sheet h2, .intro__lead, .intro__lead .w, .intro__lead .c, .field__belief, .generated .gp-title, .generated .gp-title .w, .generated .gp-title .c, .gp-fact__value) { font-size: var(--s-l) !important; line-height: var(--s-l-lh) !important; letter-spacing: -.005em !important; }

/* Bodoni M: names, sub-titles and figures */
html:not([data-mode="hand"]) :is(
  .notes strong, .spec:not(.spec--index) td, .generated .gp-section, .generated .gp-section .w, .generated .gp-section .c,
  .gp-choices__q, .gt__title, .gp-product__name, .gp-share__title, .gp-place__name, .gp-media__title
) { font-size: var(--s-m) !important; line-height: var(--s-m-lh) !important; letter-spacing: 0 !important; }

/* Bodoni S, in italics: what someone said */
html:not([data-mode="hand"]) :is(.big, .margin-note, .generated .gp-quote p, .generated .gp-quote p .w, .generated .gp-quote p .c) { font-size: var(--s-s) !important; line-height: var(--s-s-lh) !important; letter-spacing: 0 !important; }
/* in the conversation everything keeps one edge: titles, sections and quotes start on the left like the text */
.generated .gp__item :is(.gp-section, .gp-quote, .gp-quote p, .gp-quote cite, .gp-choices__q) { text-align: left !important; margin-inline: 0 !important; }
/* the closing quote mark stays with the last word */
.generated .gp-quote .caret { display: none; }
.generated .gp-quote p { text-wrap: pretty; }

/* ═════════════ THE MIND, ON A GRID ═════════════
   Explore his mind is a page to read, not a conversation. One invisible grid, two columns in the golden ratio
   (1 : 1.618), every space a Fibonacci step, every title on the same left edge.
   Five text styles and no more:
     1 Display   Bodoni 55, the greetings
     2 Title     Bodoni 34, one per sheet
     3 Accent    Bodoni 21 italic, quotes, names, figures
     4 Body      typewriter 13 on 21, to read
     5 Label     typewriter 11 in capitals, everything that labels
   The only thing written by hand is the signature at the end. */
:root {
  --f1: 8px; --f2: 13px; --f3: 21px; --f4: 34px; --f5: 55px; --f6: 89px; --f7: 144px;
  --grid: 55rem;                         /* 880px: 336 + 34 + 510 */
  --cols: minmax(0, 1fr) minmax(0, 1.618fr);
  --t-read: 13px;  --t-read-lh: 1.618;
  --t-small: 11px; --t-small-lh: 1.618;
  --t-caps: .12em;
  --s-xl: clamp(34px, 2rem + 2.4vw, 55px); --s-xl-lh: 1.05;
  --s-l: clamp(26px, 1.4rem + 1vw, 34px);  --s-l-lh: 1.12;
  --s-m: 21px; --s-m-lh: 1.3;
  --s-s: 21px; --s-s-lh: 1.3;
}
/* the accent is one style: Bodoni 21 in italics, for quotes, names and figures alike */
html :is(.notes strong, .spec:not(.spec--index) td, .big, .margin-note, .generated .gp-section, .gp-product__name, .gp-share__title, .gp-place__name, .gp-media__title, .gt__title, .gp-choices__q, .generated .gp-quote p) { font-style: italic; }
html .notes strong { font-family: var(--serif); text-decoration: none; }

/* the reading page, without the conversation */
body:not(.is-agent) .composer, body:not(.is-agent) .fade-bottom, .progress { display: none !important; }
.slash, .doodle, .margin-note::before { display: none !important; }

/* ── the header: name, index, talk, language, contact, on one line ── */
html body .field__bar {
  position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: var(--cols); align-items: center;
  max-width: var(--grid); margin: 0 auto; padding: var(--f3) 0; column-gap: var(--f4); background: #fff;
}
html body .field__bar .field__nav { grid-column: 2; display: flex; gap: var(--f3); justify-content: flex-start; flex-wrap: wrap; }
html body .field__bar .field__contact { display: none; }
.field__nav .is-current { color: var(--ink) !important; text-decoration: underline; text-underline-offset: 4px; }
.field__nav [data-lang] { color: var(--pencil, #8C8A84); }

/* ── the opening: who he is, on the same two columns ── */
html body .field { min-height: 0; padding: 0 var(--f3); overflow: visible; }
html body .field__about {
  display: grid !important; grid-template-columns: var(--cols); column-gap: var(--f4);
  max-width: var(--grid); margin: 0 auto; padding: var(--f6) 0 var(--f5); text-align: left;
}
html body .field__about > * { grid-column: 2; max-width: none; margin: 0 0 var(--f3) !important; text-align: left !important; opacity: 1; transform: none; }
html body .field__about .field__dear { margin-bottom: var(--f3) !important; font-style: normal; }
html body .field__about .field__belief { margin-bottom: var(--f5) !important; text-wrap: balance; }
html body .field__about .field__roles-title,
html body .field__about .field__roles { grid-column: 1; }
html body .field__about .field__roles-title { grid-row: 1; align-self: start; margin-top: var(--f2) !important; }
html body .field__about .field__roles { grid-row: 2 / span 4; align-self: start; margin: 0 !important; padding: 0; }
html body .field__about .field__roles li { margin: 0 0 var(--f1); }
html body .field__carousel { max-width: var(--grid); margin: 0 auto var(--f6); opacity: 1; transform: none; }
html body .field__hint { display: none; }

/* ── the letter: each sheet is the same two columns ── */
html body .letter { padding: 0 var(--f3) var(--f6); }
html body .letter .sheet {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--f4); align-content: start;
  max-width: var(--grid); margin: 0 auto; padding: var(--f6) 0; border-top: 1px solid var(--rule);
}
html body .letter .sheet--first { border-top: 0; padding-top: var(--f5); }
html body .letter .sheet::after { display: none; }
html body .letter .sheet > * { grid-column: 2; max-width: none !important; margin: 0 0 var(--f3) !important; float: none !important; transform: none !important; }
html body .letter .sheet > * + :is(h2, .spec, .photo-grid, .spread, .notes, .press, .contents, .signoff, figure) { margin-top: var(--f4) !important; }

/* left column: the sheet's card, held while the sheet is read */
html body .letter .sheet > .docbox {
  grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; top: var(--f6);
  display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 !important; border: 0; padding: 0;
}
html body .letter .docbox > div, html body .letter .docbox > div + div {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--f2); align-items: baseline;
  padding: var(--f1) 0; border: 0; border-top: 1px solid var(--hairline);
}
html body .letter .docbox > div:first-child { border-top: 1px solid var(--ink); }
html body .letter .docbox dt::before { display: none; }
html body .letter .docbox dt { color: var(--pencil); }
html body .letter .docbox dd { margin: 0; color: var(--ink); }

/* titles: one edge, one size, one rhythm */
html body .letter .sheet > :is(h1, h2) { margin: 0 0 var(--f4) !important; text-align: left; text-wrap: balance; }
html body .letter .salutation { font-style: normal; }
html body .letter .lead { margin-top: 0 !important; }
html body .letter .sheet > .big { margin: var(--f4) 0 !important; text-wrap: pretty; }

/* notes in the margin become a label line, ruled on the left */
html body .letter .margin-note {
  font-family: var(--type) !important; font-style: normal !important; color: var(--pencil) !important; text-align: left !important;
  font-size: var(--t-small) !important; line-height: var(--t-small-lh) !important; letter-spacing: var(--t-caps) !important; text-transform: uppercase;
  padding-left: var(--f2); border-left: 1px solid var(--ink); width: auto; max-width: none !important;
}

/* photographs: flat, square to the grid, no tilt, the caption as a label underneath */
html body .letter .photo {
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0; background: none; box-shadow: none !important; border-radius: 0;
}
html body .letter .photo img { border-radius: 0; }
html body .letter .photo--small, html body .letter .photo--small-h { width: 61.8% !important; }
html body .letter .photo figcaption {
  font-family: var(--type); color: var(--pencil); text-align: left; padding: var(--f1) 0 0;
  text-transform: uppercase; letter-spacing: var(--t-caps) !important;
}
html body .letter .spread { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f3); }
html body .letter .spread .photo, html body .letter .spread .photo:nth-child(2) { width: 100% !important; margin: 0 !important; }
html body .letter .spread img, html body .letter .photo-grid img { aspect-ratio: 1 / 1.618; object-fit: cover; height: auto; }
/* groups of photographs run across both columns */
html body .letter .sheet > .photo-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--f3); }
html body .letter .sheet > .photo-grid--two { grid-template-columns: repeat(2, 1fr); }
html body .letter .sheet > .photo-grid--two img { aspect-ratio: 1.618 / 1; }
html body .letter .sheet > .photo-grid--four { grid-template-columns: repeat(4, 1fr); }
html body .letter .photo-grid .photo { margin: 0 !important; }
html body .letter .photo__actions { display: none; }

/* tables, lists and the index */
html body .letter .spec { margin: var(--f4) 0 !important; border-top: 1px solid var(--ink); }
html body .letter .spec th, html body .letter .spec td { padding: var(--f1) var(--f2) var(--f1) 0; border-bottom: 1px solid var(--hairline); }
html body .letter .notes { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
html body .letter .notes li { display: grid; gap: var(--f1); padding: var(--f2) 0; border-bottom: 1px solid var(--hairline); }
html body .letter .press { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
html body .letter .press li { padding: var(--f1) 0; border-bottom: 1px solid var(--hairline); }
html body .letter .contents { border-top: 1px solid var(--ink); padding-top: var(--f2); }
html body .letter .contents__title { font-family: var(--type); transform: none; }
html body .letter .contents ol { columns: 2; column-gap: var(--f4); padding-left: var(--f3); }

/* the end: everything typed, and the signature, the one thing by hand */
html body .letter .signoff { text-align: left; padding: 0; margin: var(--f5) 0 0 !important; }
html body .letter .signoff .closing { font-family: var(--serif) !important; font-style: italic; color: var(--ink); font-size: var(--s-m) !important; line-height: var(--s-m-lh) !important; margin: 0 0 var(--f3) !important; }

/* the colophon on the same grid */
html body .colophon { max-width: var(--grid); text-align: left; padding: 0 var(--f3) var(--f6); }
html body .colophon .titleblock { max-width: none; margin: 0 0 var(--f4); }
html body .colophon .tools { justify-content: flex-start; }

/* ── phones and narrow windows: one column, the card above the title ── */
@media (max-width: 760px) {
  html body .field__bar { grid-template-columns: 1fr; row-gap: var(--f1); padding: var(--f2) var(--f3); }
  html body .field__bar .field__nav { grid-column: 1; gap: var(--f2); }
  html body .field__about, html body .letter .sheet { grid-template-columns: minmax(0, 1fr); }
  html body .field__about { padding: var(--f5) 0 var(--f4); }
  html body .field__about > *, html body .field__about .field__roles-title, html body .field__about .field__roles { grid-column: 1; grid-row: auto; }
  html body .letter .sheet > * { grid-column: 1; }
  html body .letter .sheet { padding: var(--f5) 0; }
  html body .letter .sheet > .docbox { grid-row: auto; position: static; margin: 0 0 var(--f4) !important; }
  html body .letter .sheet > .photo-grid, html body .letter .sheet > .photo-grid--four { grid-template-columns: 1fr 1fr; }
  html body .letter .photo--small, html body .letter .photo--small-h { width: 100% !important; }
  html body .letter .contents ol { columns: 1; }
}
html body .field__nav .field__lang { margin-left: auto; display: inline-flex; gap: var(--f1); }
html body .field__nav .field__lang a { color: var(--pencil); }
html body .field__nav .field__lang a.is-current { color: var(--ink); }
html body .field__bar { left: auto; right: auto; width: 100%; font-size: var(--t-small); letter-spacing: var(--t-caps); }
html body > .field__bar { padding-left: max(var(--f3), calc((100% - var(--grid)) / 2)); padding-right: max(var(--f3), calc((100% - var(--grid)) / 2)); max-width: none; }
.is-agent > .field__bar { display: none !important; }
/* the card on the left holds still, so nothing crosses into its column */
html body .letter .sheet > .photo-grid { grid-column: 2; }
html body .letter .sheet, html body .field, #contents, .entry { scroll-margin-top: var(--f5); }
html body .letter .sheet > .lead { text-align: left !important; }
html body .letter .sheet > figure.photo { justify-self: start; margin-left: 0 !important; }
html body .field__nav :is(a, button) { color: var(--ink) !important; }
html body .field__nav .field__lang a:not(.is-current) { color: var(--pencil) !important; }
html body .field__about .field__roles-title {
  font-size: var(--t-small) !important; line-height: var(--t-small-lh) !important; letter-spacing: var(--t-caps) !important; text-transform: uppercase; color: var(--pencil);
  padding-top: var(--f1); border-top: 1px solid var(--ink);
}
/* the sheet's card reads like a title block: label on the left, value on the right */
html body .letter .sheet > .docbox dt, html body .letter .sheet > .docbox .docbox__wide { display: grid; }
html body .letter .sheet > .docbox dt { display: block; }
html body .letter .sheet, html body .field__about { justify-items: stretch; }
html body .letter .sheet > :not(figure) { width: auto !important; text-align: left !important; }
html body .letter .sheet, html body .letter .sheet > * { opacity: 1 !important; }
/* margin notes are asides: the accent style, ruled on the left */
html body .letter .sheet > .margin-note {
  font-family: var(--serif) !important; font-style: italic !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: var(--s-s) !important; line-height: var(--s-s-lh) !important; color: var(--ink-soft) !important;
}
html body strong { text-decoration: none; }
/* an older rule centred every child of a sheet; on the grid, everything starts at the column's edge */
html body .letter > .sheet:nth-of-type(n) > * { margin-left: 0 !important; margin-right: 0 !important; }
html body .letter .sheet .signoff, html body .letter .sheet .signoff p { text-align: left !important; }
html body .letter .sheet .signoff .signoff__verse { margin-left: 0 !important; }
html body .colophon {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--f4); max-width: var(--grid);
  margin: 0 auto; padding: var(--f5) 0 var(--f6); border-top: 1px solid var(--rule); box-sizing: content-box;
}
html body .colophon > * { grid-column: 2; margin: 0 0 var(--f2); text-align: left; }
html body .colophon > .titleblock { grid-column: 1 / -1; margin-bottom: var(--f4); }
html body .colophon .tools { justify-content: flex-start; margin: 0 0 var(--f4); }
@media (max-width: 760px) {
  html body .colophon { grid-template-columns: minmax(0, 1fr); padding: var(--f5) var(--f3) var(--f6); box-sizing: border-box; }
  html body .colophon > * { grid-column: 1; }
}
@media (min-width: 761px) and (max-width: 921px) { html body .colophon { padding-left: var(--f3); padding-right: var(--f3); } }
@media (max-width: 760px) {
  html body .letter .sheet > .photo-grid { grid-column: 1; }
  html body .letter .sheet > .docbox { margin-bottom: var(--f4) !important; }
}

/* ONE LINE. Every rule on the page is the same: one pixel, one soft grey. */
:root { --line: #E1DED8; }
html body :is(.letter, .field, .field__bar, .colophon) :is(.sheet, .docbox, .docbox > div, .spec, .spec th, .spec td, .spec thead th, .notes, .notes li, .press, .press li, .contents, .margin-note, .field__roles-title, .titleblock, .titleblock > div, .entry) {
  border-color: var(--line) !important;
}
html body .letter .sheet { border-top: 1px solid var(--line) !important; }
html body .letter .sheet--first { border-top: 0 !important; }
html body .letter .docbox > div, html body .letter .docbox > div:first-child { border-top: 1px solid var(--line) !important; }
html body .letter :is(.spec, .notes, .press, .contents) { border-top: 1px solid var(--line) !important; }
html body .letter .spec :is(th, td) { border-bottom: 1px solid var(--line) !important; }
html body .letter .spec tbody tr:last-child > * { border-bottom: 1px solid var(--line) !important; }
html body .letter :is(.notes li, .press li) { border-bottom: 1px solid var(--line) !important; }
html body .letter .margin-note { border-left: 1px solid var(--line) !important; }
html body .field__about .field__roles-title { border-top: 1px solid var(--line) !important; }
html body .colophon { border-top: 1px solid var(--line) !important; }
html body .colophon .titleblock, html body .colophon .titleblock > div { border-color: var(--line) !important; }
html body .letter :is(.photo-grid, .photo) { border-color: var(--line) !important; }

/* TITLES IN INTER TIGHT. A Swiss grotesque for every title, greeting, quote and figure; the typewriter stays for reading.
   Display 55 and Title 34 in 500 with tight tracking, Accent 21 in italic 400. */
@font-face { font-family: 'Inter Tight'; src: url('/fonts/inter-tight.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('/fonts/inter-tight-italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
:root { --serif: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; }
html body :is(.salutation, .field__dear, .intro__lead, .intro__lead .w) { font-weight: 500 !important; letter-spacing: -.03em !important; font-variation-settings: normal; }
html body :is(.sheet h2, .field__belief, .generated .gp-title, .generated .gp-title .w, .gp-fact__value) { font-weight: 500 !important; letter-spacing: -.02em !important; font-variation-settings: normal; }
html body :is(.big, .margin-note, .notes strong, .spec:not(.spec--index) td, .signoff .closing, .generated .gp-section, .gp-product__name, .gp-share__title, .gp-place__name, .gp-media__title, .gt__title, .gp-choices__q, .generated .gp-quote p) { font-weight: 400 !important; letter-spacing: -.01em !important; font-variation-settings: normal; }

/* THE LIBRARY. Papers in a list: cover, code, title, what it is. One line between each, like every other line. */
html body .letter .lib { list-style: none; margin: var(--f4) 0 !important; padding: 0; border-top: 1px solid var(--line); }
html body .letter .lib__group {
  padding: var(--f4) 0 var(--f1); color: var(--pencil);
  font-size: var(--t-small); line-height: var(--t-small-lh); letter-spacing: var(--t-caps); text-transform: uppercase;
}
html body .letter .lib__item {
  display: grid; grid-template-columns: var(--f6) minmax(0, 1fr); column-gap: var(--f3); row-gap: 0;
  padding: var(--f2) 0; border-bottom: 1px solid var(--line);
}
html body .letter .lib__cover { grid-row: 1 / span 4; display: block; }
html body .letter .lib__cover img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
html body .letter .lib__code, html body .letter .lib__meta {
  color: var(--pencil); font-size: var(--t-small); line-height: var(--t-small-lh); letter-spacing: var(--t-caps); text-transform: uppercase;
}
html body .letter .lib__title {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--s-m); line-height: var(--s-m-lh); letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; margin: var(--f1) 0 2px;
}
@media (hover: hover) and (pointer: fine) { html body .letter .lib__title:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } }
html body .letter .lib__sub { font-size: var(--t-read); line-height: var(--t-read-lh); }
html body .letter .lib__meta { margin-top: var(--f1); }
html body .letter .lib__meta a { color: var(--ink); }
html body .letter .lib__foot { font-size: var(--t-read); }
@media (max-width: 760px) { html body .letter .lib__item { grid-template-columns: var(--f5) minmax(0, 1fr); column-gap: var(--f2); } }