/* =========================================================================
   Victor Holtz — "Journal"
   Design system: concrete grey + sky blue from the photos, near-black ink,
   one golden accent from the evening light on the rocks.
   Motif: the stone-wall ridge (traced from the hero photo) — used as the
   loader curtain edge, the page seams, the image reveal edge and the footer.
   ========================================================================= */

:root {
  /* palette */
  --stone: #1b1a18;
  --stone-2: #262420;
  --ink: #151412;
  --concrete: #e4e1db;
  --concrete-2: #d6d2ca;
  --paper: #f4f2ed;
  --muted: #5b5750;
  --muted-dark: rgba(244, 242, 237, 0.64);
  --rule: rgba(21, 20, 18, 0.17);
  --rule-dark: rgba(244, 242, 237, 0.17);
  --sky: #7d9abb;
  --sky-pale: #afc4cd;
  --sky-deep: #3f5f86;
  --gold: #c98a52;

  /* type */
  --ff-head: "Rockwell", "Rockwell Std", "Rokkitt", "Roboto Slab", Georgia, serif;
  --ff-body: "Avenir Next", "Avenir", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hs: 1;            /* heading size multiplier (fallback face is narrower) */
  --hw: 400;          /* heading weight */
  --fs-name: calc(min(20.5vw, 45svh) * var(--hs));
  --fs-display: calc(clamp(32px, 4.3vw, 72px) * var(--hs));
  --fs-h2: calc(clamp(34px, 4.6vw, 76px) * var(--hs));
  --fs-row: calc(clamp(30px, 3.7vw, 60px) * var(--hs));
  --fs-quote: calc(clamp(24px, 2.5vw, 40px) * var(--hs));
  --fs-lead: clamp(18px, 1.32vw, 21px);
  --fs-body: clamp(15px, 1.04vw, 17px);
  --fs-small: 13px;
  --fs-label: 11px;

  /* space */
  --gx: clamp(16px, 4.2vw, 72px);
  --cg: clamp(12px, 1.6vw, 28px);
  --sp-3: 24px;
  --sp-4: clamp(28px, 3vw, 44px);
  --sp-5: clamp(40px, 5vw, 80px);
  --sp-6: clamp(72px, 9vw, 150px);
  --sp-7: clamp(110px, 14vw, 230px);
  --seam-h: clamp(26px, 4.2vw, 70px);

  /* motion */
  --ease-ui: cubic-bezier(.65, .05, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .3, 1);
  --dur-ui: .45s;

  /* hero geometry: the photo is 3:4 and always as tall as the hero (or taller) */
  --hero-h: max(100svh, 133.333vw);
  --img-h: max(var(--hero-h), 133.333vw);
  --name-floor: .146; /* the name's baseline lands on the stone wall, level with Victor's feet */
  --name-sink: .2;    /* extra sink behind the wall (in em) as the hero leaves */
}
@media (min-aspect-ratio: 1/1) {
  /* the photo is 3:4; the hero is cut so Victor's head (cap at 53.0 % down the photo, face from 54.1 %)
     rises --peek above the fold while the name still owns the sky. Capped by height so short, wide
     windows don't push the head into the name. */
  /* --sky: the free band between the top bar (72px) and the info row (which sits 44px above the head)
     minus a 24px gap. The name (two lines = 1.72em) is sized to fill at most 92 % of it, so it never runs
     into the info row or the head, whatever the window size or browser zoom. */
  :root {
    --peek: min(9vw, 16svh);
    --hero-h: min(133.333vw, 250svh, calc(100svh - var(--peek) + 62.73vw));
    --sky: calc(100svh - var(--peek) - 140px);
    /* × .85: the name reads calmer at 85 % of the space it could fill */
    --fs-name: calc(min(calc(20.5vw * var(--hs)), calc(var(--sky) * .92 / 1.72)) * .85);
  }
}
@media (max-aspect-ratio: 1/1) {
  /* portrait: the wall is on screen, so the name sits higher — its baseline clears the grass,
     and only Victor's body crosses the letters */
  :root { --fs-name: calc(26.5vw * var(--hs)); --name-floor: .272; --name-sink: .05; }
}

.no-rockwell { --hs: 1.07; --hw: 500; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--concrete);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  background: var(--concrete);
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: var(--hw); }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gx); top: 12px; z-index: 200;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  font-size: 13px; text-decoration: none; transform: translateY(-160%);
  transition: transform .3s var(--ease-ui);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: 1720px;
  margin-inline: auto;
  padding-left: max(var(--gx), env(safe-area-inset-left));
  padding-right: max(var(--gx), env(safe-area-inset-right));
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
}

/* small caps label — the journal's voice for metadata */
.label {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--muted); }
.nb { white-space: nowrap; }
.head {
  font-family: var(--ff-head);
  font-weight: var(--hw);
  letter-spacing: -.012em;
}

/* word masks for the rise reveal */
.w {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding: .1em .02em .22em;
  margin: -.1em -.02em -.22em;
}
.wi { display: inline-block; will-change: transform; }

/* ---------- loader ---------- */
.loader { display: none; }
.greet body { overflow: hidden; }
.greet .loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  cursor: progress;
}
.loader__panel {
  position: absolute;
  inset: 0;
  background: var(--stone);
  color: var(--paper);
  display: grid;
  place-items: center;
}
.loader__word {
  display: flex;
  align-items: center;
  gap: .32em;
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: calc(clamp(38px, 4.6vw, 68px) * var(--hs));
  line-height: 1;
  letter-spacing: -.01em;
}
.loader__dot {
  width: .17em; height: .17em; border-radius: 50%;
  background: var(--gold);
  transform: translateY(.04em);
}
.loader__foot {
  position: absolute;
  left: 0; right: 0;
  bottom: max(30px, env(safe-area-inset-bottom));
  text-align: center;
  color: var(--muted-dark);
}
.loader__edge {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% - 1px);
  width: 100%;
  height: clamp(64px, 16vh, 180px);
  color: var(--stone);
  transform-origin: 50% 0;
}
.ridge-svg { width: 100%; display: block; }
.ridge-svg use, .ridge-svg path { fill: currentColor; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: var(--hero-h);
  overflow: clip;
  background: #8ea9c5;
  isolation: isolate;
}
@supports not (overflow: clip) { .hero { overflow: hidden; } }
/* fine film grain: unifies photo + type and hides compression banding in the clean sky */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.hero__stage {
  position: absolute;
  inset: 0;
  transform-origin: 52% 100%;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 52% 100%;
}
.hero__bg { z-index: 0; }
.hero__fg { z-index: 2; pointer-events: none; }
.hero__track {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; top: 0;
  bottom: calc(var(--img-h) * var(--name-floor));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__name {
  position: relative;
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: var(--fs-name);
  line-height: .86;
  letter-spacing: -.03em;
  color: var(--ink);
  padding-inline: max(calc(var(--gx) - .04em), env(safe-area-inset-left));
}
.hero__name .line { display: flow-root; } /* contains the inner's negative margins (no collapse) */
/* line-height .86 is tighter than the glyphs: the dot of the i rises above the line box, and Safari clips
   ink outside a composited layer (will-change). Extra block padding, cancelled by negative margin, gives
   the layer room for the dot without moving the lines. */
.hero__name .line__inner { display: block; padding-block: .2em; margin-block: -.2em; }
.hero__name .line { text-align: center; }

@media (min-aspect-ratio: 1/1) {
  .hero__track { display: block; }
  .hero__name {
    --name-h: calc(var(--fs-name) * 1.72);
    /* centred in the sky band; the glyphs sit ~.2em above their tight line boxes, hence the offset */
    --name-top: calc(72px + (var(--sky) - var(--name-h)) / 2 + var(--fs-name) * .2);
    position: sticky;
    top: var(--name-top);
    margin-top: var(--name-top);
  }
}

.hero__bar {
  position: absolute;
  z-index: 4;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: max(24px, env(safe-area-inset-top)) max(var(--gx), env(safe-area-inset-right)) 0 max(var(--gx), env(safe-area-inset-left));
}
.brand {
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: calc(19px * var(--hs));
  letter-spacing: -.005em;
  text-decoration: none;
  line-height: 1;
}
.clock { display: flex; align-items: baseline; gap: .7em; line-height: 1; }
.clock__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 138, 82, .18);
  align-self: center;
}
.clock time { font-variant-numeric: tabular-nums; }
.clock:not(.is-live) { display: none; }

.hero__meta {
  position: absolute;
  z-index: 4;
  left: 0; right: 0;
  /* the 28 px row ends 16 px above the top of the cap (52.8 % down the 133.333vw-tall photo) */
  top: min(calc(100svh - 64px), calc(var(--hero-h) - 62.9vw - 44px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-left: max(var(--gx), env(safe-area-inset-left));
  padding-right: max(var(--gx), env(safe-area-inset-right));
  color: var(--ink);
}
.hero__meta > :last-child { justify-self: end; }
.cue { display: flex; align-items: center; gap: 12px; }
.cue__line {
  position: relative;
  width: 1px; height: 28px;
  background: rgba(21, 20, 18, .22);
  overflow: hidden;
}
.cue__line::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--ink);
  transform: translateY(-100%);
  animation: cue 2.4s var(--ease-io) infinite;
}
.is-scrolled .cue__line::after, .rm .cue__line::after { animation: none; transform: none; }
@keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

@media (max-aspect-ratio: 1/1) {
  .hero__meta {
    top: calc(max(24px, env(safe-area-inset-top)) + 34px);
    grid-template-columns: 1fr 1fr;
  }
  .hero__meta .cue { display: none; }
}

/* ---------- seam (ridge edge where a section rises over the previous one) ---------- */
.seam {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 1px);
  height: var(--seam-h);
  pointer-events: none;
  transform-origin: 50% 100%;
}

/* ---------- chapter header ---------- */
.chapter {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
  align-items: baseline;
  padding-top: 18px;
}
.chapter__rule {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}
.chapter__no { grid-column: 1 / span 2; }
.chapter__name { grid-column: 3 / span 5; font: inherit; letter-spacing: inherit; }
.chapter__aside { grid-column: 8 / -1; justify-self: end; text-align: right; }

.section-title {
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -.022em;
  text-wrap: balance;
}

/* ---------- 01 intro ---------- */
.intro {
  position: relative;
  z-index: 2;
  background: var(--concrete);
  padding: var(--sp-6) 0 var(--sp-6);
}
.intro .seam { color: var(--concrete); }
.intro__lead {
  grid-column: 3 / span 9;
  margin-top: var(--sp-5);
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -.016em;
  text-wrap: balance;
}
.intro__figure {
  grid-column: 3 / span 4;
  margin: var(--sp-6) 0 0;
}
.intro__body {
  grid-column: 8 / span 4;
  align-self: end;
  display: grid;
  gap: var(--sp-4);
  padding-bottom: 34px;
}
.intro__text { font-size: var(--fs-lead); line-height: 1.6; max-width: 32em; }
.facts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.facts li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0 10px;
  border-bottom: 1px solid var(--rule);
}
.facts li span:last-child { color: var(--muted); text-align: right; }

.frame {
  position: relative;
  overflow: hidden;
  background: var(--concrete-2);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 60%;
}
.intro__figure .frame { aspect-ratio: 4 / 5; }
figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

/* ---------- 02 places ---------- */
.places {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-6);
  background: var(--concrete);
}
.places__lead {
  grid-column: 3 / span 7;
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  max-width: 34em;
}
.mq {
  position: relative;
  margin-top: var(--sp-5);
  padding: 46px 0 26px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: clip;
  white-space: nowrap;
  user-select: none;
}
.mq__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.mq__group { display: flex; align-items: flex-end; flex: none; }
.mq__item {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: calc(clamp(54px, 8.4vw, 150px) * var(--hs));
  line-height: .98;
  letter-spacing: -.024em;
}
.mq__coord {
  position: absolute;
  left: .04em;
  bottom: 100%;
  margin-bottom: 10px;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.mq__sep {
  display: inline-block;
  margin: 0 .3em;
  color: var(--gold);
  font-family: var(--ff-head);
  font-size: calc(clamp(54px, 8.4vw, 150px) * var(--hs));
  line-height: .98;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
  row-gap: var(--sp-5);
  margin-top: var(--sp-6);
  align-items: start;
}
.g { margin: 0; }
.g .frame { aspect-ratio: var(--ar); }
.g--1 { grid-column: 1 / span 7; --ar: 3 / 2; }
.g--2 { grid-column: 9 / span 4; --ar: 2 / 3; margin-top: clamp(80px, 13vw, 230px); }
.g--3 { grid-column: 2 / span 3; --ar: 9 / 16; }
.g--4 { grid-column: 6 / span 7; --ar: 4 / 3; margin-top: clamp(60px, 8vw, 150px); }
.g--5 { grid-column: 1 / span 4; --ar: 3 / 4; }
.g--6 { grid-column: 6 / span 3; --ar: 3 / 4; margin-top: clamp(80px, 12vw, 210px); }
.g--7 { grid-column: 10 / span 3; --ar: 3 / 4; margin-top: clamp(40px, 6vw, 110px); }
.js:not(.rm) .g img { filter: grayscale(.9) contrast(1.04); transition: filter 1.9s var(--ease-out) .15s; }
.js:not(.rm) .g.is-in img { filter: none; }

/* ---------- 03 good at ---------- */
.good {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-6);
  background: var(--concrete);
}
.good__title { grid-column: 3 / span 9; margin-top: var(--sp-5); }
.idx {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}
.idx__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
  align-items: baseline;
  padding: clamp(22px, 2.3vw, 34px) 0 clamp(24px, 2.5vw, 36px);
  border-top: 1px solid var(--rule);
  transition: opacity var(--dur-ui) var(--ease-ui);
}
.idx__no { grid-column: 1 / span 2; color: var(--muted); }
.idx__title {
  grid-column: 3 / span 5;
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: var(--fs-row);
  line-height: 1;
  letter-spacing: -.02em;
  transition: transform .7s var(--ease-ui);
}
.idx__text { grid-column: 8 / span 3; color: var(--muted); max-width: 30em; }
.idx__tag { grid-column: 11 / span 2; justify-self: end; text-align: right; white-space: nowrap; }
.idx__media { grid-column: 3 / -1; margin: 22px 0 0; max-width: 560px; }
.idx__media .frame { aspect-ratio: 4 / 5; }

/* the pinned photo only exists with JS and from 900 px; otherwise each row shows its own photo */
.idx-stage { display: none; }

@media (min-width: 900px) {
  .js .idx-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 38%);
    column-gap: var(--sp-5);
    align-items: start;
  }
  .js .idx__media { display: none; }
  /* rows: number | title + sentence | tag; tall enough that each photo gets its own stretch of scroll */
  .js .idx__row {
    grid-template-columns: 3.4em minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    row-gap: 14px;
    min-height: clamp(170px, 30svh, 300px);
    align-content: start;
    cursor: default;
  }
  .js .idx__no { grid-column: 1; grid-row: 1; }
  .js .idx__title { grid-column: 2; grid-row: 1; }
  .js .idx__tag { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; color: var(--muted); }
  .js .idx__text { grid-column: 2 / -1; grid-row: 2; margin: 0; max-width: 30em; }
  .js .idx__title, .js .idx__tag { transition: opacity var(--dur-ui) var(--ease-ui), transform .7s var(--ease-ui), color var(--dur-ui) var(--ease-ui); }
  .js .idx__row:not(.is-active) .idx__title { opacity: .38; }
  .js .idx__row.is-active .idx__title { transform: translateX(12px); }
  .js .idx__row.is-active .idx__tag { color: var(--ink); }

  .js .idx-stage {
    display: block;
    position: sticky;
    top: 12svh;
    margin-top: clamp(22px, 2.3vw, 34px);
  }
  .idx-stage__frame {
    position: relative;
    width: min(100%, 58svh);
    aspect-ratio: 4 / 5;
    margin-left: auto;
    overflow: hidden;
    background: var(--stone);
    box-shadow: 0 30px 60px -28px rgba(21, 20, 18, .45);
  }
  .idx-stage__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .7s var(--ease-out), transform 1.2s var(--ease-out);
  }
  .idx-stage__img.is-active { opacity: 1; transform: none; }
  .idx-stage__cap {
    display: flex; justify-content: space-between; gap: 16px;
    width: min(100%, 58svh);
    margin: 14px 0 0 auto;
    color: var(--muted);
  }
  .rm .idx-stage__img, .rm .idx__title, .rm .idx__tag { transition: none; }
}
.idx-stage__img[data-pos="tokyo"], .idx__media img[data-pos="tokyo"] { object-position: 60% 20%; }
.idx-stage__img[data-pos="basquiat"], .idx__media img[data-pos="basquiat"] { object-position: 62% 30%; }

/* ---------- art ---------- */
.art {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-6);
  background: var(--concrete);
}
.art__title { grid-column: 3 / span 9; margin-top: var(--sp-5); }
/* pinboard: Victor's own photos from museums, galleries and a concert, pinned at slight angles
   (rotate is separate from GSAP's transform, so the fade-in keeps the tilt) */
.pinboard { margin-top: var(--sp-5); columns: 3; column-gap: clamp(20px, 3vw, 48px); }
.pin {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  position: relative;
  margin: 14px 0 clamp(28px, 3.4vw, 54px);
  padding: 10px 10px 0;
  background: var(--paper);
  rotate: var(--r, 0deg);
  box-shadow: 0 30px 50px -28px rgba(21, 20, 18, .5), 0 2px 5px rgba(21, 20, 18, .1);
}
.pin::before {
  content: "";
  position: absolute;
  left: 50%; top: -10px;
  width: 70px; height: 20px;
  translate: -50% 0;
  rotate: -3deg;
  background: rgba(244, 242, 237, .66);
  box-shadow: 0 1px 2px rgba(21, 20, 18, .12);
  z-index: 1;
}
.pin img { width: 100%; height: auto; }
.pin figcaption { margin: 0; padding: 11px 2px 13px; }

/* ---------- 04 path ---------- */
.path {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-6);
  background: var(--concrete);
}
.path__title { grid-column: 3 / span 9; margin-top: var(--sp-5); }
.path__steps { margin-top: var(--sp-5); align-items: start; }
.step { position: relative; }
.step--1 { grid-column: 1 / span 6; margin-top: clamp(90px, 13vw, 220px); }
.step--2 { grid-column: 7 / span 6; }
.step__label { display: flex; gap: 18px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--ink); }
.step__word {
  margin-top: calc(18px + .16em);
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: calc(clamp(50px, 7.2vw, 124px) * var(--hs));
  line-height: .94;
  letter-spacing: -.03em;
}
.step__sub { margin-top: 18px; color: var(--muted); max-width: 26em; }
.step__media { margin: 36px 0 0; width: min(340px, 64%); }
.step--1 .step__media { width: min(300px, 64%); }
.step--1 .step__media .frame { aspect-ratio: 560 / 470; }
.step--2 .step__media .frame { aspect-ratio: 2 / 3; }
/* the photo is narrower than its 2:3 frame, so it can only be cropped vertically; a 4.5 % wider box lets the
   frame trim the stranger's striped sleeve on the right edge */
.step--2 .step__media img { width: 104.5%; max-width: none; object-position: 50% 16%; }
.path__climb {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  color: var(--ink);
}
.path__quote {
  grid-column: 3 / span 8;
  margin: var(--sp-6) 0 0;
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: var(--fs-quote);
  line-height: 1.24;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.path__quote .qm { color: var(--gold); }
.path__quote .qm--open { margin-left: -.42em; padding-right: .06em; }
.path__quote .qm--close { padding-left: .04em; }
.path__cite { grid-column: 3 / span 8; margin-top: 22px; color: var(--muted); }

/* ---------- 05 home ---------- */
.home {
  position: relative;
  padding: var(--sp-5) 0 calc(var(--sp-6) + 110px);
  background: var(--concrete);
}
.home__title { grid-column: 3 / span 5; margin-top: var(--sp-5); }
.home__text { grid-column: 8 / span 4; margin-top: var(--sp-5); align-self: end; font-size: var(--fs-lead); max-width: 30em; }
.band {
  position: relative;
  margin-top: var(--sp-5);
}
.band__media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #11141b;
}
.band__poster, .band__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}
.band__video { opacity: 0; transition: opacity 1.5s linear; }
.band__video.is-on { opacity: 1; z-index: 1; }
.band__video.is-top { opacity: 1; z-index: 2; }
.band__shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(10, 12, 18, .38) 0%, rgba(10, 12, 18, 0) 26%),
    linear-gradient(0deg, rgba(10, 12, 18, .5) 0%, rgba(10, 12, 18, 0) 38%);
  pointer-events: none;
}
.band__top, .band__bottom {
  position: absolute;
  z-index: 4;
  left: clamp(16px, 2.2vw, 36px);
  right: clamp(16px, 2.2vw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  color: var(--paper);
}
.band__top { top: clamp(16px, 2vw, 30px); }
.band__bottom { bottom: clamp(18px, 2.2vw, 34px); align-items: flex-end; }
.band__coords {
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: calc(clamp(26px, 3vw, 50px) * var(--hs));
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.band__coords span { display: block; }
.band__coords .band__place { margin-bottom: 10px; letter-spacing: .14em; color: rgba(244, 242, 237, .78); }

.map-card {
  position: absolute;
  z-index: 5;
  right: clamp(16px, 6vw, 110px);
  bottom: clamp(-150px, -9vw, -60px);
  width: clamp(300px, 27vw, 400px);
  padding: 16px 16px 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 40px 70px -30px rgba(10, 12, 18, .6), 0 2px 6px rgba(10, 12, 18, .12);
  transform: perspective(1100px) rotateX(11deg) rotateY(-9deg) rotateZ(-2.5deg);
  transform-origin: 50% 60%;
  will-change: transform;
}
.map-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, var(--sheen, .16)) 50%, rgba(255, 255, 255, 0) 70%);
  background-size: 220% 100%;
  background-position: var(--sx, 50%) 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.map-card__head, .map-card__foot { display: flex; justify-content: space-between; gap: 12px; }
.map-card__head { padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.map-card__foot { padding-top: 9px; border-top: 1px solid var(--rule); color: var(--muted); }
.map__svg { width: 100%; height: auto; margin: 6px 0; overflow: visible; }
/* real terrain: toned hillshade (alpha WebP, multiplied onto the paper), 800/1200/1600 m contours */
.map__svg .m-relief { opacity: .42; mix-blend-mode: multiply; }
.map__svg .m-contours path { fill: none; stroke: #8f7d68; stroke-opacity: .58; stroke-width: .5; stroke-linejoin: round; }
.map__svg .m-contours .m-c1200 { stroke-opacity: .7; stroke-width: .6; }
.map__svg .m-river { fill: none; stroke: var(--sky-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.map__svg .m-lake { fill: var(--sky); fill-opacity: .55; stroke: var(--sky-deep); stroke-width: .75; stroke-linejoin: round; }
.map__svg .m-island { fill: var(--paper); stroke: var(--sky-deep); stroke-width: .5; }
.map__svg .m-peaks path { fill: var(--ink); }
.map__svg text {
  font-family: var(--ff-body); fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round;
}
.map__svg .m-peak { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.map__svg .m-h { font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.map__svg .m-lake-label { font-size: 12.5px; font-style: italic; fill: #284566; font-weight: 600; }
.map__svg .m-river-label { font-size: 12.5px; font-style: italic; fill: #284566; font-weight: 600; }
.map__svg .m-home-dot { fill: var(--gold); stroke: var(--paper); stroke-width: 1; }
.map__svg .m-home-ring { fill: none; stroke: var(--gold); stroke-width: 1.1; }
.map__svg .m-town { font-family: var(--ff-head); font-size: 14.5px; font-weight: var(--hw); }
.map__svg .m-scale path, .map__svg .m-north path { stroke: var(--ink); stroke-width: 1; fill: none; }
.map__svg .m-scale .m-halo { stroke: var(--paper); stroke-width: 3.4; stroke-linecap: round; }
.map__svg .m-north path { fill: var(--ink); stroke: none; }
.map__svg .m-scale text, .map__svg .m-north text { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; }

/* ---------- 06 in short ---------- */
.cv {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-6);
  background: var(--concrete);
}
.cv__title { grid-column: 3 / span 9; margin-top: var(--sp-5); }
.cv__list { margin: var(--sp-5) 0 0; border-bottom: 1px solid var(--rule); }
.cv__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
  align-items: baseline;
  padding: 22px 0 21px;
  border-top: 1px solid var(--rule);
}
.cv__row dt { grid-column: 3 / span 3; }
.cv__row dd {
  grid-column: 6 / span 7;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
  text-wrap: pretty;
}
.cv__row dd .muted { white-space: nowrap; }

/* ---------- footer ---------- */
.foot {
  position: relative;
  z-index: 2;
  background: var(--stone);
  color: var(--paper);
  padding: var(--sp-7) 0 calc(84px + env(safe-area-inset-bottom));
}
.foot .seam { color: var(--stone); }
.foot__label { color: var(--muted-dark); }
.foot__main { margin-top: var(--sp-5); align-items: end; }
.foot__title {
  grid-column: 1 / span 9;
  grid-row: 1;
  font-family: var(--ff-head);
  font-weight: var(--hw);
  font-size: calc(clamp(52px, 8.6vw, 150px) * var(--hs));
  line-height: .96;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.foot__sub { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--sp-4); color: var(--muted-dark); font-size: var(--fs-lead); }
.foot__cta { grid-column: 10 / span 3; grid-row: 1 / span 2; justify-self: end; align-self: end; }
.magnet-zone { padding: 26px; margin: -26px; display: inline-block; }
.magnet {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(120px, 10.5vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.magnet::before {
  content: "";
  position: absolute;
  left: -10%; top: -10%;
  width: 120%; height: 120%;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(102%);
  transition: transform .55s var(--ease-io);
  z-index: -1;
}
.magnet:hover::before, .magnet:focus-visible::before { transform: translateY(0); }
.magnet__label { display: grid; justify-items: center; gap: 8px; text-align: center; }
.magnet__arrow { width: 14px; height: 14px; }
.foot .magnet:focus-visible { outline-color: var(--paper); outline-offset: 6px; }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
  margin-top: var(--sp-6);
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
  color: var(--muted-dark);
}
.foot__bottom .clock { color: var(--paper); }
.foot__credit { text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: 12px; }
.foot__attr { flex-basis: 100%; margin-top: -4px; text-align: right; }

/* ---------- reveal pre-states (only when JS runs and motion is allowed) ---------- */
.js:not(.rm) [data-rise] { opacity: 0; }
.js:not(.rm) [data-fade] { opacity: 0; transform: translateY(18px); }
.js:not(.rm) [data-ridge] { clip-path: inset(100% 0 0 0); }
.js:not(.rm) [data-draw] { transform: scaleX(0); }
.js:not(.rm) .hero__name .line__inner { opacity: 0; }
.js:not(.rm) .hero__bar, .js:not(.rm) .hero__meta > * { opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  html:not(.js) .idx__title { grid-column: 3 / span 6; }
  html:not(.js) .idx__text { grid-column: 9 / span 4; }
  html:not(.js) .idx__tag { grid-column: 3 / -1; justify-self: start; margin-top: 14px; color: var(--muted); }
}

@media (max-width: 899px) {
  :root { --sp-6: clamp(64px, 14vw, 110px); --sp-7: clamp(96px, 22vw, 160px); }
  .chapter { display: flex; align-items: baseline; gap: 22px; }
  .chapter__aside { margin-left: auto; white-space: nowrap; }
  .intro__lead, .places__lead, .good__title, .art__title, .path__title, .cv__title, .home__title { grid-column: 1 / -1; }
  .intro__figure { grid-column: 1 / span 9; }
  .intro__body { grid-column: 1 / -1; margin-top: var(--sp-5); padding-bottom: 0; }
  .home__text { grid-column: 1 / span 10; margin-top: 24px; }

  .gallery { row-gap: var(--sp-5); }
  .g--1 { grid-column: 1 / -1; }
  .g--2 { grid-column: 4 / -1; margin-top: 0; }
  .g--3 { grid-column: 1 / span 6; }
  .g--4 { grid-column: 1 / -1; margin-top: 0; }
  .g--5 { grid-column: 1 / span 8; }
  .g--6 { grid-column: 5 / -1; margin-top: 0; }
  .g--7 { grid-column: 1 / span 8; margin-top: 0; }

  .idx__row { row-gap: 10px; }
  .idx__no { grid-column: 1 / -1; }
  .idx__title { grid-column: 1 / -1; }
  .idx__text { grid-column: 1 / span 11; margin-top: 4px; }
  .idx__tag { grid-column: 1 / -1; margin-top: 4px; }
  .idx__media { grid-column: 1 / -1; max-width: 560px; width: 100%; margin-top: 18px; }

  .step--1, .step--2 { grid-column: 1 / -1; margin-top: 0; }
  .step--2 { margin-top: var(--sp-6); }
  .path__quote, .path__cite { grid-column: 1 / -1; }
  .path__quote { padding-left: .42em; }

  .band__media { aspect-ratio: 4 / 5; }
  .band__bottom { bottom: 64px; }
  .map-card {
    position: relative;
    right: auto; bottom: auto;
    width: min(380px, 92%);
    margin: -40px 0 0 auto;
    transform: perspective(1100px) rotateX(10deg) rotateY(-8deg) rotateZ(-2deg);
  }
  .home { padding-bottom: var(--sp-7); }

  .pinboard { columns: 2; column-gap: 16px; }
  .pin { padding: 7px 7px 0; }
  .pin figcaption { flex-direction: column; gap: 2px; }
  .cv__row { row-gap: 6px; }
  .cv__row dt { grid-column: 1 / -1; color: var(--muted); }
  .cv__row dd { grid-column: 1 / -1; }
  .cv__row dd .muted { white-space: normal; }

  .foot__title { grid-column: 1 / -1; }
  .foot__sub { grid-column: 1 / -1; }
  .foot__cta { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: var(--sp-5); }
  .foot__bottom { flex-direction: column; gap: 10px; }
  .foot__attr { flex-basis: auto; margin-top: 0; text-align: left; }
}

@media (max-width: 899px) and (min-aspect-ratio: 1/1) {
  .band__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 520px) {
  .hero__meta { font-size: 10px; letter-spacing: .12em; }
  .chapter { gap: 16px; font-size: 10px; letter-spacing: .12em; }
  .band__top span:last-child { display: none; }
  .mq { padding-top: 40px; }
  .facts li { flex-direction: column; gap: 2px; }
  .facts li span:last-child { text-align: left; }
  /* the tilted card's right corner swings ~11 px past its box; keep it inside the 16 px gutter */
  .map-card { margin-right: 14px; }
}