/* ============================================================
 minmi v2, layered on top of minmi.css
 same world (void, aura, grain, scanlines, lowercase, purple).
 adds: editorial type, the scanned body, scroll chapters.
 ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@400;500&display=swap');

:root {
 --lav:#dcc2ff;
 --lav-2:#c9a3ff;
 --ink:#f4f1ea;
 --dim:rgba(244,241,234,0.42);
 --mono:'DM Mono', ui-monospace, monospace;
 --serif:'Instrument Serif', Georgia, serif;
 --glow-text:
 -0.5px 0 rgba(235,240,255,0.35),
 0.5px 0 rgba(210,220,240,0.3),
 0 0 18px rgba(160,98,255,0.55),
 0 0 46px rgba(150,90,255,0.28);
}

html { scroll-behavior:auto; }
body { overflow-x:hidden; }

/* ---------- layers ---------- */
#body-canvas {
 position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;
}
.contours { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.55; }
.contours path { fill:none; stroke:rgba(168,120,255,0.07); stroke-width:1; }

main, .foot, .nav { position:relative; z-index:3; }

/* ---------- nav ---------- */
.nav {
 position:fixed; top:0; left:0; right:0; z-index:20; padding:20px 28px;
 transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.nav.hide { transform:translateY(-110%); }
.nav-links { gap:16px; }
.chip {
 padding:8px 14px; border-radius:999px; font-size:13px;
 border:1px solid rgba(168,120,255,0.35);
 background:radial-gradient(120% 140% at 50% 0%, rgba(40,26,66,0.55) 0%, rgba(14,10,22,0.7) 100%);
 box-shadow:0 0 18px rgba(150,90,255,0.15);
 backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
 transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.chip:hover { border-color:rgba(185,140,255,0.8); box-shadow:0 0 28px rgba(150,90,255,0.35); transform:translateY(-1px); }

/* ---------- hero ---------- */
.hero {
 /* shorter than the screen: the wordmark below peeks in, which says 'there is more' */
 min-height:86vh; min-height:86svh; padding:0 4vw; display:flex; align-items:center; justify-content:center;
 position:relative; touch-action:pan-y; cursor:grab;
}
.hero:active { cursor:grabbing; }
.hero > * { animation:none; }
.hero.lit 
/* ---------- scan line + readouts ---------- */
.scanline {
 position:fixed; left:0; right:0; height:2px; z-index:2; pointer-events:none; opacity:0;
 background:linear-gradient(90deg, transparent 0%, rgba(233,219,255,.0) 20%, #f3eaff 50%, rgba(233,219,255,.0) 80%, transparent 100%);
 box-shadow:0 0 16px 2px rgba(170,110,255,0.7);
}
.scanline::before {
 content:''; position:absolute; left:0; right:0; top:-70px; height:70px;
 background:radial-gradient(50% 100% at 50% 100%, rgba(150,90,255,0.18), transparent 100%);
}
/* ---------- join ---------- */
.join { padding:0 24px 14vh; display:flex; flex-direction:column; align-items:center; }
.join .wordmark.huge { font-size:clamp(72px, 12vw, 150px); animation:markBreathe 6s ease-in-out infinite; }
.slogan {
 margin-top:26px; text-align:center; font-size:clamp(24px, 3vw, 38px); font-weight:600; line-height:1.05;
 letter-spacing:-0.02em; color:rgba(226,222,236,0.85); text-shadow:var(--glow-text);
}
/* "you." is the point of the line: wordmark glow, much bigger */
.slogan .you {
 display:inline-block; font-size:1.8em; font-weight:800; letter-spacing:-0.03em; color:var(--lav);
 vertical-align:-0.06em; margin-left:0.06em;
 text-shadow:
 -1px 0 rgba(235,240,255,0.7),
 1px 0 rgba(210,220,240,0.6),
 0 0 14px rgba(190,140,255,0.9),
 0 0 34px rgba(160,98,255,0.65),
 0 0 70px rgba(150,90,255,0.45),
 0 0 110px rgba(150,90,255,0.25);
 animation:markBreathe 6s ease-in-out infinite;
}
.join .sub { margin-top:16px; text-align:center; font-size:17px; color:rgba(240,234,252,0.62); }
.join .intro { margin-top:14px; max-width:400px; text-align:center; font-size:14.5px; line-height:1.6; color:rgba(244,241,234,0.62); text-wrap:balance; }

/* ---------- brand page ---------- */
.field-hint { font-size:13px; color:rgba(244,241,234,0.62); margin:-2px 0 10px; line-height:1.5; }
.pill.small span { font-size:13px; padding:7px 11px; }

/* category groups: rows that open in place */
.catgroups { display:flex; flex-direction:column; gap:8px; }
.field .catgroup-head {
 display:flex; align-items:center; gap:10px; position:relative; cursor:pointer; margin:0;
 padding:12px 14px; border-radius:12px; font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; text-shadow:none; color:#c9a3ff;
 background:radial-gradient(120% 140% at 50% 0%, rgba(40,26,66,0.4) 0%, rgba(14,10,22,0.75) 100%);
 border:1px solid rgba(168,120,255,0.38); transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.field .catgroup-head input { position:absolute; opacity:0; pointer-events:none; }
.field .catgroup-head span { flex:1; }
.field .catgroup-head .chev { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin:-4px 4px 0 0; transition:transform .25s ease; }
.field .catgroup-head:hover { border-color:rgba(185,140,255,0.8); color:#e0ccff; }
.field .catgroup-head:has(input:checked) { background:radial-gradient(120% 140% at 50% 0%, #d6b9ff 0%, #b07ff9 52%, #8f55ea 100%); color:#100a1c; text-shadow:none; border-color:transparent; }
.field .catgroup-head:has(input:checked) .chev { transform:rotate(225deg); margin-top:4px; }
.field .catgroup-head:has(input:focus-visible) { outline:2px solid #e0ccff; outline-offset:3px; }
.subcats { margin:0; padding:10px 6px 4px; border:0; }
.subcats[hidden] { display:none; }
.subcats .input { margin-top:2px; }

/* picked pills show a tick as well as a colour change */
.pill input:checked + span::before { content:'\2713\00a0'; }

/* fieldsets behave like fields */
fieldset.field { border:0; padding:0; margin:0; min-width:0; }
.field > legend {
 display:block; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:lowercase; padding:0;
 color:#c9a3ff; margin-bottom:8px;
 text-shadow:-0.5px 0 rgba(235,240,255,0.4), 0.5px 0 rgba(210,220,240,0.35), 0 0 12px rgba(160,98,255,0.55), 0 0 28px rgba(150,90,255,0.3);
}
.field.checks { display:flex; flex-direction:column; gap:12px; }
.field .check {
 display:flex; gap:11px; align-items:flex-start; margin:0; cursor:pointer;
 font-size:13.5px; font-weight:400; letter-spacing:0; text-transform:none; text-shadow:none;
 color:rgba(244,241,234,0.66); line-height:1.5;
}

/* keyboard users always see where they are */
a:focus-visible, button:focus-visible, .input:focus-visible, .textarea:focus-visible, .selectbox:focus-visible, [tabindex="-1"]:focus-visible { outline:2px solid #e0ccff; outline-offset:3px; }
.check input:focus-visible { outline:2px solid #e0ccff; outline-offset:2px; }

/* screen reader only, and the skip link that appears on focus */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip {
 position:absolute; left:16px; top:-100px; z-index:100; padding:10px 16px; border-radius:999px;
 background:#dcc2ff; color:#100a1c; font-weight:700; text-decoration:none; text-shadow:none;
}
.skip:focus { top:16px; }

/* readable small text, and tap targets that are not fiddly */
.form-privacy { font-size:12.5px; color:rgba(244,241,234,0.62); }
.form-privacy a { color:#dcc2ff; }
.foot { font-size:13px; color:rgba(244,241,234,0.5); }
.slogan .you.long { font-size:1.4em; }
.brand-sub { max-width:600px; line-height:1.6; }
.brand-cards { width:100%; margin-top:56px; padding:0; }
.say-hello { text-align:center; margin:72px auto 0; max-width:560px; }
.say-hello .wordmark { font-size:clamp(30px, 4vw, 44px); }
.say-hello .sub { font-size:14.5px; margin-top:10px; }
.join .formcard.wide { margin-top:28px; }
.join .formcard {
 margin-top:44px; padding:28px; border-radius:22px;
 border:1px solid rgba(168,120,255,0.22);
 background:radial-gradient(130% 120% at 50% 0%, rgba(40,26,66,0.45) 0%, rgba(8,6,14,0.78) 100%);
 box-shadow:0 0 60px rgba(150,90,255,0.16), inset 0 0 30px rgba(150,90,255,0.05);
 backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.join .success-state .glow { font-size:clamp(30px, 4vw, 52px); font-family:var(--serif); font-style:italic; font-weight:400; }

/* ---------- footer: the giant wordmark, cropped by the page edge ---------- */
.foot { overflow:hidden; padding-bottom:0; }
.foot-mark {
 display:block; font-size:clamp(130px, 34vw, 560px); font-weight:800; letter-spacing:-0.065em; line-height:.8;
 text-align:center; margin:6vw -2vw -3.5vw; white-space:nowrap; user-select:none;
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
 .nav { padding:16px 18px; }
 .join .formcard { padding:22px 18px; }
}

/* ---------- reduced motion: a still, finished frame ---------- */
@media (prefers-reduced-motion: reduce) {
 .ch { opacity:1 !important; transform:none !important; filter:none !important; }
 }

/* language menu: the current language, spelled out, opens the other two */
.langs { position:relative; }
.nav-links .lang-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:'Nunito',sans-serif; font-weight:700; color:#c9a3ff; }
.lang-toggle .chev { width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .2s ease; }
.lang-toggle[aria-expanded="true"] .chev { transform:rotate(225deg); margin-top:3px; }
.lang-menu {
 position:absolute; right:0; top:calc(100% + 8px); min-width:150px; list-style:none; margin:0; padding:6px; z-index:30;
 border-radius:14px; border:1px solid rgba(168,120,255,0.35);
 background:radial-gradient(120% 140% at 50% 0%, rgba(40,26,66,0.92) 0%, rgba(14,10,22,0.96) 100%);
 box-shadow:0 0 28px rgba(150,90,255,0.25);
 backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.lang-menu[hidden] { display:none; }
.nav-links .lang-menu .lang { display:block; padding:10px 12px; border-radius:9px; font-size:14px; }
.nav-links .lang-menu .lang:hover { background:rgba(150,90,255,0.16); }
.nav-links .lang-menu .lang[aria-current="page"] { color:#f4f1ea; }
.nav-links .lang-menu .lang[aria-current="page"]::after { content:'\2713'; float:right; color:#c9a3ff; }
@media (max-width: 400px) {
 .nav-links { gap:8px; }
 .nav-links .chip { padding:7px 11px; font-size:12.5px; }
}