/* ==========================================================================
   KypeSevere — landing styles
   Identity: BURGUNDY + BLACK. Wine and velvet, chandelier over marble,
   elegance-as-armor. Warm-black fields, deep oxblood/burgundy accent,
   champagne + warm off-white for text and hairlines. No neon, no rainbow.

   SOURCE OF TRUTH — operator-locked palette (custom properties):
     --ks-black / --ks-burgundy / --ks-burgundy-bright / --ks-champagne / --ks-text
   Internal aliases below map older rule names onto these so there is one
   place to change color.
   ========================================================================== */

:root{
  /* ---- operator-locked palette (one source of truth) ---- */
  --ks-black:#0B0708;            /* warm near-black (not pure #000) */
  --ks-black-2:#120A0D;          /* raised warm-black */
  --ks-burgundy-deep:#5E1420;    /* deepest oxblood */
  --ks-burgundy:#7B1E2B;         /* primary burgundy */
  --ks-burgundy-bright:#9E2A38;  /* hover / active / glowing edges */
  --ks-champagne:#C9B79A;        /* muted champagne — hairlines, wordmark stroke */
  --ks-champagne-lt:#E8DCC8;     /* light champagne — accents, links */
  --ks-text:#EDE6DA;             /* high-contrast warm off-white (never pure white) */
  --ks-muted:#A99E8C;            /* warm grey — secondary text */

  /* ---- internal aliases (existing rules reference these) ---- */
  --void:var(--ks-black); --ink:#100b0d; --panel:#160f11; --panel-2:#1b1215;
  --line:rgba(232,220,200,.12);           /* champagne hairline */
  --hairline:rgba(158,42,56,.5);          /* burgundy edge */
  --oxblood:var(--ks-burgundy-deep);
  --burgundy:var(--ks-burgundy);
  --ember:var(--ks-burgundy-bright);      /* bright burgundy for glows/accents */
  --rose:var(--ks-champagne-lt);          /* readable accent text / links */
  --gold:var(--ks-champagne);             /* wordmark stroke / sparing hairline */
  --bone:var(--ks-text);
  --ash:var(--ks-muted);
  --dim:#D8CFC2;

  --serif:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:"Cascadia Code",Consolas,"Courier New",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--void); color:var(--bone);
  font-family:var(--serif); font-size:17px; line-height:1.65;
  overflow-x:hidden; min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* film grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* vignette + burgundy glow (parallaxed via --glow-shift in app.js) */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 760px at 78% calc(-6% + var(--glow-shift,0px)), rgba(158,42,56,.16), transparent 60%),
    radial-gradient(900px 900px at -10% 105%, rgba(94,20,32,.14), transparent 55%),
    radial-gradient(140% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.6) 100%);
}
::selection{background:var(--burgundy); color:var(--bone)}

.frame{max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,64px); position:relative; z-index:2}

/* ---- vertical rail ---- */
.rail{
  position:fixed; top:0; bottom:0; left:clamp(4px,1.4vw,18px); width:20px; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:26px 0; pointer-events:none;
}
.rail::before{content:""; flex:1; width:1px; background:linear-gradient(var(--hairline),transparent); margin:14px 0}
.rail::after{content:""; flex:1; width:1px; background:linear-gradient(transparent,var(--hairline)); margin:14px 0}
.rail span{
  writing-mode:vertical-rl; font-family:var(--mono); font-size:10px;
  letter-spacing:.42em; color:var(--ash); text-transform:uppercase;
}
.rail__dot{
  width:7px;height:7px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 14px 3px rgba(158,42,56,.6); animation:breathe 4.5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.35);opacity:1}}

/* ========================= first-load disclosure ======================== */
.disclosure{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  background:rgba(7,4,5,.93); backdrop-filter:blur(3px);
  transition:opacity .7s ease, visibility .7s ease;
}
.disclosure.is-hidden{opacity:0; visibility:hidden; pointer-events:none}
.disclosure__card{
  max-width:560px; margin:24px; padding:clamp(30px,5vw,52px); text-align:center;
  border:1px solid var(--hairline); border-top:2px solid var(--burgundy);
  background:linear-gradient(160deg,var(--panel),rgba(11,7,8,.7));
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9);
  animation:discIn 1s var(--ease) both;
}
@keyframes discIn{from{opacity:0; transform:translateY(18px) scale(.98)}to{opacity:1; transform:none}}
.disclosure__eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--rose); margin-bottom:20px;
}
.disclosure__body{font-size:clamp(17px,2.2vw,21px); line-height:1.55; color:var(--dim)}
.disclosure__btn{
  margin-top:30px; font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone); background:transparent; border:1px solid var(--hairline);
  padding:14px 30px; cursor:pointer; transition:all .25s ease;
}
.disclosure__btn:hover,.disclosure__btn:focus-visible{
  background:rgba(158,42,56,.18); border-color:var(--ember); color:var(--rose); outline:none;
}

/* ================================ HERO ================================= */
.hero{position:relative; padding:clamp(96px,16vh,180px) 0 clamp(40px,7vh,90px)}
.hero__inner{display:flex; flex-direction:column}
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.38em; text-transform:uppercase;
  color:var(--rose); display:flex; align-items:center; gap:14px;
}
.kicker::before{content:""; width:44px; height:1px; background:var(--burgundy)}

.wordmark{margin:26px 0 0 -2px; width:100%}
.wordmark__svg{width:100%; max-width:760px; height:auto; display:block; overflow:visible}
.wm-line{font-family:var(--serif); font-weight:700; font-size:120px; letter-spacing:-4px}
.wm-kype{fill:var(--bone); stroke:var(--bone); stroke-width:.6}
/* SEVERE — champagne hairline stroke (sparing gold detail), burgundy glow */
.wm-severe{
  fill:transparent; font-style:italic;
  stroke:var(--gold); stroke-width:1.1;
  filter:drop-shadow(0 0 14px rgba(158,42,56,.45));
}
/* draw-on: dash covers the glyph outline, app.js releases it */
.wm-line.draw{
  stroke-dasharray:1400; stroke-dashoffset:1400; fill-opacity:0;
  animation:wmDraw 1.5s var(--ease) forwards, wmFill 1.1s ease forwards;
}
.wm-severe.draw{animation-delay:.28s, .95s}
.wm-kype.draw{animation-delay:.05s, .75s}
@keyframes wmDraw{to{stroke-dashoffset:0}}
@keyframes wmFill{to{fill-opacity:1}}

.hero__meta{display:flex; flex-wrap:wrap; gap:10px 30px; align-items:baseline; margin-top:30px;
  padding-top:20px; border-top:1px solid var(--hairline); max-width:820px}
.hero__name{font-size:clamp(19px,2.4vw,25px); font-style:italic}
.hero__name b{font-style:normal; color:var(--rose)}
.hero__role{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ash)}

/* ---- video stage (founder + zhade share this) ---- */
.stage{margin:clamp(36px,5vh,56px) 0 0; max-width:860px}
.stage__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); border-top:1px solid var(--hairline);
  background:var(--ink); box-shadow:0 40px 100px -40px rgba(0,0,0,.9);
}
.stage__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 120px 20px rgba(0,0,0,.62), inset 0 0 0 1px rgba(158,42,56,.14);
}
.stage__placeholder,.stage__frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.stage__poster{width:100%; height:100%; display:block}
.stage__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:78px; height:78px; border-radius:50%; cursor:pointer; z-index:2;
  background:rgba(123,30,43,.28); border:1px solid var(--hairline);
  display:grid; place-items:center; transition:all .3s var(--ease); backdrop-filter:blur(2px);
}
.stage__play svg{width:26px; height:26px; fill:var(--rose); margin-left:3px; transition:fill .3s}
.stage__play::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(158,42,56,.55); animation:ring 2.8s ease-out infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.stage__play:hover,.stage__play:focus-visible{
  background:rgba(158,42,56,.4); border-color:var(--ember); transform:translate(-50%,-50%) scale(1.06); outline:none;
}
.stage__play:hover svg{fill:var(--bone)}
.stage__badge{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ash); background:rgba(7,4,5,.62); border:1px solid var(--line); padding:5px 11px; border-radius:999px;
}
.stage__caption{margin-top:18px; color:var(--dim); font-size:clamp(15px,1.9vw,18px); line-height:1.55; max-width:720px}
.stage__caption em{color:var(--rose); font-style:italic}
.stage__disclosure{
  display:block; margin-top:10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ash); line-height:1.9;
}

.hero__tag{margin-top:clamp(30px,4vh,44px); max-width:620px; font-size:clamp(18px,2.1vw,22px); line-height:1.55; color:var(--dim)}

.scroll-cue{
  display:inline-flex; align-items:center; gap:16px; margin-top:clamp(34px,5vh,54px);
  text-decoration:none; color:var(--ash); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.3em; text-transform:uppercase; transition:color .3s;
}
.scroll-cue:hover{color:var(--rose)}
.scroll-cue__line{position:relative; width:60px; height:1px; background:var(--line); overflow:hidden}
.scroll-cue__line::after{content:""; position:absolute; inset:0; width:24px; background:var(--ember); animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-24px)}100%{transform:translateX(60px)}}

/* =============================== sections ============================== */
.section{padding:clamp(64px,11vh,130px) 0; position:relative}
.sec-head{display:flex; align-items:baseline; gap:22px; margin-bottom:30px}
.sec-head__no{font-family:var(--mono); font-size:12px; color:var(--rose); letter-spacing:.3em}
.sec-head__title{font-size:clamp(30px,5vw,58px); letter-spacing:-.02em; font-weight:700; text-transform:uppercase}
.sec-head__tail{flex:1; height:1px; background:var(--line); transform:translateY(-8px)}
.sec-lede{max-width:720px; color:var(--dim); font-size:clamp(17px,2vw,20px); margin-bottom:clamp(40px,6vh,64px)}

/* ---- houses grid ---- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px)}
.house{
  position:relative; overflow:hidden; padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--line); border-top:1px solid rgba(158,42,56,.36);
  background:linear-gradient(165deg,var(--panel),rgba(13,9,10,.4));
  transition:transform .5s var(--ease), border-color .4s, background .4s;
  min-height:230px; display:flex; flex-direction:column;
}
.house::before{ /* burgundy sheen follows the pointer */
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:radial-gradient(300px 180px at var(--mx,50%) var(--my,0%), rgba(158,42,56,.16), transparent 70%);
}
.house::after{ /* ghost numeral */
  content:attr(data-numeral); position:absolute; top:8px; right:16px; line-height:1;
  font-size:clamp(48px,6vw,84px); font-weight:700; font-style:italic;
  color:transparent; -webkit-text-stroke:1px rgba(158,42,56,.26);
}
.house:hover{transform:translateY(-6px); border-color:var(--hairline); background:linear-gradient(165deg,var(--panel-2),rgba(15,10,11,.5))}
.house:hover::before{opacity:1}
.house__k{font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--rose)}
.house__name{font-size:clamp(22px,2.6vw,30px); font-style:italic; font-weight:700; margin:12px 0 12px; letter-spacing:-.01em; position:relative}
.house__desc{color:var(--dim); font-size:15px; line-height:1.55; flex:1; position:relative}
.house__tag{
  margin-top:18px; align-self:flex-start; position:relative;
  font-family:var(--mono); font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rose); border:1px solid rgba(158,42,56,.45); border-radius:999px; padding:5px 12px;
}
.house--feature{grid-column:span 2}
.house--feature .house__name{font-size:clamp(26px,3.2vw,38px)}
.house--brain{border-top-color:rgba(201,183,154,.4); background:linear-gradient(165deg,rgba(27,18,21,.9),rgba(11,7,8,.5))}

/* ---- ZhaDe ---- */
.zhade__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:start}
.stage--zhade{margin-top:0; max-width:none}
.zhade__body{display:flex; flex-direction:column}
.zhade__mark{
  font-size:clamp(52px,8vw,104px); font-weight:700; font-style:italic; line-height:.9; letter-spacing:-.02em;
  background:linear-gradient(115deg,var(--bone) 42%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.zhade__line{margin-top:20px; color:var(--dim); font-size:clamp(17px,2vw,20px); line-height:1.55}
.zhade__line em{color:var(--rose); font-style:italic}
.zhade__songs{margin-top:30px; display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line)}
.song{padding:18px 4px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; transition:padding-left .3s}
.song:hover{padding-left:14px}
.song__title{font-family:var(--mono); font-size:14px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone)}
.song:hover .song__title{color:var(--rose)}
.song__note{color:var(--ash); font-size:14.5px}
.eq{display:flex; gap:5px; align-items:flex-end; height:40px; margin-top:26px}
.eq i{width:4px; background:var(--burgundy); animation:eq 1.6s ease-in-out infinite; border-radius:2px; height:30%}
.eq i:nth-child(2n){animation-delay:.2s; background:var(--ember)}
.eq i:nth-child(3n){animation-delay:.45s}
.eq i:nth-child(5n){animation-delay:.7s; background:var(--gold)}
.eq i:nth-child(7n){animation-delay:.9s}
@keyframes eq{0%,100%{height:20%}50%{height:100%}}

.lyric{
  margin-top:clamp(48px,7vh,80px); max-width:640px; padding:clamp(28px,4vw,44px);
  border-left:3px solid var(--burgundy);
  background:linear-gradient(100deg,rgba(123,30,43,.12),transparent 55%);
  display:flex; flex-direction:column; gap:10px;
}
.lyric__mark{font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--rose); margin-bottom:8px}
.lyric__line{font-size:clamp(20px,2.8vw,28px); font-style:italic; line-height:1.4; color:#efe7db}
.lyric__cite{margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ash); font-style:normal}

/* ---- day one ---- */
.dayone{text-align:center}
.dayone__inner{max-width:820px; margin:0 auto}
.dayone__eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--rose); margin-bottom:26px}
.dayone__line{font-size:clamp(24px,4vw,42px); font-style:italic; line-height:1.4; color:#efe7db}
.dayone__line b{color:var(--rose); font-style:normal}
.dayone__attr{margin-top:24px; font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ash)}

/* ---- footer ---- */
.footer{border-top:1px solid var(--hairline); padding:clamp(48px,8vh,80px) 0 90px}
.footer__inner{display:grid; grid-template-columns:1fr auto; gap:30px 60px; align-items:start}
.footer__mark{font-size:26px; font-weight:700; letter-spacing:-.02em}
.footer__mark i{color:var(--rose); font-style:normal}
.footer__fine{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ash); line-height:2; margin-top:12px}
.footer__contact{text-align:right}
.footer__label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ash); margin-bottom:8px}
.footer__contact a{color:var(--rose); text-decoration:none; font-size:clamp(18px,2.2vw,24px); font-style:italic;
  border-bottom:1px solid rgba(158,42,56,.55); padding-bottom:3px; transition:all .2s}
.footer__contact a:hover,.footer__contact a:focus-visible{color:var(--bone); border-color:var(--bone); outline:none}
.footer__disclosure{
  grid-column:1/-1; margin-top:14px; padding-top:26px; border-top:1px solid var(--line);
  max-width:760px; color:var(--ash); font-size:14px; line-height:1.7; font-style:italic;
}
.footer__copy{grid-column:1/-1}

/* =============================== reveals =============================== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.reveal--d1{transition-delay:.1s}
.reveal--d2{transition-delay:.2s}
.reveal--d3{transition-delay:.3s}

/* focus visibility for keyboard users (champagne = WCAG-visible on black) */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* =============================== responsive =========================== */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .house--feature{grid-column:span 2}
  .zhade__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .rail{display:none}
  .grid{grid-template-columns:1fr}
  .house--feature{grid-column:span 1}
  .footer__inner{grid-template-columns:1fr}
  .footer__contact{text-align:left}
  .wm-line{font-size:110px}
}

/* =============================== reduced motion ======================= */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .wm-line.draw{stroke-dashoffset:0; fill-opacity:1; animation:none}
  .rail__dot,.stage__play::before,.scroll-cue__line::after,.eq i{animation:none !important}
  .eq i{height:60%}
  body::after{--glow-shift:0px !important}
}