:root{
  --serif:"EB Garamond",Garamond,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --bg-top:#0e0a07; --bg-bottom:#1a1209; --ink:#ead9c0;
  --rail-ink:rgba(236,220,192,.78);
  --panel-accent:rgba(255,226,190,.85);
  --measure:34rem;
}
html{scroll-behavior:auto}
body,ol,ul,p,figure{margin:0}
body{
  font-family:var(--serif); color:var(--ink);
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  background-attachment:fixed;
  transition:none; /* colour is driven by JS scrub, not CSS transition */
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
#ribbon{position:relative;z-index:1}
/* film grain overlay */
#grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  animation:grain .6s steps(2) infinite}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-4px,3px)}100%{transform:translate(3px,-2px)}}
/* vignette */
#vignette{position:fixed;inset:0;z-index:55;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%,transparent 55%,rgba(0,0,0,.45) 100%)}
h1,h2{font-weight:500;letter-spacing:.06em}
.frase{font-style:italic;line-height:1.5;max-width:var(--measure)}
.rail{position:fixed;top:50%;right:2.4rem;z-index:65;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:1.2rem;align-items:flex-end;mix-blend-mode:screen}
.rail__eyebrow{font-family:var(--sans);font-size:.7rem;letter-spacing:.36em;text-transform:uppercase;opacity:.55}
.rail__list{list-style:none;display:grid;gap:.95rem}
.rail__list a{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:.34;transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.rail__list a::after{content:"";display:block;width:2.4rem;height:1px;margin-top:.35rem;margin-left:auto;
  background:rgba(236,220,192,.24);transform-origin:right center;transform:scaleX(.35);
  transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .35s ease}
.rail__list a.is-active{opacity:1;transform:translateX(-.2rem)}
.rail__list a.is-active::after{transform:scaleX(1);background:var(--panel-accent)}
@media (prefers-reduced-motion:reduce){#grain{animation:none}}

/* ── reveal system ── */
[data-reveal]{opacity:0;transform:translateY(28px);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none;transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.line{display:inline-block;overflow:hidden;vertical-align:top}
.line>span{display:inline-block}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
  .line>span{transform:none}
}

@media (hover:hover){
  #cursor{position:fixed;top:0;left:0;z-index:70;width:26px;height:26px;border-radius:50%;
    pointer-events:none;transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(255,236,200,.55),transparent 65%);
    mix-blend-mode:screen;transition:width .25s,height .25s}
}
@media (max-width:980px){
  .rail{display:none}
}