/* =============================================================
   simple.css — the scan route (/simple/)

   Deliberately NOT styles.css. This page exists because a recruiter
   with ninety seconds should not have to scroll through a pinned
   hero, a halftone canvas and five scroll-driven scenes to find out
   what was built and where it is live. So it links none of that: no
   GSAP, no canvas, no custom cursor, no reveal choreography, one
   column, and a stylesheet small enough to arrive instantly.

   It keeps the identity — the same four faces, the same bone-on-
   near-black, the same mono micro-labels — because it is the same
   person's portfolio, not a fallback.

   Everything is readable with JavaScript disabled. The only script
   on the page is the theme boot, which is inline.
   ============================================================= */

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

:root {
  --bg: #0a0a0b;
  --bg-2: #101012;
  --ink: #f2efe9;
  --ink-soft: #cdc9c1;
  --muted: #8e8b85;
  --muted-2: #6f6d68;
  --line: rgba(242, 239, 233, 0.14);
  --accent: #9bcfa5;
  --disp: 'Archivo', system-ui, sans-serif;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --pad: clamp(20px, 5vw, 56px);
}

:root[data-theme='light'] {
  --bg: #eee8db;
  --bg-2: #e5dfd2;
  --ink: #101711;
  --ink-soft: #354038;
  --muted: #5d665f;
  --muted-2: #7b827b;
  --line: rgba(16, 23, 17, 0.18);
  --accent: #315d43;
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 74ch; margin: 0 auto; padding: 0 var(--pad) clamp(60px, 10vh, 110px); }

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- chrome ---------------------------------------------- */

.s-head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.s-brand { font: 500 0.78rem var(--mono); letter-spacing: 0.06em; color: var(--ink); text-decoration: none; }
.s-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.s-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 40px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font: 500 0.58rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  cursor: pointer;
}
.s-btn:hover { border-color: var(--accent); }
.s-btn-lead { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---------- masthead -------------------------------------------- */

.s-top { padding: clamp(34px, 7vh, 66px) 0 clamp(24px, 4vh, 40px); }
.s-name {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2.1rem, 6.5vw, 3.3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.s-role { margin-top: 0.5rem; font-size: 1.05rem; color: var(--ink); }
.s-meta { margin-top: 0.9rem; font: 500 0.62rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.s-meta span { color: var(--accent); }
.s-lede { margin-top: 1.2rem; font-size: 1.02rem; }

/* ---------- sections -------------------------------------------- */

.s-sec { padding-top: clamp(30px, 5vh, 50px); }
.s-sec > h2 {
  margin-bottom: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font: 500 0.6rem var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.s-sec > h2 b { color: var(--accent); font-weight: 500; }

.s-facts { list-style: none; display: grid; gap: 0.5rem; }
.s-facts li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.3rem 1rem; }
.s-facts b { color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; }

.s-item { padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.s-item:first-of-type { border-top: 1px solid var(--line); }
.s-item h3 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.s-item .s-when { float: right; font: 500 0.58rem var(--mono); letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.s-item p { margin-top: 0.45rem; }
/* Aligned rows, not one dense mono paragraph: on a page whose whole job is
   scanning, the role and the platforms have to be findable at a glance. */
.s-kv { margin-top: 0.75rem; display: grid; gap: 0.28rem; }
.s-kv > div { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: 0.2rem 1rem; }
.s-kv dt { font: 500 0.56rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-top: 0.15em; }
.s-kv dd { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; }
.s-list { margin: 0.6rem 0 0 1.1rem; }
.s-list li { margin-top: 0.3rem; }

.s-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 0.85rem; }
.s-links a {
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--line);
  font: 500 0.56rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.s-links a:hover { border-color: var(--accent); }
.s-links .is-store { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.s-tools { margin-top: 0.5rem; color: var(--muted); font-size: 0.9rem; }
.s-note { margin-top: 1rem; color: var(--muted); font-size: 0.88rem; }
.s-foot { margin-top: clamp(40px, 7vh, 74px); padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font: 500 0.58rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }

@media print {
  .s-head { display: none; }
  body { background: #fff; color: #000; }
  .wrap { max-width: none; }
}

/* ---------- hero ------------------------------------------------- */

.s-top { display: grid; gap: clamp(22px, 3vw, 40px); align-items: start; }
@media (min-width: 760px) {
  /* Only reserve the plate's column when there is a plate. Without the guard
     the intro was squeezed into the remaining track and set as a narrow
     ribbon. */
  .s-top:has(.s-portrait) { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
}

/* A framed plate with corner ticks, the way the full site frames a figure —
   not a circular avatar, which is the one portrait treatment this site has
   always refused. */
.s-portrait { position: relative; }
/* A cut-out on the page's own ground — the source frame is pure white, and a
   white plate on a near-black page reads as light mode leaking in. */
.s-portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.s-portrait { padding-bottom: 0.2rem; }
.s-portrait figcaption {
  margin-top: 0.6rem;
  font: 500 0.52rem var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.s-portrait .pf-c {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  opacity: 0.75;
}
.s-portrait .pf-tl { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.s-portrait .pf-tr { top: -4px; right: -4px; border-left: 0; border-bottom: 0; }
.s-portrait .pf-bl { bottom: 30px; left: -4px; border-right: 0; border-top: 0; }
.s-portrait .pf-br { bottom: 30px; right: -4px; border-left: 0; border-top: 0; }

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

.s-nav { display: none; gap: 1.1rem; }
@media (min-width: 900px) { .s-nav { display: flex; } }
.s-nav a {
  font: 500 0.56rem var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
}
.s-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.s-sec { scroll-margin-top: 84px; }

/* ---------- arrival ----------------------------------------------
   Enough that the page feels alive, little enough that it never gets
   between a reader and the thing they came for. The hiding class is
   only ever set by script, and only when motion is allowed. */

.s-anim [data-in] { opacity: 0; transform: translateY(14px); }
.s-anim [data-in].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.s-anim .s-item { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.s-anim [data-in].is-in .s-item { opacity: 1; transform: none; }
.s-anim [data-in].is-in .s-item:nth-child(2) { transition-delay: 0.06s; }
.s-anim [data-in].is-in .s-item:nth-child(3) { transition-delay: 0.12s; }
.s-anim [data-in].is-in .s-item:nth-child(4) { transition-delay: 0.18s; }
.s-anim [data-in].is-in .s-item:nth-child(n + 5) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .s-anim [data-in],
  .s-anim [data-in].is-in,
  .s-anim .s-item { opacity: 1; transform: none; transition: none; }
}

/* =================================================================
   Sections, the way a portfolio has them
   -----------------------------------------------------------------
   The first pass was a document: hairline rows, one type size, no
   way to land on a fact without reading a paragraph. What a scan
   page needs is the shape the genre already settled on — stat tiles,
   cards with tag chips, a timeline — done in this site's language
   rather than the stock one.

   Explicitly not adopted from the reference: emoji in front of every
   heading, and skill bars with percentages. A "Python 95%" asserts a
   precision nobody measured, which is the opposite of what the rest
   of this portfolio is for.
   ================================================================= */

main { max-width: 78rem; margin: 0 auto; padding: 0 var(--pad) clamp(60px, 10vh, 110px); }

.s-kicker {
  font: 500 0.58rem var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.s-kicker span { color: var(--accent); }

.s-hero { display: grid; gap: clamp(24px, 3.5vw, 52px); align-items: start; padding: clamp(38px, 8vh, 84px) 0 clamp(30px, 5vh, 56px); }
@media (min-width: 820px) {
  .s-hero:has(.s-portrait) { grid-template-columns: minmax(0, 232px) minmax(0, 1fr); }
}
.s-intro { max-width: 62ch; }
.s-cta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 1.4rem; }

/* ---------- chips ------------------------------------------------ */

.s-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.9rem; }
.s-chip {
  padding: 0.36rem 0.62rem;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font: 500 0.56rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.s-chip-quiet { border-color: transparent; background: var(--bg-2); color: var(--muted); }

/* ---------- stat tiles ------------------------------------------- */

/* Wrapping flex with flex-grow, not a grid. auto-fit only collapses tracks
   when the whole set fits one row — eight tiles into five columns leaves the
   last row two empty cells, painted by the container's own rule colour. */
.s-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.s-stat { flex: 1 1 190px; min-width: 0; padding: 1.15rem 1.2rem 1.3rem; background: var(--bg); }
.s-stat b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
}
/* A value like "iOS · Android · Web" is not a numeral and must not be set as
   one. It keeps the mono voice the rest of the site gives such values. */
.s-stat.is-text b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--accent);
}
.s-stat span { display: block; margin-top: 0.55rem; font-size: 0.84rem; line-height: 1.45; color: var(--muted); }

/* ---------- cards ------------------------------------------------- */

.s-cards { display: grid; gap: clamp(18px, 2.2vw, 26px); }
@media (min-width: 900px) { .s-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.s-card { border: 1px solid var(--line); background: var(--bg-2); display: grid; }
@media (min-width: 820px) {
  .s-card:has(.s-card-shot) { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
}
.s-card-shot { padding: 1.1rem; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
@media (min-width: 820px) {
  .s-card-shot { border-bottom: 0; border-right: 1px solid var(--line); align-content: start; }
}
/* Radius only where a real product is depicted — the site's standing rule. */
.s-card-shot img { display: block; width: 100%; max-width: 168px; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.s-card-body { padding: clamp(16px, 2vw, 24px); }
.s-card-flat { background: none; }
.s-card-head { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; justify-content: space-between; }
.s-card h3 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.s-card-tag { margin-top: 0.4rem; color: var(--ink); font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.35; }
.s-card p { margin-top: 0.45rem; }

.s-sec-lede { max-width: 62ch; margin: -0.4rem 0 1.5rem; color: var(--muted); }

/* ---------- timeline ---------------------------------------------- */

.s-time { list-style: none; }
.s-time-row {
  display: grid;
  gap: 0.35rem 1.6rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--line);
}
.s-time-row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .s-time-row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); } }
.s-time-row h3 { font-family: var(--disp); font-weight: 700; font-size: 1.16rem; line-height: 1.2; color: var(--ink); }
.s-org { margin-top: 0.25rem; color: var(--accent); font-family: var(--serif); font-style: italic; font-size: 1rem; }
.s-note-sm { margin-top: 0.3rem; color: var(--muted); font-size: 0.86rem; }
.s-when { font: 500 0.58rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- right now + contact ------------------------------------ */

.s-now { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 820px) { .s-now { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-now-col { padding: 1.2rem 1.3rem; background: var(--bg); }
.s-now-col h3 { font: 500 0.55rem var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; }
.s-now-col ul { list-style: none; display: grid; gap: 0.5rem; }
.s-now-col li { font-size: 0.9rem; line-height: 1.5; }
.s-now-col b { color: var(--ink); font-weight: 500; }

.s-contact { padding-bottom: 0.5rem; }
.s-contact-line { max-width: 50ch; color: var(--ink); font-size: 1.05rem; }
.s-mail { margin-top: 1rem; }
.s-mail a {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.4rem, 4.4vw, 2.6rem);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  overflow-wrap: anywhere;
}
.s-mail a:hover { color: var(--accent); }

.s-nav a.is-here { color: var(--ink); border-bottom-color: var(--accent); }

/* The role is a sentence, not a tag — as a chip it ran the width of the card
   and made the platform chips beside it unreadable. */
.s-card-role { margin-top: 0.75rem; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; }
.s-card-role span {
  display: inline-block;
  margin-right: 0.6rem;
  font: 500 0.52rem var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.s-lede-more { margin-top: 0.9rem; }
.s-lede-more a {
  font: 500 0.58rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* =================================================================
   Life
   -----------------------------------------------------------------
   The first pass was correct and inert: one accent used four times,
   no hover anywhere, and an arrival so quiet you could not tell it
   had happened. This is a scan page, not a dead one — the colour
   does work now (the accent marks every reading, every rail and
   every live link) and everything you can point at responds.

   Still no gradient blobs, no glass, no emoji. The devices are the
   ones the full site already uses: a hairline rail that draws, a
   glowing node, an accent that means "this is a real thing".
   ================================================================= */

/* A wash behind the masthead — the halo the main hero carries. */
.s-hero { position: relative; }
.s-hero::before {
  content: '';
  position: absolute;
  inset: -12% -20% 30% -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 22% 34%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(40% 50% at 78% 10%, rgba(255, 255, 255, 0.05), transparent 72%);
}

/* ---------- section heads: the rail draws ------------------------ */

.s-sec > h2 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 1.4rem;
}
.s-rail {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--line));
  transform-origin: left center;
  transform: scaleX(0);
}
.s-anim [data-in].is-in .s-rail { transform: scaleX(1); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
.s-anim [data-in]:not(.is-in) .s-rail { transform: scaleX(0); }
html:not(.s-anim) .s-rail { transform: scaleX(1); }

/* ---------- readings ---------------------------------------------- */

.s-stat { position: relative; transition: background 0.35s; }
.s-stat::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.s-anim [data-in].is-in .s-stat::before { transform: scaleX(1); }
html:not(.s-anim) .s-stat::before { transform: scaleX(1); }
.s-stat:nth-child(2)::before { transition-delay: 0.06s; }
.s-stat:nth-child(3)::before { transition-delay: 0.12s; }
.s-stat:nth-child(4)::before { transition-delay: 0.18s; }
.s-stat:nth-child(n + 5)::before { transition-delay: 0.24s; }
.s-stat:hover { background: var(--bg-2); }
.s-stat b { transition: color 0.3s; }
.s-stat:hover b { color: var(--accent); }

/* ---------- cards respond ----------------------------------------- */

.s-card {
  transition: border-color 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s;
}
.s-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-2px);
}
.s-card-shot img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.s-card:hover .s-card-shot img { transform: scale(1.03); }
.s-card h3 { transition: color 0.3s; }
.s-card:hover h3 { color: var(--accent); }

/* ---------- chips and links respond -------------------------------- */

.s-chip { transition: border-color 0.28s, color 0.28s, background 0.28s; }
.s-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
.s-chip-quiet:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }

.s-links a,
.s-btn { transition: border-color 0.3s, color 0.3s, background 0.3s; }
.s-links a span,
.s-btn span { display: inline-block; margin-left: 0.5em; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.s-links a:hover span,
.s-btn:hover span { transform: translate(3px, -1px); }
.s-links a:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.s-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---------- the timeline gets its node ----------------------------- */

.s-time-row { position: relative; transition: background 0.3s; }
.s-time-row::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 1.55rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0;
  transition: opacity 0.5s;
}
@media (min-width: 760px) { .s-time-row::before { opacity: 1; } }
.s-time { position: relative; padding-left: 2px; }

/* ---------- the status board and contact --------------------------- */

.s-now-col { transition: background 0.35s; }
.s-now-col:hover { background: var(--bg-2); }
.s-now-col h3::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.55rem;
  vertical-align: 0.05em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.s-mail a { transition: color 0.3s, border-color 0.3s; }
.s-mail a:hover { border-bottom-color: var(--accent); }

/* The brand mark gets the site's own dot. */
.s-brand::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.5em;
  background: var(--accent);
  vertical-align: 0.06em;
}

/* ---------- a livelier arrival ------------------------------------- */

.s-anim [data-in] { opacity: 0; transform: translateY(20px); }
.s-anim [data-in].is-in {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.s-anim .s-stat,
.s-anim .s-card,
.s-anim .s-time-row { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.s-anim [data-in].is-in .s-stat,
.s-anim [data-in].is-in .s-card,
.s-anim [data-in].is-in .s-time-row { opacity: 1; transform: none; }
.s-anim [data-in].is-in .s-stat:nth-child(2),
.s-anim [data-in].is-in .s-card:nth-child(2),
.s-anim [data-in].is-in .s-time-row:nth-child(2) { transition-delay: 0.07s; }
.s-anim [data-in].is-in .s-stat:nth-child(3),
.s-anim [data-in].is-in .s-card:nth-child(3),
.s-anim [data-in].is-in .s-time-row:nth-child(3) { transition-delay: 0.14s; }
.s-anim [data-in].is-in .s-stat:nth-child(n + 4),
.s-anim [data-in].is-in .s-card:nth-child(n + 4),
.s-anim [data-in].is-in .s-time-row:nth-child(n + 4) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .s-anim [data-in],
  .s-anim [data-in].is-in,
  .s-anim .s-stat,
  .s-anim .s-card,
  .s-anim .s-time-row { opacity: 1; transform: none; transition: none; }
  .s-rail, .s-stat::before { transform: scaleX(1); transition: none; }
  .s-card:hover { transform: none; }
}

/* =================================================================
   Ground, portrait, chrome
   -----------------------------------------------------------------
   Three things were wrong at once: the hero wash was a child of the
   content column, so its tint stopped at a hard vertical edge in the
   middle of the page instead of reaching the viewport; the corner
   ticks were bracketing air, because a cut-out has no plate for them
   to frame; and the bar at the top was three items in a row with
   nothing to say where you were.
   ================================================================= */

/* Full-bleed, behind everything, and it does not scroll away — the page's
   ground rather than a decoration sitting inside one section. */
.s-wash {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 18% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 68%),
    radial-gradient(42% 34% at 88% 6%, rgba(255, 255, 255, 0.055), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%);
}
/* The site's own dotted field, at the density the project stages use. */
.s-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 1px, transparent 1.5px);
  background-size: 38px 38px;
  opacity: 0.07;
  mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}
.s-hero::before { display: none; }

/* ---------- the portrait, grounded ------------------------------- */

.s-portrait { position: relative; align-self: end; }
/* A pool of light under the figure so a cut-out reads as placed rather than
   floating, and a baseline for it to stand on. */
.s-portrait::before {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 2.1rem;
  height: 62%;
  z-index: -1;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%);
}
.s-portrait img { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55)); }
.s-portrait figcaption {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}
.s-portrait figcaption::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.5rem;
  vertical-align: 0.08em;
  background: var(--accent);
}
@media (min-width: 820px) { .s-hero:has(.s-portrait) { grid-template-columns: minmax(0, 268px) minmax(0, 1fr); align-items: end; } }

/* ---------- the bar ---------------------------------------------- */

.s-head {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.s-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  transform: scaleX(0);
  transform-origin: left center;
}
.s-nav { position: relative; gap: 1.35rem; }
.s-nav a { position: relative; padding: 0.45rem 0; border-bottom: 0; }
.s-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.s-nav a:hover::after,
.s-nav a.is-here::after { right: 0; }
.s-nav a.is-here { color: var(--ink); }
/* The section you are in gets the mark, not just the rule. */
.s-nav a.is-here::before {
  content: '';
  position: absolute;
  left: -0.72rem;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .s-nav a::after { transition: none; }
}