/* ============================================================
   Women — BUILD (L3) layout vocabulary
   Reuses oxblood palette + .w-hero. Adds new section types so
   the page reads as different from the L2 index.
   ============================================================ */

/* ---------- custom L2 surface: fabric grain + irregular tailor grid ---------- */
body.women-tailor-surface {
  isolation: isolate;
}

body.women-tailor-surface::before,
body.women-tailor-surface::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.women-tailor-surface::before {
  background-image:
    radial-gradient(ellipse 760px 520px at 8% 12%, transparent 0 47%, rgba(244,234,215,0.032) 47.2% 47.7%, transparent 48%),
    radial-gradient(ellipse 980px 620px at 88% 36%, transparent 0 54%, rgba(244,234,215,0.026) 54.2% 54.7%, transparent 55%),
    radial-gradient(ellipse 680px 440px at 58% 82%, transparent 0 58%, rgba(212,161,74,0.028) 58.2% 58.8%, transparent 59%),
    repeating-linear-gradient(90deg, rgba(244,234,215,0.035) 0 1px, transparent 1px 117px, rgba(212,161,74,0.028) 118px 119px, transparent 119px 331px),
    repeating-linear-gradient(0deg, rgba(244,234,215,0.024) 0 1px, transparent 1px 149px, rgba(244,234,215,0.018) 150px 151px, transparent 151px 397px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(244,234,215,0.022) 18px 19px, transparent 19px 42px);
  background-size:
    1180px 900px,
    1320px 980px,
    1040px 840px,
    331px 100%,
    100% 397px,
    421px 100%;
  background-position:
    -160px 20px,
    calc(100% + 120px) 220px,
    44% calc(100% - 80px),
    19px 0,
    0 73px,
    211px 0;
  opacity: 0.76;
  mix-blend-mode: screen;
}

body.women-tailor-surface::after {
  background-image:
    radial-gradient(circle at 17% 29%, rgba(244,234,215,0.11) 0 0.55px, transparent 0.9px),
    radial-gradient(circle at 72% 68%, rgba(212,161,74,0.08) 0 0.5px, transparent 0.86px),
    repeating-linear-gradient(115deg, transparent 0 21px, rgba(244,234,215,0.018) 21px 22px, transparent 22px 43px),
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(244,234,215,0.028) 25px 26px, transparent 26px 48px);
  background-size:
    11px 11px,
    17px 17px,
    620px 620px,
    1px 73px;
  background-position:
    0 0,
    5px 9px,
    31px -90px,
    calc(100% - 52px) 0;
  opacity: 0.22;
  mix-blend-mode: soft-light;
}

body.women-tailor-surface > #root {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  body.women-tailor-surface::before {
    opacity: 0.45;
    background-size:
      760px 620px,
      860px 680px,
      720px 620px,
      257px 100%,
      100% 317px,
      337px 100%;
  }
  body.women-tailor-surface::after { opacity: 0.16; }
}

/* ---------- L3 hero variant: shorter, with crumb ---------- */
.w-hero.l3 {
  min-height: clamp(620px, 80vh, 820px);
}
.w-hero.l3 .copy { margin-top: clamp(40px, 7vw, 96px); }
.w-hero.l3 .megaword { font-size: clamp(96px, 15vw, 220px); }

/* breadcrumb */
.crumb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.crumb a { color: var(--ink-dim); transition: color 0.2s; }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--ink-mute); }
.crumb .here { color: var(--ink); }

/* hero stat strip — replaces the lede menu since the menu is sticky below */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-strong);
  padding-top: 20px;
  margin-top: 32px;
  gap: 0;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--bg) 50%, transparent));
  backdrop-filter: blur(2px);
}
.hero-stats .stat {
  border-right: 1px solid var(--rule);
  padding: 0 20px 0 0;
}
.hero-stats .stat:last-child { border-right: none; }
.hero-stats .stat .n {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--ink);
}
.hero-stats .stat .n .gold { color: var(--gold); }
.hero-stats .stat .l {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 8px;
}
@media (max-width: 800px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .hero-stats .stat:nth-child(2) { border-right: none; }
}

/* ============================================================
   B-INTRO — editorial slug. Three short columns, no portrait.
   ============================================================ */
.b-intro {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: 64px;
  align-items: start;
}
.b-intro .standfirst {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  position: sticky; top: 110px;
  display: flex; flex-direction: column; gap: 12px;
}
.b-intro .standfirst .sf-row {
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  color: var(--ink-dim);
}
.b-intro .standfirst .sf-row span:last-child { color: var(--ink); }
.b-intro .body {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
  column-count: 2;
  column-gap: 56px;
  column-rule: 1px solid var(--rule);
}
.b-intro .body p {
  margin: 0 0 1em;
  break-inside: avoid;
}
.b-intro .body p:first-child::first-letter {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 4em;
  line-height: 0.85;
  float: left;
  color: var(--gold);
  margin: 0.05em 0.12em -0.05em -0.04em;
}
.b-intro .body em { font-style: italic; color: var(--accent-soft); }
@media (max-width: 1000px) {
  .b-intro { grid-template-columns: 1fr; gap: 28px; }
  .b-intro .standfirst { position: static; flex-direction: row; flex-wrap: wrap; }
  .b-intro .standfirst .sf-row { flex: 1 1 220px; }
  .b-intro .body { column-count: 1; }
}

/* ============================================================
   Shared L3 section header (smaller than L2)
   ============================================================ */
.l3-sec {
  border-top: 1px solid var(--rule);
  padding: clamp(56px, 6vw, 96px) 0;
}
.l3-head {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.l3-head .num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 0.85;
  color: var(--gold);
}
.l3-head .titles {
  display: flex; flex-direction: column; gap: 8px;
}
.l3-head .eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.l3-head .title {
  font-family: var(--f-display);
  font-size: clamp(36px, 4vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
}
.l3-head .title .it { font-style: italic; color: var(--gold); }
.l3-head .meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: right;
  white-space: nowrap;
  line-height: 1.7;
}
@media (max-width: 800px) {
  .l3-head { grid-template-columns: 1fr; gap: 8px; }
  .l3-head .meta { text-align: left; }
  .l3-head .title { font-size: clamp(32px, 7vw, 44px); }
}
.l3-lede {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: 720px;
  margin: 0 0 36px;
}

/* ============================================================
   01 — BASICS · big editorial card spread (1 hero + 4 small)
   ============================================================ */
.basics-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 720px;
}
.basics-grid .b {
  position: relative;
  background-size: cover; background-position: center;
  overflow: hidden;
  cursor: pointer;
  filter: saturate(0.92);
  transition: filter 0.3s;
}
.basics-grid .b:hover { filter: saturate(1.08); }
.basics-grid .b::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
}
.basics-grid .b1 { grid-column: 1; grid-row: 1 / span 2; }
.basics-grid .b .label {
  position: absolute; left: 22px; bottom: 22px; right: 22px;
  z-index: 2; color: var(--ink);
}
.basics-grid .b .label .num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: block; margin-bottom: 6px;
}
.basics-grid .b .label .t {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 4px;
}
.basics-grid .b1 .label .t { font-size: 38px; line-height: 1; }
.basics-grid .b .label .t .it { font-style: italic; }
.basics-grid .b .label .d {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}
@media (max-width: 1000px) {
  .basics-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .basics-grid .b { aspect-ratio: 4/5; }
  .basics-grid .b1 { grid-column: 1 / span 2; grid-row: auto; aspect-ratio: 16/9; }
}

/* ============================================================
   02 — OUTERWEAR · split image + checklist
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}
.split.reverse { grid-template-columns: 1fr 1.05fr; }
.split.reverse .split-img { order: 2; }
.split.reverse .split-body { order: 1; }
.split-img {
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  position: relative;
  filter: saturate(0.92);
}
.split-img .stamp {
  position: absolute; top: 18px; left: 18px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 6px 10px;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
}
.checklist { display: flex; flex-direction: column; }
.checklist .row {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: padding 0.2s;
}
.checklist .row:last-child { border-bottom: 1px solid var(--rule); }
.checklist .row:hover { padding-left: 8px; }
.checklist .row .n {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.checklist .row .t {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}
.checklist .row .t .it { font-style: italic; }
.checklist .row .t small {
  display: block;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 4px;
}
.checklist .row .arr {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--ink-mute);
  transition: transform 0.2s, color 0.2s;
}
.checklist .row:hover .arr { color: var(--gold); transform: translateX(6px); }
@media (max-width: 1000px) {
  .split, .split.reverse { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse .split-img { order: 1; } .split.reverse .split-body { order: 2; }
}

/* ============================================================
   03 — FOOTWEAR · numbered horizontal index
   ============================================================ */
.f-index { display: flex; flex-direction: column; }
.f-row {
  display: grid;
  grid-template-columns: 100px 1.1fr 1.4fr 100px;
  gap: 32px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: padding 0.25s, background 0.25s;
}
.f-row:last-child { border-bottom: 1px solid var(--rule); }
.f-row:hover { padding-left: 8px; background: rgba(0,0,0,0.08); }
.f-row .big {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 0.85;
  color: var(--gold);
}
.f-row h4 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
}
.f-row h4 .it { font-style: italic; }
.f-row .desc {
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.f-row .meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
}
@media (max-width: 800px) {
  .f-row { grid-template-columns: 60px 1fr; gap: 16px; }
  .f-row .desc, .f-row .meta { grid-column: 2; }
  .f-row .meta { text-align: left; }
}

/* ============================================================
   04 — ACCESSORIES · small tile grid (4-col)
   ============================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.tile {
  background: var(--bg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  min-height: 220px;
  transition: background 0.25s;
  position: relative;
}
.tile:hover { background: color-mix(in oklab, var(--bg) 88%, white); }
.tile .num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.tile h5 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}
.tile h5 .it { font-style: italic; }
.tile p {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}
.tile .tag {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 1000px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   05 — HANDBAGS · product card row, scroll horizontal
   ============================================================ */
.bag-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.bag {
  display: flex; flex-direction: column;
  cursor: pointer;
}
.bag .img {
  position: relative;
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  background-color: var(--bg-elev);
  filter: saturate(0.92);
  transition: filter 0.3s;
  margin-bottom: 14px;
}
.bag:hover .img { filter: saturate(1.08); }
.bag .img .badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 4px 8px;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(6px);
}
.bag .num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.bag h5 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.bag h5 .it { font-style: italic; }
.bag p {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 1000px) { .bag-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bag-row { grid-template-columns: 1fr; } }

/* ============================================================
   06 — WORK WARDROBE · text-forward "seven pieces" index
   ============================================================ */
.work-spread {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.work-spread .col-left h3 {
  font-family: var(--f-display);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.work-spread .col-left h3 .it { font-style: italic; color: var(--gold); }
.work-spread .col-left p {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 380px;
}
.work-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.work-list .it {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: padding 0.2s;
}
.work-list .it:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--rule); }
.work-list .it:nth-child(even) { padding-left: 24px; }
.work-list .it:hover { padding-left: 8px; }
.work-list .it:nth-child(even):hover { padding-left: 32px; }
.work-list .it .n {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.work-list .it h6 {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
}
.work-list .it h6 .it-i { font-style: italic; }
.work-list .it p {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 1000px) {
  .work-spread { grid-template-columns: 1fr; gap: 32px; }
  .work-list { grid-template-columns: 1fr; }
  .work-list .it, .work-list .it:nth-child(odd), .work-list .it:nth-child(even) {
    padding: 22px 0; border-right: none; padding-right: 0; padding-left: 0;
  }
}

/* ============================================================
   07 — CASUAL · image quartet with overlays
   ============================================================ */
.quartet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.quartet .q {
  position: relative;
  aspect-ratio: 3/5;
  background-size: cover; background-position: center;
  overflow: hidden;
  cursor: pointer;
  filter: saturate(0.92);
  transition: filter 0.3s;
}
.quartet .q:hover { filter: saturate(1.1); }
.quartet .q::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
}
.quartet .q .body {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  z-index: 2; color: var(--ink);
}
.quartet .q .body .num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block; margin-bottom: 6px;
}
.quartet .q .body h5 {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.05;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
}
.quartet .q .body h5 .it { font-style: italic; }
@media (max-width: 1000px) { .quartet { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   08 — CAPSULE · big finale, manifesto + numbered five
   ============================================================ */
.capsule {
  position: relative;
  background: var(--bg-deep);
  margin: 0 calc(-1 * var(--gutter));
  padding: clamp(56px, 7vw, 112px) var(--gutter);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.capsule .frame { padding: 0; }
.capsule-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.capsule-head .lede-block .eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.capsule-head .lede-block h3 {
  font-family: var(--f-display);
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
}
.capsule-head .lede-block h3 .it { font-style: italic; color: var(--gold); }
.capsule-head .desc {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 460px;
}
.capsule-five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.capsule-five .pc {
  background: var(--bg-deep);
  padding: 28px 22px;
  cursor: pointer;
  transition: background 0.25s;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 240px;
}
.capsule-five .pc:hover { background: color-mix(in oklab, var(--bg-deep) 80%, var(--gold) 6%); }
.capsule-five .pc .roman {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  color: var(--gold);
}
.capsule-five .pc h6 {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
}
.capsule-five .pc h6 .it { font-style: italic; }
.capsule-five .pc p {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.55;
}
.capsule-five .pc .tag {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 1100px) {
  .capsule-five { grid-template-columns: repeat(2, 1fr); }
  .capsule-head { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   CROSS — back to other Build siblings or the Women lane
   ============================================================ */
.cross-lanes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cross-lanes a {
  background: var(--bg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: background 0.25s;
  min-height: 180px;
}
.cross-lanes a:hover { background: color-mix(in oklab, var(--bg) 88%, white); }
.cross-lanes .n {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.cross-lanes h6 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 400;
  margin: 0;
}
.cross-lanes p {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}
.cross-lanes .arr {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.cross-lanes .arr::after {
  content: "→"; color: var(--gold);
}
@media (max-width: 900px) { .cross-lanes { grid-template-columns: repeat(2, 1fr); } }