/* =========================================================================
   I AM THIS MOTORCYCLE — shared component styles (all screens)
   Builds on css/system.css tokens. Loaded by every page.
   ========================================================================= */

/* ====================== CHROME / TOPBAR ====================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--edge);
  transition: background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.scrolled { background: rgba(14,14,13,0.78); backdrop-filter: blur(12px) saturate(120%);
  border-bottom-color: var(--hair-ink-soft); padding-block: .7rem; }
.topbar.on-light { mix-blend-mode: normal; }
.mark { display: inline-flex; align-items: center; gap: .55rem; }
.mark .dot { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; flex: none; }
.mark .nm { font-family: var(--font-sans); font-weight: 700; font-size: .8rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--on-ink); line-height: 1; }
@media (max-width: 480px){ .mark .nm { letter-spacing: .18em; font-size: .72rem; } }
.menu-btn { display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--t-label);
  letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink); }
.menu-btn .bars { display: grid; gap: 4px; width: 22px; }
.menu-btn .bars span { height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.menu-btn .bars span:nth-child(1){ width: 22px; }
.menu-btn .bars span:nth-child(2){ width: 14px; margin-left:auto; }
.menu-btn:hover .bars span:nth-child(2){ width: 22px; }
@media (max-width: 480px){ .menu-btn .lbl { display: none; } }

/* ====================== OVERLAY MENU ====================== */
.overlay { position: fixed; inset: 0; z-index: 80; background: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 1rem var(--edge) calc(2rem + env(safe-area-inset-bottom));
  transform: translateY(-100%); transition: transform .7s var(--ease); visibility: hidden; }
.overlay.open { transform: none; visibility: visible; }
.overlay::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.05; mix-blend-mode: overlay; }
.overlay__top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.ov-close { font-family: var(--font-sans); font-weight:600; font-size: var(--t-label); letter-spacing:.2em; text-transform:uppercase; color: var(--on-ink-soft); display:flex; align-items:center; gap:.6rem; }
.ov-close:hover { color: var(--gold); }
.ov-nav { list-style:none; margin:0; padding:0; align-self:center; position:relative; z-index:1; }
.ov-nav li { border-top: 1px solid var(--hair-ink-soft); }
.ov-nav li:last-child { border-bottom: 1px solid var(--hair-ink-soft); }
.ov-nav a { display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding: clamp(.6rem,2.2vw,1.1rem) 0; font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(2rem, 9vw, 4.5rem); line-height: 1.02; letter-spacing: -.02em;
  color: var(--on-ink); transition: color .35s var(--ease), padding-left .45s var(--ease); }
.ov-nav a:hover, .ov-nav a[aria-current]{ color: var(--gold); padding-left: .8rem; }
.ov-nav .idx { font-family: var(--font-sans); font-weight:600; font-size: var(--t-label); letter-spacing:.14em; color: var(--on-ink-mute); align-self:center; }
.ov-nav a:hover .idx { color: var(--gold); }
.overlay__foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; position:relative; z-index:1; }

/* ====================== REAL PHOTOGRAPHY PLATES ====================== */
.plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; z-index: 0; filter: grayscale(1) contrast(1.06) brightness(.96); }
.plate.has-img .plate__cx { display: none; }
.plate.has-img::before { opacity: .10; }

/* ====================== HERO (home) ====================== */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__media { position:absolute; inset: -12% 0 0 0; height: 124%; will-change: transform; }
.hero__media .plate { position:absolute; inset:0; }
.hero__media .plate > img { object-position: 50% 42%; }
.hero__veil { position:absolute; inset:0; z-index:4; pointer-events:none; background:
    radial-gradient(120% 90% at 70% 18%, rgba(0,0,0,0) 30%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(8,8,7,.55) 0%, rgba(8,8,7,0) 26%, rgba(8,8,7,0) 52%, rgba(8,8,7,.86) 100%); }
.hero__inner { position:absolute; inset:auto 0 0 0; z-index:6;
  padding: 0 var(--edge) clamp(2rem, 6vh, 4.5rem); display:grid; gap: clamp(.9rem,2.5vw,1.5rem); }
.hero__lede { font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: var(--t-lede); color: var(--on-ink-soft); max-width: 24ch; }
.hero__title { color: var(--on-ink); }
.hero__title .x { display:block; font-size: clamp(2rem, 8.4vw, 5.6rem); white-space: nowrap; }
.hero__meta { display:flex; align-items:center; gap: 1.2rem; flex-wrap:wrap; margin-top:.3rem; }
.scrollcue { position:absolute; left:50%; bottom: 1.4rem; z-index:6; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem; color: var(--on-ink-mute); }
.scrollcue .ln { width:1px; height: 38px; background: linear-gradient(var(--on-ink-mute), transparent); position:relative; overflow:hidden; }
.scrollcue .ln::after { content:""; position:absolute; top:-40%; left:0; width:1px; height:40%; background: var(--gold); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%{ transform: translateY(0); opacity:0 } 30%{opacity:1} 100%{ transform: translateY(140px); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .scrollcue .ln::after { animation: none; } }
.scrollcue span { font-family: var(--font-sans); font-size: var(--t-caption); letter-spacing:.2em; text-transform:uppercase; }

/* ====================== PAGE HERO (interior pages) ====================== */
.pagehero { position:relative; padding: clamp(7rem,16vh,11rem) 0 clamp(3rem,7vw,5rem);
  border-bottom: 1px solid var(--hair-ink); }
.pagehero__inner { display:grid; gap: clamp(1rem,3vw,1.6rem); }
.pagehero h1 { font-family: var(--font-serif); font-weight:300; letter-spacing:-.02em;
  font-size: var(--t-h1); line-height:1; margin:0; max-width: 18ch; }
.pagehero .lede { font-family: var(--font-serif); font-style:italic; font-size: var(--t-lede);
  color: var(--on-ink-soft); max-width: 46ch; }
.crumb { font-family: var(--font-sans); font-size: var(--t-caption); letter-spacing:.18em;
  text-transform:uppercase; color: var(--on-ink-mute); display:inline-flex; gap:.6rem; align-items:center; }
.crumb a:hover { color: var(--gold); }

/* ====================== GENERIC SECTION ====================== */
.chapter { position: relative; padding: clamp(4.5rem, 11vw, 9rem) 0; }
.chapter--paper { background: var(--paper); color: var(--on-paper); }
.chapter--tight { padding: clamp(3rem,7vw,5rem) 0; }
.ch-no { font-family: var(--font-display); font-size: var(--t-lede); color: var(--gold); line-height:1; }

/* ---- Manifesto / prose (paper) ---- */
.manifesto { display:grid; gap: clamp(2rem,5vw,3.5rem); }
.manifesto__lead { font-family: var(--font-serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.08; letter-spacing:-.015em; max-width: 20ch; }
.manifesto__lead em { font-style: italic; color: #97781a; }
.manifesto__body { display:grid; gap: 1.4rem; }
.manifesto__body p { margin:0; max-width: var(--measure); color: var(--on-paper-soft); }
.stats { display:flex; flex-wrap:wrap; gap: clamp(1.5rem,5vw,3.5rem); margin-top:.5rem; }
.stat { display:grid; gap:.2rem; }
.stat b { font-family: var(--font-display); font-size: clamp(2.2rem,7vw,3.4rem); line-height:1; color: var(--on-paper); }
.stat span { font-family: var(--font-sans); font-size: var(--t-caption); letter-spacing:.16em; text-transform:uppercase; color: var(--on-paper-mute); }

/* ---- Featured stories (dark) ---- */
.feat-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom: clamp(2rem,5vw,3.5rem); flex-wrap:wrap; }
.feat-head h2 { font-family: var(--font-serif); font-weight:300; font-size: var(--t-h1); line-height:1; margin:0; letter-spacing:-.02em; }
.stories { display:grid; gap: clamp(3rem,7vw,5.5rem); }
.story { display:grid; gap: clamp(1.2rem,3vw,2rem); }
.story__media { position:relative; }
.story__media .plate { aspect-ratio: 3/4; }
.story__no { position:absolute; top:1rem; left:1rem; z-index:4; font-family: var(--font-display);
  font-size: clamp(1.6rem,5vw,2.4rem); color: rgba(244,241,234,.9); line-height:1; mix-blend-mode: difference; }
.story__body { display:grid; gap: 1rem; align-content:start; }
.story__title { font-family: var(--font-serif); font-weight:300; font-size: var(--t-h2); line-height:1.06; margin:0; letter-spacing:-.015em; }
.story__pull { font-family: var(--font-serif); font-style:italic; font-size: var(--t-lede); color: var(--on-ink); max-width: 26ch; }
.story__pull::before { content:"\201C"; color: var(--gold); margin-right:.05em; }
.story__pull::after { content:"\201D"; color: var(--gold); }
.story__meta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
@media (min-width: 860px){
  .story { grid-template-columns: 1.05fr 1fr; align-items:center; gap: clamp(2rem,5vw,4rem); }
  .story--flip .story__media { order: 2; }
  .story__media .plate { aspect-ratio: 4/5; }
}

/* ---- Stories index grid ---- */
.sgrid { display:grid; gap: clamp(2.2rem,5vw,3.4rem); }
@media (min-width: 720px){ .sgrid { grid-template-columns: repeat(2,1fr); } }
.scard { display:grid; gap:1.1rem; align-content:start; }
.scard .plate { aspect-ratio: 4/5; }
.scard .plate .num { position:absolute; top:.8rem; left:.9rem; z-index:4; font-family:var(--font-display);
  font-size: clamp(1.4rem,4vw,2rem); color: rgba(244,241,234,.92); mix-blend-mode:difference; }
.scard h3 { font-family: var(--font-serif); font-weight:300; font-size: var(--t-h3); line-height:1.08; margin:0; letter-spacing:-.015em; }
.scard p { margin:0; color: var(--on-ink-soft); font-style:italic; font-family:var(--font-serif); max-width:40ch; }
.scard:hover .plate > img { filter: grayscale(1) contrast(1.12) brightness(1.02); transform: scale(1.02); }
.scard .plate > img { transition: transform .8s var(--ease), filter .5s var(--ease); }

/* ---- Filter bar ---- */
.filters { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom: clamp(2rem,5vw,3rem); }
.filters .lbl { font-family:var(--font-sans); font-size:var(--t-caption); letter-spacing:.18em; text-transform:uppercase; color:var(--on-ink-mute); margin-right:.4rem; }
.chip { font-family:var(--font-sans); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase;
  padding:.5em 1.1em; border:1px solid var(--hair-ink); color:var(--on-ink-soft); cursor:pointer; transition:all .35s var(--ease); }
.chip:hover { border-color: var(--on-ink-mute); color: var(--on-ink); }
.chip.active { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ---- The Riders wall ---- */
.wall { padding-bottom: clamp(4.5rem,11vw,9rem); }
.wall__head { display:grid; gap:1.2rem; margin-bottom: 2rem; }
.wall__head h2 { font-family: var(--font-serif); font-weight:300; font-size: var(--t-h1); line-height:.98; margin:0; letter-spacing:-.02em; max-width: 14ch; }
.wall__grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
@media (min-width: 620px){ .wall__grid { grid-template-columns: repeat(5,1fr); } }
@media (min-width: 960px){ .wall__grid { grid-template-columns: repeat(8,1fr); } }
.wall__grid .cell { aspect-ratio: 4/5; position:relative; display:block; }
.wall__grid .cell .n { position:absolute; bottom:.4rem; left:.45rem; z-index:4; font-family:var(--font-sans); font-size: 9px; letter-spacing:.12em; color: rgba(244,241,234,.6); }
.wall__grid .cell .nm2 { position:absolute; inset:auto 0 0 0; z-index:4; padding:.5rem; opacity:0;
  background:linear-gradient(transparent,rgba(8,8,7,.85)); transition:opacity .35s var(--ease);
  font-family:var(--font-sans); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.wall__grid .cell:hover .nm2 { opacity:1; }
.wall__grid .cell:hover > img { filter: grayscale(0) contrast(1.05); }
.wall__grid .cell > img { transition: filter .5s var(--ease); }
.wall__grid .more { display:flex; align-items:center; justify-content:center; background: var(--ink-2);
  border:1px solid var(--hair-ink); font-family:var(--font-display); color: var(--gold); font-size: clamp(.9rem,2.4vw,1.3rem); }

/* ---- Index / Collection / Shop TOC + promos (paper) ---- */
.index { display:grid; gap: clamp(2.5rem,6vw,4rem); }
.toc { list-style:none; margin:0; padding:0; }
.toc li { border-top: 1px solid var(--hair-paper); }
.toc li:last-child { border-bottom: 1px solid var(--hair-paper); }
.toc a { display:grid; grid-template-columns: auto 1fr auto; align-items:baseline; gap: clamp(.8rem,3vw,2rem);
  padding: clamp(1rem,2.6vw,1.5rem) 0; transition: padding-left .45s var(--ease), color .35s var(--ease); }
.toc a:hover { padding-left: .7rem; color: #000; }
.toc .ti { font-family: var(--font-serif); font-weight:300; font-size: var(--t-h2); line-height:1; letter-spacing:-.02em; }
.toc .tdesc { font-family: var(--font-sans); font-size: var(--t-meta); color: var(--on-paper-mute); align-self:center; max-width: 30ch; }
@media (max-width: 700px){ .toc a { grid-template-columns: auto 1fr; } .toc .tdesc { display:none; } }
.toc .tn { font-family: var(--font-sans); font-size: var(--t-caption); letter-spacing:.16em; color: var(--on-paper-mute); align-self:center; }
.toc .arr { font-family: var(--font-sans); color: #97781a; opacity:0; transition: opacity .35s var(--ease), transform .4s var(--ease); }
.toc a:hover .arr { opacity:1; transform: translateX(4px); }
.twocard { display:grid; gap: 3px; }
@media (min-width: 760px){ .twocard { grid-template-columns: 1fr 1fr; } }
.promo { position:relative; min-height: clamp(320px, 46vw, 460px); display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(1.4rem,4vw,2.4rem); overflow:hidden; color: var(--on-ink); }
.promo .plate { position:absolute; inset:0; z-index:0; }
.promo__veil { position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(8,8,7,.1) 0%, rgba(8,8,7,.82) 100%); }
.promo__c { position:relative; z-index:3; display:grid; gap:.7rem; }
.promo__c h3 { font-family: var(--font-serif); font-weight:300; font-size: var(--t-h2); line-height:1.02; margin:0; letter-spacing:-.015em; }

/* ====================== ARTICLE (story / moto detail) ====================== */
.article { background: var(--paper); color: var(--on-paper); }
/* Inside a story, show the real photography in full colour (index/wall stay B&W). */
.story-page .hero .plate > img,
.story-page .article .plate > img { filter: none; }
.article__wrap { max-width: 46rem; margin-inline:auto; padding-block: clamp(3rem,7vw,5.5rem); }
.article__body { font-family: var(--font-serif); font-size: var(--t-body); line-height: 1.7; color: var(--on-paper); }
.article__body > p { margin: 0 0 1.4rem; }
.article__body h2 { font-family: var(--font-serif); font-weight:300; font-size: var(--t-h3); line-height:1.1;
  letter-spacing:-.015em; margin: clamp(2.4rem,5vw,3.4rem) 0 1.1rem; }
.article__body h2::before { content:"\2014"; color: var(--gold); margin-right:.5rem; }
.article__body blockquote { margin: clamp(2rem,5vw,3rem) 0; padding:0; border:0;
  font-size: var(--t-h3); line-height:1.18; font-style:italic; font-weight:300; color:#16140F; max-width: 22ch; }
.article__body blockquote::before { content:"\201C"; color: var(--gold); }
.article__body blockquote::after { content:"\201D"; color: var(--gold); }
.article__body a { color:#97781a; text-decoration: underline; text-underline-offset: 3px; }
.article__body em { font-style: italic; }
.article__body strong { font-weight: 700; }
.article figure.bleed { margin: clamp(2.5rem,6vw,4rem) 0; }
.article figure.bleed .plate { aspect-ratio: 3/2; }
.article figure.bleed figcaption { font-family:var(--font-sans); font-size:var(--t-caption); letter-spacing:.12em;
  text-transform:uppercase; color: var(--on-paper-mute); margin-top:.7rem; }
.article__gallery { display:grid; grid-template-columns: repeat(2,1fr); gap:3px; margin-top: clamp(2rem,5vw,3rem); }
@media (min-width:760px){ .article__gallery { grid-template-columns: repeat(3,1fr); } }
.article__gallery .plate { aspect-ratio: 1/1; }
.byline { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom: clamp(1.6rem,4vw,2.4rem);
  padding-bottom: 1.2rem; border-bottom:1px solid var(--hair-paper); }

/* related strip (dark) */
.related { background: var(--ink); padding: clamp(3.5rem,8vw,6rem) 0; }
.related h4 { font-family:var(--font-sans); font-weight:600; font-size:var(--t-caption); letter-spacing:.2em;
  text-transform:uppercase; color: var(--on-ink-mute); margin:0 0 1.6rem; }
.related__grid { display:grid; gap:3px; grid-template-columns: repeat(3,1fr); }
@media (max-width:640px){ .related__grid { grid-template-columns: 1fr; } }
.rel { position:relative; aspect-ratio: 4/5; display:flex; align-items:flex-end; padding:1.2rem; overflow:hidden; color:var(--on-ink); }
.rel .plate { position:absolute; inset:0; z-index:0; }
.rel__veil { position:absolute; inset:0; z-index:1; background:linear-gradient(transparent,rgba(8,8,7,.85)); }
.rel__c { position:relative; z-index:2; }
.rel__c h5 { font-family:var(--font-serif); font-weight:300; font-size:var(--t-h3); margin:0; line-height:1.05; letter-spacing:-.015em; }
.rel:hover .plate > img { transform:scale(1.03); }
.rel .plate > img { transition: transform .8s var(--ease); }

/* ====================== MOTORCYCLES (collection) ====================== */
.moto-list { display:grid; gap: clamp(2.5rem,6vw,4rem); }
.moto-row { display:grid; gap: clamp(1.2rem,3vw,2rem); }
.moto-row .plate { aspect-ratio: 3/2; }
@media (min-width: 820px){
  .moto-row { grid-template-columns: 1.2fr 1fr; align-items:center; gap: clamp(2rem,5vw,3.5rem); }
  .moto-row--flip .moto-row__media { order:2; }
}
.moto-row__c { display:grid; gap:1rem; align-content:center; }
.moto-row__c h3 { font-family:var(--font-serif); font-weight:300; font-size:var(--t-h2); line-height:1.02; margin:0; letter-spacing:-.02em; }
.tag-status { font-family:var(--font-sans); font-size:var(--t-caption); letter-spacing:.18em; text-transform:uppercase;
  display:inline-flex; gap:.5rem; align-items:center; }
.tag-status.is-sold { color: var(--on-ink-mute); }
.tag-status.is-sale { color: var(--gold); }
.tag-status .d { width:6px; height:6px; border-radius:50%; background: currentColor; }
.price { font-family:var(--font-display); font-size: var(--t-h3); color: var(--on-ink); }
.specs { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; border-top:1px solid var(--hair-ink); padding-top:1rem; }
.specs li { display:grid; grid-template-columns: 9rem 1fr; gap:1rem; font-family:var(--font-sans); font-size:var(--t-meta); }
.specs li b { color: var(--on-ink-mute); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:var(--t-caption); }
.specs li span { color: var(--on-ink-soft); }

/* ====================== SHOP ====================== */
.products { display:grid; gap: clamp(2rem,5vw,3rem); grid-template-columns: repeat(2,1fr); }
@media (min-width: 820px){ .products { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 460px){ .products { grid-template-columns: 1fr; } }
.product { display:grid; gap:1rem; align-content:start; }
.product .plate { aspect-ratio: 4/5; background: var(--paper-2); }
.product .plate > img { filter:none; object-fit: cover; }
.product h3 { font-family:var(--font-serif); font-weight:300; font-size: var(--t-h3); margin:0; line-height:1.05; }
.product .meta { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.product .pr { font-family:var(--font-display); font-size:1.1rem; }
.product.sold .plate::after { content:"Sold out"; position:absolute; inset:auto 0 0 0; z-index:4; text-align:center;
  font-family:var(--font-sans); font-size:var(--t-caption); letter-spacing:.2em; text-transform:uppercase;
  padding:.6rem; background:rgba(14,14,13,.82); color:var(--on-ink-soft); }

/* ====================== CONTACT ====================== */
.form { display:grid; gap:1.4rem; max-width: 34rem; }
.form .row2 { display:grid; gap:1.4rem; }
@media (min-width:560px){ .form .row2 { grid-template-columns: 1fr 1fr; } }
.field { display:grid; gap:.5rem; }
.field label { font-family:var(--font-sans); font-size:var(--t-caption); letter-spacing:.16em; text-transform:uppercase; color: var(--on-ink-mute); }
.field input, .field textarea { font-family: var(--font-serif); font-size: var(--t-body); color: var(--on-ink);
  background: transparent; border:0; border-bottom:1px solid var(--hair-ink); padding:.7rem 0; transition: border-color .35s var(--ease); }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline:none; border-bottom-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: var(--on-ink-mute); }

/* ---- Submit CTA (dark, portrait) ---- */
.cta { position:relative; min-height: 86svh; display:flex; align-items:flex-end; overflow:hidden; }
.cta .plate { position:absolute; inset:0; z-index:0; }
.cta .plate > img { object-position: 50% 38%; }
.cta__veil { position:absolute; inset:0; z-index:1; background:
   radial-gradient(90% 70% at 30% 50%, rgba(0,0,0,.2), rgba(0,0,0,.55)),
   linear-gradient(180deg, rgba(8,8,7,.7) 0%, rgba(8,8,7,.2) 40%, rgba(8,8,7,.9) 100%); }
.cta__inner { position:relative; z-index:3; padding: 0 var(--edge) clamp(3rem,8vh,5.5rem); display:grid; gap: clamp(1.2rem,3vw,2rem); max-width: 30rem; }
.cta__title { color: var(--on-ink); }
.cta__title .x { display:block; font-size: clamp(2rem, 9vw, 4.6rem); white-space: nowrap; }

/* ---- Footer ---- */
.foot { background: var(--ink); border-top: 1px solid var(--hair-ink); padding: clamp(3rem,7vw,5rem) 0 2rem; }
.foot__grid { display:grid; gap: clamp(2rem,5vw,3rem); }
@media (min-width: 720px){ .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { font-family: var(--font-sans); font-weight:600; font-size: var(--t-caption); letter-spacing:.2em; text-transform:uppercase; color: var(--on-ink-mute); margin:0 0 1rem; }
.foot ul { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot ul a { font-family: var(--font-serif); color: var(--on-ink-soft); transition: color .3s var(--ease); }
.foot ul a:hover { color: var(--gold); }
.foot__mark { display:grid; gap:1rem; max-width: 30ch; }
.foot__mark .thesis { font-family: var(--font-serif); font-style:italic; color: var(--on-ink-soft); }
.foot__base { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top: clamp(2.5rem,6vw,4rem); padding-top: 1.4rem; border-top: 1px solid var(--hair-ink-soft); }

/* paper-section grain helper already in system.css via .grain */

/* ====================== RESPONSIVE PASS (mobile / tablet) ====================== */
/* On phones & tablet-portrait, let hero photos fill the viewport exactly and stay
   centred — the desktop parallax over-scan (negative inset + 124% height + JS
   transform) can crop heads off on a tall, narrow frame. */
@media (max-width: 820px){
  .hero__media { inset: 0 !important; height: 100% !important; transform: none !important; }
  .hero__media .plate > img,
  .cta .plate > img { object-position: center !important; }
  /* Home hero: JP sits in the left third of the frame — left-align the mobile
     crop so he isn't cut off at the shoulder. (Placed after the rule above so
     it wins at equal specificity.) */
  .hp-hero .plate > img { object-position: 6% center !important; }
}
/* Two-word stamped hero/cta lines: allow them to wrap on very narrow screens
   instead of clipping under body{overflow-x:hidden}. */
@media (max-width: 400px){
  .hero__title .x, .cta__title .x { white-space: normal; }
}
/* Tablet portrait: roomier featured-story rhythm before the 2-col desktop layout. */
@media (min-width: 600px) and (max-width: 859px){
  .story__media .plate { aspect-ratio: 16/10; }
  .scard .plate { aspect-ratio: 3/4; }
}
/* Keep interior page-hero clear of the fixed topbar on short mobile-landscape. */
@media (max-height: 520px){
  .pagehero { padding-top: clamp(5.5rem, 22vh, 9rem); }
  .hero { min-height: 460px; }
}
/* Article reading column: a touch more side air on phones. */
@media (max-width: 560px){
  .article__wrap { padding-block: clamp(2.2rem, 9vw, 3.2rem); }
  .specs li { grid-template-columns: 7rem 1fr; }
}