/* Understory site: the brand's club + editorial modes (soft glow, glass, lilac), with the booklet's
   pink kept as a quiet accent. */
:root{
  --ink:#0c0c11; --panel:#12121a; --panel-2:#16151f;
  --bone:#f4f0e6; --bone-80:rgba(244,240,230,.78); --bone-60:rgba(244,240,230,.6); --bone-40:rgba(244,240,230,.4);
  --lilac:#b48ad6; --peri:#8d9ec4; --deep:#4a3a8a; --chip-ink:#2c2450;
  --pink:#e58bb0;
  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.08); --glass-line:rgba(255,255,255,.22);
  --max:1120px;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Playfair Display',Georgia,serif;
  --type:var(--mono);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ink); color:var(--bone); font:400 14px/1.75 var(--mono); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%}
a{color:var(--lilac)} a:hover{color:#fff}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px}
@media(max-width:600px){.wrap{padding:0 16px}}

.grain{position:fixed; inset:0; z-index:60; pointer-events:none; mix-blend-mode:overlay; opacity:.4;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="300" height="300" filter="url(%23n)"/></svg>')}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,20px) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(40px,-25px) scale(1)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,-4deg))}50%{transform:translateY(-12px) rotate(calc(var(--r,-4deg) + 2deg))}}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

/* soft aura behind a section */
.aura{position:absolute; border-radius:50%; pointer-events:none; filter:blur(70px); z-index:0}
.s > .wrap{position:relative; z-index:1}

/* type */
.kicker{font:500 10px var(--mono); letter-spacing:4px; text-transform:uppercase; color:var(--bone-60); margin:0 0 18px}
.kicker b{color:var(--lilac); font-weight:500}
h1,h2,h3{font-weight:400; margin:0}
.h-sec{font:italic 800 clamp(36px,5.4vw,62px)/1.02 var(--serif); letter-spacing:-1px; color:var(--bone); margin:0 0 18px}
.h-sec em{font-style:italic; color:transparent; -webkit-text-stroke:1.4px var(--bone)}
.lead{font-size:13px; color:var(--bone-60); max-width:540px; margin:0 0 44px}

/* buttons: pills */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 26px; border-radius:999px; border:none; background:#fff; color:var(--deep);
     font:600 12.5px var(--mono); letter-spacing:.3px; text-decoration:none; cursor:pointer; transition:transform 150ms ease-out, background-color 150ms ease}
.btn:hover{transform:scale(1.03); color:var(--deep)}
.btn.pink{background:#fff; color:var(--deep)}
.btn.ghost{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.4); box-shadow:none;
           -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.btn.ghost:hover{background:rgba(255,255,255,.22); color:#fff}

.chip{display:inline-flex; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.3); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
      border:1px solid rgba(255,255,255,.5); font:500 11px var(--mono); color:var(--chip-ink)}
.mini-chip{padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font:500 10.5px var(--mono); color:#fff}

/* nav */
nav.top{position:sticky; top:0; z-index:50; background:rgba(12,12,17,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
nav.top .inner{max-width:var(--max); margin:0 auto; padding:13px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px}
@media(max-width:600px){nav.top .inner{padding:10px 16px}}
.brand{font:800 20px var(--serif); color:var(--bone); text-decoration:none}
.brand em{font-weight:400; font-style:italic}
.brand:hover{color:var(--bone)}
.nav-links{display:flex; gap:24px; align-items:center}
.nav-links a:not(.btn){color:var(--bone-60); text-decoration:none; font:500 10.5px var(--mono); letter-spacing:2px; text-transform:uppercase}
.nav-links a:not(.btn):hover{color:var(--bone)}
.nav-links .btn{padding:8px 18px; font-size:11.5px; box-shadow:none}
@media(max-width:860px){.nav-links a:not(.btn){display:none}}

/* sections */
section.s{position:relative; padding:clamp(72px,9vw,120px) 0; border-top:1px solid var(--line); overflow:hidden}
.star-rule{display:flex; align-items:center; gap:14px; color:var(--lilac); margin:0 auto 22px; max-width:340px}
.star-rule::before,.star-rule::after{content:""; height:1px; flex:1; background:var(--line)}

footer.site{border-top:1px solid var(--line); padding:48px 0 60px; background:#08080d}
footer.site .inner{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap}
footer.site p{font-size:11px; color:var(--bone-60); max-width:320px; margin:10px 0 0}
footer.site p.fine{max-width:none}
.fcol a{display:block; color:var(--bone-60); text-decoration:none; font:500 10px var(--mono); letter-spacing:2px; text-transform:uppercase; margin:9px 0}
.fcol a:hover{color:var(--bone)}
.fine{font-size:10px; color:var(--bone-40); text-align:center; margin-top:32px}
section[id],details[id]{scroll-margin-top:70px}

/* glow cursor (assets/cursor.js adds .glow-cursor on fine pointers only) */
.glow-cursor, .glow-cursor *{cursor:url('cursor.svg') 6 4, auto}
.glow-cursor a, .glow-cursor button, .glow-cursor summary, .glow-cursor [role=button]{cursor:url('cursor.svg') 6 4, pointer}
.glow-cursor input{cursor:text}
.cur-halo{position:fixed; left:0; top:0; width:40px; height:40px; border-radius:50%; pointer-events:none; z-index:80;
  background:radial-gradient(circle, rgba(229,139,176,.42), rgba(229,139,176,.14) 45%, transparent 70%); mix-blend-mode:screen; transition:opacity 200ms ease}
.cur-spark{position:fixed; pointer-events:none; z-index:80; line-height:1; transform:translate(-50%,-50%);
  text-shadow:0 0 6px rgba(229,139,176,.8); animation:spark 900ms ease-out forwards}
@keyframes spark{to{opacity:0; transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,14px))) scale(.3) rotate(40deg)}}
.sparkle-field{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:55; mix-blend-mode:screen}

/* keyboard focus */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{outline:2px solid var(--lilac); outline-offset:3px; border-radius:6px}
.btn:focus-visible{border-radius:999px}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5; cursor:default; transform:none}