/* Nathan Bernhardt personal site (one page, plus Thanks and 404).
   Layout bones follow Tailwind's Spotlight template, rebuilt from measured values in our own CSS.
   No template source used. Light theme only. Taste calls are recorded in NOTES.md. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Warm neutral greys: the sepia-toned photographs sit better on these than on cool zinc */
  --ground: #fafaf9;
  --sheet: #fff;
  --g-50: #f7f6f4;
  --g-100: #f1f0ee;
  --g-150: #ebe9e6;
  --g-200: #e2e0dc;
  --g-300: #cfccc7;
  --g-400: #a8a29e;
  --g-500: #6b665f;   /* 5.69:1 on white, 5.27:1 on the hover panel */
  --g-600: #57534e;
  --g-700: #44403c;
  --g-800: #292524;
  --g-900: #1c1917;

  --band: #f3f1ee;     /* the contact band */
  --hair: rgb(28 25 23 / 0.07);
  --ring: 0 0 0 1px rgb(28 25 23 / 0.06);
  --shadow-sm: 0 1px 2px rgb(28 25 23 / 0.04), 0 2px 6px -2px rgb(28 25 23 / 0.05);
  --shadow-pill: 0 1px 2px rgb(28 25 23 / 0.03), 0 8px 24px -8px rgb(28 25 23 / 0.10);
  --shadow-photo: 0 1px 2px rgb(28 25 23 / 0.05), 0 10px 20px -10px rgb(28 25 23 / 0.16), 0 28px 48px -28px rgb(28 25 23 / 0.22);
  --shadow-photo-lift: 0 2px 4px rgb(28 25 23 / 0.05), 0 18px 32px -12px rgb(28 25 23 / 0.20), 0 40px 64px -32px rgb(28 25 23 / 0.26);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);

  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

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

/* scroll-padding keeps anchors and Tab-focused fields clear of the fixed header (pill bottom at 64px) */
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 104px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  position: relative;
  margin: 0;
  min-height: 100%;
  display: flex;
  background: var(--ground);
  color: var(--g-900);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.625;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
/* hidden always wins over a component's display (the form hides itself once sent) */
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0; }
::selection { background: var(--g-200); color: var(--g-900); }

/* Focus: a clear ink ring with breathing room, never removed */
:focus-visible { outline: 2px solid var(--g-900); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: 12px; z-index: 100;
  padding: 8px 14px; border-radius: 9999px;
  background: var(--g-900); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; outline-color: var(--g-900); }

/* The white sheet with a hairline edge (Spotlight: 1216px wide at 1440) */
.panel { position: absolute; inset: 0; display: flex; justify-content: center; pointer-events: none; }
.panel__frame { display: flex; width: 100%; max-width: 1280px; }
.panel__sheet { width: 100%; background: var(--sheet); box-shadow: 0 0 0 1px var(--g-100); }

.page { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 100vh; }
main { flex: 1 1 auto; }

/* Containers: content starts at x = 208 and is 1024 wide at 1440; 16px gutters on phones */
.wrap__mid { width: 100%; max-width: 1280px; margin: 0 auto; }
.wrap__in { position: relative; padding: 0 16px; }
.wrap__content { max-width: 672px; margin: 0 auto; }

@media (min-width: 640px) {
  .panel { padding: 0 32px; }
  .wrap { padding: 0 32px; }
  .wrap__in { padding: 0 32px; }
}
@media (min-width: 1024px) {
  .panel__frame { padding: 0 32px; }
  .wrap__mid { padding: 0 32px; }
  .wrap__in { padding: 0 48px; }
  .wrap__content { max-width: 1024px; }
}

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; height: 64px; padding-top: 24px; pointer-events: none; view-transition-name: site-header; }
.top__row { position: relative; display: flex; align-items: center; gap: 16px; }
.top__side { display: flex; flex: 1 1 0%; }
.top__side--end { justify-content: flex-end; }
.top__center { display: flex; flex: none; }
/* A soft white fade behind the floating avatar and pill, spanning the white sheet, so text scrolling up
   dissolves before it reaches them instead of running underneath. Solid to just past the pill's middle. */
.top .wrap__in::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -24px; height: 100px;
  background: linear-gradient(180deg, var(--sheet) 0%, rgb(255 255 255 / 0.96) 52%, rgb(255 255 255 / 0.7) 70%, rgb(255 255 255 / 0.28) 86%, rgb(255 255 255 / 0) 100%);
  pointer-events: none;
}

/* Avatar slot, left of the pill: a 40px white disc holding a 36px photo (Spotlight) */
.top__avatar {
  pointer-events: auto;
  position: relative; display: block;
  width: 40px; height: 40px; padding: 2px;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--ring), var(--shadow-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.top__avatar img { width: 36px; height: 36px; border-radius: 9999px; background: var(--g-100); }
/* On the home page the slot starts empty; the hero avatar docks into it as the page scrolls */
.top__avatar--dock { pointer-events: none; opacity: 0; }


/* The three links in a pill, at every width (30 Sept: the phone Menu dialog is gone). On phones the pill
   sits right of the avatar slot and each link is a 44px target. */
.pill-nav {
  pointer-events: auto;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: var(--ring), var(--shadow-pill);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--g-800);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}
.pill-nav ul { display: flex; margin: 0; padding: 0 6px; list-style: none; }
.pill-nav a {
  position: relative; display: block; padding: 10px 11px;
  color: var(--g-700); text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.pill-nav a:hover { color: var(--g-900); }
.pill-nav a[aria-current="page"] { color: var(--g-900); }
.pill-nav a:focus-visible { outline-offset: -2px; border-radius: 9999px; }
@media (max-width: 767px) {
  .top__side--end { display: none; }
}
@media (min-width: 768px) {
  .pill-nav ul { padding: 0 10px; }
  .pill-nav a { padding: 8px 13px; }
}

/* ---------- Type ---------- */
/* The page headline is the only display type (refinement, 30 Sept): 56 at 1280 and up, 52 from 1024, 46 from
   640, 36 on phones. Sections are headed by small labels; rows and the contact sentence stay at text sizes. */
h1, .h1 {
  margin: 0;
  font-size: 36px; line-height: 1.12; letter-spacing: -0.026em;
  font-weight: 600; color: var(--g-900);
  text-wrap: balance;
}
@media (min-width: 640px) {
  h1, .h1 { font-size: 46px; line-height: 1.08; letter-spacing: -0.03em; }
}
@media (min-width: 1024px) { h1, .h1 { font-size: 52px; } }
@media (min-width: 1280px) { h1, .h1 { font-size: 56px; line-height: 1.06; letter-spacing: -0.032em; } }
.lede { margin-top: 24px; font-size: 17px; line-height: 1.75; color: var(--g-600); text-wrap: pretty; }
@media (min-width: 640px) { .lede { font-size: 18px; line-height: 1.72; } }
/* Name first: his name in the darkest ink inside the grey sentence (hierarchy by colour, not size) */
.lede__name { color: var(--g-900); font-weight: 500; }

/* Links in running text: a fine underline that darkens on hover */
.prose a, .text-link {
  color: var(--g-900); font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--g-300);
  transition: text-decoration-color 250ms var(--ease-out);
}
.prose a:hover, .text-link:hover { text-decoration-color: var(--g-900); }

/* Arrow links ("Ask me about it"): no underline, the chevron steps forward on hover */
.go {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 15px; line-height: 24px; font-weight: 500;
  color: var(--g-900); text-decoration: none;
}
.go svg { flex: none; stroke: var(--g-500); transition: translate 250ms var(--ease-out), stroke 250ms var(--ease-out); }
.go__label {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 300ms var(--ease-out);
}
.go:hover svg, .is-linked:hover .go svg { translate: 2px 0; stroke: var(--g-900); }
.go:hover .go__label, .is-linked:hover .go__label { background-size: 100% 1px; }

/* ---------- Home: hero ---------- */
.hero { margin-top: 64px; }
.avatar-hero {
  position: relative; z-index: 60;
  width: 64px; height: 64px;
  border-radius: 9999px; background: var(--g-100);
  box-shadow: 0 0 0 1px rgb(28 25 23 / 0.04);
  transform-origin: 0 0;
  will-change: transform;
}
.hero__text { max-width: 720px; margin-top: 28px; }
.hero h1 { max-width: 720px; }
.hero .lede { max-width: 620px; }

/* ---------- Home: photo strip ---------- */
.strip { margin-top: 56px; view-timeline: --strip block; }
.strip__row {
  display: flex; justify-content: center;
  margin: -40px 0; padding: 40px 0;
  overflow: hidden;
}
/* Three runs of the same five photos (the outer two hidden from screen readers), centred on the middle run,
   so the strip can travel sideways without ever showing an empty edge. */
.strip__track {
  --travel: 180px;
  flex: none; display: flex; align-items: flex-start; gap: 20px;
  will-change: transform;
}
/* A plate: the photograph card with its place and year under it; card and caption tilt together */
.plate {
  flex: none; width: 176px; margin: 0;
  rotate: 2deg;
  transition: rotate 450ms var(--ease-soft), translate 450ms var(--ease-soft);
}
.plate--ccw { rotate: -2deg; }
.shot {
  position: relative;
  width: 100%; aspect-ratio: 9 / 10;
  overflow: hidden;
  border-radius: 12px; background: var(--g-100);
  box-shadow: var(--shadow-photo);
  transition: box-shadow 450ms var(--ease-soft);
}
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A hairline inside the photo edge keeps pale skies from bleeding into the white sheet */
.shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(28 25 23 / 0.08); pointer-events: none; }
/* g-600, not g-500: the caption sits on the card's soft shadow, where g-500 measured only 4.56:1 */
.plate__cap { margin-top: 14px; font-size: 15px; line-height: 20px; color: var(--g-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plate:hover { rotate: 0deg; translate: 0 -6px; }
  .plate:hover .shot { box-shadow: var(--shadow-photo-lift); }
}

@media (min-width: 640px) {
  .strip { margin-top: 72px; }
  .strip__track { gap: 32px; --travel: 400px; }
  .plate { width: 288px; }
  .shot { border-radius: 16px; }
  .plate__cap { margin-top: 18px; }
}

/* ---------- Home: Books, Work, Contact ---------- */
/* One loud moment (30 Sept): the hero headline is the only display type. Each section is headed by its small
   label alone, and even gaps between sections do the sectioning. */
.section { margin-top: 96px; }
@media (min-width: 768px) { .section { margin-top: 120px; } }
.section__label {
  margin: 0 0 16px;
  font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--g-900);
}
@media (min-width: 768px) { .section__label { margin-bottom: 20px; font-size: 17px; } }

/* One row style for books and businesses: quiet index rows on hairlines. The name in ink, one grey line or a
   status, and the status or the action on the right, sitting on the name's baseline. No cards. */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g-200); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--g-200);
}
.row__main { display: block; min-width: 0; }
.row__name {
  display: block; margin: 0;
  font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.012em;
  color: var(--g-900); text-wrap: balance;
}
.row__line { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--g-600); text-wrap: pretty; }
/* The status reads like a date: small grey tabular figures, right-aligned */
.row__meta { font-size: 15px; line-height: 24px; color: var(--g-500); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
/* The action keeps a 44px hit area without changing the row's rhythm */
.row__go { white-space: nowrap; padding: 10px 0; margin: -10px 0; }
@media (max-width: 479px) {
  /* phones: the business line gets the full width, the action follows it */
  .row:has(.row__go) { grid-template-columns: minmax(0, 1fr); }
  .row__go { justify-self: start; margin-top: -2px; }
}
@media (min-width: 768px) {
  .row { padding: 22px 0; column-gap: 40px; }
  .row__name { font-size: 20px; line-height: 28px; letter-spacing: -0.016em; }
}

/* Subscribe: a soft band, label, two-line headline, one line, an underlined email field with a text button
   (after BYQ "Stringer" CTA 4). A real Netlify form; site.js posts it and answers inline. */
.subscribe { margin-top: 112px; }
@media (min-width: 768px) { .subscribe { margin-top: 176px; } }
.subscribe__band { padding: 80px 0; background: var(--band); }
.subscribe__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.subscribe__title { margin: 16px 0 0; font-size: 36px; line-height: 1.02; font-weight: 600; letter-spacing: -0.03em; color: var(--g-900); }
.subscribe__title span { display: block; text-wrap: balance; }
@media (min-width: 1024px) { .subscribe__title span { white-space: nowrap; } }
.subscribe__line { margin-top: 16px; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--g-600); text-wrap: pretty; }
.signup { margin: 0; }
.signup__row {
  display: flex; align-items: flex-end; gap: 20px;
  border-bottom: 1px solid var(--g-900);
  transition: box-shadow 200ms var(--ease-out);
}
.signup__row:focus-within { box-shadow: 0 1px 0 0 var(--g-900); }
.signup__input {
  flex: 1 1 auto; min-width: 0;
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 0; background: transparent;
  padding: 12px 0; margin: 0;
  font: 400 20px/1.4 var(--sans); color: var(--g-900);
}
.signup__input:focus { outline: none; }
.signup__input::placeholder { color: var(--g-500); opacity: 1; }
.signup__button {
  flex: none; border: 0; background: none; cursor: pointer;
  padding: 12px 0; margin: 0;
  font: 600 15px/1.6 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-900);
  transition: color 200ms var(--ease-out);
}
.signup__button:hover { color: var(--g-600); }
.signup__note { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--g-600); }
.signup__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup__done { font-size: 20px; line-height: 1.45; font-weight: 500; color: var(--g-900); }
.signup__error { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--g-900); }
.signup.is-sending .signup__button { color: var(--g-500); cursor: progress; }
@media (min-width: 768px) {
  .subscribe__band { padding: 104px 0; }
  .subscribe__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: end; }
  .subscribe__copy { grid-column: 1 / span 12; }
  .subscribe__form { grid-column: 1 / span 8; }
  .subscribe__title { font-size: 52px; line-height: 1; letter-spacing: -0.035em; }
}
@media (min-width: 1024px) {
  .subscribe__band { padding: 120px 0; }
  .subscribe__copy { grid-column: 1 / span 8; }
  .subscribe__form { grid-column: 9 / span 4; }
  .subscribe__title { font-size: 60px; line-height: 1; letter-spacing: -0.038em; }
}

/* Copy slots waiting for the deck: visibly marked, never mistaken for final words */
.slot { outline: 1px dashed var(--g-400); outline-offset: 2px; background: repeating-linear-gradient(-45deg, rgb(28 25 23 / 0.04) 0 6px, transparent 6px 12px); color: var(--g-600); font-weight: 500; }

/* Logo tiles: one frame for all three businesses; each logo sized to its own shape, never stretched */
.tile {
  flex: none; display: grid; place-items: center;
  width: 104px; height: 48px;
  border-radius: 12px; background: #fff;
  box-shadow: var(--ring), var(--shadow-sm);
}
.tile img { width: auto; max-width: 76%; }
.tile--ba img { height: 11px; }
.tile--fb img { height: 25px; }
.tile__word { font-size: 15px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: #101010; white-space: nowrap; }
.tile--lg { width: 136px; height: 64px; border-radius: 14px; }
.tile--lg.tile--ba img { height: 14px; }
.tile--lg.tile--fb img { height: 32px; }
.tile--lg .tile__word { font-size: 18px; }



/* ---------- Inner pages: About, Books, Work, Thanks and 404 (audit, 30 Sept) ----------
   On Home's scale and rhythm: the page headline at Home's hero size, Home's book rows and business rows,
   and the same contact band and form at the end. One Portland photograph per page carries the strip's
   warmth past Home: the strip's card (tilt, hairline, shadow, hover), still, with its credit under it. */
.page-hero { margin-top: 64px; }
@media (min-width: 640px) { .page-hero { margin-top: 128px; } }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
.page-hero__text { max-width: 720px; }
@media (min-width: 768px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: center; }
}
.page-body { margin-top: 72px; }
@media (min-width: 768px) { .page-body { margin-top: 104px; } }

/* Thanks and 404: one plate from the strip, still, with its place and year */
.page-photo.plate { width: 176px; }
@media (min-width: 768px) { .page-photo.plate { width: 240px; } }
@media (min-width: 1024px) { .page-photo.plate { width: 288px; } }

/* About: headline and story left, portrait right, a Portland photograph under the portrait */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
.about__portrait { max-width: 288px; padding: 0 8px; }
.portrait {
  margin: 0; overflow: hidden; position: relative;
  aspect-ratio: 899 / 900; border-radius: 22px;
  background: var(--g-100);
  box-shadow: var(--shadow-photo);
  rotate: 3deg;
  transition: rotate 500ms var(--ease-soft), box-shadow 500ms var(--ease-soft);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(28 25 23 / 0.08); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .portrait:hover { rotate: 1.5deg; box-shadow: var(--shadow-photo-lift); }
}
.prose { margin-top: 28px; }
.prose p { font-size: 17px; line-height: 1.75; color: var(--g-600); text-wrap: pretty; }
.prose p + p { margin-top: 24px; }
@media (min-width: 640px) { .prose p { font-size: 18px; line-height: 1.72; } }
@media (min-width: 1024px) {
  .about__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; row-gap: 56px; align-items: start; }
  .about__portrait { grid-column: 2; grid-row: 1; max-width: none; padding-left: 40px; padding-right: 0; }
  .about__text { grid-column: 1; grid-row: 1 / span 2; }
  .about__photo { grid-column: 2; grid-row: 2; padding-left: 40px; width: auto; }
  .about__photo .shot { width: 240px; }
}

/* Thanks and 404: the headline and one way home */
.page-hero--short .hero__actions { margin-top: 32px; }

/* Notes: the index page and one page per note (Spotlight's article layout, no date line) */
.index--page { margin-top: 64px; }
@media (min-width: 640px) { .index--page { margin-top: 96px; } }
.note__col { max-width: 672px; margin: 0 auto; }
.note__back { margin-bottom: 40px; }
.go--back svg { order: -1; }
.go--back:hover svg { translate: -2px 0; }
.note__title { font-size: 34px; line-height: 1.15; letter-spacing: -0.025em; }
@media (min-width: 640px) { .note__title { font-size: 46px; line-height: 1.1; letter-spacing: -0.028em; } }
.note__prose { margin-top: 40px; }

/* ---------- Footer: a colophon, not a second nav (30 Sept) ---------- */
.foot { flex: none; margin-top: 120px; }
.foot__rule { border-top: 1px solid var(--g-100); padding: 32px 0 48px; }
.colophon { max-width: 640px; }
.colophon p { font-size: 15px; line-height: 24px; color: var(--g-500); text-wrap: pretty; }
.colophon__name { color: var(--g-700); }
.colophon__note { margin-top: 4px; }
@media (min-width: 768px) { .foot { margin-top: 144px; } .foot__rule { padding: 40px 0 56px; } }

/* The photo strip travels left as the page scrolls down: tied to scroll position, not time.
   Progress runs from the moment the strip is fully on screen to the moment it has left the top.
   CSS scroll-driven animation where supported; site.js applies the same formula elsewhere. */
@media (min-width: 1024px) { .strip__track { --travel: 520px; } }
@keyframes strip-travel { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--travel) * -1), 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .strip__track {
      animation: strip-travel linear both;
      animation-timeline: --strip;
      animation-range: entry 100% exit 100%;
    }
  }
}

/* Cross-page transitions (progressive enhancement; browsers without it just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
::view-transition-group(avatar) { animation-duration: 420ms; animation-timing-function: var(--ease-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; transition-delay: 0ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Copy round, 30 Sept: one clear next step in the hero, and a line in Let's talk. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
.hero__actions .go { margin-top: 0; }
.reach__line { margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: var(--g-900); }

/* Contact as a sentence (30 Sept): the label, one line in his register with the grey clause, the phone and email
   as the primary links, his portrait beside them, then a light form on the page ground. No band, no card. */
/* Phones: the sentence beside the portrait, the links and the form full width under them. From 768 the portrait
   holds its own column beside all three. The last row takes any slack, so the gaps stay even when the form is sent. */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: auto auto 1fr;
  grid-template-areas: "say portrait" "links links" "form form";
  column-gap: 20px; align-items: start;
}
.contact__say { grid-area: say; min-width: 0; }
.contact__links { grid-area: links; }
.contact__portrait { grid-area: portrait; margin: 0; }
.contact__formwrap { grid-area: form; min-width: 0; margin-top: 40px; }
.contact__say {
  font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.016em;
  color: var(--g-900); text-wrap: pretty;
}
.contact__say span { color: var(--g-500); }
.contact__links { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.contact__links a {
  display: inline-block; padding: 10px 0;
  font-size: 17px; line-height: 24px; font-weight: 500; color: var(--g-900);
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--g-300);
  transition: text-decoration-color 250ms var(--ease-out);
}
.contact__links a span { color: var(--g-500); font-weight: 400; }
.contact__links a:hover { text-decoration-color: var(--g-900); }

/* The portrait: his studio headshot toned warm monochrome to match the strip, the slot sized to the square asset */
.contact__portrait img {
  width: 100%; height: auto; aspect-ratio: 899 / 900;
  border-radius: 12px; background: var(--g-100);
  box-shadow: 0 0 0 1px rgb(28 25 23 / 0.08);
}

.contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.contact-form__trap { position: absolute; left: -9999px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* with html's scroll-padding, a focused field lands with its label clear of the header too */
.field input, .field select, .field textarea { scroll-margin-top: 36px; }
.field label { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--g-600); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--g-300); border-radius: 8px;
  background-color: var(--sheet); color: var(--g-900); font: inherit; font-size: 16px; line-height: 24px;
  transition: border-color 200ms var(--ease-out);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--g-400); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--g-500) 50%), linear-gradient(135deg, var(--g-500) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { resize: vertical; min-height: 120px; }
/* The site's ink focus ring, on every field */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--g-900); outline-offset: 2px; border-color: var(--g-900); border-radius: 8px;
}
/* Send: quiet but clear, an ink outline that fills on hover */
.contact-form__send {
  justify-self: start; min-height: 44px; padding: 9px 24px;
  border: 1px solid var(--g-900); border-radius: 999px;
  background: transparent; color: var(--g-900);
  font: inherit; font-size: 16px; line-height: 24px; font-weight: 500; cursor: pointer;
  transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out);
}
.contact-form__send:hover { background: var(--g-900); color: #fff; }
.contact-form__send:focus-visible { outline: 2px solid var(--g-900); outline-offset: 3px; }
.contact-form.is-sending .contact-form__send { opacity: 0.6; cursor: progress; }
.contact-form__done { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.016em; color: var(--g-900); }
.contact-form__done:focus { outline: none; }
.contact-form__error { margin: 16px 0 0; font-size: 16px; line-height: 24px; color: #7a2520; }

@media (min-width: 480px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) 120px; column-gap: 24px; }
}
@media (min-width: 768px) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr) 176px; column-gap: 56px;
    grid-template-areas: "say portrait" "links portrait" "form portrait";
  }
  .contact__formwrap { max-width: 640px; }
  .contact__say { font-size: 22px; line-height: 30px; }
  .contact__links { flex-direction: row; flex-wrap: wrap; column-gap: 32px; margin-top: 8px; }
  .contact__portrait img { border-radius: 14px; }
}
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) 208px; column-gap: 72px; }
  .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .field--wide, .contact-form__send { grid-column: 1 / -1; }
  .contact__say { font-size: 24px; line-height: 32px; letter-spacing: -0.02em; }
}