@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 500 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/plex-sans.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
/* Allovar preview builds: tokens + chrome. The engine is never edited. */
:root {
  --sc-canvas: #F3F0EA; --sc-surface: #E9E5DD; --sc-ink: #141416; --sc-ink-soft: #5E626A;
  --sc-accent: #9E7B3F; --sc-accent-ink: #F3F0EA;
  --sc-shadow-color: 40 36 30; --sc-e1: 0 1px 2px rgba(40,36,30,.06); --sc-e2: 0 4px 12px rgba(40,36,30,.08); --sc-e3: 0 12px 32px rgba(40,36,30,.10);
  --sc-font-display: "Archivo", system-ui, sans-serif; --sc-font-text: "IBM Plex Sans", system-ui, sans-serif;
}
html { background: var(--sc-canvas); }
body { margin: 0; color: var(--sc-ink); font-family: var(--sc-font-text); }
.skip { position: absolute; left: -999px; top: 0; background: var(--sc-accent); color: var(--sc-accent-ink); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; top: 1rem; }
.mark { position: fixed; top: 1.25rem; left: 1.5rem; z-index: 30; display: flex; gap: .75rem; align-items: baseline; }
.mark__word { color: var(--sc-ink); text-decoration: none; font-family: var(--sc-font-display); font-weight: 700; letter-spacing: .22em; font-size: .9rem; font-stretch: 90%; }
.mark__sub { color: var(--sc-ink-soft); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.rail { position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 30; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rail__leg { appearance: none; background: none; border: 0; padding: .2rem 0 .2rem 1rem; color: var(--sc-ink-soft); font: 500 .68rem/1.2 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; text-align: left; cursor: pointer; position: relative; opacity: .7; }
.rail__leg::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--sc-ink-soft); opacity: .6; }
.rail__leg[aria-current="true"] { color: var(--sc-ink); opacity: 1; }
.rail__leg[aria-current="true"]::before { background: var(--sc-accent); opacity: 1; box-shadow: 0 0 0 3px rgba(158,123,63,.22); }
.rail__leg:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
/* holds keep their frame; the engine's poster push-in would double every seam around them */
[data-sc-segment].pause > .sc-world__poster { transform: none !important; }
/* the cut: the sectioned twin is revealed from the top down under scroll */
.cut { --cut: 0; }
.cut .cut-twin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; clip-path: inset(0 0 calc((1 - var(--cut)) * 100%) 0); }
.cut .kerf { position: absolute; left: 36%; right: 36%; top: calc(var(--cut) * 100%); height: 2px; background: var(--sc-accent); opacity: calc(var(--cut) * (1 - var(--cut)) * 4); box-shadow: 0 0 12px 2px rgba(158,123,63,.5); pointer-events: none; }
/* copy: each block carries its own soft plate so it never depends on what the film is doing under it */
.wc { max-width: 34rem; position: absolute; }
.wc::before { content: ""; position: absolute; inset: -2.2rem -3rem; background: radial-gradient(ellipse at 50% 50%, rgba(243,240,234,.92) 0%, rgba(243,240,234,.75) 42%, rgba(243,240,234,0) 72%); z-index: -1; pointer-events: none; }
.wc > * { position: relative; }
.sc-copy--lead.wc { left: clamp(1.5rem, 6vw, 6rem); bottom: auto; top: 50%; transform: translateY(-50%); }
.sc-copy--mid.wc { left: 24%; right: auto; max-width: min(34rem, 40vw); top: 50%; transform: translateY(-50%); text-align: left; }
.sc-copy--trail-top.wc { left: 57%; right: auto; max-width: min(34rem, 36vw); top: 14%; transform: none; text-align: left; }
.sc-copy--lead-top.wc { left: clamp(1.5rem, 6vw, 6rem); right: auto; top: 14%; transform: none; }
.sc-copy--trail.wc { left: 57%; right: auto; max-width: min(34rem, 36vw); top: 50%; transform: translateY(-50%); text-align: left; }
.wc__kicker { margin: 0 0 .9rem; color: var(--sc-accent); font: 500 .74rem/1 var(--sc-font-text); letter-spacing: .18em; text-transform: uppercase; }
.wc__title { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-stretch: 85%; letter-spacing: -.02em; line-height: .98; font-size: clamp(2.2rem, 5.2vw, 5rem); color: var(--sc-ink); text-wrap: balance; }
.wc--hero .wc__title { font-size: clamp(2.6rem, 6.4vw, 6.4rem); }
.wc__text { margin: 1.1rem 0 0; max-width: 28rem; color: var(--sc-ink); opacity: .8; font-size: clamp(.95rem, 1.1vw, 1.1rem); line-height: 1.5; }
.cta { display: inline-block; margin-top: 1.4rem; padding: .95rem 1.4rem; background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none; font: 600 .82rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; }
.cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.sc-world__scrim.sc-scrim--band { opacity: 0; }
/* landing after the world */
.landing { position: relative; background: var(--sc-surface); color: var(--sc-ink); padding: clamp(4rem, 10vh, 8rem) clamp(1.5rem, 6vw, 6rem); border-top: 1px solid rgba(20,20,22,.08); }
.landing__inner { max-width: 44rem; }
.landing h2 { font-family: var(--sc-font-display); font-weight: 600; font-stretch: 85%; letter-spacing: -.02em; font-size: clamp(2rem, 4vw, 3.6rem); margin: 0 0 1rem; }
.landing p { line-height: 1.55; max-width: 38rem; }
.landing__note { color: var(--sc-ink-soft); font-size: .85rem; }
@media (max-width: 860px) {
  .rail { right: .9rem; } .rail__leg { font-size: .58rem; padding-left: .8rem; }
  .sc-copy--lead.wc, .sc-copy--trail.wc, .sc-copy--mid.wc, .sc-copy--trail-top.wc, .sc-copy--lead-top.wc { left: 1rem; right: 4.5rem; top: auto; bottom: 10vh; transform: none; max-width: none; }
  .wc--hero .wc__title { font-size: clamp(2rem, 9vw, 3rem); } .wc__title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .mark__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cut .cut-twin { clip-path: none; opacity: var(--cut); } }

/* site shell integration: text bronze passes contrast; the header button keeps no top margin; closing section aligned to the container */
:root { --sc-accent: #7A5F2E; }
.rail__leg[aria-current="true"]::before { background: #9E7B3F; box-shadow: 0 0 0 3px rgba(158,123,63,.22); }
.nav__links .cta { margin-top: 0; }
.landing { padding-inline: var(--gutter); }
.landing__inner { max-width: 72rem; margin: 0 auto; }
.landing__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.4rem 0 0; }
.landing__actions .cta { margin-top: 0; }
/* phones: copy sits at the bottom of the frame on its own plate, the rail collapses to dots */
@media (max-width: 1000px) {
  .wc, .sc-copy--trail.wc, .wc--hero { left: 1rem !important; right: 4.5rem !important; width: auto !important; max-width: none !important; top: auto !important; bottom: 10vh !important; transform: none !important; text-align: left !important; }
  .wc__title, .wc--hero .wc__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .wc__text { font-size: .95rem; max-width: none; }
  .rail { right: .9rem; }
  .rail__leg { font-size: 0; padding: .35rem 0 .35rem .8rem; min-width: 24px; min-height: 24px; }
}
/* the engine's stage is a fixed layer (z 1); the closing section and the footer scroll over it on their own backgrounds */
.landing { position: relative; z-index: 30; }
.site-footer { position: relative; z-index: 30; background: var(--canvas); }
.rail { transition: opacity .2s; }
.rail.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
/* phones: the frames were composed with the metal left of centre for desktop copy; crop around the metal, pull the scale back a little, fade the edges into the canvas */
@media (max-width: 860px) {
  /* pulled back until the whole object is in frame: the left 60% of each 16:9 frame, sitting above the copy */
  .sc-world__seg > :is(video, img, canvas) { top: 16% !important; height: 48% !important; object-position: 36% 50%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); }
}