@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=Newsreader:ital,opsz,wght@0,6..72,300;1,6..72,300&family=IBM+Plex+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400&family=Cormorant+Garamond:ital,wght@0,300;1,300&display=swap');

/* ╔══════════════════════════════════════════════════╗
   ║  ETHEREAL VOID  — CSS Zen Garden                ║
   ║  You are floating. There is no ground.          ║
   ╚══════════════════════════════════════════════════╝ */

:root{
  --void:#080a14;
  --void-2:#0e1428;
  --void-3:#141a32;
  --mist:#ece8de;
  --muted:#a9adc7;
  --faint:#7a7f9e;
  --cyan:#8be9de;
  --amber:#d8a85c;
  --dusk:#8a7fa3;
  --violet:#8a7fa3;
  --magenta:#c46a6e;
  --peach:#d8a85c;
  --lime:#b8c99a;
  --bone:#ece8de;
  --glass:rgba(255,255,255,.07);
  --glass2:rgba(255,255,255,.035);
  --line:rgba(236,232,222,.11);
  --line2:rgba(139,233,222,.30);
  --radius:22px;
  --radius-sm:14px;
  --radius-lg:28px;
  --max:1180px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box }
html{
  scroll-behavior:smooth;
  scroll-padding-top: 2rem;
  scrollbar-color: var(--dusk) var(--void);
  scrollbar-width: thin;
}
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background: #080a14 }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--amber), var(--cyan) 70%, var(--dusk));
  border-radius:999px; border:2px solid #080a14;
}
::selection{ background: rgba(216,168,92,.42); color: white }

/* ── BODY / VOID ────────────────────────────── */
body{
  margin:0;
  background: var(--void);
  color: var(--mist);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight:300;
  line-height:1.72;
  font-size: 17px;
  overflow-x: clip;
  position:relative;
  isolation: isolate;
}

/* deep space field: desaturated void — amber/teal/bone, not neon violet */
body::before{
  content:"";
  position: fixed; inset: -20% -10% -10% -10%;
  z-index:-3;
  background:
    radial-gradient(ellipse 820px 620px at 14% 8%,  rgba(138,127,163,.42) 0%, transparent 65%),
    radial-gradient(ellipse 900px 700px at 92% 14%, rgba(216,168,92,.24) 0%, transparent 62%),
    radial-gradient(ellipse 760px 540px at 78% 88%, rgba(139,233,222,.18) 0%, transparent 63%),
    radial-gradient(ellipse 680px 520px at 18% 92%, rgba(196,106,110,.14) 0%, transparent 60%),
    radial-gradient(ellipse 1100px 900px at 50% 50%, rgba(14,18,40,.92) 0%, transparent 70%),
    linear-gradient(180deg, #080a14 0%, #0b1020 22%, #10162e 55%, #080a14 100%);
  filter: saturate(.95) contrast(1.08);
  animation: driftVoid 28s ease-in-out infinite alternate;
}
@keyframes driftVoid{
  0%{ transform: translate3d(0,0,0) scale(1) }
  100%{ transform: translate3d(-2%, -1.5%,0) scale(1.05) }
}

/* starfield + faint grid */
body::after{
  content:"";
  position: fixed; inset:0; z-index:-2; pointer-events:none;
  opacity:.9;
  background:
    /* stars — layered radial dots */
    radial-gradient(1px 1px at 12% 18%, #fff 100%, transparent 100%),
    radial-gradient(1px 1px at 44% 12%, rgba(255,255,255,.9) 100%, transparent 100%),
    radial-gradient(1.3px 1.3px at 72% 8%, #fff 100%, transparent 100%),
    radial-gradient(1px 1px at 88% 24%, rgba(255,255,255,.7) 100%, transparent 100%),
    radial-gradient(1.1px 1.1px at 22% 44%, rgba(255,255,255,.85) 100%, transparent 100%),
    radial-gradient(1px 1px at 66% 36%, #fff 100%, transparent 100%),
    radial-gradient(1px 1px at 92% 42%, rgba(255,255,255,.6) 100%, transparent 100%),
    radial-gradient(1.2px 1.2px at 8% 72%, #fff 100%, transparent 100%),
    radial-gradient(1px 1px at 34% 78%, rgba(255,255,255,.8) 100%, transparent 100%),
    radial-gradient(1px 1px at 58% 86%, #fff 100%, transparent 100%),
    radial-gradient(1px 1px at 82% 74%, rgba(255,255,255,.7) 100%, transparent 100%),
    radial-gradient(.9px .9px at 48% 58%, rgba(255,255,255,.5) 100%, transparent 100%);
  /* subtle grain on top */
  mask: radial-gradient(ellipse at center, black 65%, transparent 100%);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{
  0%{ opacity:.75; filter: brightness(1) }
  100%{ opacity:1; filter: brightness(1.25) }
}

/* grain texture overlay (svg noise) */
html::before{
  content:"";
  position: fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* links */
a{
  color: var(--cyan);
  text-decoration:none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .25s, text-shadow .25s, opacity .25s;
}
a:hover{ color: var(--bone); text-shadow: 0 0 18px rgba(139,233,222,.55), 0 0 32px rgba(216,168,92,.28) }
abbr[title]{ text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.25); cursor: help }

/* ── PAGE GRID ──────────────────────────────── */
.page-wrapper{
  width:min(var(--max), 92vw);
  margin: 0 auto;
  padding: 28px 0 80px;
  display:grid;
  grid-template-columns: 1.55fr .85fr;
  gap: 28px 30px;
  position:relative;
}

/* top thin tech line — single, not tracked kicker */
.page-wrapper::before{
  content:"";
  position:absolute; top:14px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(236,232,222,.14) 8%, rgba(139,233,222,.42) 22%, rgba(216,168,92,.32) 52%, rgba(138,127,163,.26) 78%, transparent 92%);
  box-shadow: 0 0 10px rgba(139,233,222,.22);
}
.page-wrapper::after{
  content:"◉  ethereal void  ·  001";
  position:absolute; top:22px; right:0;
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.14em; color: rgba(236,232,222,.38);
  text-transform: lowercase;
}

/* ── INTRO / HEADER ────────────────────────── */
.intro{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1.55fr .85fr;
  gap: 22px;
  position:relative;
}

header[role="banner"]{
  grid-column: 1 / -1;
  position:relative;
  padding: 72px 42px 56px;
  margin-top: 28px;
  border-radius: 4px 18px 4px 18px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg, rgba(236,232,222,.07), rgba(236,232,222,.02)),
    radial-gradient(ellipse 520px 380px at 30% 18%, rgba(216,168,92,.22), transparent 65%),
    radial-gradient(ellipse 560px 420px at 88% 88%, rgba(139,233,222,.16), transparent 64%),
    linear-gradient(135deg, rgba(14,16,34,.88) 0%, rgba(18,20,42,.78) 50%, rgba(12,14,32,.92) 100%);
  border: 1px solid rgba(236,232,222,.11);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 1px 0 rgba(236,232,222,.10) inset,
    0 0 0 1px rgba(216,168,92,.14),
    0 0 48px rgba(138,127,163,.14),
    0 0 90px rgba(139,233,222,.08);
  backdrop-filter: blur(14px) saturate(1.05);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transform-style: preserve-3d;
}

/* aurora ribbon inside header — single, desaturated */
header::before{
  content:"";
  position:absolute; inset:-1px; z-index:-1;
  background:
    linear-gradient(100deg, transparent 15%, rgba(139,233,222,.12) 35%, rgba(216,168,92,.18) 54%, rgba(138,127,163,.16) 72%, transparent 88%),
    conic-gradient(from 220deg at 18% 22%, rgba(138,127,163,.55), rgba(139,233,222,.32), rgba(216,168,92,.28), rgba(138,127,163,.45));
  opacity:.75;
  filter: blur(16px) saturate(.9);
  animation: auroraSweep 9s linear infinite;
  mask: linear-gradient(180deg, black 40%, transparent 100%);
}
@keyframes auroraSweep{
  0%{ transform: translateX(-12%) skewX(-6deg) }
  50%{ transform: translateX(6%) skewX(2deg) }
  100%{ transform: translateX(-12%) skewX(-6deg) }
}

/* floating orb + ring system — muted bone/teal */
header::after{
  content:"";
  position:absolute; width: 420px; height:420px; right:-54px; top: -84px;
  background:
    radial-gradient(circle at 32% 28%, #ece8de 0 5%, rgba(236,232,222,.92) 7%, rgba(200,210,225,.75) 14%, rgba(138,127,163,.28) 32%, rgba(138,127,163,0) 72%),
    radial-gradient(ellipse at center, rgba(139,233,222,.14), transparent 68%);
  border-radius:50%;
  box-shadow:
    0 0 0 1px rgba(236,232,222,.18) inset,
    0 0 30px rgba(139,233,222,.20),
    0 0 70px rgba(138,127,163,.22),
    0 0 100px rgba(216,168,92,.10);
  animation: orbFloat 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes orbFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1) rotate(0deg) }
  50%{ transform: translate3d(-10px,14px,0) scale(1.03) rotate(2deg) }
}

/* double ring around orb */
header h1::before{
  content:"";
  position:absolute; width:520px; height:520px; right:-102px; top:-132px;
  border-radius:50%;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(122,240,255,.10) inset, 0 0 40px rgba(122,240,255,.08);
  transform: rotate(-12deg);
  pointer-events:none;
  z-index:-1;
}

header h1{
  margin:0;
  font-family:'Syne', sans-serif;
  font-weight:800;
  font-size: clamp(42px, 8vw, 92px);
  line-height:.88;
  letter-spacing:-.04em;
  text-transform: uppercase;
  position:relative;
  color: var(--bone);
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 12px 30px rgba(0,0,0,.45),
    0 0 28px rgba(139,233,222,.18);
}
header h1::after{
  content:"";
  position:absolute; left: -6%; right:-6%; bottom:-10px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(216,168,92,.55) 18%, rgba(139,233,222,.42) 52%, transparent 88%);
  filter: blur(.6px);
  opacity:.85;
  pointer-events:none;
}

header h2{
  margin: 14px 0 0;
  font-family:'Cormorant Garamond', serif;
  font-weight:300; font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing:.02em;
  color: rgba(236,232,222,.88);
  max-width: 46ch;
  position:relative;
  padding-top: 12px;
  border-top: 1px solid rgba(216,168,92,.32);
  text-shadow: 0 0 14px rgba(139,233,222,.22);
}
header h2 abbr{
  font-style: normal;
  letter-spacing:.12em;
  font-family:'JetBrains Mono', monospace;
  font-size:.78em;
  border:none;
  color: var(--cyan);
}

/* summary — matte ticket, no left-border accent, no tracked kicker */
.summary{
  grid-column: 1 / 2;
  position:relative;
  padding: 22px 24px 20px;
  background: rgba(16,18,36,.72);
  border: 1px solid rgba(236,232,222,.10);
  border-radius: 6px;
  backdrop-filter: none;
  box-shadow:
    0 10px 36px rgba(0,0,0,.38),
    0 0 0 1px rgba(236,232,222,.04) inset;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.summary p{
  margin:0 0 .85em; color: var(--mist); font-size: 15.5px; line-height:1.75;
  font-family: 'Newsreader', serif;
  font-size: 16px;
}
.summary p:last-child{ margin:0 }

/* preamble — asymmetric radius, distinct gradient */
.preamble{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  position:relative;
  padding: 28px 26px 24px;
  background:
    linear-gradient(180deg, rgba(236,232,222,.06), rgba(236,232,222,.02)),
    radial-gradient(420px 260px at 85% 0%, rgba(216,168,92,.13), transparent 70%),
    rgba(12,14,32,.62);
  border:1px solid rgba(236,232,222,.10);
  border-radius: 20px 4px 20px 4px;
  backdrop-filter: blur(10px) saturate(1.05);
  box-shadow:
    0 16px 48px rgba(0,0,0,.44),
    0 0 36px rgba(216,168,92,.08),
    0 1px 0 rgba(236,232,222,.08) inset;
  overflow:hidden;
}
.preamble::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(139,233,222,.28), rgba(216,168,92,.28) 48%, rgba(138,127,163,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.75; pointer-events:none;
}
.preamble::after{
  content:"";
  position:absolute; width:240px; height:240px; right:-60px; bottom:-60px;
  background: radial-gradient(circle at 30% 30%, rgba(139,233,222,.22), rgba(216,168,92,.14) 45%, transparent 70%);
  filter: blur(18px); opacity:.45; pointer-events:none;
}

/* ── SHARED ARTICLE CARDS ───────────────────── */
.main{
  grid-column: 1 / 2;
  display:flex; flex-direction:column; gap: 22px;
}
.main > div{
  position:relative;
  padding: 32px 30px 28px;
  border: 1px solid rgba(236,232,222,.095);
  overflow:hidden;
  transform-style: preserve-3d;
  transition: border-color .4s, box-shadow .4s, filter .4s;
}
/* varied surfaces — not identical glass on every card */
.explanation{
  background:
    linear-gradient(180deg, rgba(236,232,222,.055), rgba(236,232,222,.018)),
    radial-gradient(520px 360px at 12% 0%, rgba(138,127,163,.12), transparent 62%),
    rgba(10,12,28,.64);
  border-radius: 18px;
  backdrop-filter: blur(12px) saturate(1.05);
  box-shadow: 0 14px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(236,232,222,.03) inset, 0 0 40px rgba(138,127,163,.09);
}
.participation{
  background: rgba(14,16,34,.78);
  border-radius: 4px 22px 4px 22px;
  backdrop-filter: none;
  box-shadow: 0 10px 36px rgba(0,0,0,.38), 0 0 0 1px rgba(236,232,222,.04) inset;
}
.benefits{
  background:
    linear-gradient(180deg, rgba(236,232,222,.045), rgba(236,232,222,.015)),
    radial-gradient(460px 320px at 98% 0%, rgba(216,168,92,.11), transparent 62%),
    rgba(11,14,30,.62);
  border-radius: 22px 22px 4px 22px;
  backdrop-filter: blur(8px) saturate(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,.40), 0 0 28px rgba(216,168,92,.07);
}
.requirements{
  background: rgba(16,18,36,.74);
  border-radius: 6px;
  backdrop-filter: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(236,232,222,.035) inset;
}

.main > div:hover{
  border-color: rgba(139,233,222,.18);
}
.explanation:hover{ box-shadow: 0 16px 48px rgba(0,0,0,.46), 0 0 28px rgba(138,127,163,.14) }
.participation:hover{ border-color: rgba(216,168,92,.22); box-shadow: 0 12px 40px rgba(0,0,0,.42) }
.benefits:hover{ box-shadow: 0 14px 44px rgba(0,0,0,.44), 0 0 32px rgba(216,168,92,.12) }
.requirements:hover{ border-color: rgba(236,232,222,.14) }

.main > div::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(139,233,222,.38) 18%, rgba(216,168,92,.28) 52%, rgba(138,127,163,.22) 84%, transparent);
  opacity:.85;
}
.main > div::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* headings inside cards — varied, not identical tracked kickers */
.main h3, .preamble h3{
  margin:0 0 16px;
  font-family:'Syne', sans-serif;
  font-weight:800;
  font-size: 19px;
  letter-spacing:.02em;
  text-transform: uppercase;
  color: var(--bone);
  display:flex; align-items:center; gap:12px;
  position:relative;
}
.preamble h3{ font-size: 16px; letter-spacing:.06em; color: var(--amber) }
.explanation h3::before{ content:""; width:18px; height:2px; background: var(--dusk); flex-shrink:0; border-radius:2px }
.participation h3::before{ content:""; width:10px; height:10px; border:1px solid var(--amber); transform: rotate(45deg); flex-shrink:0 }
.benefits h3::before{ content:""; width:22px; height:1px; background: var(--amber); flex-shrink:0 }
.requirements h3::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 8px rgba(139,233,222,.5); flex-shrink:0 }

.main p, .preamble p{
  margin:0 0 1em;
  color: rgba(236,232,222,.86);
  font-size: 15.8px;
  line-height:1.78;
}
.explanation p{ font-family: 'Newsreader', serif; font-size:16.5px; line-height:1.82; color: rgba(236,232,222,.88) }
.main p:last-child, .preamble p:last-child{ margin-bottom:0 }
.main p a, .preamble p a{
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(139,233,222,.35);
  text-underline-offset: 3px;
}
.main p a:hover{ color: var(--bone); text-decoration-color: var(--amber) }

/* varied chamfers per section — not single radius */
.explanation{ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%) }
.participation{ clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px) }
.benefits{ clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%) }
.preamble{ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%) }
.summary{ clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) }
.requirements p[role="contentinfo"]{
  margin-top: 18px;
  padding: 14px 16px;
  font-family:'JetBrains Mono', monospace;
  font-size: 12.5px; letter-spacing:.02em; line-height:1.6;
  color: rgba(233,236,255,.72);
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 12px;
}

/* ── SIDEBAR — orbital console, varied surfaces ──────────────── */
.sidebar{
  grid-column: 2 / 3;
  grid-row: 2 / span 2;
  position:relative;
  align-self: start;
  top: 18px;
}
.sidebar .wrapper{
  display:flex; flex-direction:column; gap:18px;
  position: sticky; top: 18px;
}
.sidebar .design-selection{
  position:relative;
  padding: 22px 20px 18px;
  background: rgba(14,16,34,.72);
  border:1px solid rgba(236,232,222,.10);
  border-radius: 4px 16px 16px 4px;
  backdrop-filter: none;
  box-shadow: 0 12px 36px rgba(0,0,0,.36), 0 0 0 1px rgba(236,232,222,.04) inset;
  overflow:hidden;
}
.sidebar .design-archives{
  position:relative;
  padding: 22px 20px 18px;
  background:
    linear-gradient(180deg, rgba(236,232,222,.04), rgba(236,232,222,.01)),
    rgba(12,14,32,.60);
  border:1px solid rgba(236,232,222,.10);
  border-radius: 16px;
  backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: 0 10px 32px rgba(0,0,0,.34), 0 0 22px rgba(139,233,222,.06);
  overflow:hidden;
}
.sidebar .zen-resources{
  position:relative;
  padding: 22px 20px 18px;
  background: rgba(16,18,36,.68);
  border:1px dashed rgba(236,232,222,.14);
  border-radius: 10px;
  backdrop-filter: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.30);
  overflow:hidden;
}
.sidebar .design-selection::before,
.sidebar .design-archives::before,
.sidebar .zen-resources::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(139,233,222,.32), transparent);
}
.sidebar h3{
  font-size: 11px;
  letter-spacing:.12em;
  color: rgba(236,232,222,.78);
  margin-bottom:14px;
  font-weight:500;
  text-transform: uppercase;
}
.sidebar ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.sidebar li{
  position:relative;
  padding: 11px 12px 11px 14px;
  background: rgba(236,232,222,.035);
  border: 1px solid rgba(236,232,222,.07);
  border-radius: 9px;
  transition: background .30s, border-color .30s, box-shadow .30s;
  overflow:hidden;
}
.sidebar li::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background: var(--amber);
  opacity:0; transition: opacity .30s;
}
.sidebar li:hover{
  background: rgba(236,232,222,.06);
  border-color: rgba(216,168,92,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.sidebar li:hover::before{ opacity:1 }
.sidebar li a{ font-size:14px; line-height:1.4 }
.sidebar .design-name{
  font-weight:600; color: white; display:block;
  font-family:'Syne', sans-serif; letter-spacing:.01em;
}
.sidebar .designer-name{
  font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--muted);
  letter-spacing:.04em;
}
.sidebar .designer-name::before{ content:"— " }
.sidebar .design-archives li,
.sidebar .zen-resources li{
  padding: 10px 12px;
  font-size:14px;
}
.sidebar .design-archives .indicator{ color: var(--cyan); margin-left:4px }

/* ── FOOTER — docking ring ──────────────────── */
.main footer{
  display:flex; flex-wrap:wrap; gap:10px;
  padding: 14px;
  justify-content:center;
  background: rgba(236,232,222,.035);
  border:1px solid rgba(236,232,222,.10);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.32), 0 0 22px rgba(138,127,163,.08) inset;
}
.main footer a{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(236,232,222,.12), rgba(236,232,222,.03));
  border:1px solid rgba(236,232,222,.12);
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:600; letter-spacing:.06em;
  color: rgba(236,232,222,.92);
  box-shadow:
    0 4px 16px rgba(0,0,0,.32),
    0 0 0 1px rgba(236,232,222,.03) inset,
    0 0 14px rgba(138,127,163,.12);
  transition: background .30s, color .30s, box-shadow .30s, border-color .30s;
  position:relative;
}
.main footer a::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(139,233,222,.0); transition: border-color .30s;
  pointer-events:none;
}
.main footer a:hover{
  background: var(--bone);
  color: #080a14;
  border-color: var(--bone);
  box-shadow: 0 8px 22px rgba(0,0,0,.32), 0 0 16px rgba(139,233,222,.22);
  text-shadow:none;
}
.main footer a:hover::before{ border-color: rgba(216,168,92,.32) }

/* ── EXTRAS — floating void dust ───────────── */
.extra1, .extra2, .extra3, .extra4, .extra5, .extra6{ pointer-events:none; position:fixed; border-radius:50%; z-index:-1 }
.extra1{
  width: 2px; height: 2px; left:18%; top:42%;
  background: var(--bone); box-shadow: 0 0 10px var(--bone), 0 0 18px rgba(139,233,222,.55);
  animation: floatDust 11s ease-in-out infinite;
}
.extra2{
  width: 1px; height:1px; left:74%; top:28%;
  background: var(--bone); box-shadow: 0 0 8px var(--bone);
  animation: floatDust 14s ease-in-out infinite reverse;
}
.extra3{
  width: 680px; height:680px; right:-220px; top: 58vh;
  background: radial-gradient(circle, rgba(138,127,163,.08), transparent 72%);
  filter: blur(12px); opacity:.60;
  animation: pulseVoid 8s ease-in-out infinite;
}
.extra4{
  width:520px; height:520px; left:-180px; top: 110vh;
  background: radial-gradient(circle, rgba(139,233,222,.07), transparent 72%);
  filter: blur(10px);
  animation: pulseVoid 10s ease-in-out infinite reverse;
}
.extra5{ display:none }
.extra6{ display:none }
@keyframes floatDust{
  0%,100%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(14px, -18px,0) }
}
@keyframes pulseVoid{
  0%,100%{ transform: scale(1); opacity:.55 }
  50%{ transform: scale(1.08); opacity:.75 }
}

/* ── SCROLL-DRIVEN REVEALS — varied per surface ─────────────────── */
@supports (animation-timeline: view()){
  header{ animation: voidRevealHeader linear both; animation-timeline: view(); animation-range: entry 0% cover 22% }
  .summary{ animation: voidRevealLeft linear both; animation-timeline: view(); animation-range: entry 0% cover 28% }
  .preamble{ animation: voidRevealScale linear both; animation-timeline: view(); animation-range: entry 0% cover 30% }
  .explanation{ animation: voidRevealUp linear both; animation-timeline: view(); animation-range: entry 6% cover 28% }
  .participation{ animation: voidRevealLeft linear both; animation-timeline: view(); animation-range: entry 6% cover 28% }
  .benefits{ animation: voidRevealRight linear both; animation-timeline: view(); animation-range: entry 6% cover 28% }
  .requirements{ animation: voidRevealUp linear both; animation-timeline: view(); animation-range: entry 6% cover 28% }
  .sidebar .design-selection{ animation: voidRevealRight linear both; animation-timeline: view(); animation-range: entry 0% cover 24% }
  .sidebar .design-archives{ animation: voidRevealUp linear both; animation-timeline: view(); animation-range: entry 0% cover 24% }
  .sidebar .zen-resources{ animation: voidRevealScale linear both; animation-timeline: view(); animation-range: entry 0% cover 24% }
}
@keyframes voidRevealHeader{
  from{ opacity:0; transform: translateY(14px); filter: blur(8px) }
  to{ opacity:1; transform: translateY(0); filter: blur(0) }
}
@keyframes voidRevealUp{
  from{ opacity:0; transform: translateY(22px); filter: blur(8px) }
  to{ opacity:1; transform: translateY(0); filter: blur(0) }
}
@keyframes voidRevealLeft{
  from{ opacity:0; transform: translateX(-18px); filter: blur(6px) }
  to{ opacity:1; transform: translateX(0); filter: blur(0) }
}
@keyframes voidRevealRight{
  from{ opacity:0; transform: translateX(18px); filter: blur(6px) }
  to{ opacity:1; transform: translateX(0); filter: blur(0) }
}
@keyframes voidRevealScale{
  from{ opacity:0; transform: scale(.96); filter: blur(6px) }
  to{ opacity:1; transform: scale(1); filter: blur(0) }
}

/* fallback for browsers without view-timeline */
@supports not (animation-timeline: view()){
  .main > div, .preamble, .summary, .sidebar > .wrapper > div{
    animation: fadeInUp .85s var(--ease) both;
  }
  .preamble{ animation-delay:.06s }
  .explanation{ animation-delay:.10s }
  .participation{ animation-delay:.16s }
  .benefits{ animation-delay:.22s }
  .requirements{ animation-delay:.28s }
}
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(16px); filter: blur(6px) }
  to{ opacity:1; transform: translateY(0); filter: blur(0) }
}

/* header parallax on scroll (progress timeline) */
@supports (animation-timeline: scroll()){
  html{ timeline-scope: --page; }
  body{ view-timeline-name: --page; }
  header{
    animation: headerParallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 600px;
  }
}
@keyframes headerParallax{
  to{ transform: translateY(10px) scale(.985); filter: saturate(1.1) brightness(1.02) }
}

/* ── FOCUS & MOTION ─────────────────────────── */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(216,168,92,.16);
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 980px){
  .page-wrapper{
    grid-template-columns: 1fr;
    gap: 18px;
    width: min(640px, 92vw);
  }
  .intro{ grid-template-columns: 1fr }
  .preamble{ grid-column: 1 }
  .main{ grid-column: 1 }
  .sidebar{ grid-column: 1; top:auto }
  .sidebar .wrapper{ position: relative; top:auto; display:grid; grid-template-columns: 1fr 1fr; gap:14px }
  .sidebar .design-selection{ grid-column: 1 / -1 }
  header{ padding: 56px 28px 44px }
  header::after{ width:320px; height:320px; right:-40px; top:-60px }
  .page-wrapper::after{ display:none }
}

@media (max-width: 620px){
  body{ font-size:16px }
  .page-wrapper{ width: 94vw; padding-top:18px }
  header{
    padding: 44px 20px 34px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  }
  header h1{ font-size: clamp(34px, 11vw, 54px) }
  .main > div, .preamble, .summary{ padding: 22px 18px 20px }
  .sidebar .wrapper{ grid-template-columns: 1fr }
  .main footer{ border-radius: 22px }
  .extra3, .extra4{ display:none }
}

/* ── detail: link underline comet ────────── */
.main p a, .preamble p a, .summary p a{
  position:relative;
  text-underline-offset: 4px;
}
.main p a::after, .preamble p a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: linear-gradient(90deg, transparent, var(--amber), var(--cyan), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
  opacity:.85;
}
.main p a:hover::after, .preamble p a:hover::after{ transform: scaleX(1) }

/* print: kill void, keep legibility */
@media print{
  body::before, body::after, html::before, header::before, header::after{ display:none !important }
  body{ background:white; color:#111 }
  .page-wrapper{ width:auto; display:block }
  .main > div, .preamble, .summary, .sidebar div{ background:white; border:1px solid #ddd; box-shadow:none; backdrop-filter:none; clip-path:none }
  a{ color:#4a3bda }
}