/* ============================================================
   TRIZE MARKETING — Perception Engineering
   Design system + experimental editorial layout
   ------------------------------------------------------------
   01 · Tokens          05 · Chrome / rails
   02 · Reset / base    06 · Chapters
   03 · Typography      07 · Components
   04 · Overlays        08 · Responsive
   ============================================================ */

/* ───────────────────────── 01 · TOKENS ───────────────────────── */
:root{
  /* surface */
  --ink:        #0a0a0c;
  --ink-2:      #0e0e11;
  --ink-3:      #141418;
  --bone:       #ece7db;
  --bone-dim:   rgba(236,231,219,.62);
  --bone-faint: rgba(236,231,219,.34);
  --bone-ghost: rgba(236,231,219,.07);
  --line:       rgba(236,231,219,.13);
  --line-soft:  rgba(236,231,219,.07);

  /* signal */
  --accent:     #ff4d23;
  --accent-dim: rgba(255,77,35,.16);

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:  "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  /* fluid scale */
  --fs-mega:  clamp(3.2rem, 15.5vw, 16rem);
  --fs-xl:    clamp(2.4rem, 8.5vw, 8.5rem);
  --fs-lg:    clamp(2rem, 5.2vw, 5rem);
  --fs-md:    clamp(1.5rem, 3.2vw, 3rem);
  --fs-body:  clamp(1.05rem, 1.35vw, 1.4rem);
  --fs-sm:    clamp(.95rem, 1vw, 1.1rem);
  --fs-mono:  clamp(.66rem, .78vw, .8rem);

  /* metric / oversize */
  --fs-metric: clamp(5rem, 21vw, 21rem);

  /* rhythm */
  --pad-x: clamp(1.25rem, 5vw, 7rem);
  --gut:   clamp(1.5rem, 4vw, 4.5rem);

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur:      .9s;

  --z-grain: 60;
  --z-cursor: 70;
  --z-chrome: 50;
  --z-loader: 100;
}

/* ───────────────────────── 02 · RESET / BASE ───────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  cursor:none;
}
/* device without fine pointer keeps native cursor */
@media (hover:none),(pointer:coarse){ body{ cursor:auto; } }

/* subtle vignette + scanline atmosphere baked into the page */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(255,77,35,.05), transparent 55%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,.55), transparent 60%);
  pointer-events:none; z-index:1;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:none; }
::selection{ background:var(--accent); color:var(--ink); }

/* lock scroll while booting */
html.is-loading,html.is-loading body{ overflow:hidden; height:100%; }

/* ───────────────────────── 03 · TYPOGRAPHY ───────────────────────── */
.mono{
  font-family:var(--mono);
  font-size:var(--fs-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-dim);
  font-weight:400;
}
.display{
  font-family:var(--serif);
  font-weight:340;
  line-height:.86;
  letter-spacing:-.02em;
}
em{ font-style:italic; }

/* word/char/line reveal primitives (only hidden when JS present) */
.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-reveal].is-in{ opacity:1; transform:none; }

.split-line,.split-word,.split-char{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-inner{
  display:inline-block;
  transform:translateY(110%) rotate(2deg);
  transition:transform .95s var(--ease);
  will-change:transform;
}
.is-in .split-inner{ transform:none; }
/* stagger via per-item custom prop set in JS */
.split-word .split-inner,
.split-line .split-inner,
.split-char .split-inner{ transition-delay:calc(var(--d,0) * 1ms); }

/* keep spaces between split words */
.split-word{ margin-right:.001em; }

/* ───────────────────────── 04 · OVERLAYS ───────────────────────── */
.grain{
  position:fixed; top:-150%; left:-150%;
  width:400%; height:400%;
  z-index:var(--z-grain);
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(8) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)}
  30%{transform:translate(3%,-2%)} 50%{transform:translate(-2%,3%)}
  70%{transform:translate(4%,2%)} 90%{transform:translate(-3%,1%)}
  100%{transform:translate(0,0)}
}

/* custom cursor */
.cursor{ position:fixed; top:0; left:0; z-index:var(--z-cursor); pointer-events:none; mix-blend-mode:difference; }
.cursor__ring{
  position:fixed; top:0; left:0; width:38px; height:38px;
  border:1px solid var(--bone);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), opacity .3s;
}
.cursor__dot{
  position:fixed; top:0; left:0; width:5px; height:5px;
  background:var(--bone); border-radius:50%;
  transform:translate(-50%,-50%);
}
.cursor__label{
  position:fixed; top:0; left:0;
  transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); opacity:0; white-space:nowrap;
  transition:opacity .25s;
}
.cursor.is-hover .cursor__ring{ width:74px; height:74px; background:var(--bone); }
.cursor.is-hover .cursor__dot{ opacity:0; }
.cursor.is-hover .cursor__label{ opacity:1; }
.cursor.is-down .cursor__ring{ width:28px; height:28px; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }
html:not(.js) .cursor{ display:none; }

/* loader */
.loader{ display:none; }
.js .loader{
  display:flex;
  position:fixed; inset:0; z-index:var(--z-loader);
  background:var(--ink);
  flex-direction:column;
}
.loader__inner{
  display:flex; flex-direction:column; justify-content:space-between;
  height:100%; padding:var(--pad-x);
}
.loader__top,.loader__bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; }
.loader__center{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.loader__word{
  font-family:var(--serif); font-style:italic; font-weight:330;
  font-size:var(--fs-lg); line-height:.92; letter-spacing:-.02em;
  overflow:hidden;
}
.loader__word:nth-child(2){ color:var(--accent); padding-left:8vw; }
.loader__bar{ flex:1; height:1px; background:var(--line); position:relative; margin-right:2rem; max-width:60vw; }
.loader__bar-fill{ position:absolute; inset:0 100% 0 0; background:var(--bone); }
.loader__count b{ color:var(--accent); }
.loader.is-done{ transform:translateY(-100%); transition:transform 1.1s var(--ease-out); }

/* ───────────────────────── 05 · CHROME / RAILS ───────────────────────── */
.chrome{ position:fixed; z-index:var(--z-chrome); }
.chrome--nav{
  top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2vw,1.6rem) var(--pad-x);
  mix-blend-mode:difference;
}
.brand{ display:flex; align-items:baseline; gap:.5rem; }
.brand__mark{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:1.5rem; color:var(--accent); line-height:1;
}
.brand__type{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.28em;
  text-transform:uppercase;
}
.brand__type sup{ font-size:.5em; }

.nav{ display:flex; gap:clamp(1.2rem,2.4vw,2.6rem); }
.nav__link{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; display:inline-flex; gap:.45em; align-items:baseline;
  position:relative; padding-bottom:.2em;
}
.nav__idx{ color:var(--accent); font-size:.62rem; }
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--bone); transition:width .4s var(--ease);
}
.nav__link:hover::after{ width:100%; }
.nav__link--cta{ color:var(--accent); }
.nav__link--cta .nav__idx{ color:var(--bone); }

.menu-toggle{ display:none; flex-direction:column; gap:6px; padding:8px; }
.menu-toggle span{ width:26px; height:1.5px; background:var(--bone); transition:transform .35s var(--ease),opacity .25s; }

/* rails */
.rail{
  position:fixed; z-index:var(--z-chrome);
  display:flex; align-items:center; gap:.8rem;
  mix-blend-mode:difference;
}
.rail--left{ left:clamp(.6rem,1.4vw,1.4rem); top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; }
.rail__chapter{ color:var(--accent); font-size:.9rem; letter-spacing:.1em; }
.rail--right{ right:clamp(.6rem,1.4vw,1.4rem); top:50%; transform:translateY(-50%); writing-mode:vertical-rl; }
.rail--right .mono{ letter-spacing:.3em; }

.progress{ position:fixed; left:0; right:0; bottom:0; height:2px; background:var(--line-soft); z-index:var(--z-chrome); }
.progress__bar{ display:block; height:100%; width:0; background:var(--accent); }

/* mobile sheet */
.sheet{
  position:fixed; inset:0; z-index:calc(var(--z-chrome) + 1);
  background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad-x);
  transform:translateY(-100%);
  transition:transform .7s var(--ease-out);
  pointer-events:none;
}
.sheet.is-open{ transform:none; pointer-events:auto; }
.sheet__nav{ display:flex; flex-direction:column; gap:.4rem; }
.sheet__link{
  font-family:var(--serif); font-size:clamp(2rem,9vw,3.5rem); line-height:1.05;
  display:flex; align-items:baseline; gap:1rem; font-weight:340;
}
.sheet__link .mono{ font-size:.8rem; color:var(--accent); }
.sheet__foot{ display:flex; flex-direction:column; gap:.6rem; margin-top:3rem; }
.sheet__foot a{ color:var(--bone-dim); }

/* ───────────────────────── 06 · CHAPTERS ───────────────────────── */
main{ position:relative; z-index:2; }
.chapter{
  position:relative;
  padding:clamp(6rem,14vh,12rem) var(--pad-x);
  border-top:1px solid var(--line-soft);
}
.chapter__tag{ display:inline-block; color:var(--accent); margin-bottom:2.5rem; }
.chapter__head{ margin-bottom:clamp(2rem,5vh,4rem); }

/* ── 00 Opening ── */
.opening{
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto 1fr auto;
  gap:clamp(1.5rem,3vh,3rem);
  border-top:none;
  padding-top:clamp(7rem,16vh,11rem);
  padding-bottom:clamp(3rem,6vh,5rem);
}
.opening__meta{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.opening__title{ align-self:center; }
.display.display, .opening .display{ margin:0; }
h1.display{ font-size:var(--fs-mega); }
.display__line{ display:block; }
.display__line:first-child em{ color:var(--accent); }
.display__line--stroke{
  margin-left:clamp(0px,8vw,14vw);
  color:transparent;
  -webkit-text-stroke:1.2px var(--bone);
  text-stroke:1px var(--bone);
}
.opening__statement{
  display:grid; grid-template-columns:1fr; gap:2rem;
  justify-items:start;
  max-width:min(54ch,90vw);
  margin-left:auto;
  font-size:var(--fs-body); color:var(--bone-dim);
}
.opening__statement p{ text-wrap:balance; }
.cue{ display:inline-flex; flex-direction:column; gap:.6rem; }
.cue__label{ color:var(--accent); }
.cue__line{ width:1px; height:48px; background:var(--bone-dim); position:relative; overflow:hidden; }
.cue__line::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateY(-100%); animation:cueRun 2.2s var(--ease) infinite; }
@keyframes cueRun{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

.opening__ticker{ overflow:hidden; border-top:1px solid var(--line); padding-top:1.2rem; }

/* ── 01 Doctrine ── */
.doctrine{ overflow:hidden; }
.doctrine__lead{ max-width:18ch; margin-bottom:clamp(3rem,8vh,7rem); }
.statement{
  font-family:var(--serif); font-weight:330; line-height:1;
  font-size:var(--fs-xl); letter-spacing:-.025em;
}
.statement em{ color:var(--accent); }
.doctrine__body{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--gut);
  border-top:1px solid var(--line); padding-top:2.5rem;
  max-width:min(110ch,80vw); margin-left:auto;
}
.doctrine__col{ display:flex; flex-direction:column; gap:1rem; }
.doctrine__col p{ color:var(--bone-dim); font-size:var(--fs-sm); }
.micro{ color:var(--accent); }
.doctrine__figure{
  position:absolute; right:var(--pad-x); top:18%;
  pointer-events:none; opacity:.5; mix-blend-mode:difference;
}
.figure-num{ font-size:clamp(8rem,26vw,26rem); color:var(--bone-ghost); }

/* ── 02 Work / cases ── */
.work__title{
  font-family:var(--serif); font-weight:330; line-height:1.02;
  font-size:var(--fs-lg); max-width:16ch; letter-spacing:-.02em; margin-top:1rem;
}
.case{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:
    "index index"
    "metric body";
  gap:clamp(1.5rem,4vw,4rem) var(--gut);
  padding:clamp(4rem,9vh,8rem) 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.case--right{
  grid-template-areas:
    "index index"
    "body metric";
}
.case--right .case__body{ text-align:left; }
.case__index{ grid-area:index; display:flex; align-items:center; gap:1.4rem; }
.case__index .mono{ color:var(--accent); }
.case__rule{ flex:1; height:1px; background:var(--line); }

.case__metric{ grid-area:metric; display:flex; flex-direction:column; }
.case--right .case__metric{ align-items:flex-end; text-align:right; }
.metric__value{
  font-family:var(--serif); font-weight:300; line-height:.8;
  font-size:var(--fs-metric); letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums;
}
.metric__caption{ margin-top:1.2rem; color:var(--bone-dim); }

.case__body{ grid-area:body; align-self:center; max-width:46ch; }
.case__client{
  font-family:var(--serif); font-weight:360; font-size:var(--fs-md);
  line-height:1; letter-spacing:-.02em; margin-bottom:1.4rem;
}
.case__lede{ color:var(--bone-dim); font-size:var(--fs-sm); }
.case__data{ display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2rem; border-top:1px solid var(--line); padding-top:1.4rem; }
.case__data dt{ margin-bottom:.4em; }
.case__data dd{ font-size:.95rem; }
.case__ghost{
  position:absolute; top:50%; right:-2%; transform:translateY(-50%);
  font-size:clamp(8rem,30vw,30rem); color:var(--bone-ghost);
  pointer-events:none; z-index:-1; letter-spacing:-.05em; font-weight:700;
}
.case--right .case__ghost{ right:auto; left:-2%; }

/* ── 03 Systems ── */
.systems{ position:relative; }
.systems__intro{ max-width:40ch; font-family:var(--serif); font-weight:330; font-size:var(--fs-md); line-height:1.15; color:var(--bone); }
.sys-list{ list-style:none; counter-reset:none; position:relative; z-index:2; }
.sys{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,2fr) auto;
  align-items:center;
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.6rem,3.4vh,2.6rem) 0;
  border-top:1px solid var(--line);
  margin-left:calc(var(--i) * clamp(0px, 1.4vw, 2.4rem)); /* staggered indent */
  transition:margin .6s var(--ease), color .4s var(--ease);
}
.sys:last-child{ border-bottom:1px solid var(--line); }
.sys__no{ color:var(--accent); }
.sys__name{
  font-family:var(--serif); font-weight:350; font-size:clamp(1.6rem,3.6vw,3.2rem);
  line-height:1; letter-spacing:-.02em; transition:transform .5s var(--ease);
}
.sys__desc{ color:var(--bone-faint); font-size:var(--fs-sm); max-width:46ch; transition:color .4s; }
.sys__arrow{ font-size:1.6rem; color:var(--bone-faint); transition:transform .5s var(--ease), color .4s; justify-self:end; }
.sys.is-active{ margin-left:0; }
.sys.is-active .sys__name{ transform:translateX(.6rem); color:var(--accent); }
.sys.is-active .sys__desc{ color:var(--bone); }
.sys.is-active .sys__arrow{ transform:translateX(.8rem); color:var(--accent); }

.sys-stage{
  position:absolute; right:var(--pad-x); bottom:clamp(2rem,6vh,5rem);
  display:flex; flex-direction:column; align-items:flex-end; gap:.5rem;
  pointer-events:none; opacity:.85; mix-blend-mode:difference; z-index:1;
}
.sys-stage__num{ color:var(--accent); font-size:1rem; }
.sys-stage__word{ font-size:clamp(2.4rem,7vw,7rem); color:var(--bone-ghost); }

/* ── 04 Signal ── */
.signal__title{ font-family:var(--serif); font-weight:330; font-size:var(--fs-xl); line-height:.95; letter-spacing:-.025em; margin-top:.6rem; }
.signal__intro{ color:var(--bone-dim); max-width:40ch; margin-top:1.4rem; }
.signal__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gut);
  margin-top:clamp(3rem,8vh,6rem);
  align-items:end;
}
.stat{ grid-column:span 4; display:flex; flex-direction:column; gap:1rem; border-top:1px solid var(--line); padding-top:1.4rem; }
.stat--lg{ grid-column:span 6; }
.stat__value{
  font-family:var(--serif); font-weight:300; line-height:.85;
  font-size:clamp(3.2rem,9vw,8rem); letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums;
}
.stat--lg .stat__value{ font-size:clamp(4.5rem,13vw,12rem); color:var(--accent); }
.stat__label{ color:var(--bone-dim); line-height:1.5; }

.signal__chart{ grid-column:span 6; border-top:1px solid var(--line); padding-top:1.4rem; }
.chart__head,.chart__foot{ display:flex; justify-content:space-between; }
.chart__head{ margin-bottom:1rem; }
.chart__foot{ margin-top:1rem; color:var(--bone-faint); }
.chart__svg{ width:100%; height:clamp(140px,22vh,220px); overflow:visible; }
.chart__grid line{ stroke:var(--line); stroke-width:1; }
.chart__area{ fill:var(--accent-dim); opacity:0; transition:opacity 1.2s var(--ease) .4s; }
.chart__line{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:1200; stroke-dashoffset:1200; }
.chart__node{ fill:var(--accent); opacity:0; }
.signal__chart.is-in .chart__line{ animation:draw 2s var(--ease-out) .2s forwards; }
.signal__chart.is-in .chart__area{ opacity:1; }
.signal__chart.is-in .chart__node{ animation:pop .5s var(--ease) 2s forwards, pulse 2.4s ease-in-out 2.5s infinite; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ from{opacity:0; transform:scale(0)} to{opacity:1; transform:scale(1)} }
@keyframes pulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(255,77,35,.6)) } 50%{ filter:drop-shadow(0 0 10px rgba(255,77,35,.9)) } }

/* ── 05 Manifesto ── */
.manifesto{ text-align:left; overflow:hidden; }
.manifesto__quote{ max-width:24ch; margin:1rem 0 clamp(3rem,8vh,6rem); }
.manifesto__quote p{
  font-family:var(--serif); font-weight:320; line-height:1.02;
  font-size:var(--fs-xl); letter-spacing:-.025em;
}
.manifesto__quote em{ color:var(--accent); }
.stroke-word{ color:transparent; -webkit-text-stroke:1px var(--bone); }
.manifesto__marquee{ border-block:1px solid var(--line); padding:clamp(1rem,3vh,2rem) 0; overflow:hidden; }
.ticker--lg span{ font-family:var(--serif); font-style:italic; font-weight:330; font-size:clamp(2rem,6vw,5rem); text-transform:none; letter-spacing:-.01em; }
.manifesto__sign{ display:flex; align-items:baseline; gap:1.4rem; margin-top:clamp(2.5rem,6vh,4rem); flex-wrap:wrap; }
.manifesto__name{ font-family:var(--serif); font-style:italic; font-size:var(--fs-md); }

/* ── 06 Contact ── */
.contact{ min-height:90svh; display:flex; flex-direction:column; justify-content:center; }
.contact__pre{ max-width:42ch; color:var(--bone-dim); font-size:var(--fs-body); margin-bottom:clamp(2.5rem,7vh,5rem); }
.contact__email{
  display:inline-flex; align-items:flex-start; gap:.3em; align-self:flex-start;
  font-family:var(--serif); font-weight:330; line-height:.95;
  font-size:clamp(1.8rem,7.5vw,7rem); letter-spacing:-.03em;
  position:relative; word-break:break-word;
}
.contact__email-text{ background:linear-gradient(var(--accent),var(--accent)) no-repeat; background-size:0% 1px; background-position:0 100%; transition:background-size .6s var(--ease); }
.contact__email:hover .contact__email-text{ background-size:100% 1px; color:var(--accent); }
.contact__arrow{ font-size:.4em; transition:transform .5s var(--ease); }
.contact__email:hover .contact__arrow{ transform:translate(.3em,-.3em); }
.contact__rows{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,5rem); margin-top:clamp(3rem,8vh,6rem); border-top:1px solid var(--line); padding-top:2rem; }
.contact__row{ display:flex; flex-direction:column; gap:.5rem; }
.contact__row span:last-child{ font-size:var(--fs-md); font-family:var(--serif); font-weight:340; }
a.contact__row span:last-child{ transition:color .3s; }
a.contact__row:hover span:last-child{ color:var(--accent); }

/* footer */
.footer{ padding:clamp(2rem,5vh,4rem) var(--pad-x) clamp(2rem,4vh,3rem); border-top:1px solid var(--line); position:relative; }
.footer__line{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer__big{ text-align:center; line-height:.8; margin:clamp(1rem,4vh,3rem) 0; pointer-events:none; }
.footer__big .display{ font-size:clamp(4rem,28vw,28rem); color:var(--bone-ghost); -webkit-text-stroke:1px var(--line); letter-spacing:.02em; }
.footer__back{ color:var(--accent); }

/* ───────────────────────── 07 · COMPONENTS ───────────────────────── */
.ticker{ display:inline-flex; align-items:center; gap:1.4rem; white-space:nowrap; will-change:transform; animation:marquee 28s linear infinite; }
.ticker span{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:.9rem; color:var(--bone-dim); }
.ticker__dot{ color:var(--accent); }
.ticker--lg{ animation-duration:34s; }
.ticker[data-speed="reverse"]{ animation-direction:reverse; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ───────────────────────── 08 · RESPONSIVE ───────────────────────── */
@media (max-width: 980px){
  .rail{ display:none; }
  .doctrine__body{ grid-template-columns:1fr; gap:2.5rem; max-width:60ch; margin-left:0; }
  .case,.case--right{ grid-template-columns:1fr; grid-template-areas:"index" "metric" "body"; }
  .case--right .case__metric{ align-items:flex-start; text-align:left; }
  .case__body{ text-align:left; max-width:56ch; }
  .signal__grid{ grid-template-columns:repeat(6,1fr); }
  .stat,.stat--lg,.signal__chart{ grid-column:span 6; }
}

@media (max-width: 720px){
  .nav{ display:none; }
  .menu-toggle{ display:flex; mix-blend-mode:difference; }
  .menu-toggle.is-open span:first-child{ transform:translateY(3.75px) rotate(45deg); }
  .menu-toggle.is-open span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }
  .chrome--nav{ mix-blend-mode:normal; }
  .display__line--stroke{ margin-left:6vw; }
  .opening__statement{ margin-left:0; }
  .sys{ grid-template-columns:auto 1fr; grid-template-areas:"no name" "desc desc" "arrow arrow"; gap:.6rem 1.2rem; margin-left:0 !important; }
  .sys__no{ grid-area:no; } .sys__name{ grid-area:name; } .sys__desc{ grid-area:desc; } .sys__arrow{ display:none; }
  .doctrine__figure,.sys-stage{ opacity:.3; }
  .case__data{ gap:1.4rem; }
}

@media (max-width: 480px){
  .opening__meta .mono:last-child{ display:none; }
  .case__ghost{ opacity:.5; font-size:40vw; }
}

/* ───────────────────────── MOTION SAFETY ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
  .split-inner{ transform:none !important; }
  .loader{ display:none !important; }
  html.is-loading,html.is-loading body{ overflow:auto; height:auto; }
  .ticker{ animation:none; }
  .chart__line{ stroke-dashoffset:0; }
  .chart__area,.chart__node{ opacity:1; }
  body{ cursor:auto; }
  .cursor{ display:none; }
}