/* ==========================================================================
   Alexis Kimball — site styles
   White ground, black type, five accents used sparingly.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Integral CF Ultra Bold by Connary Fagen is commercial and is not
   included here. Buy the webfont licence, drop the file in
   assets/fonts/, uncomment this block, and it takes over the wordmark
   automatically since it already leads the --round stack.

@font-face {
  font-family: "Integral CF Ultra Bold";
  src: url("../fonts/integralcf-ultrabold.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
*/

/* The two faces the site runs on besides the wordmark. Rubik Mono One
   is the interface voice: the top labels, the menu and the ticker.
   Instrument Serif is the editorial voice: every large title, on every
   page. Both are single weight, so nothing here asks for a bold that
   does not exist. */
@font-face {
  font-family: "Rubik Mono One";
  src: url("../fonts/rubik-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Newsreader carries the titles; Gloock carries the name alone. Manrope
   stays installed as the alternate for either role. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Antic Didone carries the name: the same didone elegance as Gloock but
   far lighter and more slender, which is what takes the stateliness out
   of it. Italiana stays installed as the alternate. */
@font-face {
  font-family: "Antic Didone";
  src: url("../fonts/antic-didone.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Italiana";
  src: url("../fonts/italiana.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Bricolage Grotesque on the interface type, Newsreader on the name. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* A true bold italic cut of Newsreader for the hero name, carried under its
   own family name so it cannot disturb the static italic that sets <em> in
   running copy. Variable on weight, optical size pinned to a display value,
   subset to Latin. Without this the name would be a synthetic slant. */
@font-face {
  font-family: "Newsreader Name";
  src: url("../fonts/newsreader-italic-bold.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
/* Unbounded, kept behind Rubik Mono in the stack. */
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* General Sans, kept behind Unbounded in the stack. */
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Instrument Sans, the neo grotesque behind the top labels and the menu.
   Standing in for the Acne Studios logotype, which is a bespoke cut and
   not licensable. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gluten";
  src: url("../fonts/gluten.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rounded Black";
  src: url("../fonts/rounded-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins Black";
  src: url("../fonts/poppins-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Expanded";
  src: url("../fonts/archivo-expanded.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Michroma";
  src: url("../fonts/michroma.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Architects Daughter";
  src: url("../fonts/architects-daughter.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fdfaf1;
  --bg-2: #f5f0e2;
  --ink: #15171a;
  --ink-soft: #6b6a66;
  --rule: rgba(21, 23, 26, 0.15);
  --grid: rgba(20, 18, 14, 0.08);

  --terracotta: #c97a4a; /* a warm rust, the one genuinely new colour in
                             the set — sits between the pink and the citron
                             on the wheel, so it does not fight either */
  --berry: #a8456b;       /* a deeper, richer rose than pink-deep, for the
                             same dots and numbers that used to carry the
                             old neon red and fuchsia */
  --red: var(--terracotta);
  --fuchsia: var(--berry);
  /* One blue for every mark on the site: links, the current page
     underline, the handwriting, the circled word, the dots. */
  --klein: #2f7bd0;
  --klein-ink: #2b6cb5;    /* the same blue a step down, only for inline
                              body links, which need 4.5:1 on cream */
  --indigo: #4c44cf;       /* softer and more violet than Klein, for the
                              sessions band. White type sits at 6.9:1 */
  --klein-deep: #1220a0;   /* the pressed state, still 11.6:1 under white */
  --citron: #b4ae2a;
  --citron-bright: #d9e85a; /* the Rose & Citron spark: dot fills only,
                               never text — too light to read on cream */
  --chartreuse: #dfff00;
  --chartreuse-green: #aeff00;
  --pink-soft: #db7fa0;   /* Light Rose. Reads at 2.7:1 on cream, under the
                             4.5:1 line for body text — accepted here because
                             the only things it colors are the short nav
                             name and the inner-page corner mark, not
                             running text. */
  --pink-deep: #c5658a;    /* the button pressed state, 9.2:1 under black */
  --pink-light: #f8dde4;   /* lightened further at her request, still a paler pink than the name, so the
                              two pinks read as a set rather than a repeat.
                              Black type sits at 13.3:1 on it */
  --pink-light-deep: #e8b0c3; /* the button pressed state, 11.4:1 under black */
  --electric: #a8a5dd;     /* the button hover: a light periwinkle, pale
                              enough to keep the black label at 8.0:1, so
                              only the fill changes when you touch it */
  /* the Gars Gras green: a yellow green with the electricity dialled
     out, so it can hold a whole band without shouting. 14.4:1 under
     black type. */
  --green: #c7d94a;

  /* from Room 6x8: the three that are not already in her set */
  --olive: #788400;
  --lavender: #af69ff;

  /* Commercial faces first: Telegraf, Placard Next, Helvetica Now and
     Pragmatica take over automatically if any of them get installed.
     Anton and Archivo are self-hosted, so something always renders. */
  --serif: "Century Schoolbook", "Source Serif 4", Charter, Georgia, serif;
  /* one face for every large title, on every page */
  --display: "Newsreader", Charter, Georgia, serif;
  --body: "Good Sans", "Helvetica Now Text", "Helvetica Neue", Helvetica, "Archivo", Arial, sans-serif;
  --hand: "Architects Daughter", "Bradley Hand", cursive;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bold: "Integral CF", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wide: "Horizon", "Integral CF", "Archivo Expanded", "Eurostile", sans-serif;
  --grotesk: "Bricolage Grotesque", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --round: "Integral CF Ultra Bold", "IntegralCF-UltraBold", "Integral CF",
           "Gluten", "Rounded Black", sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --edge: clamp(1rem, 5vw, 5.2vw);
  --measure: 64ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--klein-ink); }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--klein); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bg);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- shared type ---------- */

.mono {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--klein);
}
/* The footer stays neutral: copyright and licence text, not a label. */
.foot.mono { color: var(--ink-soft); }

.hand {
  font-family: var(--hand);
  color: var(--klein);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.blocked { position: relative; }
.blocked::after {
  content: ""; position: absolute; inset: 0; background: var(--fuchsia);
  opacity: 0.9; pointer-events: none;
}

/* scribble ring around a word */
.mark { position: relative; display: inline-block; }
/* Sized against Rubik Mono. Its caps sit low and fill the line box, so
   the ring rides higher and tighter than it did around the serif. */
.mark svg {
  position: absolute; left: -8%; top: -6%; width: 116%; height: 112%;
  color: var(--klein); pointer-events: none; overflow: visible;
}
.mark svg path {
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}

/* ---------- layout ---------- */

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; margin-inline: auto; }

section { padding-block: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--rule); }
section:first-of-type { border-top: none; }

h1, h2, h3 { text-wrap: balance; }

/* Archivo Semibold carries every title, in sentence case. Its letters
   are narrower than a serif at the same size, so the tracking comes in
   a little to keep the lines from feeling loose. */
.display {
  font-family: var(--display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.14;
  margin: 0;
}

h1.display { font-size: clamp(1.75rem, 4.4vw, 3rem); }
h2.display { font-size: clamp(1.5rem, 3.6vw, 2.4rem); }

/* The greeting that opens the About sections. Set in EB Garamond to match
   the hero headline, and a step larger than the copy beneath it so it reads
   as an introduction rather than a section label. */
.greet {
  font-family: "EB Garamond", Charter, Georgia, serif;
  font-weight: 500; line-height: 1.1;
  margin: 0 0 clamp(1rem, 2.4vw, 1.5rem);
}
.greet em { color: var(--pink-soft); font-style: italic; }

.sechead {
  display: flex; align-items: baseline; gap: 0.85rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
/* The one phrase that names what the whole practice holds, marked like
   a highlighter pass rather than a designed block: it should look found,
   not placed. Ink stays ink; only the ground behind it changes. */
.hl-citron {
  background: var(--citron-bright);
  padding: 0.04em 0.18em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.dot.k { background: var(--klein); }
.dot.f { background: var(--fuchsia); }
.dot.r { background: var(--red); }
.dot.c { background: var(--citron-bright); }

/* ---------- nav ---------- */

/* ---------- slide in header ----------
   Pinch keeps a fixed bar parked just above the viewport and slides it
   down once you scroll: small wordmark left, menu right. */

.nav {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.pc-bar {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.75rem var(--edge);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-105%);
  transition: transform 260ms ease;
}
.pc-bar.in { transform: translateY(0); }
/* Pages without the hero carry the same bar, but it is simply there from
   the top rather than parked above the viewport, so every page has one
   header and it is always this one. */
.pc-bar.static { position: sticky; transform: none; }
/* The name reads as the first item in the menu rather than a separate
   logotype, so it takes the menu's own face and only keeps the pink. */
.pc-bar .mini {
  font-family: var(--grotesk); font-weight: 700; text-transform: uppercase;
  font-size: clamp(0.62rem, 1.15vw, 0.82rem); letter-spacing: 0;
  color: var(--pink-soft); text-decoration: none; line-height: 1;
  margin-right: clamp(0.4rem, 1.5vw, 1.2rem);
}
.pc-bar nav { display: flex; gap: clamp(0.7rem, 2vw, 1.6rem); flex-wrap: wrap; }
.pc-bar nav a {
  font-family: var(--grotesk); font-weight: 700; text-transform: uppercase;
  font-size: clamp(0.62rem, 1.15vw, 0.82rem); letter-spacing: 0;
  color: var(--ink); text-decoration: none;
}
/* Hovering a menu item underlines it in blue, the same mark the current
   page carries. */
.pc-bar nav { align-items: center; }
.pc-bar nav a {
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color 120ms, background-color 120ms, color 120ms;
}
.pc-bar nav a:hover,
.pc-bar nav a:focus-visible,
.pc-bar nav a[aria-current="page"] { border-bottom-color: var(--klein); }
@media (prefers-reduced-motion: reduce) { .pc-bar { transition: none; } }
.wordmark {
  font-family: var(--body); font-size: 1.05rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
/* The corner mark on the inner pages is the same pink Alexis the fixed
   bar uses on the homepage, so the signature is identical everywhere. */
.wordmark.mini-pink {
  font-family: var(--round); font-weight: 800;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  letter-spacing: -0.03em; line-height: 1;
  color: var(--pink-soft);
}
.navlinks { display: flex; gap: clamp(0.9rem, 2.5vw, 1.9rem); flex-wrap: wrap; }
.navlinks a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.navlinks a:hover,
.navlinks a:focus-visible { border-bottom-color: var(--klein); }
.navlinks a[aria-current="page"] { border-bottom-color: var(--klein); }

/* ---------- buttons ----------
   The face of the button is the page itself, so at rest only the black
   ring and the label are there. Touching it floods the pill light
   periwinkle while the label stays black. The ring stays because a
   button the exact colour of the page with no edge is a button nobody
   can find. */

.btn {
  display: inline-block;
  border: none; border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-size: 0.94rem; text-decoration: none; color: var(--ink);
  background: var(--pink-light); cursor: pointer; font-family: inherit;
  transition: background-color 120ms, color 120ms;
}
.btn:hover,
.btn:focus-visible,
.btn:active {
  background: var(--pink-light-deep); color: var(--ink);
}
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.btn-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* ---------- top labels ----------
   Three words across the full width above the menu, set in Instrument
   Sans: the tight neo grotesque fit of the Acne Studios mark rather
   than the wide geometric that was here before. */

.pc-labels {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: clamp(1rem, 2.6vw, 1.9rem) var(--edge) clamp(0.4rem, 1vw, 0.7rem);
}
.pc-label {
  font-family: var(--grotesk); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(0.85rem, 1.8vw, 1.3rem);
  color: var(--ink); margin: 0;
}
.pc-labels .pc-label {
  font-family: var(--grotesk); font-weight: 700;
  letter-spacing: 0;
  font-size: clamp(0.78rem, 1.65vw, 1.3rem);
}

/* ---------- hero ----------
   The wall behind her is cloned wider in the photo file itself (real
   pixels, not a CSS trick), so the frame is genuinely landscape with
   blank wall on the right for the panel to sit over, rather than
   cropping into her to force the shape. Softened with the same light
   wash as before. Below 900px the panel drops beneath the picture. */

section.pc-hero { padding-block: 0; border-top: none; position: relative; }

/* Full bleed: no side margin and no rounded corners, so the photo runs to
   both edges of the viewport instead of sitting in an inset frame. */
.pc-shot { position: relative; margin: 0; overflow: hidden; }
/* The crop only has room to move vertically on its own: width already
   matches the box exactly, so object-position's x axis has no slack to
   pan with. A small extra scale creates that slack, and the translate
   pans across it to bring her a little right of centre. */
.pc-shot img {
  width: 100%; height: auto; aspect-ratio: 2260 / 940;
  object-fit: cover; object-position: 50% 68%;
  transform: scale(1.1) translateX(4.5%);
  filter: saturate(0.88) brightness(1.05) contrast(0.96);
}
.pc-shot::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bg); opacity: 0.14; pointer-events: none;
}

/* Horizontal padding matters here: below 1150px the panel sits in normal
   flow rather than absolutely positioned, so without it the text runs
   flush to the screen edge with no margin at all. */
.hero-panel { padding: clamp(1.25rem, 3vw, 2rem) var(--edge) 0; }
/* The name keeps the serif italic even though the titles are a sans now:
   a signature wants a written quality that a geometric sans cannot give. */
/* Gloock: a didone, so heavy stems against hairline thins. The heavy
   stems are the point here, because this sits in Light Rose over a pale
   photograph, where a fine face would wash out. */
/* The hero swaps the two serifs: Newsreader, heavier in the stem, carries
   the name so the pink holds against the photograph, and EB Garamond,
   lighter and more open, carries the headline so four lines of it do not
   read as a block. Homepage only for now. */
.hero-panel .hero-name {
  font-family: "Newsreader Name", "Newsreader", Charter, Georgia, serif;
  font-weight: 600; font-style: italic; color: var(--pink-soft);
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1; letter-spacing: 0.005em;
  margin: 0 0 0.5rem;
}
.hero-panel .eyebrow {
  font-family: var(--grotesk); text-transform: uppercase;
  font-size: clamp(0.6rem, 1.05vw, 0.72rem); letter-spacing: 0.04em;
  color: var(--ink-soft); margin: 0 0 0.9rem;
}
.hero-panel .eyebrow em { font-style: italic; }
/* EB Garamond has a smaller x-height than Newsreader, so it is set a step
   larger to keep the same optical size in the panel. */
.hero-panel h1.display {
  font-family: "EB Garamond", Charter, Georgia, serif; font-weight: 500;
  margin: 0; text-transform: none; letter-spacing: -0.005em;
  font-size: clamp(1.55rem, 3.2vw, 2.15rem); line-height: 1.22;
}
/* The one phrase in the headline that names the whole practice, set apart
   in italic and the name's own pink so the first colour a visitor sees is
   the same one that used to sit over the photograph. */
.hero-panel h1.display em {
  font-style: italic; color: var(--pink-soft);
}
/* Two steps down from the headline: who the work is for, then the licence
   line. Both are letterspaced uppercase so they read as label rather than
   prose, and so they do not compete with the serif above them. Open line
   height keeps the tracking from closing the lines up. */
.hero-panel .hero-for {
  font-family: var(--grotesk); text-transform: uppercase;
  font-size: clamp(0.62rem, 1.1vw, 0.76rem);
  letter-spacing: 0.085em; line-height: 1.75;
  color: var(--ink); margin: clamp(1rem, 2.2vw, 1.4rem) 0 0;
  max-width: 30rem;
}
.hero-panel .hero-creds {
  font-family: var(--grotesk); text-transform: uppercase;
  font-size: clamp(0.55rem, 0.95vw, 0.66rem);
  letter-spacing: 0.075em; line-height: 1.7;
  color: var(--ink-soft); margin: clamp(0.7rem, 1.6vw, 1rem) 0 0;
}
.hero-panel .btn-row { margin-top: clamp(1.1rem, 2.4vw, 1.6rem); }

/* The overlay only holds once the photograph is tall enough to contain the
   panel, so this stays as low as the panel's own (now tighter) height
   allows before it would spill past the photo's bottom edge. */
@media (min-width: 900px) {
  .hero-panel {
    position: absolute; z-index: 2;
    right: clamp(1.1rem, 3.6vw, 2.75rem);
    top: 50%; transform: translateY(-50%);
    width: min(58%, 640px);
    padding: 0;
  }
}

/* ---------- statement ---------- */

/* The statement takes the photograph's own margins rather than the
   narrower page wrap, so the sentence runs the full width underneath it
   instead of stacking up in a column on the left. */
/* The rule was suppressed while this sat directly beneath the photograph.
   It now follows the About section, so it takes the standard divider. */
.pc-say { border-top: 1px solid var(--rule); }
.pc-say .wrap {
  max-width: none; padding-inline: var(--edge);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
}
.pc-say p {
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 2.1rem); line-height: 1.22;
  letter-spacing: -0.025em; max-width: none; margin: 0;
  text-wrap: balance;
}
/* EB Garamond has a noticeably smaller x-height than the sans around it,
   so it needs to run larger just to read as the same size. */
.pc-say p em { font-family: "EB Garamond", Charter, Georgia, serif; font-style: italic; font-size: 1.2em; }
.pc-say .strong {
  display: block; font-family: var(--bold); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 3.6vw, 2.9rem); line-height: 1.04; margin: 0 0 0.6rem;
}
/* Statement, then the supporting line, then the buttons: one centred
   column running down the middle of the photograph's width. */
.pc-say .foot-row { margin-top: clamp(0.85rem, 2vw, 1.4rem); }
.pc-say .small {
  font-size: clamp(0.98rem, 1.5vw, 1.15rem); line-height: 1.5; letter-spacing: 0;
  color: var(--ink-soft); max-width: 66ch; margin: 0 auto;
}
.pc-say .btn-row {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  justify-content: center;
}

/* ---------- the ticker ----------
   A full width band under the photograph that runs the phrase sideways.
   The track holds two identical halves and travels exactly half its own
   width, so the loop has no seam. Decorative: the phrase is already in
   the h1 and the top labels, so it is hidden from screen readers, and
   it stops dead for anyone who asks for reduced motion. */

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(0.6rem, 1.6vw, 1rem);
}
.ticker-track {
  display: flex; width: max-content;
  animation: ticker 34s linear infinite;
}
.ticker-track span {
  font-family: var(--grotesk); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(0.95rem, 2.2vw, 1.6rem);
  white-space: nowrap;
}
/* A plain dot between passes, set in the interface face rather than the
   wordmark, so it reads as punctuation rather than a signature mark. */
.ticker-track span::after {
  content: "\2022";
  font-family: var(--grotesk); font-weight: 700;
  color: var(--pink-soft);
  padding-inline: 0.9em;
}

@keyframes ticker { to { transform: translateX(-50%); } }

/* The ticker sits under the photograph and already closes itself with a
   rule, so the section that follows drops its own or the two stack up. */
/* Centred in the gap: the space above matches the section padding that
   follows below it, so the band sits between the two rather than hanging
   off the bottom of the photograph. */
.ticker { margin-top: clamp(2.75rem, 6.5vw, 4.5rem); }
.ticker + section { border-top: none; }

.ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---------- a full width colour band ---------- */

.pc-band { border-top: 1px solid var(--rule); }
.pc-band .wrap { padding-block: clamp(2.5rem, 7vw, 5rem); }
.pc-band blockquote {
  margin: 0; max-width: 30ch;
  font-family: var(--display); text-transform: none; font-weight: 500; letter-spacing: -0.005em;
  /* same leading as .display so the highlight lands identically */
  font-size: clamp(1.3rem, 3.4vw, 2.35rem); line-height: 1.2;
}

/* ---------- portrait band ---------- */

.pc-por { border-top: 1px solid var(--rule); }
.pc-por .wrap { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pc-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
/* Photo takes the second column, text the first, so the portrait sits on
   the right. */
@media (min-width: 820px) {
  .pc-grid { grid-template-columns: 1.1fr 0.9fr; }
  .pc-grid .photo-frame { order: 2; }
  .pc-grid .pc-text { order: 1; }
}
.pc-por img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; }
/* A childhood snapshot rather than the studio portrait, so it sits
   smaller in the column than the full bleed image it replaced. Cut to an
   oval rather than a rectangle: it reads as a keepsake, a locket or a
   framed photograph on a shelf, instead of a stock image in a box. Set
   upright rather than tilted. */
.pc-por .photo-frame {
  position: relative;
  max-width: min(100%, 340px); margin-inline: auto;
}
.pc-por img.small-photo {
  position: relative; z-index: 1;
  object-position: 36% 34%;
  border-radius: 50%;
}
.pc-por h2 { margin-bottom: 1rem; }

/* ---------- three-column intro ---------- */

.intro { text-align: center; }
.intro h2 {
  font-family: var(--body); font-weight: 500;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem); line-height: 1.5;
  letter-spacing: 0.09em; text-transform: uppercase;
  margin: 1.25rem auto 0.6rem; max-width: 26ch;
}
.byline { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.cols {
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  text-align: left; max-width: 940px; margin-inline: auto;
}
@media (min-width: 780px) { .cols { grid-template-columns: 1fr 1fr 1fr; align-items: start; } }
.cols p { font-size: 0.84rem; line-height: 1.7; text-align: justify; hyphens: auto; margin: 0 0 0.9rem; }
.cols p:last-child { margin-bottom: 0; }
.cols figure { margin: 0; }
.cols figure img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.cols figcaption { margin-top: 0.5rem; }

/* ---------- the work list ---------- */

.workhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.item { display: grid; gap: 0.4rem 1.75rem; padding-block: 1.6rem; border-top: 1px solid var(--rule); }
/* the section already draws a line above the first item, so it does not
   need one of its own */
.item:first-child { border-top: none; padding-top: 0; }

/* On The Work the four pieces sit directly under the opening lines, so
   the pair reads as one block instead of two stacked sections. */
.sec-intro { padding-bottom: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.sec-pieces { padding-top: clamp(2rem, 5vw, 3.5rem); border-top: none; }
@media (min-width: 720px) { .item { grid-template-columns: 26px 180px minmax(0, 1fr); align-items: start; } }
.item .num { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-soft); padding-top: 0.45rem; }
.item .num.r { color: var(--red); }
.item .num.f { color: var(--fuchsia); }
.item .num.k { color: var(--klein); }
.item .num.c { color: var(--citron); }
.item .term {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); padding-top: 0.45rem;
}
/* The label picks up whatever colour its own number is wearing, so the two
   move together instead of needing a second edit. */
.item .num.r ~ .term { color: var(--red); }
.item .num.f ~ .term { color: var(--fuchsia); }
.item .num.k ~ .term { color: var(--klein); }
.item .num.c ~ .term { color: var(--citron); }
.item .said {
  font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.34;
  letter-spacing: -0.016em; font-weight: 500; margin: 0;
}
.item .expand { margin: 0.7rem 0 0; color: var(--ink-soft); font-size: 0.96rem; max-width: 56ch; }

.swatch { display: inline-block; width: 7px; height: 7px; margin-right: 2px; vertical-align: baseline; }
.swatch.r { background: var(--red); }
.swatch.f { background: var(--fuchsia); }
.swatch.k { background: var(--klein); }
.swatch.c { background: var(--citron); }

/* the poster's frame number takes the vermilion */
.poster-num { color: var(--red); }

/* ---------- pull quote ---------- */

.band { text-align: center; }
.band blockquote {
  margin: 0 auto; max-width: 32ch;
  font-family: var(--display); font-weight: 500; text-transform: none; letter-spacing: -0.005em;
  font-size: clamp(1.3rem, 3.4vw, 2.35rem); line-height: 1.2; letter-spacing: -0.008em;
}
.band .attrib { display: block; margin-top: 1.5rem; }

/* ---------- scrapbook collage ----------
   ONE set of figures. Mobile stacks them; desktop hand-places the same
   elements absolutely. No duplicated markup, so the photographs keep their
   alt text at every width. */

.collage { position: relative; max-width: 840px; margin: clamp(1.25rem, 3vw, 2rem) auto clamp(0.5rem, 1.5vw, 1rem); }

/* The photographs and the story belong together, so the gap between the
   two is pulled in rather than taking the sitewide section spacing. */
.sec-collage { padding-bottom: clamp(0.5rem, 1.5vw, 1rem); }
/* Same fade as the homepage hero photo: a cream wash at low opacity over
   a slightly desaturated image, so the two portraits read as one visual
   language across pages. */
.about-portrait {
  position: relative; max-width: 300px; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
}
.about-portrait img {
  width: 100%; height: auto; border-radius: 10px;
  filter: saturate(0.88) brightness(1.05) contrast(0.96);
}
.about-portrait::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  background: var(--bg); opacity: 0.14; pointer-events: none;
}
/* Smaller and cut to an oval, echoing the childhood photos in the About
   collage rather than the full rectangular treatment. */
.work-portrait {
  max-width: 340px; margin: 0 auto;
  aspect-ratio: 3/4; border-radius: 50%; overflow: hidden;
}
.work-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; border-radius: 0; }
.work-portrait::after { border-radius: 0; }
/* The Work page intro: text on the left, the same faded portrait on the
   right, so the two long-copy pages share a visual language. */
.intro-grid { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
@media (min-width: 820px) {
  .intro-grid { grid-template-columns: 1.15fr 0.85fr; }
  .intro-grid .about-portrait { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
}
/* The story section balanced two-up: collage on the left, text on the
   right, instead of the collage spanning the full width above the copy.
   Credentials and the buttons still run the full width beneath both. */
.story-grid { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: start; }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: 0.85fr 1.15fr; }
  .story-grid .creds, .story-grid .btn-row { grid-column: 1 / -1; }
}
/* The scrapbook spread was tuned for the full ~840px width of the old
   full-width collage. Half that column, the fixed pixel sizes and percent
   offsets no longer fit, so this column falls back to the same simple
   stacked grid the collage already uses below 880px, at any width. */
.story-grid .collage { max-width: none; margin: 0; }
.story-grid .collage-set {
  display: grid !important; grid-template-columns: 1fr 1fr;
  height: auto !important;
}
.story-grid .collage-set .snap {
  position: relative !important; max-width: none !important;
  width: auto !important; height: auto !important;
  left: auto !important; top: auto !important; margin: 0 !important;
}
.story-grid .collage-set .snap img { aspect-ratio: 4/5 !important; height: auto !important; }
.story-grid .collage-set .snap figcaption { right: 10px !important; }
/* Centred to match the collage above it, rather than the ragged left edge
   the rest of the site uses for running prose. Shared between the intro
   (photo, greeting, lede) and the story section that follows it, so the
   two read as one continuous page split by the section rule between them. */
.sec-bio, .sec-story { padding-top: clamp(1rem, 2.5vw, 1.75rem); text-align: center; }
.sec-bio .sechead, .sec-story .sechead { justify-content: center; }
/* Wider than the shared .narrow column: the margins were reading as too
   tight for a page that is mostly running prose. */
.sec-story .wrap.narrow { max-width: 1180px; }
/* The intro uses the grid (text column, photo column) instead, so its
   text is left aligned within its own column like The Work page intro. */
.sec-bio .prose { text-align: left; }
.sec-story .prose { text-align: left; max-width: none; }
.sec-story .creds dl { text-align: left; }
.sec-story .btn-row { justify-content: center; }

.collage-set { display: grid; gap: clamp(1.5rem, 5vw, 2.25rem); }

.snap {
  position: relative; background: #fff; margin: 0;
  padding: 9px 9px 58px;
  box-shadow: 0 2px 14px rgba(11, 11, 12, 0.2);
  width: 100%; max-width: 330px; margin-inline: auto;
}
.snap img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.snap figcaption {
  position: absolute; left: 10px; right: 10px; bottom: 9px;
  font-family: var(--hand); font-size: 0.74rem; color: var(--klein);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25;
}
.collage-set .snap:nth-child(1) { transform: rotate(-2deg); }
.collage-set .snap:nth-child(2) { transform: rotate(1.5deg); }
.collage-set .snap:nth-child(3) { transform: rotate(-1deg); }
.collage-set .snap:nth-child(4) { transform: rotate(2deg); }
.collage-set .snap:nth-child(5) { transform: rotate(-1.5deg); }

@media (min-width: 880px) {
  .collage-set { display: block; height: 630px; }
  .collage-set .snap { position: absolute; max-width: none; margin: 0; }
  .collage-set .snap img { aspect-ratio: auto; height: 100%; }
  .collage-set .snap figcaption { right: auto; }

  /* Three even columns: two cards on the left, one centred in the middle,
     two on the right. Nothing overlaps, so every caption strip stays
     readable and no quarter of the block is left empty. */
  .collage-set .snap:nth-child(1) { width: 220px; height: 275px; left: 1%;  top: 20px;  transform: rotate(-2deg);   z-index: 3; }
  .collage-set .snap:nth-child(4) { width: 214px; height: 276px; left: 1%;  top: 330px; transform: rotate(2.5deg);  z-index: 4; }
  .collage-set .snap:nth-child(2) { width: 222px; height: 282px; left: 35%; top: 155px; transform: rotate(-4deg);   z-index: 6; }
  .collage-set .snap:nth-child(3) { width: 232px; height: 192px; left: 69%; top: 22px;  transform: rotate(3.5deg);  z-index: 2; }
  .collage-set .snap:nth-child(5) { width: 200px; height: 250px; left: 71%; top: 272px; transform: rotate(-2.5deg); z-index: 5; }

  .collage-set .snap:nth-child(1) img { object-position: 45% 50%; }
  .collage-set .snap:nth-child(2) img { object-position: 22% 30%; }
  .collage-set .snap:nth-child(3) img { object-position: 50% 30%; }
  .collage-set .snap:nth-child(4) img { object-position: 50% 42%; }
  .collage-set .snap:nth-child(5) img { object-position: 50% 46%; }
}

.pen { position: absolute; color: var(--klein); pointer-events: none; overflow: visible; }
.pen path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pen.red { color: var(--red); }
/* Flipped to the right so the arrow lands on the lace dress card, which
   is the photograph of her on that side. The left of the block now holds
   the book, which the note was pointing at by accident. */
.p-arrow { width: 92px; height: 76px; right: 14%; top: -40px; z-index: 6; transform: scaleX(-1); }
.p-loop  { width: 118px; height: 100px; right: -2%; top: 300px; z-index: 1; }
/* sits directly over the tail of the arrow, which starts at the top right
   of the flipped arrow box */
.note-a { position: absolute; right: 12.5%; top: -60px; font-size: 0.9rem; z-index: 6; text-align: right; }
.note-b { position: absolute; right: 0; bottom: 4px; font-size: 0.9rem; z-index: 6; text-align: right; }
.strike { text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.75; }
.uline { border-bottom: 2px solid var(--klein); }

@media (max-width: 879px) {
  .pen, .note-a, .note-b { display: none; }
}

/* ---------- prose ---------- */

.prose { max-width: var(--measure); }
/* Photos interleaved through the story instead of massed in a collage up
   top: each one floats beside the paragraph it belongs to, small enough
   that the text still reads as the main thing, with the same polaroid
   frame and handwritten caption the collage used. */
.story-prose p { overflow-wrap: normal; word-break: normal; }
/* Each beat of the story as its own two-column pairing, photo and copy
   side by side, rather than floating the photo into a shared block of
   text. A grid keeps the two from ever colliding or forcing a stray word
   to break, which is what made the floated version look uneven. .reverse
   flips which side the photo sits on, so the pairings alternate going
   down the page. */
.chapter {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.chapter p {
  margin: 0; font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.6;
  text-align: left;
}
.chapter-photo {
  width: 100%; max-width: 220px; margin: 0 auto;
  padding: 9px 9px 58px;
}
.chapter-photo img { aspect-ratio: 4/5; }
@media (min-width: 700px) {
  .chapter { grid-template-columns: 0.7fr 1.3fr; }
  .chapter.reverse { grid-template-columns: 1.3fr 0.7fr; }
  .chapter.reverse .chapter-photo { order: 2; }
  .chapter.reverse p { order: 1; }
  .chapter-photo { max-width: 240px; }
}
.prose p { margin: 0 0 1.15rem; }
.prose p:last-child { margin-bottom: 0; }
.prose .lede { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; letter-spacing: -0.01em; }
/* The same uppercase, letterspaced label style the homepage hero uses
   underneath its EB Garamond headline, reused here under the lede. */
/* Matches the lede and the rest of the prose now, rather than switching
   to the uppercase interface font. */
.prose .qualifier {
  font-family: inherit; color: var(--ink);
  font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; letter-spacing: -0.01em;
}

/* A small credibility link, underlined rather than styled as a button, so
   it reads as a citation rather than a call to action. */
.verify-link {
  display: inline-block; margin-top: 1.25rem;
  font-family: var(--grotesk); font-weight: 600; font-size: 0.9rem;
  color: var(--klein-ink); text-decoration: underline;
}
.creds { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.creds dl { display: grid; gap: 0.6rem 1.5rem; margin: 1rem 0 0; }
@media (min-width: 620px) { .creds dl { grid-template-columns: 190px minmax(0, 1fr); } }
.creds dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--klein); }
.creds dd { margin: 0; font-size: 0.96rem; }

/* ---------- contact ---------- */

.contactgrid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 720px) { .contactgrid { grid-template-columns: 1.2fr 0.8fr; } }
.contactgrid dl { margin: 0; display: grid; gap: 1.1rem; }
.contactgrid dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--klein); margin-bottom: 0.2rem; }
.contactgrid dd { margin: 0; font-size: 1.05rem; }

/* ---------- packages ---------- */

.packages {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.pkg {
  border: 1px solid var(--rule); border-radius: 3px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.pkg.feature { border-color: var(--ink); border-width: 2px; }
.pkg .count {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--klein);
}
.pkg .price {
  font-family: var(--display); font-weight: 500; text-transform: none; letter-spacing: -0.005em;
  font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1; letter-spacing: 0.004em;
  font-variant-numeric: tabular-nums; margin-top: 0.35rem;
}
.pkg .each { font-size: 0.86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pkg-btn { align-self: flex-start; margin-top: 1rem; font-size: 0.86rem; padding: 0.55rem 1.1rem; }
.pkg .blurb { font-size: 0.9rem; color: var(--ink-soft); margin: 0.75rem 0 0; }

.pkg-note {
  margin-top: 1.5rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 58ch;
}

/* ---------- footer ---------- */

.foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.5rem; border-top: 1px solid var(--rule); margin-top: clamp(3rem, 7vw, 5rem);
}
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* Policy links in the footer: a third line that stays quiet, since these are
   obligations to make available rather than things to draw the eye. */
.foot-legal a { color: var(--ink-soft); }
.foot-legal a:hover { color: var(--klein-ink); }

/* ---------- ways to work together ---------- */

/* Reuses .item, so these read as the same kind of hairline row as the four
   pieces above them. The only additions are the location rule, which is a
   condition rather than a description and needs to look like one, and the
   link that follows it. */
/* Matches .expand's measure, or the condition line runs the full column
   width while the description above it wraps, and the pair looks unrelated. */
.item .where {
  margin: 0.7rem 0 0; font-size: 0.86rem; color: var(--ink-soft);
  max-width: 56ch;
}
.item .where strong { color: var(--ink); font-weight: 500; }
.item .go {
  display: inline-block; margin-top: 0.85rem; font-size: 0.86rem;
  color: var(--klein-ink);
}

.ways-note {
  margin-top: clamp(1.75rem, 4vw, 2.25rem); font-size: 0.96rem;
  color: var(--ink-soft); max-width: 60ch;
}

/* ---------- questions ---------- */

/* Built on <details>, so it is keyboard operable and announced as expandable
   without a line of JavaScript. The default triangle is removed in both
   engines and replaced with a plus that turns into a minus when open. */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem;
  align-items: baseline; gap: 1rem;
  padding-block: 1.15rem; cursor: pointer;
  font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.35;
  letter-spacing: -0.014em; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }

.faq summary::after {
  content: "+"; justify-self: end;
  font-family: var(--mono); font-size: 1.05rem; color: var(--klein);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }

.faq summary:hover { color: var(--klein-ink); }
/* The focus ring has to clear the row, not hug the text, or it reads as an
   underline on a link that is not one. */
.faq summary:focus-visible {
  outline: 2px solid var(--klein); outline-offset: 3px; border-radius: 3px;
}

.faq .answer {
  margin: 0 0 1.35rem; padding-right: 2.5rem;
  color: var(--ink-soft); font-size: 0.96rem; line-height: 1.62;
  max-width: 62ch;
}
.faq .answer + .answer { margin-top: -0.6rem; }
.faq .answer a { color: var(--klein-ink); }

/* Anyone who has asked for less motion gets the panel with no sweep. */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .answer { animation: faq-in 0.22s ease-out both; }
  @keyframes faq-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- signup popup ----------
   Held in normal flow until opened so nothing shifts on load. Timing is
   deliberate: it waits for the visitor to show some intent rather than
   interrupting the moment they arrive, and once dismissed it stays gone. */

.signup-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(21, 23, 26, 0.45);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--edge);
}
.signup-scrim[data-open="true"] { display: flex; }

.signup {
  position: relative;
  background: var(--bg);
  border-radius: 12px;
  width: min(100%, 440px);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: clamp(1.75rem, 5vw, 2.5rem);
  box-shadow: 0 18px 60px rgba(11, 11, 12, 0.28);
  animation: signup-in 260ms ease-out;
}
@keyframes signup-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .signup { animation: none; }
}

.signup-close {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; line-height: 1;
  border: none; border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  font-size: 22px; cursor: pointer;
}
.signup-close:hover { background: var(--bg-2); color: var(--ink); }

.signup h2 {
  font-family: "EB Garamond", Charter, Georgia, serif;
  font-weight: 500; font-size: clamp(1.5rem, 4vw, 1.9rem);
  line-height: 1.2; margin: 0 0 0.6rem;
}
.signup h2 em { font-style: italic; color: var(--pink-soft); }
.signup .signup-note { margin: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }

.signup form { display: grid; gap: 0.6rem; }
.signup input[type="text"],
.signup input[type="email"] {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule); border-radius: 8px;
  background: #fff; color: var(--ink);
}
.signup input:focus-visible {
  outline: 3px solid var(--klein); outline-offset: 1px; border-color: var(--klein);
}
/* The honeypot: off-screen rather than display:none, because some bots skip
   hidden fields but not positioned ones. */
.signup .hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.signup button[type="submit"] { margin-top: 0.2rem; }

.signup-msg { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.5; }
.signup-msg[data-state="error"] { color: #a3232f; }
.signup-msg[data-state="ok"] { color: var(--ink); }

.signup-fine {
  margin: 1rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--ink-soft);
}
.signup-fine a { color: var(--ink-soft); }

/* The Work intro carries a long left column now, so the portrait is pinned to
   the top of the row rather than floated in the middle of all that text, and
   it stays in view while the copy scrolls past it. */
.sec-intro .intro-grid { align-items: start; }
.sec-intro .intro-grid > div > h2.display:first-of-type { margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 900px) {
  .sec-intro .intro-grid .about-portrait { position: sticky; top: 5rem; }
}


/* The Work intro gives the portrait an even share of the row. The column of
   copy beside it is long enough that the standard narrower photo column read
   as an afterthought rather than a companion to the text. */
@media (min-width: 820px) {
  .intro-grid.portrait-lg { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
  /* The shared portrait is capped at 300px, which is what made it read small
     next to a full column. Here it fills the column it was given. */
  .intro-grid.portrait-lg .about-portrait { max-width: min(100%, 440px); width: 100%; }
}

/* The Work headline sits in a half-width column now, so the full page-title
   scale broke it across four lines and overpowered the copy underneath. */
.intro-grid.portrait-lg h1.display { font-size: clamp(1.6rem, 3vw, 2.15rem); }