:root {
  color-scheme: light;
  --paper: #ffffff;
  --paper-deep: #f7f7f3;
  --surface: #ffffff;
  --ink: #090909;
  --secondary: #4f4f4a;
  --muted: #696963;
  --hairline: #deded8;
  --hairline-strong: #151515;
  --brass: #fff27a;
  --brass-deep: #090909;
  --brass-soft: #fff27a;
  --shadow: none;
  --radius-control: 3px;
  --radius-card: 3px;
  --page: min(1240px, calc(100vw - 48px));
  --step--1: clamp(0.72rem, 0.68rem + 0.12vw, 0.79rem);
  --step-0: clamp(0.95rem, 0.89rem + 0.18vw, 1.06rem);
  --step-1: clamp(1.12rem, 1.02rem + 0.36vw, 1.34rem);
  --step-2: clamp(1.55rem, 1.3rem + 0.9vw, 2.15rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.15vw, 2.75rem);
  --step-4: clamp(2.55rem, 2rem + 1.8vw, 3.85rem);
}

/* ==========================================================================
   2026-07-29 ONE-SCREEN OPERATING ATLAS
   A height-aware hero: the copy, complete landscape, and five-room index share
   one viewport. Shorter laptop screens tighten the composition, not the crop.
   ========================================================================== */

.hero-atlas {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(circle at 1px 1px, rgba(9, 9, 9, 0.045) 0.65px, transparent 0.75px) 0 0 / 10px 10px,
    #fff;
}

.hero-atlas-copy {
  width: var(--page);
  margin: 0 auto;
}

.hero-atlas-eyebrow {
  margin: 0 0 clamp(8px, 1.25svh, 14px);
  color: var(--muted);
  font: 700 clamp(0.57rem, 0.66vw, 0.68rem)/1.35 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.09em;
}

.hero-atlas h1 {
  max-width: 16.5ch;
  margin: 0;
  font-size: clamp(2.2rem, min(3.55vw, 5.6svh), 3.35rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.97;
}

.hero-atlas h1 mark {
  padding: 0 0.05em;
  background: linear-gradient(transparent 69%, var(--brass) 69% 97%, transparent 97%);
  color: inherit;
}

.hero-atlas-thesis {
  max-width: 390px;
  padding-bottom: 0.08em;
  align-self: end;
}

.hero-atlas-thesis p {
  margin: 0;
  color: var(--secondary);
  font-size: clamp(0.82rem, min(1.05vw, 1.9svh), 1rem);
  line-height: 1.55;
}

.hero-atlas-thesis a {
  display: inline-flex;
  margin-top: clamp(8px, 1.6svh, 16px);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--brass);
  gap: 9px;
  align-items: center;
  font: 700 clamp(0.56rem, 0.66vw, 0.68rem)/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero-atlas-thesis a span {
  font-size: 0.9rem;
  transition: transform 160ms ease;
}

.hero-atlas-thesis a:hover span,
.hero-atlas-thesis a:focus-visible span {
  transform: translate(2px, 2px);
}

.hero-atlas-visual {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hero-atlas-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.hero-atlas-rail {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  border-top: 1px solid rgba(9, 9, 9, 0.2);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hero-atlas-rail a {
  position: relative;
  display: grid;
  min-width: 0;
  padding: clamp(9px, 1.25svh, 13px) clamp(8px, 1.1vw, 15px);
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(8px, 0.9vw, 13px);
  align-items: start;
}

.hero-atlas-rail a + a {
  border-left: 1px solid rgba(9, 9, 9, 0.15);
}

.hero-atlas-rail a::before {
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--brass);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: opacity 160ms ease, transform 180ms ease;
}

.hero-atlas-rail a:hover::before,
.hero-atlas-rail a:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

.hero-atlas-rail a > span:first-child {
  display: grid;
  width: clamp(24px, 2vw, 29px);
  height: clamp(24px, 2vw, 29px);
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--brass);
  place-items: center;
  font: 700 clamp(0.49rem, 0.55vw, 0.59rem)/1 "Space Mono", ui-monospace, monospace;
}

.hero-atlas-rail a > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.hero-atlas-rail strong {
  overflow: hidden;
  font-size: clamp(0.68rem, 0.82vw, 0.82rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-atlas-rail small {
  overflow: hidden;
  color: var(--muted);
  font: 700 clamp(0.44rem, 0.5vw, 0.53rem)/1.35 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 761px) {
  .hero-atlas {
    display: grid;
    height: calc(100svh - 94px);
    min-height: 0;
    max-height: calc(100svh - 94px);
    padding: clamp(14px, 2.6svh, 28px) 0 0;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .hero-atlas-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.46fr) minmax(285px, 0.74fr);
    gap: clamp(42px, 6vw, 92px);
    align-items: end;
  }

  .hero-atlas-visual {
    width: min(100%, calc((100svh - 242px) * 1.7768331562));
    margin: clamp(-6px, -0.8svh, -2px) auto 0;
  }
}

/* ==========================================================================
   2026-07-29 NARRATIVE AND FINISH PASS
   One progression, one accent, and one controlled layout system.
   ========================================================================== */

.hero-atlas h1 {
  max-width: 17.5ch;
  font-size: clamp(2.02rem, min(3.12vw, 5.1svh), 3.02rem);
  line-height: 0.98;
}

@media (min-width: 761px) and (max-height: 780px) {
  .hero-atlas h1 {
    font-size: clamp(1.95rem, 5.15svh, 2.52rem);
    line-height: 0.95;
  }
}

@media (max-width: 760px) {
  .hero-atlas h1 {
    max-width: 11.5ch;
    font-size: clamp(2.35rem, 10.8vw, 3.8rem);
  }
}

.site-header .nav a {
  transform: none !important;
}

.identity-section.profile-contact-section {
  padding-block: clamp(68px, 6vw, 96px);
}

.profile-contact-copy h2 {
  font-size: clamp(3.25rem, 4.65vw, 5rem);
}

.profile-contact-lead {
  max-width: 22ch;
}

.profile-contact-summary {
  max-width: 42ch;
}

.home-page > .section {
  padding-block: clamp(52px, 5.3vw, 74px) !important;
}

.home-page #contact .contact-home-panel--simple {
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr) !important;
  gap: clamp(32px, 5vw, 76px) !important;
  padding: clamp(30px, 3.8vw, 46px) !important;
  align-items: center !important;
}

.home-page #contact .contact-home-kicker {
  max-width: 18ch;
  font-size: clamp(1.7rem, 2.7vw, 2.75rem);
}

.home-page #contact .contact-channel-pills {
  grid-template-columns: 1fr !important;
}

@media (max-width: 980px) {
  .home-page #contact .contact-home-panel--simple {
    grid-template-columns: 1fr !important;
  }

  .home-page #contact .contact-channel-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .profile-contact-copy h2 {
    font-size: clamp(3rem, 14vw, 4.15rem);
  }

  .home-page #contact .contact-channel-pills {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   FINAL HERO COMPOSITION
   Uses the artwork's true visual bounds so copy, landscape and room index read
   as one first-screen composition without cropping the illustration.
   ========================================================================== */

@media (min-width: 761px) {
  .hero-atlas {
    display: grid;
    height: calc(100svh - 94px);
    min-height: 560px;
    max-height: calc(100svh - 94px);
    padding: clamp(12px, 2.1svh, 22px) 0 0;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .hero-atlas-copy {
    display: grid;
    width: var(--page);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.36fr) minmax(280px, 0.64fr);
    gap: clamp(48px, 7vw, 108px);
    align-items: center;
  }

  .hero-atlas-eyebrow {
    margin-bottom: clamp(7px, 1svh, 11px);
  }

  .hero-atlas h1 {
    max-width: 17ch;
    font-size: clamp(2.15rem, min(3.15vw, 5.25svh), 3.05rem);
    line-height: 0.98;
  }

  .hero-atlas-thesis {
    max-width: 360px;
    padding: 0;
  }

  .hero-atlas-thesis p {
    font-size: clamp(0.78rem, min(0.98vw, 1.75svh), 0.95rem);
    line-height: 1.5;
  }

  .hero-atlas-visual {
    width: min(var(--page), calc((100svh - 246px) * 1.7768331562));
    height: 100%;
    min-height: 0;
    margin: clamp(-8px, -0.8svh, -3px) auto 0;
    overflow: visible;
  }

  .hero-atlas-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  .hero-atlas-rail {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.96);
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .hero-atlas {
    padding-top: 9px;
  }

  .hero-atlas-copy {
    grid-template-columns: minmax(0, 1.48fr) minmax(250px, 0.62fr);
  }

  .hero-atlas h1 {
    font-size: clamp(2rem, 5.2svh, 2.48rem);
  }

  .hero-atlas-thesis p {
    font-size: 0.76rem;
    line-height: 1.42;
  }

  .hero-atlas-thesis a {
    margin-top: 7px;
  }

  .hero-atlas-visual {
    width: min(var(--page), calc((100svh - 220px) * 1.7768331562));
  }

  .hero-atlas-rail a {
    padding-top: 7px;
    padding-bottom: 8px;
  }
}

@media (min-width: 761px) and (max-height: 640px) {
  .hero-atlas {
    min-height: 500px;
  }

  .hero-atlas h1 {
    font-size: 1.95rem;
  }

  .hero-atlas-eyebrow {
    margin-bottom: 4px;
    font-size: 0.52rem;
  }

  .hero-atlas-thesis p {
    font-size: 0.7rem;
  }

  .hero-atlas-visual {
    width: min(var(--page), calc((100svh - 190px) * 1.7768331562));
  }

  .hero-atlas-rail small {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero-atlas {
    padding-top: 36px;
  }

  .hero-atlas-copy {
    gap: 18px;
  }

  .hero-atlas h1 {
    max-width: 12ch;
    font-size: clamp(2.35rem, 10.8vw, 3.75rem);
  }

  .hero-atlas-visual {
    width: 100%;
    margin: 24px auto 0;
    aspect-ratio: 1672 / 941;
    overflow: visible;
  }
}

@media (min-width: 761px) and (max-height: 780px) {
  .hero-atlas {
    padding-top: 10px;
  }

  .hero-atlas-eyebrow {
    margin-bottom: 6px;
  }

  .hero-atlas h1 {
    font-size: clamp(2.2rem, 5.8svh, 2.75rem);
    line-height: 0.93;
  }

  .hero-atlas-thesis p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .hero-atlas-thesis a {
    margin-top: 7px;
  }

  .hero-atlas-visual {
    width: min(100%, calc((100svh - 218px) * 1.7768331562));
  }

  .hero-atlas-rail a {
    padding-top: 7px;
    padding-bottom: 8px;
  }

  .hero-atlas-rail a > span:first-child {
    width: 23px;
    height: 23px;
  }
}

@media (min-width: 761px) and (max-height: 680px) {
  .hero-atlas-copy {
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.7fr);
  }

  .hero-atlas h1 {
    font-size: 2.05rem;
  }

  .hero-atlas-thesis p {
    font-size: 0.72rem;
  }

  .hero-atlas-thesis a {
    font-size: 0.51rem;
  }

  .hero-atlas-visual {
    width: min(100%, calc((100svh - 195px) * 1.7768331562));
  }

  .hero-atlas-rail small {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero-atlas {
    padding: 46px 0 0;
    overflow: hidden;
  }

  .hero-atlas-copy {
    display: grid;
    gap: 24px;
  }

  .hero-atlas h1 {
    max-width: 10.5ch;
    font-size: clamp(2.65rem, 12vw, 4.4rem);
  }

  .hero-atlas-thesis {
    max-width: 34rem;
  }

  .hero-atlas-visual {
    width: 112%;
    margin: 28px 0 0 -6%;
    aspect-ratio: 1672 / 941;
  }

  .hero-atlas-rail {
    display: flex;
    width: 100%;
    padding-left: max(14px, calc((100vw - var(--page)) / 2));
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .hero-atlas-rail::-webkit-scrollbar {
    display: none;
  }

  .hero-atlas-rail a {
    min-width: 172px;
    padding: 13px 16px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

* { box-sizing: border-box; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  overflow-x: clip;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3 { overflow-wrap: anywhere; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  width: 100%;
  min-height: 68px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, #fff 94%, transparent);
  backdrop-filter: blur(18px);
}

.mark, .footer-mark {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.34rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.mark { justify-self: start; }

.nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.8vw, 36px);
  font-size: var(--step--1);
  font-weight: 600;
}

.nav a {
  position: relative;
  padding: 22px 0 19px;
  color: var(--secondary);
}

.nav a::after {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  height: 2px;
  background: var(--brass);
  content: "";
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }

.page { width: var(--page); margin: 0 auto; }

.hero { padding: clamp(88px, 12vw, 154px) 0 clamp(72px, 10vw, 124px); }
.compact-hero { max-width: 1020px; padding-bottom: clamp(58px, 8vw, 92px); }
.compact-hero h1 { max-width: 960px; }

.catalog-line, .file-meta, .detail-label, .stamp-note, .crumb, .showcase-key,
.posting-eyebrow, .case-stamp, .case-foot, .reg-no, .reg-date, .reg-kind,
.reg-flag, .essay-no, .essay-source, .essay-arrow, .artifact-label, .now-line {
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.045em;
  line-height: 1.5;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.045em; line-height: 1.03; }
h1 { max-width: 930px; margin-top: 22px; font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

em { font-family: Fraunces, Georgia, serif; font-weight: 500; }

.intro {
  max-width: 760px;
  margin: 28px 0 0;
  color: var(--secondary);
  font-size: var(--step-1);
  line-height: 1.55;
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(520px, 1.22fr);
  gap: clamp(44px, 7vw, 92px);
  align-items: center;
}

.hero-copy h1 { font-size: clamp(2.9rem, 4.6vw, 4.75rem); }
.hero-copy .intro { max-width: 590px; }
.hero-actions, .contact-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

.button {
  display: inline-flex;
  min-height: 43px;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.button:hover { border-color: var(--brass); background: var(--surface); }
.button.primary { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: inset 0 -5px 0 rgba(255,242,122,.34); }
.button.primary:hover { background: var(--brass); color: var(--ink); }
.now-line { margin-top: 24px; }

.section { padding: clamp(72px, 9vw, 118px) 0; border-top: 1px solid var(--hairline); }
.sec-head { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.1fr); column-gap: 64px; margin-bottom: 46px; }
.sec-head .catalog-line, .sec-head h2 { grid-column: 1; }
.sec-head h2 { margin-top: 16px; }
.sec-lead { grid-column: 2; grid-row: 1 / span 2; max-width: 620px; margin: 0; color: var(--secondary); font-size: var(--step-1); }
.sec-head .text-link { grid-column: 2; margin-top: 20px; }

.text-link { display: inline-flex; width: fit-content; gap: 8px; align-items: center; color: var(--brass-deep); font-size: 0.88rem; font-weight: 700; }
.text-link::after { content: "↗"; transition: transform 160ms ease; }
.text-link:hover::after { transform: translate(2px, -2px); }

.card-stack, .postings { display: grid; gap: 22px; }
.card-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.card-row.three, .preview-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.feature, .pcard, .file-card, .compact-grid article {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.feature { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr); min-height: 420px; overflow: hidden; }
.feature-body { padding: clamp(28px, 4.5vw, 58px); }
.feature-viz { display: grid; min-height: 320px; align-items: center; border-left: 1px solid var(--hairline); background: var(--paper-deep); }
.feature-viz svg { width: 100%; }
.feature-viz img { width: 100%; height: 100%; object-fit: cover; }
.badge-row { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.feature-num, .pnum { color: var(--brass); font-family: Fraunces, Georgia, serif; font-size: 1.5rem; line-height: 1; }
.feature h3, .pcard h3 { margin-top: 20px; }
.lead { max-width: 700px; margin: 20px 0 0; color: var(--secondary); }
.field-note { margin: 24px 0 0; }
.stats, .metric-wall, .posting-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--hairline); }
.stats > div, .posting-metrics > div, .metric-wall > div { padding: 18px 12px 0 0; }
.stats strong, .posting-metrics strong, .metric-wall strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.6rem; font-weight: 600; line-height: 1; }
.stats span, .posting-metrics span, .metric-wall span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.72rem; line-height: 1.35; text-transform: uppercase; }
.pcard { padding: clamp(26px, 3.3vw, 40px); }
.pcard .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pviz { margin: 28px -10px 0; }
.v-line { fill: none; stroke: var(--brass-deep); stroke-width: 1.5; }
.v-dim { stroke: var(--hairline-strong); stroke-width: 1.2; }
.v-soft { fill: var(--hairline); }
.v-fill { fill: var(--brass); stroke: none; }
.v-dash { stroke-dasharray: 6 6; }
.v-text { fill: var(--paper); font-family: "Space Mono", monospace; font-size: 10px; text-transform: uppercase; }
.v-anno { fill: var(--muted); font-family: "Space Mono", monospace; font-size: 9px; text-transform: uppercase; }

/* Work: one escalating operating narrative */
.work-lede .intro { max-width: 840px; }
.rung-no { color: var(--brass-deep); font-family: Fraunces, Georgia, serif; font-size: 1.45rem; }
.rung-name { font-size: 0.92rem; font-weight: 700; }
.rung-scope { color: var(--muted); font-family: "Space Mono", monospace; font-size: 0.62rem; text-transform: uppercase; }
.posting { position: relative; padding: clamp(36px, 6vw, 74px); overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); scroll-margin-top: 92px; }
.posting:first-child { border-color: var(--ink); box-shadow: inset 5px 0 0 var(--brass); }
.ghost { position: absolute; top: -0.1em; right: 0.04em; color: color-mix(in srgb, var(--brass-soft) 42%, transparent); font-family: Fraunces, Georgia, serif; font-size: clamp(8rem, 20vw, 17rem); font-weight: 600; line-height: 1; pointer-events: none; }
.posting h2 { position: relative; z-index: 1; max-width: 850px; margin-top: 22px; }
.hl { background: linear-gradient(transparent 65%, var(--brass-soft) 65% 91%, transparent 91%); }
.posting-result { max-width: 760px; margin: 24px 0 0; color: var(--secondary); font-size: var(--step-1); }
.posting-metrics { position: relative; z-index: 1; margin-top: 38px; padding-top: 6px; }
.posting-detail { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 76px); margin-top: 52px; }
.detail-label { margin-bottom: 13px; color: var(--brass-deep); }
.situation, .takeaways li, .shipped li { color: var(--secondary); }
.takeaways { margin-top: 34px; }
.takeaways ul, .shipped ul { margin: 0; padding-left: 1.15rem; }
.takeaways li, .shipped li { margin-bottom: 14px; padding-left: 6px; }
.posting-metrics > div, .metric-wall > div { padding: 18px 12px 0 0; }
.stats strong, .posting-metrics strong, .metric-wall strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.6rem; font-weight: 600; line-height: 1; }
.stats span, .posting-metrics span, .metric-wall span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.72rem; line-height: 1.35; text-transform: uppercase; }
.pcard { padding: clamp(26px, 3.3vw, 40px); }
.pcard .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pviz { margin: 28px -10px 0; }
.v-line { fill: none; stroke: var(--brass-deep); stroke-width: 1.5; }
.v-dim { stroke: var(--hairline-strong); stroke-width: 1.2; }
.v-soft { fill: var(--hairline); }
.v-fill { fill: var(--brass); stroke: none; }
.v-dash { stroke-dasharray: 6 6; }
.v-text { fill: var(--paper); font-family: "Space Mono", monospace; font-size: 10px; text-transform: uppercase; }
.v-anno { fill: var(--muted); font-family: "Space Mono", monospace; font-size: 9px; text-transform: uppercase; }

/* Work: one escalating operating narrative */
.work-lede .intro { max-width: 840px; }
.rung-no { color: var(--brass-deep); font-family: Fraunces, Georgia, serif; font-size: 1.45rem; }
.rung-name { font-size: 0.92rem; font-weight: 700; }
.rung-scope { color: var(--muted); font-family: "Space Mono", monospace; font-size: 0.62rem; text-transform: uppercase; }
.posting { position: relative; padding: clamp(36px, 6vw, 74px); overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); scroll-margin-top: 92px; }
.posting:first-child { border-color: var(--ink); box-shadow: inset 5px 0 0 var(--brass); }
.ghost { position: absolute; top: -0.1em; right: 0.04em; color: color-mix(in srgb, var(--brass-soft) 42%, transparent); font-family: Fraunces, Georgia, serif; font-size: clamp(8rem, 20vw, 17rem); font-weight: 600; line-height: 1; pointer-events: none; }
.posting h2 { position: relative; z-index: 1; max-width: 850px; margin-top: 22px; }
.hl { background: linear-gradient(transparent 65%, var(--brass-soft) 65% 91%, transparent 91%); }
.posting-result { max-width: 760px; margin: 24px 0 0; color: var(--secondary); font-size: var(--step-1); }
.posting-metrics { position: relative; z-index: 1; margin-top: 38px; padding-top: 6px; }
.posting-detail { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 76px); margin-top: 52px; }
.detail-label { margin-bottom: 13px; color: var(--brass-deep); }
.situation, .takeaways li, .shipped li { color: var(--secondary); }
.takeaways { margin-top: 34px; }
.takeaways ul, .shipped ul { margin: 0; padding-left: 1.15rem; }
.takeaways li, .shipped li { margin-bottom: 14px; padding-left: 6px; }
.posting-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.posting-tags span, .chip { padding: 6px 10px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--muted); font-family: "Space Mono", monospace; font-size: 0.62rem; text-transform: uppercase; }

/* Projects: developed files above, honest field register below */
.projects-showcase { padding-bottom: clamp(72px, 10vw, 124px); }
.section-head { display: flex; justify-content: space-between; gap: 36px; align-items: end; margin-bottom: 38px; }
.section-head h2 { margin-top: 14px; }
.showcase-key { display: flex; gap: 8px; align-items: center; }
.showcase-key span { width: 18px; height: 2px; background: var(--brass); }
.showcase-file { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(250px, 0.52fr); gap: clamp(24px, 4vw, 54px); padding: clamp(30px, 5vw, 58px) 0; border-top: 1px solid var(--hairline-strong); scroll-margin-top: 92px; }
.showcase-file:last-child { border-bottom: 1px solid var(--hairline-strong); }
.case-stamp { color: var(--brass-deep); font-family: Fraunces, Georgia, serif; font-size: 1.55rem; }
.case-stamp span { display: block; margin-top: 8px; color: var(--muted); font-family: "Space Mono", monospace; font-size: 0.57rem; }
.case-copy h3 { margin-top: 17px; font-family: Inter, sans-serif; font-size: clamp(2rem, 3.7vw, 3.55rem); font-weight: 500; }
.case-thesis { max-width: 690px; margin: 22px 0 0; color: var(--secondary); }
.case-lesson { max-width: 650px; margin: 18px 0 24px; font-family: Fraunces, Georgia, serif; font-size: 1.05rem; font-style: italic; }
.case-artifact { position: relative; min-height: 300px; border: 1px solid var(--hairline); border-radius: var(--radius-control); overflow: hidden; background: var(--surface); }
.artifact-label { position: absolute; z-index: 2; top: 14px; left: 14px; }
.case-foot { grid-column: 2 / -1; display: flex; justify-content: space-between; gap: 20px; align-items: end; padding-top: 18px; border-top: 1px solid var(--hairline); }
.case-foot strong { color: var(--brass-deep); font-family: Fraunces, Georgia, serif; font-size: 1.35rem; }
.koel-artifact { background-image: radial-gradient(var(--hairline) 0.8px, transparent 0.8px); background-size: 13px 13px; }
.koel-route { position: absolute; inset: 68px 26px 92px; border: 2px dashed var(--brass); transform: rotate(-8deg); }
.koel-route i { position: absolute; width: 11px; height: 11px; border: 2px solid var(--brass); border-radius: 50%; background: var(--surface); }
.koel-route i:nth-child(1) { top: -7px; left: -7px; }.koel-route i:nth-child(2) { top: -7px; right: -7px; }.koel-route i:nth-child(3) { top: 50%; left: 50%; }.koel-route i:nth-child(4) { bottom: -7px; left: -7px; }.koel-route i:nth-child(5) { right: -7px; bottom: -7px; }
.artifact-readout { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 4px; padding: 14px; border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 94%, transparent); }
.artifact-readout strong { font-family: Fraunces, Georgia, serif; font-size: 1.45rem; }
.artifact-readout span { color: var(--muted); font-size: 0.72rem; }
.stahl-artifact { background: #090909; color: #fff; }
.stahl-artifact .artifact-label { color: #d7d7d2; }
.stahl-artifact ol { position: absolute; top: 58px; right: 16px; left: 16px; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stahl-artifact li { display: flex; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #3f3f3a; font-family: "Space Mono", monospace; font-size: 0.64rem; text-transform: uppercase; }
.stahl-artifact li span { color: #fff27a; }
.stahl-line { position: absolute; right: 18px; bottom: 24px; left: 18px; height: 3px; background: linear-gradient(90deg, #fff27a 0 62%, #fff 62% 72%, #fff27a 72%); }
.history-grid { position: absolute; top: 70px; right: 15px; left: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.history-grid b { display: grid; gap: 4px; padding: 12px 5px; border: 1px solid var(--hairline); font-family: Fraunces, Georgia, serif; font-size: 1.45rem; text-align: center; }
.history-grid small { color: var(--muted); font-family: Inter, sans-serif; font-size: 0.55rem; }
.history-steps { position: absolute; right: 22px; bottom: 36px; left: 22px; display: flex; justify-content: space-between; }
.history-steps::before { position: absolute; top: 50%; right: 3px; left: 3px; height: 1px; background: var(--hairline-strong); content: ""; }
.history-steps span { position: relative; width: 12px; height: 12px; border: 2px solid var(--brass); border-radius: 50%; background: var(--surface); }
.history-steps span:nth-child(-n+3) { background: var(--brass); }
.rural-artifact { background: color-mix(in srgb, var(--brass-soft) 22%, var(--surface)); }
.rural-map { position: absolute; inset: 66px 24px 58px; border: 1px solid var(--hairline-strong); border-radius: 45% 55% 42% 58%; transform: rotate(-5deg); }
.rural-map::before, .rural-map::after { position: absolute; background: var(--brass); content: ""; }
.rural-map::before { top: 44%; right: -10%; left: -10%; height: 2px; transform: rotate(18deg); }
.rural-map::after { top: -7%; bottom: -7%; left: 49%; width: 2px; transform: rotate(-17deg); }
.rural-map i { position: absolute; z-index: 1; width: 10px; height: 10px; border: 2px solid var(--brass-deep); border-radius: 50%; background: var(--surface); }
.rural-map i:nth-child(1) { top: 16%; left: 22%; }.rural-map i:nth-child(2) { top: 34%; right: 18%; }.rural-map i:nth-child(3) { bottom: 12%; left: 20%; }.rural-map i:nth-child(4) { right: 35%; bottom: 25%; }
.rural-artifact p { position: absolute; right: 12px; bottom: 12px; margin: 0; color: var(--brass-deep); font-family: Fraunces, Georgia, serif; font-size: 0.8rem; font-style: italic; line-height: 1.3; text-align: right; }
.digital-artifact { background: linear-gradient(180deg, #fff 0 76%, #fff27a 76%); }
.conversion-bars { position: absolute; inset: 66px 28px 54px; display: flex; gap: 12px; align-items: end; border-bottom: 1px solid #090909; }
.conversion-bars span { display: grid; width: 25%; height: var(--h); min-height: 28px; align-items: start; justify-content: center; padding-top: 6px; border: 1px solid #090909; border-bottom: 0; background: #fff; font: 500 .72rem/1 "Space Mono", monospace; }
.conversion-bars span:last-child { background: #090909; color: #fff27a; }
.conversion-axis { position: absolute; right: 28px; bottom: 25px; left: 28px; display: flex; justify-content: space-between; font: 500 .58rem/1 "Space Mono", monospace; text-transform: uppercase; }
.register-intro { max-width: 680px; margin: -10px 0 34px; color: var(--secondary); }

/* Register */
.register-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: transparent; cursor: pointer; }
.chip:hover, .chip.is-active { border-color: var(--brass-deep); background: var(--brass-soft); color: var(--ink); }
.register-count { margin: 20px 0 12px; color: var(--muted); font-size: 0.82rem; }
.register { margin: 0; padding: 0; border-top: 1px solid var(--hairline-strong); list-style: none; }
.register li { border-bottom: 1px solid var(--hairline); }
.register li.is-hidden { display: none; }
.register-row { display: grid; grid-template-columns: 86px 90px 72px minmax(0, 1fr) 110px; gap: 16px; align-items: start; padding: 18px 8px; }
a.register-row:hover { background: var(--surface); }
.reg-title { font-weight: 650; line-height: 1.35; }
.reg-title small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.reg-flag { text-align: right; }

/* Studio: a selective workbench */
.studio-lede { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: end; }
.studio-lede .intro { margin-bottom: 6px; }
.studio-note { max-width: 360px; margin: 0; padding-left: 20px; border-left: 2px solid var(--brass); color: var(--secondary); font-family: Fraunces, Georgia, serif; font-size: 1.08rem; font-style: italic; }
.bench { display: grid; gap: 0; border-top: 1px solid var(--hairline-strong); }
.bench-item { display: grid; grid-template-columns: 72px minmax(180px, 0.65fr) minmax(260px, 1fr) 130px; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.bench-item h3 { letter-spacing: -0.04em; }
.bench-item p { margin: 0; color: var(--secondary); }
.bench-status { justify-self: end; padding: 5px 9px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--muted); font-family: "Space Mono", monospace; font-size: 0.6rem; text-transform: uppercase; }
.bench-item.featured { padding: 42px 0; }
.bench-item.featured h3 { font-family: Fraunces, Georgia, serif; font-size: clamp(2.2rem, 4vw, 4rem); }
.bench-meta { color: var(--brass-deep); font-family: Fraunces, Georgia, serif; font-size: 1.35rem; }

/* Writing */
.writing-preview { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr); gap: 0; }
.note-image { width: 100%; height: 100%; min-height: 420px; border-radius: var(--radius-card) 0 0 var(--radius-card); object-fit: cover; }
.writing-feature { display: flex; padding: clamp(34px, 6vw, 72px); border-radius: 0 var(--radius-card) var(--radius-card) 0; flex-direction: column; justify-content: center; }
.pull-quote { margin: 28px 0 0; padding-left: 20px; border-left: 2px solid var(--brass); font-family: Fraunces, Georgia, serif; font-size: var(--step-2); line-height: 1.25; }
.reading-time { margin-top: 16px; color: var(--muted); font-family: "Space Mono", monospace; font-size: 0.66rem; text-transform: uppercase; }
.essay-list { margin: 0; padding: 0; border-top: 1px solid var(--hairline-strong); list-style: none; }
.essay-list li { border-bottom: 1px solid var(--hairline); }
.essay-list a { display: grid; grid-template-columns: 88px 110px minmax(0, 1fr) 42px; gap: 20px; padding: 22px 8px; align-items: start; }
.essay-list a:hover { background: var(--surface); }
.essay-title { font-weight: 650; }
.essay-title small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.essay-arrow { text-align: right; }

/* Dossiers */
.crumb { display: flex; justify-content: space-between; gap: 24px; }
.crumb a { color: var(--brass-deep); }
.dossier-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); gap: clamp(48px, 8vw, 100px); margin-top: 32px; align-items: start; }
.dossier-grid .intro { margin-top: 0; }
.dossier-meta { margin: 0; border-top: 1px solid var(--hairline-strong); }
.dossier-meta div { display: grid; grid-template-columns: 80px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.dossier-meta dt { color: var(--muted); font-family: "Space Mono", monospace; font-size: 0.64rem; text-transform: uppercase; }
.dossier-meta dd { margin: 0; font-size: 0.88rem; }
.archive-metrics { margin: 0; }
.archive-metrics > div { min-height: 115px; padding: 22px 16px; border-left: 1px solid var(--hairline); }
.archive-metrics > div:first-child { border-left: 0; }
.archive-metrics strong { font-size: clamp(2rem, 4vw, 3.8rem); }
.dossier-section { display: grid; grid-template-columns: 0.36fr minmax(0, 1fr); column-gap: clamp(40px, 8vw, 110px); }
.dossier-section h2, .dossier-section > p:not(.catalog-line), .dossier-section > ul, .dossier-section > div { grid-column: 2; }
.dossier-section h2 { max-width: 820px; }
.dossier-section > p:not(.catalog-line) { max-width: 820px; margin: 24px 0 0; color: var(--secondary); }
.dossier-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 34px; background: var(--hairline); }
.dossier-cols article { padding: 28px; background: var(--surface); }
.dossier-cols h3 { margin-top: 12px; }
.dossier-cols p:last-child { color: var(--secondary); }
.insight-chain { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; align-items: center; }
.insight-chain span:not(.chain-arrow) { padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-control); font-size: 0.8rem; }
.chain-arrow { color: var(--brass); }
.arc-list { margin: 34px 0 0; padding: 0; border-top: 1px solid var(--hairline); list-style: none; }
.arc-list li { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.arc-label { color: var(--brass-deep); font-family: "Space Mono", monospace; font-size: 0.68rem; text-transform: uppercase; }
.arc-note { color: var(--secondary); }
.dossier-nav { display: flex; justify-content: space-between; gap: 22px; padding: 30px 0 80px; border-top: 1px solid var(--hairline-strong); }
.dossier-nav a { color: var(--brass-deep); font-size: 0.85rem; font-weight: 700; }

.compact-grid, .preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.compact-grid article, .file-card { padding: 28px; }
.compact-grid h3, .file-card h3 { margin-top: 12px; }
.compact-grid p:last-child, .file-card p:last-child { color: var(--secondary); }
.contact-feature { grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); }

.site-footer { display: flex; justify-content: space-between; gap: 24px; align-items: end; width: var(--page); margin: 0 auto; padding: 44px 0; border-top: 1px solid var(--hairline-strong); }
.footer-mark { color: var(--brass-deep); font-size: 2rem; }

@media (max-width: 920px) {
  :root { --page: min(100% - 36px, 760px); }
  .site-header { grid-template-columns: 42px minmax(0, 1fr); padding: 0 16px; }
  .nav { justify-content: start; gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .hero-split { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-lead, .sec-head .text-link { grid-column: 1; grid-row: auto; }
  .sec-lead { margin-top: 22px; }
  .feature { grid-template-columns: 1fr; }
  .feature-viz { border-top: 1px solid var(--hairline); border-left: 0; }
  .card-row.three, .preview-grid.three { grid-template-columns: 1fr; }
  .posting-detail, .dossier-grid, .studio-lede { grid-template-columns: 1fr; }
  .showcase-file { grid-template-columns: 44px minmax(0, 1fr); }
  .case-artifact { grid-column: 2; min-height: 260px; }
  .case-foot { grid-column: 2; }
  .register-row { grid-template-columns: 76px 78px minmax(0, 1fr) 90px; }
  .reg-kind { display: none; }
  .bench-item { grid-template-columns: 56px 0.7fr 1.3fr; }
  .bench-status { grid-column: 2 / -1; justify-self: start; }
  .dossier-section { grid-template-columns: 1fr; }
  .dossier-section h2, .dossier-section > p:not(.catalog-line), .dossier-section > ul, .dossier-section > div { grid-column: 1; }
}

@media (max-width: 640px) {
  :root { --page: calc(100% - 28px); }
  body { background-size: 100% 28px; }
  .site-header { position: relative; grid-template-columns: 1fr; min-height: 58px; }
  .nav { grid-column: 1 / -1; grid-row: 2; padding: 0 0 11px; }
  .nav a { padding: 5px 0; white-space: nowrap; }
  .nav a::after { bottom: 0; }
  .hero { padding-top: 72px; }
  .hero-copy h1 { font-size: clamp(3rem, 15vw, 4.7rem); }
  .card-row, .stats, .posting-metrics, .metric-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-viz { min-height: 230px; }
  .feature-body, .pcard { padding: 26px; }
  .posting { padding: 30px 24px; }
  .ghost { font-size: 8rem; }
  .posting-detail { margin-top: 38px; }
  .showcase-head { align-items: start; flex-direction: column; }
  .showcase-file { grid-template-columns: 1fr; }
  .case-stamp, .case-copy, .case-artifact, .case-foot { grid-column: 1; }
  .case-stamp span { display: inline; margin-left: 8px; }
  .case-foot { align-items: start; flex-direction: column; }
  .register-row { grid-template-columns: 62px minmax(0, 1fr) 72px; gap: 12px; padding: 16px 3px; }
  .reg-date, .reg-kind { display: none; }
  .reg-flag { font-size: 0.57rem; }
  .bench-item { grid-template-columns: 46px 1fr; }
  .bench-item > p:not(.bench-meta), .bench-status { grid-column: 2; }
  .writing-preview { grid-template-columns: 1fr; }
  .note-image { min-height: 280px; border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .writing-feature { border-radius: 0 0 var(--radius-card) var(--radius-card); }
  .essay-list a { grid-template-columns: 66px minmax(0, 1fr) 36px; gap: 12px; }
  .essay-source { display: none; }
  .dossier-cols { grid-template-columns: 1fr; }
  .archive-metrics > div:nth-child(3) { border-left: 0; }
  .arc-list li { grid-template-columns: 1fr; gap: 6px; }
  .dossier-nav { align-items: flex-start; flex-direction: column; }
  .compact-grid { grid-template-columns: 1fr; }
}

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

/* Graduation hero: five clear stages, one operating direction. */
.hero-journey {
  padding: clamp(46px, 5.5vw, 72px) 0 clamp(76px, 8vw, 108px);
  overflow: hidden;
  color: #090909;
  background: #fff;
}


.hero-journey .hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
  gap: clamp(48px, 8vw, 118px);
  padding: 0 2px clamp(34px, 4vw, 48px);
  align-items: end;
}

.hero-journey .hero-copy > div { min-width: 0; }

.hero-journey .hero-copy p {
  margin: 0;
  color: #686862;
  font: 500 0.64rem/1.4 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero-journey .hero-copy h1 {
  max-width: 760px;
  margin: 15px 0 0;
  font: 500 clamp(2.8rem, 4.35vw, 3.95rem)/1.03 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.052em;
}

.hero-journey .hero-copy mark {
  padding: 0 0.07em;
  color: inherit;
  background: linear-gradient(transparent 58%, #fff27a 58% 94%, transparent 94%);
}

.hero-journey .hero-copy .intro-copy {
  max-width: 430px;
  padding-bottom: 3px;
  color: #4f4f4a;
  font: 400 clamp(0.96rem, 1.2vw, 1.08rem)/1.62 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.hero-journey .map-shell { margin: 0; }

.hero-journey .journey-frame {
  overflow: hidden;
  border: 1px solid #151515;
  background: #fff;
}

.hero-journey .journey-canvas {
  border-bottom: 1px solid #deded8;
}

.hero-journey .journey-map {
  position: relative;
  background-color: #fff;
}

.hero-journey .journey-map--desktop {
  min-height: 360px;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.08) 0.8px, transparent 0.9px);
  background-size: 28px 28px;
}

.hero-journey .journey-map--mobile { display: none; }

.hero-journey .terrain-meta {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 24px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  color: #65655f;
  font: 500 0.59rem/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.07em;
}

.hero-journey .journey-route {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-journey .route-highlight,
.hero-journey .route-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-journey .route-highlight {
  stroke: #fff27a;
  stroke-width: 17;
}

.hero-journey .route-line {
  stroke: #090909;
  stroke-width: 1.8;
}

.hero-journey .journey-stages {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.hero-journey .journey-stop {
  color: #090909;
  cursor: pointer;
  font: inherit;
}

.hero-journey .journey-stop--desktop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  width: 190px;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 9px;
  justify-items: center;
  text-align: center;
  transform: translate(-50%, -13px);
}

.hero-journey .journey-node {
  position: relative;
  z-index: 2;
  display: grid;
  width: 27px;
  height: 27px;
  border: 2px solid #090909;
  border-radius: 50%;
  background: #fff;
  font: 700 0.5rem/1 "Space Mono", ui-monospace, monospace;
  place-items: center;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hero-journey .journey-label {
  display: grid;
  gap: 4px;
  justify-items: center;
  transition: transform 160ms ease;
}

.hero-journey .journey-label small {
  color: #666660;
  font: 500 0.57rem/1.25 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
}

.hero-journey .journey-label strong {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero-journey .journey-label em {
  display: inline-block;
  margin-top: 2px;
  padding: 4px 7px;
  border: 1px solid #d7d7d1;
  background: #fff;
  color: #4f4f4a;
  font: 500 0.55rem/1.15 "Space Mono", ui-monospace, monospace;
  font-style: normal;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.hero-journey .journey-stop:hover .journey-node,
.hero-journey .journey-stop:focus-visible .journey-node,
.hero-journey .journey-stop.is-active .journey-node {
  background: #fff27a;
  box-shadow: 0 0 0 6px rgba(255, 242, 122, 0.34);
  transform: scale(1.08);
}

.hero-journey .journey-stop:hover .journey-label,
.hero-journey .journey-stop:focus-visible .journey-label {
  transform: translateY(2px);
}

.hero-journey .journey-stop.is-active .journey-label em {
  border-color: #090909;
  background: #fff27a;
  color: #090909;
}

.hero-journey .journey-stop:focus-visible {
  outline: 0;
}

.hero-journey .journey-stop:focus-visible .journey-node {
  outline: 2px solid #090909;
  outline-offset: 5px;
}

.hero-journey .journey-story {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(360px, 1.6fr) auto;
  gap: clamp(24px, 4vw, 62px);
  min-height: 98px;
  padding: 22px 26px;
  align-items: center;
  background: #fff;
}

.hero-journey .journey-story-heading {
  display: grid;
  gap: 5px;
}

.hero-journey .journey-story-heading span {
  color: #686862;
  font: 500 0.61rem/1.35 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
}

.hero-journey .journey-story-heading strong {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero-journey .journey-story p {
  max-width: 640px;
  margin: 0;
  color: #4f4f4a;
  font-size: 0.86rem;
  line-height: 1.55;
}

.hero-journey .journey-story a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #151515;
  color: #090909;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 160ms ease;
}

.hero-journey .journey-story a:hover { background: #fff27a; }

.hero-journey .map-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  padding: 13px 2px 0;
  align-items: center;
  color: #62625d;
  font: 500 0.54rem/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
}

.hero-journey .map-footer strong {
  padding: 5px 9px;
  background: #fff27a;
  color: #090909;
  font-weight: 500;
}

.hero-journey .map-footer span:last-child { justify-self: end; }

@media (max-width: 760px) {
  .hero-journey { padding-top: 38px; }

  .hero-journey .hero-copy {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 0 3px 30px;
  }

  .hero-journey .hero-copy h1 {
    max-width: 350px;
    font-size: clamp(2.28rem, 10vw, 2.7rem);
  }

  .hero-journey .hero-break { display: none; }

  .hero-journey .hero-copy .intro-copy {
    max-width: 345px;
    font-size: 0.96rem;
  }

  .hero-journey .journey-map--desktop { display: none; }

  .hero-journey .journey-map--mobile {
    display: block;
    padding: 0 18px 8px;
  }

  .hero-journey .terrain-meta {
    top: 18px;
    right: 18px;
    left: 18px;
  }

  .hero-journey .journey-mobile-stages {
    position: relative;
    display: grid;
    padding: 52px 0 8px;
  }

  .hero-journey .journey-mobile-stages::before,
  .hero-journey .journey-mobile-stages::after {
    position: absolute;
    top: 78px;
    bottom: 48px;
    left: 13px;
    content: "";
  }

  .hero-journey .journey-mobile-stages::before {
    width: 10px;
    background: #fff27a;
    transform: translateX(-50%);
  }

  .hero-journey .journey-mobile-stages::after {
    width: 1px;
    background: #090909;
  }

  .hero-journey .journey-stop--mobile {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 84px;
    width: 100%;
    padding: 10px 0;
    border: 0;
    background: transparent;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    text-align: left;
  }

  .hero-journey .journey-stop--mobile .journey-node {
    width: 26px;
    height: 26px;
  }

  .hero-journey .journey-stop--mobile .journey-label {
    gap: 3px;
    justify-items: start;
  }

  .hero-journey .journey-stop--mobile .journey-label strong {
    font-size: 0.82rem;
  }

  .hero-journey .journey-stop--mobile .journey-label em {
    margin-top: 3px;
  }

  .hero-journey .journey-story {
    grid-template-columns: 1fr;
    gap: 13px;
    min-height: 198px;
    padding: 20px;
    align-content: start;
  }

  .hero-journey .journey-story p { font-size: 0.84rem; }
  .hero-journey .journey-story a { width: fit-content; }

  .hero-journey .map-footer {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 13px 3px 0;
  }

  .hero-journey .map-footer strong { justify-self: start; }
  .hero-journey .map-footer span:last-child { justify-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-journey .hero-copy { animation: hero-enter 560ms ease both; }
  .hero-journey .journey-frame { animation: hero-enter 650ms 100ms ease both; }
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Impossible operating landscape. */
.hero-journey .journey-canvas {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.hero-journey .landscape-viewport {
  overflow: hidden;
  background: #fff;
}

.hero-journey .journey-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  min-height: 0;
  isolation: isolate;
  background: #fff;
}

.hero-journey .operator-landscape {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.03);
}

.hero-journey .journey-map::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 12px solid rgba(255, 255, 255, 0.68);
  content: "";
  pointer-events: none;
}

.hero-journey .terrain-meta {
  z-index: 4;
  top: 18px;
  right: 22px;
  left: 22px;
  color: #4f4f49;
  text-shadow: 0 1px 0 #fff, 0 0 10px #fff;
}

.hero-journey .terrain-meta b {
  color: #090909;
  font: inherit;
}

.hero-journey .journey-stages {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.hero-journey .journey-stop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  width: 176px;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 8px;
  justify-items: center;
  text-align: center;
  transform: translate(-50%, -14px);
}

.hero-journey .journey-node {
  width: 29px;
  height: 29px;
  border-width: 1.5px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
}

.hero-journey .journey-label {
  min-width: 136px;
  padding: 7px 10px 8px;
  border: 1px solid rgba(9, 9, 9, 0.72);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.09);
  gap: 3px;
  backdrop-filter: blur(6px);
}

.hero-journey .journey-label small {
  color: #686862;
  font-size: 0.5rem;
}

.hero-journey .journey-label strong {
  font-size: 0.72rem;
  letter-spacing: 0.025em;
}

.hero-journey .journey-label em {
  overflow: hidden;
  max-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 0.49rem;
  transition: max-height 180ms ease, margin 180ms ease, padding 180ms ease, opacity 180ms ease;
}

.hero-journey .journey-stop:hover .journey-label,
.hero-journey .journey-stop:focus-visible .journey-label,
.hero-journey .journey-stop.is-active .journey-label {
  border-color: #090909;
  transform: translateY(2px);
}

.hero-journey .journey-stop:hover .journey-label em,
.hero-journey .journey-stop:focus-visible .journey-label em,
.hero-journey .journey-stop.is-active .journey-label em {
  max-height: 24px;
  margin-top: 3px;
  padding: 3px 5px;
  border: 1px solid #090909;
  opacity: 1;
}

.hero-journey .journey-stop.is-active .journey-label {
  background: rgba(255, 255, 255, 0.97);
}

.hero-journey .journey-stop.is-active .journey-label em {
  background: #fff27a;
}

.hero-journey .journey-stop:hover .journey-node,
.hero-journey .journey-stop:focus-visible .journey-node,
.hero-journey .journey-stop.is-active .journey-node {
  background: #fff27a;
  box-shadow: 0 0 0 6px rgba(255, 242, 122, 0.35), 0 4px 18px rgba(0, 0, 0, 0.14);
}

.hero-journey .landscape-guide { display: none; }

@media (max-width: 760px) {
  .hero-journey .landscape-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-color: #090909 #ecece6;
    scrollbar-width: thin;
  }

  .hero-journey .journey-map {
    width: 860px;
    height: 484px;
    aspect-ratio: auto;
    scroll-snap-align: start;
  }

  .hero-journey .journey-map::after {
    border-width: 8px;
  }

  .hero-journey .terrain-meta {
    top: 14px;
    right: 16px;
    left: 16px;
    font-size: 0.5rem;
  }

  .hero-journey .journey-stop {
    width: 148px;
    gap: 6px;
  }

  .hero-journey .journey-node {
    width: 27px;
    height: 27px;
  }

  .hero-journey .journey-label {
    min-width: 126px;
    padding: 6px 8px 7px;
  }

  .hero-journey .journey-label strong { font-size: 0.66rem; }

  .hero-journey .landscape-guide {
    display: grid;
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid #deded8;
    color: #666660;
    font: 500 0.5rem/1.2 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.06em;
    grid-template-columns: auto auto minmax(34px, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  .hero-journey .landscape-guide b { color: #090909; font-weight: 500; }
  .hero-journey .landscape-guide i { height: 1px; background: #090909; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-journey .operator-landscape {
    animation: landscape-reveal 900ms 120ms cubic-bezier(.2,.7,.2,1) both;
  }
}

/* ==========================================================================
   2026-08-24 MOBILE HERO + SINGLE-ROW NAV CORRECTION
   Preserve the complete operating landscape, keep the five-stage index to
   two deliberate rows, and hold the primary header in one compact pill row.
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --header-offset: 72px;
  }

  .site-header {
    min-height: 64px;
    padding:
      max(8px, env(safe-area-inset-top))
      max(var(--responsive-gutter), env(safe-area-inset-right))
      8px
      max(var(--responsive-gutter), env(safe-area-inset-left));
    grid-template-columns: 44px minmax(176px, 1fr) auto;
    grid-template-rows: 48px;
    gap: 8px;
  }

  .site-header .mark {
    grid-column: 1;
    grid-row: 1;
  }

  .site-header .nav {
    display: grid;
    width: 100%;
    min-height: 48px !important;
    height: 48px;
    margin: 0;
    padding: 2px !important;
    overflow: hidden;
    border: 1px solid rgba(9, 9, 9, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 22px rgba(9, 9, 9, 0.06);
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 0;
  }

  .site-header .nav a {
    min-height: 44px !important;
    height: 44px;
    padding: 0 clamp(4px, 1.5vw, 10px) !important;
    border-radius: 999px;
    font-size: clamp(0.64rem, 1.65vw, 0.72rem);
  }

  .site-header .nav a::after {
    display: none;
  }

  .site-header .nav a:hover,
  .site-header .nav a:focus-visible {
    background: #f7f7f3;
  }

  .site-header .nav a[aria-current="page"] {
    background: var(--brass);
    color: var(--ink);
  }

  .site-header .contact-pill {
    grid-column: 3;
    grid-row: 1;
  }

  .hero-atlas-visual {
    height: auto;
    aspect-ratio: 1672 / 941;
    overflow: visible;
  }

  .hero-atlas-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .hero-atlas-rail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .hero-atlas-rail a {
    min-height: 72px;
    grid-column: span 2;
  }

  .hero-atlas-rail a + a,
  .hero-atlas-rail a:nth-child(odd),
  .hero-atlas-rail a:nth-child(n + 3) {
    border-top: 0;
    border-left: 0;
  }

  .hero-atlas-rail a:nth-child(2),
  .hero-atlas-rail a:nth-child(3),
  .hero-atlas-rail a:nth-child(5) {
    border-left: 1px solid rgba(9, 9, 9, 0.15);
  }

  .hero-atlas-rail a:nth-child(4),
  .hero-atlas-rail a:nth-child(5) {
    border-top: 1px solid rgba(9, 9, 9, 0.15);
  }

  .hero-atlas-rail a:nth-child(4) {
    grid-column: 1 / 4;
  }

  .hero-atlas-rail a:nth-child(5) {
    grid-column: 4 / 7;
  }
}

@media (max-width: 480px) {
  .site-header {
    padding-inline: max(10px, env(safe-area-inset-left));
    grid-template-columns: 44px minmax(176px, 1fr) 44px;
    gap: 4px;
  }

  .site-header .contact-pill {
    width: 44px;
    min-width: 44px !important;
    padding: 5px !important;
  }

  .site-header .contact-pill span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hero-atlas-rail a {
    padding-inline: 5px;
    gap: 6px;
  }

  .hero-atlas-rail a > span:first-child {
    width: 26px;
    height: 26px;
  }

  .hero-atlas-rail strong {
    font-size: 0.58rem;
  }

  .hero-atlas-rail small {
    font-size: 0.39rem;
  }
}

@keyframes landscape-reveal {
  from { opacity: 0; transform: scale(1.018); }
  to { opacity: 1; transform: scale(1); }
}

/* Full-bleed landscape, with the editorial copy still locked to the archive grid. */
.hero-journey {
  overflow: visible;
}

.hero-journey .map-shell {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.hero-journey .journey-frame {
  overflow: visible;
  border: 0;
}

.hero-journey .journey-canvas {
  border: 0;
}

.hero-journey .journey-map::after {
  display: none;
}

.hero-journey .terrain-meta {
  right: max(24px, calc((100vw - 1240px) / 2));
  left: max(24px, calc((100vw - 1240px) / 2));
}

.hero-journey .journey-story {
  padding-right: max(24px, calc((100vw - 1240px) / 2));
  padding-left: max(24px, calc((100vw - 1240px) / 2));
  border-top: 1px solid #deded8;
  border-bottom: 1px solid #deded8;
}

.hero-journey .map-footer {
  width: var(--page);
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 760px) {
  .hero-journey .terrain-meta {
    right: 16px;
    left: 16px;
  }

  .hero-journey .journey-story {
    padding-right: 20px;
    padding-left: 20px;
  }

  .hero-journey .map-footer {
    width: calc(100% - 28px);
  }
}

/* Viewport-fit hero and explicit interactive labels. */
.hero-journey .journey-label {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow:
    0 1px 0 #fff,
    1px 0 0 #fff,
    -1px 0 0 #fff,
    0 -1px 0 #fff,
    0 0 10px #fff,
    0 0 18px #fff;
}

.hero-journey .journey-label strong {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 1px 3px;
  isolation: isolate;
}

.hero-journey .journey-label strong::before {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 38%;
  background: #fff27a;
  content: "";
  opacity: 0.82;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 160ms ease, transform 180ms ease;
}

.hero-journey .journey-label::after {
  color: #090909;
  content: "OPEN ↗";
  font: 700 0.46rem/1.1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  opacity: 0.74;
  transition: opacity 160ms ease, transform 160ms ease;
}

.hero-journey .journey-label em {
  text-shadow: 0 0 8px #fff, 0 0 14px #fff;
}

.hero-journey .journey-stop:hover .journey-label,
.hero-journey .journey-stop:focus-visible .journey-label,
.hero-journey .journey-stop.is-active .journey-label {
  border: 0;
  background: transparent;
  transform: translateY(3px);
}

.hero-journey .journey-stop:hover .journey-label strong::before,
.hero-journey .journey-stop:focus-visible .journey-label strong::before,
.hero-journey .journey-stop.is-active .journey-label strong::before {
  opacity: 1;
  transform: scaleX(1);
}

.hero-journey .journey-stop:hover .journey-label::after,
.hero-journey .journey-stop:focus-visible .journey-label::after {
  opacity: 1;
  transform: translate(2px, -1px);
}

.hero-journey .journey-stop:hover .journey-label em,
.hero-journey .journey-stop:focus-visible .journey-label em,
.hero-journey .journey-stop.is-active .journey-label em {
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-journey .journey-node::after {
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(9, 9, 9, 0.46);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: stage-invitation 2.4s ease-out infinite;
}

@keyframes stage-invitation {
  0%, 35% { opacity: 0.72; transform: scale(0.78); }
  72%, 100% { opacity: 0; transform: scale(1.22); }
}

@media (min-width: 761px) {
  .hero-journey {
    position: relative;
    height: calc(100svh - 68px);
    min-height: 700px;
    max-height: 980px;
    padding: 0;
  }

  .hero-journey .hero-copy {
    position: absolute;
    z-index: 6;
    top: clamp(34px, 5svh, 58px);
    right: max(24px, calc((100vw - 1240px) / 2));
    left: max(24px, calc((100vw - 1240px) / 2));
    display: block;
    width: min(760px, calc(100% - 48px));
    padding: 0;
    pointer-events: none;
  }

  .hero-journey .hero-copy h1 {
    max-width: 760px;
    margin-top: 12px;
    font-size: clamp(2.55rem, 3.45vw, 3.65rem);
  }

  .hero-journey .hero-copy .intro-copy {
    max-width: 560px;
    margin-top: 17px;
    padding: 0;
    font-size: clamp(0.88rem, 0.9vw, 0.98rem);
    line-height: 1.5;
  }

  .hero-journey .map-shell {
    height: 100%;
  }

  .hero-journey .journey-frame {
    display: grid;
    height: calc(100% - 28px);
    grid-template-rows: minmax(0, 1fr) 86px;
  }

  .hero-journey .journey-canvas {
    min-height: 0;
  }

  .hero-journey .landscape-viewport {
    display: flex;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
  }

  .hero-journey .journey-map {
    width: min(100vw, calc((100svh - 182px) * 1.7768331562));
    max-width: 100vw;
    flex: 0 0 auto;
  }

  .hero-journey .terrain-meta {
    top: clamp(248px, 30svh, 300px);
    right: auto;
    left: max(20px, calc((100% - 1240px) / 2));
    width: auto;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
  }

  .hero-journey .terrain-meta span:last-child {
    color: #090909;
    font-weight: 700;
  }

  .hero-journey .journey-story {
    min-height: 86px;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .hero-journey .map-footer {
    height: 28px;
    padding-top: 6px;
  }

  .hero-journey .journey-label strong {
    font-size: 0.78rem;
  }
}

@media (max-width: 760px) {
  .hero-journey .terrain-meta { display: none; }

  .hero-journey .journey-label {
    text-shadow:
      0 1px 0 #fff,
      1px 0 0 #fff,
      -1px 0 0 #fff,
      0 -1px 0 #fff,
      0 0 9px #fff,
      0 0 16px #fff;
  }
}

/* Corrected desktop composition: copy above, complete landscape below. */
@media (min-width: 761px) {
  .hero-journey {
    display: grid;
    height: calc(100svh - 68px);
    min-height: 720px;
    max-height: 980px;
    padding: clamp(26px, 3.8svh, 38px) 0 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .hero-journey .hero-copy {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: grid;
    width: var(--page);
    margin: 0 auto;
    padding: 0 2px clamp(14px, 2svh, 20px);
    grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
    gap: clamp(48px, 8vw, 118px);
    align-items: end;
    pointer-events: auto;
  }

  .hero-journey .hero-copy h1 {
    max-width: 760px;
    margin-top: 10px;
    font-size: clamp(2.45rem, 3.2vw, 3.45rem);
  }

  .hero-journey .hero-copy .intro-copy {
    max-width: 430px;
    margin: 0;
    padding-bottom: 2px;
    font-size: clamp(0.88rem, 0.9vw, 0.98rem);
    line-height: 1.5;
  }

  .hero-journey .map-shell {
    display: grid;
    width: 100vw;
    height: auto;
    min-height: 0;
    margin-left: calc(50% - 50vw);
    grid-template-rows: minmax(0, 1fr) 22px;
  }

  .hero-journey .journey-frame {
    display: grid;
    height: auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) 64px;
  }

  .hero-journey .journey-canvas {
    min-height: 0;
  }

  .hero-journey .landscape-viewport {
    display: flex;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
  }

  .hero-journey .journey-map {
    width: auto;
    height: min(100%, calc(100vw * 0.5627990431));
    max-width: 100vw;
    aspect-ratio: 1672 / 941;
    flex: 0 0 auto;
  }

  .hero-journey .terrain-meta {
    top: 18px;
    right: 22px;
    left: 22px;
    width: auto;
    flex-direction: row;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
  }

  .hero-journey .journey-story {
    min-height: 64px;
    padding-top: 9px;
    padding-bottom: 9px;
    grid-template-columns: minmax(170px, 0.7fr) minmax(360px, 1.6fr) auto;
  }

  .hero-journey .journey-story-heading { gap: 2px; }
  .hero-journey .journey-story-heading strong { font-size: 0.9rem; }
  .hero-journey .journey-story p { font-size: 0.79rem; line-height: 1.42; }
  .hero-journey .journey-story a { padding: 7px 10px; font-size: 0.68rem; }

  .hero-journey .map-footer {
    width: var(--page);
    height: 22px;
    margin: 0 auto;
    padding-top: 4px;
  }
}

.hero-journey .journey-label::after,
.hero-journey .journey-label em,
.hero-journey .journey-stop.is-active .journey-label em {
  overflow: hidden;
  max-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

.hero-journey .journey-stop:hover .journey-label::after,
.hero-journey .journey-stop:focus-visible .journey-label::after {
  max-height: 18px;
  opacity: 1;
}

.hero-journey .journey-stop:hover .journey-label em,
.hero-journey .journey-stop:focus-visible .journey-label em,
.hero-journey .journey-stop.is-active:hover .journey-label em,
.hero-journey .journey-stop.is-active:focus-visible .journey-label em {
  max-height: 22px;
  margin-top: 2px;
  opacity: 1;
}

/* Final cinematic composition: heading, subheading, artwork only. */
.hero-journey .hero-copy > div > p,
.hero-journey .terrain-meta,
.hero-journey .journey-stages,
.hero-journey .landscape-guide,
.hero-journey .journey-story,
.hero-journey .map-footer {
  display: none !important;
}

@media (min-width: 761px) {
  .hero-journey {
    display: grid;
    height: calc(100svh - 68px);
    min-height: 700px;
    max-height: none;
    padding: clamp(20px, 2.8svh, 28px) 0 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .hero-journey .hero-copy {
    position: relative;
    inset: auto;
    display: grid;
    width: var(--page);
    margin: 0 auto;
    padding: 0 2px clamp(10px, 1.4svh, 14px);
    grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
    gap: clamp(48px, 8vw, 118px);
    align-items: end;
  }

  .hero-journey .hero-copy h1 {
    margin: 0;
    font-size: clamp(2.55rem, 3.35vw, 3.7rem);
  }

  .hero-journey .hero-copy .intro-copy {
    margin: 0;
    max-width: 430px;
    padding-bottom: 3px;
    font-size: clamp(0.9rem, 0.95vw, 1rem);
    line-height: 1.5;
  }

  .hero-journey .map-shell,
  .hero-journey .journey-frame,
  .hero-journey .journey-canvas,
  .hero-journey .landscape-viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .hero-journey .map-shell {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .hero-journey .journey-frame,
  .hero-journey .landscape-viewport {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .hero-journey .journey-map {
    width: auto;
    height: min(100%, calc(100vw * 0.5627990431));
    max-width: 100vw;
    aspect-ratio: 1672 / 941;
    flex: 0 0 auto;
  }
}

@media (max-width: 760px) {
  .hero-journey .hero-break {
    display: block;
  }

  .hero-journey {
    display: grid;
    height: calc(100svh - 76px);
    min-height: 660px;
    padding-top: 32px;
    padding-bottom: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .hero-journey .map-shell {
    width: 100vw;
    height: 100%;
    min-height: 0;
    margin-left: calc(50% - 50vw);
  }

  .hero-journey .journey-frame,
  .hero-journey .journey-canvas,
  .hero-journey .landscape-viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .hero-journey .landscape-viewport {
    display: flex;
    overflow: hidden;
    align-items: flex-end;
    justify-content: center;
  }

  .hero-journey .journey-map {
    width: 100vw;
    height: auto;
    aspect-ratio: 1672 / 941;
  }
}

/* Signature header and exhibition-style phase annotations. */
.site-header {
  grid-template-columns: 1fr auto 1fr;
  border-bottom: 0;
  background: color-mix(in srgb, #fff 88%, transparent);
}

.mark {
  color: #090909;
  font-family: Caveat, "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.08em;
  line-height: 1;
  transform: rotate(-4deg);
}

.nav {
  grid-column: 2;
  justify-self: center;
  gap: 2px;
  padding: 4px 6px;
  border: 1px solid rgba(9, 9, 9, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 7px 24px rgba(9, 9, 9, 0.055);
  backdrop-filter: blur(18px);
}

.nav a {
  padding: 6px 10px 7px;
  border-radius: 999px;
  line-height: 1;
  transition: color 160ms ease, background 160ms ease;
}

.nav a::after {
  display: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  background: #fff27a;
}

.hero-journey .journey-stages {
  display: block !important;
}

.hero-journey .journey-stop {
  width: max-content;
  gap: 7px;
  opacity: 0.92;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, transform 180ms ease;
}

.hero-journey .journey-stop.is-active {
  opacity: 0.92;
}

.hero-journey .journey-node {
  width: 7px;
  height: 7px;
  border: 1px solid #090909;
  background: #fff27a;
  color: transparent;
  font-size: 0;
  box-shadow: 0 0 0 3px rgba(255, 242, 122, 0.32);
  backdrop-filter: none;
}

.hero-journey .journey-node::before {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 1px;
  height: 12px;
  background: rgba(9, 9, 9, 0.42);
  content: "";
  transform: translateX(-50%);
}

.hero-journey .journey-node::after {
  display: none;
}

.hero-journey .journey-label,
.hero-journey .journey-stop.is-active .journey-label,
.hero-journey .journey-stop:hover .journey-label,
.hero-journey .journey-stop:focus-visible .journey-label {
  display: flex;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 0;
  align-items: center;
  transform: none;
  backdrop-filter: none;
}

.hero-journey .journey-label small {
  display: inline-block;
  padding: 1px 2px;
  background: linear-gradient(transparent 58%, rgba(255, 242, 122, 0.92) 58% 94%, transparent 94%);
  color: #090909;
  font: 700 0.54rem/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.055em;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 1px 0 #fff;
  white-space: nowrap;
}

.hero-journey .journey-label strong {
  overflow: hidden;
  width: auto;
  max-width: 0;
  padding: 0;
  border-left: 0 solid rgba(9, 9, 9, 0.38);
  opacity: 0;
  font: 600 0.5rem/1.2 Inter, ui-sans-serif, sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 1px 0 #fff;
  white-space: nowrap;
  transition: max-width 200ms ease, margin 200ms ease, padding 200ms ease, border-width 200ms ease, opacity 160ms ease;
}

.hero-journey .journey-label strong::before,
.hero-journey .journey-label::after,
.hero-journey .journey-label em {
  display: none !important;
}

.hero-journey .journey-stop:hover,
.hero-journey .journey-stop:focus-visible {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 2px));
}

.hero-journey .journey-stop:hover .journey-node,
.hero-journey .journey-stop:focus-visible .journey-node,
.hero-journey .journey-stop.is-active .journey-node {
  background: #fff27a;
  box-shadow: 0 0 0 4px rgba(255, 242, 122, 0.38);
  transform: scale(1.15);
}

.hero-journey .journey-stop:hover .journey-label strong,
.hero-journey .journey-stop:focus-visible .journey-label strong {
  max-width: 150px;
  margin-left: 6px;
  padding-left: 6px;
  border-left-width: 1px;
  opacity: 1;
}

@media (min-width: 761px) {
  .hero-journey .hero-copy {
    top: clamp(10px, 1.4svh, 14px);
  }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 8px 14px 10px;
  }

  .mark {
    font-size: 1.55rem;
  }

  .nav {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    padding: 3px;
    justify-content: space-between;
    overflow-x: auto;
  }

  .nav a {
    padding: 6px 7px;
    font-size: 0.62rem;
  }

  .hero-journey {
    height: calc(100svh - 78px);
  }

  .hero-journey .journey-stages {
    right: 8px;
    bottom: 9px;
    left: 8px;
    top: auto;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .hero-journey .journey-stop,
  .hero-journey .journey-stop:hover,
  .hero-journey .journey-stop:focus-visible {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    gap: 3px;
    opacity: 1;
    transform: none;
  }

  .hero-journey .journey-node {
    width: 5px;
    height: 5px;
  }

  .hero-journey .journey-node::before {
    display: none;
  }

  .hero-journey .journey-label small {
    overflow: hidden;
    max-width: 100%;
    font-size: 0.36rem;
    letter-spacing: 0;
    text-overflow: ellipsis;
  }

  .hero-journey .journey-label strong {
    display: none;
  }
}

/* Increased clarity: roomier navigation, legible phase captions, paper grain. */
.nav {
  padding: 6px 9px;
}

.nav a {
  padding: 8px 13px 9px;
}

.hero-journey::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(9, 9, 9, 0.18) 0 0.42px, transparent 0.58px),
    radial-gradient(circle, rgba(9, 9, 9, 0.12) 0 0.34px, transparent 0.52px),
    linear-gradient(105deg, transparent 0 47%, rgba(9, 9, 9, 0.025) 49%, transparent 51% 100%);
  background-position: 0 0, 2px 3px, 0 0;
  background-size: 5px 5px, 7px 7px, 19px 19px;
  content: "";
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}

.hero-journey .hero-copy,
.hero-journey .journey-stages {
  z-index: 4;
}

.hero-journey .journey-stop,
.hero-journey .journey-stop.is-active {
  opacity: 1;
}

.hero-journey .journey-node {
  width: 9px;
  height: 9px;
  border-width: 1.5px;
  box-shadow: 0 0 0 4px rgba(255, 242, 122, 0.48), 0 0 0 6px rgba(255, 255, 255, 0.66);
}

.hero-journey .journey-node::before {
  top: 11px;
  height: 14px;
  background: rgba(9, 9, 9, 0.64);
}

.hero-journey .journey-label small {
  padding: 2px 3px;
  background: linear-gradient(transparent 45%, #fff27a 45% 96%, transparent 96%);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.96),
    1px -1px 0 rgba(255, 255, 255, 0.96),
    -1px 1px 0 rgba(255, 255, 255, 0.96),
    1px 1px 0 rgba(255, 255, 255, 0.96),
    0 0 9px #fff,
    0 0 16px #fff;
}

@media (max-width: 760px) {
  .nav {
    padding: 4px;
  }

  .nav a {
    padding: 7px 8px;
  }

  .hero-journey .journey-node {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 3px rgba(255, 242, 122, 0.46), 0 0 0 4px rgba(255, 255, 255, 0.7);
  }

  .hero-journey .journey-label small {
    font-size: 0.41rem;
  }
}

/* Desktop perimeter callouts keep text off the artwork's focal details. */
@media (min-width: 761px) {
  .hero-journey .journey-stop {
    width: 0;
    height: 0;
    gap: 0;
    transform: none;
  }

  .hero-journey .journey-stop:nth-child(1) {
    --callout-x: 34px;
    --callout-y: -104px;
    --callout-line: 109px;
    --callout-angle: -72deg;
  }

  .hero-journey .journey-stop:nth-child(2) {
    --callout-x: -42px;
    --callout-y: -112px;
    --callout-line: 120px;
    --callout-angle: -111deg;
  }

  .hero-journey .journey-stop:nth-child(3) {
    --callout-x: -8px;
    --callout-y: -116px;
    --callout-line: 116px;
    --callout-angle: -94deg;
  }

  .hero-journey .journey-stop:nth-child(4) {
    --callout-x: 108px;
    --callout-y: 132px;
    --callout-line: 171px;
    --callout-angle: 51deg;
  }

  .hero-journey .journey-stop:nth-child(5) {
    --callout-x: -128px;
    --callout-y: -54px;
    --callout-line: 139px;
    --callout-angle: -157deg;
  }

  .hero-journey .journey-stop::before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: var(--callout-line);
    height: 1px;
    background: rgba(9, 9, 9, 0.62);
    content: "";
    pointer-events: none;
    transform: rotate(var(--callout-angle));
    transform-origin: 0 50%;
  }

  .hero-journey .journey-node {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 4px rgba(255, 242, 122, 0.52), 0 0 0 6px rgba(255, 255, 255, 0.76);
  }

  .hero-journey .journey-node::before {
    display: none;
  }

  .hero-journey .journey-label,
  .hero-journey .journey-stop.is-active .journey-label,
  .hero-journey .journey-stop:hover .journey-label,
  .hero-journey .journey-stop:focus-visible .journey-label {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    min-width: 142px;
    padding: 7px 9px 8px;
    border: 1px solid rgba(9, 9, 9, 0.34);
    border-left: 3px solid #fff27a;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 7px 20px rgba(9, 9, 9, 0.07);
    gap: 3px;
    justify-items: start;
    text-align: left;
    transform: translate(var(--callout-x), var(--callout-y)) translate(-50%, -50%);
    backdrop-filter: blur(7px);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 180ms ease;
  }

  .hero-journey .journey-label small {
    padding: 0;
    background: none;
    color: #5b5b56;
    font-size: 0.47rem;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-shadow: none;
  }

  .hero-journey .journey-label strong {
    display: block;
    overflow: visible;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 1;
    color: #090909;
    font: 650 0.68rem/1.15 Inter, ui-sans-serif, sans-serif;
    letter-spacing: 0.02em;
    text-shadow: none;
    white-space: nowrap;
  }

  .hero-journey .journey-stop:hover,
  .hero-journey .journey-stop:focus-visible {
    transform: none;
  }

  .hero-journey .journey-stop:hover .journey-label,
  .hero-journey .journey-stop:focus-visible .journey-label {
    border-color: #090909;
    box-shadow: 0 10px 26px rgba(9, 9, 9, 0.12);
    transform: translate(var(--callout-x), calc(var(--callout-y) - 2px)) translate(-50%, -50%);
  }
}

/* Direct annotation flags: one short stem, one numbered pin, zero ambiguity. */
@media (min-width: 761px) {
  .hero-journey .journey-stop:nth-child(n) {
    --callout-x: 0px;
    --callout-y: 0px;
  }

  .hero-journey .journey-stop::before {
    z-index: 1;
    top: -28px;
    left: 0;
    width: 1px;
    height: 16px;
    background: #090909;
    transform: none;
  }

  .hero-journey .journey-node {
    z-index: 3;
    top: -12px;
    left: -12px;
    display: grid;
    width: 24px;
    height: 24px;
    border: 1.5px solid #090909;
    background: #fff27a;
    color: #090909;
    font: 700 0.47rem/1 "Space Mono", ui-monospace, monospace;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.82);
    place-items: center;
  }

  .hero-journey .journey-stop.is-active .journey-node {
    transform: none;
  }

  .hero-journey .journey-label,
  .hero-journey .journey-stop.is-active .journey-label,
  .hero-journey .journey-stop:hover .journey-label,
  .hero-journey .journey-stop:focus-visible .journey-label {
    z-index: 2;
    min-width: 150px;
    padding: 6px 8px 7px;
    border: 0;
    border-top: 1px solid #090909;
    border-left: 3px solid #fff27a;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    transform: translate(-50%, calc(-100% - 28px));
  }

  .hero-journey .journey-label small {
    color: #5b5b56;
    font-size: 0.49rem;
  }

  .hero-journey .journey-label strong {
    font-size: 0.71rem;
  }

  .hero-journey .journey-stop:hover .journey-label,
  .hero-journey .journey-stop:focus-visible .journey-label {
    border-top-color: #090909;
    box-shadow: 0 7px 18px rgba(9, 9, 9, 0.09);
    transform: translate(-50%, calc(-100% - 31px));
  }
}

/* Phase key: text in negative space, numbered pins on the artwork. */
.journey-key {
  display: none;
}

@media (min-width: 761px) {
  .site-header {
    width: var(--page);
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .site-header .mark {
    margin-left: 3px;
  }

  .hero-journey .journey-stop::before,
  .hero-journey .journey-label {
    display: none !important;
  }

  .hero-journey .journey-node {
    top: -11px;
    left: -11px;
    width: 22px;
    height: 22px;
    font-size: 0.44rem;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.88);
  }

  .journey-key {
    position: absolute;
    z-index: 5;
    top: 15px;
    left: 2.5%;
    display: grid;
    width: 62%;
    border-top: 1px solid rgba(9, 9, 9, 0.52);
    background: rgba(255, 255, 255, 0.7);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    backdrop-filter: blur(5px);
  }

  .journey-key a {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 13px 10px 8px;
    border-left: 1px solid rgba(9, 9, 9, 0.14);
    gap: 1px;
    transition: background 160ms ease;
  }

  .journey-key a:first-child {
    border-left: 0;
  }

  .journey-key a:hover,
  .journey-key a:focus-visible,
  .journey-key a.is-active {
    background: rgba(255, 242, 122, 0.28);
  }

  .journey-key span {
    position: absolute;
    top: -9px;
    left: 9px;
    display: grid;
    width: 18px;
    height: 18px;
    border: 1px solid #090909;
    border-radius: 50%;
    background: #fff27a;
    font: 700 0.42rem/1 "Space Mono", ui-monospace, monospace;
    place-items: center;
  }

  .journey-key small {
    overflow: hidden;
    color: #5b5b56;
    font: 600 0.45rem/1.2 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.055em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .journey-key strong {
    overflow: hidden;
    color: #090909;
    font: 650 0.61rem/1.2 Inter, ui-sans-serif, sans-serif;
    letter-spacing: 0.005em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Live phase reader: one caption in negative space, no text on the artwork. */
@media (min-width: 761px) {
  .hero-journey .journey-frame {
    position: relative;
  }

  .hero-journey .journey-story {
    position: absolute;
    z-index: 6;
    top: 15px;
    left: max(24px, calc((100vw - 1240px) / 2));
    display: grid !important;
    width: min(790px, 58vw);
    min-height: 60px;
    padding: 9px 12px 9px 14px;
    border-top: 1px solid rgba(9, 9, 9, 0.62);
    border-bottom: 1px solid rgba(9, 9, 9, 0.18);
    border-left: 3px solid #fff27a;
    background: rgba(255, 255, 255, 0.82);
    grid-template-columns: 150px minmax(260px, 1fr) auto;
    gap: 20px;
    align-items: center;
    backdrop-filter: blur(7px);
  }

  .hero-journey .journey-story-heading {
    display: grid;
    gap: 2px;
  }

  .hero-journey .journey-story-heading span {
    color: #5b5b56;
    font: 600 0.48rem/1.2 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.06em;
  }

  .hero-journey .journey-story-heading strong {
    font: 650 0.78rem/1.15 Inter, ui-sans-serif, sans-serif;
    letter-spacing: 0.01em;
  }

  .hero-journey .journey-story p {
    margin: 0;
    color: #4f4f4a;
    font-size: 0.7rem;
    line-height: 1.38;
  }

  .hero-journey .journey-story a {
    display: inline-flex;
    padding: 6px 8px;
    border: 1px solid rgba(9, 9, 9, 0.46);
    background: rgba(255, 255, 255, 0.74);
    font-size: 0.61rem;
    font-weight: 650;
    white-space: nowrap;
  }

  .hero-journey .journey-story a:hover,
  .hero-journey .journey-story a:focus-visible {
    border-color: #090909;
    background: #fff27a;
  }

  .hero-journey .journey-node {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.88);
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .hero-journey .journey-stop.is-active .journey-node,
  .hero-journey .journey-stop:hover .journey-node,
  .hero-journey .journey-stop:focus-visible .journey-node {
    background: #fff27a;
    box-shadow: 0 0 0 4px rgba(255, 242, 122, 0.36), 0 0 0 7px rgba(255, 255, 255, 0.82);
    transform: scale(1.08);
  }
}

/* Scene signage: the five phases are typography inside the illustration. */
@media (min-width: 761px) {
  .hero-journey .journey-story,
  .hero-journey .journey-node,
  .hero-journey .journey-stop::before {
    display: none !important;
  }

  .hero-journey .journey-stop,
  .hero-journey .journey-stop:hover,
  .hero-journey .journey-stop:focus-visible {
    display: block;
    width: 190px;
    height: auto;
    opacity: 1;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .hero-journey .journey-label,
  .hero-journey .journey-stop.is-active .journey-label,
  .hero-journey .journey-stop:hover .journey-label,
  .hero-journey .journey-stop:focus-visible .journey-label {
    position: relative;
    top: auto;
    left: auto;
    display: grid !important;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    gap: 2px;
    justify-items: center;
    text-align: center;
    transform: none;
    backdrop-filter: none;
  }

  .hero-journey .journey-label small {
    display: block;
    padding: 1px 3px;
    background: transparent;
    color: #090909;
    font: 700 0.52rem/1.2 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.07em;
    text-shadow:
      -2px -2px 0 rgba(255, 255, 255, 0.94),
      2px -2px 0 rgba(255, 255, 255, 0.94),
      -2px 2px 0 rgba(255, 255, 255, 0.94),
      2px 2px 0 rgba(255, 255, 255, 0.94),
      0 0 11px #fff,
      0 0 20px #fff;
  }

  .hero-journey .journey-label strong {
    grid-area: title;
    position: relative;
    z-index: 0;
    display: inline-block;
    overflow: visible;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 1px 4px 2px;
    border: 0;
    opacity: 1;
    color: #090909;
    font: 700 0.78rem/1.15 Inter, ui-sans-serif, sans-serif;
    letter-spacing: 0.015em;
    text-shadow:
      -2px -2px 0 rgba(255, 255, 255, 0.96),
      2px -2px 0 rgba(255, 255, 255, 0.96),
      -2px 2px 0 rgba(255, 255, 255, 0.96),
      2px 2px 0 rgba(255, 255, 255, 0.96),
      0 0 12px #fff,
      0 0 22px #fff;
    white-space: nowrap;
    isolation: isolate;
  }

  .hero-journey .journey-label strong::before {
    position: absolute;
    z-index: -1;
    right: 1px;
    bottom: 1px;
    left: 1px;
    display: block;
    height: 42%;
    background: #fff27a;
    content: "";
    opacity: 0.92;
  }

  .hero-journey .journey-label::after,
  .hero-journey .journey-label em {
    display: none !important;
  }

  .hero-journey .journey-stop:hover .journey-label,
  .hero-journey .journey-stop:focus-visible .journey-label {
    transform: translateY(-2px);
  }
}

/* Scientific plate callouts: labels sit in negative space and point to the work. */
@media (min-width: 761px) {
  .hero-journey .journey-story {
    display: none !important;
  }

  .hero-journey .journey-stop,
  .hero-journey .journey-stop:hover,
  .hero-journey .journey-stop:focus-visible {
    width: 0;
    height: 0;
    opacity: 1;
    text-align: left;
    transform: none;
  }

  .hero-journey .journey-node {
    position: absolute;
    z-index: 5;
    top: -5px;
    left: -5px;
    display: block !important;
    width: 10px;
    height: 10px;
    border: 1px solid #090909;
    border-radius: 50%;
    background: #fff27a;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92);
    color: transparent;
    font-size: 0;
    transform: none !important;
  }

  .hero-journey .journey-stop::before {
    position: absolute;
    z-index: 3;
    display: block !important;
    box-sizing: border-box;
    width: var(--leader-w);
    height: var(--leader-h);
    border-top: 1px solid rgba(9, 9, 9, 0.72);
    border-right: 1px solid rgba(9, 9, 9, 0.72);
    background: transparent !important;
    content: "";
    pointer-events: none;
  }

  .hero-journey .journey-label,
  .hero-journey .journey-stop.is-active .journey-label,
  .hero-journey .journey-stop:hover .journey-label,
  .hero-journey .journey-stop:focus-visible .journey-label {
    position: absolute;
    z-index: 4;
    top: var(--label-y);
    left: var(--label-x);
    display: grid !important;
    width: 180px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    column-gap: 9px;
    grid-template-areas:
      "kicker index"
      "title index"
      "evidence index";
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-rows: repeat(3, auto);
    row-gap: 1px;
    justify-items: end;
    text-align: right;
    transform: translate(-50%, -50%);
    backdrop-filter: none;
  }

  .hero-journey .journey-label small {
    grid-area: kicker;
    display: block;
    padding: 0;
    background: transparent;
    color: #2c2c29;
    font: 700 0.54rem/1.2 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.065em;
    text-shadow: 0 0 7px #fff, 0 0 12px #fff;
    white-space: nowrap;
  }

  .hero-journey .journey-label strong {
    position: relative;
    display: inline-block;
    overflow: visible;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 0 3px;
    border: 0;
    opacity: 1;
    color: #090909;
    font: 700 0.7rem/1.12 Inter, ui-sans-serif, sans-serif;
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px #fff, 0 0 14px #fff;
    white-space: nowrap;
  }

  .hero-journey .journey-label strong::before {
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 24px;
    height: 2px;
    background: #f1d928;
    opacity: 1;
  }

  .hero-journey .journey-label em {
    grid-area: evidence;
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    color: #2c2c29 !important;
    font: 700 0.5rem/1.25 "Space Mono", ui-monospace, monospace;
    font-style: normal;
    letter-spacing: 0.035em;
    text-shadow: 0 0 7px #fff, 0 0 12px #fff;
    white-space: nowrap;
  }

  .hero-journey .journey-label::after {
    grid-area: index;
    display: grid !important;
    overflow: visible !important;
    width: 24px;
    height: 24px;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    border: 1px solid #090909;
    border-radius: 50%;
    background: #fff27a;
    color: #090909;
    content: attr(data-index);
    font: 700 0.43rem/1 "Space Mono", ui-monospace, monospace;
    place-items: center;
    align-self: center;
  }

  .hero-journey .journey-stop[data-stage="1"] {
    --label-x: -126px;
    --label-y: -155px;
    --leader-w: 36px;
    --leader-h: 155px;
  }

  .hero-journey .journey-stop[data-stage="1"]::before {
    top: -155px;
    left: -36px;
  }

  .hero-journey .journey-stop[data-stage="2"] {
    --label-x: -111px;
    --label-y: -135px;
    --leader-w: 21px;
    --leader-h: 135px;
  }

  .hero-journey .journey-stop[data-stage="2"]::before {
    top: -135px;
    left: -21px;
  }

  .hero-journey .journey-stop[data-stage="3"] {
    --label-x: -111px;
    --label-y: -135px;
    --leader-w: 21px;
    --leader-h: 135px;
  }

  .hero-journey .journey-stop[data-stage="3"]::before {
    top: -135px;
    left: -21px;
  }

  .hero-journey .journey-stop[data-stage="4"] {
    --label-x: -186px;
    --label-y: -255px;
    --leader-w: 96px;
    --leader-h: 255px;
  }

  .hero-journey .journey-stop[data-stage="4"]::before {
    top: -255px;
    left: -96px;
    border-bottom: 0;
    border-left: 0;
  }

  .hero-journey .journey-stop[data-stage="5"] {
    --label-x: -246px;
    --label-y: -90px;
    --leader-w: 156px;
    --leader-h: 90px;
  }

  .hero-journey .journey-stop[data-stage="5"]::before {
    top: -90px;
    left: -156px;
  }

  .hero-journey .journey-stop:hover .journey-node,
  .hero-journey .journey-stop:focus-visible .journey-node {
    background: #090909;
    box-shadow: 0 0 0 4px rgba(255, 242, 122, 0.78);
  }

  .hero-journey .journey-stop:hover .journey-label,
  .hero-journey .journey-stop:focus-visible .journey-label {
    transform: translate(-50%, calc(-50% - 1px));
  }
}

/* ==========================================================================
   COMMERCIAL OPERATOR SYSTEM
   One visual language across the full site: black, white, signal yellow,
   fine rules, technical plates, and restrained paper texture.
   ========================================================================== */

body {
  background-color: #fff;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.055) 0 0.42px, transparent 0.58px);
  background-size: 6px 6px;
}

.site-header {
  grid-template-columns: 1fr auto 1fr;
  min-height: 76px;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  border: 0;
  background: color-mix(in srgb, #fff 90%, transparent);
}

.site-header .mark {
  grid-column: 1;
  justify-self: start;
}

.site-header .nav {
  grid-column: 2;
  justify-self: center;
}

.contact-pill {
  grid-column: 3;
  display: inline-flex;
  min-height: 42px;
  padding: 5px 6px 5px 15px;
  border: 1px solid rgba(9, 9, 9, 0.75);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  gap: 11px;
  align-items: center;
  justify-self: end;
  color: #090909;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.contact-pill b {
  display: grid;
  width: 30px;
  height: 30px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  color: #090909;
  font-size: 0.92rem;
  place-items: center;
  transition: transform 160ms ease;
}

.contact-pill:hover,
.contact-pill[aria-current="page"] {
  background: #090909;
  color: #fff;
}

.contact-pill:hover b,
.contact-pill[aria-current="page"] b {
  transform: translate(2px, -2px);
}

h1,
h2,
h3,
.stats strong,
.posting-metrics strong,
.metric-wall strong,
.feature-num,
.pnum,
.rung-no,
.case-stamp,
.bench-meta,
.footer-mark {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

h1,
h2,
h3 {
  font-weight: 500;
}

em {
  padding: 0 0.08em;
  background: linear-gradient(transparent 60%, #fff27a 60% 92%, transparent 92%);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
}

.section h2::after,
.section-head h2::after {
  display: block;
  width: 48px;
  height: 5px;
  margin-top: 15px;
  background: #fff27a;
  content: "";
}

.catalog-line,
.file-meta,
.detail-label,
.stamp-note,
.posting-eyebrow,
.case-foot,
.reg-no,
.reg-date,
.reg-kind,
.reg-flag,
.essay-no,
.essay-source,
.essay-arrow,
.artifact-label,
.now-line {
  color: #555550;
  font-weight: 700;
  letter-spacing: 0.065em;
}

.hero-journey .hero-copy {
  align-items: center;
}

.hero-journey .hero-copy .intro-copy {
  padding-bottom: 0;
  transform: translateY(-6px);
}

.feature,
.pcard,
.file-card,
.compact-grid article {
  border: 0;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #deded8;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.74);
}

.feature {
  min-height: 440px;
}

.pcard {
  position: relative;
  overflow: hidden;
  transition: background 180ms ease, transform 180ms ease;
}

.pcard::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 4px;
  background: #fff27a;
  content: "";
}

.pcard:hover {
  background: rgba(255, 242, 122, 0.1);
  transform: translateY(-2px);
}

.feature-num,
.pnum {
  display: grid;
  width: 30px;
  height: 30px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  color: #090909;
  font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace;
  place-items: center;
}

.stats,
.metric-wall,
.posting-metrics {
  border-color: rgba(9, 9, 9, 0.32);
}

.stats strong,
.posting-metrics strong,
.metric-wall strong {
  color: #090909;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.stats span,
.posting-metrics span,
.metric-wall span {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.technical-plate,
.case-artifact {
  position: relative;
  isolation: isolate;
  background-color: #fff;
  background-image:
    radial-gradient(circle, rgba(9, 9, 9, 0.15) 0 0.5px, transparent 0.66px),
    linear-gradient(90deg, transparent 49.8%, rgba(9, 9, 9, 0.035) 50%, transparent 50.2%);
  background-size: 8px 8px, 36px 36px;
}

.technical-plate::before {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 18px;
  color: #3f3f3b;
  content: attr(data-plate);
  font: 700 0.48rem/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.065em;
}

.technical-plate::after {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 18px;
  width: 10px;
  height: 10px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  box-shadow: 0 0 0 4px rgba(255, 242, 122, 0.3);
  content: "";
}

.feature-viz.technical-plate {
  min-height: 360px;
  padding: 44px 18px 12px;
  border-left: 1px solid rgba(9, 9, 9, 0.22);
  background-color: #fff;
}

.pviz.technical-plate {
  display: grid;
  min-height: 174px;
  margin: 30px -10px 0;
  padding: 34px 2px 4px;
  border-top: 1px solid rgba(9, 9, 9, 0.26);
  border-bottom: 1px solid rgba(9, 9, 9, 0.12);
  align-items: center;
}

.technical-plate svg {
  position: relative;
  z-index: 1;
  width: 100%;
}

.v-line {
  fill: none;
  stroke: #090909;
  stroke-width: 1.25;
}

.v-dim {
  fill: none;
  stroke: rgba(9, 9, 9, 0.52);
  stroke-width: 1;
}

.v-soft {
  fill: rgba(9, 9, 9, 0.11);
}

.v-fill {
  fill: #fff27a;
  stroke: #090909;
  stroke-width: 0.8;
}

.v-text,
.v-anno {
  fill: #090909;
  font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700;
}

.plate-title {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.writing-plate {
  overflow: hidden;
}

.writing-plate img,
.note-image {
  filter: grayscale(0.4) contrast(1.05);
}

.writing-plate::after {
  width: 13px;
  height: 13px;
}

.posting {
  border: 0;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #deded8;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.82);
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.07) 0 0.42px, transparent 0.58px);
  background-size: 7px 7px;
}

.posting:first-child {
  border-color: #151515;
  box-shadow: inset 5px 0 0 #fff27a;
}

.posting-link {
  margin: 28px 0 0;
}

.ghost {
  color: rgba(255, 242, 122, 0.42);
  font-family: Inter, ui-sans-serif, sans-serif;
  font-weight: 600;
}

.posting-tags span,
.chip,
.bench-status {
  border-color: rgba(9, 9, 9, 0.34);
  background: rgba(255, 255, 255, 0.78);
  color: #3f3f3b;
}

.showcase-file {
  border-color: #151515;
}

.case-lesson,
.case-foot strong,
.artifact-readout strong,
.pull-quote,
.studio-note,
.bench-item.featured h3 {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.case-lesson,
.studio-note {
  font-style: normal;
}

.case-stamp {
  display: grid;
  width: 42px;
  height: 42px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  color: #090909;
  font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
  place-items: center;
}

.case-stamp span {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
}

.case-artifact {
  border-color: #151515;
  border-radius: 0;
}

.stahl-artifact,
.digital-artifact,
.koel-artifact {
  background-color: #fff;
  color: #090909;
}

.stahl-artifact .artifact-label,
.stahl-artifact li,
.stahl-artifact li span {
  color: #090909;
}

.stahl-artifact li {
  border-color: rgba(9, 9, 9, 0.22);
}

.stahl-line {
  background: linear-gradient(90deg, #fff27a 0 62%, #090909 62% 72%, #fff27a 72%);
}

.history-grid b {
  border-color: rgba(9, 9, 9, 0.32);
  background: rgba(255, 255, 255, 0.72);
  font-family: Inter, ui-sans-serif, sans-serif;
}

.bench {
  border-color: #151515;
}

.bench-item {
  position: relative;
  border-color: rgba(9, 9, 9, 0.2);
}

.bench-item::before {
  position: absolute;
  top: 34px;
  left: 0;
  width: 8px;
  height: 8px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  content: "";
}

.bench-meta {
  color: #090909;
  font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
}

.writing-preview {
  position: relative;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #deded8;
  background: rgba(255, 255, 255, 0.8);
}

.writing-preview::after {
  position: absolute;
  top: 20px;
  left: 20px;
  display: grid;
  width: 28px;
  height: 28px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  content: "01";
  font: 700 0.48rem/1 "Space Mono", ui-monospace, monospace;
  place-items: center;
}

.note-image,
.writing-feature {
  border-radius: 0;
}

.register,
.essay-list {
  border-color: #151515;
}

.register li,
.essay-list li {
  border-color: rgba(9, 9, 9, 0.17);
}

a.register-row:hover,
.essay-list a:hover {
  background: linear-gradient(90deg, rgba(255, 242, 122, 0.3), rgba(255, 242, 122, 0.04));
}

.reg-flag {
  color: #090909;
}

.archive-metrics {
  border-top: 1px solid #151515;
  border-bottom: 1px solid #151515;
}

.archive-metrics > div {
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.07) 0 0.42px, transparent 0.58px);
  background-size: 7px 7px;
}

.dossier-section {
  position: relative;
}

.dossier-section::before {
  position: absolute;
  top: 74px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  content: "";
}

.ys-operating-map {
  padding-bottom: clamp(58px, 7vw, 90px);
}

.ys-system-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid #090909;
}

.ys-system-line::before {
  position: absolute;
  top: -3px;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, #fff27a 0 20%, transparent 20% 40%, #fff27a 40% 60%, transparent 60% 80%, #fff27a 80%);
  content: "";
  opacity: 0.88;
}

.ys-system-line > div {
  position: relative;
  display: grid;
  min-height: 150px;
  padding: 28px 16px 18px;
  border-right: 1px solid rgba(9, 9, 9, 0.18);
  align-content: start;
  gap: 7px;
}

.ys-system-line > div:last-child {
  border-right: 0;
}

.ys-system-line span {
  display: grid;
  width: 27px;
  height: 27px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  font: 700 0.5rem/1 "Space Mono", ui-monospace, monospace;
  place-items: center;
}

.ys-system-line strong {
  margin-top: 9px;
  font-size: 0.86rem;
}

.ys-system-line small {
  color: #5b5b56;
  font: 600 0.58rem/1.45 "Space Mono", ui-monospace, monospace;
  text-transform: uppercase;
}

.site-footer {
  border-color: #151515;
}

.footer-mark {
  color: #090909;
  font-family: Caveat, "Segoe Print", cursive;
  font-style: italic;
  transform: rotate(-4deg);
}

@media (max-width: 920px) {
  .site-header {
    padding-inline: 18px;
  }

  .contact-pill span {
    display: none;
  }

  .contact-pill {
    padding: 5px;
  }

  .ys-system-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ys-system-line > div {
    border-bottom: 1px solid rgba(9, 9, 9, 0.18);
  }
}

@media (max-width: 640px) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding-top: 8px;
  }

  .site-header .mark {
    grid-column: 1;
    grid-row: 1;
  }

  .site-header .contact-pill {
    grid-column: 2;
    grid-row: 1;
  }

  .site-header .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: center;
  }

  .hero-journey .hero-copy .intro-copy {
    transform: none;
  }

  .feature-viz.technical-plate {
    border-top: 1px solid rgba(9, 9, 9, 0.22);
    border-left: 0;
  }

  .ys-system-line {
    grid-template-columns: 1fr;
  }

  .ys-system-line > div {
    min-height: 0;
  }

  .dossier-section::before {
    display: none;
  }
}

/* ==========================================================================
   HOMEPAGE BENTO PREVIEWS
   Scoped to the homepage so the archive pages keep their existing structures.
   ========================================================================== */

.site-header {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  padding-inline: 24px;
}

.site-header .mark {
  margin-left: 0;
  justify-self: start;
}

.site-header .nav {
  justify-self: center;
}

.site-header .contact-pill {
  justify-self: end;
}

.home-page .card-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(340px, 0.82fr);
  grid-template-rows: auto;
  gap: 16px;
  align-items: start;
}

.home-page .card-stack > .feature {
  grid-column: 1;
  grid-row: 1;
}

.home-page .card-stack > .card-row {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: 1fr;
  gap: 16px;
  align-content: start;
}

.home-page .card-stack > .card-row > .pcard {
  grid-column: 1;
}

.home-page .feature,
.home-page .pcard,
.home-page .contact-feature {
  border: 1px solid rgba(9, 9, 9, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 54px rgba(9, 9, 9, 0.05);
}

.home-page .feature {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(300px, 1fr);
  overflow: hidden;
}

.home-page .feature-body {
  padding: clamp(30px, 3.4vw, 46px);
}

.home-page .feature-viz {
  min-height: 300px;
  border-top: 1px solid rgba(9, 9, 9, 0.16);
  border-left: 0;
}

.home-page .feature-viz.technical-plate {
  min-height: 300px;
  border-top: 1px solid rgba(9, 9, 9, 0.16);
  border-left: 0;
}

.home-page .pcard {
  display: flex;
  min-height: 350px;
  padding: 28px;
  flex-direction: column;
}

.home-page .pcard::before {
  left: 28px;
  width: 44px;
  height: 5px;
  border-radius: 0 0 4px 4px;
}

.home-page .pcard h3 {
  margin-top: 16px;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
}

.home-page .pcard .lead {
  margin-top: 14px;
  font-size: 0.9rem;
  line-height: 1.55;
}

.home-page .pcard .pviz.technical-plate {
  min-height: 132px;
  margin: 22px 0 0;
  padding: 30px 4px 2px;
  border: 1px solid rgba(9, 9, 9, 0.13);
  border-radius: 12px;
}

.home-page .pcard .stats {
  margin-top: auto;
  padding-top: 18px;
}

.home-page .pcard .stats > div {
  padding-top: 0;
}

.home-page .card-row.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-page .card-row.three > .pcard {
  min-height: 500px;
}

.home-page .contact-feature {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  grid-template-rows: 1fr;
}

@media (max-width: 920px) {
  .site-header {
    padding-inline: 18px;
  }

  .home-page .card-stack {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .home-page .card-stack > .feature {
    grid-column: 1;
    grid-row: auto;
  }

  .home-page .card-stack > .card-row {
    display: grid;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .home-page .card-stack > .card-row > .pcard {
    grid-column: auto;
  }

  .home-page .card-row.three {
    grid-template-columns: 1fr;
  }

  .home-page .card-row.three > .pcard {
    min-height: 0;
  }

  .home-page .contact-feature {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding-inline: 16px;
  }

  .home-page .card-stack > .card-row {
    grid-template-columns: 1fr;
  }

  .home-page .feature,
  .home-page .pcard,
  .home-page .contact-feature {
    border-radius: 16px;
  }

  .home-page .pcard {
    min-height: 0;
    padding: 24px;
  }
}

/* Header follows the same left and right rails as the hero copy. */
.site-header {
  width: calc(var(--page) - 4px);
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

/* Expandable case previews keep the reader inside the homepage bento. */
.preview-more {
  margin-top: 26px;
  border-top: 1px solid rgba(9, 9, 9, 0.24);
}

.preview-more summary {
  display: flex;
  min-height: 62px;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.preview-more summary::-webkit-details-marker {
  display: none;
}

.preview-more summary > span {
  display: grid;
  gap: 3px;
}

.preview-more summary small,
.preview-more-grid small {
  color: #666660;
  font: 700 0.52rem/1.3 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.preview-more summary strong {
  font-size: 0.82rem;
  font-weight: 700;
}

.preview-more summary b {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  font: 500 1rem/1 Inter, ui-sans-serif, sans-serif;
  place-items: center;
  transition: transform 180ms ease;
}

.preview-more summary:hover b {
  transform: rotate(8deg);
}

.preview-more[open] summary b {
  transform: rotate(180deg);
}

.preview-more-body {
  padding: 4px 0 30px;
  animation: preview-reveal 220ms ease both;
}

.preview-more-intro {
  max-width: 670px;
  margin: 0;
  color: #272724;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.55;
}

.preview-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.15);
  border-radius: 12px;
  background: rgba(9, 9, 9, 0.15);
}

.preview-more-grid > div {
  min-height: 138px;
  padding: 18px;
  background-color: #fff;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.055) 0 0.42px, transparent 0.58px);
  background-size: 7px 7px;
}

.preview-more-grid p {
  margin: 10px 0 0;
  color: #4f4f4a;
  font-size: 0.78rem;
  line-height: 1.55;
}

.home-page .pcard .preview-more {
  width: 100%;
}

.home-page .pcard .preview-more-grid {
  grid-template-columns: 1fr;
}

.home-page .pcard .preview-more-grid > div {
  min-height: 0;
}

.home-page .pcard.is-expanded,
.home-page .feature.is-expanded {
  border-color: rgba(9, 9, 9, 0.34);
  box-shadow: 0 22px 62px rgba(9, 9, 9, 0.075);
}

@keyframes preview-reveal {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 920px) {
  .site-header {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 8px 0 0;
  }

  .preview-more-grid {
    grid-template-columns: 1fr;
  }

  .preview-more-grid > div {
    min-height: 0;
  }
}

/* ==========================================================================
   PREVIEW EDITORIAL REFINEMENT
   Less interface decoration, stronger hooks, and useful case depth.
   ========================================================================== */

.home-page .sec-head .sec-lead {
  align-self: center;
}

.feature-num,
.pnum {
  display: none;
}

.home-page .feature,
.home-page .pcard,
.home-page .contact-feature {
  border-color: rgba(9, 9, 9, 0.2);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(9, 9, 9, 0.035);
}

.home-page .pcard::before,
.home-page .technical-plate::after {
  display: none;
}

.home-page .technical-plate {
  background-color: #fff;
  background-image: none;
}

.home-page .pcard .pviz.technical-plate {
  min-height: 112px;
  margin-top: 20px;
  padding-top: 27px;
  border-color: rgba(9, 9, 9, 0.12);
  border-radius: 7px;
}

.home-page .feature-viz.technical-plate {
  min-height: 270px;
}

.home-page .preview-hook {
  max-width: 680px;
  margin-top: 15px;
  color: #22221f;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  font-weight: 500;
  line-height: 1.5;
}

.home-page .preview-hook::after {
  display: block;
  width: 42px;
  height: 4px;
  margin-top: 15px;
  background: #fff27a;
  content: "";
}

.home-page .pcard .preview-hook {
  font-size: 0.92rem;
}

.preview-more {
  margin-top: 24px;
}

.preview-more summary {
  min-height: 58px;
}

.preview-more summary b {
  width: 27px;
  height: 27px;
  border-radius: 4px;
  background: transparent;
}

.preview-more[open] summary b {
  border-color: #090909;
  background: #fff27a;
}

.preview-more-body {
  padding: 0 0 30px;
}

.preview-outcome {
  display: flex;
  gap: 10px;
  margin: 0 -1px;
  padding: 13px 14px;
  border-top: 1px solid rgba(9, 9, 9, 0.14);
  border-bottom: 1px solid rgba(9, 9, 9, 0.14);
  background: rgba(255, 242, 122, 0.22);
  color: #272724;
  font: 700 0.61rem/1.55 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.preview-outcome span {
  color: #b69e00;
  font-size: 0.86rem;
  line-height: 1;
}

.preview-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 54px);
  padding-top: 30px;
}

.preview-context {
  display: grid;
  gap: 28px;
  align-content: start;
}

.preview-context small,
.preview-shipped > small {
  display: block;
  color: #686862;
  font: 600 1.08rem/1 Caveat, "Segoe Print", cursive;
  letter-spacing: 0;
  text-transform: none;
}

.preview-context p {
  margin: 10px 0 0;
  color: #3f3f3b;
  font-size: 0.8rem;
  line-height: 1.65;
}

.preview-shipped ul {
  display: grid;
  gap: 13px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.preview-shipped li {
  position: relative;
  display: grid;
  gap: 3px;
  padding-left: 18px;
}

.preview-shipped li::before {
  position: absolute;
  top: 0.04em;
  left: 0;
  color: #d3b900;
  content: "→";
  font-weight: 800;
}

.preview-shipped li strong {
  font-size: 0.76rem;
  font-weight: 700;
}

.preview-shipped li span {
  color: #4f4f4a;
  font-size: 0.76rem;
  line-height: 1.55;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}

.preview-tags span {
  padding: 5px 8px;
  border: 1px solid rgba(9, 9, 9, 0.18);
  color: #64645e;
  font: 700 0.5rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.home-page .pcard .preview-case-grid {
  grid-template-columns: 1fr;
}

.home-page .pcard .preview-shipped {
  padding-top: 2px;
}

/* The number remains useful, but the yellow numbered circle motif is removed. */
.case-stamp {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #555550;
  font: 700 0.72rem/1.2 "Space Mono", ui-monospace, monospace;
}

.case-stamp span {
  position: static;
  display: block;
  overflow: visible;
  width: auto;
  height: auto;
  margin-top: 7px;
  clip: auto;
  color: #777771;
  font-size: 0.5rem;
}

.ys-system-line span {
  display: inline-block;
  width: fit-content;
  height: auto;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 3px solid #fff27a;
  border-radius: 0;
  background: transparent;
}

.hero-journey .journey-node {
  width: 25px;
  height: 18px;
  border: 1px solid rgba(9, 9, 9, 0.72);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
  color: #090909;
  font-size: 0.46rem;
}

.hero-journey .journey-stop.is-active .journey-node,
.hero-journey .journey-stop:hover .journey-node,
.hero-journey .journey-stop:focus-visible .journey-node {
  background: #fff;
  box-shadow: inset 0 -4px 0 #fff27a;
}

.hero-journey .journey-node::before {
  top: 19px;
}

@media (max-width: 640px) {
  .home-page .feature,
  .home-page .pcard,
  .home-page .contact-feature {
    border-radius: 9px;
  }

  .preview-case-grid {
    grid-template-columns: 1fr;
  }
}

.preview-more summary:focus-visible {
  outline: 1px solid #090909;
  outline-offset: 3px;
}

/* ==========================================================================
   WORK EXPERIENCE EDITORIAL ACCORDION
   Full previews first, structured depth on demand.
   ========================================================================== */

.work-experience-list {
  border-top: 1px solid #090909;
}

.work-entry {
  border-right: 1px solid rgba(9, 9, 9, 0.22);
  border-bottom: 1px solid rgba(9, 9, 9, 0.22);
  border-left: 1px solid rgba(9, 9, 9, 0.22);
  background: rgba(255, 255, 255, 0.82);
}

.work-entry summary {
  position: relative;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) minmax(245px, 0.46fr) 74px;
  gap: clamp(22px, 3vw, 42px);
  min-height: 220px;
  padding: 30px 28px;
  cursor: pointer;
  list-style: none;
  align-items: center;
  transition: background 180ms ease;
}

.work-entry summary::-webkit-details-marker {
  display: none;
}

.work-entry summary:hover {
  background: rgba(255, 242, 122, 0.075);
}

.work-entry summary:focus-visible {
  z-index: 2;
  outline: 0;
  box-shadow: inset 5px 0 0 #fff27a;
}

.work-entry[open] summary {
  border-bottom: 2px solid #ffe64d;
  background: rgba(255, 255, 255, 0.96);
}

.work-entry-identity {
  display: grid;
  min-height: 160px;
  padding-right: 24px;
  border-right: 1px solid rgba(9, 9, 9, 0.16);
  align-content: center;
  gap: 11px;
}

.work-entry-no {
  color: #777771;
  font: 500 1.18rem/1 Caveat, "Segoe Print", cursive;
  transform: rotate(-4deg);
}

.work-entry-identity h3 {
  margin: 0;
  font-size: clamp(1.32rem, 1.8vw, 1.68rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.work-entry-identity p {
  margin: 0;
  color: #666660;
  font: 600 0.56rem/1.5 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.work-entry-story {
  min-width: 0;
}

.work-entry-role {
  margin: 0;
  color: #676761;
  font: 700 0.54rem/1.4 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.work-entry-story h4 {
  max-width: 700px;
  margin: 10px 0 0;
  font-size: clamp(1.15rem, 1.8vw, 1.48rem);
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 1.18;
}

.work-entry-story mark {
  padding: 0 0.06em;
  color: inherit;
  background: linear-gradient(transparent 62%, #fff27a 62% 94%, transparent 94%);
}

.work-entry-copy {
  max-width: 710px;
  margin: 15px 0 0;
  color: #4e4e49;
  font-size: 0.82rem;
  line-height: 1.62;
}

.work-entry-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  padding: 18px 0;
  border-top: 1px solid rgba(9, 9, 9, 0.23);
  border-bottom: 1px solid rgba(9, 9, 9, 0.15);
}

.work-entry-metrics strong {
  display: block;
  color: #090909;
  font-size: clamp(1.24rem, 1.8vw, 1.62rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.work-entry-metrics span {
  display: block;
  margin-top: 7px;
  color: #6b6b65;
  font: 700 0.48rem/1.3 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work-toggle {
  display: grid;
  justify-items: end;
  align-self: end;
  gap: 10px;
  color: #444440;
  font: 600 0.7rem/1 Inter, ui-sans-serif, sans-serif;
}

.work-toggle b {
  font: 500 1rem/1 Caveat, "Segoe Print", cursive;
  transition: transform 180ms ease;
}

.work-entry[open] .work-toggle b {
  transform: rotate(180deg);
}

.work-toggle .when-open,
.work-entry[open] .work-toggle .when-closed {
  display: none;
}

.work-entry[open] .work-toggle .when-open {
  display: inline;
}

.work-entry-detail {
  background: rgba(255, 255, 255, 0.96);
  animation: preview-reveal 220ms ease both;
}

.work-outcome {
  display: flex;
  gap: 11px;
  margin: 0;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.15);
  background: rgba(255, 242, 122, 0.2);
  color: #292926;
  font: 700 0.62rem/1.5 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.work-outcome span {
  color: #c9ae00;
  font-size: 0.9rem;
  line-height: 1;
}

.work-entry-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 7vw, 96px);
  padding: clamp(38px, 5vw, 64px) clamp(28px, 4vw, 54px);
}

.work-reflection {
  display: grid;
  gap: 34px;
  align-content: start;
}

.work-reflection section {
  min-width: 0;
}

.work-detail-label {
  margin: 0;
  color: #666660;
  font: 600 1.14rem/1 Caveat, "Segoe Print", cursive;
}

.work-reflection section > p:last-child {
  margin: 12px 0 0;
  color: #3f3f3b;
  font-size: 0.84rem;
  line-height: 1.72;
}

.work-reflection ul,
.work-shipped ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.work-reflection li {
  position: relative;
  margin-top: 12px;
  padding-left: 17px;
  color: #555550;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.62;
}

.work-reflection li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #9a9a94;
  content: "•";
}

.work-shipped li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 13px;
  padding-left: 18px;
}

.work-shipped li::before {
  position: absolute;
  top: 0.08em;
  left: 0;
  color: #d2b700;
  content: "→";
  font-weight: 800;
}

.work-shipped li strong {
  font-size: 0.79rem;
  font-weight: 700;
}

.work-shipped li span {
  color: #4f4f4a;
  font-size: 0.79rem;
  line-height: 1.6;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(9, 9, 9, 0.13);
}

.work-tags span {
  padding: 5px 8px;
  border: 1px solid rgba(9, 9, 9, 0.18);
  color: #65655f;
  font: 700 0.5rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .work-entry summary {
    grid-template-columns: 155px minmax(0, 1fr);
    min-height: 0;
  }

  .work-entry-metrics {
    grid-column: 1 / -1;
  }

  .work-toggle {
    position: absolute;
    right: 28px;
    bottom: 26px;
  }

  .work-entry-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .work-entry summary {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 25px 22px 72px;
  }

  .work-entry-identity {
    min-height: 0;
    padding: 0 0 19px;
    border-right: 0;
    border-bottom: 1px solid rgba(9, 9, 9, 0.15);
  }

  .work-entry-metrics {
    grid-column: 1;
  }

  .work-outcome {
    padding-right: 22px;
    padding-left: 22px;
  }

  .work-entry-detail-grid {
    gap: 40px;
    padding-right: 22px;
    padding-left: 22px;
  }

  .work-shipped li {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* ==========================================================================
   WORK EXPERIENCE VISUAL SYSTEM
   Architectural crops from the hero world, paired with a tighter reading grid.
   ========================================================================== */

.work-entry summary {
  grid-template-columns: 160px minmax(360px, 1fr) minmax(300px, 0.56fr) 56px;
  gap: clamp(24px, 2.5vw, 38px);
  min-height: 0;
  padding: 26px 28px;
  align-items: stretch;
}

.work-entry-identity {
  min-height: 0;
  padding: 8px 22px 8px 0;
  align-content: start;
  gap: 9px;
}

.work-entry-no {
  color: #696963;
  font: 700 0.58rem/1.3 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: none;
}

.work-entry-story {
  display: flex;
  min-width: 0;
  padding: 8px 0;
  flex-direction: column;
  justify-content: center;
}

.work-entry-story h4 {
  margin-top: 8px;
}

.work-entry-copy {
  margin-top: 12px;
  font-size: 0.79rem;
  line-height: 1.58;
}

.work-entry-proof {
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(132px, 1fr) auto;
  gap: 11px;
}

.work-entry-visual {
  position: relative;
  min-height: 132px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.2);
  background-color: #fff;
  background-image: url("./assets/images/operator-landscape@2x.jpg");
  background-repeat: no-repeat;
  background-size: 340% auto;
  isolation: isolate;
}

.work-entry-visual--yelloskye {
  background-position: 100% 18%;
}

.work-entry-visual--rayden {
  background-position: 77% 58%;
}

.work-entry-visual--hide {
  background-position: 27% 57%;
}

.work-entry-visual::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.92) 100%);
  content: "";
}

.work-entry-visual figcaption {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 9px;
  left: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: space-between;
  color: #090909;
}

.work-entry-visual figcaption span {
  font: 700 0.44rem/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.work-entry-visual figcaption strong {
  padding: 4px 6px;
  background: #fff27a;
  font: 700 0.48rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.work-entry-metrics {
  padding: 11px 0 0;
  border-top: 1px solid rgba(9, 9, 9, 0.23);
  border-bottom: 0;
}

.work-entry-metrics strong {
  font-size: clamp(1.08rem, 1.45vw, 1.38rem);
}

.work-entry-metrics span {
  margin-top: 5px;
  font-size: 0.43rem;
}

.work-toggle {
  align-self: end;
  padding-bottom: 2px;
}

.work-outcome {
  padding-top: 12px;
  padding-bottom: 12px;
}

.work-entry-detail-grid {
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(42px, 5vw, 70px);
  padding: 36px clamp(30px, 3.5vw, 46px) 42px;
}

.work-reflection {
  gap: 26px;
}

.work-detail-label {
  color: #5d5d57;
  font: 700 0.54rem/1.4 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.work-reflection section > p:last-child {
  margin-top: 10px;
  font-size: 0.79rem;
  line-height: 1.62;
}

.work-reflection ul,
.work-shipped ul {
  margin-top: 10px;
}

.work-reflection li {
  margin-top: 9px;
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.55;
}

.work-shipped {
  padding-left: clamp(26px, 3vw, 40px);
  border-left: 1px solid rgba(9, 9, 9, 0.13);
}

.work-shipped li {
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 14px;
  margin-top: 10px;
}

.work-shipped li strong,
.work-shipped li span {
  font-size: 0.76rem;
  line-height: 1.54;
}

.work-tags {
  margin-top: 20px;
  padding-top: 16px;
}

@media (max-width: 1040px) {
  .work-entry summary {
    grid-template-columns: 145px minmax(0, 1fr);
    padding-right: 72px;
  }

  .work-entry-proof {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.55fr);
    grid-template-rows: auto;
    align-items: end;
  }

  .work-entry-visual {
    min-height: 164px;
  }

  .work-toggle {
    right: 26px;
    bottom: 28px;
  }
}

@media (max-width: 700px) {
  .work-entry summary {
    grid-template-columns: 1fr;
    gap: 21px;
    padding: 24px 21px 72px;
  }

  .work-entry-identity {
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(9, 9, 9, 0.15);
  }

  .work-entry-proof {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .work-entry-visual {
    min-height: 190px;
    background-size: 310% auto;
  }

  .work-entry-detail-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 22px 34px;
  }

  .work-shipped {
    padding: 28px 0 0;
    border-top: 1px solid rgba(9, 9, 9, 0.13);
    border-left: 0;
  }

  .work-shipped li {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* ==========================================================================
   WORK EXPERIENCE SYSTEM V2
   A visual case header followed by a concise operating log.
   ========================================================================== */

.work-entry summary {
  grid-template-columns: 145px minmax(280px, 1fr) minmax(380px, 0.82fr) 46px;
  gap: 24px;
  padding: 28px 26px;
  align-items: stretch;
}

.work-entry-identity {
  padding: 6px 20px 6px 0;
  align-content: center;
}

.work-entry-story {
  padding: 6px 0;
}

.work-entry-story h4 {
  max-width: 560px;
  font-size: clamp(1.18rem, 1.65vw, 1.45rem);
}

.work-entry-copy {
  max-width: 590px;
  margin-top: 13px;
  color: #494945;
  font-size: 0.78rem;
  line-height: 1.58;
}

.work-entry-proof {
  grid-template-rows: 180px auto;
  gap: 12px;
}

.work-entry-visual {
  min-height: 180px;
  background-size: 300% auto;
}

.work-entry-visual--yelloskye {
  background-position: 100% 15%;
}

.work-entry-visual--rayden {
  background-position: 77% 56%;
}

.work-entry-visual--hide {
  background-position: 27% 56%;
}

.work-entry-visual figcaption {
  right: 12px;
  bottom: 11px;
  left: 12px;
}

.work-entry-visual figcaption span {
  font-size: 0.47rem;
}

.work-entry-visual figcaption strong {
  padding: 5px 7px;
  font-size: 0.5rem;
}

.work-entry-metrics {
  gap: 18px;
  padding-top: 12px;
}

.work-entry-metrics strong {
  font-size: clamp(1.18rem, 1.55vw, 1.48rem);
}

.work-toggle {
  display: grid;
  align-self: center;
  justify-items: center;
  gap: 11px;
  padding: 0;
  text-align: center;
  font: 650 0.62rem/1.15 Inter, ui-sans-serif, sans-serif;
}

.work-toggle b {
  display: grid;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(9, 9, 9, 0.72);
  place-items: center;
  font: 500 1rem/1 Inter, ui-sans-serif, sans-serif;
  transform: none;
}

.work-toggle b::before {
  content: "+";
}

.work-entry[open] .work-toggle b {
  transform: none;
}

.work-entry[open] .work-toggle b::before {
  content: "−";
}

.work-entry-detail {
  border-top: 0;
}

.work-case-layout {
  display: grid;
  grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr);
  background: rgba(255, 255, 255, 0.98);
}

.work-case-thesis {
  padding: clamp(34px, 4vw, 52px);
  border-right: 1px solid rgba(9, 9, 9, 0.15);
  background:
    linear-gradient(rgba(9, 9, 9, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 9, 9, 0.025) 1px, transparent 1px),
    #fff;
  background-size: 18px 18px;
}

.work-detail-label {
  color: #666660;
  font: 700 0.52rem/1.35 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-case-thesis h5,
.work-build-head h5 {
  margin: 9px 0 0;
  color: #090909;
  font-size: clamp(1.15rem, 1.7vw, 1.48rem);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.16;
}

.work-case-context {
  max-width: 470px;
  margin: 16px 0 0;
  color: #4e4e49;
  font-size: 0.79rem;
  line-height: 1.62;
}

.work-case-move {
  margin-top: 28px;
  padding: 16px 18px;
  border-left: 3px solid #ffe64d;
  background: linear-gradient(90deg, rgba(255, 242, 122, 0.22), rgba(255, 242, 122, 0.035));
}

.work-case-move span,
.work-case-lesson span {
  display: block;
  color: #666660;
  font: 700 0.48rem/1.3 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.work-case-move strong {
  display: block;
  max-width: 430px;
  margin-top: 7px;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.48;
}

.work-case-lesson {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(9, 9, 9, 0.14);
}

.work-case-lesson p {
  margin: 0;
  color: #3f3f3b;
  font-size: 0.76rem;
  font-weight: 550;
  line-height: 1.55;
}

.work-build-log {
  padding: clamp(32px, 3.4vw, 46px);
}

.work-build-head {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid #090909;
}

.work-build-head > span {
  color: #6a6a64;
  font: 700 0.49rem/1.3 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.055em;
  text-align: right;
  text-transform: uppercase;
}

.work-build-list article {
  display: grid;
  grid-template-columns: 34px 108px minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 66px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(9, 9, 9, 0.13);
  align-items: center;
}

.work-build-no {
  color: #c4a900;
  font: 700 0.57rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.045em;
}

.work-build-list h6 {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 690;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.work-build-list p {
  margin: 0;
  color: #4d4d48;
  font-size: 0.72rem;
  line-height: 1.48;
}

.work-build-list em {
  min-width: 66px;
  padding: 5px 7px;
  border: 1px solid rgba(9, 9, 9, 0.18);
  color: #5f5f59;
  font: normal 700 0.44rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.045em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 1040px) {
  .work-entry summary {
    grid-template-columns: 145px minmax(0, 1fr);
    padding-right: 70px;
  }

  .work-entry-proof {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(245px, 0.5fr);
    grid-template-rows: 190px;
    align-items: stretch;
  }

  .work-entry-visual {
    min-height: 190px;
  }

  .work-entry-metrics {
    align-self: end;
    padding: 16px 0;
    border-bottom: 1px solid rgba(9, 9, 9, 0.15);
  }

  .work-toggle {
    right: 22px;
    bottom: 28px;
  }

  .work-case-layout {
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  }

  .work-build-list article {
    grid-template-columns: 30px 96px minmax(0, 1fr);
  }

  .work-build-list em {
    grid-column: 3;
    width: max-content;
  }
}

@media (max-width: 760px) {
  .work-entry summary {
    grid-template-columns: 1fr;
    gap: 21px;
    padding: 24px 21px 74px;
  }

  .work-entry-proof {
    grid-column: 1;
    grid-template-columns: 1fr;
    grid-template-rows: 230px auto;
  }

  .work-entry-visual {
    min-height: 230px;
    background-size: 285% auto;
  }

  .work-entry-metrics {
    padding: 13px 0 0;
    border-bottom: 0;
  }

  .work-toggle {
    right: 21px;
    bottom: 22px;
  }

  .work-case-layout {
    grid-template-columns: 1fr;
  }

  .work-case-thesis {
    padding: 32px 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(9, 9, 9, 0.15);
  }

  .work-build-log {
    padding: 30px 22px 36px;
  }

  .work-build-list article {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .work-build-list h6 {
    grid-column: 2;
  }

  .work-build-list p {
    grid-column: 2 / -1;
  }

  .work-build-list em {
    grid-column: 3;
    grid-row: 1;
  }
}

/* work-entry visuals: bespoke diagram plates, matching Projects/Studio language */
.work-entry-visual.technical-plate {
  display: grid;
  place-items: center;
  padding: 18px;
  background-image:
    radial-gradient(circle, rgba(9, 9, 9, 0.15) 0 0.5px, transparent 0.66px),
    linear-gradient(90deg, transparent 49.8%, rgba(9, 9, 9, 0.035) 50%, transparent 50.2%);
}
.work-entry-visual.technical-plate svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   BENTO WORK — minimal grid, single accent, real whitespace.
   Namespaced (bento-*) so it wins cascade cleanly, no legacy dependency.
   ========================================================================== */

.bento-work {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-top: 8px;
}

.bento-tile {
  display: flex;
  flex-direction: column;
  padding: 36px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper);
}

.bento-tile--lg {
  grid-row: 1 / 3;
  padding: 44px;
}

.bento-head {
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.bento-no {
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.bento-kicker {
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bento-tile h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: Fraunces, Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.bento-tile--lg h3 {
  font-size: 2rem;
}

.bento-hook {
  margin: 22px 0 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
}

.bento-tile--lg .bento-hook {
  max-width: 34ch;
  font-size: 1.3rem;
}

.bento-copy {
  max-width: 46ch;
  margin: 12px 0 0;
  color: var(--secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

.bento-visual {
  margin: 28px 0 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper-deep);
}

.bento-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.bento-visual--sm {
  margin-top: auto;
  padding-top: 22px;
}

.bento-tile--lg .bento-visual {
  margin-top: 28px;
}

.b-line { fill: none; stroke: var(--hairline-strong); stroke-width: 1.4; }
.b-soft { fill: var(--hairline); }
.b-dot { fill: var(--hairline-strong); opacity: 0.35; }
.b-accent { fill: var(--brass); }
.b-label {
  fill: var(--muted);
  font: 500 10px "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.b-tag {
  fill: var(--ink);
  font: 600 11px Inter, ui-sans-serif, sans-serif;
}
.b-tag--on { fill: var(--ink); }

.bento-stats {
  display: flex;
  gap: 28px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.bento-stats--3 {
  margin-top: 20px;
}

.bento-stats strong {
  display: block;
  color: var(--ink);
  font-family: Fraunces, Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
}

.bento-stats span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bento-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 22px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}

.bento-tile--lg .bento-link { margin-top: 24px; }

.bento-link span { transition: transform 140ms ease; }
.bento-link:hover span { transform: translateX(3px); }

@media (max-width: 860px) {
  .bento-work { grid-template-columns: 1fr; }
  .bento-tile--lg { grid-row: auto; }
}

/* ==========================================================================
   PROJECT BENTO — the Work framework, with project-specific visual evidence.
   ========================================================================== */

.bento-projects {
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
  align-items: stretch;
}

.project-tile {
  overflow: hidden;
}

.bento-tile--lg.project-tile {
  padding: 28px;
}

.bento-projects .project-tile--koel {
  grid-row: auto;
  height: 100%;
}

.project-side {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
  min-width: 0;
  height: 100%;
}

.project-side .project-tile {
  min-height: 0;
}

.bento-projects:has(details[open]) {
  align-items: start;
}

.bento-projects:has(details[open]) .project-tile--koel,
.bento-projects:has(details[open]) .project-side {
  height: auto;
}

.project-tile .bento-head {
  min-height: 17px;
}

.project-tile h3 {
  margin-top: 8px;
}

.bento-summary {
  max-width: 64ch;
  margin: 13px 0 0;
  color: var(--secondary);
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

.project-tile--koel .project-visual {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 350px;
}

.project-tile--koel .koel-board {
  flex: 1 1 auto;
  min-height: 320px;
}

.project-side .project-tile {
  padding: 18px;
}

.project-side .project-tile h3 {
  font-size: 1.2rem;
}

.project-side .bento-summary {
  min-height: 0;
  margin-top: 9px;
  font-size: 0.74rem;
  line-height: 1.45;
}

#projects {
  padding-top: clamp(54px, 6vw, 78px);
  padding-bottom: clamp(62px, 7vw, 88px);
  scroll-margin-top: 84px;
}

#projects .sec-head {
  margin-bottom: 30px;
}

#projects .sec-head h2 {
  max-width: 19ch;
  line-height: 1.08;
}

#projects .project-attribution {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
}

.project-visual {
  overflow: hidden;
  color: var(--ink);
  background-color: var(--paper-deep);
  background-image:
    radial-gradient(circle, rgba(9, 9, 9, 0.1) 0 0.55px, transparent 0.7px);
  background-size: 6px 6px;
}

.project-tile .bento-visual {
  margin-top: 16px;
}

.project-side .project-tile .bento-visual {
  margin-top: 11px;
}

.project-visual figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

.project-visual-note {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  padding: 9px 13px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  letter-spacing: 0.05em;
}

.project-visual-note span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0 2px 16px;
  border-radius: 50%;
  background: var(--brass);
}

.koel-output {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 220px;
  padding: 24px 22px;
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
}

.koel-output > p {
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.54rem;
  letter-spacing: 0.07em;
}

.koel-output > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 auto;
  align-items: center;
  margin-top: 10px;
}

.koel-output article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 18px;
}

.koel-output article + article {
  padding-left: 18px;
  border-left: 1px solid var(--hairline);
}

.koel-output article > span {
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.5rem;
}

.koel-output article > strong {
  margin-top: 10px;
  font-size: 0.74rem;
  font-weight: 600;
}

.koel-output article > small {
  margin-top: 5px;
  color: var(--secondary);
  font-size: 0.66rem;
  line-height: 1.5;
}

/* KOEL: three distinct research stages */
.koel-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 270px;
}

.koel-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 22px;
}

.koel-stage + .koel-stage {
  border-left: 1px solid var(--hairline);
}

.koel-stage > p {
  position: absolute;
  top: 18px;
  left: 20px;
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.54rem;
  letter-spacing: 0.07em;
}

.koel-stage > strong {
  position: relative;
  z-index: 2;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
}

.koel-stage > span {
  position: relative;
  z-index: 2;
  max-width: 18ch;
  margin-top: 5px;
  color: var(--secondary);
  font-size: 0.66rem;
  line-height: 1.45;
}

.city-route {
  position: absolute;
  inset: 48px 22px 82px;
  transform: rotate(-7deg);
}

.city-route::before,
.city-route::after {
  content: "";
  position: absolute;
  inset: 46% 8% auto;
  height: 1px;
  background: var(--ink);
  transform: rotate(25deg);
  transform-origin: center;
}

.city-route::after {
  inset: 46% 16% auto;
  transform: rotate(-28deg);
}

.city-route i {
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--paper-deep);
}

.city-route i:nth-child(1) { left: 4%; top: 25%; background: var(--brass); }
.city-route i:nth-child(2) { left: 38%; top: 53%; }
.city-route i:nth-child(3) { left: 67%; top: 20%; }
.city-route i:nth-child(4) { right: 2%; top: 64%; }
.city-route i:nth-child(5) { left: 25%; bottom: 2%; }

.signal-stack {
  position: absolute;
  inset: 56px 28px 86px;
}

.signal-stack i {
  position: absolute;
  left: 12%;
  width: 74%;
  height: 52%;
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  background:
    linear-gradient(var(--hairline), var(--hairline)) 16px 15px / 56% 1px no-repeat,
    linear-gradient(var(--hairline), var(--hairline)) 16px 25px / 72% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.025);
}

.signal-stack i:nth-child(1) { top: 32%; transform: rotate(-8deg); }
.signal-stack i:nth-child(2) { top: 22%; transform: rotate(6deg); }
.signal-stack i:nth-child(3) { top: 10%; transform: rotate(-2deg); }
.signal-stack i:nth-child(4) {
  top: 0;
  border-color: var(--ink);
  background:
    radial-gradient(circle, var(--brass) 0 3px, transparent 3.5px) 78% 70% / 12px 12px no-repeat,
    linear-gradient(var(--hairline-strong), var(--hairline-strong)) 16px 15px / 56% 1px no-repeat,
    linear-gradient(var(--hairline-strong), var(--hairline-strong)) 16px 25px / 72% 1px no-repeat,
    linear-gradient(var(--paper), var(--paper));
}

.decision-room {
  position: absolute;
  inset: 60px 28px 91px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(var(--hairline), var(--hairline)) center 28% / 62% 1px no-repeat,
    linear-gradient(var(--hairline), var(--hairline)) center 40% / 44% 1px no-repeat,
    var(--paper);
}

.decision-room::before {
  content: "RECOMMENDATION";
  position: absolute;
  left: 50%;
  top: 57%;
  padding: 5px 8px;
  background: var(--brass);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.48rem;
  letter-spacing: 0.04em;
  transform: translateX(-50%);
}

.decision-room i {
  position: absolute;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.decision-room i:nth-child(1) { left: 12%; }
.decision-room i:nth-child(2) { left: 36%; }
.decision-room i:nth-child(3) { right: 36%; }
.decision-room i:nth-child(4) { right: 12%; background: var(--brass); }

/* History Lit Fest: physical distribution network */
.venue-map {
  position: relative;
  height: 78px;
  background:
    linear-gradient(18deg, transparent 48.5%, rgba(9, 9, 9, 0.12) 49%, rgba(9, 9, 9, 0.12) 49.3%, transparent 49.8%) center / 100% 100%,
    linear-gradient(-22deg, transparent 48.5%, rgba(9, 9, 9, 0.1) 49%, rgba(9, 9, 9, 0.1) 49.3%, transparent 49.8%) center / 100% 100%;
}

.venue {
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--paper-deep);
}

.venue:nth-of-type(odd) { background: var(--brass); }
.venue--1 { left: 8%; top: 24%; }
.venue--2 { left: 23%; top: 62%; }
.venue--3 { left: 39%; top: 31%; }
.venue--4 { left: 52%; top: 68%; }
.venue--5 { left: 66%; top: 24%; }
.venue--6 { left: 82%; top: 60%; }
.venue--7 { left: 91%; top: 17%; }
.venue--8 { left: 73%; top: 82%; }

.venue-map strong {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  padding: 8px 12px 4px;
  background: var(--paper);
  font-family: Fraunces, Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  transform: translate(-50%, -50%);
}

.venue-map small {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(50% + 27px);
  padding: 0 8px 6px;
  background: var(--paper);
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  transform: translateX(-50%);
}

.project-side .venue-map strong {
  top: 44%;
  font-size: 1.45rem;
}

.project-side .venue-map small {
  top: calc(44% + 22px);
}

/* Digital Marketing: final-day paid conversion */
.conversion-plot {
  padding: 9px 14px 7px;
}

.conversion-bars {
  position: static;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 8px;
  height: 66px;
  padding: 0 8px;
  border-bottom: 1px solid var(--ink);
}

.conversion-bars i {
  position: relative;
  display: block;
  height: var(--bar);
  min-height: 10px;
  border: 1px solid var(--hairline-strong);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: var(--paper);
}

.conversion-bars i:last-child {
  border-color: var(--ink);
  background: var(--brass);
}

.conversion-bars i:last-child::before {
  content: "15";
  position: absolute;
  top: -22px;
  left: 50%;
  font-family: Fraunces, Georgia, serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  transform: translateX(-50%);
}

.project-side .conversion-bars i:last-child::before {
  top: -17px;
  font-size: 0.85rem;
}

.conversion-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.48rem;
  letter-spacing: 0.04em;
}

/* Inline project reading */
.bento-more {
  margin-top: 12px;
}

.bento-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper-deep);
  list-style: none;
  cursor: pointer;
}

.bento-more summary::-webkit-details-marker {
  display: none;
}

.bento-more summary > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bento-more summary small,
.project-thesis > small,
.project-lesson > small {
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  letter-spacing: 0.07em;
}

.bento-more summary strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.bento-more summary > b {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.bento-more summary > b::before,
.bento-more summary > b::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.bento-more summary > b::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 160ms ease;
}

.bento-more[open] summary > b {
  background: var(--brass);
}

.bento-more[open] summary {
  border-color: var(--hairline-strong);
}

.bento-more[open] summary > b::after {
  transform: translate(-50%, -50%);
}

.bento-more-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 28px 34px;
  padding: 20px 0 4px;
}

.project-tile:not(.project-tile--koel) .bento-more-body {
  grid-template-columns: 1fr;
  gap: 20px;
}

.case-result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 18px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--brass) 52%, var(--hairline));
  background: color-mix(in srgb, var(--brass) 13%, var(--paper));
}

.case-result small,
.case-column-label {
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  letter-spacing: 0.07em;
}

.case-result p {
  margin: 0;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
}

.project-thesis h4 {
  max-width: 32ch;
  margin: 10px 0 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.32;
}

.project-thesis p {
  margin: 12px 0 0;
  color: var(--secondary);
  font-size: 0.74rem;
  line-height: 1.58;
}

.project-thesis p strong {
  color: var(--ink);
  font-weight: 600;
}

.project-moves {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.case-column-label {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

.project-moves article {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.project-moves article > span {
  padding-top: 2px;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
}

.project-moves strong {
  display: block;
  font-size: 0.75rem;
}

.project-moves p {
  margin: 4px 0 0;
  color: var(--secondary);
  font-size: 0.7rem;
  line-height: 1.5;
}

.project-lesson {
  grid-column: 1 / -1;
  padding: 15px 17px;
  border-left: 3px solid var(--brass);
  background: color-mix(in srgb, var(--brass) 12%, var(--paper));
}

.project-lesson p {
  margin: 7px 0 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
}

.bento-projects .bento-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin-top: 14px;
  padding-top: 13px;
}

.project-side .bento-stats {
  margin-top: 9px;
  padding-top: 9px;
}

.project-side .bento-more {
  margin-top: 8px;
}

.project-side .bento-more summary {
  min-height: 42px;
}

.project-side .project-visual-note {
  display: none;
}

.bento-projects .bento-stats > div {
  min-width: 0;
}

.bento-projects .bento-stats > div:nth-child(2) {
  justify-self: center;
}

.bento-projects .bento-stats > div:last-child {
  justify-self: end;
}

@media (hover: hover) {
  .bento-more summary:hover strong {
    text-decoration: underline;
    text-decoration-color: var(--brass);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}

@media (max-width: 1100px) {
  .koel-board {
    min-height: 240px;
  }

  .koel-stage {
    padding: 18px;
  }

  .koel-stage > p {
    left: 16px;
  }

  .bento-more-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 860px) {
  .bento-projects {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #projects .sec-head {
    grid-template-columns: 1fr;
  }

  #projects .project-attribution {
    grid-column: 1;
    grid-row: auto;
    margin-top: 16px;
  }

  .project-side {
    gap: 14px;
  }

  .project-tile .bento-copy {
    min-height: 0;
  }

  .project-side .project-tile .bento-hook,
  .project-side .project-tile .bento-copy {
    min-height: 0;
  }

  .project-side .bento-summary {
    min-height: 0;
  }

  .project-tile--koel .project-visual {
    display: block;
    flex: none;
    min-height: 0;
  }

  .project-tile--koel .koel-board {
    min-height: 0;
  }

  .koel-output {
    display: none;
  }

  .koel-board {
    grid-template-columns: 1fr;
  }

  .koel-stage {
    min-height: 190px;
  }

  .koel-stage + .koel-stage {
    border-top: 1px solid var(--hairline);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .project-tile,
  .bento-tile--lg.project-tile {
    padding: 24px;
  }

  .project-visual {
    margin-right: -8px;
    margin-left: -8px;
  }

  .bento-summary {
    text-align: left;
  }

  .project-visual figcaption {
    padding: 11px 12px;
  }

  .project-visual figcaption span:last-child {
    display: none;
  }

  .project-visual-note {
    gap: 6px 10px;
    padding: 11px 12px;
  }

  .project-visual-note span:not(:last-child)::after {
    margin-left: 10px;
  }

  .bento-stats {
    gap: 18px;
  }

  .case-result {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .bento-stats strong {
    font-size: 1.12rem;
  }
}

/* ==========================================================================
   PROJECT LEDGER — compact editorial cases with equal visual weight.
   ========================================================================== */

.project-ledger {
  border-top: 1px solid var(--hairline-strong);
}

.ledger-case {
  display: grid;
  grid-template-columns: 74px minmax(300px, 0.84fr) minmax(430px, 1.16fr);
  gap: 24px 30px;
  align-items: center;
  padding: 28px 0 0;
  border-bottom: 1px solid var(--hairline-strong);
}

.ledger-index {
  align-self: start;
  padding-top: 3px;
  font-family: var(--mono);
  text-transform: uppercase;
}

.ledger-index strong {
  display: block;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ledger-index span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.59rem;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.ledger-copy {
  min-width: 0;
}

.ledger-kicker {
  margin: 0 0 7px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.59rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ledger-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2vw, 2.05rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.025em;
}

.ledger-summary {
  max-width: 54ch;
  margin: 13px 0 0;
  color: var(--secondary);
  font-size: 0.82rem;
  line-height: 1.52;
  text-align: left;
}

.ledger-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
}

.ledger-metrics strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.025em;
}

.ledger-metrics span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ledger-visual {
  min-width: 0;
  min-height: 206px;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.ledger-visual figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.52rem;
}

.ledger-visual .koel-board {
  grid-template-columns: repeat(3, 1fr);
  min-height: 170px;
}

.ledger-visual .koel-stage {
  min-height: 170px;
  padding: 13px;
}

.ledger-visual .koel-stage p {
  margin-bottom: 5px;
  font-size: 0.51rem;
}

.ledger-visual .koel-stage strong {
  font-size: 1.14rem;
}

.ledger-visual .koel-stage > span {
  max-width: 18ch;
  font-size: 0.59rem;
  line-height: 1.35;
}

.ledger-visual .city-route,
.ledger-visual .signal-stack,
.ledger-visual .decision-room {
  transform: scale(0.82);
  transform-origin: center;
}

.ledger-visual .venue-map,
.ledger-visual .conversion-plot {
  min-height: 170px;
}

.ledger-visual .venue-map strong {
  font-size: 1.7rem;
}

.ledger-visual .conversion-plot {
  padding: 14px 18px 9px;
}

.ledger-more {
  grid-column: 2 / -1;
  width: 100%;
  margin: -2px 0 0;
}

.ledger-more summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  cursor: pointer;
  border-top: 1px solid var(--hairline);
  border-left: 3px solid var(--brass);
  background: color-mix(in srgb, var(--brass) 11%, var(--paper));
  list-style: none;
}

.ledger-more summary::-webkit-details-marker {
  display: none;
}

.ledger-more summary > span {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.ledger-more summary small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.ledger-more summary strong {
  font-size: 0.82rem;
  font-weight: 700;
}

.ledger-more summary b {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.ledger-more summary b::before,
.ledger-more summary b::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -50%);
}

.ledger-more summary b::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ledger-more[open] summary b::after {
  opacity: 0;
}

.ledger-more[open] summary {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}

.ledger-more .bento-more-body {
  padding: 24px 0 30px;
}

.ledger-more .case-result {
  margin-bottom: 24px;
}

@media (hover: hover) {
  .ledger-more summary:hover {
    background: color-mix(in srgb, var(--brass) 24%, var(--paper));
  }

  .ledger-more summary:hover strong {
    text-decoration: none;
  }
}

@media (max-width: 1000px) {
  .ledger-case {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .ledger-visual,
  .ledger-more {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .project-ledger {
    border-top-color: var(--hairline);
  }

  .ledger-case {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 24px;
  }

  .ledger-index {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .ledger-index span {
    margin-top: 0;
  }

  .ledger-visual,
  .ledger-more {
    grid-column: 1;
  }

  .ledger-summary {
    font-size: 0.8rem;
  }

  .ledger-visual {
    min-height: 190px;
  }

  .ledger-visual .koel-board {
    grid-template-columns: repeat(3, 1fr);
    min-height: 154px;
  }

  .ledger-visual .koel-stage {
    min-height: 154px;
    padding: 10px 7px;
    border-top: 0;
  }

  .ledger-visual .koel-stage + .koel-stage {
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }

  .ledger-visual .koel-stage strong {
    font-size: 0.93rem;
  }

  .ledger-visual .koel-stage > span {
    font-size: 0.5rem;
  }

  .ledger-more summary > span {
    gap: 9px;
  }

  .ledger-more .bento-more-body {
    padding-bottom: 24px;
  }
}

/* Project feature refinements */

#projects .sec-head {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  align-items: center;
  margin-bottom: 24px;
}

#projects .sec-head h2 {
  max-width: 20ch;
  font-size: clamp(2.35rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

#projects .project-attribution {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  align-self: center;
  justify-self: stretch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.2;
  text-align: right;
}

.ledger-case {
  gap: 20px 30px;
  padding-top: 25px;
}

.ledger-kicker {
  margin-bottom: 5px;
}

.ledger-copy h3 {
  font-size: clamp(1.7rem, 2.15vw, 2.2rem);
}

.ledger-summary {
  margin-top: 11px;
  font-size: 0.86rem;
  line-height: 1.5;
}

.ledger-metrics {
  margin-top: 14px;
  padding-top: 11px;
}

.ledger-visual {
  min-height: 206px;
}

.ledger-diagram {
  display: block;
  width: 100%;
  height: 170px;
  overflow: hidden;
}

.ledger-diagram text {
  fill: var(--ink);
}

.diagram-line,
.diagram-arrow,
.diagram-city path,
.diagram-stack path,
.diagram-board path,
.diagram-network path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.diagram-city circle,
.diagram-network circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.diagram-stack rect,
.diagram-board rect,
.diagram-funnel path {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.diagram-accent-fill {
  fill: var(--brass) !important;
}

.diagram-label,
.diagram-small {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.diagram-label--end {
  text-anchor: end;
}

.diagram-label--middle {
  text-anchor: middle;
}

.diagram-small {
  fill: var(--muted) !important;
  font-size: 9px;
}

.diagram-result {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.03em;
  text-anchor: middle;
}

.diagram-number {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 650;
  letter-spacing: -0.04em;
}

.diagram-number--yellow {
  fill: var(--ink) !important;
  paint-order: stroke;
  stroke: var(--brass);
  stroke-width: 11px;
  stroke-linejoin: round;
}

.ledger-more summary > span {
  gap: 0;
}

.ledger-more summary strong {
  font-size: 0.82rem;
}

.project-readmore {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  padding: 20px 0 26px;
}

.readmore-outcome {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  margin: 0 0 20px;
  padding: 13px 15px;
  background: color-mix(in srgb, var(--brass) 18%, var(--paper));
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.45;
}

.readmore-outcome span,
.readmore-column small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.readmore-column {
  padding-right: 24px;
  border-right: 1px solid var(--hairline);
}

.readmore-column:last-child {
  padding-right: 0;
  border-right: 0;
}

.readmore-column p,
.readmore-column ul {
  margin: 9px 0 0;
  color: var(--secondary);
  font-size: 0.73rem;
  line-height: 1.55;
}

.readmore-column ul {
  padding: 0;
  list-style: none;
}

.readmore-column li {
  position: relative;
  padding-left: 14px;
}

.readmore-column li + li {
  margin-top: 6px;
}

.readmore-column li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--brass-deep);
  content: "→";
}

@media (max-width: 1000px) {
  #projects .sec-head h2 {
    font-size: clamp(2.35rem, 5vw, 3rem);
  }

  .ledger-diagram {
    height: 178px;
  }
}

@media (max-width: 860px) {
  #projects .sec-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #projects .project-attribution {
    grid-column: 1;
    grid-row: auto;
    margin: 0;
    text-align: left;
  }
}

@media (max-width: 640px) {
  #projects .sec-head {
    margin-bottom: 16px;
  }

  #projects .sec-head h2 {
    font-size: clamp(2.2rem, 10vw, 2.75rem);
  }

  #projects .project-attribution {
    font-size: 1rem;
  }

  .ledger-case {
    gap: 15px;
    padding-top: 20px;
  }

  .ledger-diagram {
    height: 160px;
  }

  .ledger-visual figcaption {
    gap: 10px;
    font-size: 0.46rem;
  }

  .ledger-more summary {
    min-height: 50px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .project-readmore {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 24px;
  }

  .readmore-outcome {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 0;
  }

  .readmore-column {
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .readmore-column:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* Neutral project expansion pill */

.ledger-more {
  padding: 11px 0 12px;
}

.ledger-more summary {
  width: fit-content;
  min-height: 38px;
  padding: 0 7px 0 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--paper);
}

.ledger-more summary b {
  width: 24px;
  height: 24px;
  margin-left: 12px;
  border-color: var(--hairline-strong);
}

.ledger-more[open] summary {
  border: 1px solid var(--hairline-strong);
  background: var(--paper);
}

@media (hover: hover) {
  .ledger-more summary:hover {
    background: var(--paper-deep);
  }
}

/* Project cards: one consistent case-study frame per engagement */

.project-ledger {
  display: grid;
  gap: 14px;
  border-top: 0;
}

.ledger-case {
  grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
  gap: 18px 28px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid rgba(9, 9, 9, 0.18);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 14px 42px rgba(9, 9, 9, 0.025);
}

.ledger-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ledger-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: start;
}

.ledger-kicker,
.ledger-head time {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.075em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ledger-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ledger-kicker span {
  color: var(--ink);
}

.ledger-head time {
  text-align: right;
}

.ledger-copy h3 {
  grid-column: 1 / -1;
  margin: 9px 0 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.65rem, 2vw, 2rem);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.ledger-summary {
  max-width: 58ch;
  margin: 13px 0 0;
  color: var(--secondary);
  font-size: 0.86rem;
  line-height: 1.55;
}

.ledger-summary strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--brass) 58% 91%, transparent 91%);
}

.ledger-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: auto;
  padding-top: 16px;
}

.ledger-metrics div {
  min-width: 0;
  padding: 0 16px;
  border-right: 1px solid var(--hairline);
}

.ledger-metrics div:first-child {
  padding-left: 0;
}

.ledger-metrics div:last-child {
  padding-right: 0;
  border-right: 0;
}

.ledger-metrics strong {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 590;
  letter-spacing: -0.04em;
}

.ledger-visual {
  min-height: 218px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: none;
}

.ledger-diagram {
  height: 182px;
}

.ledger-more {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
}

.ledger-more summary {
  min-height: 37px;
  margin-top: 0;
}

.project-readmore {
  padding-bottom: 2px;
}

@media (max-width: 1000px) {
  .ledger-case {
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    padding: 22px;
  }

  .ledger-visual,
  .ledger-more {
    grid-column: auto;
  }

  .ledger-more {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .ledger-case {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 21px;
  }

  .ledger-visual,
  .ledger-more {
    grid-column: 1;
  }

  .ledger-metrics {
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .ledger-head {
    grid-template-columns: 1fr;
  }

  .ledger-head time {
    text-align: left;
  }

  .ledger-copy h3 {
    margin-top: 6px;
  }

  .ledger-summary {
    font-size: 0.8rem;
  }

  .ledger-metrics div {
    padding: 0 8px;
  }
}

/* Project previews: final photographic stack */

.home-page #projects .ledger-summary {
  margin-top: clamp(13px, 1.3vw, 18px);
  line-height: 1.43;
}

.home-page #projects .ledger-brief {
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(17px, 1.7vw, 23px);
  border: 0;
}

.home-page #projects .ledger-brief > div,
.home-page #projects .ledger-brief > div + div {
  padding: 0;
  border: 0;
}

.home-page #projects .ledger-metrics {
  margin-top: clamp(20px, 2vw, 27px);
  padding-top: 0;
  border: 0;
}

.home-page #projects .ledger-metrics > div {
  padding-inline: clamp(8px, 1vw, 15px);
  border: 0;
}

.home-page #projects .project-folder {
  min-height: clamp(350px, 31vw, 440px);
}

.home-page #projects .project-folder .project-slides {
  overflow: hidden;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: color-mix(in srgb, var(--paper) 86%, #ece9df);
}

.home-page #projects .project-folder .project-slides::before,
.home-page #projects .project-folder .project-slides::after {
  display: none;
  content: none;
}

.home-page #projects .project-folder .project-slide {
  z-index: 3;
  visibility: visible;
  inset: 30px 48px 34px;
  border: 1px solid rgba(9, 9, 9, 0.28);
  border-radius: 14px;
  opacity: 0.48;
  background: #e8e5dc;
  box-shadow: 0 13px 28px rgba(9, 9, 9, 0.13);
}

.home-page #projects .project-folder .project-slide:nth-child(1) {
  transform: translate3d(-20px, 9px, 0) rotate(-2deg);
}

.home-page #projects .project-folder .project-slide:nth-child(2) {
  transform: translate3d(19px, 3px, 0) rotate(1.8deg);
}

.home-page #projects .project-folder .project-slide:nth-child(3) {
  transform: translate3d(9px, -8px, 0) rotate(0.8deg);
}

.home-page #projects .project-folder .project-slide:nth-child(4) {
  transform: translate3d(-8px, -5px, 0) rotate(-0.9deg);
}

.home-page #projects .project-folder .project-slide.is-active {
  z-index: 12;
  opacity: 1;
  transform: translate3d(0, 0, 30px) rotate(0);
}

.home-page #projects .project-folder .project-slide::after {
  background: linear-gradient(0deg, rgba(9, 9, 9, 0.16), transparent 31%);
}

.home-page #projects .project-folder .project-slide.is-active img {
  transform: scale(1.01);
}

.home-page #projects .project-folder .project-slide > p {
  z-index: 18;
  bottom: 14px;
  left: 14px;
  padding: 6px 9px;
  border: 0;
  background: rgba(250, 250, 247, 0.9);
  box-shadow: none;
}

.home-page #projects .project-folder .project-slide > p span {
  width: 7px;
  color: transparent;
  font-size: 0;
}

.home-page #projects .project-folder .project-slideshow-ui {
  min-height: 52px;
  height: 52px;
  padding: 0 8px 0 14px;
  border: 0;
  border-radius: 0 0 16px 16px;
  background: color-mix(in srgb, var(--paper) 91%, #ece9df);
  box-shadow: none;
}

.home-page #projects .project-folder .project-slideshow-title {
  padding: 0;
  background: transparent;
}

@media (hover: hover) {
  .home-page #projects .project-folder:hover .project-slide.is-active {
    transform: translate3d(0, -4px, 42px) rotate(0);
  }
}

@media (max-width: 760px) {
  .home-page #projects .project-folder {
    min-height: clamp(330px, 88vw, 430px);
  }

  .home-page #projects .project-folder .project-slide {
    inset: 25px 34px 30px;
  }
}

/* =========================================================
   FINAL HOME-PAGE SYSTEM PASS
   One signal yellow, one control family, tighter section rhythm.
   ========================================================= */

:root {
  --signal-yellow: #fff27a;
  --brass: var(--signal-yellow);
  --brass-soft: var(--signal-yellow);
}

mark,
.home-page strong::after,
.home-page .is-outcome,
.site-header .contact-pill b,
.contact-channel-pills b {
  --accent: var(--signal-yellow);
}

.home-page > .section {
  padding-block: clamp(58px, 6vw, 82px) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.home-page > .section::before,
.home-page > .section::after {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.home-page > .section + .section {
  margin-top: 0 !important;
}

/* Header controls */

.site-header {
  --nav-control-height: 54px;
}

.site-header .nav,
.site-header .contact-pill {
  min-height: var(--nav-control-height) !important;
  border: 1px solid rgba(9, 9, 9, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 10px 26px rgba(9, 9, 9, 0.07) !important;
}

.site-header .nav {
  gap: 2px !important;
  padding: 5px 9px !important;
}

.site-header .nav a {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
}

.site-header .contact-pill {
  height: var(--nav-control-height) !important;
  padding: 5px 6px 5px 18px !important;
  gap: 12px !important;
  color: var(--ink) !important;
}

.site-header .contact-pill b {
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  place-items: center !important;
  border: 1px solid var(--ink) !important;
  border-radius: 50% !important;
  background: var(--signal-yellow) !important;
  color: var(--ink) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
}

/* Work diagrams */

.home-page #work .work-map {
  display: grid !important;
  grid-template-rows: 38px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgba(9, 9, 9, 0.72) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 1px 1px, rgba(9, 9, 9, 0.09) 1px, transparent 1.1px) 0 0 / 13px 13px,
    #fbfbf8 !important;
  box-shadow: none !important;
}

.home-page #work .work-map figcaption {
  position: static !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(9, 9, 9, 0.15) !important;
  background: rgba(250, 250, 247, 0.92) !important;
  color: rgba(9, 9, 9, 0.66) !important;
  font-family: var(--mono) !important;
  font-size: 0.49rem !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

.home-page #work .work-map--ys {
  height: 450px !important;
  grid-template-rows: 38px 1fr auto !important;
}

.home-page #work .ys-workstreams {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 42px 24px 30px !important;
}

.home-page #work .ys-workstreams > div {
  position: relative !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 16px 12px !important;
  border: 1px solid rgba(9, 9, 9, 0.8) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  transform: none !important;
}

.home-page #work .ys-workstreams > div::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -31px !important;
  width: 1px !important;
  height: 30px !important;
  background: rgba(9, 9, 9, 0.56) !important;
}

.home-page #work .ys-workstreams small,
.home-page #work .rayden-pipeline small,
.home-page #work .retail-path small {
  color: rgba(9, 9, 9, 0.54) !important;
  font-family: var(--mono) !important;
  font-size: 0.48rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.home-page #work .ys-workstreams strong {
  font-size: 0.78rem !important;
  line-height: 1.15 !important;
}

.home-page #work .ys-workstreams span {
  color: var(--muted) !important;
  font-size: 0.58rem !important;
  line-height: 1.35 !important;
}

.home-page #work .ys-operating-view {
  display: grid !important;
  grid-template-columns: auto minmax(28px, 1fr) auto minmax(28px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 24px 32px !important;
}

.home-page #work .ys-operating-view span {
  color: rgba(9, 9, 9, 0.62) !important;
  font-family: var(--mono) !important;
  font-size: 0.48rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.home-page #work .ys-operating-view i {
  width: 100% !important;
  height: 1px !important;
  background: rgba(9, 9, 9, 0.72) !important;
}

.home-page #work .ys-operating-view strong {
  padding: 12px 15px !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  background: var(--signal-yellow) !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.home-page #work .work-map--rayden,
.home-page #work .work-map--retail {
  height: 172px !important;
}

.home-page #work .rayden-pipeline,
.home-page #work .retail-path {
  display: grid !important;
  align-items: stretch !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 18px 12px !important;
}

.home-page #work .rayden-pipeline {
  grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr !important;
}

.home-page #work .retail-path {
  grid-template-columns: 1fr 20px 1fr 20px 0.85fr !important;
}

.home-page #work .rayden-pipeline > div,
.home-page #work .retail-path > div {
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 9px 7px !important;
  border: 1px solid rgba(9, 9, 9, 0.76) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  text-align: left !important;
}

.home-page #work .rayden-pipeline > div.is-outcome,
.home-page #work .retail-path > div.is-outcome {
  background: var(--signal-yellow) !important;
}

.home-page #work .rayden-pipeline strong,
.home-page #work .retail-path strong {
  overflow-wrap: anywhere !important;
  font-size: 0.62rem !important;
  line-height: 1.16 !important;
}

.home-page #work .rayden-pipeline span,
.home-page #work .retail-path span {
  color: rgba(9, 9, 9, 0.62) !important;
  font-size: 0.47rem !important;
  line-height: 1.25 !important;
}

.home-page #work .rayden-pipeline > i,
.home-page #work .retail-path > i {
  position: relative !important;
  align-self: center !important;
  width: 100% !important;
  height: 1px !important;
  background: rgba(9, 9, 9, 0.72) !important;
}

.home-page #work .rayden-pipeline > i::after,
.home-page #work .retail-path > i::after {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  right: 0 !important;
  width: 6px !important;
  height: 6px !important;
  border-top: 1px solid var(--ink) !important;
  border-right: 1px solid var(--ink) !important;
  transform: rotate(45deg) !important;
}

/* Writing footer and compact feature */

.home-page #writing .sec-head h2 {
  max-width: 18ch !important;
}

.home-page #writing .writing-section-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: 20px !important;
}

.home-page #writing .writing-explore-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 0.76rem !important;
  font-weight: 650 !important;
}

.home-page #writing .writing-medium-link {
  color: var(--muted) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

/* Contact */

.home-page #contact .contact-home-panel--simple {
  grid-template-columns: 1fr !important;
  gap: 26px !important;
  min-height: 0 !important;
  padding: clamp(28px, 3.5vw, 48px) !important;
}

.home-page #contact .contact-home-intro {
  max-width: 900px !important;
}

.home-page #contact .contact-channel-pills {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.home-page #contact .contact-channel-pills a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 6px 7px 6px 17px !important;
  border: 1px solid rgba(9, 9, 9, 0.82) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 0.75rem !important;
  font-weight: 650 !important;
}

.home-page #contact .contact-channel-pills a span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.home-page #contact .contact-channel-pills b {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  place-items: center !important;
  border: 1px solid var(--ink) !important;
  border-radius: 50% !important;
  background: var(--signal-yellow) !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
}

@media (max-width: 1050px) {
  .home-page #work .work-map--ys {
    height: 410px !important;
  }

  .home-page #work .ys-workstreams {
    gap: 7px !important;
    padding-inline: 16px !important;
  }

  .home-page #work .ys-workstreams > div {
    padding-inline: 9px !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    --nav-control-height: 48px;
  }

  .site-header .nav {
    padding-inline: 5px !important;
  }

  .site-header .nav a {
    min-height: 36px !important;
    padding-inline: 10px !important;
  }

  .site-header .contact-pill {
    padding-left: 13px !important;
  }

  .site-header .contact-pill b {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .home-page #work .work-map--ys {
    height: auto !important;
  }

  .home-page #work .ys-workstreams {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  .home-page #work .ys-workstreams > div::after {
    display: none !important;
  }

  .home-page #work .ys-operating-view {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    padding: 0 18px 18px !important;
    text-align: center !important;
  }

  .home-page #work .ys-operating-view i {
    display: none !important;
  }

  .home-page #work .work-map--rayden,
  .home-page #work .work-map--retail {
    height: auto !important;
  }

  .home-page #work .rayden-pipeline,
  .home-page #work .retail-path {
    grid-template-columns: 1fr !important;
  }

  .home-page #work .rayden-pipeline > i,
  .home-page #work .retail-path > i {
    width: 1px !important;
    height: 14px !important;
    justify-self: center !important;
  }

  .home-page #work .rayden-pipeline > i::after,
  .home-page #work .retail-path > i::after {
    top: auto !important;
    right: -3px !important;
    bottom: 0 !important;
    transform: rotate(135deg) !important;
  }

  .home-page #writing .writing-section-foot {
    align-items: flex-start !important;
  }

  .home-page #contact .contact-channel-pills {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   FINAL HOME RHYTHM
   Compact editorial shelf, open contact invitation, and no section rules.
   ========================================================================== */

.home-page > .section {
  border-top: 0 !important;
}

.home-page #writing {
  padding-top: clamp(68px, 7vw, 94px);
  padding-bottom: clamp(68px, 7vw, 94px);
}

.home-page #writing .sec-head {
  margin-bottom: 26px;
}

.home-page #writing .writing-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.home-page #writing .writing-support-stack {
  display: contents;
}

.home-page #writing .writing-card,
.home-page #writing .writing-card--lead,
.home-page #writing .writing-card--support {
  display: grid;
  height: 450px;
  min-height: 0;
  padding: 20px;
  grid-template-rows: auto auto minmax(42px, auto) auto minmax(0, 1fr) auto;
  align-content: stretch;
}

.home-page #writing .writing-card--lead .feature-body {
  display: contents;
}

.home-page #writing .writing-card-meta {
  margin-bottom: 10px;
}

.home-page #writing .writing-card h3,
.home-page #writing .writing-card--lead h3,
.home-page #writing .writing-card--support h3 {
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  line-height: 1.02;
}

.home-page #writing .writing-card .lead,
.home-page #writing .writing-card--lead .lead,
.home-page #writing .writing-card--support .lead {
  margin-top: 9px;
  color: #555550;
  font-size: 0.78rem;
  line-height: 1.42;
}

.home-page #writing .writing-direct-link {
  margin-top: 8px;
  font-size: 0.65rem;
}

.home-page #writing .writing-artwork,
.home-page #writing .writing-essay-image {
  height: auto;
  min-height: 0;
  margin: 14px 0 0;
  border-radius: 9px;
}

.home-page #writing .writing-artwork figcaption,
.home-page #writing .writing-essay-image figcaption {
  min-height: 29px;
  height: 29px;
  padding-inline: 10px;
  flex: 0 0 29px;
}

.home-page #writing .writing-artwork img,
.home-page #writing .writing-essay-image img {
  width: 100%;
  height: calc(100% - 29px);
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

.home-page #writing .writing-artwork blockquote {
  display: none;
}

.home-page #writing .writing-topics {
  align-self: end;
  margin-top: 10px;
}

.home-page #writing .writing-topics span {
  padding: 4px 6px;
  font-size: 0.41rem;
}

.home-page #contact {
  padding-top: clamp(68px, 7vw, 94px);
  padding-bottom: clamp(76px, 8vw, 108px);
}

.home-page #contact .contact-home-head {
  margin-bottom: 26px;
}

.home-page #contact .contact-home-panel--simple {
  display: grid;
  overflow: hidden;
  padding: clamp(30px, 4.2vw, 58px);
  border: 1px solid rgba(9, 9, 9, 0.19);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
}

.home-page #contact .contact-home-intro {
  padding: 0;
  border: 0;
}

.home-page #contact .contact-home-kicker {
  max-width: 790px;
  font-size: clamp(2rem, 3.5vw, 3.75rem);
  line-height: 1;
}

.home-page #contact .contact-home-intro > p:nth-child(2) {
  max-width: 610px;
  margin-top: 16px;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.52;
}

.home-page #contact .contact-email {
  width: fit-content;
  min-height: 50px;
  margin-top: 26px;
  padding: 0 7px 0 18px;
  border: 1px solid #090909;
  background: #fff;
  color: #090909;
  font-size: 0.82rem;
}

.home-page #contact .contact-email b {
  width: 35px;
  height: 35px;
  border: 1px solid #090909;
}

.home-page #contact .contact-home-foot {
  display: grid;
  min-width: 175px;
  min-height: 0;
  padding: 0 0 4px;
  border: 0;
  background: transparent;
  grid-column: 2;
  gap: 12px;
  align-items: start;
  justify-items: end;
}

.home-page #contact .contact-home-foot > span {
  color: #777771;
  font: 700 0.5rem/1.3 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.home-page #contact .contact-home-foot nav {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.home-page #contact .contact-home-foot nav a {
  font-size: 0.78rem;
}

.site-header .contact-pill {
  min-height: 0;
  padding: 12px 20px 13px;
  border: 1px solid rgba(9, 9, 9, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(9, 9, 9, 0.07);
  gap: 8px;
  color: #090909;
  font-size: 0.84rem;
}

.site-header .contact-pill b {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.8rem;
}

.site-header .contact-pill:hover,
.site-header .contact-pill:focus-visible,
.site-header .contact-pill[aria-current="page"] {
  border-color: rgba(9, 9, 9, 0.3);
  background: #fff;
  color: #090909;
  box-shadow: 0 12px 28px rgba(9, 9, 9, 0.09);
}

@media (max-width: 960px) {
  .home-page #writing .writing-feature-grid {
    grid-template-columns: 1fr;
  }

  .home-page #writing .writing-support-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page #writing .writing-card,
  .home-page #writing .writing-card--lead,
  .home-page #writing .writing-card--support {
    height: 450px;
  }

  .home-page #contact .contact-home-panel--simple {
    grid-template-columns: 1fr;
  }

  .home-page #contact .contact-home-foot,
  .home-page #contact .contact-home-foot nav {
    justify-items: start;
  }
}

@media (max-width: 680px) {
  .home-page #writing .writing-support-stack {
    grid-template-columns: 1fr;
  }

  .home-page #writing .writing-card,
  .home-page #writing .writing-card--lead,
  .home-page #writing .writing-card--support {
    height: 430px;
  }

  .home-page #contact .contact-home-panel--simple {
    padding: 24px;
  }

  .home-page #contact .contact-home-foot {
    grid-column: 1;
  }

  .site-header .contact-pill {
    padding: 10px 15px 11px;
  }
}

/* Studio systems lab */

#studio {
  scroll-margin-top: 104px;
}

#studio .sec-head {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  align-items: center;
  margin-bottom: 24px;
}

#studio .sec-head h2 {
  max-width: 20ch;
  font-size: clamp(2.35rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

#studio .studio-attribution {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  align-self: center;
  justify-self: stretch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.2;
  text-align: right;
}

.studio-feature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.home-page .studio-card {
  min-width: 0;
  min-height: 0;
  padding: 24px;
  border: 1px solid rgba(9, 9, 9, 0.18);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 14px 42px rgba(9, 9, 9, 0.025);
}

.home-page .studio-card::before {
  display: none;
}

.studio-card--manager,
.studio-card--braindrop {
  grid-column: span 7;
}

.studio-card--second-brain,
.studio-card--prooflog {
  grid-column: span 5;
}

.studio-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: start;
}

.studio-card-head .file-meta,
.studio-status {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 650;
  letter-spacing: 0.075em;
  line-height: 1.4;
  text-transform: uppercase;
}

.studio-card-head .file-meta {
  display: flex;
  gap: 9px;
}

.studio-card-head .file-meta span {
  color: var(--ink);
}

.studio-status {
  text-align: right;
}

.home-page .studio-card h3 {
  grid-column: 1 / -1;
  margin: 9px 0 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.65rem, 2vw, 2rem);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.home-page .studio-card .lead,
.home-page .studio-card .preview-hook {
  max-width: 67ch;
  min-height: 0;
  margin: 13px 0 0;
  color: var(--secondary);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.55;
}

.home-page .studio-card .preview-hook::after {
  display: none;
}

.studio-visual {
  position: relative;
  display: flex;
  overflow: hidden;
  height: 298px;
  margin: 10px 0 0;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background-color: #fafaf7;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.09) 0 0.45px, transparent 0.62px);
  background-size: 7px 7px;
}

.studio-card--prooflog .studio-visual,
.studio-card--braindrop .studio-visual {
  height: 264px;
}

.studio-visual figcaption {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.47rem;
  font-weight: 650;
  letter-spacing: 0.075em;
}

.studio-visual svg {
  display: block;
  width: 100%;
  min-height: 0;
  flex: 1;
}

.studio-visual svg rect,
.studio-visual svg circle,
.studio-visual svg path {
  vector-effect: non-scaling-stroke;
}

.studio-visual svg text {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.studio-manager-cycles rect,
.studio-manager-output rect,
.studio-manager-surface rect,
.prooflog-input rect,
.prooflog-evidence rect,
.prooflog-report rect,
.braindrop-inputs rect,
.braindrop-core rect,
.braindrop-vault path {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.4;
}

.studio-manager-cycles text,
.studio-manager-output text,
.studio-manager-surface > text,
.prooflog-report text,
.braindrop-inputs text,
.braindrop-core text,
.braindrop-vault text {
  text-anchor: middle;
}

.studio-manager-lines path,
.studio-manager-surface path,
.prooflog-input path,
.prooflog-arrow,
.prooflog-report path,
.braindrop-lines path,
.braindrop-core > path,
.braindrop-brain path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.45;
}

.studio-manager-surface rect:not(.diagram-accent-fill) {
  fill: rgba(255, 255, 255, 0.72);
  stroke: rgba(9, 9, 9, 0.42);
}

.prooflog-evidence circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.3;
}

.studio-visual--brain img {
  display: block;
  width: 100%;
  min-height: 0;
  flex: 1;
  object-fit: cover;
  object-position: 50% 52%;
  filter: contrast(1.08);
}

.studio-image-note {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 8px;
  border: 1px solid rgba(9, 9, 9, 0.34);
  background: rgba(255, 242, 122, 0.94);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.055em;
}

.studio-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.studio-signals div {
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid var(--hairline);
}

.studio-signals div:first-child {
  padding-left: 0;
}

.studio-signals div:last-child {
  padding-right: 0;
  border-right: 0;
}

.studio-signals strong {
  display: block;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 590;
  line-height: 1;
  letter-spacing: -0.04em;
}

.studio-signals span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.055em;
  line-height: 1.35;
  text-transform: uppercase;
}

.home-page .studio-card .preview-more {
  width: 100%;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.home-page .studio-card .preview-more summary {
  width: fit-content;
  min-height: 37px;
  gap: 12px;
  padding: 0 7px 0 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
}

.home-page .studio-card .preview-more summary > span {
  display: block;
}

.home-page .studio-card .preview-more summary b {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.home-page .studio-card .preview-more-body {
  padding-bottom: 4px;
}

@media (max-width: 1000px) {
  .studio-card--manager,
  .studio-card--braindrop,
  .studio-card--second-brain,
  .studio-card--prooflog {
    grid-column: span 6;
  }

  .studio-visual,
  .studio-card--prooflog .studio-visual,
  .studio-card--braindrop .studio-visual {
    height: 270px;
  }
}

@media (max-width: 760px) {
  #studio .sec-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #studio .studio-attribution {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .studio-feature-grid {
    grid-template-columns: 1fr;
  }

  .studio-card--manager,
  .studio-card--braindrop,
  .studio-card--second-brain,
  .studio-card--prooflog {
    grid-column: 1;
  }

  .home-page .studio-card .lead,
  .home-page .studio-card .preview-hook {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .home-page .studio-card {
    padding: 21px;
  }

  .studio-card-head {
    grid-template-columns: 1fr;
  }

  .studio-status {
    text-align: left;
  }

  .home-page .studio-card h3 {
    margin-top: 6px;
  }

  .studio-visual,
  .studio-card--prooflog .studio-visual,
  .studio-card--braindrop .studio-visual {
    height: 244px;
  }

  .studio-signals div {
    padding: 0 8px;
  }
}

/* Work bento: three equal case studies with experience-specific artifacts */

#work .sec-head {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  align-items: center;
  margin-bottom: 24px;
}

#work {
  scroll-margin-top: 104px;
}

#work .sec-head h2 {
  max-width: 20ch;
  font-size: clamp(2.35rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

#work .work-attribution {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  align-self: center;
  justify-self: stretch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.2;
  text-align: right;
}

.work-bento {
  height: 910px;
  grid-template-columns: minmax(0, 1.18fr) minmax(380px, 0.82fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
  align-items: stretch;
}

.work-bento-card,
.work-bento-card--yelloskye {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 24px;
  border-color: rgba(9, 9, 9, 0.18);
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(9, 9, 9, 0.025);
}

.work-bento-card--yelloskye {
  grid-row: 1 / 3;
  min-height: 0;
  padding: 24px;
}

.work-card-head {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  align-items: start;
}

.work-bento-card--yelloskye .work-card-head {
  min-height: 78px;
}

.work-card-head p,
.work-card-head time {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.075em;
  line-height: 1.4;
  text-transform: uppercase;
}

.work-card-head p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.work-card-head p span {
  color: var(--ink);
}

.work-card-head time {
  display: block;
  margin: 0;
  text-align: right;
}

.work-bento-card .work-card-head h3 {
  grid-column: 1 / -1;
  margin: 7px 0 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.24rem, 1.45vw, 1.55rem);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.work-bento-card--yelloskye .work-card-head h3 {
  margin-top: 12px;
  font-size: clamp(1.65rem, 2vw, 2rem);
}

.work-executive {
  min-height: 64px;
  margin: 11px 0 7px;
  color: var(--secondary);
  font-size: 0.72rem;
  line-height: 1.52;
}

.work-executive strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--brass) 58% 91%, transparent 91%);
}

.work-bento-card--yelloskye .work-executive {
  max-width: 58ch;
  min-height: 64px;
  margin-top: 13px;
  font-size: 0.9rem;
  line-height: 1.58;
}

.work-artifact {
  display: flex;
  overflow: hidden;
  height: 150px;
  margin: 0;
  flex-shrink: 0;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background-color: #fafaf7;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.09) 0 0.45px, transparent 0.62px);
  background-size: 7px 7px;
}

.work-bento-card--yelloskye .work-artifact {
  height: 560px;
}

.work-bento-card--rayden .artifact-outcome,
.work-bento-card--hide .artifact-outcome {
  display: none;
}

.work-bento-card--rayden .work-artifact figcaption,
.work-bento-card--hide .work-artifact figcaption {
  min-height: 30px;
  padding: 0 9px;
}

.work-diagram {
  display: block;
  width: 100%;
  min-height: 0;
  flex: 1;
}

.work-diagram--ops {
  height: 524px;
}

.work-inputs rect,
.work-outcomes rect,
.work-control rect,
.work-sale-receipt rect {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.work-inputs text,
.work-control-title {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.work-inputs text {
  text-anchor: start;
}

.work-connectors path,
.work-control path,
.work-buyer-signals + .diagram-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.work-control-title {
  font-size: 13px;
  text-anchor: middle;
}

.work-control circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.2;
}

.work-outcomes text {
  text-anchor: middle;
}

.work-outcome-title {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.work-meeting-result circle,
.work-buyer-signals circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.work-meeting-result .diagram-result {
  font-size: 31px;
}

.work-buyer-signals text {
  fill: var(--ink);
}

.work-sale-receipt .diagram-result {
  font-size: 25px;
}

.work-artifact figcaption {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.47rem;
  font-weight: 600;
  letter-spacing: 0.075em;
}

.artifact-outcome {
  display: flex;
  min-height: 39px;
  align-items: center;
  gap: 9px;
  margin: auto 0 0;
  padding: 0 12px;
  border-top: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.82);
  color: var(--secondary);
  font-size: 0.62rem;
  font-weight: 550;
}

.artifact-outcome span {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
}

.ops-surface {
  display: grid;
  min-height: 0;
  padding: 20px;
  flex: 1;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.ops-row {
  display: grid;
  min-height: 0;
  grid-template-columns: 105px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  border: 1px solid rgba(9, 9, 9, 0.11);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.88);
}

.ops-row b {
  font-size: 0.67rem;
}

.ops-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-row i {
  min-width: 54px;
  padding: 5px 7px;
  background: var(--brass);
  font-family: var(--mono);
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

.outbound-board {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 0.9fr 1.2fr 0.72fr;
  align-items: stretch;
  padding: 6px;
}

.outbound-board > div {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 6px;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(9, 9, 9, 0.14);
  background: rgba(255, 255, 255, 0.88);
}

.outbound-board > div + div {
  border-left: 0;
}

.outbound-board small,
.retail-board small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.43rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.outbound-signal b {
  margin-top: 8px;
  font-size: 0.6rem;
}

.outbound-signal span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.45rem;
}

.outbound-tests {
  gap: 7px;
}

.outbound-tests p {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 5px 7px;
  margin: 0;
}

.outbound-tests p:first-of-type {
  margin-top: 6px;
}

.outbound-tests i {
  grid-row: 1 / 3;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.45rem;
  font-style: normal;
}

.outbound-tests p:last-child i {
  background: var(--brass);
}

.outbound-tests span,
.outbound-tests b {
  font-size: 0.5rem;
  line-height: 1.15;
}

.outbound-tests b {
  color: var(--muted);
  font-weight: 500;
}

.outbound-result {
  align-items: center;
  background: var(--brass) !important;
  text-align: center;
}

.outbound-result strong {
  margin-top: 7px;
  font-size: 1.45rem;
  letter-spacing: -0.06em;
  line-height: 1;
}

.outbound-result span {
  margin-top: 4px;
  font-size: 0.53rem;
}

.retail-board {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 1.17fr 0.83fr;
  gap: 6px;
  padding: 6px;
}

.retail-signals,
.retail-receipt {
  padding: 6px;
  border: 1px solid rgba(9, 9, 9, 0.14);
  background: rgba(255, 255, 255, 0.88);
}

.retail-signals p {
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr);
  margin: 3px 0 0;
  padding-top: 3px;
  border-top: 1px solid var(--hairline);
  font-size: 0.44rem;
}

.retail-signals p span {
  color: var(--muted);
}

.retail-signals p b {
  font-weight: 600;
}

.retail-receipt {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.retail-receipt strong {
  margin-top: 4px;
  font-size: 1rem;
  letter-spacing: -0.05em;
  line-height: 1;
}

.retail-receipt span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.5rem;
}

.retail-receipt i {
  margin-top: 5px;
  padding: 3px 5px;
  background: var(--brass);
  font-family: var(--mono);
  font-size: 0.41rem;
  font-style: normal;
  font-weight: 700;
}

.work-bento-card .bento-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 11px;
  padding-top: 11px;
  flex-shrink: 0;
}

.work-bento-card .bento-stats div {
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid var(--hairline);
}

.work-bento-card .bento-stats div:first-child {
  padding-left: 0;
}

.work-bento-card .bento-stats div:last-child {
  padding-right: 0;
  border-right: 0;
}

.work-bento-card .bento-stats strong {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 590;
  letter-spacing: -0.04em;
}

.work-bento-card .bento-stats span {
  overflow: visible;
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.05em;
  line-height: 1.35;
  white-space: normal;
}

.work-bento-card--yelloskye .bento-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-bento-card--yelloskye .bento-stats strong {
  font-size: 1.55rem;
}

.work-bento-card--yelloskye .bento-stats span {
  font-size: 0.5rem;
}

.work-more {
  margin-top: auto;
  padding-top: 14px;
}

.work-more summary {
  display: inline-flex;
  min-height: 37px;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 0 7px 0 15px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  list-style: none;
}

.work-more summary::-webkit-details-marker {
  display: none;
}

.work-more summary span {
  font-size: 0.7rem;
  font-weight: 700;
}

.work-more summary b {
  position: relative;
  width: 23px;
  height: 23px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
}

.work-more summary b::before,
.work-more summary b::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -50%);
}

.work-more summary b::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.work-more[open] summary b::after {
  opacity: 0;
}

.work-more-body {
  position: absolute;
  z-index: 4;
  inset: 76px 24px 70px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 50px rgba(9, 9, 9, 0.12);
}

.work-bento-card--yelloskye .work-more-body {
  inset: 90px 24px 70px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  padding: 24px;
}

.work-bento-card--yelloskye .work-more-result {
  grid-column: 1 / -1;
}

.work-more-result {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  margin: 0;
  padding: 11px 12px;
  border-left: 3px solid var(--brass);
  background: var(--paper-deep);
}

.work-more-body small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.work-more-result strong {
  font-size: 0.66rem;
  line-height: 1.45;
}

.work-more-body ul {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.work-more-body li,
.work-more-body > div > p {
  margin: 0;
  color: var(--secondary);
  font-size: 0.63rem;
  line-height: 1.48;
}

.work-more-body li {
  position: relative;
  padding-left: 11px;
}

.work-more-body li + li {
  margin-top: 5px;
}

.work-more-body li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "·";
}

.work-more-body > div > p {
  margin-top: 7px;
}

@media (hover: hover) {
  .work-bento-card {
    transition: border-color 160ms ease, transform 160ms ease;
  }

  .work-bento-card:hover {
    border-color: rgba(9, 9, 9, 0.38);
    transform: translateY(-2px);
  }

  .work-more summary:hover {
    background: var(--paper-deep);
  }
}

@media (max-width: 900px) {
  #work .sec-head {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }

  #work .work-attribution {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .work-bento {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .work-bento-card,
  .work-bento-card--yelloskye {
    grid-row: auto;
    height: auto;
    min-height: 0;
    padding: 24px;
  }

  .work-executive,
  .work-bento-card--yelloskye .work-executive {
    min-height: auto;
    margin-bottom: 20px;
  }

  .work-artifact,
  .work-bento-card--yelloskye .work-artifact {
    height: auto;
    min-height: 250px;
  }

  .work-more-body,
  .work-bento-card--yelloskye .work-more-body {
    position: static;
    grid-template-columns: 1fr;
    margin-top: 15px;
    padding: 18px;
    box-shadow: none;
  }

  .work-bento-card--yelloskye .work-more-result {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .work-bento-card,
  .work-bento-card--yelloskye {
    padding: 21px;
  }

  .ops-surface {
    padding: 18px 12px;
    gap: 7px;
  }

  .ops-row {
    min-height: 42px;
    grid-template-columns: 66px minmax(0, 1fr) 45px;
    gap: 6px;
    padding: 0 8px;
  }

  .ops-row b {
    font-size: 0.56rem;
  }

  .ops-row span {
    font-size: 0.5rem;
  }

  .ops-row i {
    min-width: 45px;
    padding: 4px;
    font-size: 0.42rem;
  }

  .work-artifact {
    height: 252px;
  }

  .outbound-board {
    grid-template-columns: 1fr 1fr;
  }

  .outbound-result {
    grid-column: 1 / -1;
    min-height: 54px;
  }

  .retail-board {
    grid-template-columns: 1fr;
  }

  .retail-receipt {
    min-height: 70px;
  }
}

/* ==========================================================================
   WRITING FEATURE
   Editorial cards use the same spacing and border language as Work and Projects.
   ========================================================================== */

#writing .sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  column-gap: clamp(36px, 7vw, 116px);
  align-items: center;
  margin-bottom: 24px;
}

#writing .sec-head .catalog-line {
  grid-column: 1;
}

#writing .sec-head h2 {
  grid-column: 1;
  max-width: 720px;
  margin-top: 13px;
  font-size: clamp(2.45rem, 4vw, 4.35rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

#writing .writing-attribution {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
  margin: 0;
  color: #777771;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.3;
}

.writing-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(390px, 0.88fr);
  gap: 14px;
  align-items: stretch;
}

.writing-support-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.home-page .writing-card,
.home-page .writing-card--lead {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.19);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
}

.home-page .writing-card::before {
  display: none;
}

.home-page .writing-card--lead {
  display: flex;
  padding: 28px;
  flex-direction: column;
}

.home-page .writing-card--lead .feature-body {
  padding: 0;
}

.home-page .writing-card--support {
  display: flex;
  min-height: 0;
  padding: 24px;
  flex-direction: column;
}

.writing-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 13px;
}

.writing-card-meta .file-meta,
.writing-card-meta span {
  margin: 0;
  color: #6a6a65;
  font: 700 0.52rem/1.35 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.writing-card-meta span {
  text-align: right;
}

.home-page .writing-card h3,
.home-page .writing-card--support h3 {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: clamp(1.55rem, 2.15vw, 2.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.home-page .writing-card--lead h3 {
  font-size: clamp(2.1rem, 3.25vw, 3.45rem);
}

.home-page .writing-card .lead,
.home-page .writing-card--support .lead {
  max-width: 720px;
  margin: 12px 0 0;
  color: #4e4e49;
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.5;
}

.home-page .writing-card--lead .lead {
  max-width: 600px;
  font-size: 1rem;
}

.writing-direct-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}

.writing-direct-link span {
  transition: transform 160ms ease;
}

.writing-direct-link:hover span {
  transform: translate(2px, -2px);
}

.writing-artwork {
  position: relative;
  display: flex;
  min-height: 460px;
  margin: 22px 0 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.18);
  border-radius: 10px;
  background: #fff;
  flex: 1 1 auto;
  flex-direction: column;
}

.writing-artwork figcaption {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.14);
  border-radius: 9px 9px 0 0;
  background: #fffdf3;
  color: #4f4f49;
  font: 700 0.5rem/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.writing-artwork figcaption b {
  font: inherit;
}

.writing-artwork img {
  display: block;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  flex: 1 1 auto;
}

.writing-essay-image {
  margin: 16px 0 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.17);
  border-radius: 10px;
  background: #fff;
}

.writing-essay-image figcaption {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.13);
  border-radius: 9px 9px 0 0;
  background: #fffdf3;
  color: #64645e;
  font: 700 0.46rem/1.25 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.writing-essay-image figcaption b {
  color: #31312e;
  font: inherit;
  text-align: right;
}

.writing-essay-image img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
}

.writing-artwork blockquote {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  width: min(62%, 430px);
  margin: 0;
  padding: 14px 16px 14px 18px;
  border-left: 4px solid #fff27a;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font: 600 clamp(0.9rem, 1.35vw, 1.15rem)/1.35 Inter, ui-sans-serif, sans-serif;
  box-shadow: 0 9px 26px rgba(9, 9, 9, 0.1);
}

.writing-argument {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.17);
  border-radius: 10px;
  background-color: #fbfbf8;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.055) 0 0.55px, transparent 0.68px);
  background-size: 7px 7px;
}

.writing-argument-label {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.13);
  color: #64645e;
  font: 700 0.46rem/1.25 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.writing-argument-label b {
  color: #31312e;
  font: inherit;
  text-align: right;
}

.writing-argument svg {
  display: block;
  width: 100%;
  height: 146px;
}

.essay-signal circle,
.essay-node {
  fill: #fff;
  stroke: #151515;
  stroke-width: 2;
}

.essay-signal circle:first-child {
  fill: #fff27a;
}

.essay-signal path,
.essay-line,
.essay-divider {
  fill: none;
  stroke: #151515;
  stroke-width: 2;
}

.essay-divider {
  opacity: 0.28;
  stroke-width: 1.25;
}

.essay-choice {
  fill: #fff27a;
  stroke: #151515;
  stroke-width: 2;
}

.essay-test {
  fill: #fff;
  stroke: #151515;
  stroke-width: 2;
}

.essay-focus {
  fill: #fff;
  stroke: #151515;
  stroke-width: 2;
}

.essay-arrow {
  fill: none;
  stroke: #151515;
  stroke-width: 2;
}

.essay-small {
  fill: #151515;
  font: 700 10px "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.055em;
}

.essay-large {
  fill: #151515;
  font: 700 15px Inter, ui-sans-serif, sans-serif;
  letter-spacing: -0.02em;
}

.writing-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.writing-topics span {
  padding: 5px 8px;
  border: 1px solid rgba(9, 9, 9, 0.14);
  border-radius: 999px;
  background: #fafaf7;
  color: #5b5b56;
  font: 700 0.46rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

#writing .preview-more {
  width: 100%;
  margin-top: 16px;
  padding-top: 0;
  border-top: 1px solid rgba(9, 9, 9, 0.16);
}

#writing .preview-more summary {
  min-height: 52px;
}

#writing .preview-more summary > span {
  display: block;
}

#writing .preview-more summary strong {
  font-size: 0.72rem;
}

#writing .preview-more summary b {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  font-size: 0.9rem;
}

#writing .preview-more-body {
  padding: 3px 0 18px;
}

.writing-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.15);
  border-radius: 10px;
  background: rgba(9, 9, 9, 0.15);
}

.writing-more-grid section {
  min-height: 118px;
  padding: 16px;
  background: #fff;
}

.writing-more-grid small {
  color: #666660;
  font: 700 0.48rem/1.3 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.writing-more-grid p {
  margin: 9px 0 0;
  color: #494944;
  font-size: 0.72rem;
  line-height: 1.52;
}

.writing-more-link {
  grid-column: 1 / -1;
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 15px;
  background: #fffef0;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
}

@media (hover: hover) {
  .home-page .writing-card {
    transition: border-color 160ms ease, transform 160ms ease;
  }

  .home-page .writing-card:hover {
    border-color: rgba(9, 9, 9, 0.38);
    transform: translateY(-2px);
  }
}

@media (max-width: 960px) {
  #writing .sec-head {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  #writing .writing-attribution {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .writing-feature-grid {
    grid-template-columns: 1fr;
  }

  .writing-support-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
}

@media (max-width: 680px) {
  #writing .sec-head h2 {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
  }

  .writing-support-stack {
    grid-template-columns: 1fr;
  }

  .home-page .writing-card--lead,
  .home-page .writing-card--support {
    padding: 21px;
  }

  .writing-artwork {
    min-height: 350px;
  }

  .writing-artwork blockquote {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }

  .writing-more-grid {
    grid-template-columns: 1fr;
  }

  .writing-more-link {
    grid-column: 1;
  }
}

/* ==========================================================================
   HOMEPAGE CONTACT
   ========================================================================== */

#contact .contact-home-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  column-gap: clamp(36px, 7vw, 116px);
  align-items: center;
  margin-bottom: 24px;
}

#contact .contact-home-head .catalog-line,
#contact .contact-home-head h2 {
  grid-column: 1;
}

#contact .contact-home-head h2 {
  max-width: 720px;
  margin-top: 13px;
  font-size: clamp(2.45rem, 4vw, 4.35rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

#contact .contact-attribution {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
  margin: 0;
  color: #777771;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
}

.contact-home-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, 0.96fr);
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
}

.contact-home-intro {
  padding: clamp(34px, 5vw, 68px);
  border-right: 1px solid rgba(9, 9, 9, 0.16);
}

.contact-home-kicker {
  max-width: 660px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 3.3rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.contact-home-intro > p:nth-child(2) {
  max-width: 640px;
  margin: 24px 0 0;
  color: #555550;
  font-size: clamp(0.96rem, 1.25vw, 1.12rem);
  line-height: 1.62;
}

.contact-email {
  display: flex;
  width: 100%;
  max-width: 640px;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 38px;
  padding: 0 10px 0 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: clamp(0.86rem, 1.25vw, 1.05rem);
  font-weight: 600;
  text-decoration: none;
}

.contact-email b {
  display: grid;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff27a;
  color: var(--ink);
  font-size: 1.15rem;
  place-items: center;
}

.contact-fit {
  padding: clamp(34px, 4vw, 56px);
  background-color: #fbfbf8;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.055) 0 0.5px, transparent 0.65px);
  background-size: 7px 7px;
}

.contact-fit > p {
  margin: 0 0 22px;
}

.contact-fit ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-fit li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px 14px;
  padding: 20px 0;
  border-top: 1px solid rgba(9, 9, 9, 0.16);
}

.contact-fit li:last-child {
  border-bottom: 1px solid rgba(9, 9, 9, 0.16);
}

.contact-fit li > span {
  grid-row: 1 / 3;
  color: #777771;
  font: 700 0.52rem/1.4 var(--mono);
}

.contact-fit li strong {
  font-size: 0.95rem;
}

.contact-fit li small {
  color: #5f5f59;
  font-size: 0.74rem;
  line-height: 1.5;
}

.contact-home-foot {
  grid-column: 1 / -1;
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(28px, 4vw, 54px);
  border-top: 1px solid rgba(9, 9, 9, 0.16);
  background: #fffef1;
}

.contact-home-foot > div {
  display: grid;
  gap: 5px;
}

.contact-home-foot span {
  color: #777771;
  font: 700 0.48rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-home-foot strong {
  font-size: 0.76rem;
}

.contact-home-foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
}

.contact-home-foot nav a {
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}

/* ==========================================================================
   LONG-FORM STORY PAGES
   ========================================================================== */

.story-page .page {
  max-width: var(--page);
}

.story-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(38px, 8vw, 120px);
  align-items: end;
  padding: clamp(100px, 14vw, 184px) 0 42px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.2);
}

.story-hero-copy h1 {
  max-width: 950px;
  margin: 18px 0 0;
  font-size: clamp(3.4rem, 7.3vw, 7.6rem);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.068em;
}

.story-deck {
  max-width: 820px;
  margin: 30px 0 0;
  color: #4e4e49;
  font-size: clamp(1rem, 1.55vw, 1.3rem);
  line-height: 1.62;
}

.story-hero-note {
  align-self: end;
  padding: 22px 0 4px;
  border-top: 1px solid var(--ink);
}

.story-hero-note > span {
  color: #777771;
  font: 700 0.52rem/1.3 var(--mono);
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.story-hero-note strong {
  display: block;
  margin-top: 14px;
  font-size: clamp(1.1rem, 1.65vw, 1.45rem);
  line-height: 1.25;
}

.story-hero-note p {
  margin: 14px 0 0;
  color: #5f5f59;
  font-size: 0.82rem;
  line-height: 1.58;
}

.story-metric-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 30px;
  border: solid rgba(9, 9, 9, 0.18);
  border-width: 1px 0;
}

.story-metric-strip > div {
  min-height: 106px;
  padding: 22px 24px;
  border-left: 1px solid rgba(9, 9, 9, 0.16);
}

.story-metric-strip > div:first-child {
  border-left: 0;
}

.story-metric-strip strong {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  font-weight: 600;
  line-height: 1;
}

.story-metric-strip span {
  display: block;
  margin-top: 9px;
  color: #6a6a65;
  font: 700 0.52rem/1.4 var(--mono);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.story-index {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 24px 0 70px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.story-index a {
  display: grid;
  min-height: 112px;
  grid-template-columns: 28px 1fr;
  align-content: center;
  gap: 4px 12px;
  padding: 20px;
  border-left: 1px solid rgba(9, 9, 9, 0.16);
  color: var(--ink);
  text-decoration: none;
}

.story-index a:first-child {
  border-left: 0;
}

.story-index a > span {
  grid-row: 1 / 3;
  color: #777771;
  font: 700 0.5rem/1.5 var(--mono);
}

.story-index strong {
  font-size: 0.82rem;
}

.story-index small {
  color: #666660;
  font-size: 0.62rem;
  line-height: 1.4;
}

.story-index a:hover {
  background: #fffef0;
}

.story-chapters {
  display: grid;
  gap: 24px;
}

.story-chapter {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  overflow: hidden;
  scroll-margin-top: 96px;
  border: 1px solid rgba(9, 9, 9, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
}

.chapter-rail {
  display: flex;
  min-width: 0;
  padding: 34px 24px;
  border-right: 1px solid rgba(9, 9, 9, 0.17);
  background: #f7f7f3;
  flex-direction: column;
}

.chapter-rail > span {
  font-family: Fraunces, Georgia, serif;
  font-size: 3rem;
  font-style: italic;
  line-height: 1;
}

.chapter-rail p {
  margin: 34px 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
}

.chapter-rail time,
.chapter-rail small {
  display: block;
  margin-top: 8px;
  color: #6c6c66;
  font: 700 0.48rem/1.55 var(--mono);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.chapter-rail small {
  margin-top: auto;
  padding-top: 40px;
}

.chapter-body {
  min-width: 0;
  padding: clamp(32px, 5vw, 64px);
}

.chapter-head {
  max-width: 980px;
}

.chapter-head h2 {
  margin: 15px 0 0;
  font-size: clamp(2.2rem, 4.4vw, 4.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.058em;
}

.chapter-head > p:last-child {
  max-width: 900px;
  margin: 24px 0 0;
  color: #51514c;
  font-size: clamp(0.93rem, 1.25vw, 1.08rem);
  line-height: 1.68;
}

.chapter-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 36px;
  border: solid rgba(9, 9, 9, 0.18);
  border-width: 1px 0;
}

.chapter-proof > div {
  min-width: 0;
  min-height: 92px;
  padding: 18px;
  border-left: 1px solid rgba(9, 9, 9, 0.15);
}

.chapter-proof > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.chapter-proof strong {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.45rem, 2.5vw, 2.35rem);
  line-height: 1;
}

.chapter-proof span {
  display: block;
  margin-top: 8px;
  color: #6f6f69;
  font: 700 0.47rem/1.45 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 6vw, 90px);
  margin-top: 38px;
}

.chapter-grid section {
  min-width: 0;
}

.chapter-grid .detail-label {
  margin: 0 0 14px;
  color: #6b6b65;
  font: 700 0.53rem/1.3 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.chapter-grid section > p:last-child {
  margin: 0;
  color: #4e4e49;
  font-size: 0.84rem;
  line-height: 1.68;
}

.chapter-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-list li {
  position: relative;
  padding-left: 18px;
  color: #4e4e49;
  font-size: 0.82rem;
  line-height: 1.62;
}

.chapter-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #d3b800;
  content: "→";
  font-weight: 700;
}

.chapter-artifact {
  margin: 42px 0 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.19);
  border-radius: 12px;
  background-color: #fbfbf8;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.055) 0 0.5px, transparent 0.65px);
  background-size: 7px 7px;
}

.chapter-artifact > figcaption {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 15px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.14);
  background: #fffdf3;
  color: #62625d;
  font: 700 0.49rem/1.3 var(--mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.chapter-artifact > figcaption b {
  color: #31312e;
  font: inherit;
  text-align: right;
}

.artifact-flow,
.pipeline-steps,
.manager-board,
.conversion-sequence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: clamp(28px, 5vw, 58px);
}

.artifact-flow > div,
.pipeline-steps > div,
.manager-board > div,
.conversion-sequence > div {
  display: flex;
  min-height: 132px;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  text-align: center;
  flex-direction: column;
}

.artifact-flow > i,
.conversion-sequence > i {
  align-self: center;
  font-size: 1.3rem;
  font-style: normal;
  text-align: center;
}

.chapter-artifact .is-yellow {
  background: #fff27a;
}

.artifact-flow small,
.manager-board small,
.conversion-sequence small {
  color: #666660;
  font: 700 0.46rem/1.35 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.artifact-flow strong,
.manager-board strong,
.conversion-sequence strong {
  margin-top: 9px;
  font-size: clamp(0.94rem, 1.5vw, 1.2rem);
}

.artifact-flow p,
.manager-board span,
.conversion-sequence span {
  margin: 8px 0 0;
  color: #5f5f59;
  font-size: 0.62rem;
  line-height: 1.45;
}

.artifact-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: clamp(28px, 4vw, 50px);
  background: rgba(9, 9, 9, 0.14);
}

.stahl-system-artifact .artifact-ledger {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.artifact-ledger > div {
  display: flex;
  min-height: 146px;
  padding: 18px;
  background: #fff;
  flex-direction: column;
}

.artifact-ledger > div.is-yellow {
  background: #fff27a;
}

.artifact-ledger span {
  color: #777771;
  font: 700 0.48rem/1.3 var(--mono);
}

.artifact-ledger strong {
  margin-top: auto;
  font-size: 0.88rem;
}

.artifact-ledger small {
  margin-top: 7px;
  color: #5f5f59;
  font-size: 0.58rem;
  line-height: 1.4;
}

.pipeline-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pipeline-steps > div {
  position: relative;
}

.pipeline-steps > div + div::before {
  position: absolute;
  top: 50%;
  left: -14px;
  content: "→";
  transform: translateY(-50%);
}

.pipeline-steps span {
  color: #6c6c66;
  font: 700 0.46rem/1.3 var(--mono);
  text-transform: uppercase;
}

.pipeline-steps strong {
  margin-top: 10px;
  font-size: 0.9rem;
}

.operating-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: clamp(28px, 5vw, 56px);
}

.operating-board > div {
  min-height: 112px;
  padding: 20px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: #fff;
}

.operating-board strong,
.operating-board small {
  display: block;
}

.operating-board strong {
  font-size: 0.82rem;
}

.operating-board small {
  margin-top: 10px;
  color: #666660;
  font-size: 0.58rem;
  line-height: 1.4;
}

.distribution-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: clamp(30px, 5vw, 56px);
}

.distribution-board > div {
  display: grid;
  min-height: 128px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  place-content: center;
  text-align: center;
}

.distribution-board > span {
  color: #666660;
  font: 700 0.47rem/1.4 var(--mono);
  text-align: center;
  text-transform: uppercase;
}

.distribution-board strong {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.7rem;
}

.distribution-board small {
  max-width: 100px;
  margin-top: 5px;
  color: #5f5f59;
  font-size: 0.56rem;
}

.story-cta {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 0 17px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}

.story-cta:hover {
  background: #fff27a;
}

.project-reps,
.studio-bench {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  gap: clamp(40px, 8vw, 120px);
  margin-top: 70px;
  padding: clamp(36px, 6vw, 74px);
  border: 1px solid rgba(9, 9, 9, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
}

.project-reps h2,
.studio-bench h2 {
  margin: 14px 0 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.project-reps > div > p:last-child {
  margin: 22px 0 0;
  color: #555550;
  font-size: 0.86rem;
  line-height: 1.65;
}

.project-reps ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(9, 9, 9, 0.18);
  list-style: none;
}

.project-reps li {
  display: grid;
  grid-template-columns: 84px 150px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(9, 9, 9, 0.18);
}

.project-reps li span,
.project-reps li small {
  color: #666660;
  font-size: 0.62rem;
  line-height: 1.45;
}

.project-reps li strong {
  font-size: 0.76rem;
}

.manager-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.second-brain-artifact {
  position: relative;
}

.second-brain-artifact img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.7;
  object-fit: cover;
  object-position: 50% 52%;
}

.second-brain-artifact blockquote {
  position: absolute;
  right: 22px;
  bottom: 22px;
  max-width: 380px;
  margin: 0;
  padding: 14px 16px;
  border-left: 4px solid #fff27a;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
}

.braindrop-board {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) 40px minmax(180px, 1fr) 40px minmax(180px, 0.8fr);
  gap: 14px;
  align-items: center;
  padding: clamp(32px, 5vw, 62px);
}

.braindrop-board > div:first-child {
  display: grid;
  gap: 8px;
}

.braindrop-board > div:first-child strong {
  padding: 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-size: 0.65rem;
  text-align: center;
}

.braindrop-board > i {
  font-style: normal;
  text-align: center;
}

.brain-mark {
  position: relative;
  display: flex;
  min-height: 170px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: #fff27a;
}

.brain-mark span {
  width: 64px;
  height: 90px;
  border: 2px solid var(--ink);
}

.brain-mark span:first-child {
  border-right-width: 1px;
  border-radius: 54% 35% 35% 54%;
}

.brain-mark span:last-child {
  border-left-width: 1px;
  border-radius: 35% 54% 54% 35%;
}

.braindrop-board > div:last-child {
  display: grid;
  min-height: 126px;
  padding: 18px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  place-content: center;
  text-align: center;
}

.braindrop-board > div:last-child strong,
.braindrop-board > div:last-child small {
  display: block;
}

.braindrop-board > div:last-child strong {
  font-size: 0.8rem;
}

.braindrop-board > div:last-child small {
  margin-top: 7px;
  color: #666660;
  font-size: 0.58rem;
}

.studio-bench {
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(220px, 0.55fr));
  gap: 14px;
}

.studio-bench > div {
  padding-right: 40px;
}

.studio-bench article {
  display: flex;
  min-height: 220px;
  padding: 24px;
  border: 1px solid rgba(9, 9, 9, 0.18);
  border-radius: 12px;
  flex-direction: column;
}

.studio-bench article > span {
  color: #777771;
  font: 700 0.5rem/1.3 var(--mono);
}

.studio-bench article h3 {
  margin: 30px 0 0;
  font-size: 1.35rem;
}

.studio-bench article p {
  margin: 12px 0 0;
  color: #555550;
  font-size: 0.74rem;
  line-height: 1.55;
}

.studio-bench article small {
  margin-top: auto;
  color: #777771;
  font: 700 0.48rem/1.3 var(--mono);
  text-transform: uppercase;
}

/* ==========================================================================
   WRITING JOURNEY
   ========================================================================== */

.writing-index {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.essay-journey {
  display: grid;
  gap: 24px;
}

.essay-chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  overflow: hidden;
  scroll-margin-top: 96px;
  border: 1px solid rgba(9, 9, 9, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
}

.essay-chapter--reverse .essay-chapter-copy {
  grid-column: 2;
  grid-row: 1;
  border-right: 0;
  border-left: 1px solid rgba(9, 9, 9, 0.16);
}

.essay-chapter--reverse .essay-chapter-art {
  grid-column: 1;
  grid-row: 1;
}

.essay-chapter-copy {
  padding: clamp(32px, 5vw, 62px);
  border-right: 1px solid rgba(9, 9, 9, 0.16);
}

.essay-chapter-copy h2 {
  margin: 16px 0 0;
  font-size: clamp(2.35rem, 4.4vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.essay-thesis {
  margin: 25px 0 0;
  padding-left: 16px;
  border-left: 4px solid #fff27a;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.45;
}

.essay-chapter-copy > p:not(.file-meta):not(.essay-thesis) {
  margin: 22px 0 0;
  color: #50504b;
  font-size: 0.88rem;
  line-height: 1.68;
}

.essay-annotations {
  display: grid;
  margin: 30px 0 0;
  border-top: 1px solid rgba(9, 9, 9, 0.16);
}

.essay-annotations > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(9, 9, 9, 0.16);
}

.essay-annotations dt {
  color: #777771;
  font: 700 0.49rem/1.5 var(--mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.essay-annotations dd {
  margin: 0;
  color: #555550;
  font-size: 0.72rem;
  line-height: 1.5;
}

.essay-chapter-art {
  position: relative;
  min-width: 0;
  margin: 0;
  background: #fff27a;
}

.essay-chapter-art figcaption {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  background: rgba(255, 253, 243, 0.94);
  color: #5f5f59;
  font: 700 0.48rem/1.3 var(--mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.essay-chapter-art figcaption b {
  font: inherit;
}

.essay-chapter-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 640px;
  object-fit: cover;
  object-position: center;
}

.essay-chapter-art blockquote {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  width: min(70%, 430px);
  margin: 0;
  padding: 15px 17px;
  border-left: 4px solid #fff27a;
  background: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  font-weight: 600;
  line-height: 1.45;
}

.essay-library {
  margin-top: 70px;
  padding: clamp(36px, 6vw, 72px);
  border: 1px solid rgba(9, 9, 9, 0.21);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
}

.essay-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  gap: 24px 80px;
  align-items: end;
}

.essay-library-head .catalog-line {
  grid-column: 1 / -1;
}

.essay-library-head h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.essay-library-head > p:last-child {
  margin: 0;
  color: #555550;
  font-size: 0.82rem;
  line-height: 1.65;
}

.essay-shelves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 42px;
}

.essay-shelves > section {
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.18);
  border-radius: 12px;
}

.essay-shelves header {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  min-height: 90px;
  align-content: center;
  padding: 18px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.17);
  background: #fffef0;
}

.essay-shelves header span {
  color: #777771;
  font: 700 0.5rem/1.4 var(--mono);
}

.essay-shelves header h3 {
  margin: 0;
  font-size: 1rem;
}

.essay-shelves a {
  display: grid;
  gap: 8px;
  min-height: 144px;
  padding: 18px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.15);
  color: var(--ink);
  text-decoration: none;
}

.essay-shelves a:hover {
  background: #fffef3;
}

.essay-shelves a strong {
  font-size: 0.82rem;
  line-height: 1.35;
}

.essay-shelves a small {
  color: #5f5f59;
  font-size: 0.67rem;
  line-height: 1.5;
}

.essay-shelves a b {
  align-self: end;
  color: #777771;
  font: 700 0.47rem/1.3 var(--mono);
  text-transform: uppercase;
}

.essay-shelf-note {
  min-height: 144px;
  padding: 18px;
}

.essay-shelf-note strong {
  font-size: 0.76rem;
}

.essay-shelf-note p {
  margin: 10px 0 0;
  color: #5f5f59;
  font-size: 0.67rem;
  line-height: 1.55;
}

.story-closing {
  margin-top: 80px;
  padding: clamp(58px, 9vw, 120px) 0;
  border-top: 1px solid rgba(9, 9, 9, 0.2);
  text-align: center;
}

.story-closing h2 {
  max-width: 980px;
  margin: 18px auto 0;
  font-size: clamp(2.5rem, 6vw, 6.2rem);
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.065em;
}

.story-closing .story-cta {
  margin-top: 32px;
}

@media (max-width: 980px) {
  #contact .contact-home-head,
  .story-hero,
  .essay-library-head {
    grid-template-columns: 1fr;
  }

  #contact .contact-attribution {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .contact-home-panel {
    grid-template-columns: 1fr;
  }

  .contact-home-intro {
    border-right: 0;
    border-bottom: 1px solid rgba(9, 9, 9, 0.16);
  }

  .story-hero {
    gap: 34px;
  }

  .story-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-metric-strip > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(9, 9, 9, 0.16);
  }

  .story-metric-strip > div:nth-child(4) {
    border-top: 1px solid rgba(9, 9, 9, 0.16);
  }

  .story-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-index a:nth-child(3) {
    border-top: 1px solid rgba(9, 9, 9, 0.16);
    border-left: 0;
  }

  .story-index a:nth-child(4) {
    border-top: 1px solid rgba(9, 9, 9, 0.16);
  }

  .story-chapter {
    grid-template-columns: 1fr;
  }

  .chapter-rail {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 8px 16px;
    align-items: center;
    padding: 20px 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(9, 9, 9, 0.17);
  }

  .chapter-rail > span {
    grid-row: 1 / 3;
  }

  .chapter-rail p {
    margin: 0;
  }

  .chapter-rail time {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }

  .chapter-rail small {
    grid-column: 3;
    grid-row: 2;
    margin: 0;
    padding: 0;
  }

  .project-reps,
  .studio-bench {
    grid-template-columns: 1fr;
  }

  .studio-bench > div {
    padding-right: 0;
  }

  .essay-chapter,
  .essay-chapter--reverse {
    grid-template-columns: 1fr;
  }

  .essay-chapter--reverse .essay-chapter-copy,
  .essay-chapter--reverse .essay-chapter-art {
    grid-column: 1;
    grid-row: auto;
  }

  .essay-chapter-copy,
  .essay-chapter--reverse .essay-chapter-copy {
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(9, 9, 9, 0.16);
  }

  .essay-chapter-art img {
    min-height: 480px;
    aspect-ratio: 16 / 9;
  }

  .essay-shelves {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .contact-home-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-home-foot nav {
    justify-content: flex-start;
  }

  .story-hero {
    padding-top: 92px;
  }

  .story-hero-copy h1 {
    font-size: clamp(3.1rem, 16vw, 5rem);
  }

  .story-index {
    grid-template-columns: 1fr;
  }

  .story-index a,
  .story-index a:nth-child(2),
  .story-index a:nth-child(3),
  .story-index a:nth-child(4) {
    min-height: 88px;
    border-top: 1px solid rgba(9, 9, 9, 0.16);
    border-left: 0;
  }

  .story-index a:first-child {
    border-top: 0;
  }

  .chapter-rail {
    grid-template-columns: 48px 1fr;
  }

  .chapter-rail time,
  .chapter-rail small {
    grid-column: 2;
  }

  .chapter-rail time {
    grid-row: 2;
  }

  .chapter-rail small {
    grid-row: 3;
  }

  .chapter-body {
    padding: 24px 21px 28px;
  }

  .chapter-head h2 {
    font-size: clamp(2.15rem, 11vw, 3.5rem);
  }

  .chapter-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chapter-proof > div:nth-child(3) {
    border-top: 1px solid rgba(9, 9, 9, 0.15);
    border-left: 0;
    padding-left: 0;
  }

  .chapter-proof > div:nth-child(4) {
    border-top: 1px solid rgba(9, 9, 9, 0.15);
  }

  .chapter-grid {
    grid-template-columns: 1fr;
  }

  .artifact-flow,
  .conversion-sequence {
    grid-template-columns: 1fr;
  }

  .artifact-flow > i,
  .conversion-sequence > i {
    transform: rotate(90deg);
  }

  .artifact-ledger,
  .stahl-system-artifact .artifact-ledger,
  .pipeline-steps,
  .operating-board,
  .manager-board {
    grid-template-columns: 1fr;
  }

  .pipeline-steps > div + div::before {
    display: none;
  }

  .distribution-board,
  .braindrop-board {
    grid-template-columns: 1fr;
  }

  .distribution-board > span,
  .braindrop-board > i {
    padding: 6px 0;
  }

  .project-reps li {
    grid-template-columns: 74px 1fr;
  }

  .project-reps li small {
    grid-column: 2;
  }

  .second-brain-artifact blockquote,
  .essay-chapter-art blockquote {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }

  .essay-chapter-copy {
    padding: 26px 21px 30px;
  }

  .essay-chapter-art img {
    min-height: 350px;
  }

  .essay-library {
    padding: 26px 20px;
  }
}

/* ==========================================================================
   COMPACT LONG-FORM CORRECTION
   The detail pages remain deep, but the first viewport behaves like a feature.
   ========================================================================== */

.story-page .story-hero {
  grid-template-columns: minmax(0, 0.88fr) minmax(440px, 1.12fr);
  gap: 26px;
  align-items: stretch;
  padding: 82px 0 20px;
}

.story-page .story-hero-copy {
  align-self: center;
  padding: 12px 24px 12px 0;
}

.story-page .story-hero-copy h1 {
  max-width: 720px;
  margin-top: 12px;
  font-size: clamp(3rem, 4.7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.story-page .story-deck {
  max-width: 680px;
  margin-top: 20px;
  font-size: clamp(0.88rem, 1.12vw, 1rem);
  line-height: 1.55;
}

.story-hero-visual {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 350px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.2);
  border-radius: 14px;
  background-color: #fbfbf8;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.055) 0 0.5px, transparent 0.65px);
  background-size: 7px 7px;
  flex-direction: column;
}

.story-hero-visual figcaption {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(9, 9, 9, 0.14);
  background: #fffdf3;
  color: #62625d;
  font: 700 0.48rem/1.3 var(--mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.story-hero-visual figcaption b {
  color: #31312e;
  font: inherit;
  text-align: right;
}

.story-hero-visual > img {
  display: block;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  flex: 1 1 auto;
}

.work-hero-visual > img {
  object-fit: contain;
  object-position: 50% 55%;
  padding: 10px 12px 0;
}

.writing-hero-visual > img {
  object-position: 50% 48%;
}

.story-hero-visual > p {
  min-height: 42px;
  margin: 0;
  padding: 11px 14px;
  border-top: 1px solid rgba(9, 9, 9, 0.14);
  background: rgba(255, 255, 255, 0.94);
  color: #5f5f59;
  font-size: 0.64rem;
  line-height: 1.45;
}

.project-signal-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 34px;
  flex: 1 1 auto;
}

.project-signal-board > div {
  display: grid;
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  place-content: center;
  text-align: center;
}

.project-signal-board > div.is-yellow {
  background: #fff27a;
}

.project-signal-board strong {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
}

.project-signal-board small {
  max-width: 100px;
  margin-top: 6px;
  color: #5f5f59;
  font-size: 0.52rem;
  line-height: 1.4;
}

.project-signal-board i {
  font-style: normal;
  text-align: center;
}

.studio-system-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 28px;
  flex: 1 1 auto;
}

.studio-system-board > div {
  display: flex;
  min-height: 105px;
  justify-content: flex-end;
  padding: 16px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  flex-direction: column;
}

.studio-system-board > div.is-yellow {
  background: #fff27a;
}

.studio-system-board small {
  color: #6d6d67;
  font: 700 0.47rem/1.3 var(--mono);
  text-transform: uppercase;
}

.studio-system-board strong {
  margin-top: 8px;
  font-size: 0.84rem;
}

.story-page .story-metric-strip {
  margin-top: 18px;
}

.story-page .story-metric-strip > div {
  min-height: 78px;
  padding: 15px 18px;
}

.story-page .story-metric-strip strong {
  font-size: clamp(1.35rem, 2.25vw, 2rem);
}

.story-page .story-metric-strip span {
  margin-top: 6px;
  font-size: 0.46rem;
}

.story-page .story-index {
  margin: 18px 0 38px;
}

.story-page .story-index a {
  min-height: 88px;
  padding: 15px 18px;
}

.story-page .story-chapters {
  gap: 16px;
}

.story-page .story-chapter {
  grid-template-columns: 148px minmax(0, 1fr);
  border-radius: 14px;
}

.story-page .chapter-rail {
  padding: 26px 20px;
}

.story-page .chapter-rail > span {
  font-size: 2.35rem;
}

.story-page .chapter-rail p {
  margin-top: 25px;
}

.story-page .chapter-body {
  padding: clamp(28px, 3.7vw, 46px);
}

.story-page .chapter-head h2 {
  max-width: 900px;
  margin-top: 11px;
  font-size: clamp(2rem, 3.4vw, 3.55rem);
  line-height: 1.02;
  letter-spacing: -0.052em;
}

.story-page .chapter-head > p:last-child {
  max-width: 850px;
  margin-top: 18px;
  font-size: 0.88rem;
  line-height: 1.58;
}

.story-page .chapter-proof {
  margin-top: 26px;
}

.story-page .chapter-proof > div {
  min-height: 74px;
  padding: 14px;
}

.story-page .chapter-grid {
  gap: clamp(26px, 4vw, 60px);
  margin-top: 28px;
}

.story-page .chapter-artifact {
  margin-top: 28px;
}

.story-page .story-closing {
  margin-top: 54px;
  padding: clamp(44px, 6vw, 76px) 0;
}

.story-page .story-closing h2 {
  max-width: 820px;
  font-size: clamp(2.2rem, 4.5vw, 4.8rem);
}

.writing-story-page .essay-journey {
  gap: 16px;
}

.writing-story-page .essay-chapter {
  grid-template-columns: minmax(0, 0.92fr) minmax(440px, 1.08fr);
  border-radius: 14px;
}

.writing-story-page .essay-chapter-copy {
  padding: clamp(28px, 3.8vw, 46px);
}

.writing-story-page .essay-chapter-copy h2 {
  font-size: clamp(2.15rem, 3.5vw, 3.65rem);
}

.writing-story-page .essay-thesis {
  margin-top: 18px;
  font-size: 1rem;
}

.writing-story-page .essay-chapter-copy > p:not(.file-meta):not(.essay-thesis) {
  margin-top: 17px;
  font-size: 0.8rem;
  line-height: 1.58;
}

.writing-story-page .essay-annotations {
  margin-top: 22px;
}

.writing-story-page .essay-chapter-art img {
  min-height: 500px;
}

.writing-story-page .essay-library {
  margin-top: 50px;
}

@media (max-width: 980px) {
  .story-page .story-hero {
    grid-template-columns: 1fr;
    padding-top: 74px;
  }

  .story-page .story-hero-copy {
    padding-right: 0;
  }

  .story-hero-visual {
    min-height: 400px;
  }

  .story-page .story-chapter {
    grid-template-columns: 1fr;
  }

  .writing-story-page .essay-chapter,
  .writing-story-page .essay-chapter--reverse {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .story-page .story-hero {
    padding-top: 62px;
  }

  .story-page .story-hero-copy h1 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .story-hero-visual {
    min-height: 320px;
  }

  .project-signal-board {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .project-signal-board > div {
    min-height: 110px;
    border-radius: 12px;
  }

  .project-signal-board i {
    transform: rotate(90deg);
  }

  .story-page .story-chapter {
    grid-template-columns: 1fr;
  }

  .story-page .chapter-body {
    padding: 24px 20px 28px;
  }

  .writing-story-page .essay-chapter-art img {
    min-height: 340px;
  }
}

/* ============================================================
   OPERATING LANDSCAPE HERO
   Full-bleed landscape with architectural callouts.
   ============================================================ */

.home-page .hero-journey {
  position: relative;
  isolation: isolate;
}

.home-page .hero-journey::before {
  position: absolute;
  z-index: -2;
  right: calc(50% - 50vw);
  bottom: 0;
  left: calc(50% - 50vw);
  height: 74%;
  background-image:
    linear-gradient(rgba(9, 9, 9, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 9, 9, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 68% 59%, rgba(255, 242, 122, 0.17), transparent 25%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  content: "";
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.82) 24%, #000 100%);
}

.home-page .hero-journey .hero-copy > div > .hero-eyebrow {
  display: block !important;
  margin: 0 0 13px;
  color: #5d5d57;
  font: 700 0.62rem/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
}

.home-page .hero-journey .hero-copy {
  z-index: 4;
  align-items: center;
  padding-top: clamp(26px, 4svh, 44px);
  padding-bottom: clamp(12px, 1.8svh, 20px);
}

.home-page .hero-journey .hero-copy h1 {
  max-width: 790px;
  font-size: clamp(2.8rem, 3.55vw, 4rem);
  line-height: 0.99;
  letter-spacing: -0.055em;
}

.home-page .hero-journey .hero-copy mark {
  background: linear-gradient(transparent 63%, #fff27a 63% 94%, transparent 94%);
}

.home-page .hero-intro {
  align-self: center;
  padding-top: 27px;
}

.home-page .hero-journey .hero-copy .hero-intro .intro-copy {
  display: block !important;
  max-width: 440px;
  transform: none;
}

.hero-explore {
  position: relative;
  display: inline-flex;
  margin-top: 17px;
  padding-bottom: 4px;
  color: #4f4f4a;
  font: 700 0.61rem/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  align-items: center;
  gap: 7px;
}

.hero-explore::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #fff27a;
  content: "";
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 180ms ease;
}

.hero-explore:hover::after,
.hero-explore:focus-visible::after {
  transform: scaleX(1);
}

.hero-explore span {
  color: #090909;
  font-size: 0.84rem;
  transition: transform 180ms ease;
}

.hero-explore:hover span,
.hero-explore:focus-visible span {
  transform: translate(2px, 2px);
}

.home-page .hero-journey .map-shell {
  position: relative;
}

.home-page .hero-journey .map-shell::before {
  position: absolute;
  z-index: 0;
  right: 11%;
  bottom: 3.4%;
  left: 8%;
  height: 5.5%;
  border-radius: 50%;
  background: rgba(9, 9, 9, 0.11);
  content: "";
  filter: blur(25px);
  opacity: 0.55;
  transform: scaleY(0.42);
}

.home-page .hero-journey .journey-map {
  overflow: visible;
  transform: translateY(-6px) scale(0.98);
  transform-origin: center bottom;
}

.home-page .hero-journey .operator-landscape {
  transition: filter 220ms ease, opacity 220ms ease, transform 240ms ease;
}

.home-page .hero-journey .journey-stages {
  display: block !important;
  overflow: visible;
}

.home-page .hero-journey .journey-stop {
  width: 28px;
  height: 28px;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.home-page .hero-journey .journey-node {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 22px;
  height: 22px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  color: #090909;
  font: 700 0.43rem/1 "Space Mono", ui-monospace, monospace;
  box-shadow: 0 0 0 5px rgba(255, 242, 122, 0.24);
  place-items: center;
  transform: translate(-50%, -50%);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.home-page .hero-journey .journey-node::before {
  display: none;
}

.home-page .hero-journey .journey-label,
.home-page .hero-journey .journey-stop.is-active .journey-label,
.home-page .hero-journey .journey-stop:hover .journey-label,
.home-page .hero-journey .journey-stop:focus-visible .journey-label {
  position: absolute;
  z-index: 2;
  display: grid;
  width: max-content;
  min-width: 164px;
  padding: 0 7px 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 18px 12px rgba(255, 255, 255, 0.88);
  opacity: 1;
  gap: 1px;
  align-items: start;
  transform: none;
}

.home-page .hero-journey .journey-label::before {
  position: absolute;
  z-index: -1;
  height: 1px;
  background: rgba(9, 9, 9, 0.62);
  content: "";
  transform-origin: right center;
}

.home-page .hero-journey .journey-label::after {
  display: block !important;
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.home-page .hero-journey .journey-label small {
  display: block;
  padding: 0;
  background: none;
  color: #6b6b64;
  font: 700 0.5rem/1.3 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-shadow: none;
}

.home-page .hero-journey .journey-label strong {
  display: block;
  overflow: visible;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  color: #090909;
  font: 600 0.72rem/1.2 Inter, ui-sans-serif, sans-serif;
  letter-spacing: -0.01em;
  text-shadow: none;
  white-space: nowrap;
}

.home-page .hero-journey .journey-label em {
  display: block !important;
  overflow: visible;
  max-height: none;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: linear-gradient(transparent 55%, rgba(255, 242, 122, 0.82) 55% 94%, transparent 94%);
  color: #44443f;
  opacity: 1;
  font: 700 0.46rem/1.35 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.home-page .hero-journey .journey-stop:nth-child(1) .journey-label {
  top: -74px;
  right: 34px;
  text-align: right;
}

.home-page .hero-journey .journey-stop:nth-child(1) .journey-label::before {
  top: 38px;
  right: -33px;
  width: 48px;
  transform: rotate(20deg);
}

.home-page .hero-journey .journey-stop:nth-child(1) .journey-label::after {
  right: -35px;
  bottom: -8px;
}

.home-page .hero-journey .journey-stop:nth-child(2) .journey-label {
  top: -95px;
  right: 32px;
  text-align: right;
}

.home-page .hero-journey .journey-stop:nth-child(2) .journey-label::before {
  top: 47px;
  right: -30px;
  width: 44px;
  transform: rotate(28deg);
}

.home-page .hero-journey .journey-stop:nth-child(2) .journey-label::after {
  right: -31px;
  bottom: -12px;
}

.home-page .hero-journey .journey-stop:nth-child(3) .journey-label {
  top: -105px;
  right: 30px;
  text-align: right;
}

.home-page .hero-journey .journey-stop:nth-child(3) .journey-label::before {
  top: 50px;
  right: -29px;
  width: 46px;
  transform: rotate(34deg);
}

.home-page .hero-journey .journey-stop:nth-child(3) .journey-label::after {
  right: -30px;
  bottom: -15px;
}

.home-page .hero-journey .journey-stop:nth-child(4) .journey-label {
  top: -115px;
  right: 32px;
  text-align: right;
}

.home-page .hero-journey .journey-stop:nth-child(4) .journey-label::before {
  top: 48px;
  right: -31px;
  width: 47px;
  transform: rotate(31deg);
}

.home-page .hero-journey .journey-stop:nth-child(4) .journey-label::after {
  right: -32px;
  bottom: -13px;
}

.home-page .hero-journey .journey-stop:nth-child(5) .journey-label {
  top: -63px;
  right: 34px;
  text-align: right;
}

.home-page .hero-journey .journey-stop:nth-child(5) .journey-label::before {
  top: 29px;
  right: -33px;
  width: 46px;
  transform: rotate(5deg);
}

.home-page .hero-journey .journey-stop:nth-child(5) .journey-label::after {
  right: -35px;
  top: 26px;
}

.home-page .hero-journey .journey-stop:hover,
.home-page .hero-journey .journey-stop:focus-visible {
  z-index: 8;
  transform: translate(-50%, -50%);
}

.home-page .hero-journey .journey-stop:hover .journey-node,
.home-page .hero-journey .journey-stop:focus-visible .journey-node,
.home-page .hero-journey .journey-stop.is-active .journey-node {
  box-shadow: 0 0 0 8px rgba(255, 242, 122, 0.38), 0 0 26px rgba(255, 225, 48, 0.72);
  transform: translate(-50%, -50%) scale(1.13);
}

.home-page .hero-journey .journey-stages:has(.journey-stop:hover) .journey-stop:not(:hover),
.home-page .hero-journey .journey-stages:has(.journey-stop:focus-visible) .journey-stop:not(:focus-visible) {
  opacity: 0.34;
}

.home-page .hero-journey .journey-stop,
.home-page .hero-journey .journey-label {
  transition: opacity 180ms ease, filter 180ms ease;
}

@media (min-width: 761px) {
  .home-page .hero-journey {
    min-height: 760px;
    padding-top: 0;
  }

  .home-page .hero-journey .hero-copy {
    top: 0;
    grid-template-columns: minmax(0, 7fr) minmax(330px, 4fr);
  }

  .home-page .hero-journey .journey-map {
    height: min(99%, calc(98vw * 0.5627990431));
    max-width: none;
  }
}

@media (max-width: 980px) and (min-width: 761px) {
  .home-page .hero-journey .journey-label {
    min-width: 130px;
    box-shadow: 0 0 14px 9px rgba(255, 255, 255, 0.9);
  }

  .home-page .hero-journey .journey-label strong { font-size: 0.62rem; }
  .home-page .hero-journey .journey-label em { font-size: 0.4rem; }
}

@media (max-width: 1400px) and (min-width: 761px) {
  .home-page .hero-journey .journey-stop:nth-child(5) .journey-label {
    top: -28px;
  }
}

@media (max-width: 760px) {
  .home-page .hero-journey .hero-copy {
    padding-top: 16px;
  }

  .home-page .hero-journey .hero-copy > div > .hero-eyebrow {
    margin-bottom: 9px;
    font-size: 0.5rem;
  }

  .home-page .hero-intro {
    padding-top: 14px;
  }

  .hero-explore {
    margin-top: 11px;
    font-size: 0.52rem;
  }

  .home-page .hero-journey .journey-map {
    transform: translateY(-5px) scale(1.08);
  }

  .home-page .hero-journey .journey-label {
    display: none !important;
  }

  .home-page .hero-journey .journey-node {
    width: 18px;
    height: 18px;
    font-size: 0.38rem;
  }
}

/* Slightly larger header controls for stronger top-level presence. */
@media (min-width: 761px) {
  .site-header {
    min-height: 84px;
  }

  .site-header .mark {
    font-size: 2.05rem;
  }

  .site-header .nav {
    gap: 3px;
    padding: 7px 10px;
  }

  .site-header .nav a {
    padding: 9px 16px 10px;
    font-size: 0.75rem;
  }

  .site-header .contact-pill {
    min-height: 48px;
    padding: 6px 7px 6px 18px;
    gap: 12px;
    font-size: 0.82rem;
  }

  .site-header .contact-pill b {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
}

/* Project previews: the visual occupies the full card height. */
@media (min-width: 761px) {
  .home-page .ledger-case {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .home-page .ledger-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .home-page .ledger-visual {
    display: flex;
    height: 100%;
    min-height: 320px;
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-self: stretch;
  }

  .home-page .ledger-diagram {
    width: 100%;
    height: auto;
    min-height: 250px;
    flex: 1 1 auto;
  }

  .home-page .ledger-more {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }
}

/* Larger desktop navigation, preserving the existing three-point alignment. */
@media (min-width: 761px) {
  .site-header {
    min-height: 94px;
  }

  .site-header .mark {
    font-size: 2.3rem;
  }

  .site-header .nav {
    gap: 4px;
    padding: 9px 13px;
  }

  .site-header .nav a {
    padding: 11px 20px 12px;
    font-size: 0.84rem;
  }

  .site-header .contact-pill {
    min-height: 54px;
    padding: 7px 8px 7px 21px;
    gap: 14px;
    font-size: 0.9rem;
  }

  .site-header .contact-pill b {
    width: 38px;
    height: 38px;
    font-size: 1.08rem;
  }
}

/* Center navigation as a compact instrument panel. */
@media (min-width: 761px) {
  .site-header .nav {
    position: relative;
    min-height: 60px;
    padding: 7px 30px;
    border: 1px solid #090909;
    border-radius: 999px;
    background: #090909;
    box-shadow:
      0 12px 28px rgba(9, 9, 9, 0.14),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    gap: 5px;
    align-items: center;
  }

  .site-header .nav::before,
  .site-header .nav::after {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: #fff27a;
    box-shadow: 0 0 0 3px rgba(255, 242, 122, 0.12);
    content: "";
    transform: translateY(-50%);
  }

  .site-header .nav::before {
    left: 14px;
  }

  .site-header .nav::after {
    right: 14px;
  }

  .site-header .nav a {
    min-width: 92px;
    padding: 13px 18px 14px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    transition:
      background 160ms ease,
      color 160ms ease,
      transform 160ms ease;
  }

  .site-header .nav a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
  }

  .site-header .nav a[aria-current="page"] {
    background: #fff27a;
    color: #090909;
  }
}

/* ==========================================================================
   2026-07-27 IMPECCABLE CRAFT PASS
   One finishing layer for rhythm, resilience, and interaction quality.
   ========================================================================== */

:root {
  --header-offset: 116px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-padding-top: var(--header-offset);
}

body {
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

:where(
  .home-page > section[id],
  .story-chapter[id],
  .posting[id],
  .showcase-file[id],
  .story-page section[id]
) {
  scroll-margin-top: var(--header-offset);
}

:where(a, button, summary):focus-visible {
  outline: 2px solid #090909;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 242, 122, 0.82);
}

.site-header {
  isolation: isolate;
}

.site-header .mark,
.site-header .contact-pill,
.site-header .nav a {
  transition:
    color 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.site-header .mark:hover,
.site-header .mark:focus-visible {
  transform: rotate(-3deg) translateY(-1px);
}

.site-header .contact-pill:hover,
.site-header .contact-pill:focus-visible {
  border-color: #090909;
  background: #fffef0;
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(9, 9, 9, 0.08);
}

.site-header .contact-pill:hover b,
.site-header .contact-pill:focus-visible b {
  transform: rotate(8deg);
}

.site-header .contact-pill[aria-current="page"] {
  border-color: #090909;
  background: #fffef0;
}

.site-header .contact-pill b {
  transition: transform 180ms var(--ease-out);
}

.hero-explore,
.identity-actions a,
.writing-direct-link,
.contact-home-foot a,
.contact-email {
  text-underline-offset: 0.22em;
}

.identity-actions a:hover,
.writing-direct-link:hover,
.contact-home-foot a:hover {
  text-decoration: underline;
  text-decoration-color: #fff27a;
  text-decoration-thickness: 2px;
}

.work-bento-card,
.ledger-case,
.studio-feature,
.writing-card,
.story-chapter,
.essay-chapter {
  transition:
    border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}

:where(.work-bento-card, .ledger-case, .studio-feature, .writing-card):has(a:hover) {
  border-color: rgba(9, 9, 9, 0.42);
  box-shadow: 0 14px 34px rgba(9, 9, 9, 0.055);
  transform: translateY(-2px);
}

.operator-landscape,
.writing-artwork img,
.writing-essay-image img,
.story-hero-visual > img,
.essay-chapter-art img,
.second-brain-artifact img {
  background: #f7f7f3;
}

/* The mobile hero keeps the full landscape, but removes the dead air above it. */
@media (max-width: 760px) {
  :root {
    --header-offset: 108px;
  }

  .home-page .hero-journey .map-shell {
    margin-top: -54px;
  }

  .home-page .hero-journey .journey-map {
    transform: translateY(4px) scale(1.1);
    transform-origin: center bottom;
  }

  .home-page .hero-journey .hero-copy {
    position: relative;
    z-index: 5;
  }
}

/* Short laptop screens keep the story page feature and its visual together. */
@media (min-width: 981px) and (max-height: 780px) {
  .story-page .story-hero {
    padding-top: 42px;
  }

  .story-page .story-hero-copy h1 {
    font-size: clamp(2.7rem, 4.2vw, 4.4rem);
  }

  .story-page .story-deck {
    margin-top: 16px;
    line-height: 1.48;
  }

  .story-hero-visual {
    min-height: 310px;
  }

  .story-page .story-metric-strip {
    margin-top: 14px;
  }

  .story-page .story-metric-strip > div {
    min-height: 68px;
    padding-block: 12px;
  }
}

/* Contact becomes a deliberate closing chapter instead of a generic form page. */
.contact-page .compact-hero {
  display: grid;
  max-width: none;
  padding: clamp(58px, 8vw, 104px) 0 clamp(44px, 6vw, 74px);
  border-bottom: 1px solid rgba(9, 9, 9, 0.2);
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(56px, 9vw, 132px);
  align-items: start;
}

.contact-page .compact-hero .catalog-line {
  grid-column: 1;
  grid-row: 1;
}

.contact-page .compact-hero h1 {
  max-width: 8ch;
  margin-top: 18px;
  font-size: clamp(3.35rem, 5.4vw, 5.9rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  grid-column: 1;
  grid-row: 2 / span 3;
}

.contact-page .compact-hero .intro {
  max-width: 690px;
  margin: 0;
  padding-top: 2px;
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.55;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.contact-page .compact-hero .hero-actions {
  margin-top: 32px;
  grid-column: 2;
  grid-row: 3;
}

.contact-page .compact-hero .contact-links {
  margin-top: 12px;
  grid-column: 2;
  grid-row: 4;
}

.contact-page .compact-hero .button {
  min-height: 48px;
  border-radius: 999px;
  padding-inline: 20px;
}

.contact-page .compact-hero .button.primary {
  box-shadow: inset 0 -4px 0 #fff27a;
}

.contact-page .section {
  padding-block: clamp(48px, 6vw, 78px);
}

.contact-page .contact-home-panel {
  border-color: rgba(9, 9, 9, 0.28);
  box-shadow: 0 18px 42px rgba(9, 9, 9, 0.05);
}

.contact-service-section {
  padding-top: 0 !important;
  border-top: 0;
}

.contact-service-strip {
  display: grid;
  border: solid rgba(9, 9, 9, 0.2);
  border-width: 1px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-service-strip article {
  min-width: 0;
  padding: clamp(24px, 3vw, 38px);
  border-left: 1px solid rgba(9, 9, 9, 0.16);
}

.contact-service-strip article:first-child {
  border-left: 0;
}

.contact-service-strip h3 {
  margin-top: 14px;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  letter-spacing: -0.035em;
}

.contact-service-strip article > p:last-child {
  max-width: 36ch;
  margin: 14px 0 0;
  color: #555550;
  font-size: 0.82rem;
  line-height: 1.58;
}

@media (max-width: 820px) {
  .contact-page .compact-hero {
    padding-top: 54px;
    grid-template-columns: 1fr;
  }

  .contact-page .compact-hero h1,
  .contact-page .compact-hero .intro,
  .contact-page .compact-hero .hero-actions,
  .contact-page .compact-hero .contact-links {
    grid-column: 1;
    grid-row: auto;
  }

  .contact-page .compact-hero h1 {
    max-width: 9ch;
    font-size: clamp(3rem, 14vw, 4.7rem);
  }

  .contact-page .compact-hero .intro {
    margin-top: 30px;
  }

  .contact-service-strip {
    grid-template-columns: 1fr;
  }

  .contact-service-strip article {
    border-top: 1px solid rgba(9, 9, 9, 0.16);
    border-left: 0;
  }

  .contact-service-strip article:first-child {
    border-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   2026-07-26 HOMEPAGE NARRATIVE PASS
   The hero now fits by available height. Identity and evidence scenes inherit
   the hero's monochrome field-note language without repeating its landscape.
   ========================================================================== */

/* Height-aware hero. The complete illustration stays inside short laptops. */
@media (min-width: 761px) {
  .home-page .hero-journey {
    box-sizing: border-box;
    width: 100%;
    height: calc(100dvh - 72px);
    min-height: 560px;
    max-height: 1040px;
    overflow: clip;
    padding-top: clamp(15px, 2.1dvh, 24px);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .home-page .hero-journey .hero-copy {
    padding-bottom: clamp(5px, 0.9dvh, 11px);
  }

  .home-page .hero-journey .map-shell,
  .home-page .hero-journey .journey-frame,
  .home-page .hero-journey .journey-canvas,
  .home-page .hero-journey .landscape-viewport {
    min-height: 0;
  }

  .home-page .hero-journey .landscape-viewport {
    overflow: visible;
    /*
     * Keep the viewport-wide illustration visible to the left and right, but
     * end it cleanly with the hero. This prevents the landscape from leaking
     * behind the sticky navigation and into the profile section.
     */
    clip-path: polygon(-100vw 0, 100vw 0, 100vw 100%, -100vw 100%);
    isolation: isolate;
  }

  .home-page .hero-journey .journey-map {
    width: auto;
    height: min(100%, calc(100vw * 0.5627990431));
    max-width: 100vw;
    max-height: 100%;
    aspect-ratio: 1672 / 941;
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  .home-page .hero-journey {
    min-height: 0;
    padding-top: 12px;
  }

  .home-page .hero-journey .hero-copy {
    gap: clamp(36px, 6vw, 84px);
    padding-bottom: 4px;
    align-items: center;
  }

  .home-page .hero-journey .hero-copy h1 {
    font-size: clamp(2.25rem, 3.05vw, 3.2rem);
    line-height: 1.04;
  }

  .home-page .hero-journey .hero-copy .intro-copy {
    max-width: 390px;
    font-size: 0.84rem;
    line-height: 1.42;
  }

  .home-page .hero-journey .hero-explore {
    margin-top: 10px;
  }
}

@media (min-width: 761px) and (max-height: 700px) {
  .home-page .hero-journey .hero-copy h1 {
    font-size: clamp(2rem, 2.75vw, 2.75rem);
  }

  .home-page .hero-journey .hero-copy .intro-copy {
    font-size: 0.78rem;
  }

  .home-page .hero-journey .hero-explore {
    display: none;
  }
}

/* Operator profile */
.identity-section {
  width: 100%;
  padding: clamp(76px, 9vw, 132px) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(circle at 1px 1px, rgba(9, 9, 9, 0.09) 0.75px, transparent 0.8px) 0 0 / 11px 11px,
    #fbfbf8;
}

.identity-shell {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: minmax(270px, 0.72fr) minmax(430px, 1.28fr);
  gap: 54px 74px;
}

.identity-heading {
  align-self: start;
}

.identity-heading h2 {
  max-width: 11ch;
  margin: 17px 0 0;
  font-size: clamp(2.45rem, 4.3vw, 4.65rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.identity-position {
  max-width: 34ch;
  margin: 28px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.65;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.identity-thesis {
  align-self: end;
  max-width: 760px;
  padding-top: 36px;
}

.identity-thesis > p {
  max-width: 55ch;
  margin: 20px 0 0;
  color: var(--secondary);
  font-size: clamp(0.96rem, 1.25vw, 1.17rem);
  line-height: 1.62;
}

.identity-thesis .identity-lead {
  max-width: 24ch;
  margin-top: 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 2.8vw, 3rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.045em;
}

.identity-lead mark {
  padding: 0 0.04em;
  background: linear-gradient(transparent 68%, #fff27a 68% 96%, transparent 96%);
}

.identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.identity-actions a {
  display: inline-flex;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 650;
}

.identity-actions a:first-child {
  border-color: var(--ink);
}

.identity-actions a:hover {
  background: #fff27a;
}

.identity-capabilities {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ink);
}

.identity-capabilities article {
  display: grid;
  min-height: 146px;
  padding: 25px 0;
  border-bottom: 1px solid var(--hairline-strong);
  grid-template-columns: 68px minmax(0, 1fr) minmax(210px, 0.42fr);
  gap: 24px;
  align-items: center;
  transition: padding 180ms ease, background 180ms ease;
}

.identity-capabilities article:hover {
  padding-right: 18px;
  padding-left: 18px;
  background: rgba(255, 242, 122, 0.13);
}

.identity-capabilities article > span {
  font: 700 0.68rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.identity-capabilities small {
  color: var(--muted);
  font: 700 0.55rem/1.4 var(--mono);
  letter-spacing: 0.075em;
}

.identity-capabilities h3 {
  margin: 7px 0 0;
  font-size: clamp(1.2rem, 1.65vw, 1.65rem);
  font-weight: 550;
  letter-spacing: -0.035em;
}

.identity-capabilities p {
  max-width: 62ch;
  margin: 8px 0 0;
  color: var(--secondary);
  font-size: 0.78rem;
  line-height: 1.55;
}

.identity-capabilities article > strong {
  justify-self: end;
  padding: 6px 8px;
  background: linear-gradient(transparent 13%, #fff27a 13% 88%, transparent 88%);
  font: 700 0.59rem/1.35 var(--mono);
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: uppercase;
}

.identity-foot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.identity-foot p {
  display: grid;
  margin: 0;
  color: var(--secondary);
  font-size: 0.75rem;
  line-height: 1.55;
  grid-template-columns: 76px 1fr;
  gap: 12px;
}

.identity-foot span {
  color: var(--ink);
  font: 700 0.56rem/1.5 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Shared evidence-scene frame */
.artifact-scene,
.evidence-scene {
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(9, 9, 9, 0.085) 0.7px, transparent 0.8px) 0 0 / 10px 10px,
    #f8f8f4;
}

.artifact-scene figcaption,
.evidence-scene figcaption {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
}

.artifact-scene small,
.evidence-scene small,
.artifact-scene span,
.evidence-scene span {
  font-family: var(--mono);
}

/* YelloSKYE: a real founder's office desk, not another systems diagram. */
.office-scene {
  position: relative;
  min-height: 490px;
  padding: 26px;
}

.office-browser,
.office-message,
.office-mis,
.office-hiring,
.office-platform {
  position: absolute;
  border: 1px solid rgba(9, 9, 9, 0.28);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(9, 9, 9, 0.055);
}

.office-browser {
  top: 34px;
  left: 6%;
  width: 54%;
  min-height: 204px;
  padding: 42px 28px 22px;
  transform: rotate(-1.3deg);
}

.browser-bar {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 28px;
  padding-left: 10px;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
  gap: 5px;
}

.browser-bar i {
  width: 6px;
  height: 6px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.scene-window-label {
  display: block;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.office-browser strong {
  display: block;
  max-width: 13ch;
  font-size: clamp(1.35rem, 2.2vw, 2.25rem);
  font-weight: 550;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.office-browser mark {
  background: linear-gradient(transparent 65%, #fff27a 65% 95%, transparent 95%);
}

.office-browser p {
  margin: 19px 0 0;
  color: var(--muted);
  font: 650 0.48rem/1.5 var(--mono);
  letter-spacing: 0.045em;
}

.office-message {
  top: 28px;
  right: 4%;
  width: 31%;
  min-height: 150px;
  padding: 19px;
  transform: rotate(1.5deg);
}

.office-message small,
.office-mis small,
.office-hiring small,
.office-platform small {
  color: var(--muted);
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.office-message strong {
  display: block;
  margin-top: 22px;
  font-size: 1rem;
  line-height: 1.18;
}

.office-message span {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.43rem;
  letter-spacing: 0.06em;
}

.office-mis {
  bottom: 35px;
  left: 4%;
  width: 55%;
  min-height: 202px;
  transform: rotate(0.8deg);
}

.office-mis > div {
  display: flex;
  min-height: 45px;
  padding: 0 15px;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
  justify-content: space-between;
}

.office-mis b {
  font-size: 0.66rem;
}

.office-mis ul {
  margin: 0;
  padding: 6px 15px 12px;
  list-style: none;
}

.office-mis li {
  display: grid;
  min-height: 34px;
  border-bottom: 1px solid var(--hairline);
  grid-template-columns: 1fr auto 9px;
  gap: 12px;
  align-items: center;
  font-size: 0.58rem;
}

.office-mis li span {
  font-family: Inter, sans-serif;
  font-weight: 600;
}

.office-mis li em {
  color: var(--muted);
  font: 400 0.48rem/1 var(--mono);
}

.office-mis li i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.office-mis li i.is-good {
  background: #fff27a;
}

.office-hiring {
  right: 5%;
  bottom: 34px;
  display: grid;
  width: 31%;
  min-height: 116px;
  padding: 15px;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  transform: rotate(-1.1deg);
}

.office-hiring small {
  grid-column: 1 / -1;
}

.office-hiring div {
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.office-hiring i {
  display: block;
  font: 600 1.4rem/1 var(--serif);
}

.office-hiring span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.43rem;
  text-transform: uppercase;
}

.office-platform {
  right: 5%;
  bottom: 168px;
  display: flex;
  width: 34%;
  min-height: 78px;
  padding: 13px;
  flex-wrap: wrap;
  gap: 7px;
  transform: rotate(1deg);
}

.office-platform small {
  flex-basis: 100%;
}

.office-platform span {
  padding: 4px 6px;
  border: 1px solid var(--hairline-strong);
  font-size: 0.4rem;
}

.office-note {
  position: absolute;
  z-index: 8;
  right: 7%;
  bottom: 10px;
  padding: 3px 6px;
  background: #fff27a;
  font: 600 0.48rem/1.3 Caveat, cursive !important;
  transform: rotate(-1deg);
}

/* Rayden: live account, message, and reply artifacts. */
.outbound-scene {
  display: grid;
  min-height: 250px;
  padding: 16px;
  grid-template-columns: 0.95fr 1.15fr;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.outbound-list,
.outbound-message,
.outbound-inbox,
.outbound-meeting {
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.96);
}

.outbound-list {
  grid-row: 1 / 3;
  padding: 12px;
}

.outbound-scene small {
  color: var(--muted);
  font-size: 0.43rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.outbound-list p {
  display: grid;
  min-height: 34px;
  margin: 9px 0 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--hairline);
  grid-template-columns: 7px 1fr auto;
  gap: 7px;
  align-items: center;
  font-size: 0.5rem;
}

.outbound-list p i {
  width: 6px;
  height: 6px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #fff27a;
}

.outbound-list p b {
  color: var(--muted);
  font: 700 0.39rem/1 var(--mono);
}

.outbound-list p.is-muted {
  opacity: 0.42;
}

.outbound-message {
  padding: 11px 13px;
  transform: rotate(-0.7deg);
}

.outbound-message p {
  margin: 10px 0;
  font-size: 0.54rem;
  font-weight: 600;
  line-height: 1.42;
}

.outbound-message > span {
  padding: 2px 4px;
  background: #fff27a;
  font-size: 0.39rem;
}

.outbound-inbox {
  padding: 10px 12px;
}

.outbound-inbox p {
  display: flex;
  margin: 7px 0 0;
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
  justify-content: space-between;
  gap: 8px;
  font-size: 0.47rem;
}

.outbound-inbox p b {
  color: var(--muted);
  font: 400 0.38rem/1 var(--mono);
}

.outbound-meeting {
  position: absolute;
  right: 13px;
  bottom: 12px;
  display: none;
}

/* Hide & Sneak: the actual buyer pause and product decision. */
.retail-scene {
  position: relative;
  min-height: 252px;
  padding: 15px;
}

.retail-shelf {
  position: absolute;
  top: 18px;
  left: 4%;
  width: 92%;
  height: 64px;
  border-bottom: 1px solid var(--ink);
}

.shoe {
  position: absolute;
  bottom: 5px;
  width: 54px;
  height: 20px;
  border: 1px solid var(--ink);
  border-radius: 80% 28% 24% 35%;
  background: #fff;
  transform: skewX(-13deg);
}

.shoe::after {
  position: absolute;
  right: -7px;
  bottom: -4px;
  width: 62px;
  height: 4px;
  border: 1px solid var(--ink);
  background: #fff;
  content: "";
}

.shoe--one { left: 8%; }
.shoe--two { left: 42%; background: #fff27a; }
.shoe--three { right: 8%; }

.retail-question,
.retail-diagnosis,
.retail-receipt {
  position: absolute;
  bottom: 14px;
  min-height: 136px;
  padding: 12px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.96);
}

.retail-question {
  left: 3%;
  width: 31%;
  transform: rotate(-1.2deg);
}

.retail-question small,
.retail-diagnosis small,
.retail-receipt small {
  color: var(--muted);
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.retail-question p {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 0.73rem;
  font-style: italic;
  line-height: 1.35;
}

.retail-diagnosis {
  left: 35%;
  width: 37%;
}

.retail-diagnosis p {
  display: flex;
  margin: 9px 0 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--hairline);
  justify-content: space-between;
  gap: 7px;
  font-size: 0.44rem;
}

.retail-diagnosis p span {
  color: var(--muted);
}

.retail-receipt {
  right: 3%;
  width: 24%;
  text-align: center;
  transform: rotate(1deg);
}

.retail-receipt strong {
  display: block;
  margin-top: 20px;
  font-family: var(--serif);
  font-size: 1.55rem;
}

.retail-receipt span {
  display: block;
  margin-top: 15px;
  padding: 4px;
  background: #fff27a;
  font-size: 0.36rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Project evidence scenes */
.evidence-scene {
  min-height: 230px;
}

.koel-evidence {
  display: grid;
  min-height: 196px;
  padding: 13px;
  grid-template-columns: 0.9fr 1.15fr 1.15fr 0.9fr;
  gap: 9px;
}

.koel-map,
.koel-notes,
.koel-clusters,
.koel-recommendation {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.95);
}

.koel-evidence small,
.history-evidence small,
.conversion-evidence small {
  color: var(--muted);
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.055em;
}

.koel-map svg {
  display: block;
  width: 100%;
  height: 112px;
  margin-top: 3px;
  overflow: visible;
}

.koel-map svg path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
}

.koel-map svg circle {
  fill: #fff27a;
  stroke: var(--ink);
  stroke-width: 1.3;
}

.koel-map > span {
  display: block;
  color: var(--muted);
  font-size: 0.36rem;
  line-height: 1.4;
}

.koel-notes {
  transform: rotate(-0.7deg);
}

.koel-notes p {
  margin: 20px 0;
  font-family: var(--serif);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.35;
}

.koel-notes span {
  display: inline-block;
  margin: 3px 2px 0 0;
  padding: 3px 4px;
  border: 1px solid var(--hairline-strong);
  font-size: 0.35rem;
}

.koel-clusters {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

.koel-clusters small {
  flex-basis: 100%;
  margin-bottom: 8px;
}

.koel-clusters i {
  padding: 7px 8px;
  border: 1px solid var(--hairline-strong);
  background: #fff;
  font-family: Caveat, cursive;
  font-size: 0.85rem;
  font-style: normal;
  transform: rotate(var(--r, -1deg));
}

.koel-clusters i:nth-of-type(2n) {
  --r: 2deg;
  background: #fff27a;
}

.koel-recommendation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transform: rotate(0.8deg);
}

.koel-recommendation strong {
  margin-top: 18px;
  padding: 7px 4px;
  border: 1px solid var(--ink);
  background: #fff27a;
  font-size: 0.68rem;
}

.koel-recommendation p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.46rem;
  line-height: 1.4;
}

.history-evidence {
  position: relative;
  min-height: 196px;
  padding: 13px;
}

.history-map {
  position: absolute;
  inset: 14px 24% 14px 13px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.7);
}

.history-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.history-map path {
  fill: none;
  stroke: rgba(9, 9, 9, 0.22);
  stroke-width: 1;
}

.history-map i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #fff27a;
  transform: translate(-50%, -50%);
}

.history-route {
  position: absolute;
  left: 12px;
  bottom: 9px;
  padding: 3px 5px;
  background: #fff;
  font-size: 0.39rem;
  font-weight: 700;
}

.history-partners {
  position: absolute;
  right: 13px;
  top: 14px;
  display: grid;
  width: 21%;
  gap: 8px;
}

.history-partners p,
.history-ticket {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--hairline-strong);
  background: #fff;
}

.history-partners strong,
.history-ticket strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.history-partners span,
.history-ticket span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.39rem;
  text-transform: uppercase;
}

.history-ticket {
  position: absolute;
  right: 13px;
  bottom: 14px;
  width: 21%;
  background: #fff27a;
  text-align: center;
}

.history-ticket strong {
  margin-top: 7px;
}

.conversion-evidence {
  display: grid;
  min-height: 196px;
  padding: 13px;
  grid-template-columns: 0.7fr 1.1fr 1.2fr;
  gap: 9px;
}

.conversion-leads,
.conversion-calls,
.conversion-log {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.96);
}

.conversion-leads {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.conversion-leads strong {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 2.1rem;
}

.conversion-leads span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.4rem;
}

.conversion-calls p {
  display: grid;
  min-height: 36px;
  margin: 8px 0 0;
  border-bottom: 1px solid var(--hairline);
  grid-template-columns: 19px 1fr auto;
  gap: 7px;
  align-items: center;
  font-size: 0.45rem;
}

.conversion-calls p i {
  display: grid;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  place-items: center;
  font: 700 0.38rem/1 var(--mono);
}

.conversion-calls p:first-of-type i {
  background: #fff27a;
}

.conversion-calls p b {
  color: var(--muted);
  font: 700 0.34rem/1 var(--mono);
}

.conversion-log {
  position: relative;
  display: flex;
  padding-top: 38px;
  align-items: flex-end;
  gap: 7px;
}

.conversion-log small {
  position: absolute;
  top: 12px;
  left: 12px;
}

.conversion-log > span {
  display: block;
  width: 12%;
  height: var(--h);
  min-height: 10px;
  border: 1px solid var(--ink);
  border-bottom: 0;
  background: #fff;
}

.conversion-log > span.is-final {
  background: #fff27a;
}

.conversion-log > b {
  position: absolute;
  right: 10px;
  top: 8px;
  font-family: var(--serif);
  font-size: 1rem;
}

.conversion-log mark {
  padding: 0 3px;
  background: #fff27a;
}

/* Section rhythm and card polish */
.home-page > .section,
.home-page > .identity-section {
  scroll-margin-top: 84px;
}

#work,
#projects,
#studio,
#writing {
  padding-top: clamp(82px, 9vw, 128px);
  padding-bottom: clamp(82px, 9vw, 128px);
}

#work .sec-head,
#projects .sec-head,
#studio .sec-head,
#writing .sec-head {
  margin-bottom: 38px;
}

.work-artifact,
.ledger-visual {
  border-color: var(--hairline-strong);
}

@media (max-width: 1100px) {
  .identity-shell {
    grid-template-columns: minmax(240px, 0.65fr) minmax(380px, 1.35fr);
    gap: 44px;
  }

  .identity-capabilities article {
    grid-template-columns: 52px minmax(0, 1fr) minmax(190px, 0.42fr);
  }

  .office-scene {
    min-height: 430px;
  }

  .office-browser {
    min-height: 180px;
  }

  .office-mis {
    min-height: 178px;
  }

  .koel-evidence {
    grid-template-columns: 0.9fr 1.1fr 1.1fr;
  }

  .koel-recommendation {
    display: none;
  }
}

@media (max-width: 860px) {
  .identity-section {
    padding: 72px 0;
  }

  .identity-shell {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .identity-heading h2 {
    max-width: 13ch;
  }

  .identity-thesis {
    max-width: none;
    padding-top: 0;
  }

  .identity-capabilities {
    grid-column: 1;
  }

  .identity-capabilities article {
    grid-template-columns: 44px 1fr;
  }

  .identity-capabilities article > strong {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .identity-foot {
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .office-scene {
    min-height: 470px;
  }

  .outbound-scene {
    min-height: 220px;
  }

  .koel-evidence {
    grid-template-columns: 1fr 1fr;
  }

  .koel-clusters {
    display: none;
  }

  .history-map {
    right: 30%;
  }

  .history-partners,
  .history-ticket {
    width: 26%;
  }
}

@media (max-width: 620px) {
  .identity-heading h2 {
    font-size: 2.7rem;
  }

  .identity-position {
    margin-top: 20px;
  }

  .identity-thesis .identity-lead {
    font-size: 1.85rem;
  }

  .identity-capabilities article {
    padding: 22px 0;
    grid-template-columns: 34px 1fr;
    gap: 12px;
  }

  .identity-capabilities article:hover {
    padding-right: 0;
    padding-left: 0;
  }

  .identity-foot p {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .office-scene {
    min-height: 520px;
    padding: 12px;
  }

  .office-browser {
    top: 18px;
    left: 4%;
    width: 92%;
    min-height: 170px;
  }

  .office-message {
    top: 205px;
    left: 4%;
    right: auto;
    width: 43%;
    min-height: 125px;
  }

  .office-platform {
    top: 205px;
    right: 4%;
    bottom: auto;
    width: 44%;
    min-height: 125px;
  }

  .office-mis {
    left: 4%;
    bottom: 28px;
    width: 60%;
    min-height: 164px;
  }

  .office-hiring {
    right: 4%;
    bottom: 28px;
    width: 30%;
    min-height: 164px;
    grid-template-columns: 1fr;
  }

  .office-note {
    display: none;
  }

  .outbound-scene {
    grid-template-columns: 1fr;
  }

  .outbound-list {
    display: none;
  }

  .retail-question {
    display: none;
  }

  .retail-diagnosis {
    left: 3%;
    width: 59%;
  }

  .retail-receipt {
    width: 31%;
  }

  .koel-evidence {
    grid-template-columns: 1fr 1fr;
  }

  .koel-map > span,
  .koel-clusters,
  .koel-recommendation {
    display: none;
  }

  .history-map {
    right: 37%;
  }

  .history-partners,
  .history-ticket {
    width: 33%;
  }

  .conversion-evidence {
    grid-template-columns: 0.7fr 1.3fr;
  }

  .conversion-calls {
    display: none;
  }
}

/* Short-card evidence scenes must fit the established two-up bento height. */
@media (min-width: 901px) {
  .work-bento-card--rayden .outbound-scene,
  .work-bento-card--hide .retail-scene {
    min-height: 118px;
    height: 118px;
    flex: 1;
  }

  .work-bento-card--rayden .outbound-scene {
    padding: 7px;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: 1fr;
    gap: 7px;
  }

  .work-bento-card--rayden .outbound-list {
    grid-row: auto;
    padding: 7px;
  }

  .work-bento-card--rayden .outbound-list p {
    min-height: 18px;
    margin-top: 3px;
    padding-bottom: 2px;
    font-size: 0.4rem;
  }

  .work-bento-card--rayden .outbound-list p:nth-of-type(n+4),
  .work-bento-card--rayden .outbound-inbox {
    display: none;
  }

  .work-bento-card--rayden .outbound-message {
    padding: 7px 9px;
  }

  .work-bento-card--rayden .outbound-message p {
    margin: 7px 0;
    font-size: 0.44rem;
  }

  .work-bento-card--hide .retail-scene {
    padding: 7px;
  }

  .work-bento-card--hide .retail-shelf {
    top: 5px;
    height: 36px;
  }

  .work-bento-card--hide .shoe {
    width: 43px;
    height: 14px;
  }

  .work-bento-card--hide .shoe::after {
    width: 49px;
  }

  .work-bento-card--hide .retail-question {
    display: none;
  }

  .work-bento-card--hide .retail-diagnosis,
  .work-bento-card--hide .retail-receipt {
    bottom: 5px;
    min-height: 69px;
    padding: 7px;
  }

  .work-bento-card--hide .retail-diagnosis {
    left: 3%;
    width: 60%;
  }

  .work-bento-card--hide .retail-diagnosis p {
    margin-top: 4px;
    padding-bottom: 2px;
    font-size: 0.36rem;
  }

  .work-bento-card--hide .retail-receipt {
    width: 31%;
  }

  .work-bento-card--hide .retail-receipt strong {
    margin-top: 8px;
    font-size: 1rem;
  }

  .work-bento-card--hide .retail-receipt span {
    margin-top: 5px;
    padding: 2px;
    font-size: 0.29rem;
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  .home-page .hero-journey .journey-stop:nth-child(5) {
    --label-top: -36px;
  }

  .home-page .hero-journey .journey-stop:nth-child(5) .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(5):hover .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(5):focus-visible .journey-label {
    transform: translateX(-50%) translateX(-5.5vw);
  }
}

.identity-section {
  padding-bottom: clamp(48px, 5.5vw, 76px);
}

#work {
  padding-top: clamp(64px, 6.5vw, 92px);
}

/* Hero callouts: one aligned scientific annotation system. */
@media (min-width: 761px) {
  .home-page .hero-journey .journey-stop {
    --label-top: -18vw;
    z-index: 4;
  }

  .home-page .hero-journey .journey-node {
    width: 13px;
    height: 13px;
    border-width: 1px;
    color: transparent;
    font-size: 0;
    box-shadow: 0 0 0 4px rgba(255, 242, 122, 0.22);
  }

  .home-page .hero-journey .journey-label,
  .home-page .hero-journey .journey-stop.is-active .journey-label,
  .home-page .hero-journey .journey-stop:hover .journey-label,
  .home-page .hero-journey .journey-stop:focus-visible .journey-label {
    top: var(--label-top);
    right: auto;
    bottom: auto;
    left: 50%;
    display: grid;
    width: 196px;
    min-width: 0;
    padding: 9px 10px 10px 36px;
    border: 1px solid rgba(9, 9, 9, 0.2);
    border-top-color: #090909;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 22px rgba(9, 9, 9, 0.055);
    gap: 1px;
    text-align: left;
    transform: translateX(-50%);
  }

  .home-page .hero-journey .journey-label::before {
    top: 100%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 1px;
    height: calc(0px - var(--label-top) - 62px);
    background: rgba(9, 9, 9, 0.42);
    transform: none;
  }

  .home-page .hero-journey .journey-label::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 9px;
    display: grid !important;
    width: 19px;
    height: 19px;
    border-color: #090909;
    background: #fff27a;
    color: #090909;
    content: attr(data-index);
    font: 700 0.42rem/1 "Space Mono", ui-monospace, monospace;
    place-items: center;
    transform: translateY(-50%);
  }

  .home-page .hero-journey .journey-label small {
    font-size: 0.47rem;
    letter-spacing: 0.07em;
  }

  .home-page .hero-journey .journey-label strong {
    font-size: 0.72rem;
    line-height: 1.15;
  }

  .home-page .hero-journey .journey-label em {
    margin-top: 3px;
    background: none;
    color: #65655f;
    font-size: 0.44rem;
    line-height: 1.25;
    letter-spacing: 0.025em;
  }

  .home-page .hero-journey .journey-stop:nth-child(1) {
    --label-top: clamp(-280px, -12vw, -150px);
  }

  .home-page .hero-journey .journey-stop:nth-child(2) {
    --label-top: clamp(-220px, -9vw, -120px);
  }

  .home-page .hero-journey .journey-stop:nth-child(3) {
    --label-top: clamp(-190px, -7vw, -95px);
  }

  .home-page .hero-journey .journey-stop:nth-child(4) {
    --label-top: clamp(-390px, -17vw, -215px);
  }

  .home-page .hero-journey .journey-stop:nth-child(5) {
    --label-top: clamp(-240px, -9vw, -85px);
  }

  .home-page .hero-journey .journey-stop:hover .journey-node,
  .home-page .hero-journey .journey-stop:focus-visible .journey-node,
  .home-page .hero-journey .journey-stop.is-active .journey-node {
    box-shadow: 0 0 0 6px rgba(255, 242, 122, 0.3);
    transform: translate(-50%, -50%) scale(1.08);
  }

  .home-page .hero-journey .journey-stop:hover .journey-label,
  .home-page .hero-journey .journey-stop:focus-visible .journey-label {
    border-top-color: #fff27a;
    transform: translateX(-50%) translateY(-2px);
  }
}

/* Remove legacy connector geometry and enforce the new callout coordinates. */
@media (min-width: 761px) {
  .home-page .hero-journey .journey-stop::before {
    display: none !important;
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(n):hover .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(n):focus-visible .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(n).is-active .journey-label {
    top: var(--label-top);
    right: auto;
    bottom: auto;
    left: 50%;
    text-align: left;
    transform: translateX(-50%);
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label::before {
    top: 100%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 1px;
    height: calc(0px - var(--label-top) - 62px);
    background: rgba(9, 9, 9, 0.42);
    transform: none;
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 9px;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
  }

  .home-page .hero-journey .journey-stop:nth-child(n):hover .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(n):focus-visible .journey-label {
    transform: translateX(-50%) translateY(-2px);
  }
}

/* Handwritten field-note annotations that belong to the illustration. */
@media (min-width: 761px) {
  .home-page .hero-journey .journey-annotation-lines {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .home-page .hero-journey .journey-annotation-lines path {
    fill: none;
    stroke: rgba(9, 9, 9, 0.46);
    stroke-width: 1.05;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .home-page .hero-journey .journey-label,
  .home-page .hero-journey .journey-stop.is-active .journey-label,
  .home-page .hero-journey .journey-stop:hover .journey-label,
  .home-page .hero-journey .journey-stop:focus-visible .journey-label {
    width: 176px;
    padding: 0 0 7px 29px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 0;
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label::before {
    display: none;
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label::after {
    top: 7px;
    left: 0;
    width: 22px;
    height: 22px;
    border: 1.25px solid #090909;
    border-radius: 48% 52% 45% 55%;
    background: #fff27a;
    font: 600 0.72rem/1 Caveat, cursive;
    transform: rotate(-7deg);
  }

  .home-page .hero-journey .journey-stop:nth-child(2n) .journey-label::after {
    transform: rotate(6deg);
  }

  .home-page .hero-journey .journey-label small {
    color: #66665f;
    font: 700 0.43rem/1.2 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .home-page .hero-journey .journey-label strong {
    display: inline;
    width: max-content;
    background: linear-gradient(transparent 65%, rgba(255, 242, 122, 0.86) 65% 91%, transparent 91%);
    color: #090909;
    font: 600 1.16rem/1.05 Caveat, cursive;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .home-page .hero-journey .journey-label em {
    margin-top: 4px;
    color: #4f4f49;
    font: 700 0.42rem/1.3 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  .home-page .hero-journey .journey-node {
    width: 10px;
    height: 10px;
    border-color: rgba(9, 9, 9, 0.75);
    background: #fff27a;
    box-shadow: 0 0 0 3px rgba(255, 242, 122, 0.18);
  }

  .home-page .hero-journey .journey-stop:hover .journey-label strong,
  .home-page .hero-journey .journey-stop:focus-visible .journey-label strong {
    background: linear-gradient(transparent 54%, #fff27a 54% 94%, transparent 94%);
  }
}

/* Join each handwritten note directly to its curved annotation thread. */
@media (min-width: 761px) {
  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label::before {
    position: absolute;
    top: 100%;
    left: 50%;
    display: block;
    width: 1px;
    height: var(--note-tail);
    border: 0;
    background: rgba(9, 9, 9, 0.46);
    content: "";
    transform: translateX(-50%);
  }

  .home-page .hero-journey .journey-stop:nth-child(1) {
    --note-tail: clamp(32px, 3vw, 62px);
  }

  .home-page .hero-journey .journey-stop:nth-child(2) {
    --note-tail: clamp(27px, 2.55vw, 52px);
  }

  .home-page .hero-journey .journey-stop:nth-child(3) {
    --note-tail: clamp(25px, 2.4vw, 49px);
  }

  .home-page .hero-journey .journey-stop:nth-child(4) {
    --note-tail: clamp(28px, 2.6vw, 53px);
  }

  .home-page .hero-journey .journey-stop:nth-child(5) {
    --note-tail: clamp(17px, 1.6vw, 33px);
  }

  .home-page .hero-journey .journey-stop:nth-child(3) .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(3):hover .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(3):focus-visible .journey-label {
    transform: translateX(-50%) translateX(-2.5vw);
  }

  .home-page .hero-journey .journey-stop:nth-child(4) .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(4):hover .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(4):focus-visible .journey-label {
    transform: translateX(-50%) translateX(-4vw);
  }

  .home-page .hero-journey .journey-stop:nth-child(5) .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(5):hover .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(5):focus-visible .journey-label {
    transform: translateX(-50%) translateX(-3vw);
  }
}

/* Keep the final note below the hero copy, with a short, readable connection. */
@media (min-width: 761px) {
  .home-page .hero-journey .journey-stop:nth-child(5) {
    --label-top: -94px;
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  .home-page .hero-journey .journey-stop:nth-child(5) {
    --label-top: -46px;
  }

  .home-page .hero-journey .journey-stop:nth-child(5) .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(5):hover .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(5):focus-visible .journey-label {
    transform: translateX(-50%) translateX(-5.5vw);
  }
}

/* Tighter editorial rhythm between the homepage chapters. */
@media (min-width: 761px) {
  #work {
    padding-bottom: clamp(62px, 5vw, 76px);
  }

  #projects,
  #studio,
  #writing {
    padding-top: clamp(62px, 5vw, 76px);
    padding-bottom: clamp(62px, 5vw, 76px);
  }
}

@media (min-width: 1101px) {
  .identity-capabilities article > strong {
    white-space: nowrap;
  }
}

/* Refined center pill: present, but quiet enough to support the hero. */
@media (min-width: 761px) {
  .site-header .nav {
    min-height: 52px;
    padding: 6px 8px;
    border-color: rgba(9, 9, 9, 0.18);
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
      0 10px 26px rgba(9, 9, 9, 0.07),
      inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    gap: 3px;
  }

  .site-header .nav::before,
  .site-header .nav::after {
    display: none;
  }

  .site-header .nav a {
    min-width: 78px;
    padding: 11px 15px 12px;
    color: rgba(9, 9, 9, 0.68);
    font-size: 0.82rem;
    font-weight: 600;
  }

  .site-header .nav a:hover {
    background: rgba(255, 242, 122, 0.38);
    color: #090909;
    transform: translateY(-1px);
  }

  .site-header .nav a[aria-current="page"] {
    background: #fff27a;
    color: #090909;
    box-shadow: inset 0 0 0 1px rgba(9, 9, 9, 0.1);
  }
}

/* Final cascade locks for the craft pass. */
.home-page > .section,
.home-page > .identity-section,
.story-page .story-chapter,
.story-page section[id],
.posting,
.showcase-file {
  scroll-margin-top: 0;
}

#profile,
#work,
#projects,
#studio,
#writing,
#contact {
  scroll-margin-top: 0;
}

.contact-page .contact-pill[aria-current="page"] {
  background: #fffef0;
  color: #090909;
}

.button.primary,
.contact-page .compact-hero .button.primary {
  box-shadow: none;
}

.identity-capabilities article {
  transition:
    background-color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.identity-capabilities article:hover {
  padding: 25px 0;
  transform: translateX(8px);
}

@media (min-width: 981px) {
  .story-hero-visual {
    height: clamp(350px, 48vh, 460px);
    min-height: 0;
  }

  .story-hero-visual > img {
    width: 100%;
    height: 100%;
    flex: 1 1 0;
  }
}

/* ==========================================================================
   2026-07-27 VIEWPORT AND CANVAS REPAIR
   Keep the complete operating landscape visible and make every preview frame
   behave as the canvas, not as an oversized mat around a smaller diagram.
   ========================================================================== */

@media (min-width: 761px) {
  .home-page .hero-journey {
    height: calc(100svh - 94px);
    min-height: 0;
    max-height: 1040px;
    padding-top: clamp(10px, 1.5svh, 18px);
    overflow: clip;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .home-page .hero-journey .hero-copy {
    top: 0;
    padding-bottom: clamp(4px, 0.8svh, 9px);
  }

  .home-page .hero-journey .map-shell,
  .home-page .hero-journey .journey-frame,
  .home-page .hero-journey .journey-canvas,
  .home-page .hero-journey .landscape-viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .home-page .hero-journey .landscape-viewport {
    overflow: hidden;
    align-items: flex-end;
  }

  .home-page .hero-journey .journey-map {
    width: auto;
    height: 100%;
    max-width: 100vw;
    max-height: calc(100% - clamp(10px, 1.8svh, 18px));
    margin-bottom: clamp(10px, 1.8svh, 18px);
    aspect-ratio: 1672 / 941;
    overflow: visible;
    transform: none;
  }

  .home-page .hero-journey .operator-landscape {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  /* One short field-note connection per room. No detached diagram lines. */
  .home-page .hero-journey .journey-annotation-lines {
    display: none;
  }

  .home-page .hero-journey .journey-stop {
    --note-shift: -50%;
    width: 28px;
    height: 28px;
  }

  .home-page .hero-journey .journey-stop:nth-child(1) {
    --note-shift: -28%;
  }

  .home-page .hero-journey .journey-stop:nth-child(5) {
    --note-shift: -76%;
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(n):hover .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(n):focus-visible .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(n).is-active .journey-label {
    top: auto;
    right: auto;
    bottom: 47px;
    left: 50%;
    width: max-content;
    min-width: 0;
    max-width: 176px;
    padding: 5px 10px 6px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.96) 0 56%, rgba(255, 255, 255, 0.72) 68%, transparent 79%);
    box-shadow: none;
    text-align: center;
    transform: translateX(var(--note-shift));
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label::before {
    top: calc(100% + 5px);
    left: 50%;
    display: block;
    width: 1px;
    height: 31px;
    background: rgba(9, 9, 9, 0.48);
    content: "";
    transform: translateX(-50%);
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label::after {
    top: auto;
    right: -24px;
    bottom: 3px;
    left: auto;
    display: grid !important;
    width: 22px;
    height: 22px;
    border: 1.2px solid #090909;
    border-radius: 48% 52% 45% 55%;
    background: #fff27a;
    color: #090909;
    content: attr(data-index);
    font: 600 0.72rem/1 Caveat, cursive;
    place-items: center;
    transform: rotate(-6deg);
  }

  .home-page .hero-journey .journey-label small {
    font-size: 0.42rem;
    text-align: center;
    text-shadow: 0 0 5px #fff, 0 0 9px #fff;
  }

  .home-page .hero-journey .journey-label strong {
    display: block;
    margin-inline: auto;
    font-size: 1.04rem;
    text-shadow: 0 0 5px #fff, 0 0 9px #fff;
  }

  .home-page .hero-journey .journey-label em {
    display: block !important;
    margin-top: 2px;
    font-size: 0.4rem;
    text-align: center;
    text-shadow: 0 0 5px #fff, 0 0 9px #fff;
  }

  .home-page .hero-journey .journey-stop:nth-child(n):hover .journey-label,
  .home-page .hero-journey .journey-stop:nth-child(n):focus-visible .journey-label {
    transform: translateX(var(--note-shift)) translateY(-2px);
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .home-page .hero-journey {
    padding-top: 8px;
  }

  .home-page .hero-journey .hero-copy h1 {
    font-size: clamp(2.05rem, 2.8vw, 2.85rem);
  }

  .home-page .hero-journey .hero-copy .intro-copy {
    font-size: 0.79rem;
    line-height: 1.4;
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label {
    bottom: 41px;
  }

  .home-page .hero-journey .journey-stop:nth-child(n) .journey-label::before {
    height: 25px;
  }
}

@media (min-width: 761px) {
  .home-page .ledger-case {
    align-items: stretch;
  }

  .home-page .ledger-visual {
    display: grid;
    min-height: 292px;
    height: 100%;
    grid-template-rows: 38px minmax(0, 1fr);
  }

  .home-page .ledger-visual figcaption {
    min-height: 38px;
    padding: 0 14px;
  }

  .home-page .koel-evidence,
  .home-page .history-evidence,
  .home-page .conversion-evidence {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .home-page .koel-evidence {
    padding: 0;
    grid-template-columns: 0.9fr 1.1fr 1.1fr 0.9fr;
    gap: 0;
  }

  .home-page .koel-map,
  .home-page .koel-notes,
  .home-page .koel-clusters,
  .home-page .koel-recommendation {
    display: flex;
    min-height: 0;
    padding: 15px;
    border-width: 0 1px 0 0;
    flex-direction: column;
    justify-content: center;
  }

  .home-page .koel-recommendation {
    border-right: 0;
  }

  .home-page .koel-map svg {
    height: min(132px, 55%);
    flex: 1 1 auto;
  }

  .home-page .history-evidence {
    padding: 0;
  }

  .home-page .history-map {
    inset: 0 23% 0 0;
    border-width: 0 1px 0 0;
  }

  .home-page .history-partners {
    top: 0;
    right: 0;
    width: 23%;
    gap: 0;
  }

  .home-page .history-partners p,
  .home-page .history-ticket {
    border-width: 0 0 1px;
  }

  .home-page .history-ticket {
    right: 0;
    bottom: 0;
    width: 23%;
    border-width: 1px 0 0;
  }

  .home-page .conversion-evidence {
    padding: 0;
    gap: 0;
    grid-template-columns: 0.72fr 1.1fr 1.18fr;
  }

  .home-page .conversion-leads,
  .home-page .conversion-calls,
  .home-page .conversion-log {
    min-height: 0;
    padding: 16px;
    border-width: 0 1px 0 0;
  }

  .home-page .conversion-log {
    border-right: 0;
  }
}

/* ==========================================================================
   2026-07-27 PERSONAL PROFILE CHAPTER
   A person-led introduction with a portrait and a living stack of work images.
   The real photographs can replace the prepared slots without changing layout.
   ========================================================================== */

@media (min-width: 761px) {
  .home-page .hero-journey .map-shell {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .home-page .hero-journey .journey-map {
    width: min(100vw, calc((100svh - 94px - clamp(150px, 22svh, 230px)) * 1.7768331562));
    height: auto;
    max-width: 100vw;
    max-height: 100%;
  }
}

.profile-intro {
  position: relative;
  display: grid;
  min-height: calc(100svh - 94px);
  padding: clamp(30px, 4svh, 48px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(9, 9, 9, 0.055) 0.65px, transparent 0.75px) 0 0 / 10px 10px,
    #fff;
  align-items: center;
}

.profile-intro::before {
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  height: 1px;
  background: rgba(9, 9, 9, 0.18);
  content: "";
}

.profile-shell {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
  gap: clamp(54px, 7vw, 108px);
  align-items: center;
}

.profile-media {
  position: relative;
  height: clamp(470px, 61svh, 600px);
  min-width: 0;
}

.profile-portrait,
.profile-work-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.42);
  border-radius: 14px;
  background: #f4f4ef;
}

.profile-portrait {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 67%;
  height: 84%;
  box-shadow: 18px 22px 0 rgba(255, 242, 122, 0.62);
  transform: rotate(-1.1deg);
}

.profile-portrait > img,
.profile-work-card > img {
  display: block;
  width: 100%;
  height: calc(100% - 36px);
  object-fit: cover;
  filter: saturate(1.12) contrast(1.05) brightness(1.03);
}

.profile-portrait > img {
  filter: saturate(1.08) contrast(1.04) brightness(1.035);
  object-position: 50% 34%;
}

.profile-work-card > img {
  filter: saturate(1.24) contrast(1.06) brightness(1.035);
}

.profile-work-card--one > img {
  object-position: 50% 44%;
}

.profile-work-card--two > img {
  object-position: 52% 34%;
}

.profile-work-card--three > img {
  object-position: 50% 56%;
}

.profile-work-card--four > img {
  object-position: 47% 49%;
}

.profile-work-card--five > img {
  object-position: 54% 48%;
}

.profile-work-card > img {
  height: 100%;
}

.profile-photo-placeholder,
.profile-work-placeholder {
  position: relative;
  display: grid;
  height: calc(100% - 36px);
  overflow: hidden;
  background:
    linear-gradient(135deg, transparent 49.7%, rgba(9, 9, 9, 0.12) 49.8% 50.2%, transparent 50.3%),
    radial-gradient(circle at 72% 28%, #fff27a 0 6%, transparent 6.2%),
    #efefea;
  place-items: center;
}

.profile-photo-placeholder::before {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(9, 9, 9, 0.18);
  content: "";
}

.profile-photo-placeholder span {
  font: 600 clamp(4rem, 8vw, 7rem)/1 Caveat, cursive;
  letter-spacing: -0.08em;
  transform: rotate(-6deg);
}

.profile-photo-placeholder small {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font: 700 0.48rem/1.2 var(--mono);
  letter-spacing: 0.08em;
}

.profile-portrait figcaption,
.profile-work-card figcaption {
  display: flex;
  height: 36px;
  padding: 0 13px;
  border-top: 1px solid rgba(9, 9, 9, 0.2);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.65rem;
}

.profile-portrait figcaption span {
  font-weight: 700;
}

.profile-portrait figcaption small {
  color: #66665f;
  font: 700 0.43rem/1 var(--mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.profile-work-stack {
  position: absolute;
  z-index: 5;
  top: 27%;
  right: -1%;
  width: 58%;
  height: 54%;
  pointer-events: none;
}

.profile-work-card {
  position: absolute;
  inset: 0;
  box-shadow: 0 13px 30px rgba(9, 9, 9, 0.1);
  animation: profile-card-cycle 20s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.profile-work-card--one {
  animation-delay: 0s;
}

.profile-work-card--two {
  animation-delay: -4s;
}

.profile-work-card--three {
  animation-delay: -8s;
}

.profile-work-card--four {
  animation-delay: -12s;
}

.profile-work-card--five {
  animation-delay: -16s;
}

.profile-work-placeholder {
  background:
    linear-gradient(158deg, transparent 0 54%, rgba(9, 9, 9, 0.08) 54.2% 54.6%, transparent 54.8%),
    linear-gradient(28deg, transparent 0 48%, rgba(9, 9, 9, 0.1) 48.2% 48.6%, transparent 48.8%),
    #f7f7f2;
  place-items: end start;
  padding: 16px;
}

.profile-work-placeholder::after {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 13px;
  height: 13px;
  border: 1px solid #090909;
  border-radius: 50%;
  background: #fff27a;
  content: "";
}

.profile-work-placeholder span {
  position: absolute;
  top: 18px;
  left: 18px;
  font: 700 0.52rem/1 var(--mono);
}

.profile-work-placeholder strong {
  max-width: 100%;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  font-weight: 550;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.profile-work-card figcaption {
  padding: 0 10px;
  justify-content: flex-start;
  font: 700 0.39rem/1.2 var(--mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.profile-media-note {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 37ch;
  margin: 0;
  color: #66665f;
  font: 700 0.46rem/1.5 var(--mono);
  letter-spacing: 0.045em;
  text-align: right;
  text-transform: uppercase;
}

@keyframes profile-card-cycle {
  0%,
  16% {
    z-index: 5;
    opacity: 1;
    transform: translate(0, 0) rotate(1.4deg) scale(1);
  }

  20%,
  36% {
    z-index: 4;
    opacity: 1;
    transform: translate(-5px, 6px) rotate(-1.3deg) scale(0.985);
  }

  40%,
  56% {
    z-index: 3;
    opacity: 1;
    transform: translate(6px, 12px) rotate(1.5deg) scale(0.97);
  }

  60%,
  76% {
    z-index: 2;
    opacity: 1;
    transform: translate(-8px, 18px) rotate(-2.2deg) scale(0.955);
  }

  80%,
  96% {
    z-index: 1;
    opacity: 1;
    transform: translate(10px, 24px) rotate(2.8deg) scale(0.94);
  }

  100% {
    z-index: 5;
    opacity: 1;
    transform: translate(0, 0) rotate(1.4deg) scale(1);
  }
}

.profile-copy {
  max-width: 640px;
}

.profile-copy .catalog-line {
  margin-bottom: 20px;
}

.profile-copy h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(3rem, 4.3vw, 4.8rem);
  font-weight: 520;
  line-height: 0.93;
  letter-spacing: -0.04em;
}

.profile-copy h2 mark {
  padding: 0 0.03em;
  background: linear-gradient(transparent 66%, #fff27a 66% 94%, transparent 94%);
  color: inherit;
  white-space: nowrap;
}

.profile-lead {
  max-width: 26ch;
  margin: 24px 0 0;
  font-size: clamp(1.2rem, 1.65vw, 1.55rem);
  font-weight: 530;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.profile-summary {
  max-width: 63ch;
  margin: 14px 0 0;
  color: #4f4f4a;
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 1.56;
}

.profile-now {
  display: grid;
  margin-top: 20px;
  padding: 13px 0;
  border: solid rgba(9, 9, 9, 0.22);
  border-width: 1px 0;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.profile-now-label {
  font: 700 0.48rem/1.45 var(--mono);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.profile-now ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 5px;
  list-style: none;
}

.profile-now li {
  display: grid;
  grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.profile-now li span,
.profile-now li strong {
  color: #44443f;
  font-size: 0.73rem;
  line-height: 1.55;
}

.profile-now li span {
  color: #73736c;
}

.profile-now li strong {
  font-weight: 650;
}

.profile-copy blockquote {
  position: relative;
  max-width: 42ch;
  margin: 17px 0 0;
  padding-left: 22px;
  color: #2f2f2c;
  font-family: Caveat, cursive;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  transform: rotate(-0.7deg);
}

.profile-copy blockquote::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  background: #fff27a;
  content: "";
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 19px;
}

.profile-actions a {
  display: inline-flex;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #090909;
  border-radius: 999px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  color: #090909;
  font-size: 0.74rem;
  font-weight: 700;
}

.profile-actions a:hover {
  background: #fff27a;
}

/* Content remains visible without JavaScript. Motion enhances the transition. */
.profile-motion-ready .profile-intro .profile-media {
  opacity: 0.22;
  clip-path: inset(9% 8% 8% 8% round 18px);
  filter: blur(5px);
  transform: translateY(48px) scale(0.965);
  transition:
    opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 980ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 820ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-motion-ready .profile-intro .profile-copy > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 560ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-motion-ready .profile-intro.is-visible .profile-media {
  opacity: 1;
  clip-path: inset(0 round 0);
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.profile-motion-ready .profile-intro.is-visible .profile-copy > * {
  opacity: 1;
  transform: translateY(0);
}

.profile-motion-ready .profile-intro.is-visible .profile-copy > :nth-child(2) { transition-delay: 80ms; }
.profile-motion-ready .profile-intro.is-visible .profile-copy > :nth-child(3) { transition-delay: 150ms; }
.profile-motion-ready .profile-intro.is-visible .profile-copy > :nth-child(4) { transition-delay: 210ms; }
.profile-motion-ready .profile-intro.is-visible .profile-copy > :nth-child(5) { transition-delay: 270ms; }
.profile-motion-ready .profile-intro.is-visible .profile-copy > :nth-child(6) { transition-delay: 330ms; }
.profile-motion-ready .profile-intro.is-visible .profile-copy > :nth-child(7) { transition-delay: 390ms; }

@media (max-width: 1020px) {
  .profile-shell {
    grid-template-columns: minmax(0, 0.88fr) minmax(390px, 1.12fr);
    gap: 44px;
  }

  .profile-media {
    height: 560px;
  }

  .profile-portrait {
    width: 68%;
  }

  .profile-work-stack {
    width: 52%;
  }
}

@media (max-width: 760px) {
  .profile-intro {
    min-height: 0;
    padding: 52px 0 64px;
  }

  .profile-shell {
    display: flex;
    flex-direction: column;
    gap: 42px;
  }

  .profile-media {
    width: 100%;
    height: 510px;
    order: 2;
  }

  .profile-copy {
    order: 1;
  }

  .profile-copy h2 {
    font-size: clamp(3.2rem, 15vw, 4.6rem);
  }

  .profile-summary {
    font-size: 0.88rem;
  }

  .profile-now {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .profile-portrait {
    width: 64%;
    height: 87%;
  }

  .profile-work-stack {
    top: 21%;
    width: 49%;
    height: 58%;
  }

  .profile-media-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-motion-ready .profile-intro .profile-media,
  .profile-motion-ready .profile-intro .profile-copy > * {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
    transition: none;
  }

  .profile-work-card {
    animation: none;
  }

  .profile-work-card--one {
    z-index: 3;
  }

  .profile-work-card--two {
    z-index: 2;
    transform: translate(-14px, 17px) rotate(-3deg) scale(0.96);
  }

  .profile-work-card--three {
    z-index: 1;
    transform: translate(14px, 31px) rotate(3deg) scale(0.92);
  }
}

/* ==========================================================================
   2026-07-27 UNCROPPED HERO AND PROFILE FRAMES
   The hero copy now occupies the illustration's white sky instead of stealing
   a separate row. Portraits use fitted frames, so no face or working image is
   sacrificed to a breakpoint.
   ========================================================================== */

@media (min-width: 761px) {
  .home-page .hero-journey {
    position: relative;
    display: block;
    height: calc(100svh - 94px);
    padding: 0;
    /*
     * The map is deliberately viewport-wide while this section sits inside the
     * narrower site shell. Clipping here cut both ends of the illustration on
     * wide displays.
     */
    overflow: visible;
  }

  .home-page .hero-journey .hero-copy {
    position: absolute;
    z-index: 12;
    top: clamp(20px, 3.2svh, 38px);
    right: 0;
    left: 0;
    width: 100%;
    padding: 0;
  }

  .home-page .hero-journey .map-shell {
    position: absolute;
    inset: 0 auto 0 50%;
    width: 100vw;
    height: 100%;
    margin: 0;
    transform: translateX(-50%);
  }

  .home-page .hero-journey .journey-frame,
  .home-page .hero-journey .journey-canvas,
  .home-page .hero-journey .landscape-viewport {
    width: 100%;
    height: 100%;
  }

  .home-page .hero-journey .journey-frame {
    top: 0;
  }

  .home-page .hero-journey .landscape-viewport {
    display: flex;
    overflow: visible;
    align-items: flex-end;
    justify-content: center;
  }

  .home-page .hero-journey .journey-map {
    width: min(
      calc(100vw - clamp(96px, 8vw, 160px)),
      calc((100svh - clamp(190px, 20svh, 240px)) * 1.7768331562)
    );
    height: auto;
    max-width: calc(100vw - clamp(96px, 8vw, 160px));
    max-height: calc(100% - 86px);
    margin: 0 0 clamp(18px, 3svh, 30px);
    flex: 0 0 auto;
  }

  .home-page .hero-journey .operator-landscape {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .home-page .hero-journey .journey-map {
    width: min(
      calc(100vw - 96px),
      calc((100svh - 228px) * 1.7768331562)
    );
  }
}

.profile-portrait {
  top: 1%;
  width: 52%;
  height: auto;
  aspect-ratio: 1 / 1.08;
}

.profile-portrait > img {
  object-fit: contain;
  object-position: center;
  background: #ecece6;
}

.profile-work-stack {
  top: 26%;
  right: 0;
  width: 54%;
  height: auto;
  aspect-ratio: 4 / 3;
}

.profile-work-card {
  background: #fff;
}

.profile-work-card > img,
.profile-work-card--one > img,
.profile-work-card--two > img,
.profile-work-card--three > img,
.profile-work-card--four > img,
.profile-work-card--five > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #fff;
}

@media (min-width: 761px) {
  /*
   * The cards rotate as they cycle, so the media stage needs visible overflow
   * and a small right-hand safety inset. The full photograph now remains in
   * frame at every point in the animation.
   */
  .profile-intro,
  .profile-shell,
  .profile-media {
    overflow: visible;
  }

  .profile-intro {
    align-items: start;
    padding-top: clamp(54px, 7svh, 76px);
  }

  .profile-shell {
    grid-template-columns: minmax(0, 1.12fr) minmax(430px, 0.88fr);
    gap: clamp(44px, 5vw, 72px);
  }

  .profile-media {
    width: calc(100% + clamp(48px, 5vw, 80px));
    height: clamp(520px, 66svh, 660px);
    margin-left: calc(clamp(48px, 5vw, 80px) * -1);
  }

  .profile-work-card {
    transform-origin: center;
  }

  .profile-lead {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .profile-portrait {
    width: 58%;
    height: auto;
    aspect-ratio: 1 / 1.08;
  }

  .profile-work-stack {
    top: 29%;
    right: 0;
    width: 60%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   2026-07-28 EDITORIAL OPERATOR PORTRAIT
   One portrait, one contact sheet, one personal idea. The profile now reads as
   an introduction rather than a second résumé.
   ========================================================================== */

.identity-section.profile-intro {
  min-height: auto;
  padding: clamp(76px, 8vw, 116px) 0 clamp(84px, 9vw, 128px);
  overflow: visible;
  border: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(9, 9, 9, 0.055) 0.65px, transparent 0.75px) 0 0 / 10px 10px,
    #fff;
}

.identity-section.profile-intro::before,
.identity-section.profile-intro::after {
  display: none;
  content: none;
}

.home-page #work {
  border-top: 0;
}

.profile-intro .profile-shell {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1.03fr) minmax(410px, 0.97fr);
  gap: clamp(64px, 7vw, 112px);
  align-items: center;
}

.profile-intro .profile-media {
  display: grid;
  width: 100%;
  height: auto;
  margin: 0;
  grid-template-rows: minmax(360px, 48svh) auto;
  gap: 18px;
  overflow: visible;
}

.profile-intro .profile-portrait {
  position: relative;
  top: auto;
  left: auto;
  width: min(78%, 500px);
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  box-shadow: 18px 18px 0 rgba(255, 242, 122, 0.62);
  transform: rotate(-0.7deg);
}

.profile-intro .profile-portrait > img {
  width: 100%;
  height: calc(100% - 38px);
  object-fit: cover;
  object-position: center 34%;
  background: #ecece6;
}

.profile-intro .profile-portrait figcaption {
  height: 38px;
  padding: 0 14px;
}

.profile-intro .profile-work-stack {
  position: relative;
  top: auto;
  right: auto;
  display: grid;
  width: calc(100% + clamp(24px, 3vw, 52px));
  height: auto;
  aspect-ratio: auto;
  margin-left: clamp(12px, 2vw, 30px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  pointer-events: auto;
}

.profile-intro .profile-work-card {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(9, 9, 9, 0.08);
  animation: none;
  transform: none;
}

.profile-intro .profile-work-card:nth-child(even) {
  transform: translateY(7px);
}

.profile-intro .profile-work-card > img,
.profile-intro .profile-work-card--one > img,
.profile-intro .profile-work-card--two > img,
.profile-intro .profile-work-card--three > img,
.profile-intro .profile-work-card--four > img,
.profile-intro .profile-work-card--five > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.profile-intro .profile-work-card--two > img {
  object-position: center 32%;
}

.profile-intro .profile-copy {
  max-width: 620px;
  padding-bottom: 2%;
}

.profile-intro .profile-copy .catalog-line {
  margin-bottom: 22px;
}

.profile-intro .profile-copy h2 {
  font-size: clamp(3.5rem, 5vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.profile-intro .profile-lead {
  max-width: 29ch;
  margin-top: 30px;
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  line-height: 1.2;
}

.profile-intro .profile-summary {
  max-width: 55ch;
  margin-top: 18px;
  font-size: clamp(0.95rem, 1.06vw, 1.05rem);
  line-height: 1.58;
}

.profile-intro .profile-now {
  display: flex;
  margin-top: 28px;
  padding: 0;
  border: 0;
  align-items: baseline;
  gap: 17px;
}

.profile-intro .profile-now-label {
  flex: 0 0 auto;
  color: #4f4f4a;
}

.profile-intro .profile-now p {
  margin: 0;
  color: #33332f;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.5;
}

@media (max-width: 1020px) {
  .profile-intro .profile-shell {
    grid-template-columns: minmax(0, 0.92fr) minmax(390px, 1.08fr);
    gap: 48px;
  }

  .profile-intro .profile-media {
    grid-template-rows: minmax(330px, 43svh) auto;
  }

  .profile-intro .profile-portrait {
    width: 86%;
  }

  .profile-intro .profile-work-stack {
    width: 108%;
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .identity-section.profile-intro {
    padding: 58px 0 76px;
  }

  .profile-intro .profile-shell {
    display: flex;
    gap: 46px;
  }

  .profile-intro .profile-copy {
    width: 100%;
    order: 1;
  }

  .profile-intro .profile-media {
    width: 100%;
    grid-template-rows: minmax(390px, 58svh) auto;
    gap: 16px;
    order: 2;
  }

  .profile-intro .profile-portrait {
    width: min(86%, 480px);
  }

  .profile-intro .profile-work-stack {
    width: calc(100% - 20px);
    margin: 0;
    gap: 6px;
  }

  .profile-intro .profile-work-card {
    border-radius: 7px;
  }

  .profile-intro .profile-copy h2 {
    font-size: clamp(3rem, 12.5vw, 4.1rem);
  }

  .profile-intro .profile-lead {
    max-width: 32ch;
  }

  .profile-intro .profile-now {
    display: grid;
    gap: 6px;
  }
}

@media (max-width: 520px) {
  .profile-intro .profile-media {
    grid-template-rows: minmax(340px, 52svh) auto;
  }

  .profile-intro .profile-work-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-intro .profile-work-card:nth-child(n + 4) {
    display: none;
  }
}

/* ==========================================================================
   2026-07-28 PROFILE CONTACT SHEET
   A small identity portrait supported by a dominant record of work in motion.
   Unique class names deliberately isolate this composition from older profile
   generations above.
   ========================================================================== */

.identity-section.profile-contact-section {
  min-height: auto;
  padding: clamp(78px, 7vw, 112px) 0 clamp(90px, 8vw, 126px);
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(9, 9, 9, 0.055) 0.65px, transparent 0.75px) 0 0 / 10px 10px,
    #fff;
}

.identity-section.profile-contact-section::before,
.identity-section.profile-contact-section::after {
  display: none;
  content: none;
}

.profile-contact-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(260px, 0.64fr) minmax(0, 1.36fr);
  gap: clamp(42px, 5vw, 82px);
  align-items: center;
}

.profile-contact-copy {
  position: relative;
  z-index: 2;
  padding-left: clamp(2px, 0.7vw, 12px);
}

.profile-contact-copy .catalog-line {
  margin: 0 0 20px;
}

.profile-contact-copy h2 {
  margin: 0;
  font-size: clamp(3.55rem, 5vw, 5.4rem);
  line-height: 0.88;
  letter-spacing: -0.052em;
}

.profile-contact-copy h2 mark {
  padding: 0 0.055em 0.035em;
  background: linear-gradient(transparent 72%, #fff27a 72%);
  color: inherit;
}

.profile-contact-lead {
  max-width: 18ch;
  margin: clamp(26px, 3vw, 38px) 0 0;
  color: #111;
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  font-weight: 680;
  line-height: 1.13;
  letter-spacing: -0.025em;
}

.profile-contact-summary {
  max-width: 39ch;
  margin: 18px 0 0;
  color: #555550;
  font-size: clamp(0.94rem, 1.03vw, 1.04rem);
  line-height: 1.56;
}

.profile-contact-sheet {
  position: relative;
  min-height: clamp(590px, 48vw, 720px);
  isolation: isolate;
}

.profile-contact-sheet::before {
  position: absolute;
  z-index: -2;
  top: 8%;
  right: 2%;
  bottom: 4%;
  left: 3%;
  border: 1px solid rgba(9, 9, 9, 0.14);
  border-radius: 28px;
  background: rgba(250, 250, 247, 0.82);
  content: "";
  transform: rotate(0.8deg);
}

.profile-contact-sheet::after {
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: 1%;
  width: 44%;
  height: 34%;
  border-radius: 20px;
  background: rgba(255, 242, 122, 0.38);
  content: "";
  transform: rotate(-2.5deg);
}

.profile-contact-frame {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.72);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(9, 9, 9, 0.13);
}

.profile-contact-frame img {
  display: block;
  width: 100%;
  height: calc(100% - 30px);
  object-fit: cover;
  filter: saturate(1.09) contrast(1.025);
}

.profile-contact-frame figcaption {
  display: flex;
  height: 30px;
  padding: 0 11px;
  align-items: center;
  color: #242421;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.profile-contact-frame--presentation {
  z-index: 4;
  top: 4%;
  left: 4%;
  width: 63%;
  height: 44%;
  transform: rotate(-1.2deg);
}

.profile-contact-frame--presentation img {
  object-position: center 43%;
}

.profile-contact-frame--ground {
  z-index: 3;
  top: 10%;
  right: 0;
  width: 32%;
  height: 48%;
  transform: rotate(1.5deg);
}

.profile-contact-frame--ground img {
  object-position: center 45%;
}

.profile-contact-frame--research {
  z-index: 5;
  bottom: 5%;
  left: 0;
  width: 48%;
  height: 44%;
  transform: rotate(1deg);
}

.profile-contact-frame--research img {
  object-position: center 48%;
}

.profile-contact-frame--session {
  z-index: 6;
  right: 3%;
  bottom: 2%;
  width: 50%;
  height: 38%;
  transform: rotate(-1deg);
}

.profile-contact-frame--session img {
  object-position: center 44%;
}

@media (max-width: 1050px) {
  .profile-contact-grid {
    grid-template-columns: minmax(235px, 0.57fr) minmax(0, 1.43fr);
    gap: 34px;
  }

  .profile-contact-sheet {
    min-height: 590px;
  }

  .profile-contact-copy h2 {
    font-size: clamp(3.25rem, 5.3vw, 4.8rem);
  }
}

@media (max-width: 820px) {
  .identity-section.profile-contact-section {
    padding: 68px 0 84px;
  }

  .profile-contact-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .profile-contact-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 26px;
    align-items: end;
  }

  .profile-contact-copy .catalog-line,
  .profile-contact-copy h2,
  .profile-contact-lead,
  .profile-contact-summary {
    grid-column: 1;
  }

  .profile-contact-copy h2 {
    max-width: 10ch;
  }

  .profile-contact-lead {
    max-width: 28ch;
  }

  .profile-contact-summary {
    max-width: 54ch;
  }

  .profile-contact-sheet {
    width: 100%;
    min-height: clamp(560px, 83vw, 690px);
  }
}

@media (max-width: 580px) {
  .identity-section.profile-contact-section {
    padding: 56px 0 70px;
  }

  .profile-contact-copy {
    display: block;
  }

  .profile-contact-copy h2 {
    font-size: clamp(3.15rem, 15vw, 4.4rem);
  }

  .profile-contact-sheet {
    display: grid;
    min-height: 0;
    padding: 42px 10px 16px;
    grid-template-areas:
      "presentation presentation"
      "research ground"
      "session session";
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr);
    gap: 12px;
  }

  .profile-contact-sheet::before {
    inset: 16px 0 0;
  }

  .profile-contact-frame {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }

  .profile-contact-frame--presentation {
    grid-area: presentation;
    aspect-ratio: 16 / 10;
  }

  .profile-contact-frame--research {
    grid-area: research;
    aspect-ratio: 1 / 1.12;
  }

  .profile-contact-frame--ground {
    grid-area: ground;
    aspect-ratio: 0.76 / 1;
  }

  .profile-contact-frame--session {
    grid-area: session;
    aspect-ratio: 16 / 10;
  }
}

/* Project previews: photographic field trails */

.home-page .ledger-visual.project-slideshow {
  position: relative;
  display: grid;
  min-height: clamp(330px, 29vw, 410px);
  height: 100%;
  padding: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) 52px;
  border: 1px solid rgba(9, 9, 9, 0.22);
  border-radius: 12px;
  background: #e8e5dc;
  isolation: isolate;
}

.project-slides {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #d8d4c9;
}

.project-slide {
  position: absolute;
  display: grid;
  visibility: hidden;
  overflow: hidden;
  inset: 0;
  place-items: center;
  opacity: 0;
  background: #d8d4c9;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.project-slide::before {
  position: absolute;
  inset: -24px;
  background-image: var(--slide-image);
  background-position: center;
  background-size: cover;
  content: "";
  filter: blur(22px) saturate(0.72) contrast(0.92);
  opacity: 0.48;
  transform: scale(1.06);
}

.project-slide::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 9, 9, 0.12), transparent 25% 75%, rgba(9, 9, 9, 0.12)),
    linear-gradient(0deg, rgba(9, 9, 9, 0.24), transparent 36%);
  content: "";
  pointer-events: none;
}

.project-slide.is-active {
  visibility: visible;
  opacity: 1;
}

.project-slide img {
  position: absolute;
  z-index: 1;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.08) contrast(1.025);
  transform: scale(1.002);
  transition: transform 5.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.project-slide.is-active img {
  transform: scale(1.035);
}

.project-slide--cover img {
  object-fit: cover;
}

.project-slide > p {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 14px;
  display: flex;
  margin: 0;
  padding: 7px 10px 7px 8px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  background: rgba(250, 250, 247, 0.9);
  box-shadow: 0 5px 18px rgba(9, 9, 9, 0.13);
  color: #121210;
  font-family: var(--mono);
  font-size: 0.57rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.project-slide > p span {
  display: grid;
  width: 20px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--brass);
  font-size: 0.5rem;
}

.home-page .ledger-visual .project-slideshow-ui {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 52px;
  height: 52px;
  padding: 0 8px 0 14px;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(9, 9, 9, 0.15);
  background: rgba(250, 250, 247, 0.98);
  color: var(--ink);
}

.project-slideshow-title {
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-slideshow-progress {
  display: flex;
  align-items: center;
  gap: 5px;
}

.project-slideshow-progress button {
  width: 18px;
  height: 3px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(9, 9, 9, 0.18);
  cursor: pointer;
  transition: width 220ms ease, background-color 220ms ease;
}

.project-slideshow-progress button.is-active {
  width: 34px;
  background: var(--brass);
}

.project-slideshow-count {
  min-width: 42px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 650;
  letter-spacing: 0.055em;
}

.project-slideshow-controls {
  display: flex;
  gap: 4px;
}

.project-slideshow-controls button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(9, 9, 9, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

@media (hover: hover) {
  .project-slideshow-controls button:hover {
    border-color: var(--ink);
    background: var(--brass);
    transform: translateY(-1px);
  }
}

@media (max-width: 760px) {
  .home-page .ledger-visual.project-slideshow {
    min-height: clamp(340px, 80vw, 450px);
  }
}

@media (max-width: 520px) {
  .home-page .ledger-visual.project-slideshow {
    min-height: 350px;
    grid-template-rows: minmax(0, 1fr) 50px;
  }

  .home-page .ledger-visual .project-slideshow-ui {
    min-height: 50px;
    height: 50px;
    padding-left: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .project-slideshow-progress {
    display: none;
  }

  .project-slideshow-title {
    font-size: 0.5rem;
  }

  .project-slideshow-controls button {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-slide,
  .project-slide img,
  .project-slideshow-progress button {
    transition: none;
  }
}

/* Project Cabinet
   A compact case-file summary paired with a tactile photographic folder. */

.home-page #projects .project-ledger {
  gap: clamp(18px, 2.2vw, 28px);
}

.home-page #projects .ledger-case {
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(520px, 1.18fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  gap: 14px clamp(28px, 3vw, 46px);
  padding: clamp(26px, 3vw, 42px);
  overflow: hidden;
  border-color: rgba(9, 9, 9, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 1px 1px, rgba(9, 9, 9, 0.055) 0.8px, transparent 0.9px) 0 0 / 12px 12px,
    var(--paper);
  box-shadow: 0 22px 64px rgba(9, 9, 9, 0.045);
}

.home-page #projects .ledger-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  padding: 4px 0 0;
}

.home-page #projects .ledger-copy h3 {
  margin-top: 12px;
  font-size: clamp(2.25rem, 3.25vw, 3.35rem);
  font-weight: 570;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.home-page #projects .ledger-kicker,
.home-page #projects .ledger-head time {
  font-size: clamp(0.58rem, 0.65vw, 0.68rem);
  letter-spacing: 0.085em;
}

.home-page #projects .ledger-summary {
  max-width: 46ch;
  margin-top: clamp(17px, 1.8vw, 24px);
  color: #55544f;
  font-size: clamp(0.98rem, 1.18vw, 1.18rem);
  line-height: 1.5;
}

.ledger-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(22px, 2.4vw, 34px);
  border: 0;
}

.ledger-brief > div {
  min-width: 0;
  padding: 0;
}

.ledger-brief > div + div {
  padding-left: 0;
  border-left: 0;
}

.ledger-brief span,
.ledger-brief strong {
  display: block;
}

.ledger-brief span {
  margin-bottom: 7px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ledger-brief strong {
  color: var(--ink);
  font-size: clamp(0.72rem, 0.82vw, 0.84rem);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.home-page #projects .ledger-metrics {
  margin-top: clamp(22px, 2.4vw, 34px);
  padding-top: 0;
}

.home-page #projects .ledger-metrics div {
  padding-inline: clamp(14px, 1.4vw, 22px);
  border-right: 0;
}

.home-page #projects .ledger-metrics strong {
  font-size: clamp(1.7rem, 2.25vw, 2.35rem);
  line-height: 1;
}

.home-page #projects .ledger-metrics span {
  margin-top: 7px;
  font-size: 0.56rem;
  letter-spacing: 0.085em;
}

.home-page #projects .ledger-more {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  padding-top: 6px;
}

.home-page #projects .ledger-more[open] {
  grid-column: 1 / -1;
  grid-row: 3;
}

.home-page #projects .ledger-case:has(.ledger-more[open]) .project-folder {
  grid-row: 1 / span 2;
}

.home-page #projects .ledger-more summary {
  min-height: 44px;
  padding-left: 17px;
  background: rgba(250, 250, 247, 0.8);
  backdrop-filter: blur(8px);
}

.home-page #projects .ledger-more summary b {
  width: 28px;
  height: 28px;
}

.home-page #projects .project-folder {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: clamp(390px, 35vw, 500px);
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.home-page #projects .project-folder .project-slides {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.16);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(9, 9, 9, 0.075) 0.8px, transparent 0.9px) 0 0 / 11px 11px,
    #f3f0e8;
  perspective: 1200px;
}

.home-page #projects .project-folder .project-slides::before {
  position: absolute;
  z-index: 0;
  inset: 24px 30px 25px 34px;
  border: 1px solid rgba(9, 9, 9, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 242, 122, 0.96), rgba(255, 242, 122, 0.8)),
    var(--brass);
  box-shadow: 0 18px 36px rgba(84, 62, 5, 0.14);
  clip-path: polygon(0 8%, 31% 8%, 36% 0, 64% 0, 70% 8%, 100% 8%, 100% 100%, 0 100%);
  content: "";
}

.home-page #projects .project-folder .project-slides::after {
  position: absolute;
  z-index: 15;
  display: flex;
  right: 21px;
  bottom: 15px;
  left: 20px;
  height: 78px;
  padding: 0 18px 13px;
  align-items: flex-end;
  border: 1px solid rgba(9, 9, 9, 0.2);
  border-radius: 0 0 16px 16px;
  background:
    linear-gradient(180deg, rgba(255, 242, 122, 0.7), rgba(255, 242, 122, 0.94));
  box-shadow: 0 -8px 24px rgba(76, 59, 8, 0.08);
  box-sizing: border-box;
  color: rgba(9, 9, 9, 0.74);
  content: var(--folder-label);
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  pointer-events: none;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
}

.home-page #projects .project-folder--koel {
  --folder-label: "FIELD NOTES · 04 FRAMES";
}

.home-page #projects .project-folder--hlf {
  --folder-label: "DISTRIBUTION TRAIL · 03 FRAMES";
}

.home-page #projects .project-folder--digital {
  --folder-label: "CONVERSION LOG · 03 FRAMES";
}

.home-page #projects .project-folder .project-slide {
  z-index: 3;
  visibility: visible;
  inset: 51px 58px 49px 55px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.48);
  border-radius: 14px;
  background: #d8d4c9;
  box-shadow: 0 15px 35px rgba(9, 9, 9, 0.18);
  opacity: 0.76;
  transform-origin: 50% 100%;
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(0.22, 0.78, 0.24, 1),
    filter 360ms ease;
}

.home-page #projects .project-folder .project-slide:nth-child(1) {
  transform: translate3d(-15px, 5px, 0) rotate(-1.8deg);
}

.home-page #projects .project-folder .project-slide:nth-child(2) {
  transform: translate3d(12px, -8px, 0) rotate(1.5deg);
}

.home-page #projects .project-folder .project-slide:nth-child(3) {
  transform: translate3d(25px, 7px, 0) rotate(2.5deg);
}

.home-page #projects .project-folder .project-slide:nth-child(4) {
  transform: translate3d(-2px, -12px, 0) rotate(-0.6deg);
}

.home-page #projects .project-folder .project-slide.is-active {
  z-index: 12;
  opacity: 1;
  transform: translate3d(0, -14px, 30px) rotate(0deg);
}

.home-page #projects .project-folder .project-slide::before {
  inset: -18px;
  filter: blur(20px) saturate(0.78) contrast(0.94);
  opacity: 0.6;
}

.home-page #projects .project-folder .project-slide::after {
  background:
    linear-gradient(0deg, rgba(9, 9, 9, 0.34), transparent 38%),
    linear-gradient(90deg, rgba(9, 9, 9, 0.08), transparent 24% 76%, rgba(9, 9, 9, 0.08));
}

.home-page #projects .project-folder .project-slide img {
  object-fit: contain;
  transform: scale(1);
  transition: transform 6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-page #projects .project-folder .project-slide--cover img {
  object-fit: cover;
}

.home-page #projects .project-folder .project-slide.is-active img {
  transform: scale(1.025);
}

.home-page #projects .project-folder .project-slide > p {
  z-index: 18;
  bottom: 91px;
  left: 18px;
  border-color: rgba(9, 9, 9, 0.24);
  background: rgba(250, 250, 247, 0.94);
  box-shadow: 0 8px 22px rgba(9, 9, 9, 0.13);
}

.home-page #projects .project-folder .project-slideshow-ui {
  position: relative;
  z-index: 20;
  min-height: 58px;
  height: 58px;
  padding: 0 10px 0 18px;
  border: 1px solid rgba(9, 9, 9, 0.2);
  border-radius: 0 0 18px 18px;
  background: rgba(250, 250, 247, 0.98);
  box-shadow: 0 14px 28px rgba(9, 9, 9, 0.06);
}

.home-page #projects .project-folder .project-slideshow-title {
  position: relative;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brass) 68%, var(--paper));
}

@media (hover: hover) {
  .home-page #projects .project-folder:hover .project-slide:not(.is-active):nth-child(1) {
    transform: translate3d(-22px, 1px, 0) rotate(-2.3deg);
  }

  .home-page #projects .project-folder:hover .project-slide:not(.is-active):nth-child(2) {
    transform: translate3d(17px, -13px, 0) rotate(2deg);
  }

  .home-page #projects .project-folder:hover .project-slide:not(.is-active):nth-child(3) {
    transform: translate3d(31px, 4px, 0) rotate(3deg);
  }

  .home-page #projects .project-folder:hover .project-slide:not(.is-active):nth-child(4) {
    transform: translate3d(-8px, -18px, 0) rotate(-1.1deg);
  }

  .home-page #projects .project-folder:hover .project-slide.is-active {
    transform: translate3d(0, -20px, 42px) rotate(0deg);
  }
}

@media (max-width: 1050px) {
  .home-page #projects .ledger-case {
    grid-template-columns: minmax(280px, 0.8fr) minmax(430px, 1.2fr);
    gap: 14px 26px;
    padding: 28px;
  }

  .home-page #projects .project-folder {
    min-height: 400px;
  }

  .ledger-brief {
    grid-template-columns: 1fr;
  }

  .ledger-brief > div {
    display: grid;
    padding: 10px 0;
    grid-template-columns: 70px 1fr;
    gap: 10px;
  }

  .ledger-brief > div + div {
    padding-left: 0;
    border-top: 0;
    border-left: 0;
  }

  .ledger-brief span {
    margin: 0;
  }
}

@media (max-width: 760px) {
  .home-page #projects .ledger-case {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 22px;
    padding: 22px;
    border-radius: 16px;
  }

  .home-page #projects .ledger-copy,
  .home-page #projects .project-folder,
  .home-page #projects .ledger-more,
  .home-page #projects .ledger-more[open] {
    grid-column: 1;
    grid-row: auto;
  }

  .home-page #projects .ledger-copy h3 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .home-page #projects .ledger-summary {
    font-size: 0.98rem;
  }

  .ledger-brief {
    margin-top: 22px;
  }

  .home-page #projects .ledger-metrics {
    margin-top: 22px;
  }

  .home-page #projects .project-folder {
    min-height: clamp(360px, 96vw, 475px);
  }

  .home-page #projects .project-folder .project-slide {
    inset: 45px 38px 45px 37px;
  }
}

@media (max-width: 480px) {
  .home-page #projects .ledger-case {
    padding: 18px;
  }

  .home-page #projects .ledger-head {
    grid-template-columns: 1fr;
  }

  .home-page #projects .ledger-head time {
    text-align: left;
  }

  .home-page #projects .ledger-metrics strong {
    font-size: 1.55rem;
  }

  .home-page #projects .project-folder {
    min-height: 350px;
  }

  .home-page #projects .project-folder .project-slide {
    inset: 43px 27px 44px 28px;
  }

  .home-page #projects .project-folder .project-slides::after {
    right: 12px;
    left: 12px;
  }
}

/* Final project-card cleanup. Keep this last so legacy preview rules cannot reappear. */

.home-page #projects .ledger-summary {
  margin-top: clamp(13px, 1.3vw, 18px);
  line-height: 1.43;
}

.home-page #projects .ledger-brief {
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(17px, 1.7vw, 23px);
  border: 0;
}

.home-page #projects .ledger-brief > div,
.home-page #projects .ledger-brief > div + div,
.home-page #projects .ledger-metrics,
.home-page #projects .ledger-metrics > div {
  border: 0;
}

.home-page #projects .ledger-brief > div,
.home-page #projects .ledger-brief > div + div {
  padding: 0;
}

.home-page #projects .ledger-metrics {
  margin-top: clamp(20px, 2vw, 27px);
  padding-top: 0;
}

.home-page #projects .ledger-metrics > div {
  padding-inline: clamp(8px, 1vw, 15px);
}

.home-page #projects .project-folder {
  min-height: clamp(350px, 31vw, 440px);
}

.home-page #projects .project-folder .project-slides {
  overflow: hidden;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: color-mix(in srgb, var(--paper) 86%, #ece9df);
}

.home-page #projects .project-folder .project-slides::before,
.home-page #projects .project-folder .project-slides::after {
  display: none;
  content: none;
}

.home-page #projects .project-folder .project-slide {
  z-index: 3;
  visibility: visible;
  inset: 30px 48px 34px;
  border: 1px solid rgba(9, 9, 9, 0.28);
  border-radius: 14px;
  opacity: 0.48;
  background: #e8e5dc;
  box-shadow: 0 13px 28px rgba(9, 9, 9, 0.13);
}

.home-page #projects .project-folder .project-slide:nth-child(1) {
  transform: translate3d(-20px, 9px, 0) rotate(-2deg);
}

.home-page #projects .project-folder .project-slide:nth-child(2) {
  transform: translate3d(19px, 3px, 0) rotate(1.8deg);
}

.home-page #projects .project-folder .project-slide:nth-child(3) {
  transform: translate3d(9px, -8px, 0) rotate(0.8deg);
}

.home-page #projects .project-folder .project-slide:nth-child(4) {
  transform: translate3d(-8px, -5px, 0) rotate(-0.9deg);
}

.home-page #projects .project-folder .project-slide.is-active {
  z-index: 12;
  opacity: 1;
  transform: translate3d(0, 0, 30px) rotate(0);
}

.home-page #projects .project-folder .project-slide::after {
  background: linear-gradient(0deg, rgba(9, 9, 9, 0.16), transparent 31%);
}

.home-page #projects .project-folder .project-slide.is-active img {
  transform: scale(1.01);
}

.home-page #projects .project-folder .project-slide > p {
  z-index: 18;
  bottom: 14px;
  left: 14px;
  padding: 6px 9px;
  border: 0;
  background: rgba(250, 250, 247, 0.9);
  box-shadow: none;
}

.home-page #projects .project-folder .project-slide > p span {
  width: 7px;
  color: transparent;
  font-size: 0;
}

.home-page #projects .project-folder .project-slideshow-ui {
  min-height: 52px;
  height: 52px;
  padding: 0 8px 0 14px;
  border: 0;
  border-radius: 0 0 16px 16px;
  background: color-mix(in srgb, var(--paper) 91%, #ece9df);
  box-shadow: none;
}

.home-page #projects .project-folder .project-slideshow-title {
  padding: 0;
  background: transparent;
}

@media (hover: hover) {
  .home-page #projects .project-folder:hover .project-slide.is-active {
    transform: translate3d(0, -4px, 42px) rotate(0);
  }
}

@media (max-width: 760px) {
  .home-page #projects .project-folder {
    min-height: clamp(330px, 88vw, 430px);
  }

  .home-page #projects .project-folder .project-slide {
    inset: 25px 34px 30px;
  }
}
/* Final homepage QA: keep the hero clipped to the canvas. */
html,
body {
  overflow-x: clip;
}

/* Work preview: experience-specific evidence, with no ornamental dividers. */
.home-page #work .work-bento-card {
  gap: 14px;
}

.home-page #work .work-evidence {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.78);
  border-radius: 14px;
  background: #fbfbf8;
  box-shadow: 0 14px 34px rgba(9, 9, 9, 0.045);
}

.home-page #work .work-evidence::before,
.home-page #work .work-evidence::after {
  content: none !important;
}

.home-page #work .work-evidence article,
.home-page #work .ys-founder-view {
  min-width: 0;
  border: 1px solid rgba(9, 9, 9, 0.82);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 5px 14px rgba(9, 9, 9, 0.035);
}

.home-page #work .work-evidence small {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-page #work .work-evidence strong {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.home-page #work .work-evidence article > span,
.home-page #work .ys-founder-view > span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.home-page #work .work-evidence--ys {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
}

.home-page #work .ys-evidence-board {
  display: grid;
  height: 100%;
  min-height: 410px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.home-page #work .ys-evidence {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px;
  overflow: hidden;
}

.home-page #work .ys-evidence strong {
  max-width: 20ch;
  font-size: clamp(15px, 1.25vw, 20px);
}

.home-page #work .ys-evidence > span {
  margin-top: auto;
  padding-top: 10px;
}

.home-page #work .ys-evidence--website {
  grid-column: 1 / 8;
  grid-row: 1 / 2;
}

.home-page #work .ys-evidence--brand {
  grid-column: 8 / 13;
  grid-row: 1 / 2;
}

.home-page #work .ys-evidence--mis {
  grid-column: 1 / 7;
  grid-row: 2 / 4;
}

.home-page #work .ys-evidence--platform {
  grid-column: 7 / 13;
  grid-row: 2 / 3;
}

.home-page #work .ys-evidence--hiring {
  grid-column: 7 / 10;
  grid-row: 3 / 4;
}

.home-page #work .ys-founder-view {
  display: flex;
  flex-direction: column;
  grid-column: 10 / 13;
  grid-row: 3 / 4;
  padding: 15px;
  background: var(--yellow);
}

.home-page #work .ys-founder-view strong {
  font-size: clamp(14px, 1.1vw, 18px);
}

.home-page #work .ys-founder-view > span {
  margin-top: auto;
  padding-top: 8px;
  color: rgba(9, 9, 9, 0.68);
}

.home-page #work .ys-browser {
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 42%;
  min-width: 120px;
  padding: 16px 10px 10px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: #fff;
}

.home-page #work .ys-browser::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 8px 0 0 #bbb, 16px 0 0 #ddd;
}

.home-page #work .ys-browser i {
  display: block;
  width: 72%;
  height: 2px;
  margin: 6px 0;
  background: var(--ink);
}

.home-page #work .ys-browser i:nth-child(2) {
  width: 52%;
}

.home-page #work .ys-browser i:nth-child(3) {
  width: 64%;
}

.home-page #work .ys-browser b {
  display: block;
  width: 42px;
  height: 11px;
  margin-top: 8px;
  background: var(--yellow);
}

.home-page #work .ys-mis-list {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.home-page #work .ys-mis-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  background: #f1f1ec;
  color: var(--ink);
  font-size: 10px;
}

.home-page #work .ys-mis-list b {
  padding: 2px 5px;
  background: var(--yellow);
  font-size: 9px;
  font-weight: 650;
}

.home-page #work .work-evidence--rayden,
.home-page #work .work-evidence--retail {
  padding: 10px;
}

.home-page #work .rayden-workbench,
.home-page #work .retail-counter {
  display: grid;
  min-height: 150px;
  grid-template-columns: 0.82fr 1.55fr 0.85fr;
  gap: 9px;
}

.home-page #work .rayden-workbench article,
.home-page #work .retail-counter article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
}

.home-page #work .rayden-workbench strong,
.home-page #work .retail-counter strong {
  font-size: clamp(13px, 1.15vw, 18px);
}

.home-page #work .rayden-workbench article > span,
.home-page #work .retail-counter article > span {
  margin-top: 7px;
}

.home-page #work .rayden-message p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(10px, 0.83vw, 13px);
  font-weight: 620;
  line-height: 1.32;
}

.home-page #work .rayden-signal,
.home-page #work .retail-outcome {
  background: var(--yellow) !important;
}

.home-page #work .rayden-signal strong,
.home-page #work .retail-outcome strong {
  font-family: var(--serif);
  font-size: clamp(23px, 2vw, 32px);
  letter-spacing: -0.03em;
}

.home-page #work .retail-counter {
  grid-template-columns: 0.92fr 1.48fr 0.8fr;
}

.home-page #work .retail-questions span {
  margin-top: 4px !important;
  padding: 5px 7px;
  border-radius: 5px;
  background: #f1f1ec;
  color: var(--ink) !important;
  font-size: 9px !important;
  font-weight: 620;
}

.home-page #work .bento-stats {
  gap: clamp(18px, 3vw, 42px);
  padding: 0;
  border: 0 !important;
}

.home-page #work .bento-stats > div {
  padding: 0 !important;
  border: 0 !important;
}

.home-page #work .work-more {
  width: 100%;
  margin-top: auto;
  padding: 0;
  border: 0 !important;
}

.home-page #work .work-more > summary {
  display: flex !important;
  width: fit-content;
  min-height: 38px;
  margin-left: auto !important;
  padding: 5px 6px 5px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
}

.home-page #work .work-more[open] > summary {
  margin-bottom: 14px;
}

.home-page #work .work-more-body {
  border: 0 !important;
  border-radius: 10px;
  background: #f4f4ef;
}

.home-page #work .work-bento-card--rayden,
.home-page #work .work-bento-card--hide {
  gap: 11px;
  padding-top: 22px;
  padding-bottom: 22px;
}

@media (min-width: 761px) {
  .home-page #work .work-bento-card--yelloskye .work-evidence--ys {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  .home-page #work .work-evidence--ys {
    padding: 10px;
  }

  .home-page #work .ys-evidence-board {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .home-page #work .ys-evidence--website,
  .home-page #work .ys-evidence--brand,
  .home-page #work .ys-evidence--mis,
  .home-page #work .ys-evidence--platform,
  .home-page #work .ys-evidence--hiring,
  .home-page #work .ys-founder-view {
    grid-column: auto;
    grid-row: auto;
    min-height: 150px;
  }

  .home-page #work .ys-evidence--mis,
  .home-page #work .ys-evidence--website {
    grid-column: 1 / -1;
  }

  .home-page #work .ys-browser {
    width: 38%;
  }

  .home-page #work .rayden-workbench,
  .home-page #work .retail-counter {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-page #work .rayden-workbench article,
  .home-page #work .retail-counter article {
    min-height: 104px;
  }
}

/* Work preview, final: compact evidence maps that explain the job at a glance. */
.home-page #work .xp-visual {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 14px;
  background: #fbfbf8;
  box-shadow: none;
}

.home-page #work .xp-visual::before,
.home-page #work .xp-visual::after {
  content: none !important;
}

.home-page #work .xp-visual figcaption {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  border: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.075em;
  line-height: 1.25;
  text-transform: uppercase;
}

.home-page #work .xp-visual figcaption b {
  color: var(--muted);
  font: inherit;
  text-align: right;
}

.home-page #work .xp-visual small {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
}

.home-page #work .xp-visual strong {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.home-page #work .xp-visual article > span,
.home-page #work .xp-ys-core > span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.home-page #work .xp-visual--ys {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 14px;
}

.home-page #work .xp-ys-map {
  position: relative;
  display: grid;
  min-height: 430px;
  grid-template-columns: minmax(0, 1fr) minmax(155px, 0.86fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 12px 18px 18px;
}

.home-page #work .xp-ys-map::before,
.home-page #work .xp-ys-map::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 15%;
  height: 1px;
  background: var(--ink);
}

.home-page #work .xp-ys-map::before {
  left: 28%;
}

.home-page #work .xp-ys-map::after {
  right: 28%;
}

.home-page #work .xp-ys-lane {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.home-page #work .xp-ys-lane article {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
}

.home-page #work .xp-ys-core {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 180px;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  text-align: center;
}

.home-page #work .xp-ys-core small {
  color: rgba(9, 9, 9, 0.64);
}

.home-page #work .xp-ys-core strong {
  font-size: clamp(18px, 1.55vw, 24px);
}

.home-page #work .xp-ys-core > span {
  color: rgba(9, 9, 9, 0.68);
}

.home-page #work .xp-visual--rayden,
.home-page #work .xp-visual--retail {
  flex: 0 0 auto;
  height: 150px !important;
  min-height: 150px !important;
  padding-bottom: 8px;
}

.home-page #work .xp-path {
  display: grid;
  height: 108px;
  min-height: 108px;
  grid-template-columns: minmax(0, 0.95fr) 18px minmax(0, 1.25fr) 18px minmax(0, 0.9fr);
  gap: 7px;
  align-items: stretch;
  padding: 0 10px;
}

.home-page #work .xp-path article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 9px 10px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
}

.home-page #work .xp-path > i {
  align-self: center;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-style: normal;
  text-align: center;
}

.home-page #work .xp-path .xp-path-result {
  background: var(--yellow);
}

.home-page #work .xp-path-result strong {
  font-family: var(--serif);
  font-size: clamp(19px, 1.65vw, 26px);
  letter-spacing: -0.035em;
}

.home-page #work .bento-stats {
  margin-top: 0;
}

.home-page #work .work-more {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 40px;
  margin-top: 0;
}

.home-page #work .work-more > summary {
  margin: 0 !important;
}

.home-page #work .work-bento-card--rayden,
.home-page #work .work-bento-card--hide {
  gap: 10px;
}

/* YelloSKYE: show scope and ownership without turning the card into a dashboard. */
.home-page #work .xp-visual--ys {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding-bottom: 0;
}

.home-page #work .xp-ys-ledger {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 10px 12px 12px;
}

.home-page #work .xp-ys-ledger article {
  display: flex;
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
}

.home-page #work .xp-ys-ledger article:nth-child(5) {
  grid-column: 1 / -1;
  min-height: 78px;
}

.home-page #work .xp-ys-ledger article > span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.home-page #work .xp-ys-result {
  display: grid;
  min-height: 66px;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 12px 16px;
  background: var(--yellow);
}

.home-page #work .xp-ys-result span {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-page #work .xp-ys-result strong {
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.2;
}

@media (max-width: 760px) {
  .home-page #work .xp-ys-map {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-page #work .xp-ys-map::before,
  .home-page #work .xp-ys-map::after {
    content: none;
  }

  .home-page #work .xp-ys-core {
    min-height: 140px;
    grid-row: 1;
  }

  .home-page #work .xp-path {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .home-page #work .xp-path article {
    min-height: 105px;
  }

  .home-page #work .xp-path > i {
    transform: rotate(90deg);
  }

  .home-page #work .xp-ys-ledger {
    grid-template-columns: 1fr;
  }

  .home-page #work .xp-ys-ledger article:nth-child(5) {
    grid-column: auto;
  }

  .home-page #work .xp-ys-result {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* Scope Ladder: work section as one escalating structure, not a card grid. */
.work-ladder-total {
  grid-column: 2;
  align-self: center;
  margin: 0;
  color: var(--secondary);
  font: 600 0.62rem "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-align: right;
  text-transform: uppercase;
}

.work-ladder {
  position: relative;
  padding-left: 78px;
}

.work-ladder-spine {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 34px;
  width: 1px;
  background: var(--hairline-strong);
}

.work-ladder-band {
  position: relative;
  display: grid;
  width: 50%;
  min-width: 480px;
  margin-bottom: 34px;
  grid-template-columns: 140px minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}

.work-ladder-band--02 { width: 66%; }
.work-ladder-band--03 { width: 83%; }
.work-ladder-band--04 { width: 100%; }
.work-ladder-band--final { margin-bottom: 0; }

.work-ladder-marker {
  position: absolute;
  top: 2px;
  left: -60px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font: 700 0.68rem/1 "Space Mono", ui-monospace, monospace;
  place-items: center;
}

.work-ladder-band--final .work-ladder-marker {
  background: var(--brass);
}

.work-ladder-rail p {
  margin: 0 0 4px;
  font-family: Fraunces, Georgia, serif;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
}

.work-ladder-rail time {
  display: block;
  color: var(--muted);
  font: 600 0.6rem "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.work-ladder-rail small {
  display: block;
  margin-top: 3px;
  color: var(--secondary);
  font-size: 0.72rem;
}

.work-ladder-copy {
  max-width: 620px;
  margin: 0 0 14px;
  color: var(--secondary);
  font-size: 0.9rem;
  line-height: 1.52;
}

.work-ladder-copy strong {
  color: var(--ink);
  font-weight: 600;
}

.work-ladder-diagram {
  height: auto;
  margin: 0 0 14px;
}

.work-ladder-diagram .work-diagram {
  flex: none;
  height: auto;
  aspect-ratio: 720 / 190;
}

.work-ladder-diagram--ops .work-diagram {
  aspect-ratio: 720 / 300;
}

.work-ladder-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.work-ladder-stats strong {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
}

.work-ladder-stats span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font: 600 0.56rem "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.work-ladder-result {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 30px 0 0 78px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.work-ladder-result span {
  color: var(--muted);
  font: 600 0.6rem "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.work-ladder-result strong {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
}

.work-ladder-result a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font: 600 0.72rem Inter, ui-sans-serif, sans-serif;
  text-decoration: none;
  transition: background 160ms ease;
}

.work-ladder-result a:hover { background: var(--brass); }

@media (max-width: 900px) {
  .work-ladder-band,
  .work-ladder-band--02,
  .work-ladder-band--03,
  .work-ladder-band--04 {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .work-ladder { padding-left: 0; }
  .work-ladder-spine { display: none; }

  .work-ladder-band {
    grid-template-columns: 1fr;
    row-gap: 12px;
    margin-bottom: 40px;
  }

  .work-ladder-marker {
    position: static;
    margin-bottom: 8px;
  }

  .work-ladder-result {
    flex-wrap: wrap;
    margin-left: 0;
  }

  .work-ladder-result a { margin-left: 0; }
}

/* Work Ladder artifacts: maximalist evidence, not schematic diagrams. */
.wk-art {
  position: relative;
  padding: 18px 20px 20px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background-color: #fafaf7;
  background-image: radial-gradient(circle, rgba(9, 9, 9, 0.09) 0 0.45px, transparent 0.62px);
  background-size: 7px 7px;
}

.wk-note {
  position: absolute;
  top: 40px;
  right: 18px;
  z-index: 2;
  max-width: 140px;
  padding: 3px 6px;
  background: var(--paper);
  color: var(--ink);
  font-family: Caveat, cursive;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: right;
  transform: rotate(-3deg);
}

/* Hide & Sneak: sales floor receipt */
.wk-receipt {
  padding-bottom: 26px;
  background: #fff;
  font-family: "Space Mono", ui-monospace, monospace;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 95% 100%, 90% calc(100% - 8px), 85% 100%, 80% calc(100% - 8px), 75% 100%, 70% calc(100% - 8px), 65% 100%, 60% calc(100% - 8px), 55% 100%, 50% calc(100% - 8px), 45% 100%, 40% calc(100% - 8px), 35% 100%, 30% calc(100% - 8px), 25% 100%, 20% calc(100% - 8px), 15% 100%, 10% calc(100% - 8px), 5% 100%, 0 calc(100% - 8px));
}

.wk-receipt-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--hairline-strong);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wk-receipt-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.68rem;
}

.wk-receipt-line small { color: var(--muted); }

.wk-receipt-line span {
  flex: 1;
  border-bottom: 1px dotted var(--hairline-strong);
}

.wk-receipt-line b {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
}

.wk-receipt-line b.is-flag {
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--brass);
  color: var(--ink);
}

.wk-receipt-rule {
  margin: 8px 0;
  border-top: 1px dashed var(--hairline-strong);
}

.wk-receipt-diagnosis {
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
}

.wk-receipt-diagnosis span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.wk-receipt-diagnosis strong {
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
}

.wk-receipt-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--brass);
}

.wk-receipt-total span {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.wk-receipt-total strong {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.3rem;
}

.wk-receipt-barcode {
  height: 22px;
  margin-top: 12px;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px);
  opacity: 0.8;
}

/* Therefore Design: founder's desk */
.wk-desk { padding-top: 34px; }

.wk-sticky {
  position: absolute;
  top: -8px;
  right: 16px;
  max-width: 190px;
  padding: 10px 12px;
  background: var(--brass);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transform: rotate(3deg);
  font-family: Fraunces, Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.25;
}

.wk-desk-kicker {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.wk-timeline {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}

.wk-timeline > div {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 4px;
  border-bottom: 1px solid var(--hairline);
}

.wk-timeline .is-pick { background: rgba(255, 242, 122, 0.35); }

.wk-timeline small {
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wk-timeline strong {
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
}

.wk-timeline span {
  color: var(--muted);
  font-size: 0.6rem;
  text-align: right;
}

.wk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.wk-table th, .wk-table td {
  padding: 6px 8px;
  border: 1px solid var(--hairline);
  text-align: center;
}

.wk-table th:first-child, .wk-table td:first-child {
  font-weight: 600;
  text-align: left;
}

.wk-table thead th {
  background: var(--paper-deep);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wk-table th.is-pick, .wk-table td.is-pick {
  background: rgba(255, 242, 122, 0.35);
  font-weight: 700;
}

.wk-slides {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.wk-slides span {
  padding: 5px 8px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.54rem;
}

.wk-slides span.is-on {
  border-color: var(--ink);
  background: var(--brass);
  color: var(--ink);
  font-weight: 700;
}

/* Rayden: outbound browser dashboard */
.wk-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -18px -20px 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-deep);
}

.wk-browser-bar span {
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.wk-browser-bar b {
  margin-left: 10px;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  font-weight: 500;
}

.wk-table--wide th:last-child, .wk-table--wide td:last-child { width: 44px; }

.wk-spark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.wk-spark svg { width: 96px; height: 24px; flex-shrink: 0; }
.wk-spark polyline { fill: none; stroke: var(--brass-deep); stroke-width: 2; }

.wk-spark span {
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wk-bubble {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 12px 12px 12px 2px;
  background: rgba(255, 242, 122, 0.35);
  font-family: Fraunces, Georgia, serif;
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.35;
}

/* YelloSKYE: founder's office operating wall */
.wk-wall { padding-top: 16px; }

.wk-wall-kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.wk-wall-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.wk-panel {
  display: flex;
  min-height: 120px;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--paper);
}

.wk-panel p {
  margin: 0;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wk-panel > span {
  margin-top: auto;
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.48rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wk-bars { display: flex; align-items: end; gap: 5px; height: 52px; }
.wk-bars i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: var(--hairline-strong); }
.wk-bars i.is-pick { background: var(--brass); }

.wk-funnel { display: flex; flex-direction: column; gap: 5px; }

.wk-funnel b {
  display: block;
  padding: 5px 8px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--paper-deep);
  font-size: 0.54rem;
  font-weight: 600;
  text-align: left;
}

.wk-funnel b.is-pick { border-color: var(--ink); background: var(--brass); }

.wk-panel svg { width: 100%; height: 44px; }
.wk-panel svg polyline { fill: none; stroke: var(--brass-deep); stroke-width: 2.5; }

.wk-panel--brand strong {
  font-family: Fraunces, Georgia, serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
}

.wk-wall-note {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--brass);
  color: var(--secondary);
  font-family: Caveat, cursive;
  font-size: 1.2rem;
}

@media (max-width: 900px) {
  .wk-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wk-note { position: static; margin-bottom: 10px; text-align: left; transform: none; }
  .wk-sticky { position: static; margin: 0 0 14px; transform: none; }
}

/* Header: grounded bar, not a floating ghost. */
.site-header {
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.site-header .mark {
  font-size: clamp(1.9rem, 2.4vw, 2.3rem);
}

/* Hero: proof strip inside the intro column, ahead of the explore link. */
.home-page .hero-journey .hero-intro {
  padding: 14px 16px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(9, 9, 9, 0.12);
}

.hero-proof > div {
  display: flex;
  gap: 5px;
  align-items: baseline;
}

.hero-proof strong {
  font-family: Fraunces, Georgia, serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-proof span {
  color: var(--muted);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Hero: structural fix. Copy stacks ABOVE the illustration in normal flow —
   it no longer overlays the artwork, so it can never collide with a pin again. */
@media (min-width: 761px) {
  .hero-journey {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(28px, 4svh, 44px) 0 0 !important;
  }

  .home-page .hero-journey .hero-copy {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    inset: auto !important;
    display: grid !important;
    width: var(--page) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 2px clamp(24px, 3svh, 40px) !important;
    grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr) !important;
    gap: clamp(48px, 8vw, 118px) !important;
    align-items: end !important;
    pointer-events: auto !important;
  }

  .home-page .hero-journey .hero-intro {
    max-width: 430px;
    margin-right: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
  }

  .map-shell {
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .journey-frame {
    display: block !important;
    height: auto !important;
  }

  .journey-canvas {
    height: auto !important;
  }

  .landscape-viewport {
    height: auto !important;
  }

  .map-shell {
    max-width: 1400px !important;
    margin: 0 auto !important;
  }

  .hero-journey .journey-map {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    overflow: visible;
  }

  .home-page .hero-journey .hero-copy {
    padding: 0 2px clamp(10px, 1.4svh, 16px) !important;
  }
}

/* Final cascade guard: active homepage composition. */
.hero-atlas h1 {
  max-width: 17.5ch;
  font-size: clamp(2.02rem, min(3.12vw, 5.1svh), 3.02rem);
  line-height: 0.98;
}

.site-header .nav a {
  transform: none !important;
}

.identity-section.profile-contact-section {
  padding-block: clamp(68px, 6vw, 96px);
}

.profile-contact-copy h2 {
  font-size: clamp(3.25rem, 4.65vw, 5rem);
}

.profile-contact-lead {
  max-width: 22ch;
}

.profile-contact-summary {
  max-width: 42ch;
}

.home-page > .section {
  padding-block: clamp(52px, 5.3vw, 74px) !important;
}

.home-page #contact .contact-home-panel--simple {
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr) !important;
  gap: clamp(32px, 5vw, 76px) !important;
  padding: clamp(30px, 3.8vw, 46px) !important;
  align-items: center !important;
}

.home-page #contact .contact-home-kicker {
  max-width: 18ch;
  font-size: clamp(1.7rem, 2.7vw, 2.75rem);
}

.home-page #contact .contact-channel-pills {
  grid-template-columns: 1fr !important;
}

@media (min-width: 761px) and (max-height: 780px) {
  .hero-atlas h1 {
    font-size: clamp(1.95rem, 5.15svh, 2.52rem);
    line-height: 0.95;
  }
}

@media (max-width: 980px) {
  .home-page #contact .contact-home-panel--simple {
    grid-template-columns: 1fr !important;
  }

  .home-page #contact .contact-channel-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .hero-atlas h1 {
    max-width: 11.5ch;
    font-size: clamp(2.35rem, 10.8vw, 3.8rem);
  }
}

@media (max-width: 680px) {
  .profile-contact-copy h2 {
    font-size: clamp(3rem, 14vw, 4.15rem);
  }

  .home-page #contact .contact-channel-pills {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE PASS
   Fills gaps across all pages: homepage, Work, Projects, Studio, Writing.
   Three tiers: tablet (≤920px), small-tablet (≤760px), mobile (≤640px).
   ========================================================================== */

/* ---- Tablet: ≤920px ---- */
@media (max-width: 920px) {
  .work-bento {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .work-bento-card--yelloskye {
    grid-row: auto;
  }

  .work-bento-card .bento-stats,
  .work-bento-card--yelloskye .bento-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-feature-grid {
    grid-template-columns: 1fr;
  }

  .studio-card--manager,
  .studio-card--braindrop,
  .studio-card--second-brain,
  .studio-card--prooflog {
    grid-column: 1;
  }

  .story-page .story-hero {
    grid-template-columns: 1fr;
  }

  .story-page .story-hero-copy {
    padding-right: 0;
  }

  .writing-story-page .essay-chapter,
  .writing-story-page .essay-chapter--reverse {
    grid-template-columns: 1fr;
  }

  .writing-story-page .essay-chapter--reverse .essay-chapter-copy,
  .writing-story-page .essay-chapter--reverse .essay-chapter-art {
    grid-column: 1;
    grid-row: auto;
  }

  .home-page #projects .project-folder {
    min-height: clamp(300px, 75vw, 400px);
  }

  .home-page #projects .project-folder .project-slide {
    inset: 20px 28px 26px;
  }

  .home-page #writing .writing-feature-grid {
    grid-template-columns: 1fr;
  }

  .home-page #writing .writing-support-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page #work .work-bento-card {
    height: auto;
    min-height: 0;
    padding: 22px;
  }

  .home-page #work .work-bento-card--yelloskye {
    height: auto;
    min-height: 0;
  }

  .home-page #work .work-executive,
  .home-page #work .work-bento-card--yelloskye .work-executive {
    min-height: auto;
  }

  .home-page #work .work-artifact,
  .home-page #work .work-bento-card--yelloskye .work-artifact {
    height: auto;
    min-height: 220px;
  }

  .home-page #work .ys-evidence-board {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .home-page #work .ys-evidence--website,
  .home-page #work .ys-evidence--brand,
  .home-page #work .ys-evidence--mis,
  .home-page #work .ys-evidence--platform,
  .home-page #work .ys-evidence--hiring,
  .home-page #work .ys-founder-view {
    grid-column: auto;
    grid-row: auto;
  }

  .home-page #work .ys-evidence--mis,
  .home-page #work .ys-evidence--website {
    grid-column: 1 / -1;
  }

  .home-page #work .ys-workstreams {
    gap: 6px;
    padding-inline: 14px;
  }

  .home-page #work .ys-workstreams > div {
    padding-inline: 8px;
  }

  .home-page #work .work-map--ys {
    height: 380px;
  }

  .home-page #work .rayden-workbench,
  .home-page #work .retail-counter {
    grid-template-columns: 1fr 1fr;
  }

  .home-page #work .work-map--rayden,
  .home-page #work .work-map--retail {
    height: auto;
  }

  .home-page #work .work-more-body,
  .home-page #work .work-bento-card--yelloskye .work-more-body {
    position: static;
    grid-template-columns: 1fr;
    margin-top: 14px;
    padding: 16px;
    box-shadow: none;
  }

  .home-page #work .work-bento-card--yelloskye .work-more-result {
    grid-column: auto;
  }
}

/* ---- Small tablet: ≤760px ---- */
@media (max-width: 760px) {
  .hero-atlas-rail {
    display: flex;
    width: 100%;
    padding-left: max(14px, calc((100vw - var(--page)) / 2));
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .hero-atlas-rail::-webkit-scrollbar {
    display: none;
  }

  .hero-atlas-rail a {
    min-width: 160px;
    padding: 12px 14px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .contact-home-panel--simple {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: clamp(24px, 4vw, 36px) !important;
  }

  .contact-home-foot {
    grid-column: 1;
    justify-items: start;
  }

  .contact-home-foot nav {
    justify-content: flex-start;
  }

  .story-page .story-hero {
    padding-top: 64px;
  }

  .story-page .story-hero-copy h1 {
    font-size: clamp(2.6rem, 12vw, 3.8rem);
  }

  .story-hero-visual {
    min-height: 320px;
  }

  .story-page .story-chapter {
    grid-template-columns: 1fr;
  }

  .story-page .chapter-body {
    padding: 24px 20px 28px;
  }

  .chapter-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chapter-proof > div:nth-child(3) {
    border-top: 1px solid rgba(9, 9, 9, 0.15);
    border-left: 0;
    padding-left: 0;
  }

  .chapter-proof > div:nth-child(4) {
    border-top: 1px solid rgba(9, 9, 9, 0.15);
  }

  .chapter-grid {
    grid-template-columns: 1fr;
  }

  .writing-story-page .essay-chapter-art img {
    min-height: 340px;
  }

  .home-page #writing .writing-card,
  .home-page #writing .writing-card--lead,
  .home-page #writing .writing-card--support {
    height: 430px;
  }

  .home-page #writing .writing-support-stack {
    grid-template-columns: 1fr;
  }

  .home-page #work .work-bento-card .bento-stats,
  .home-page #work .work-bento-card--yelloskye .bento-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page #work .ys-evidence-board {
    grid-template-columns: 1fr;
  }

  .home-page #work .ys-evidence--mis,
  .home-page #work .ys-evidence--website {
    grid-column: 1;
  }

  .home-page #work .rayden-workbench,
  .home-page #work .retail-counter {
    grid-template-columns: 1fr;
  }

  .home-page #projects .project-folder {
    min-height: clamp(280px, 85vw, 400px);
  }

  .home-page #projects .project-folder .project-slide {
    inset: 18px 24px 24px;
  }

  .site-header {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 8px 14px 10px;
  }

  .site-header .nav {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    padding: 3px;
    justify-content: space-between;
    overflow-x: auto;
  }

  .site-header .nav a {
    padding: 6px 7px;
    font-size: 0.62rem;
  }

  .hero-journey {
    height: calc(100svh - 78px);
  }

  .home-page #work .ys-workstreams {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .home-page #work .ys-operating-view {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
    text-align: center;
  }

  .home-page #work .ys-operating-view i {
    display: none;
  }

  .home-page #writing .writing-section-foot {
    align-items: flex-start;
  }

  .home-page #contact .contact-channel-pills {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Mobile: ≤640px ---- */
@media (max-width: 640px) {
  .work-bento-card .bento-stats,
  .work-bento-card--yelloskye .bento-stats {
    grid-template-columns: 1fr 1fr;
  }

  .work-bento-card .bento-stats > div {
    padding: 0 8px;
  }

  .work-bento-card .bento-stats > div:first-child {
    padding-left: 0;
  }

  .studio-signals {
    grid-template-columns: 1fr 1fr;
  }

  .studio-signals div:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-top: 1px solid var(--hairline);
  }

  .story-page .story-metric-strip {
    grid-template-columns: 1fr 1fr;
  }

  .story-page .story-metric-strip > div:nth-child(3) {
    border-top: 1px solid rgba(9, 9, 9, 0.16);
    border-left: 0;
  }

  .story-page .story-metric-strip > div:nth-child(4) {
    border-top: 1px solid rgba(9, 9, 9, 0.16);
  }

  .story-page .story-index {
    grid-template-columns: 1fr;
  }

  .story-page .story-index a,
  .story-page .story-index a:nth-child(2),
  .story-page .story-index a:nth-child(3),
  .story-page .story-index a:nth-child(4) {
    border-top: 1px solid rgba(9, 9, 9, 0.16);
    border-left: 0;
  }

  .story-page .story-index a:first-child {
    border-top: 0;
  }

  .story-page .chapter-head h2 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .story-page .chapter-proof {
    grid-template-columns: 1fr 1fr;
  }

  .story-page .chapter-proof > div:nth-child(3) {
    border-top: 1px solid rgba(9, 9, 9, 0.15);
    border-left: 0;
  }

  .story-page .chapter-proof > div:nth-child(4) {
    border-top: 1px solid rgba(9, 9, 9, 0.15);
  }

  .story-page .chapter-grid {
    grid-template-columns: 1fr;
  }

  .story-page .story-closing h2 {
    font-size: clamp(2rem, 12vw, 3.5rem);
  }

  .story-closing h2 {
    font-size: clamp(2.2rem, 12vw, 4rem);
  }

  .home-page #work .work-bento-card .bento-stats,
  .home-page #work .work-bento-card--yelloskye .bento-stats {
    grid-template-columns: 1fr 1fr;
  }

  .home-page #work .ys-evidence-board {
    grid-template-columns: 1fr;
  }

  .home-page #writing .writing-card,
  .home-page #writing .writing-card--lead,
  .home-page #writing .writing-card--support {
    height: 400px;
  }

  .home-page #contact .contact-home-panel--simple {
    padding: 20px !important;
  }

  .home-page #contact .contact-home-foot {
    grid-column: 1;
  }

  .home-page #projects .project-folder {
    min-height: clamp(260px, 90vw, 380px);
  }

  .home-page #projects .project-folder .project-slide {
    inset: 16px 22px 22px;
  }

  .hero-atlas-rail a {
    min-width: 150px;
    padding: 11px 12px;
  }

  .contact-home-panel--simple {
    padding: clamp(20px, 4vw, 28px) !important;
  }
}

/* ---- Extra small: ≤480px ---- */
@media (max-width: 480px) {
  .work-bento-card .bento-stats,
  .work-bento-card--yelloskye .bento-stats {
    grid-template-columns: 1fr;
  }

  .work-bento-card--yelloskye .bento-stats {
    grid-template-columns: 1fr 1fr;
  }

  .studio-signals {
    grid-template-columns: 1fr;
  }

  .studio-signals div:last-child {
    grid-column: 1;
    border-top: 1px solid var(--hairline);
  }

  .story-page .story-metric-strip {
    grid-template-columns: 1fr;
  }

  .story-page .story-metric-strip > div {
    border-left: 0;
  }

  .story-page .story-metric-strip > div + div {
    border-top: 1px solid rgba(9, 9, 9, 0.16);
  }

  .story-page .chapter-proof {
    grid-template-columns: 1fr;
  }

  .story-page .chapter-proof > div {
    border-left: 0;
  }

  .story-page .chapter-proof > div + div {
    border-top: 1px solid rgba(9, 9, 9, 0.15);
  }

  .home-page #work .bento-stats,
  .home-page #work .work-bento-card .bento-stats,
  .home-page #work .work-bento-card--yelloskye .bento-stats {
    grid-template-columns: 1fr;
  }

  .home-page #writing .writing-card,
  .home-page #writing .writing-card--lead,
  .home-page #writing .writing-card--support {
    height: 380px;
  }

  .hero-atlas-rail a {
    min-width: 140px;
    padding: 10px 10px;
  }

  .hero-atlas-rail strong {
    font-size: 0.62rem;
  }

  .hero-atlas-rail small {
    font-size: 0.42rem;
  }
}

/* ==========================================================================
   2026-08-24 RESPONSIVE FOUNDATION
   Final, shared device layer for the complete archive. This intentionally sits
   last so every route inherits the same canvas, navigation, type, touch and
   overflow rules after the earlier route-specific visual systems.
   ========================================================================== */

:root {
  --responsive-gutter: clamp(16px, 3vw, 28px);
  --page: min(1240px, calc(100% - (var(--responsive-gutter) * 2)));
}

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

*,
*::before,
*::after {
  min-width: 0;
}

img,
video,
canvas,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

:where(h1, h2, h3, p, li, dd, figcaption, a, span, strong) {
  overflow-wrap: break-word;
}

.page,
.section,
.hero,
.story-hero,
.story-chapters,
.story-closing,
.dossier-nav,
.site-footer {
  max-width: 100%;
}

.site-header {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.site-header .mark,
.site-header .contact-pill,
.site-header .nav a,
.project-slideshow-controls button,
.register-filters .chip,
.button,
.story-cta,
.dossier-nav a {
  min-height: 44px !important;
}

.contact-home-foot nav a,
.contact-links a,
.preview-more summary,
.work-more summary,
.ledger-more summary,
.writing-direct-link,
.writing-more-link {
  min-height: 44px !important;
}

.hero-atlas-rail a {
  min-height: 44px !important;
}

@media (max-width: 1024px) {
  .project-slideshow-controls button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .project-slideshow-progress button,
  .project-slideshow-progress button.is-active {
    position: relative;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    background: transparent;
  }

  .project-slideshow-progress button::after {
    position: absolute;
    top: 50%;
    right: 5px;
    left: 5px;
    height: 3px;
    border-radius: 999px;
    background: rgba(9, 9, 9, 0.2);
    content: "";
    transform: translateY(-50%);
  }

  .project-slideshow-progress button.is-active::after {
    background: var(--brass);
  }
}

.site-header .mark {
  display: inline-grid;
  min-width: 44px;
  place-items: center start;
}

.site-header .nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-atlas {
  width: 100%;
  margin-left: 0;
}

.chapter-artifact,
.story-hero-visual,
.ledger-visual,
.studio-visual,
.work-artifact,
.essay-chapter-art,
.writing-artwork {
  max-width: 100%;
  overflow: hidden;
}

.chapter-artifact > figcaption,
.story-hero-visual > figcaption,
.ledger-visual > figcaption,
.studio-visual > figcaption,
.work-artifact > figcaption {
  flex-wrap: wrap;
  row-gap: 4px;
}

@media (max-width: 1100px) {
  :root {
    --responsive-gutter: clamp(18px, 2.8vw, 26px);
  }

  .hero-atlas h1,
  .story-page .story-hero-copy h1,
  .compact-hero h1,
  .dossier-head h1 {
    max-width: 100%;
  }

  .home-page #contact .contact-home-panel--simple,
  .contact-home-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 920px) {
  :root {
    --responsive-gutter: clamp(18px, 3.5vw, 26px);
  }

  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .profile-contact-copy h2,
  .profile-contact-lead,
  .profile-contact-summary {
    max-width: 100%;
  }

  .dossier-grid,
  .dossier-section,
  .posting-detail,
  .studio-lede,
  .writing-preview,
  .contact-feature {
    grid-template-columns: 1fr;
  }

  .dossier-section > :where(h2, p, ul, div) {
    grid-column: 1;
  }

  .dossier-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .register-row {
    grid-template-columns: 70px 78px minmax(0, 1fr) 88px;
  }

  .register-row .reg-kind {
    display: none;
  }

  .home-page #projects .ledger-case {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }

  .home-page #projects .ledger-copy,
  .home-page #projects .project-folder,
  .home-page #projects .ledger-more,
  .home-page #projects .ledger-more[open] {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  :root {
    --header-offset: 132px;
    --responsive-gutter: clamp(14px, 4vw, 20px);
  }

  .site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    display: grid;
    min-height: 0;
    padding:
      max(7px, env(safe-area-inset-top))
      max(var(--responsive-gutter), env(safe-area-inset-right))
      9px
      max(var(--responsive-gutter), env(safe-area-inset-left));
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 44px 50px;
    gap: 6px 10px;
    align-items: center;
  }

  .site-header .mark {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    font-size: 1.85rem;
  }

  .site-header .contact-pill {
    position: static;
    display: inline-flex;
    min-width: 100px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 4px 5px 4px 14px !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-items: center;
    justify-content: space-between;
  }

  .site-header .contact-pill span {
    display: inline !important;
  }

  .site-header .contact-pill b {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .site-header .nav {
    display: grid;
    width: 100%;
    max-width: none;
    min-height: 50px !important;
    height: 50px;
    margin: 0;
    padding: 3px !important;
    overflow: visible;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
  }

  .site-header .nav a {
    width: 100%;
    min-height: 44px !important;
    padding: 4px 2px !important;
    font-size: clamp(0.56rem, 2.45vw, 0.66rem);
    white-space: nowrap;
  }

  .hero-atlas {
    padding-top: clamp(30px, 9vw, 48px);
    overflow: visible;
  }

  .hero-atlas-copy {
    width: var(--page);
  }

  .hero-atlas h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.25rem, 10.6vw, 3.35rem);
    letter-spacing: -0.04em;
    line-height: 0.98;
  }

  .hero-atlas-thesis {
    max-width: 36rem;
    margin-top: 24px;
  }

  .hero-atlas-thesis p {
    font-size: 1rem;
  }

  .hero-atlas-thesis a {
    min-height: 44px;
    margin-top: 10px;
    align-items: center;
  }

  .hero-atlas-visual {
    width: 100%;
    margin-top: 22px;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: hidden;
  }

  .hero-atlas-visual img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .hero-atlas-rail {
    display: grid;
    width: var(--page);
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    scroll-snap-type: none;
  }

  .hero-atlas-rail a {
    width: 100%;
    min-width: 0;
    min-height: 62px;
    padding: 10px 8px;
    flex: initial;
  }

  .hero-atlas-rail a:nth-child(odd) {
    border-left: 0;
  }

  .hero-atlas-rail a:nth-child(n + 3) {
    border-top: 1px solid rgba(9, 9, 9, 0.15);
  }

  .hero-atlas-rail a:last-child {
    grid-column: 1 / -1;
  }

  .hero-atlas-rail strong,
  .hero-atlas-rail small {
    white-space: normal;
  }

  .identity-section.profile-contact-section,
  .home-page > .section,
  .section {
    padding-block: clamp(52px, 14vw, 74px) !important;
  }

  .profile-contact-copy h2 {
    max-width: 100%;
    font-size: clamp(2.85rem, 12vw, 4rem);
    letter-spacing: -0.04em;
    line-height: 0.94;
  }

  .profile-contact-sheet {
    max-width: 100%;
  }

  .work-bento,
  .studio-feature-grid,
  .writing-feature-grid,
  .ledger-case,
  .story-page .story-hero,
  .story-page .story-chapter,
  .essay-chapter,
  .essay-chapter--reverse {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .work-bento-card,
  .studio-card,
  .ledger-case,
  .writing-card,
  .story-chapter,
  .essay-chapter {
    max-width: 100%;
    box-sizing: border-box;
  }

  .home-page #work .work-artifact,
  .home-page #work .work-map--ys,
  .home-page #work .work-map--rayden,
  .home-page #work .work-map--retail {
    width: 100%;
    min-height: 0;
    height: auto;
  }

  .wk-wall-grid {
    grid-template-columns: 1fr;
  }

  .home-page #projects .ledger-case,
  .home-page #contact .contact-home-panel--simple,
  .contact-home-panel {
    padding: clamp(18px, 5vw, 26px) !important;
  }

  .ledger-brief,
  .home-page #projects .ledger-metrics,
  .studio-signals,
  .chapter-proof,
  .story-page .chapter-proof,
  .story-page .story-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page #projects .project-folder {
    width: 100%;
    min-height: clamp(300px, 92vw, 430px);
  }

  .project-slideshow-controls button,
  .project-slideshow-progress button {
    min-width: 44px;
    min-height: 44px;
  }

  .work-ladder-result a,
  .work-more summary,
  .ledger-more summary,
  .preview-more summary,
  .writing-direct-link,
  .writing-more-link,
  .project-readmore a,
  .readmore-column a {
    display: inline-flex;
    min-height: 44px !important;
    align-items: center;
  }

  .project-readmore {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .readmore-column {
    width: 100%;
    max-width: 100%;
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .readmore-column:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .home-page #writing .writing-card,
  .home-page #writing .writing-card--lead,
  .home-page #writing .writing-card--support {
    height: auto;
    min-height: 390px;
  }

  .writing-card .writing-artwork,
  .essay-chapter-art {
    min-height: 260px;
  }

  .story-page .story-hero {
    padding-top: clamp(48px, 12vw, 76px);
  }

  .story-page .story-hero-copy h1,
  .compact-hero h1,
  .dossier-head h1,
  .contact-page h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.5rem, 11vw, 3.8rem);
    letter-spacing: -0.04em;
    line-height: 0.98;
  }

  .story-page .story-deck,
  .compact-hero .intro,
  .dossier-head .intro,
  .contact-page .intro {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.55;
  }

  .story-hero-visual {
    min-height: 0;
  }

  .story-hero-visual > img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }

  .story-page .story-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-page .story-index a,
  .story-page .story-index a:nth-child(n) {
    min-height: 84px;
    border-top: 1px solid rgba(9, 9, 9, 0.16);
    border-left: 0;
  }

  .story-page .story-index a:nth-child(even) {
    border-left: 1px solid rgba(9, 9, 9, 0.16);
  }

  .story-page .chapter-rail {
    display: grid;
    padding: 16px 18px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 4px 12px;
  }

  .story-page .chapter-rail > span {
    grid-row: 1 / span 3;
  }

  .story-page .chapter-body {
    padding: clamp(22px, 6vw, 32px) var(--responsive-gutter) clamp(30px, 8vw, 44px);
  }

  .story-page .chapter-head h2,
  .story-closing h2 {
    max-width: 100%;
    font-size: clamp(2rem, 9.6vw, 3.3rem);
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .chapter-grid {
    grid-template-columns: 1fr;
  }

  .chapter-artifact {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .chapter-artifact svg {
    min-width: min(620px, 175vw);
  }

  .writing-story-page .essay-chapter-copy,
  .writing-story-page .essay-chapter-art,
  .writing-story-page .essay-chapter--reverse .essay-chapter-copy,
  .writing-story-page .essay-chapter--reverse .essay-chapter-art {
    grid-column: 1;
    grid-row: auto;
  }

  .dossier-head .catalog-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: flex-start;
  }

  .dossier-grid {
    gap: 30px;
  }

  .dossier-section {
    row-gap: 14px;
  }

  .dossier-cols {
    grid-template-columns: 1fr;
  }

  .dossier-nav {
    align-items: stretch;
  }

  .dossier-nav a {
    display: flex;
    padding-block: 11px;
    align-items: center;
  }

  .register-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .register-filters .chip {
    width: 100%;
    padding: 8px 6px;
  }

  .register-filters .chip:first-child {
    grid-column: 1 / -1;
  }

  .register-row {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 6px 14px;
    padding-block: 18px;
  }

  .register-row .reg-date,
  .register-row .reg-kind {
    display: none;
  }

  .register-row .reg-flag {
    grid-column: 2;
  }

  .contact-page,
  .contact-page .contact-home-panel,
  .contact-page .contact-home-intro,
  .contact-page .contact-fit,
  .contact-page .contact-home-foot {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contact-links,
  .hero-actions,
  .contact-home-foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .contact-links a,
  .contact-home-foot nav a {
    display: inline-flex;
    min-height: 44px;
    padding: 9px 12px;
    align-items: center;
  }

  .site-footer {
    width: var(--page);
    margin-inline: auto;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 480px) {
  :root {
    --responsive-gutter: 14px;
  }

  .site-header .contact-pill {
    min-width: 94px !important;
  }

  .hero-atlas h1,
  .story-page .story-hero-copy h1,
  .compact-hero h1,
  .dossier-head h1,
  .contact-page h1 {
    font-size: clamp(2.2rem, 10.8vw, 3rem);
  }

  .hero-atlas-eyebrow,
  .catalog-line,
  .file-meta {
    letter-spacing: 0.065em;
  }

  .profile-contact-copy h2 {
    font-size: clamp(2.65rem, 12vw, 3.45rem);
  }

  .ledger-brief,
  .home-page #projects .ledger-metrics,
  .studio-signals,
  .story-page .story-metric-strip,
  .story-page .chapter-proof {
    grid-template-columns: 1fr;
  }

  .story-page .story-index {
    grid-template-columns: 1fr;
  }

  .story-page .story-index a:nth-child(n) {
    min-height: 72px;
    border-left: 0;
  }

  .story-page .chapter-rail {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .chapter-artifact svg {
    min-width: min(560px, 180vw);
  }

  .dossier-meta div {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .dossier-nav {
    flex-direction: column;
    gap: 4px;
  }

  .dossier-nav a:last-child {
    justify-content: flex-end;
    text-align: right;
  }

  .register-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .register-filters .chip:first-child {
    grid-column: 1 / -1;
  }

  .hero-actions .button,
  .contact-email {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .site-header {
    padding-inline: 10px;
  }

  .site-header .contact-pill {
    min-width: 44px !important;
    width: 44px;
    padding: 5px !important;
  }

  .site-header .contact-pill span {
    position: absolute;
    display: block !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .site-header .nav a {
    font-size: 0.54rem;
  }
}

@media (pointer: coarse) {
  .hero-atlas-rail a,
  .story-index a,
  .writing-direct-link,
  .writing-explore-link,
  .project-readmore a,
  .readmore-column a,
  .crumb {
    min-height: 44px;
  }

  .site-header .nav a,
  .contact-home-foot nav a,
  .contact-links a {
    min-height: 44px !important;
  }

  .project-slideshow-controls button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .project-slideshow-progress button,
  .project-slideshow-progress button.is-active {
    position: relative;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    background: transparent;
  }

  .project-slideshow-progress button::after {
    position: absolute;
    top: 50%;
    right: 5px;
    left: 5px;
    height: 3px;
    border-radius: 999px;
    background: rgba(9, 9, 9, 0.2);
    content: "";
    transform: translateY(-50%);
  }

  .project-slideshow-progress button.is-active::after {
    background: var(--brass);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Final mobile composition overrides. Keep this block last. */
@media (max-width: 760px) {
  :root { --header-offset: 72px; }

  .site-header {
    min-height: 64px;
    padding: max(8px, env(safe-area-inset-top)) max(var(--responsive-gutter), env(safe-area-inset-right)) 8px max(var(--responsive-gutter), env(safe-area-inset-left));
    grid-template-columns: 44px minmax(176px, 1fr) auto;
    grid-template-rows: 48px;
    gap: 8px;
  }

  .site-header .mark { grid-column: 1; grid-row: 1; }

  .site-header .nav {
    display: grid;
    width: 100%;
    min-height: 48px !important;
    height: 48px;
    margin: 0;
    padding: 2px !important;
    overflow: hidden;
    border: 1px solid rgba(9, 9, 9, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 22px rgba(9, 9, 9, 0.06);
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 0;
  }

  .site-header .nav a {
    min-height: 44px !important;
    height: 44px;
    padding: 0 clamp(4px, 1.5vw, 10px) !important;
    border-radius: 999px;
    font-size: clamp(0.64rem, 1.65vw, 0.72rem);
  }

  .site-header .nav a::after { display: none; }
  .site-header .nav a:hover,
  .site-header .nav a:focus-visible { background: #f7f7f3; }
  .site-header .nav a[aria-current="page"] { background: var(--brass); color: var(--ink); }
  .site-header .contact-pill { grid-column: 3; grid-row: 1; }

  .hero-atlas-visual {
    height: auto;
    aspect-ratio: 1672 / 941;
    overflow: visible;
  }

  .hero-atlas-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .hero-atlas-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero-atlas-rail a { min-height: 72px !important; grid-column: span 2; }
  .hero-atlas-rail a + a,
  .hero-atlas-rail a:nth-child(odd),
  .hero-atlas-rail a:nth-child(n + 3) { border-top: 0; border-left: 0; }
  .hero-atlas-rail a:nth-child(2),
  .hero-atlas-rail a:nth-child(3),
  .hero-atlas-rail a:nth-child(5) { border-left: 1px solid rgba(9, 9, 9, 0.15); }
  .hero-atlas-rail a:nth-child(4),
  .hero-atlas-rail a:nth-child(5) { border-top: 1px solid rgba(9, 9, 9, 0.15); }
  .hero-atlas-rail a:nth-child(4) { grid-column: 1 / 4; }
  .hero-atlas-rail a:nth-child(5) { grid-column: 4 / 7; }
}

@media (max-width: 480px) {
  .site-header {
    padding-inline: max(10px, env(safe-area-inset-left));
    grid-template-columns: 44px minmax(176px, 1fr) 44px;
    gap: 4px;
  }

  .site-header .contact-pill { width: 44px; min-width: 44px !important; padding: 5px !important; }
  .site-header .contact-pill span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hero-atlas-rail a { padding-inline: 5px; gap: 6px; }
  .hero-atlas-rail a > span:first-child { width: 26px; height: 26px; }
  .hero-atlas-rail strong { font-size: 0.68rem; }
  .hero-atlas-rail small { font-size: 0.44rem; }
}

/* Final desktop hero flow. The artwork uses its real ratio, never a tall box. */
@media (min-width: 761px) {
  .hero-atlas {
    --hero-art-width: min(
      var(--page),
      1120px,
      calc(max(320px, (100svh - 350px)) * 1.7768331562)
    );
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: clamp(18px, 2.2svh, 26px);
    overflow: visible;
    grid-template-rows: auto auto auto;
  }

  .hero-atlas-visual {
    width: var(--hero-art-width);
    height: auto;
    min-height: 0;
    margin: clamp(16px, 2.2svh, 24px) auto 0;
    overflow: visible;
    aspect-ratio: 1672 / 941;
  }

  .hero-atlas-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .hero-atlas-rail {
    width: var(--hero-art-width);
  }
}

/* Responsive finishing pass: touch reach, scrollable evidence and narrow-screen safety. */
.writing-medium-link,
.hero-atlas-thesis a,
.crumb a {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 1024px), (pointer: coarse) {
  .writing-medium-link,
  .hero-atlas-thesis a,
  .crumb a {
    min-height: 44px;
  }

  .writing-medium-link,
  .crumb a {
    padding-block: 10px;
  }

  .crumb a {
    min-width: 44px;
    padding-inline: 7px;
  }
}

@media (max-width: 760px) {
  .chapter-artifact,
  .story-hero-visual,
  .ledger-visual,
  .studio-visual,
  .work-artifact {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .chapter-artifact > svg,
  .studio-visual > svg,
  .work-artifact > svg,
  .ledger-visual > svg {
    max-width: none;
  }

  .chapter-artifact > figcaption,
  .story-hero-visual > figcaption,
  .ledger-visual > figcaption,
  .studio-visual > figcaption,
  .work-artifact > figcaption {
    position: sticky;
    left: 0;
    width: 100%;
    min-width: 100%;
  }
}

/* Unified navigation pill: brand, routes and contact share one centered control. */
.site-header {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 1000;
  width: min(calc(100% - 32px), 880px);
  min-height: 60px;
  margin: 10px auto 0;
  padding: 6px 8px;
  border: 1px solid rgba(9, 9, 9, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(9, 9, 9, 0.08);
  grid-template-columns: 68px minmax(0, 1fr) 124px;
  gap: 6px;
  align-items: center;
}

.site-header .mark {
  display: inline-grid;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 10px;
  place-items: center;
}

.site-header .nav {
  display: grid;
  width: 100%;
  min-height: 48px !important;
  height: 48px;
  margin: 0;
  padding: 2px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

.site-header .nav a {
  width: 100%;
  min-height: 44px !important;
  padding-inline: 8px !important;
  border-radius: 999px;
  justify-content: center;
}

.site-header .contact-pill {
  position: static;
  width: 100%;
  min-width: 0 !important;
  height: 48px !important;
  padding: 4px 5px 4px 12px !important;
  border: 0;
  background: transparent;
  justify-content: space-between;
}

.site-header .contact-pill span {
  white-space: nowrap;
}

.site-header .contact-pill:hover,
.site-header .contact-pill:focus-visible {
  background: var(--brass-soft);
}

@media (max-width: 760px) {
  .site-header {
    top: max(8px, env(safe-area-inset-top));
    width: calc(100% - 16px);
    min-height: 56px;
    margin-top: 8px;
    padding: 4px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-rows: 48px;
    gap: 2px;
  }

  .site-header .mark {
    width: 44px;
    height: 48px;
    padding: 0;
    font-size: 1.65rem;
  }

  .site-header .nav {
    grid-column: 2;
    grid-row: 1;
    padding: 2px !important;
  }

  .site-header .nav a {
    padding-inline: 2px !important;
    font-size: clamp(0.56rem, 2.25vw, 0.68rem);
  }

  .site-header .contact-pill {
    width: 44px;
    min-width: 44px !important;
    height: 48px !important;
    padding: 5px !important;
    grid-column: 3;
    grid-row: 1;
  }

  .site-header .contact-pill span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  .site-header {
    width: calc(100% - 8px);
  }

  .site-header .nav a {
    font-size: 0.52rem;
  }
}

/* Phase 1: make the operator category and commercial evidence legible immediately. */
.hero-proof-grid {
  display: grid;
  margin: clamp(13px, 1.8svh, 19px) 0 0;
  padding: 0;
  border-top: 1px solid rgba(9, 9, 9, 0.18);
  border-bottom: 1px solid rgba(9, 9, 9, 0.18);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.hero-proof-grid li {
  display: grid;
  min-width: 0;
  padding: clamp(8px, 1.1svh, 11px) 10px clamp(8px, 1.1svh, 11px) 0;
  gap: 2px;
}

.hero-proof-grid li:nth-child(even) {
  padding-right: 0;
  padding-left: 12px;
  border-left: 1px solid rgba(9, 9, 9, 0.14);
}

.hero-proof-grid li:nth-child(n + 3) {
  border-top: 1px solid rgba(9, 9, 9, 0.14);
}

.hero-proof-grid strong {
  font-size: clamp(0.9rem, min(1.1vw, 1.8svh), 1.05rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}

.hero-proof-grid span {
  overflow: hidden;
  color: var(--muted);
  font: 700 clamp(0.55rem, 0.59vw, 0.62rem)/1.35 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-contact-copy h2 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 4vw, 4.45rem);
}

@media (min-width: 761px) {
  .site-header .contact-pill span {
    display: inline !important;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .hero-proof-grid {
    margin-top: 9px;
  }

  .hero-proof-grid li {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

@media (max-width: 760px) {
  .hero-proof-grid {
    margin-top: 18px;
  }

  .hero-proof-grid li {
    min-height: 54px;
    padding-block: 10px;
  }

  .hero-proof-grid strong {
    font-size: 1.05rem;
  }

  .hero-proof-grid span {
    font-size: clamp(0.55rem, 2.3vw, 0.62rem);
  }

  .profile-contact-copy h2 {
    max-width: 11ch;
    font-size: clamp(2.7rem, 12.5vw, 4rem);
  }
}