/* ============================================================
   SMALL WORLDS — web archive of Nathan Hubbard
   A cinematic exhibition of living, CSS-built miniatures.
   ============================================================ */

:root{
  --bg:        #0b0b0f;
  --bg-soft:   #111118;
  --ink:       #f3ede1;
  --ink-dim:   #9a948a;
  --ink-faint: #56524b;
  --line:      rgba(243,237,225,.12);

  /* per-world accent — overridden by JS as you scroll */
  --accent:   #d8cdb8;
  --accent-2: #8a8170;
  --glow:     rgba(216,205,184,.18);

  --serif: "Fraunces", Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-soft: cubic-bezier(.4,.1,.1,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
  scroll-snap-type:y proximity;
  cursor:none;
  transition:background .9s var(--ease-soft);
}
@media (hover:none){ body{ cursor:auto; } }

::selection{ background:var(--accent); color:#0b0b0f; }

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }

/* ---------- overlays: grain + vignette ---------- */
.grain{
  position:fixed; inset:-50%;
  z-index:90; 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='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-2%,2%)}
  80%{transform:translate(4%,1%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ---------- custom cursor ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:100; pointer-events:none; mix-blend-mode:difference; }
@media (hover:none){ .cursor{ display:none; } }
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6); transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), border-color .25s;
}
.cursor.is-hover .cursor__ring{ width:62px; height:62px; border-color:rgba(255,255,255,.9); }
.cursor.is-down  .cursor__ring{ width:24px; height:24px; }

/* ============================================================
   SPINE / NAV
   ============================================================ */
.spine{
  position:fixed; top:0; left:0; bottom:0; width:84px; z-index:60;
  display:flex; flex-direction:column; align-items:center;
  padding:26px 0; mix-blend-mode:normal;
  border-right:1px solid var(--line);
  background:linear-gradient(to right, rgba(0,0,0,.35), transparent);
}
.spine__mark{
  font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.08em;
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  color:var(--ink); transition:.4s var(--ease);
}
.spine__mark:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(-8deg); }

.spine__index{
  margin:auto 0; display:flex; flex-direction:column; gap:30px;
  writing-mode:vertical-rl;
}
.spine__index a{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--ink-faint); transition:color .4s var(--ease);
}
.spine__index a i{
  writing-mode:horizontal-tb; width:7px; height:7px; border-radius:50%;
  border:1px solid currentColor; transition:.4s var(--ease);
}
.spine__index a b{ font-weight:400; }
.spine__index a u{ text-decoration:none; text-transform:uppercase; opacity:0; transition:opacity .4s; }
.spine__index a:hover{ color:var(--ink); }
.spine__index a.is-active{ color:var(--accent); }
.spine__index a.is-active i{ background:var(--accent); box-shadow:0 0 12px var(--glow); transform:scale(1.15); }
.spine__index a.is-active u{ opacity:1; }

.spine__progress{
  width:1px; height:120px; background:var(--line); position:relative; margin-bottom:22px;
}
.spine__progress span{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:var(--accent); box-shadow:0 0 8px var(--glow);
}
.spine__foot{
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-align:center;
  color:var(--ink-faint); line-height:1.6;
}

/* ============================================================
   SHARED TYPE BITS
   ============================================================ */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink-dim);
}
em{ font-style:italic; }

/* reveal-on-load */
.reveal{ opacity:0; transform:translateY(22px); }
.is-ready .reveal{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease) var(--d,0s), transform 1.1s var(--ease) var(--d,0s);
}

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:0 8vw 0 calc(84px + 8vw); overflow:hidden;
}
.intro__sky{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.intro__inner{ position:relative; z-index:2; max-width:780px; }

.intro__title{
  font-weight:300; line-height:.86; letter-spacing:-.02em;
  font-size:clamp(4.5rem, 17vw, 15rem); margin:.12em 0 .35em;
}
.intro__title .line{ display:block; }
.intro__title em{
  font-weight:400; font-style:italic;
  background:linear-gradient(100deg, var(--ink), var(--accent) 60%, var(--ink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.intro__lede{
  font-size:clamp(1.05rem,1.9vw,1.5rem); max-width:34ch; color:#cfc8ba; font-weight:300;
}
.intro__meta{
  margin-top:2.2rem; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-dim);
  text-transform:uppercase;
}
.intro__meta i{ width:4px; height:4px; border-radius:50%; background:var(--ink-faint); }

.scrollcue{
  margin-top:3.4rem; display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .4s;
}
.scrollcue:hover{ color:var(--accent); }
.scrollcue svg{ width:22px; height:36px; }
.scrollcue__bead{ animation:bead 2s var(--ease) infinite; }
@keyframes bead{ 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(14px);opacity:.3} }

/* ============================================================
   WORLD SECTIONS (shared)
   ============================================================ */
.world{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:0 8vw 0 calc(84px + 8vw); overflow:hidden;
  scroll-snap-align:center;
}
.diorama{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  /* gentle parallax handle for JS */
  --px:0px; --py:0px;
}
.diorama::after{ /* unifying vignette + grade */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 70% 50%, transparent 30%, rgba(0,0,0,.65) 100%);
}

/* the placard / curatorial card */
.placard{
  position:relative; z-index:3; max-width:430px;
  backdrop-filter:blur(3px);
}
.placard--right{ margin-left:auto; text-align:right; }
.placard__no{
  font-family:var(--mono); font-size:13px; letter-spacing:.3em; color:var(--accent);
  display:block; margin-bottom:1.4rem;
}
.placard__kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:1rem;
}
.placard__title{
  font-weight:300; font-size:clamp(3rem,7vw,6rem); line-height:.92; letter-spacing:-.02em;
  margin-bottom:1.4rem;
}
.placard__title em{
  font-weight:400; color:var(--accent);
  text-shadow:0 0 40px var(--glow);
}
.placard__body{
  font-size:1.06rem; color:#d4cdc0; max-width:42ch; margin-bottom:1.6rem;
}
.placard--right .placard__body{ margin-left:auto; }
.placard__tags{
  list-style:none; display:flex; gap:8px; flex-wrap:wrap; margin-bottom:2.2rem;
}
.placard--right .placard__tags{ justify-content:flex-end; }
.placard__tags li{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); padding:5px 11px; border:1px solid var(--line); border-radius:100px;
}

/* enter button */
.enter{
  display:inline-flex; flex-direction:column; gap:3px; position:relative;
  padding:16px 26px; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; transition:border-color .5s var(--ease), transform .5s var(--ease);
  background:rgba(11,11,15,.4);
}
.placard--right .enter{ align-items:flex-end; }
.enter::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  opacity:0; transition:opacity .5s var(--ease);
}
.enter > *{ position:relative; z-index:1; }
.enter__label{ font-size:1.15rem; transition:color .4s; }
.enter__host{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-dim); transition:color .4s; }
.enter__arrow{
  position:absolute; top:14px; right:18px; font-size:1.1rem; color:var(--accent);
  transition:transform .5s var(--ease), color .4s;
}
.placard--right .enter__arrow{ right:auto; left:18px; }
.enter:hover{ border-color:transparent; transform:translateY(-3px); }
.enter:hover::before{ opacity:1; }
.enter:hover .enter__label,
.enter:hover .enter__host{ color:#0b0b0f; }
.enter:hover .enter__host{ opacity:.7; }
.enter:hover .enter__arrow{ color:#0b0b0f; transform:translate(4px,-4px); }

/* ============================================================
   DIORAMA 01 — OCEAN
   ============================================================ */
.d-ocean{ background:#06121b; }
.o-sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#0a1f2e 0%, #123a4d 38%, #2b6e7e 66%, #6fb6a9 100%);
}
.o-glow{
  position:absolute; left:60%; top:8%; width:60vw; height:60vw; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,221,170,.45), transparent 60%);
  filter:blur(8px);
}
.o-sun{
  position:absolute; left:62%; top:20%; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,#fff6e0,#ffd9a0 55%,rgba(255,200,120,0));
  box-shadow:0 0 120px 40px rgba(255,214,150,.5);
  animation:o-sun 14s var(--ease-soft) infinite alternate;
}
@keyframes o-sun{ from{transform:translateY(0)} to{transform:translateY(26px)} }
.o-stars{
  position:absolute; inset:0 0 60% 0; opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),
    radial-gradient(1px 1px at 70% 18%,#fff,transparent),
    radial-gradient(1px 1px at 85% 42%,#cfe,transparent),
    radial-gradient(1px 1px at 42% 12%,#fff,transparent),
    radial-gradient(1px 1px at 12% 55%,#fff,transparent);
}
.o-haze{
  position:absolute; left:0; right:0; top:48%; height:18%;
  background:linear-gradient(180deg, rgba(255,235,200,.18), transparent);
  filter:blur(6px);
}
.o-sea{ position:absolute; left:0; right:0; bottom:0; height:58%;
  background:linear-gradient(180deg,#2b6e7e,#0a2230 90%); overflow:hidden; }
.o-shimmer{
  position:absolute; left:50%; top:-4%; width:160px; height:80%; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,222,170,.55), transparent 70%);
  filter:blur(7px); opacity:.8; animation:o-shimmer 5s ease-in-out infinite;
}
@keyframes o-shimmer{ 0%,100%{transform:translateX(-50%) scaleX(1);opacity:.7} 50%{transform:translateX(-50%) scaleX(1.4);opacity:1} }
.o-wave{ position:absolute; left:0; bottom:0; width:200%; height:140px; }
.o-wave path{ fill:#0e2d3a; }
.o-wave--3{ bottom:34%; opacity:.5; height:120px; animation:waveX 19s linear infinite; }
.o-wave--3 path{ fill:#1f5663; }
.o-wave--2{ bottom:16%; opacity:.7; height:130px; animation:waveX 13s linear infinite reverse; }
.o-wave--2 path{ fill:#143f4c; }
.o-wave--1{ bottom:-2%; height:150px; animation:waveX 9s linear infinite; }
.o-wave--1 path{ fill:#0a2230; }
@keyframes waveX{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.o-buoy{
  position:absolute; left:24%; bottom:30%; width:10px; height:26px; border-radius:4px;
  background:linear-gradient(#e6594a,#b23a2e); box-shadow:0 0 12px rgba(230,89,74,.6);
  animation:o-buoy 4s ease-in-out infinite;
}
.o-buoy::after{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#ffd; box-shadow:0 0 8px #ffdd99; }
@keyframes o-buoy{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(7px) rotate(4deg)} }

/* ============================================================
   DIORAMA 02 — TRAIN (view from the window)
   ============================================================ */
.d-train{ background:#1a1320; }
.t-sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#241a33 0%, #4a2f4a 34%, #b5663f 70%, #e8a45f 100%);
}
.t-sun{
  position:absolute; right:14%; top:30%; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle,#ffe7c2,#ff9d5c 60%,rgba(255,140,80,0));
  box-shadow:0 0 100px 30px rgba(255,150,90,.4);
}
.t-mountains{
  position:absolute; left:0; right:0; bottom:42%; height:22%;
  background:
    linear-gradient(180deg, #6a3f55, #43273c);
  -webkit-mask:linear-gradient(#000,#000);
  clip-path:polygon(0 100%,0 60%,8% 35%,16% 62%,24% 28%,33% 58%,44% 22%,55% 60%,66% 30%,78% 64%,88% 38%,100% 66%,100% 100%);
  animation:scrollSlow 60s linear infinite; background-size:50% 100%;
}
.t-hills{
  position:absolute; left:0; right:0; bottom:34%; height:16%;
  background:#2f1d2e;
  clip-path:polygon(0 100%,0 55%,12% 70%,26% 45%,40% 72%,55% 48%,70% 74%,84% 52%,100% 70%,100% 100%);
  animation:scrollMed 26s linear infinite;
}
.t-fields{
  position:absolute; left:0; right:0; bottom:0; height:36%;
  background:
    repeating-linear-gradient(90deg, #20141d 0 60px, #271924 60px 120px),
    linear-gradient(180deg,#33212f,#160d15);
  animation:scrollFast 4s linear infinite;
  background-size:240px 100%, 100% 100%;
}
.t-poles{
  position:absolute; left:0; right:0; bottom:30%; height:30%;
  background-image:
    linear-gradient(#0c070b,#0c070b),
    linear-gradient(#0c070b,#0c070b);
  background-repeat:no-repeat; /* placeholder; poles drawn via repeating gradient below */
  background:
    repeating-linear-gradient(90deg, transparent 0 220px, rgba(10,6,9,.95) 220px 226px);
  -webkit-mask:linear-gradient(180deg, transparent 0, #000 30%, #000 100%);
  animation:scrollFast 2.4s linear infinite;
}
.t-poles::before{ /* the horizontal wire sag */
  content:""; position:absolute; left:0; right:0; top:14%; height:2px;
  background:repeating-linear-gradient(90deg, rgba(10,6,9,.8) 0 200px, transparent 200px 226px);
}
.t-rails{
  position:absolute; left:0; right:0; bottom:0; height:8%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.5));
}
@keyframes scrollSlow{ from{background-position:0 0} to{background-position:-50% 0} }
@keyframes scrollMed{ from{transform:translateX(0)} to{transform:translateX(-12%)} }
@keyframes scrollFast{ from{background-position:0 0} to{background-position:-240px 0} }

/* the train window frame, sitting over the scene */
.t-window{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  border:34px solid #120c10;
  border-radius:6px;
  box-shadow:inset 0 0 0 6px #2a1c26, inset 0 0 90px 30px rgba(0,0,0,.7),
             inset 0 0 0 40px rgba(0,0,0,.0);
  -webkit-mask:none;
}
.t-window::before{ /* rounded inner window corners */
  content:""; position:absolute; inset:0; border-radius:34px;
  box-shadow:0 0 0 40px #120c10;
}
.t-glass{ /* faint reflection sweeping across glass */
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,235,210,.07) 46%, rgba(255,235,210,.12) 50%, transparent 64%);
  animation:t-glass 9s ease-in-out infinite;
}
@keyframes t-glass{ 0%,100%{opacity:.3; transform:translateX(-6%)} 50%{opacity:.7; transform:translateX(6%)} }

/* ============================================================
   DIORAMA 03 — VELA (neon megacity, after rain)
   ============================================================ */
.d-vela{ background:#06030c; }
.v-sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#0a0418 0%, #1a0a2e 40%, #3a0f3a 72%, #5a163f 100%);
}
.v-glow{
  position:absolute; left:50%; bottom:0; width:120vw; height:50%; transform:translateX(-50%);
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,46,136,.4), transparent 70%);
  filter:blur(10px);
}
.v-stars{
  position:absolute; inset:0 0 50% 0; opacity:.6;
  background-image:radial-gradient(1px 1px at 15% 20%,#9ef,transparent),
    radial-gradient(1px 1px at 60% 12%,#fff,transparent),
    radial-gradient(1px 1px at 80% 28%,#f9f,transparent),
    radial-gradient(1px 1px at 35% 8%,#fff,transparent);
}
.v-city{ position:absolute; left:0; right:0; bottom:0; }
/* buildings: clip-path skyline (varied rooftops) + lit-window grid clipped to it */
.v-city--back{
  height:60%; opacity:.75;
  background:linear-gradient(180deg,#241038,#140822);
  clip-path:polygon(0 100%,0 46%,5% 46%,5% 30%,11% 30%,11% 52%,17% 52%,17% 22%,23% 22%,
    23% 48%,30% 48%,30% 36%,37% 36%,37% 58%,44% 58%,44% 26%,51% 26%,51% 50%,58% 50%,
    58% 34%,65% 34%,65% 54%,72% 54%,72% 20%,79% 20%,79% 46%,86% 46%,86% 38%,93% 38%,
    93% 56%,100% 56%,100% 100%);
}
.v-city--back::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, transparent 0 13px, rgba(150,120,255,.22) 13px 17px),
                   repeating-linear-gradient(90deg, transparent 0 10px, transparent 10px 13px, rgba(150,120,255,.22) 13px 17px);
  mix-blend-mode:screen;
}
.v-city--mid{
  height:48%;
  background:linear-gradient(180deg,#1c0a30,#0c0418);
  clip-path:polygon(0 100%,0 60%,7% 60%,7% 34%,13% 34%,13% 64%,21% 64%,21% 44%,28% 44%,
    28% 70%,35% 70%,35% 30%,43% 30%,43% 58%,51% 58%,51% 40%,59% 40%,59% 66%,67% 66%,
    67% 38%,75% 38%,75% 60%,83% 60%,83% 48%,91% 48%,91% 64%,100% 64%,100% 100%);
}
.v-city--mid::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, transparent 0 15px, rgba(255,70,150,.30) 15px 20px),
                   repeating-linear-gradient(90deg, transparent 0 11px, transparent 11px 15px, rgba(255,70,150,.30) 15px 20px);
  mix-blend-mode:screen;
}
.v-city--front{
  height:38%; z-index:2;
  background:linear-gradient(180deg,#0a0414,#020107);
  clip-path:polygon(0 100%,0 70%,9% 70%,9% 40%,17% 40%,17% 78%,26% 78%,26% 56%,33% 56%,
    33% 84%,43% 84%,43% 48%,52% 48%,52% 74%,61% 74%,61% 58%,70% 58%,70% 82%,80% 82%,
    80% 52%,89% 52%,89% 72%,100% 72%,100% 100%);
}
.v-city--front::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, transparent 0 18px, rgba(33,230,255,.34) 18px 24px),
                   repeating-linear-gradient(90deg, transparent 0 13px, transparent 13px 18px, rgba(33,230,255,.34) 18px 24px);
  mix-blend-mode:screen;
}
.v-signs{ position:absolute; inset:0; z-index:2; }
.v-sign{
  position:absolute; font-family:var(--mono); font-weight:500;
  letter-spacing:.05em;
}
.v-sign--1{
  left:14%; top:30%; font-size:2.4rem; color:#ff2e88;
  text-shadow:0 0 6px #ff2e88,0 0 18px #ff2e88,0 0 36px rgba(255,46,136,.6);
  animation:flicker1 5s infinite;
}
.v-sign--2{
  right:12%; top:24%; font-size:1.4rem; color:#21e6ff;
  text-shadow:0 0 6px #21e6ff,0 0 16px #21e6ff,0 0 30px rgba(33,230,255,.6);
  animation:flicker2 7s infinite;
}
.v-sign--3{
  right:24%; bottom:40%; font-size:3rem; color:#ffd23e;
  text-shadow:0 0 8px #ffd23e,0 0 22px rgba(255,210,62,.7);
  animation:flicker1 4s infinite .5s;
}
@keyframes flicker1{ 0%,97%,100%{opacity:1} 92%{opacity:.4} 94%{opacity:.9} 96%{opacity:.3} }
@keyframes flicker2{ 0%,93%,100%{opacity:1} 90%{opacity:.5} 91%{opacity:1} 92%{opacity:.2} }
.v-rain{
  position:absolute; inset:0; z-index:3; opacity:.5;
  background-image:repeating-linear-gradient(100deg,
    transparent 0 7px, rgba(180,220,255,.35) 7px 8px, transparent 8px 16px);
  background-size:200px 200px;
  animation:rain .5s linear infinite;
}
@keyframes rain{ from{background-position:0 0} to{background-position:-40px 200px} }
.v-fog{
  position:absolute; left:0; right:0; bottom:0; height:40%; z-index:3;
  background:linear-gradient(180deg, transparent, rgba(90,22,63,.5));
  filter:blur(4px);
}

/* ============================================================
   OUTRO / CONTACT
   ============================================================ */
.outro{
  position:relative; min-height:96vh; display:flex; align-items:center;
  padding:0 8vw 0 calc(84px + 8vw); overflow:hidden;
  background:
    radial-gradient(80% 60% at 80% 20%, var(--glow), transparent 60%),
    var(--bg);
}
.outro__inner{ max-width:760px; position:relative; z-index:2; }
.outro__title{
  font-weight:300; font-size:clamp(2.8rem,8vw,6.5rem); line-height:.94; letter-spacing:-.02em;
  margin:1.2rem 0 1.6rem;
}
.outro__title em{ color:var(--accent); font-weight:400; }
.outro__body{ font-size:1.12rem; color:#d4cdc0; max-width:48ch; margin-bottom:2.6rem; }
.mailto{
  display:inline-flex; align-items:center; gap:18px;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,4vw,2.8rem);
  border-bottom:1px solid var(--line); padding-bottom:10px; transition:.5s var(--ease);
}
.mailto:hover{ border-color:var(--accent); color:var(--accent); letter-spacing:.01em; }
.mailto__arrow{ font-style:normal; font-size:.7em; transition:transform .5s var(--ease); }
.mailto:hover .mailto__arrow{ transform:translate(6px,-6px); }
.outro__foot{
  margin-top:5rem; display:flex; gap:30px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .spine{ width:100%; height:54px; bottom:auto; flex-direction:row; padding:0 18px;
    border-right:none; border-bottom:1px solid var(--line);
    background:linear-gradient(to bottom, rgba(0,0,0,.5), transparent); }
  .spine__mark{ width:32px; height:32px; font-size:11px; }
  .spine__index{ writing-mode:horizontal-tb; flex-direction:row; gap:18px; margin:0 auto; }
  .spine__index a u{ display:none; }
  .spine__progress{ display:none; }
  .spine__foot{ display:none; }
  .intro,.world,.outro{ padding:90px 7vw 60px; align-items:center; }
  .world{ align-items:flex-end; padding-bottom:14vh; }
  .placard,.placard--right{ text-align:left; margin:0; backdrop-filter:blur(2px); }
  .placard--right .placard__body,.placard--right .placard__tags{ margin-left:0; justify-content:flex-start; }
  .placard--right .enter{ align-items:flex-start; }
  .placard--right .enter__arrow{ left:auto; right:18px; }
  body{ cursor:auto; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .grain{ display:none; }
}