/* =========================================================
   WAYS-OF-BEING  //  style.css
   A centred shell on paper. Archivo carries the voice —
   heavy and uppercase for display, regular for reading.
   Roboto Mono is reserved for labels, controls and data,
   so anything set in mono is something you act on or scan.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* paper + ink */
  --paper:      #f6f5f2;
  --paper-tint: #efeee9;
  --card:       #fbfaf8;
  --ink:        #101314;
  --ink-soft:   #62676b;
  --ink-faint:  #9ba0a4;
  --hairline:   rgba(16, 19, 20, .13);
  --hairline-2: rgba(16, 19, 20, .22);

  /* a single accent, kept for marks and states — never for decoration */
  --accent:      #1d4e5f;
  --accent-soft: rgba(29, 78, 95, .10);

  /* ocean (kept in sync with main.js — do not retune in isolation) */
  --deep:  #0b1020;
  --tide:  #2440b4;
  --foam:  #6f8fe0;

  /* type */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* one tracking value for every uppercase mono label on the site */
  --track: .16em;

  /* measure + rhythm */
  --shell: 1240px;
  --gutter: clamp(18px, 3vw, 40px);
  --gap: clamp(10px, 1.5vh, 18px);
  --nav-h: 60px;
  --nav-top: 0px;
  --top-inset: calc(var(--nav-h) + var(--gap));

  /* controls — one height for buttons and inputs alike */
  --ctl-h: 46px;
  --ctl-h-sm: 38px;
  --ctl-pad: 26px;
  --nav-btn-w: 124px;   /* every nav button gets this exact box */

  --radius: 0px;
  --radius-sm: 0px;
  --rule: 1px solid var(--hairline);
  --ease: cubic-bezier(.16, .84, .32, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Continuous scrolling — no snapping. Targets carry their own
     scroll-margin so anchor jumps stop clear of the fixed nav. */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }

strong, b { font-weight: 600; color: var(--ink); }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute; top: 10px; left: 10px;
  transform: translateY(-250%);
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 999;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: var(--track); text-transform: uppercase;
}
.skip-link:focus { transform: none; }

/* the one measure everything sits inside */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

/* ---------- 3. Type primitives ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .86;
  margin: 0;
}

/* The mono voice: every small uppercase label on the site, one recipe. */
.eyebrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.lede { max-width: 58ch; }

p a:not(.btn),
.lede a:not(.btn) {
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-2);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
p a:not(.btn):hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 4. Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--paper);
  border-bottom: var(--rule);
  z-index: 100;
}

@supports (backdrop-filter: blur(10px)) {
  .nav {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.15);
  }
}

.nav__mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .08em;
  text-decoration: none;
  transition: opacity .3s var(--ease);
}
.nav__mark:hover { opacity: .55; }

.nav__links { display: flex; align-items: center; gap: 10px; }

.nav__link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0 8px;
  transition: color .3s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link--hide-sm { display: none; }

/* ---------- 5. Buttons ----------
   Content-centred and set to a height rather than padded top and bottom,
   so a button holding "Contact" and a button holding "← Back" are the
   same object. In the nav they also share one width. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: var(--ctl-h);
  padding: 0 var(--ctl-pad);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
/* trailing letter-space would push the label off-centre — take it back */
.btn > span { margin-right: calc(var(--track) * -1); }
.btn:hover { color: var(--paper); }
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn--small {
  min-height: var(--ctl-h-sm);
  padding: 0 18px;
  font-size: 10px;
}

/* Every button in the nav is one fixed box: Contact, ← Back, and any
   button the CV pages put there all measure the same. */
.nav .btn {
  min-width: var(--nav-btn-w);
  min-height: var(--ctl-h-sm);
  padding: 0 14px;
  font-size: 10px;
}

.btn--invert { border-color: color-mix(in srgb, var(--paper) 55%, transparent); }
.btn--invert::after { background: var(--paper); }
.btn--invert:hover { color: var(--ink); }

/* ---------- 5b. The page unit ----------
   Sections flow one after another and are only as tall as their contents,
   with a generous band of air between them. Nothing snaps. */
.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: clamp(64px, 10vh, 128px);
  scroll-margin-top: var(--top-inset);
}

/* the first one clears the fixed nav instead of the full band */
.screen { padding-top: calc(var(--top-inset) + var(--gap)); }

/* ---------- 6. Screen one: hero + flanked graphic ---------- */
.screen { gap: clamp(30px, 5.5vh, 66px); }

/* The stage: statement — vertical plate — detail. On wide screens the two
   text columns lap over the edges of the plate so the three read as one
   lockup; below that they stack under the graphic. */
.stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vh, 48px);
  align-items: center;
}

.stage__col {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  background: var(--paper);
}
.stage__col p { margin: 0; }
.stage__col--right p {
  color: var(--ink-soft);
  max-width: 46ch;
  font-size: .95em;
  line-height: 1.58;
}
.stage__col--right strong { color: var(--ink); }

/* Set for a narrow column: big enough to hold the corner of the lockup,
   small enough that it never competes with the headline above. */
.stage__title {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: .9;
}
.stage__col .lede {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  letter-spacing: -.015em;
  max-width: 30ch;
}

.hero { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--gap); }

.hero__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__meta p { margin: 0; }

/* the type card — plain letterforms, fitted to the measure in main.js */
.hero__type {
  position: relative;
  background: var(--paper);
  padding: clamp(12px, 2vh, 26px) clamp(2px, 1.4vw, 24px);
}

.hero__title {
  font-size: clamp(1.9rem, 11.5vw, 12rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .84;
  color: var(--ink);
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
}

.hero__title .ltr {
  display: inline-block;
  transform: translateY(102%);
  animation: riseIn .95s var(--ease) forwards;
  animation-delay: calc(var(--i) * 42ms);
}
.hero__title .ltr__i {
  display: inline-block;
  will-change: transform;
  transition: transform .55s var(--ease);
}
@keyframes riseIn { to { transform: translateY(0); } }

.hero__title-clip { display: block; overflow: hidden; }

/* ---------- 7. The plate: the artwork ---------- */
.plate {
  position: relative;
  display: block;
  margin: 0;
  container-type: inline-size;   /* lets the overlay type scale with the card */
  aspect-ratio: 1125 / 1398;     /* the artwork's own proportions */
  width: 100%;
  background: var(--paper-tint);
  overflow: visible;             /* so the label can hang off the corner */
  scroll-margin-top: var(--top-inset);
}

.plate__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Straddles the top edge of the plate at the right. It hangs off the top
   only — never off the right edge — so it can never land in the strip
   where the detail column laps over the artwork. */
.plate__label {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 4;
  margin: 0;
  padding: clamp(9px, 1.5cqi, 17px) clamp(13px, 2.3cqi, 25px);
  background: var(--paper);
  border: 1px solid var(--ink);
  text-align: right;
  font-size: clamp(1rem, 3.9cqi, 1.95rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  color: var(--ink);
  pointer-events: none;
}

/* ---------- 8. Sections ---------- */
.section { border-top: var(--rule); }

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: clamp(26px, 4.5vh, 50px);
}
.section__title { font-size: clamp(1.5rem, 3vw, 2.3rem); }

/* person sections */
.person { scroll-margin-top: var(--top-inset); }
.person__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 60px);
  align-items: end;
}
.person__name {
  font-size: clamp(2.2rem, 6vw, 5rem);
  margin-bottom: clamp(20px, 4vh, 44px);
}
.person__body { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
/* the description sits here now, so paragraphs are spaced by the gap alone */
.person__body p { margin: 0; max-width: 58ch; color: var(--ink-soft); }
.person__body p:first-of-type { color: var(--ink); }
.person__body .eyebrow { margin-bottom: -4px; }
.person__body .btn { margin-top: 6px; }

.person__portrait {
  position: relative;
  /* a fixed crop below 1000px, so a very tall source photo can't run off
     the screen on a phone */
  aspect-ratio: 4 / 5;
  max-height: 72svh;
  width: 100%;
  justify-self: end;
  overflow: hidden;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--paper-tint);
  margin: 0;
}
.person__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.person__portrait:hover img { transform: scale(1.03); }

.person__facts {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 8px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--ink-soft);
}
.person__facts li { display: flex; gap: 14px; border-top: var(--rule); padding-top: 8px; }
.person__facts b { font-weight: 400; color: var(--ink); min-width: 8ch; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* ---------- 9. Footer ---------- */
/* Sized by its contents — no stretching to fill the screen. On paper, not
   on a dark slab: a single hairline is enough to close the page. */
.footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.5vh, 40px);
  background: transparent;
  color: var(--ink);
  border-top: var(--rule);
  padding-top: clamp(34px, 4.5vh, 56px);
  scroll-margin-top: var(--top-inset);
}
.page--footer {
  padding-top: clamp(40px, 6vh, 80px);
  padding-bottom: var(--gutter);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 64px);
}
.footer h2 {
  font-family: var(--mono);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: var(--track);
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.footer p {
  margin: 0 0 20px;
  color: var(--ink);
  max-width: 38ch;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.45;
  letter-spacing: -.012em;
}

.subscribe { display: flex; flex-wrap: wrap; gap: 10px; }
.subscribe input {
  flex: 1 1 220px;
  min-width: 0;
  height: var(--ctl-h);
  padding: 0 18px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  transition: border-color .3s var(--ease);
}
.subscribe input::placeholder { color: var(--ink-faint); letter-spacing: .04em; }
.subscribe input:hover { border-color: var(--ink-soft); }
.subscribe input:focus { border-color: var(--ink); outline: none; }
.form-note {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--ink-soft);
  min-height: 1.4em; margin: 16px 0 0;
}

.follow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.follow li { border-top: var(--rule); padding-top: 12px; }
.follow a {
  text-decoration: none;
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  transition: color .3s var(--ease);
}
.follow a:hover { color: var(--accent); }
.follow u {
  text-decoration: none;
  border-bottom: 0;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: var(--track); text-transform: uppercase;
  min-width: 10ch; flex: 0 0 auto;
}

.footer__lockup { display: block; padding: 0 clamp(24px, 4vw, 56px); overflow: hidden; }
.footer__lockup svg { display: block; width: 100%; height: auto; }
.footer__lockup text {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.02em;
  fill: var(--ink);
}

.colophon {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  margin-top: 0;
  padding: 18px 0 0;
  border-top: var(--rule);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- 10. CV page ---------- */
.cv-main {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-top: var(--top-inset);
  padding-bottom: var(--gap);
}
.cv-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 3.5vh, 38px) clamp(20px, 2.8vw, 38px);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.cv-head h1 { font-size: clamp(1.9rem, 5vw, 3.6rem); }
.cv-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cv-frame {
  flex: 1 1 auto;
  min-height: 60svh;
  width: 100%;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.cv-fallback {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(32px, 6vh, 70px) clamp(20px, 2.8vw, 38px);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
.cv-fallback.is-shown { display: flex; }

.cv-colophon {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  padding-top: 6px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--ink-faint);
}
.cv-colophon a { text-decoration: none; transition: color .3s var(--ease); }
.cv-colophon a:hover { color: var(--ink); }

/* ---------- 10b. Contact page ---------- */
.contact-main {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 5vh, 60px);
  padding-top: var(--top-inset);
  padding-bottom: var(--gutter);
}
/* The auto margins take the free space above and below the hero, which
   centres it and drops the colophon onto the foot of the page — the same
   place it sits on the home page. On phones there is no free space to
   take, so the two simply stack. */
.contact-hero { margin-block: auto; }
.contact-main .colophon { margin-top: 0; }

.contact-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vh, 44px);
  align-items: end;
}
.contact-title { font-size: clamp(2.8rem, 9vw, 6.6rem); margin: 0; }
.contact-hero__side { display: flex; flex-direction: column; gap: 26px; }
.contact-note {
  margin: 0; max-width: 36ch;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.45;
  letter-spacing: -.012em;
}
.contact-cta { display: flex; }

/* The label is a tag and stays small; the address itself is something a
   visitor reads and copies, so it gets its own size, its own case and
   room to wrap rather than being set as 10px uppercase tracking. */
.contact-direct {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: var(--track); text-transform: uppercase;
}
.contact-direct li {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  align-items: baseline;
  border-top: var(--rule); padding-top: 12px;
}
.contact-direct span { color: var(--ink-soft); min-width: 10ch; flex: 0 0 auto; }
.contact-direct a {
  font-family: var(--body);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact-direct a:hover { color: var(--accent); border-color: var(--accent); }
/* the person a handle belongs to, tucked in beside it */
.contact-direct i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- 11. Breakpoints ---------- */
@media (min-width: 700px) {
  .nav__link--hide-sm { display: inline; }
  .contact-hero { grid-template-columns: 1.3fr 1fr; }
  .footer__grid { grid-template-columns: 1.4fr 1fr; }
}

@media (min-width: 1000px) {
  .person__grid { grid-template-columns: 1fr 1fr; }

  /* A person fits exactly the space an anchor jump lands in — the viewport
     less the nav offset — so clicking About Yasha / About Asiem shows the
     whole section rather than cutting the portrait off at the fold. The
     portrait absorbs whatever height is left after the name and the text. */
  .person {
    min-height: calc(100svh - var(--top-inset));
    justify-content: center;
    padding-block: clamp(18px, 3vh, 40px);
  }
  .person__name { flex: 0 0 auto; }
  .person__grid {
    /* basis 0, not auto — the grid takes its height from the section rather
       than from the portrait, which is what lets height:100% below resolve
       instead of the image growing to its natural aspect. */
    flex: 1 1 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  .person__body { justify-content: flex-end; min-height: 0; }
  .person__portrait {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    min-height: 0;
  }
}

/* The flanking lockup needs real measure on both sides — the intro copy is
   longer than a caption — so the plate only moves into the middle of the
   three columns once there is room for it. Below that it runs full width
   and the text reads underneath. */
@media (min-width: 1200px) {
  .stage {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 46%) minmax(0, 1fr);
    gap: 0;
    align-items: end;
  }
  /* the plate is first in the source (small screens read graphic first),
     so the three are placed by hand back into statement | plate | detail */
  .stage__col--left  { grid-column: 1; grid-row: 1; }
  /* z-index stays auto so the plate doesn't open a stacking context: the
     artwork itself still passes under the columns (they are z-index 3),
     but the label at z-index 4 rises above them. */
  .plate             { grid-column: 2; grid-row: 1; z-index: auto; }
  .stage__col--right { grid-column: 3; grid-row: 1; }

  /* The columns lap at most 34px over the plate; the label is held further
     in than that, so the two never share horizontal space. */
  .plate__label { right: clamp(48px, 4vw, 76px); }

  .stage__col {
    padding: clamp(20px, 2.2vw, 34px);
    padding-bottom: clamp(28px, 6vh, 76px);
  }
  .stage__col--left  { margin-right: clamp(-34px, -2.2vw, -12px); }
  .stage__col--right { margin-left:  clamp(-34px, -2.2vw, -12px); }
}

/* Full width on a wide-ish tablet or small laptop, the plate's own portrait
   proportions would make it taller than the screen, so the crop is capped
   and the artwork letterboxes instead. Phones are below this height anyway. */
@media (min-width: 700px) and (max-width: 1199.98px) {
  .plate { max-height: 78svh; }
}

/* Below 1200px the plate runs full width and nothing laps it, so the label
   sits in the corner proper and only needs to be kept off the type. */
@media (max-width: 1199.98px) {
  .plate__label {
    right: clamp(12px, 3cqi, 28px);
    font-size: clamp(.95rem, 5cqi, 1.6rem);
    max-width: 70%;
  }
}

/* phones */
@media (max-width: 700px) {
  :root { --nav-btn-w: 110px; }

  .cv-main, .contact-main { min-height: 0; }

  .screen { gap: clamp(22px, 4vh, 40px); }

  /* the intro copy stacks under the graphic as plain blocks */
  .stage { gap: clamp(26px, 5vh, 40px); }
  .stage__col { gap: 16px; }
  .stage__col .lede { max-width: none; }

  /* long addresses and handles wrap instead of pushing the page sideways */
  .follow a,
  .contact-direct li { flex-wrap: wrap; }
  .follow a,
  .contact-direct a { overflow-wrap: anywhere; }

  .subscribe .btn { flex: 1 1 auto; }
}

/* ---------- 12. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__title .ltr { transform: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 13. Print ---------- */
@media print {
  .nav, .skip-link, .subscribe, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page { padding-block: 0; }
  .reveal { opacity: 1; transform: none; }
}