/* ==========================================================================
   Example Domain — "The Reserved Room"
   Scroll-driven narrative. Archival, institutional, image-free.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Palette */
  --c-page:#EEEEEE;
  --c-paper:#F8F8F6;
  --c-surface:#FFFFFF;
  --c-ink:#111111;
  --c-ink-2:#555555;
  --c-line:#DDDDDD;
  --c-accent:#334488;
  --c-accent-hover:#223366;
  --c-orange:#FF4D00;
  --c-deep:#0A0A0A;

  /* Type */
  --font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-small:0.8rem;
  --fs-body:1rem;
  --fs-h3:1.5625rem;
  --fs-h2:1.953rem;
  --fs-h1:2.441rem;
  --fs-display:3.815rem;
  --fs-mega:4.768rem;

  /* 8pt spacing scale */
  --space-1:0.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:4rem;
  --space-7:6rem;
  --space-8:8rem;

  /* Elevation: layered borders + hard offset + deep soft falloff. Never soft-only. */
  --elev-1:0 0 0 1px var(--c-line), 0 1px 0 0 rgba(17,17,17,.06);
  --elev-2:0 0 0 1px rgba(17,17,17,.10), 0 2px 0 0 rgba(17,17,17,.10), 0 8px 20px -12px rgba(17,17,17,.38);
  --elev-3:0 0 0 1px rgba(17,17,17,.12), 0 3px 0 0 rgba(17,17,17,.12), 0 22px 48px -26px rgba(17,17,17,.48);
  --elev-4:0 0 0 1px rgba(255,255,255,.10), 0 4px 0 0 rgba(0,0,0,.55), 0 36px 80px -34px rgba(0,0,0,.85);

  --topbar-h:3rem;
  --radius:0.5rem;
  --grain-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--c-page);
}

body{
  margin:0;
  background:var(--c-page);
  color:var(--c-ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,figure,blockquote,ul,ol{margin:0;padding:0;}
ul,ol{list-style:none;}

a{
  color:var(--c-accent);
  text-decoration:none;
  text-underline-offset:0.18em;
  text-decoration-thickness:1px;
  transition:color .2s ease, text-decoration-color .2s ease;
}
a:hover,
a:focus-visible{
  color:var(--c-accent-hover);
  text-decoration:underline;
}
a:focus-visible{
  outline:2px solid var(--c-orange);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--c-orange);color:#fff;}

/* --------------------------------------------------------------------------
   3. Grain overlay
   -------------------------------------------------------------------------- */
.grain{
  position:fixed;
  top:-60%;
  left:-60%;
  width:220%;
  height:220%;
  z-index:9999;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:var(--grain-url);
  background-size:260px 260px;
  will-change:transform;
  animation:grainShift 1.2s steps(5,end) infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0);}
  20%{transform:translate3d(-3%,2%,0);}
  40%{transform:translate3d(2%,-3%,0);}
  60%{transform:translate3d(-2%,-2%,0);}
  80%{transform:translate3d(3%,3%,0);}
  100%{transform:translate3d(0,0,0);}
}

/* --------------------------------------------------------------------------
   4. Skip link
   -------------------------------------------------------------------------- */
.skip-link{
  position:absolute;
  left:var(--space-2);
  top:-100px;
  z-index:10000;
  padding:var(--space-1) var(--space-2);
  background:var(--c-deep);
  color:#fff;
  font-family:var(--font-mono);
  font-size:var(--fs-small);
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:2px;
  transition:top .2s ease;
}
.skip-link:focus{
  top:var(--space-2);
  color:#fff;
  text-decoration:none;
}

/* --------------------------------------------------------------------------
   5. Progress bar (scroll-linked)
   -------------------------------------------------------------------------- */
.progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:300;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(17,17,17,.06),rgba(17,17,17,0));
}
.progress__bar{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,var(--c-accent),var(--c-orange));
  transform-origin:0 50%;
  transform:scaleX(0);
  box-shadow:0 0 14px rgba(255,77,0,.55);
}
@supports (animation-timeline: scroll()){
  .progress__bar{
    animation:scaleProgress linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes scaleProgress{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}

/* --------------------------------------------------------------------------
   6. Topbar
   -------------------------------------------------------------------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:200;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-height:var(--topbar-h);
  padding:var(--space-1) var(--space-2);
  background:rgba(238,238,238,.86);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  backdrop-filter:blur(10px) saturate(150%);
  border-bottom:1px solid var(--c-line);
}
.topbar__mark{
  flex:none;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-ink);
  white-space:nowrap;
}
.topbar__mark::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:.55em;
  background:var(--c-accent);
  vertical-align:0.02em;
  transform:rotate(45deg);
}
.topbar__meta{
  display:none;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-ink-2);
  white-space:nowrap;
}
.topbar__status{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-left:auto;
  flex:none;
}

.dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--c-ink-2);
  flex:none;
}
.dot--live{
  background:var(--c-orange);
  box-shadow:0 0 0 0 rgba(255,77,0,.6);
  animation:pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(255,77,0,.55);}
  70%{box-shadow:0 0 0 9px rgba(255,77,0,0);}
  100%{box-shadow:0 0 0 0 rgba(255,77,0,0);}
}

/* --------------------------------------------------------------------------
   7. Type utilities
   -------------------------------------------------------------------------- */
.t-mono{
  font-family:var(--font-mono);
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.t-small{
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--c-ink-2);
}
.t-display{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(2.75rem,13vw,var(--fs-display));
  line-height:1.05;
  letter-spacing:-.045em;
}
.t-h1{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(1.75rem,5.4vw,var(--fs-h1));
  line-height:1.15;
  letter-spacing:-.018em;
}
.t-h3{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:clamp(1.1rem,3.2vw,var(--fs-h3));
  line-height:1.3;
  letter-spacing:-.01em;
}
.t-body{
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-ink-2);
  max-width:62ch;
}
.t-mega{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(2.1rem,9.5vw,var(--fs-mega));
  line-height:1;
  letter-spacing:-.045em;
}

/* --------------------------------------------------------------------------
   8. Layout & rail
   -------------------------------------------------------------------------- */
.layout{
  position:relative;
  display:block;
  background:var(--c-page);
}

.rail{
  position:relative;
  z-index:50;
  display:block;
  padding:var(--space-2) var(--space-2);
  background:var(--c-page);
  border-bottom:1px solid var(--c-line);
}
.rail__label{
  display:block;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-ink-2);
  margin-bottom:var(--space-1);
}
.rail__list{
  display:flex;
  gap:var(--space-2);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:.25rem;
}
.rail__list::-webkit-scrollbar{display:none;}

.rail__item{flex:none;}

.rail__link{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  padding:.35rem .1rem;
  border-bottom:1px solid transparent;
  color:var(--c-ink-2);
  font-size:.72rem;
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.rail__link:hover,
.rail__link:focus-visible{
  color:var(--c-accent);
  border-bottom-color:var(--c-accent);
  text-decoration:none;
  transform:translateY(-1px);
}
.rail__num{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.08em;
  color:var(--c-accent);
}
.rail__name{
  font-family:var(--font-sans);
  text-transform:none;
  letter-spacing:0;
}
.rail__line{
  display:none;
  position:relative;
  width:1px;
  background:var(--c-line);
  overflow:hidden;
}
.rail__fill{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--c-accent),var(--c-orange));
  transform-origin:50% 0;
  transform:scaleY(0);
}
@supports (animation-timeline: scroll()){
  .rail__fill{
    animation:scaleRail linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes scaleRail{
  from{transform:scaleY(0);}
  to{transform:scaleY(1);}
}
.rail__domain{
  display:none;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-accent);
  word-break:break-all;
}

/* --------------------------------------------------------------------------
   9. Main & chapters
   -------------------------------------------------------------------------- */
.main{
  position:relative;
  z-index:1;
  min-width:0;
  background:var(--c-page);
}

.chapter{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100vh;
  min-height:100svh;
  padding:var(--space-6) var(--space-3);
  overflow:hidden;
  scroll-margin-top:calc(var(--topbar-h) + 1rem);
  isolation:isolate;
}
.chapter__inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:72rem;
  margin-inline:auto;
}
.chapter__head{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-bottom:var(--space-5);
}
.chapter__num{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(3rem,15vw,var(--fs-display));
  line-height:1;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(17,17,17,.30);
  text-stroke:1px rgba(17,17,17,.30);
  margin-bottom:calc(var(--space-2) * -1);
  user-select:none;
}
.chapter__title{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(1.55rem,6vw,var(--fs-h2));
  line-height:1.2;
  letter-spacing:-.02em;
  max-width:22ch;
}
.chapter__lede{
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-ink-2);
  max-width:56ch;
}

/* Chapter 1 — void */
.chapter--void{
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%),
    var(--c-page);
}

/* --------------------------------------------------------------------------
   10. Browser chrome (Chapter 1)
   -------------------------------------------------------------------------- */
.browser{
  position:relative;
  margin-top:var(--space-4);
  background:var(--c-surface);
  border-radius:var(--radius);
  box-shadow:var(--elev-3);
  overflow:hidden;
  transition:box-shadow .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.browser:hover{
  box-shadow:var(--elev-4);
  transform:translateY(-2px);
}
.browser__bar{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  padding:.6rem .75rem;
  background:linear-gradient(180deg,#F6F6F5,#ECECEA);
  border-bottom:1px solid var(--c-line);
}
.browser__dots{
  flex:none;
  width:8px;
  height:8px;
  margin-right:30px;
  border-radius:50%;
  background:#D2D2CE;
  box-shadow:13px 0 0 #D2D2CE, 26px 0 0 #D2D2CE;
}
.browser__url{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex:1 1 auto;
  min-width:0;
  padding:.28rem .8rem;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.72rem;
  line-height:1.4;
  color:var(--c-ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:inset 0 1px 2px rgba(17,17,17,.05);
}
.browser__scheme{
  color:var(--c-ink-2);
  letter-spacing:.02em;
  flex:none;
}
.browser__lock{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin-left:auto;
  border:1px solid rgba(51,68,136,.45);
  border-radius:2px;
  font-size:.5rem;
  color:var(--c-accent);
  line-height:1;
}
.type-target{
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:.01em;
  color:var(--c-ink);
}
.caret{
  display:inline-block;
  width:7px;
  height:1.05em;
  margin-left:2px;
  background:var(--c-orange);
  vertical-align:-0.15em;
  animation:blink 1.05s steps(1,end) infinite;
}
@keyframes blink{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

.browser__viewport{
  position:relative;
  padding:var(--space-5) var(--space-3);
  min-height:46vh;
  background:var(--c-surface);
  overflow:hidden;
}
.voidgrid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(17,17,17,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(17,17,17,.055) 1px,transparent 1px);
  background-size:44px 44px, 44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 42%,#000 0%,rgba(0,0,0,.35) 55%,transparent 88%);
  mask-image:radial-gradient(120% 90% at 50% 42%,#000 0%,rgba(0,0,0,.35) 55%,transparent 88%);
}
.browser__hint{
  position:relative;
  z-index:2;
  margin-top:var(--space-4);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-ink-2);
  animation:hintBreathe 3.6s ease-in-out infinite;
}
@keyframes hintBreathe{
  0%,100%{opacity:.72;}
  50%{opacity:1;}
}

figcaption{
  display:block;
  margin-top:var(--space-2);
  font-family:var(--font-mono);
  font-size:.68rem;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-ink-2);
}

.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* --------------------------------------------------------------------------
   11. Dark chapter — the Reserved Three
   -------------------------------------------------------------------------- */
.chapter--dark{
  background:
    radial-gradient(100% 70% at 50% 100%,rgba(51,68,136,.22),transparent 65%),
    var(--c-deep);
  color:#F2F2F0;
  --c-ink:#F2F2F0;
  --c-ink-2:#9C9C98;
  --c-line:rgba(255,255,255,.14);
}
.chapter--dark .chapter__num{
  -webkit-text-stroke:1px rgba(255,255,255,.28);
  text-stroke:1px rgba(255,255,255,.28);
}
.chapter--dark .chapter__lede{color:#9C9C98;}

.field{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.field__dust{
  position:absolute;
  inset:-25%;
  mix-blend-mode:screen;
  opacity:.75;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 14%,rgba(51,68,136,.95),transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 62%,rgba(51,68,136,.8),transparent 60%),
    radial-gradient(1.6px 1.6px at 37% 28%,rgba(120,140,220,.7),transparent 60%),
    radial-gradient(1.1px 1.1px at 51% 78%,rgba(51,68,136,.9),transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 22%,rgba(90,110,190,.75),transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 58%,rgba(51,68,136,.85),transparent 60%),
    radial-gradient(1.7px 1.7px at 88% 36%,rgba(120,140,220,.6),transparent 60%),
    radial-gradient(1.1px 1.1px at 14% 86%,rgba(51,68,136,.7),transparent 60%),
    radial-gradient(1.3px 1.3px at 44% 48%,rgba(90,110,190,.65),transparent 60%),
    radial-gradient(1.2px 1.2px at 69% 88%,rgba(51,68,136,.8),transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 74%,rgba(120,140,220,.55),transparent 60%),
    radial-gradient(1.1px 1.1px at 5% 44%,rgba(51,68,136,.65),transparent 60%);
  -webkit-mask-image:radial-gradient(95% 85% at 50% 60%,#000 0%,rgba(0,0,0,.5) 55%,transparent 85%);
  mask-image:radial-gradient(95% 85% at 50% 60%,#000 0%,rgba(0,0,0,.5) 55%,transparent 85%);
  animation:dustDrift 42s linear infinite;
}
@keyframes dustDrift{
  0%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(-2.5%,-2%,0) rotate(0.6deg);}
  100%{transform:translate3d(0,0,0) rotate(0deg);}
}
.field__labels{
  position:absolute;
  inset:-10% -20%;
  font-family:var(--font-mono);
  font-size:.58rem;
  line-height:2.7;
  letter-spacing:.3em;
  word-spacing:1.4em;
  text-align:justify;
  color:rgba(51,68,136,.65);
  mix-blend-mode:screen;
  opacity:.55;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  animation:dustDrift 60s linear infinite reverse;
}

.chapter__head--over{
  position:relative;
  z-index:4;
  max-width:34rem;
}

/* Monoliths */
.monoliths{
  position:relative;
  z-index:4;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(.5rem,3vw,2.25rem);
  height:clamp(190px,42vh,420px);
  margin-top:var(--space-5);
}
.monolith{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:clamp(78px,21vw,196px);
  height:100%;
  padding:var(--space-2) var(--space-1);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.01) 45%,rgba(0,0,0,.35)),#141414;
  border:1px solid rgba(255,77,0,.5);
  clip-path:polygon(9% 100%,0 13%,17% 0,100% 7%,92% 100%);
  box-shadow:
    inset 0 0 46px rgba(255,77,0,.09),
    0 26px 60px -32px rgba(255,77,0,.55);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.monolith::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:34%;
  background:linear-gradient(180deg,rgba(255,77,0,.16),transparent);
  mix-blend-mode:screen;
  pointer-events:none;
}
.monolith:nth-child(2){height:88%;}
.monolith:nth-child(3){height:95%;}
.monolith:hover{
  transform:translateY(-8px) rotate(-.7deg);
  border-color:var(--c-orange);
  box-shadow:inset 0 0 60px rgba(255,77,0,.16), 0 34px 70px -30px rgba(255,77,0,.7);
}
.monolith__num{
  position:relative;
  z-index:2;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.18em;
  color:var(--c-orange);
}
.monolith__domain{
  position:relative;
  z-index:2;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(.6rem,1.7vw,.95rem);
  line-height:1.25;
  letter-spacing:.01em;
  color:#F2F2F0;
  word-break:break-all;
  text-shadow:0 0 22px rgba(255,77,0,.35);
}
.monolith__meta{
  position:relative;
  z-index:2;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8A8A86;
}

/* Sweepline */
.sweepline{
  position:absolute;
  left:0;
  right:0;
  top:56%;
  z-index:6;
  height:2px;
  pointer-events:none;
  mix-blend-mode:screen;
}
.sweepline__bar{
  display:block;
  width:100%;
  height:100%;
  transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--c-orange) 12%,#FFD9C7 50%,var(--c-orange) 88%,transparent);
  box-shadow:0 0 24px rgba(255,77,0,.85);
  animation:sweepline 7s ease-in-out infinite;
}
@keyframes sweepline{
  0%{transform:scaleX(0);opacity:0;}
  12%{opacity:1;}
  48%{transform:scaleX(1);opacity:1;}
  58%{transform:scaleX(1);opacity:0;}
  100%{transform:scaleX(1);opacity:0;}
}

.stamp{
  display:inline-block;
  padding:.45rem .9rem;
  border:2px solid var(--c-orange);
  border-radius:2px;
  color:var(--c-orange);
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  transform:rotate(-3deg);
  mix-blend-mode:screen;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), background-color .4s ease, color .4s ease;
}
.stamp:hover{
  transform:rotate(0deg) scale(1.03);
  background:var(--c-orange);
  color:var(--c-deep);
  mix-blend-mode:normal;
}

.strike{
  position:relative;
  display:inline-block;
  white-space:nowrap;
}
.strike::after{
  content:"";
  position:absolute;
  left:-.06em;
  right:-.06em;
  top:53%;
  height:.085em;
  background:var(--c-orange);
  transform:scaleX(0);
  transform-origin:0 50%;
  box-shadow:0 0 26px rgba(255,77,0,.9);
}
@supports (animation-timeline: view()){
  .strike::after{
    animation:strikeIn linear both;
    animation-timeline:view();
    animation-range:entry 18% cover 42%;
  }
}
@keyframes strikeIn{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}

/* --------------------------------------------------------------------------
   12. Paper chapter — fragments
   -------------------------------------------------------------------------- */
.chapter--paper{
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 30%),
    var(--c-paper);
  color:var(--c-ink);
}
.chapter--paper .chapter__num{
  -webkit-text-stroke:1px rgba(17,17,17,.20);
  text-stroke:1px rgba(17,17,17,.20);
}

.fragments{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3);
  margin-top:var(--space-5);
}
.fragment{
  position:relative;
  padding:var(--space-3);
  background:var(--c-surface);
  border-radius:var(--radius);
  box-shadow:var(--elev-2);
  transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.fragment:hover{
  transform:translateY(-5px) rotate(0deg);
  box-shadow:var(--elev-3);
}

/* code fragment */
.fragment--code{
  background:linear-gradient(180deg,#131313,#0B0B0B);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--elev-4);
}
.fragment--code figcaption{color:#8A8A86;}
.code{
  display:block;
  font-family:var(--font-mono);
  font-size:.74rem;
  line-height:1.75;
  color:#A9BEE9;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-x:auto;
  text-shadow:0 0 18px rgba(51,68,136,.4);
}

/* wireframe fragment */
.fragment--wire{background:var(--c-paper);}
.wire{
  position:relative;
  height:clamp(120px,22vw,180px);
  border:1px solid rgba(17,17,17,.22);
  border-radius:2px;
  background:#fff;
  overflow:hidden;
}
.wire::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:11%;
  height:13%;
  background:rgba(51,68,136,.20);
  border-left:3px solid var(--c-accent);
}
.wire::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:11%;
  height:44%;
  background:
    repeating-linear-gradient(180deg,rgba(17,17,17,.14) 0 2px,transparent 2px 11px),
    repeating-linear-gradient(90deg,rgba(17,17,17,.06) 0 1px,transparent 1px 33%);
  border:1px dashed rgba(17,17,17,.18);
}

/* lorem fragment */
.fragment--lorem{background:var(--c-paper);}
.lorem{
  font-size:.82rem;
  line-height:1.95;
  color:var(--c-ink-2);
  text-align:justify;
  hyphens:auto;
  background-image:repeating-linear-gradient(180deg,transparent 0 calc(1.95em - 1px),rgba(17,17,17,.09) calc(1.95em - 1px) 1.95em);
  background-position:0 0;
  padding-bottom:.2rem;
}
.lorem::first-line{
  font-weight:500;
  color:var(--c-ink);
  letter-spacing:.01em;
}

/* placeholder image fragment */
.fragment--image{background:var(--c-surface);}
.ph{
  position:relative;
  aspect-ratio:16 / 10;
  border:1px solid var(--c-line);
  border-radius:2px;
  overflow:hidden;
  background-color:#EDEDEA;
  background-image:
    linear-gradient(to top right,transparent calc(50% - 1px),rgba(17,17,17,.18) 50%,transparent calc(50% + 1px)),
    linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(17,17,17,.18) 50%,transparent calc(50% + 1px)),
    linear-gradient(135deg,rgba(51,68,136,.10),rgba(255,77,0,.06));
  background-size:100% 100%,100% 100%,100% 100%;
  display:grid;
  place-items:center;
  transition:filter .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.ph::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.35));
  mix-blend-mode:multiply;
  pointer-events:none;
}
.ph::after{
  content:"1600 × 1000";
  position:relative;
  z-index:2;
  padding:.25rem .6rem;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(17,17,17,.12);
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.16em;
  color:var(--c-ink-2);
}
.ph:hover{
  filter:contrast(1.06) saturate(1.08);
  transform:scale(1.012);
}

/* chain fragment */
.fragment--chain{background:var(--c-surface);}
.chain{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:var(--space-2) .25rem;
  background-image:repeating-linear-gradient(90deg,rgba(17,17,17,.25) 0 4px,transparent 4px 11px);
  background-size:100% 1px;
  background-position:0 50%;
  background-repeat:no-repeat;
}
.chain > *{
  position:relative;
  background:var(--c-surface);
  padding:0 .5rem;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-ink-2);
}
.chain__end{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.3rem .65rem !important;
  border:1px solid var(--c-orange);
  border-radius:2px;
  color:var(--c-orange) !important;
  background:var(--c-surface);
}
.chain__end::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-orange);
  animation:pulseDot 2.4s ease-out infinite;
}

/* --------------------------------------------------------------------------
   13. Ink chapter — server plant
   -------------------------------------------------------------------------- */
.chapter--ink{
  background:
    linear-gradient(180deg,rgba(255,77,0,.10),transparent 45%),
    var(--c-deep);
  color:#F2F2F0;
  --c-ink:#F2F2F0;
  --c-ink-2:#9C9C98;
}
.chapter--ink .chapter__num{
  -webkit-text-stroke:1px rgba(255,255,255,.24);
  text-stroke:1px rgba(255,255,255,.24);
}
.plant{
  position:relative;
  height:clamp(220px,46vh,470px);
  margin-top:var(--space-4);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  overflow:hidden;
  clip-path:polygon(0 4%,100% 0,100% 100%,0 96%);
  background-color:#0F0F0F;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,rgba(51,68,136,.18) 0 3px,transparent 3px 58px),
    radial-gradient(2px 2px at 12px 30px,rgba(255,77,0,.55),transparent 60%),
    radial-gradient(2px 2px at 128px 72px,rgba(120,140,220,.5),transparent 60%),
    radial-gradient(2px 2px at 244px 114px,rgba(255,77,0,.45),transparent 60%),
    radial-gradient(2px 2px at 360px 156px,rgba(120,140,220,.45),transparent 60%);
  background-size:58px 42px,58px 42px,58px 42px,58px 42px,58px 42px,58px 42px,58px 42px;
  box-shadow:inset 0 0 90px rgba(0,0,0,.85), inset 0 0 40px rgba(51,68,136,.18);
  transition:filter .6s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.plant::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:16px;
  background:repeating-linear-gradient(45deg,var(--c-orange) 0 11px,#141414 11px 22px);
  opacity:.82;
  mix-blend-mode:multiply;
}
.plant::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.75));
  pointer-events:none;
}
.plant:hover{
  filter:contrast(1.08) brightness(1.05);
  transform:translateY(-3px);
}

/* --------------------------------------------------------------------------
   14. Quiet chapter — the monument
   -------------------------------------------------------------------------- */
.chapter--quiet{
  min-height:100vh;
  min-height:100svh;
  padding:var(--space-8) var(--space-3);
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 60%),
    var(--c-page);
  align-items:center;
}
.chapter--quiet .chapter__inner{
  max-width:600px;
  margin-inline:auto;
  padding:var(--space-5) var(--space-4);
  background:var(--c-surface);
  border-radius:var(--radius);
  box-shadow:var(--elev-2);
  transition:box-shadow .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.chapter--quiet .chapter__inner:hover{
  box-shadow:var(--elev-3);
  transform:translateY(-2px);
}
.chapter--quiet .chapter__title{
  font-size:clamp(1.6rem,4.6vw,var(--fs-h1));
  letter-spacing:-.015em;
  max-width:26ch;
}
.chapter--quiet .chapter__lede{
  margin-top:var(--space-2);
  max-width:52ch;
}
.chapter--quiet a{
  font-weight:500;
  color:var(--c-accent);
  text-decoration:underline;
  text-decoration-color:rgba(51,68,136,.35);
  transition:color .2s ease, text-decoration-color .25s ease, letter-spacing .25s ease;
}
.chapter--quiet a:hover,
.chapter--quiet a:focus-visible{
  color:var(--c-accent-hover);
  text-decoration-color:var(--c-orange);
  letter-spacing:.012em;
}

/* --------------------------------------------------------------------------
   15. Scroll-driven reveals
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .chapter__inner{
      animation:revealUp linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 34%;
    }
    .browser,
    .fragment,
    .monolith,
    .plant,
    .stamp{
      animation:revealFade linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 30%;
    }
  }
}
@keyframes revealUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes revealFade{
  from{opacity:0;}
  to{opacity:1;}
}

/* --------------------------------------------------------------------------
   16. Breakpoint: 700px
   -------------------------------------------------------------------------- */
@media (min-width:700px){
  .topbar{padding:var(--space-1) var(--space-3);}
  .topbar__meta{display:inline-block;}

  .chapter{padding:var(--space-7) var(--space-4);}
  .chapter__head{margin-bottom:var(--space-6);}
  .chapter__num{
    position:absolute;
    top:-.42em;
    right:0;
    margin-bottom:0;
    opacity:.55;
    pointer-events:none;
  }
  .chapter__head{min-height:clamp(90px,14vw,190px);padding-right:clamp(60px,18vw,260px);}

  .browser__viewport{padding:var(--space-6) var(--space-5);min-height:52vh;}

  .fragments{
    grid-template-columns:repeat(12,1fr);
    gap:var(--space-5) var(--space-3);
    align-items:start;
    padding-bottom:var(--space-5);
  }
  .fragment--code{grid-column:1 / 8;transform:rotate(-.55deg);}
  .fragment--wire{grid-column:8 / 13;margin-top:var(--space-6);transform:rotate(.9deg);}
  .fragment--lorem{grid-column:2 / 7;margin-top:calc(var(--space-5) * -1);transform:rotate(.4deg);}
  .fragment--image{grid-column:8 / 13;margin-top:calc(var(--space-4) * -1);transform:rotate(-.7deg);}
  .fragment--chain{grid-column:1 / 7;margin-top:var(--space-3);transform:rotate(.3deg);}

  .monoliths{justify-content:flex-start;gap:clamp(1rem,4vw,3rem);}
}

/* --------------------------------------------------------------------------
   17. Breakpoint: 1000px — sticky rail
   -------------------------------------------------------------------------- */
@media (min-width:1000px){
  .layout{
    display:grid;
    grid-template-columns:clamp(220px,21vw,300px) minmax(0,1fr);
    align-items:start;
  }

  .rail{
    position:sticky;
    top:var(--topbar-h);
    z-index:60;
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    height:calc(100vh - var(--topbar-h));
    height:calc(100svh - var(--topbar-h));
    padding:var(--space-5) var(--space-3) var(--space-3);
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%),var(--c-page);
    border-bottom:0;
    border-right:1px solid var(--c-line);
  }
  .rail__list{
    flex-direction:column;
    gap:.1rem;
    overflow:visible;
    padding-bottom:0;
  }
  .rail__item{flex:initial;}
  .rail__link{
    padding:.45rem 0 .45rem .7rem;
    border-bottom:0;
    border-left:1px solid transparent;
    white-space:normal;
  }
  .rail__link:hover,
  .rail__link:focus-visible{
    border-bottom-color:transparent;
    border-left-color:var(--c-accent);
    transform:translateX(2px);
  }
  .rail__line{
    display:block;
    flex:1 1 auto;
    margin-left:.7rem;
    min-height:var(--space-5);
  }
  .rail__domain{display:block;}

  .chapter{
    padding:var(--space-8) var(--space-6);
    min-height:112vh;
  }
  .chapter--quiet{min-height:100vh;}
  .chapter__head{padding-right:clamp(120px,22vw,320px);}
  .chapter__num{font-size:clamp(3.5rem,7vw,var(--fs-display));}

  .browser__viewport{padding:var(--space-7) var(--space-6);min-height:58vh;}

  .monoliths{height:clamp(300px,48vh,520px);}
}

/* --------------------------------------------------------------------------
   18. Reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .caret{opacity:1;}
  .progress__bar{transform:scaleX(1);}
  .rail__fill{transform:scaleY(1);}
  .sweepline{display:none;}
  .strike::after{transform:scaleX(1);}
}

@media print{
  .grain,.progress,.topbar,.rail,.sweepline,.field,.voidgrid{display:none !important;}
  body{background:#fff;color:#000;}
  .chapter{min-height:auto;page-break-inside:avoid;box-shadow:none;}
  .fragment,.browser{box-shadow:none;border:1px solid #ccc;}
}