/* ============================================================================
   style.css — nature-inspired, deliberately quiet.
   Tokens → base → nav → hero → sections → components → responsive
   ========================================================================= */

/* ───────────────────────────  1. TOKENS  ─────────────────────────────── */

:root {
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans:  "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale — calm and generous, never shouty */
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-lg:   clamp(1.1rem,  1.03rem + 0.35vw, 1.3rem);
  --t-xl:   clamp(1.4rem,  1.2rem  + 1vw,    2rem);
  --t-2xl:  clamp(1.9rem,  1.5rem  + 2vw,    2.9rem);
  --t-3xl:  clamp(2.6rem,  1.9rem  + 3.4vw,  4.6rem);

  /* Spacious rhythm (density dial: 3/10) */
  --wrap: 1000px;
  --gutter: clamp(1.5rem, 5vw, 3rem);
  --band: clamp(3.4rem, 6vw, 5.6rem);
  --radius: 18px;
  --radius-sm: 12px;

  /* One easing, one rhythm — everything on the page moves the same way */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: .2s;
  --slow: .7s;

  --nav-h: 66px;
}

/* One palette — paper white, mist, and two weights of sage. There is no
   dark mode: the site is always this. */
:root {
  --paper:   #FCFDFB;   /* page background            */
  --tint:    #F2F7F0;   /* alternating band           */
  --mist:    #E8F5E9;   /* soft green fill            */
  --card:    #FFFFFF;
  --line:    #DCE8DA;
  --line-soft: #EAF1E8;

  --ink:     #1B2A16;   /* headings — deep forest     */
  --ink-mid: #47563F;   /* body copy                  */
  --ink-dim: #66755E;   /* meta                       */

  /* Light sage throughout — no deep forest green anywhere. Two weights, two
     jobs. --leaf is for illustration, icons and focus rings, where the soft
     tint looks right and only needs 3:1. --leaf-ink and --forest are the same
     sage pushed just dark enough to read as text and to carry white button
     text; anything lighter drops under 4.5:1 and stops being readable. */
  --leaf:     #6E9A61;   /* 3.1:1+ on every background it sits on */
  --leaf-ink: #4F7346;
  --forest:   #517748;   /* buttons and accents        */
  --forest-ink: #FFFFFF;

  --shadow: 0 14px 40px -22px rgba(55, 78, 44, .28);
}

/* ────────────────────────────  2. BASE  ─────────────────────────────── */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  background: var(--paper);
  color: var(--ink-mid);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.72;
  overflow-x: hidden;
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease);
}

h1, h2, h3 { font-family: var(--font-serif); color: var(--ink); line-height: 1.18; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  padding: .7rem 1.1rem; border-radius: 99px;
  background: var(--forest); color: var(--forest-ink);
  font-size: var(--t-sm); font-weight: 600;
  transform: translateY(-180%);
  transition: transform var(--fast) var(--ease);
}
.skip:focus { transform: translateY(0); }

:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 6px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--paper); }

/* ─────────────────────────────  3. NAV  ─────────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line-soft);
}

.nav__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* Reading progress. Scales on the X axis from a MotionValue, so it costs one
   compositor property and never triggers layout. */
.nav__progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--forest);
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0; transition: opacity var(--fast) var(--ease);
}
.nav.is-stuck .nav__progress { opacity: .85; }

.nav__mark { display: flex; align-items: center; gap: .55rem; color: var(--ink); }
.nav__leaf { display: block; width: 21px; height: 21px; color: var(--forest); }
.nav__leaf svg { width: 100%; height: 100%; }
.nav__name { font-family: var(--font-serif); font-size: 1.06rem; font-weight: 500; }

.nav__links { display: flex; gap: .3rem; }
.nav__links a {
  position: relative;
  padding: .4rem .75rem; border-radius: 99px;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-dim);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav__links a:hover { color: var(--ink); background: var(--mist); }
.nav__links a.is-here { color: var(--forest); }

/* The featured project gets a standing highlight in the nav */
.nav__links a.nav__feature {
  color: var(--forest); font-weight: 600;
  background: var(--mist);
}
.nav__links a.nav__feature:hover { background: var(--forest); color: var(--forest-ink); }

/* ─────────────────────────────  4. HERO  ────────────────────────────── */

/* The hero is one screen and no more. It used to be a single narrow column
   ~490px wide centered in a 1280px window, which left a large empty margin on
   both sides and pushed the name, the statement and the buttons below the
   fold. It is now two columns: words on the left, portrait on the right. */
.hero {
  position: relative;
  display: grid; align-items: center;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 1.2rem) 0 4.5rem;
  overflow: hidden;
}

/* Soft ferns in the corners — decoration only, very low contrast */
.hero__frond {
  position: absolute; bottom: -40px;
  width: clamp(150px, 22vw, 290px);
  color: var(--leaf); opacity: .13;
  pointer-events: none;
  will-change: transform;
}
.hero__frond svg { width: 100%; height: auto; }
.hero__frond--l { left: -60px; rotate: 12deg; }
.hero__frond--r { right: -60px; rotate: -12deg; scale: -1 1; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.hero__copy { display: flex; flex-direction: column; align-items: flex-start; }

/* ── The portrait: the centerpiece of the page ──────────────────────────
   An arch, not a circle. The photo is a standing 2:3 portrait, so a tall
   arched frame shows the whole subject instead of cropping to a head — and
   an arch reads as a garden doorway, which suits the rest of the page.   */

.portrait {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  isolation: isolate;
  will-change: transform;
}

/* A wide soft glow sitting behind everything */
.portrait__halo {
  position: absolute; z-index: 0;
  left: 50%; top: 46%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--mist) 0%, transparent 68%);
  opacity: .9;
}

/* An offset outline arch, like a second frame just behind the first */
.portrait__arch {
  position: absolute; z-index: 1;
  /* Concentric: the same distance on every side, with the corner radius grown
     by that same distance so the outline stays parallel to the photo edge and
     the whole picture sits inside it. */
  inset: -13px;
  border: 1px solid var(--leaf);
  opacity: .5;
  border-radius: 999px 999px calc(var(--radius) + 13px) calc(var(--radius) + 13px);
}

.portrait__media {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 999px 999px var(--radius) var(--radius);
  background: var(--mist);
  box-shadow: var(--shadow);
}
.portrait__media img { width: 100%; height: 100%; object-fit: cover; }

/* Fallback when no photo is set */
.portrait__media.is-initials {
  display: grid; place-items: center;
  color: var(--forest);
  font-family: var(--font-serif); font-size: 4rem; letter-spacing: .02em;
}

.hero__greeting {
  font-size: var(--t-sm); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 1rem;
}
.hero__name {
  font-size: var(--t-3xl); font-weight: 500; letter-spacing: -.02em;
  margin-bottom: .45rem;
}
.hero__role {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .04em;
  color: var(--leaf-ink); margin-bottom: 1.1rem;
}
/* The one line that carries the hero. Serif, large, quiet color. */
.hero__statement {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.05rem + 1.05vw, 1.95rem);
  color: var(--ink); max-width: 22ch;
  line-height: 1.3; letter-spacing: -.01em;
  margin-bottom: 2rem;
}
.hero__statement .hl { color: var(--forest); font-style: italic; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Absolute, so it pins to the bottom of the hero instead of becoming a
   sibling column of the content and floating in the right-hand margin. */
.hero__down {
  position: absolute; z-index: 3;
  left: 50%; bottom: 1.6rem; translate: -50% 0;
  display: grid; place-items: center;
  width: 40px; height: 46px;
}
.hero__down-line {
  width: 1px; height: 40px;
  background: linear-gradient(var(--line), var(--leaf));
  transform-origin: top;
  animation: reach 2.6s var(--ease) infinite;
}
@keyframes reach {
  0%, 100% { transform: scaleY(.55); opacity: .5 }
  50%      { transform: scaleY(1);   opacity: 1  }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .8rem 1.7rem;
  border-radius: 99px; font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .01em; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn--solid { background: var(--forest); color: var(--forest-ink); }
.btn--solid:hover { background: var(--ink); transform: translateY(-2px); }
.btn--quiet { color: var(--ink); border: 1px solid var(--line); background: var(--card); }
.btn--quiet:hover { border-color: var(--forest); color: var(--forest); background: var(--mist); }
.btn--big { min-height: 56px; padding: 1rem 2.4rem; font-size: var(--t-base); }
/* LinkedIn sits beside the email as a second way in — same weight, its own
   color so the pair doesn't read as one button repeated. */
.btn--in { background: var(--mist); color: var(--leaf-ink); border: 1px solid var(--leaf); }
.btn--in:hover { background: var(--card); border-color: var(--forest); color: var(--forest); transform: translateY(-2px); }

/* ──────────────────────  5. DIVIDERS & BANDS  ───────────────────────── */

.divider {
  display: flex; justify-content: center;
  padding-block: clamp(1.2rem, 2.6vw, 2rem);
  color: var(--leaf);
}
.divider__art { width: 200px; height: auto; opacity: .55; }

.band { padding-block: var(--band); position: relative; }
.band--tint { background: var(--tint); }
.band--close { padding-bottom: calc(var(--band) + 2rem); overflow: hidden; }

.head { margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 62ch; }
.head--center { margin-inline: auto; text-align: center; }
.head--row { display: flex; align-items: flex-end; justify-content: space-between;
             gap: 1.5rem; flex-wrap: wrap; max-width: none; }
.head__title { font-size: var(--t-2xl); font-weight: 500; letter-spacing: -.015em; }
.head__note { margin-top: .7rem; font-size: var(--t-sm); color: var(--ink-dim); }

.kicker {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--leaf-ink);
  margin-bottom: .8rem;
}
.kicker::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.head--center .kicker { justify-content: center; }

/* ──────────────────────────  6. ABOUT  ──────────────────────────────── */

.about { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
/* Body size, not lead size — the lead scale (--t-lg) made this read like a
   pull-quote and cost a lot of vertical room. */
.about__prose p { font-size: var(--t-base); color: var(--ink-mid); line-height: 1.65; }
.about__prose p + p { margin-top: 1rem; }

.facts { border-top: 1px solid var(--line); }
.facts li { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.facts dt {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: .25rem;
}
.facts dd { color: var(--ink); }

/* ──────────────────  7. NESTED (featured project)  ─────────────────── */
/* The biggest, loudest block on the page — this is the work Oren wants
   people to see first, so it gets a tinted band, a two-column top, and
   type one step up from every other section.                            */

.feature {
  background: var(--tint);
  border-bottom: 1px solid var(--line-soft);
  position: relative; overflow: hidden;
}

.feature__top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}

.feature__name {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 1.8rem + 4vw, 5rem);
  font-weight: 500; line-height: 1; letter-spacing: -.03em;
  color: var(--ink); margin-bottom: .6rem;
}
.feature__tagline {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--t-xl); color: var(--forest);
  line-height: 1.3; margin-bottom: 1.2rem;
}
.feature__blurb { color: var(--ink-mid); margin-bottom: 1.4rem; max-width: 56ch; }

.feature__tags { margin-bottom: 1.6rem; }
.tag--live {
  background: var(--forest); color: var(--forest-ink); font-weight: 600;
}
/* A paused project should be impossible to miss — but still calm, still
   green-and-white. The chip carries the ⏸ pause glyph and breathes slowly so
   the eye lands on it; the bottom note gets a pulsing pause badge. */
.tag--paused {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--mist); color: var(--leaf-ink);
  font-weight: 700; border: 1px solid var(--leaf);
}
.tag__pause { display: inline-flex; width: 12px; height: 12px; }
.tag__pause svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .tag--paused { animation: hiatusBreath 2.6s var(--ease) infinite; }
}

/* The hiatus note. Sits under the last walkthrough clip and closes the
   section. Stronger left rule and a live pause badge make it register as a
   real status, not a footnote — no new hue, just more presence. */
.feature__hiatus {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: 2.4rem 0 0; padding: 1.3rem 1.4rem;
  max-width: 70ch;
  background: var(--tint); border: 1px solid var(--line);
  border-left: 4px solid var(--leaf); border-radius: var(--radius-sm);
}
.feature__hiatus-mark {
  position: relative; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mist); border: 1px solid var(--leaf);
  color: var(--leaf-ink);
}
.feature__hiatus-mark svg { width: 22px; height: 22px; display: block; }
/* A soft ring that pulses outward — a slow "still here, just paused" beat. */
.feature__hiatus-mark::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: 50%; border: 2px solid var(--leaf);
}
@media (prefers-reduced-motion: no-preference) {
  .feature__hiatus-mark::after { animation: hiatusRing 2.6s var(--ease) infinite; }
}
.feature__hiatus-title {
  display: block; margin-bottom: .3rem;
  font-family: var(--font-sans); font-size: var(--t-base); font-weight: 700; color: var(--ink);
}
.feature__hiatus p { font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.65; }
.feature__hiatus p + p { margin-top: .7rem; }

@keyframes hiatusBreath {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@keyframes hiatusRing {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.feature__btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.feature__soon { font-size: var(--t-sm); color: var(--ink-dim); font-style: italic; }
.feature__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; font-size: var(--t-sm); }
.feature__legal a { color: var(--leaf-ink); text-decoration: underline; text-underline-offset: 3px; }
.feature__legal a:hover { color: var(--forest); }

/* Artwork — a real screenshot if there is one, else the drawn room */
.feature__art {
  border-radius: var(--radius);
  overflow: hidden;
}
.feature__shot {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.feature__art--shots { position: relative; }
.shots {
  position: relative;
  aspect-ratio: 1600 / 1268;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}
.shots__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.shots__img.is-on { opacity: 1; }
.shots__label {
  position: absolute; right: .8rem; bottom: .8rem;
  padding: .3rem .75rem; border-radius: 99px;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  color: var(--ink-mid);
  border: 1px solid var(--line);
}

.feature__art--drawn {
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--leaf);
}
.feature__art--drawn svg { width: 100%; height: auto; }

/* The four things it does */
.feature__features {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.feature__features li { background: var(--card); padding: 1.5rem 1.4rem; }
.feature__icon { display: block; width: 24px; height: 24px; color: var(--leaf); margin-bottom: .85rem; }
.feature__features h3 {
  font-family: var(--font-sans); font-size: var(--t-base);
  font-weight: 600; color: var(--ink); margin-bottom: .3rem;
}
.feature__features p { font-size: var(--t-sm); color: var(--ink-dim); }

.feature__learned {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1.1rem 1.3rem; border-radius: var(--radius-sm);
  background: var(--mist);
}
.feature__learned-icon { width: 19px; height: 19px; color: var(--forest); flex: none; margin-top: .25rem; }
.feature__learned p { font-size: var(--t-sm); color: var(--ink-mid); }
.feature__learned b { color: var(--ink); font-weight: 600; }

/* ────────────────────────  8. MY GOALS  ────────────────────────────── */

.goals {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}
.goals li {
  position: relative;
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.4rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.goals li:hover { border-color: var(--leaf); transform: translateY(-3px); }

/* The checkbox is the real thing, just tinted — it stays keyboard
   operable and announces itself properly without any help from us. */
.goal__input {
  flex: none; width: 20px; height: 20px; margin-top: .15rem;
  accent-color: var(--forest); cursor: pointer;
}
.goal__input:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
.goal__text { min-width: 0; }
.goal__label { cursor: pointer; }
/* Ticked goals recede. Done with color rather than opacity, because
   opacity belongs to the reveal animation and the two would fight. */
.goals li:has(.goal__input:checked) { background: var(--tint); border-color: var(--line-soft); }
.goals li:has(.goal__input:checked) .goal__label {
  text-decoration: line-through; text-decoration-color: var(--leaf);
  color: var(--ink-dim);
}
.goals li:has(.goal__input:checked) p { color: var(--ink-dim); }
.goals__horizon {
  display: inline-block; margin-bottom: .55rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest); background: var(--mist);
  padding: .25rem .6rem; border-radius: 99px;
}
.goals h3 {
  font-family: var(--font-sans); font-size: var(--t-base);
  font-weight: 600; color: var(--ink); margin-bottom: .35rem;
}
.goals p { font-size: var(--t-sm); color: var(--ink-dim); }

/* ─────────────────  9. SUBHEADS (inside a big section)  ─────────────── */
/* Six major sections, each holding a few labeled blocks. The subhead is
   deliberately quieter than a section title so the hierarchy stays obvious. */

.subhead {
  font-family: var(--font-sans);
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
  margin: clamp(2.2rem, 4vw, 3rem) 0 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .7rem;
}
.subhead::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--leaf); flex: none;
}
/* Beyond holds four blocks back to back, so it gets tighter gaps than a
   section with one. */
#beyond .subhead { margin-top: clamp(1.8rem, 2.6vw, 2.2rem); margin-bottom: 1rem; }

/* ────────────────────────  10. VALUES (About)  ───────────────────────── */

.values {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(2rem, 3.5vw, 2.8rem);
}
.values li { background: var(--card); padding: 1.5rem 1.4rem; }
.values__icon { display: block; width: 23px; height: 23px; color: var(--leaf); margin-bottom: .85rem; }
.values h3 { font-family: var(--font-sans); font-size: var(--t-base); font-weight: 600; margin-bottom: .3rem; }
.values p { font-size: var(--t-sm); color: var(--ink-dim); }

/* ────────────────────  11. NOW ROW (Projects)  ───────────────────────── */

.now {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin-bottom: 2rem;
}
.now li { padding: 1.2rem 1.3rem; border-radius: var(--radius-sm); background: var(--mist); }
.now__state {
  display: inline-block; margin-bottom: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest);
}
.now h3 { font-family: var(--font-sans); font-size: var(--t-base); font-weight: 600; margin-bottom: .2rem; }
.now p { font-size: var(--t-sm); color: var(--ink-mid); }

/* ──────────────────────  12. WORK (Projects)  ───────────────────────── */

.work { display: flex; flex-direction: column; gap: 1rem; }
.work__item {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.5rem, 3.5vw, 2.2rem);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.work__item:hover { border-color: var(--leaf); box-shadow: var(--shadow); }

.work__num { font-family: var(--font-serif); font-size: var(--t-lg); color: var(--leaf-ink); line-height: 1; padding-top: .3rem; }
.work__year { font-size: var(--t-sm); color: var(--ink-dim); margin-bottom: .3rem; }
.work__title { font-size: var(--t-xl); font-weight: 500; margin-bottom: .7rem; }
.work__blurb { color: var(--ink-mid); margin-bottom: 1rem; max-width: 62ch; }

.work__learned {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--mist); margin-bottom: 1.1rem; max-width: 62ch;
}
.work__learned-icon { width: 18px; height: 18px; color: var(--forest); flex: none; margin-top: .2rem; }
.work__learned p { font-size: var(--t-sm); color: var(--ink-mid); }
.work__learned b { color: var(--ink); font-weight: 600; }

.work__foot { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.work__links { display: flex; gap: 1rem; margin-left: auto; }
.work__links a {
  font-size: var(--t-sm); font-weight: 600; color: var(--forest);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) var(--ease);
}
.work__links a:hover { border-bottom-color: var(--forest); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  font-size: .78rem; font-weight: 500;
  padding: .28rem .7rem; border-radius: 99px;
  background: var(--mist); color: var(--ink-mid);
}

/* ────────────────────  13. EDUCATION (Résumé)  ──────────────────────── */

.edu {
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.edu__head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.edu__school { font-family: var(--font-serif); font-size: var(--t-xl); font-weight: 500; color: var(--ink); }
.edu__degree { color: var(--ink-mid); }
.edu__meta { text-align: right; font-size: var(--t-sm); color: var(--ink-dim); }
.edu__gpa {
  display: inline-block; font-size: var(--t-sm); font-weight: 600;
  color: var(--forest); background: var(--mist);
  padding: .3rem .8rem; border-radius: 99px; margin-bottom: 1.3rem;
}
/* One card per school. They stack, and the current one is marked so the
   4.0 can't be read as belonging to the wrong university. */
.edu__item + .edu__item {
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.edu__school { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.edu__now {
  font-family: var(--font-sans);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest); background: var(--mist);
  padding: .22rem .6rem; border-radius: 99px;
}

/* ──────────────  13a. CERTIFICATIONS (Résumé)  ──────────────────────── */
/* The certificate itself is the lead, because a visitor recognizes the
   shape of one before they read the title. It sits at a fixed width so a
   second certificate lines up beside the first, and the credential ID is
   printed next to the verify link so the claim can be checked. */

.certs { display: grid; gap: 1rem; }
.cert {
  display: flex; gap: clamp(1rem, 2.5vw, 1.6rem); align-items: flex-start;
  padding: clamp(1.2rem, 2.6vw, 1.5rem);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.cert:hover { border-color: var(--leaf); transform: translateY(-3px); }

/* The picture is a link — hovering lifts the leaf mark into view so it's
   obvious there's a bigger version behind it. */
.cert__shot {
  position: relative; flex: none; display: block;
  width: clamp(150px, 22vw, 232px);
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--paper);
}
.cert__img { display: block; width: 100%; height: auto; }
.cert__zoom {
  position: absolute; right: .5rem; bottom: .5rem;
  width: 26px; height: 26px; padding: 5px;
  border-radius: 50%; background: var(--card); color: var(--leaf);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.cert__shot:hover .cert__zoom,
.cert__shot:focus-visible .cert__zoom { opacity: 1; transform: none; }

.cert__body { min-width: 0; flex: 1; }
.cert__name {
  font-family: var(--font-serif); font-size: var(--t-lg); font-weight: 500;
  color: var(--ink);
}
.cert__issuer { font-size: var(--t-sm); color: var(--ink-dim); margin-top: .15rem; }
.cert__blurb { font-size: var(--t-sm); color: var(--ink-mid); margin-top: .7rem; }
.cert__tags { margin-top: .8rem; }

/* Issued / expiry / credential ID, as label-over-value pairs so they stay
   readable when they wrap onto a phone. */
.cert__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}
.cert__meta dt {
  font-family: var(--font-sans);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
}
.cert__meta dd { font-size: var(--t-sm); color: var(--ink-mid); margin-top: .1rem; }
.cert__id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cert__actions { margin-top: 1rem; }

/* On a phone the picture goes full width above the text — at 150px wide it
   is too small to read, and too small to be worth tapping. */
@media (max-width: 560px) {
  .cert { flex-direction: column; }
  .cert__shot { width: 100%; }
}

/* Awards won somewhere other than the universities. */
.awards { display: grid; gap: 1.4rem; }
.awards__source {
  font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink); margin-bottom: .7rem;
}

.honors { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.honors li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-mid); }
.honors__icon { width: 17px; height: 17px; color: var(--leaf); flex: none; margin-top: .28rem; }

/* ──────────────  13b. CLASSES THIS TERM (Résumé)  ───────────────────── */
/* Five cards, each led by its own mark. The detail lives behind a Read
   more so the list can be skimmed in a couple of seconds. */

.classes__head { flex-wrap: wrap; }
.classes__term {
  margin-left: auto; letter-spacing: normal; text-transform: none;
  font-weight: 500; color: var(--ink-dim);
}
.classes {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}
.class {
  display: flex; align-items: flex-start; gap: .95rem;
  padding: 1.25rem 1.3rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.class:hover { border-color: var(--leaf); transform: translateY(-3px); }
.class__icon {
  flex: none; width: 40px; height: 40px; padding: 8px;
  border-radius: 12px; background: var(--mist); color: var(--leaf-ink);
}
.class__icon svg { width: 100%; height: 100%; display: block; }
.class__body { min-width: 0; }
.class__code {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--leaf-ink);
}
.class__title {
  font-family: var(--font-sans); font-size: var(--t-base); font-weight: 600;
  color: var(--ink); line-height: 1.35; margin-top: .15rem;
}
.class__hours { display: block; font-size: .78rem; color: var(--ink-dim); margin-top: .2rem; }
.class__short { font-size: var(--t-sm); color: var(--ink-mid); margin-top: .5rem; line-height: 1.6; }

/* ─────────────────  14. COURSEWORK & SKILLS (Résumé)  ───────────────── */

.kit { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.kit__group h4 {
  font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink); margin-bottom: .7rem;
}

/* ────────────────────  15. EXPERIENCE (Résumé)  ─────────────────────── */

.path { position: relative; padding-left: 2.2rem; }
.path::before {
  content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px;
  width: 1px; background: var(--line);
}
.path > li { position: relative; padding-bottom: 2rem; }
.path > li:last-child { padding-bottom: 0; }
.path > li::before {
  content: ""; position: absolute; left: -2.2rem; top: 4px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--tint); border: 1px solid var(--line);
}
.path__icon { position: absolute; left: calc(-2.2rem + 3px); top: 7px; width: 11px; height: 11px; color: var(--leaf); }
.path__photo {
  float: right; width: 84px; height: 84px; margin: 0 0 .6rem 1rem;
  border-radius: var(--radius); border: 1px solid var(--line);
  object-fit: cover;
}
.path__period { font-size: var(--t-sm); color: var(--ink-dim); margin-bottom: .2rem; }
.path__role { font-family: var(--font-serif); font-size: var(--t-lg); font-weight: 500; color: var(--ink); }
.path__org { color: var(--leaf-ink); font-size: var(--t-sm); font-weight: 600; margin-bottom: .55rem; }
.path__points { display: grid; gap: .4rem; max-width: 62ch; }
.path__points li {
  position: relative; padding-left: 1.1rem;
  font-size: var(--t-sm); color: var(--ink-mid);
}
.path__points li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--leaf);
}

/* ───────────────────  16. ACTIVITIES (Beyond)  ──────────────────────── */

/* Two columns from tablet up — six activities stacked one-per-row made the
   Beyond section run much longer than it needed to. */
.acts {
  display: grid; gap: 0 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-top: 1px solid var(--line-soft);
}
.acts li {
  padding: .8rem .2rem; border-bottom: 1px solid var(--line-soft);
}
.acts__row { display: flex; align-items: center; gap: 1rem; }
.acts .more { margin-left: 2.2rem; }   /* line up under the title, past the icon */
.acts__icon { width: 20px; height: 20px; color: var(--leaf); flex: none; }
.acts__photo {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  object-fit: cover; border: 1px solid var(--line);
}
.acts h4 { font-family: var(--font-sans); font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.acts__org { font-size: var(--t-sm); color: var(--ink-mid); }
.acts__period { margin-left: auto; font-size: var(--t-sm); color: var(--ink-dim); white-space: nowrap; }

/* ────────────────────  17. READING (Beyond)  ────────────────────────── */

/* auto-fill, not auto-fit: a single book keeps one column's width instead
   of stretching across the whole row. */
.shelf { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); }
.book {
  display: flex; gap: 1rem;
  padding: 1.3rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
}
.book__spine { width: 8px; flex: none; border-radius: 3px; background: linear-gradient(var(--leaf), var(--forest)); opacity: .8; }
.book__cover {
  width: 84px; flex: none; align-self: flex-start;
  border-radius: 4px; border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.book__buy { margin-top: .9rem; }
.book__buyLabel {
  display: block; margin-bottom: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.btn--sm { padding: .35rem .8rem; font-size: .8rem; }

/* A book with a "Take a look" panel gets the whole shelf width — the ladder
   inside needs more room than a 245px column can give it. */
.book--featured { grid-column: 1 / -1; }
.book--featured .book__cover { width: 118px; }
.book__body { min-width: 0; }
.book__facts { font-size: .78rem; color: var(--ink-dim); margin-top: .15rem; }

/* ─── Take a look ────────────────────────────────────────────────────── */
.look { margin-top: 1.1rem; }
.look__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  cursor: pointer; list-style: none;
  padding: .5rem 1.05rem; border-radius: 99px;
  background: var(--forest); color: var(--forest-ink);
  font-size: .84rem; font-weight: 600;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.look__btn::-webkit-details-marker { display: none; }
.look__btn::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.look[open] .look__btn::after { transform: rotate(-135deg) translate(-2px, -2px); }
.look__btn:hover { background: var(--leaf-ink); transform: translateY(-1px); }
.look__btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }

.look__body { margin-top: 1.2rem; }
.look[open] .look__body { animation: moreIn .35s var(--ease) both; }
.look__blurb { font-size: var(--t-base); color: var(--ink-mid); line-height: 1.7; }
.look__block { margin-top: 1.6rem; }
.look__h {
  font-family: var(--font-sans);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: .8rem;
}
.look__note { margin-top: .7rem; font-size: .82rem; color: var(--ink-dim); line-height: 1.6; }

/* The ladder — seven rungs, most persuasive at the top. The influential
   levels are tinted so the shape of the argument is visible at a glance. */
.ladder { display: flex; flex-direction: column; gap: 3px; }
.ladder__rung {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .7rem .9rem; border-radius: var(--radius-sm);
  background: var(--tint); border-left: 3px solid var(--line);
}
.ladder__rung--influential { background: var(--mist); border-left-color: var(--forest); }
.ladder__rung--hinge       { background: var(--mist); border-left-color: var(--leaf); }
.ladder__n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
  background: var(--card); color: var(--ink-dim); border: 1px solid var(--line);
}
.ladder__rung--influential .ladder__n { background: var(--forest); color: var(--forest-ink); border-color: var(--forest); }
/* The hinge is outlined rather than filled — it reads as the step between
   the two zones, and white on the lighter sage would only be 3.25:1. */
.ladder__rung--hinge .ladder__n       { background: var(--card); color: var(--leaf-ink); border-color: var(--leaf); }
.ladder__name { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); }
.ladder__body { display: block; font-size: .85rem; color: var(--ink-mid); line-height: 1.55; margin-top: .1rem; }

.look__points { display: grid; gap: .8rem; }
.look__points li {
  padding-left: .9rem; border-left: 2px solid var(--line);
  font-size: .89rem; color: var(--ink-mid); line-height: 1.6;
}
.look__points strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .12rem; }

.look__links { display: flex; flex-wrap: wrap; gap: .55rem; }

@media (max-width: 560px) {
  .book--featured { flex-direction: column; }
  .book--featured .book__cover { width: 96px; }
}
.book__status {
  display: inline-block; margin-bottom: .45rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest);
}
.book h4 { font-family: var(--font-serif); font-size: var(--t-base); font-weight: 500; color: var(--ink); line-height: 1.35; }
.book__author { font-size: var(--t-sm); color: var(--ink-dim); margin-bottom: .5rem; }
.book__take { font-size: var(--t-sm); color: var(--ink-mid); font-style: italic; }

/* ───────────────────  18. INTERESTS (Beyond)  ───────────────────────── */

.interests {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
}
.interests li { background: var(--card); padding: 1.5rem 1.4rem; }
.interests__icon { display: block; width: 24px; height: 24px; color: var(--leaf); margin-bottom: .85rem; }
.interests__photo {
  display: block; width: calc(100% + 2.8rem); height: 170px;
  margin: -1.5rem -1.4rem .95rem; object-fit: cover;
}

/* ─── Read more ──────────────────────────────────────────────────────── */
.more { margin-top: .8rem; }
.more__btn {
  display: inline-flex; align-items: center; gap: .35rem;
  cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 600; color: var(--leaf-ink);
  padding: .15rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.more__btn::-webkit-details-marker { display: none; }
.more__btn::after {
  content: ""; width: 6px; height: 6px; margin-left: .1rem;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.more[open] .more__btn::after { transform: rotate(-135deg) translate(-2px, -2px); }
.more__btn:hover { border-bottom-color: currentColor; }
.more__btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; border-radius: 3px; }
.more__body {
  margin-top: .6rem; padding-left: .8rem;
  border-left: 2px solid var(--line);
  font-size: .9rem; color: var(--ink-mid); line-height: 1.65;
}
.more[open] .more__body { animation: moreIn .3s var(--ease) both; }
@keyframes moreIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ─── Photo gallery ──────────────────────────────────────────────────── */
.gallery { margin: 0; }   /* the .subhead above it provides the spacing */
.gallery:focus-visible { outline: 2px solid var(--leaf); outline-offset: 6px; border-radius: var(--radius); }
.gallery__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--card); box-shadow: var(--shadow);
}
.gallery__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.03);
  transition: opacity 1s var(--ease), transform 6s linear;
}
.gallery__img.is-on { opacity: 1; transform: scale(1); }
.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 99px;
  display: grid; place-items: center; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--ink-mid);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s var(--ease), background .2s var(--ease);
}
.gallery__stage:hover .gallery__arrow,
.gallery__arrow:focus-visible { opacity: 1; }
.gallery__arrow:hover { background: var(--paper); }
.gallery__arrow--prev { left: .7rem; }
.gallery__arrow--next { right: .7rem; }
.gallery__caption {
  margin-top: .75rem; font-size: .86rem; color: var(--ink-soft); min-height: 1.2em;
}
.gallery__dots { display: flex; gap: .45rem; margin-top: .6rem; }
.gallery__dot {
  width: 8px; height: 8px; padding: 0; border-radius: 99px; cursor: pointer;
  background: var(--line); border: none;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.gallery__dot:hover { background: var(--ink-soft); }
.gallery__dot.is-on { background: var(--leaf-ink); transform: scale(1.35); }
.gallery__dot:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .gallery__img { transition: opacity .01ms; transform: none; }
  .gallery__arrow { opacity: 1; }
}

/* Compact — a slideshow living inside an interest card. Bleeds to the card
   edges like a single photo would, with the dots laid over the image. */
.gallery--compact {
  width: calc(100% + 2.8rem);
  margin: -1.5rem -1.4rem .95rem;
}
.gallery--compact .gallery__stage {
  aspect-ratio: 3 / 2;
  border: none; border-radius: 0; box-shadow: none;
}
.gallery--compact .gallery__arrow {
  width: 28px; height: 28px; font-size: 1.1rem;
}
.gallery--compact .gallery__arrow--prev { left: .45rem; }
.gallery--compact .gallery__arrow--next { right: .45rem; }
.gallery--compact .gallery__dots {
  position: absolute; left: 0; right: 0; bottom: .35rem;
  justify-content: center; margin: 0; gap: 0;
}
/* The dot stays 6px, but content-box padding gives it a 20px tap target. */
.gallery--compact .gallery__dot {
  box-sizing: content-box;
  width: 6px; height: 6px; padding: 7px;
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  background-clip: content-box;
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45));
}
.gallery--compact .gallery__dot.is-on { background: var(--paper); background-clip: content-box; transform: scale(1.35); }

/* Touch devices get no hover, so the arrows would never appear. */
@media (hover: none) {
  .gallery__arrow { opacity: 1; }
}
.interests h4 { font-family: var(--font-sans); font-size: var(--t-base); font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.interests p { font-size: var(--t-sm); color: var(--ink-dim); }

/* A rendered demo (mp4 or gif) sits in the same slot as the live tour. */
.feature__media {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--card);
}

/* ── The walkthrough (the rendered GIFs) ── */

.walk { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.walk__head { max-width: 62ch; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.walk__title {
  font-family: var(--font-serif); font-size: var(--t-2xl);
  font-weight: 500; letter-spacing: -.015em; margin-bottom: .7rem;
}
.walk__intro { color: var(--ink-mid); }

.walk__steps { display: flex; flex-direction: column; gap: clamp(1.6rem, 3.5vw, 2.6rem); }

.walk__step {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  align-items: center;
}
/* Alternate which side the picture sits on, so the list doesn't read
   like a table. */
.walk__step:nth-child(even) .walk__media { order: 2; }

.walk__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  /* Same green the GIFs are drawn on, so a GIF still loading is not a black box. */
  background: var(--mist);
  box-shadow: var(--shadow);
  line-height: 0;
}
.walk__media img,
.walk__media video { width: 100%; height: auto; display: block; }

.walk__n {
  font-family: var(--font-serif); font-size: var(--t-lg);
  color: var(--leaf-ink); display: block; margin-bottom: .5rem;
}
.walk__cat {
  display: inline-block; margin-bottom: .6rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest); background: var(--mist);
  padding: .28rem .7rem; border-radius: 99px;
}
.walk__step-title {
  font-family: var(--font-serif); font-size: var(--t-xl);
  font-weight: 500; color: var(--ink); margin-bottom: .6rem; line-height: 1.15;
}
.walk__body p { font-size: var(--t-sm); color: var(--ink-mid); max-width: 46ch; }

@media (max-width: 860px) {
  .walk__step { grid-template-columns: 1fr; }
  .walk__step:nth-child(even) .walk__media { order: 0; }
}

/* ─────────────────────  19. THE NESTED TOUR  ────────────────────────── */
/* A live demo of the app, playing inside the page. Dark chrome on purpose —
   it reads as "this is the product", distinct from the site around it. */

.tour {
  --t-ink:   #10160F;
  --t-panel: #161D16;
  --t-card:  #1D261C;
  --t-line:  #2C382A;
  --t-text:  #F1F6EF;
  --t-dim:   #93A491;
  --t-mint:  #7BC9A2;
  --t-gold:  #E3C069;

  display: flex; flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--t-ink);
  border: 1px solid var(--t-line);
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.45;
  container-type: inline-size;
}

.tour__bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--t-line);
}
.tour__dots { display: flex; gap: .3rem; }
.tour__dot { width: 9px; height: 9px; border-radius: 99px; }
.tour__brand { font-family: var(--font-serif); font-size: 15px; color: var(--t-text); }

.tour__tabs { display: flex; gap: 1.4rem; padding: 0 .95rem; border-bottom: 1px solid var(--t-line); }
.tour__tab {
  position: relative;
  padding: .6rem .1rem; font-size: 12px; font-weight: 600;
  color: var(--t-dim); border-bottom: 2px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
/* Grow the tap area to 44px without moving the underline off the label. */
.tour__tab::after {
  content: "";
  position: absolute; left: -.5rem; right: -.5rem; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.tour__tab.is-on { color: var(--t-text); border-bottom-color: var(--t-mint); }

.tour__stage { position: relative; aspect-ratio: 16 / 11; }

.tour__act {
  position: absolute; inset: 0;
  padding: .9rem;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease);
}
.tour__act.is-on { opacity: 1; visibility: visible; }

/* ── act 1 · design ── */
.tour__act--design { display: grid; grid-template-columns: 1fr 1.15fr; gap: .8rem; }
.tour__palettes { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.tour__pal {
  display: flex; align-items: center; gap: .55rem;
  padding: .42rem .5rem; border-radius: 9px;
  border: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.tour__pal.is-on { background: var(--t-card); border-color: var(--t-mint); }
.tour__sw { display: flex; gap: 2px; flex: none; }
.tour__sw span { width: 11px; height: 15px; border-radius: 2px; }
.tour__pal-name { font-size: 12px; color: var(--t-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour__pal.is-on .tour__pal-name { color: var(--t-text); font-weight: 600; }

.tour__view { position: relative; border-radius: 11px; overflow: hidden; background: var(--t-card); }
.tour__shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .8s var(--ease);
}
.tour__shot.is-on { opacity: 1; }
.tour__label {
  position: absolute; right: .5rem; bottom: .5rem;
  padding: .18rem .5rem; border-radius: 99px;
  background: rgba(10,14,10,.82);
  border: 1px solid var(--t-line);
  color: var(--t-text); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ── act 2 · shop ── */
.tour__act--shop { display: grid; grid-template-columns: 1.5fr 1fr; gap: .8rem; }
.tour__list { display: flex; flex-direction: column; gap: .35rem; overflow: hidden; }
.tour__item {
  display: flex; align-items: center; gap: .6rem;
  padding: .48rem .6rem; border-radius: 9px;
  background: var(--t-card); border: 1px solid var(--t-line);
  opacity: 0; translate: 0 12px;
  transition: opacity .5s var(--ease) var(--d, 0ms),
              translate .5s var(--ease) var(--d, 0ms),
              border-color .4s var(--ease);
}
.tour__act--shop.is-on .tour__item { opacity: 1; translate: 0 0; }
.tour__item.is-added { border-color: var(--t-mint); }
.tour__item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.tour__item-name { font-size: 12px; font-weight: 600; color: var(--t-text); }
.tour__item-meta { font-size: 11px; color: var(--t-dim); }
.tour__item-save { font-size: 10.5px; color: var(--t-gold); }
.tour__add {
  flex: none; font-size: 10.5px; font-weight: 700;
  padding: .24rem .6rem; border-radius: 99px;
  border: 1px solid var(--t-line); color: var(--t-text);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.tour__item.is-added .tour__add { background: var(--t-mint); color: var(--t-ink); border-color: var(--t-mint); }

.tour__cart { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.tour__cart-head {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t-dim); margin-bottom: .15rem;
}
.tour__cart-line {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: 11px; color: var(--t-dim);
  padding-bottom: .22rem; border-bottom: 1px solid var(--t-line);
}
.tour__cart-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour__cart-line b { color: var(--t-text); flex: none; }
.tour__total-label { font-size: 11px; color: var(--t-dim); margin-top: auto; }
.tour__total {
  font-family: var(--font-serif); font-size: 30px; line-height: 1;
  color: var(--t-mint); font-variant-numeric: tabular-nums;
}
.tour__note { font-size: 10.5px; color: var(--t-gold); }

/* ── act 3 · save ── */
.tour__act--save { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; }
.tour__stores { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.tour__stores span { font-size: 10.5px; color: var(--t-dim); font-weight: 600; }
.tour__compare { display: flex; align-items: stretch; gap: .6rem; width: 100%; }
.tour__card {
  flex: 1; display: flex; flex-direction: column; gap: .25rem;
  padding: .7rem .75rem; border-radius: 11px;
  background: var(--t-card); border: 1px solid var(--t-line);
}
.tour__card--win { border-color: var(--t-mint); border-width: 2px; }
.tour__store { font-size: 10.5px; color: var(--t-dim); }
.tour__thing { font-size: 12px; font-weight: 600; color: var(--t-text); line-height: 1.25; }
.tour__price { font-family: var(--font-serif); font-size: 26px; line-height: 1.1; position: relative; display: inline-block; }
.tour__price--old { color: var(--t-dim); }
.tour__price--new { color: var(--t-mint); }
.tour__strike {
  position: absolute; left: 0; top: 52%; height: 2px; width: 0;
  background: var(--t-gold); border-radius: 2px;
}
.tour__act--save.is-on .tour__strike { width: 100%; transition: width .6s var(--ease) .5s; }
.tour__arrow { align-self: center; color: var(--t-mint); font-size: 18px; }
.tour__badge {
  padding: .4rem 1rem; border-radius: 99px;
  background: var(--t-gold); color: #241B06;
  font-size: 12px; font-weight: 800;
}

/* The window is narrow on phones — drop to a single column. */
@container (max-width: 430px) {
  .tour__act--design,
  .tour__act--shop { grid-template-columns: 1fr; }
  .tour__palettes,
  .tour__cart { display: none; }
  .tour__compare { flex-direction: column; }
  .tour__arrow { rotate: 90deg; }
}

@media (prefers-reduced-motion: reduce) {
  .tour__act, .tour__item, .tour__shot, .tour__strike { transition: none !important; }
}

/* ──────────────────────────  20. CONTACT  ───────────────────────────── */

.contact { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.contact .kicker { justify-content: center; }
.contact__headline { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -.02em; margin-bottom: 1.1rem; }
.contact__body { max-width: 48ch; color: var(--ink-mid); font-size: var(--t-lg); margin-bottom: 2.2rem; }
.contact__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

.contact__copy {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1.2rem; font-size: var(--t-sm); color: var(--ink-dim);
  transition: color var(--fast) var(--ease);
}
.contact__copy:hover { color: var(--forest); }
.contact__copy code {
  font-family: var(--font-sans); font-weight: 600;
  border-bottom: 1px dashed var(--line);
}

.contact__links { display: flex; gap: 1.6rem; margin-top: 2.6rem; flex-wrap: wrap; justify-content: center; }
.contact__links a {
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.contact__links a:hover { color: var(--forest); border-bottom-color: var(--forest); }

/* Rolling hills at the very bottom */
.horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  color: var(--leaf); pointer-events: none;
}
.horizon svg { width: 100%; height: 100%; }

/* ──────────────────────────  21. FOOTER  ────────────────────────────── */

.footer { border-top: 1px solid var(--line-soft); padding-block: 2rem; }
.footer__inner {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--ink-dim);
}
.footer a { color: var(--ink-mid); border-bottom: 1px solid var(--line); transition: color var(--fast) var(--ease); }
.footer a:hover { color: var(--forest); }

/* ──────────────────────────  22. TOAST  ─────────────────────────────── */

.toast {
  position: fixed; bottom: 1.8rem; left: 50%;
  transform: translate(-50%, 140%);
  z-index: 900; padding: .75rem 1.35rem; border-radius: 99px;
  background: var(--forest); color: var(--forest-ink);
  font-size: var(--t-sm); font-weight: 600;
  box-shadow: var(--shadow); pointer-events: none; white-space: nowrap;
  transition: transform .45s var(--ease);
}
.toast.is-up { transform: translate(-50%, 0); }

/* ─────────────────────  23. TOUCH TARGETS  ──────────────────────────── */
/* Every interactive element needs a 44px-tall hit area on touch screens.
   Text links use an invisible ::after to grow the tappable box WITHOUT
   pushing their underline away from the text. Buttons just take padding. */

.nav__mark   { padding-block: .5rem; }
.look__btn   { padding-block: .7rem; }

/* The nav is hidden below 680px but still shown — and tapped — on tablets. */
.nav__links a { position: relative; }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.contact__copy { padding-block: .6rem; }

.contact__links a,
.footer a,
.work__links a { position: relative; }

.contact__links a::after,
.footer a::after,
.work__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* ──────────────────  24. THE ONE SCROLL TRANSITION  ─────────────────── */
/* Everything on the page enters the same way: a slow, soft rise.
   One easing, one distance, one duration — that's what makes it calm. */

[data-rise] { opacity: 0; transform: translateY(18px); }
[data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ────────────────────────  25. RESPONSIVE  ──────────────────────────── */

@media (max-width: 880px) {
  /* Back to one centered column, portrait first — the original arrangement,
     which is the right one once there is no width to spread into. */
  .hero { min-height: 0; padding-bottom: 4rem; text-align: center; }
  .hero__inner { grid-template-columns: 1fr; gap: 1.8rem; justify-items: center; }
  .hero__copy { align-items: center; order: 2; }
  .portrait { order: 1; width: min(74vw, 290px); }
  .hero__statement { max-width: 26ch; }
  .hero__actions { justify-content: center; }

  .about { grid-template-columns: 1fr; }
  .feature__top { grid-template-columns: 1fr; }
  .feature__art { order: -1; }          /* picture first when stacked */
  .work__item { grid-template-columns: 1fr; gap: 1rem; }
  .work__num { padding-top: 0; }
  .work__links { margin-left: 0; }
  .edu__meta { text-align: left; }
  .head--row { align-items: flex-start; }
}

@media (max-width: 680px) {
  .nav__links { display: none; }          /* the page is one scroll — nav is a convenience, not a requirement */
  .nav__inner { justify-content: space-between; }
  .hero__frond { display: none; }
  .footer__inner { flex-direction: column; gap: .4rem; }

  /* Activity rows stack so the period doesn't crush the org name */
  .acts li { flex-wrap: wrap; row-gap: .2rem; }
  .acts__period { margin-left: 2rem; width: 100%; }

  .path__photo { float: none; width: 100%; height: 160px; margin: 0 0 .75rem; }

  /* Trimmed so the portrait, the statement and both buttons still land on
     one phone screen rather than pushing the call to action below the fold. */
  .hero { padding-bottom: 2.4rem; }
  .hero__inner { gap: 1.3rem; }
  .portrait { width: min(66vw, 248px); }

  .feature__btns { width: 100%; flex-direction: column; }
  .feature__btns .btn { width: 100%; }
  .contact__actions { width: 100%; flex-direction: column; }
  .contact__actions .btn { width: 100%; }
}

/* ────────────────────  26. REDUCED MOTION / PRINT  ──────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rise] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .nav, .hero__down, .hero__frond, .horizon, .divider, .toast,
  .portrait__halo, .portrait__arch { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 1.5rem; page-break-inside: avoid; }
  .band--tint { background: none; }
}