/* Lily Kubala — résumé site.
   Sections: tokens · base · masthead · hero · portrait and living surface ·
   docking layout (>=1024px) · stacked layout (<1024px) · sections ·
   timeline · split · skills · footer · motion · print sheet */

/* ---------- tokens ---------- */
:root {
  --red-field: rgb(212, 30, 18); /* sampled from the video background; main.js resets it from metadata */
  --brown-1: #8e2214;
  --brown-2: #4d1a10;
  --brown-3: #1d0f0b;
  --night: #0b0a0d;
  --night-rgb: 11, 10, 13;
  --navy: #141c38;
  --cream: #f6efe3;
  --cream-2: rgba(246, 239, 227, 0.72);
  --cream-3: rgba(246, 239, 227, 0.52);
  --gold: #b48a45;
  --gold-light: #d8b578;
  --rule: rgba(246, 239, 227, 0.14);
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1120px;
  /* portrait geometry: --pw is the width of the 9:16 field on wide screens */
  --pw: calc(min(86svh, 920px) * 0.5625);
  --dock-scale: 0.8;
  --dock-gap: clamp(24px, 3.5vw, 56px);
  --rail: calc(var(--pw) * var(--dock-scale) + var(--dock-gap) * 2);
  /* stacked layout: the slot is full-bleed on phones and capped on tablets */
  --slot-w: min(100vw, calc(88svh * 0.5625));
  --slot-h: calc(var(--slot-w) * 16 / 9);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--cream); color: var(--night); padding: 10px 14px;
  font-family: var(--mono); font-size: 12px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-3);
}
.label-gold { color: var(--gold-light); }
.label-num { color: #ff5a40; margin-right: 14px; }

/* ---------- masthead ---------- */
.masthead {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 18px;
}
.wordmark { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.wordmark-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid rgba(246, 239, 227, 0.5);
  font-family: var(--serif); font-size: 17px; letter-spacing: -0.04em;
}
.wordmark-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.site-nav { display: flex; gap: clamp(14px, 2.2vw, 30px); }
.site-nav a, .section-bar a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--cream-2); border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.site-nav a:hover, .section-bar a:hover { color: var(--cream); border-color: var(--gold-light); }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero-copy { position: relative; z-index: 5; }
.hero-copy .label { margin-bottom: 26px; }
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(4rem, 8.4vw, 9rem); line-height: 0.86; letter-spacing: -0.035em;
}
h1 em { font-style: italic; color: var(--gold-light); }
.hero-statement {
  margin-top: 34px; max-width: 30ch;
  font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.25;
  color: rgba(246, 239, 227, 0.92);
}
.about-line {
  margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 8px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream-3);
}
.about-line span:not(:last-child)::after { content: "/"; color: var(--gold); margin: 0 12px; }

/* ---------- portrait ---------- */
.portrait { transform-origin: 0 0; }
.portrait-field {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  outline-offset: 10px; -webkit-tap-highlight-color: transparent;
}
/* Studio red: a soft arch of the video's red just behind her head and hair,
   down to the chest. Her cutout's soft edge pixels came from that red, so they
   land red-on-red. The arch is static; the browser blurs it once at full
   resolution. */
.studio-red {
  position: absolute; pointer-events: none;
  left: -6%; right: -6%; top: -5%; bottom: 12%;
  background: var(--red-field);
  border-radius: 50% 50% 16% 16% / 27% 27% 9% 9%;
  filter: blur(calc(var(--studio-w, 400px) * 0.035));
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
}
/* A dim brown falloff around the arch, so the red meets the black softly. */
.studio-ambient {
  position: absolute; pointer-events: none;
  left: -48%; right: -48%; top: -22%; bottom: -8%;
  background: radial-gradient(closest-side at 50% 40%,
    rgba(142, 34, 20, 0.42) 0%, rgba(110, 30, 18, 0.3) 38%, rgba(77, 26, 16, 0.17) 62%,
    rgba(29, 15, 11, 0.07) 82%, transparent 100%);
}
/* Fine noise over the page dithers the dark gradients, so they show no bands. */
html::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { html::after { display: none; } }
/* Front layer: the cutout frames (alpha). Nothing frames or masks them. */
.portrait-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Opaque frames (no matte, or the still fallback): feather the rectangle. */
[data-alpha="false"] .portrait-canvas {
  background: var(--red-field);
  --feather-x: linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 3.5%, rgba(0,0,0,.72) 8%, #000 13%, #000 87%, rgba(0,0,0,.72) 92%, rgba(0,0,0,.3) 96.5%, transparent 100%);
  --feather-y: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 3%, #000 8%, #000 74%, rgba(0,0,0,.7) 86%, transparent 100%);
  -webkit-mask-image: var(--feather-x), var(--feather-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--feather-x), var(--feather-y);
  mask-composite: intersect;
}

.portrait-caption { margin: 0; }
.section-bar { display: none; }

/* ---------- docking layout (wide screens) ----------
   The portrait is fixed. stage.js moves it from 2/3 of the width (top of page)
   to a dock at the right edge. Content keeps clear of the dock with --rail. */
@media (min-width: 1024px) {
  .hero {
    display: flex; align-items: center;
    min-height: 100svh;
    padding: 120px var(--gutter) 72px;
  }
  .hero-copy { max-width: min(560px, calc(66.667vw - var(--pw) / 2 - var(--gutter) - 48px)); }
  .portrait {
    position: fixed; left: 0; top: 0; z-index: 5;
    width: var(--pw);
    will-change: transform;
    /* first paint before stage.js runs: center at 2/3 of the width */
    transform: translate(calc(66.667vw - var(--pw) / 2), calc(50svh + 24px - var(--pw) * 8 / 9 - 30px));
  }
  main .section, body .footer { padding-right: max(var(--gutter), var(--rail)); }
  /* The rules stop at the content edge, so no line runs behind the portrait. */
  main .section, body .footer {
    border-top: 0;
    background-image: linear-gradient(var(--rule), var(--rule));
    background-repeat: no-repeat;
    background-position: left top;
    background-size: calc(100% - var(--rail) + var(--dock-gap)) 1px;
  }
  main .section-profile { background-image: none; }
  .portrait { --studio-w: var(--pw); }
}

/* ---------- stacked layout (phones and tablets) ----------
   The hero portrait is full-bleed at the top of the page, in front of a flat
   red column, and it stays in the page (no fixed layer, no scroll-linked
   motion). One eased mask on the slot fades the red and Lily together into
   the page. When her face scrolls away, companion.js shows a small portrait
   in the lower-right corner. */
@media (max-width: 1023.98px) {
  .site-nav { display: none; }
  .hero {
    display: flex; flex-direction: column;
    padding: 0 0 56px;
    overflow: hidden;
  }
  /* The slot is full width (on tablets the portrait is centered in it), so the
     mask clips the red only at the window edges. */
  .portrait-slot {
    order: -1; position: relative;
    width: 100%; height: var(--slot-h);
    --fade: linear-gradient(to bottom,
      #000 0%, #000 50%, rgba(0,0,0,0.93) 57%, rgba(0,0,0,0.8) 64%, rgba(0,0,0,0.6) 71%,
      rgba(0,0,0,0.38) 78%, rgba(0,0,0,0.19) 85%, rgba(0,0,0,0.06) 92%, transparent 100%);
    -webkit-mask-image: var(--fade);
    mask-image: var(--fade);
  }
  /* The arch keeps its full size; Lily is drawn smaller inside it. The scale
     is centered on her face (0.5, 0.36), so gaze and hand-off still line up. */
  .portrait-canvas, .companion-canvas { transform: scale(0.8); transform-origin: 50% 36%; }
  .portrait { position: absolute; top: 0; left: calc(50% - var(--slot-w) / 2); width: var(--slot-w); }
  .portrait-field { height: var(--slot-h); }
  .hero-copy {
    margin-top: calc(var(--slot-h) * -0.2);
    padding: 0 var(--gutter);
    width: 100%; max-width: 680px; align-self: center;
  }
  .hero-copy h1, .hero-copy .label { text-shadow: 0 2px 24px rgba(11, 10, 13, 0.85); }
  h1 { font-size: clamp(3.6rem, 17vw, 6rem); }
  .hero-copy .label { margin-bottom: 14px; }
  .hero-statement { margin-top: 20px; font-size: 1.2rem; max-width: 34ch; }
  .about-line { display: none; }

  .section-bar {
    display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: 0; z-index: 20;
    padding: env(safe-area-inset-top) var(--gutter) 0;
    background: rgba(11, 10, 13, 0.9);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
  }
  .section-bar::-webkit-scrollbar { display: none; }
  .section-bar a { flex: none; }
  .section { scroll-margin-top: 52px; }
  /* keep the last lines clear of the companion portrait */
  .footer { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* ---------- sections ---------- */
.section { padding: clamp(64px, 10vw, 140px) var(--gutter); border-top: 1px solid var(--rule); }
.section > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 5vw, 60px); }
.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.95; letter-spacing: -0.02em;
}

.section-profile { border-top: 0; }
.profile-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: end; }
.profile-grid h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.8rem, 5.6vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em;
}
.profile-grid h2 em { color: var(--gold-light); }
.facts { border-top: 1px solid rgba(246, 239, 227, 0.5); }
.facts > div { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-3); padding-top: 3px; }
.facts-sub { display: block; color: var(--cream-3); font-size: 14px; }
.focus-list li + li { margin-top: 2px; }

/* ---------- timeline ---------- */
.timeline { border-top: 1px solid rgba(246, 239, 227, 0.5); }
.entry {
  display: grid; grid-template-columns: 180px 1fr; gap: 20px clamp(24px, 4vw, 56px);
  padding: clamp(26px, 3.2vw, 42px) 0; border-bottom: 1px solid var(--rule);
}
.entry-dates { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-3); padding-top: 10px; }
.entry-role { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -0.01em; }
.entry-org { margin-top: 6px; font-weight: 500; }
.entry-meta { margin-top: 2px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--cream-3); }
.entry-points { margin-top: 16px; max-width: 62ch; color: var(--cream-2); }
.entry-points li { position: relative; padding-left: 22px; }
.entry-points li + li { margin-top: 8px; }
.entry-points li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 10px; height: 1px; background: var(--gold); }
.entry-skills-label { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-3); }
.entry-skills { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.entry-skills li { border: 1px solid var(--rule); padding: 4px 10px; font-size: 13px; }

/* ---------- education + volunteering ---------- */
.section-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); }
.section-split > * { max-width: none; margin: 0; }
.split-col .section-head { margin-bottom: 32px; }
.edu-school { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.05; }
.edu-studies { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 0; font-weight: 500; }
.edu-studies li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--gold); }
.edu-details { margin-top: 24px; border-top: 1px solid var(--rule); color: var(--cream-2); }
.edu-details li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.vol + .vol { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--rule); }
.vol .entry-dates { padding-top: 0; margin-bottom: 8px; }
.vol .entry-role { font-size: clamp(1.6rem, 2.3vw, 2.05rem); }

/* ---------- skills ---------- */
.section-skills { background: var(--red-field); border-top: 0; }
.section-skills .label { color: rgba(246, 239, 227, 0.75); }
.section-skills .label-num { color: var(--cream); }
.skills-grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(36px, 5vw, 80px); }
.skills-label { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 239, 227, 0.75); padding-bottom: 14px; border-bottom: 1px solid rgba(246, 239, 227, 0.35); }
.skill-list li { font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.15; padding: 10px 0; border-bottom: 1px solid rgba(246, 239, 227, 0.2); }
.skill-list-honors li { font-style: italic; }

/* ---------- footer ---------- */
.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: 40px var(--gutter) max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
.footer-name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.footer-name span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-3); margin-top: 6px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a, .footer-print {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(246, 239, 227, 0.28); background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--cream); transition: border-color 0.2s;
}
.footer-nav a:hover, .footer-print:hover { border-color: var(--gold-light); }

@media (max-width: 960px) {
  .profile-grid, .section-split, .skills-grid { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry-dates { padding-top: 0; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- print sheet ----------
   Screen content does not print. The .print-sheet block (rendered from
   content/profile.json) prints as a two-page US Letter résumé. */
.print-sheet { display: none; }

/* ---------- outbound links (hero) ---------- */
.hero-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.link-out {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(246, 239, 227, 0.32); background: rgba(11, 10, 13, 0.3);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--cream); transition: border-color 0.2s, background 0.2s;
}
.link-out:hover { border-color: var(--gold-light); background: rgba(11, 10, 13, 0.55); }

/* ---------- print sheet (flowing, US Letter) ----------
   The sheet flows. The browser makes as many pages as the content needs.
   Nothing has a fixed page height, and nothing needs @page margins, so
   the sheet prints the same in Chrome, Safari, and Firefox, and with any
   margin setting in the print dialog. The accent card floats at the
   right of the main column; floats break across pages in every engine. */
@page { size: letter; margin: 0.55in 0.6in 0.6in; }
@media print {
  html, body { background: #fff !important; color: var(--ps-ink, #141c38); }
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet {
    display: block;
    /* ACCENT TOKENS: the only colors to change for another palette */
    --ps-edge: var(--red-field);
    --ps-accent: var(--red-field);
    --ps-accent-ink: #f6efe3;
    --ps-accent-em: #f3d9a4;
    --ps-rule-strong: #141c38;
    --ps-ink: #141c38;
    --ps-soft: #5d6276;
    --ps-rule: #d9d6cf;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    font-family: var(--sans); font-size: 9.6pt; line-height: 1.42; color: var(--ps-ink);
  }
  /* Zero specificity, so the .ps-* margins below apply. */
  :where(.print-sheet) :where(h2, h3, p, ul, ol) { margin: 0; }
  :where(.print-sheet) :where(ul, ol) { list-style: none; padding: 0; }

  .ps-head {
    display: grid; grid-template-columns: 1fr 1.25in; gap: 0.35in; align-items: end;
    padding: 0.16in 0 0.2in; border-top: 5pt solid var(--ps-edge); border-bottom: 1.5pt solid var(--ps-rule-strong);
    break-inside: avoid;
  }
  .ps-kicker, .ps-label, .ps-dates, .ps-meta, .ps-foot, .ps-side-h, .ps-side-k, .ps-about {
    font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  }
  .ps-kicker { font-size: 7.5pt; color: var(--ps-accent); font-weight: 500; }
  .ps-name { margin-top: 0.06in; font-family: var(--serif); font-weight: 400; font-size: 46pt; line-height: 0.9; letter-spacing: -0.03em; }
  .ps-name em { color: var(--ps-accent); }
  .ps-about { margin-top: 0.16in; display: flex; flex-wrap: wrap; gap: 3pt 0; font-size: 6.6pt; color: var(--ps-soft); }
  .ps-about span:not(:last-child)::after { content: "/"; color: var(--ps-edge); margin: 0 6pt; }
  /* The headshot: a plain cropped image on the studio red. No mask, so
     WebKit prints it (a masked image printed as a black box). */
  .ps-photo {
    position: relative; width: 1.25in; height: 1.5in; overflow: hidden;
    background: var(--ps-edge); border: 0.75pt solid var(--ps-accent);
  }
  .ps-photo img { position: absolute; width: 132%; left: -16%; top: -12%; display: block; }

  .ps-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(1.6in, 1fr)); gap: 0.25in;
    padding: 0.16in 0 0.18in; break-inside: avoid;
  }
  .ps-label { font-size: 6.6pt; color: var(--ps-soft); margin-bottom: 3pt; }
  .ps-soft { color: var(--ps-soft); }

  .ps-body { display: flow-root; }
  .ps-side {
    float: right; width: 2.05in; margin: 0.2in 0 0.2in 0.3in; padding: 0.18in 0.2in 0.2in;
    background: var(--ps-accent); color: var(--ps-accent-ink);
    break-inside: avoid;
  }
  .ps-side-h {
    font-size: 6.6pt; font-weight: 500; color: var(--ps-accent-ink); opacity: 0.85;
    padding-bottom: 4pt; border-bottom: 0.5pt solid currentColor;
  }
  .ps-side-h:not(:first-child) { margin-top: 0.2in; }
  .ps-side-list li { font-family: var(--serif); font-size: 12.5pt; line-height: 1.15; padding: 4pt 0; border-bottom: 0.5pt solid rgba(246, 239, 227, 0.22); }
  .ps-side-italic li { font-style: italic; }
  .ps-side-links { margin-top: 5pt; font-size: 8.2pt; overflow-wrap: anywhere; }
  .ps-side-links li + li { margin-top: 5pt; }
  .ps-side-k { display: block; font-size: 6.2pt; opacity: 0.8; }

  .ps-section { margin: 0.16in 0 0.04in; font-family: var(--serif); font-weight: 400; font-size: 19pt; line-height: 1.05; break-after: avoid; }
  .ps-entry {
    display: grid; grid-template-columns: 1.3in 1fr; gap: 0.16in;
    padding: 0.11in 0; border-top: 0.5pt solid var(--ps-rule); break-inside: avoid;
  }
  .ps-dates { font-size: 6.6pt; letter-spacing: 0.04em; color: var(--ps-soft); padding-top: 3pt; }
  .ps-role { font-family: var(--serif); font-weight: 400; font-size: 13.5pt; line-height: 1.08; }
  .ps-org { font-weight: 500; margin-top: 1pt; }
  .ps-meta { font-size: 6.6pt; color: var(--ps-soft); margin-top: 1pt; }
  .ps-points { margin-top: 4pt; }
  .ps-points li { position: relative; padding-left: 11pt; }
  .ps-points li + li { margin-top: 2pt; }
  .ps-points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6pt; height: 0.75pt; background: var(--ps-edge); }
  .ps-skills-shown { margin-top: 4pt; font-size: 8.2pt; color: var(--ps-soft); font-style: italic; }

  .ps-foot {
    clear: both; margin-top: 0.3in; padding-top: 6pt; border-top: 0.5pt solid var(--ps-rule);
    font-size: 6.4pt; color: var(--ps-soft); break-inside: avoid;
  }
}

/* ---------- companion portrait (phones and tablets) ----------
   companion.js places it over the hero crop, then animates transform to
   none (the corner), and back. transform-origin is 0 0 for that math. */
.companion { display: none; }
@media (max-width: 1023.98px) {
  .portrait { --studio-w: var(--slot-w); }
  /* Inside the screen edges, so the phone also shows black around the arch. */
  .studio-red { left: 5%; right: 5%; top: 2%; }
  /* While the companion is out, the hero's portrait and arch travel with it. */
  .portrait.is-handed-off .portrait-canvas,
  .portrait.is-handed-off .studio-red,
  .portrait.is-handed-off .studio-ambient { visibility: hidden; }
  /* A miniature of the hero field: the 9:16 frame in its own studio arch. */
  .companion {
    display: block; position: fixed; z-index: 40;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(4px + env(safe-area-inset-bottom));
    width: 158px; aspect-ratio: 9 / 16;
    --studio-w: 158px;
    transform-origin: 0 0;
    opacity: 0; visibility: hidden; pointer-events: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* The same eased fade as the hero slot. */
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 50%, rgba(0,0,0,0.93) 57%, rgba(0,0,0,0.8) 64%, rgba(0,0,0,0.6) 71%,
      rgba(0,0,0,0.38) 78%, rgba(0,0,0,0.19) 85%, rgba(0,0,0,0.06) 92%, transparent 100%);
    mask-image: linear-gradient(to bottom,
      #000 0%, #000 50%, rgba(0,0,0,0.93) 57%, rgba(0,0,0,0.8) 64%, rgba(0,0,0,0.6) 71%,
      rgba(0,0,0,0.38) 78%, rgba(0,0,0,0.19) 85%, rgba(0,0,0,0.06) 92%, transparent 100%);
  }
  .companion.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
  .companion.is-travelling { transition: transform 0.65s cubic-bezier(0.3, 0.75, 0.2, 1); }
  .companion:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
  .companion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* Face area of the hero slot; companion.js watches it scroll out of view. */
.portrait-face-sentinel { position: absolute; left: 25%; width: 50%; top: 8%; height: 46%; pointer-events: none; visibility: hidden; }

/* Brand logo links in the hero (rendered from profile.json links). */
.link-logo {
  display: inline-flex; width: clamp(56px, 6vw, 76px); height: clamp(56px, 6vw, 76px);
  color: var(--cream); transition: color 0.2s, transform 0.2s;
}
.link-logo svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.link-logo-linkedin:hover, .link-logo-linkedin:focus-visible { color: #0a66c2; transform: translateY(-2px); }
.link-logo:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 6px; border-radius: 4px; }

/* Image logo links (a white mask colored with currentColor), and the bar
   between logos. Heights match the LinkedIn mark. */
.hero-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 28px); }
.link-logo-wide {
  width: auto; aspect-ratio: var(--logo-ratio);
  height: clamp(44px, 4.8vw, 60px);
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.link-logo-ifc:hover, .link-logo-ifc:focus-visible { color: #00aeef; transform: translateY(-2px); }
.link-sep { align-self: stretch; width: 1px; background: rgba(246, 239, 227, 0.4); margin: 4px 0; }

/* ---------- one-column sections ----------
   render.js leaves out an empty section: volunteering with no entries, or a
   skills grid with no honors. The remaining column keeps a readable width. */
.section-split-one { grid-template-columns: minmax(0, 760px); }
.skills-grid-one { grid-template-columns: 1fr; }
.edu + .edu { margin-top: 56px; }