/* MIRRA — editorial mirror */
:root{
  --ink:#0C0B0F;
  --ink-2:#17151C;
  --paper:#EEE9DF;
  --paper-2:#E3DCCE;
  --gold:#C9A86A;
  --gold-deep:#8E6C33;
  --violet:#7F77DD;
  --on-ink:#EEE9DF;
  --on-ink-mute:rgba(238,233,223,.58);
  --on-ink-line:rgba(238,233,223,.16);
  --on-paper:#0C0B0F;
  --on-paper-mute:rgba(12,11,15,.6);
  --on-paper-line:rgba(12,11,15,.16);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',-apple-system,'Segoe UI',Roboto,sans-serif;
  --gut:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--on-ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
i,em{font-style:italic}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
::selection{background:var(--gold);color:var(--ink)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut)}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}

.display{font-variant-numeric:lining-nums;font-family:var(--serif);font-weight:800;font-size:clamp(46px,7.2vw,112px);line-height:.94;letter-spacing:-.025em}
.display i{font-weight:400;letter-spacing:-.02em}
.dark{background:var(--ink);color:var(--on-ink)}
.paper{background:var(--paper);color:var(--on-paper)}
.dark .display i{color:var(--gold)}
.paper .display i{color:var(--gold-deep)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gut);color:#fff;mix-blend-mode:difference;pointer-events:none}
.nav a{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);letter-spacing:.32em}
.nav-links{display:flex;gap:30px;font-size:15px}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:92px var(--gut) 40px;max-width:1440px;margin:0 auto;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:58%;width:min(1100px,120vw);height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(127,119,221,.22),rgba(127,119,221,0));pointer-events:none}
.hero-meta{display:flex;justify-content:space-between;gap:24px;font-size:15px;line-height:1.4;color:var(--on-ink-mute);position:relative}
.hero-meta .r{text-align:right}
.hero-q{position:relative;margin-top:auto;font-family:var(--serif);font-weight:800;font-size:clamp(64px,12.4vw,196px);line-height:.9;letter-spacing:-.035em}
.hero-q .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-q .line>span{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
.hero-q .l2{text-align:right}
.hero-q i{font-weight:400;color:var(--gold);letter-spacing:-.03em}
.ready .hero-q .line>span{transform:none}
.ready .hero-q .l2>span{transition-delay:.12s}

.mirror{position:relative;margin-top:.06em}
.mirror-edge{height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,106,.9) 18%,rgba(238,233,223,.9) 50%,rgba(201,168,106,.9) 82%,transparent);transform:scaleX(0);transition:transform 1.4s .5s var(--ease)}
.ready .mirror-edge{transform:none}
.reflection{position:relative;height:clamp(54px,7.4vw,118px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 92%);mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 92%)}
.refl-text{position:absolute;right:0;top:0;font-family:var(--serif);font-size:clamp(64px,12.4vw,196px);line-height:.9;height:.9em;letter-spacing:-.03em;color:var(--gold);transform:scaleY(-1);filter:url(#ripple);opacity:.85;white-space:nowrap;transform-origin:50% 50%;animation:sway 7s ease-in-out infinite;will-change:transform}
@keyframes sway{0%,100%{transform:scaleY(-1) skewX(-3deg)}50%{transform:scaleY(-1.06) skewX(3deg)}}
.refl-text i{display:inline-block;transition:opacity .7s ease,filter .7s ease}
.refl-text i.swap{opacity:0;filter:blur(10px)}
.mirror-note{position:absolute;left:0;top:18px;font-size:15px;line-height:1.45;color:var(--on-ink-mute)}
.mirror-note b{font-weight:500;color:var(--on-ink)}

.hero-foot{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:22px}
.hero-lede{max-width:430px;font-size:18px;line-height:1.5;color:var(--on-ink)}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:flex-end}

.badge{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 18px;border-radius:12px;background:var(--on-ink);color:var(--ink);transition:transform .35s var(--ease),background .3s}
.badge span{display:flex;flex-direction:column;font:600 20px/1 var(--sans);letter-spacing:-.01em}
.badge small{font:500 11px/1 var(--sans);letter-spacing:.02em;margin-bottom:3px}
.badge:hover{transform:translateY(-2px);background:#fff}
.link-arrow{font-size:16px;border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .3s}
.link-arrow span{display:inline-block;transition:transform .35s var(--ease)}
.link-arrow:hover{color:var(--gold)}
.link-arrow:hover span{transform:translateY(3px)}

/* ---------- ticker ---------- */
.ticker{background:var(--gold);color:var(--ink);overflow:hidden;padding:26px 0;border-block:1px solid rgba(0,0,0,.2)}
.ticker-track{display:flex;width:max-content;animation:tick 90s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:36px;padding-right:36px;font:italic 400 clamp(24px,2.6vw,36px)/1.1 var(--serif);white-space:nowrap}
.ticker-item svg{flex:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- manifesto ---------- */
.manifesto{padding:clamp(90px,12vw,170px) 0}
.m-left{grid-column:1/7}
.m-right{grid-column:8/13;display:flex;flex-direction:column;gap:22px;font-size:18px;line-height:1.6;padding-top:14px}
.struck{margin-top:44px;display:flex;flex-direction:column;gap:12px}
.struck li{font:italic 400 clamp(22px,2.4vw,32px)/1.2 var(--serif);color:var(--on-paper-mute)}
.struck s{text-decoration:none;position:relative}
.struck s::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:2px;background:var(--gold-deep);transform:scaleX(0);transform-origin:left;transition:transform .8s .35s var(--ease)}
.struck .in s::after,.struck li.in s::after{transform:scaleX(1)}
.dropcap::first-letter{float:left;font:800 92px/.8 var(--serif);margin:8px 12px 0 -2px;color:var(--gold-deep)}
.axes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--on-paper-line);margin-top:10px}
.axes div{padding:16px 16px 16px 0;border-bottom:1px solid var(--on-paper-line)}
.axes div:nth-child(odd){border-right:1px solid var(--on-paper-line)}
.axes div:nth-child(even){padding-left:18px}
.axes dt{font:600 24px/1.1 var(--serif)}
.axes dd{font-size:14px;color:var(--on-paper-mute);margin-top:4px}

/* ---------- test ---------- */
.test{padding:clamp(90px,12vw,170px) 0;position:relative}
.test-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(48px,6vw,90px)}
.test-head p{max-width:360px;color:var(--on-ink-mute)}
.quiz{border-top:1px solid var(--on-ink-line);padding-top:28px;min-height:520px}
.quiz-progress{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-variant-numeric:lining-nums}
.quiz-progress span{font-size:44px;font-weight:600;line-height:1}
.quiz-progress em{color:var(--on-ink-mute);font-size:20px}
.quiz-progress .bar{flex:1;height:1px;background:var(--on-ink-line);margin-left:20px;position:relative;align-self:center}
.quiz-progress .bar b{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold);transition:width .7s var(--ease)}
.quiz-stage{margin-top:36px;transition:opacity .45s ease,transform .45s var(--ease)}
.quiz-stage.out{opacity:0;transform:translateY(-14px)}
.q-prompt{font:400 clamp(30px,4vw,56px)/1.12 var(--serif);letter-spacing:-.015em;max-width:980px;margin-bottom:38px}
.q-opts{border-top:1px solid var(--on-ink-line)}
.q-opt{width:100%;display:grid;grid-template-columns:56px 1fr auto;align-items:center;text-align:left;padding:22px 0;border-bottom:1px solid var(--on-ink-line);font-size:clamp(18px,1.7vw,23px);transition:padding .4s var(--ease),color .3s}
.q-opt .k{font:italic 400 22px/1 var(--serif);color:var(--gold)}
.q-opt .go{opacity:0;transform:translateX(-10px);transition:all .35s var(--ease);color:var(--gold)}
.q-opt:hover{padding-left:18px}
.q-opt:hover .go{opacity:1;transform:none}
.q-opt.picked{color:var(--gold)}

.result{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,80px);align-items:center}
.res-emblem{position:relative;aspect-ratio:1;max-width:440px;width:100%;justify-self:center}
.res-emblem svg{width:100%;height:100%;overflow:visible}
.res-emblem .ring{transform-origin:50% 50%;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.res-kicker{color:var(--on-ink-mute);font-size:15px}
.res-name{font:italic 400 clamp(64px,9vw,140px)/.95 var(--serif);color:var(--gold);letter-spacing:-.03em;margin:8px 0 14px}
.res-tag{font:400 clamp(20px,2vw,28px)/1.3 var(--serif);max-width:560px}
.res-dims{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;margin:34px 0;max-width:560px}
.res-dims div{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:12px;font-size:14px;color:var(--on-ink-mute)}
.res-dims i{height:2px;background:var(--on-ink-line);position:relative}
.res-dims i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--gold);transition:width 1s var(--ease)}
.res-note{color:var(--on-ink-mute);max-width:520px;margin-bottom:26px}
.res-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap}

/* ---------- faces ---------- */
.faces{padding:clamp(90px,12vw,170px) 0;position:relative}
.faces-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:56px}
.filter{display:flex;gap:8px}
.filter button{padding:10px 18px;border:1px solid var(--on-paper-line);border-radius:100px;font-size:15px;transition:background .3s,color .3s,border-color .3s}
.filter button sup{font-size:10px;margin-left:2px;color:var(--on-paper-mute)}
.filter button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filter button.on sup{color:var(--gold)}
.index{columns:2;column-gap:56px;border-top:1px solid var(--on-ink)}
.index li{break-inside:avoid;display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:10px;padding:16px 0 15px;border-bottom:1px solid var(--on-paper-line);cursor:default;transition:opacity .4s,padding .4s var(--ease)}
.index .n{font:500 13px/1 var(--sans);color:var(--on-paper-mute);font-variant-numeric:tabular-nums}
.index .nm{font:400 clamp(24px,2.3vw,32px)/1.1 var(--serif);letter-spacing:-.01em;transition:font-style .2s}
.index .tg{display:block;font:400 14px/1.4 var(--sans);color:var(--on-paper-mute);margin-top:4px}
.index .pl{font-size:13px;color:var(--on-paper-mute)}
.index li:hover{padding-left:10px}
.index li:hover .nm{font-style:italic;color:var(--gold-deep)}
.index li.dim{opacity:.18}
.float-emblem{position:fixed;left:0;top:0;width:170px;height:170px;pointer-events:none;z-index:40;opacity:0;transform:translate(40px,-50%) scale(.6) rotate(-8deg);transition:opacity .25s,transform .35s var(--ease)}
.float-emblem.show{opacity:1;transform:translate(40px,-50%) scale(1) rotate(0)}
.float-emblem svg{width:100%;height:100%;filter:drop-shadow(0 18px 30px rgba(12,11,15,.35))}

/* ---------- reading ---------- */
.reading{padding:clamp(90px,12vw,170px) 0;overflow:hidden}
.r-copy{grid-column:1/8;align-self:center}
.small-cap{font-size:15px;color:var(--on-ink-mute)}
.pull{font:italic 400 clamp(40px,5.4vw,84px)/1.04 var(--serif);letter-spacing:-.02em;margin:18px 0 56px;text-indent:-.4em}
.roman{counter-reset:r;border-top:1px solid var(--on-ink-line)}
.roman li{counter-increment:r;display:grid;grid-template-columns:56px 230px 1fr;gap:12px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--on-ink-line)}
.roman li::before{content:counter(r,upper-roman);font:italic 400 22px/1 var(--serif);color:var(--gold)}
.roman b{font:600 24px/1.1 var(--serif)}
.roman span{color:var(--on-ink-mute);font-size:16px}
.phone{grid-column:9/13;justify-self:end;width:min(340px,100%);aspect-ratio:9/19.2;border-radius:46px;padding:11px;background:linear-gradient(160deg,#2a2730,#0e0d11 40%,#1d1b22);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 120px -30px rgba(127,119,221,.4);transform:rotate(4deg)}
.phone-screen{height:100%;border-radius:36px;background:radial-gradient(120% 60% at 50% 22%,#2a2448,#0C0B0F 70%);display:flex;flex-direction:column;align-items:center;padding:26px 22px;text-align:center;overflow:hidden}
.ps-top{font:600 10px/1 var(--sans);letter-spacing:.4em;color:var(--on-ink-mute)}
.ps-emblem{width:62%;aspect-ratio:1;margin:26px 0 12px}
.ps-emblem svg{width:100%;height:100%;overflow:visible}
.ps-name{font:800 34px/1 var(--serif)}
.ps-arch{font:italic 400 16px/1 var(--serif);color:var(--gold);margin-top:8px}
.ps-tag{font-size:12.5px;color:var(--on-ink-mute);margin:12px 0 18px;line-height:1.45}
.ps-dims{width:100%;display:flex;flex-direction:column;gap:8px}
.ps-dims div{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font-size:11px;color:var(--on-ink-mute);text-align:left}
.ps-dims i{height:3px;border-radius:2px;background:rgba(255,255,255,.08);position:relative}
.ps-dims i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:2px;background:var(--gold)}
.ps-traits{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:auto}
.ps-traits span{font-size:10px;padding:5px 9px;border-radius:20px;border:1px solid var(--on-ink-line);color:var(--on-ink-mute)}

/* ---------- numbers ---------- */
.numbers{padding:clamp(70px,9vw,130px) 0}
.nums{display:grid;grid-template-columns:repeat(4,1fr)}
.nums div{padding:0 24px;border-left:1px solid var(--on-paper-line)}
.nums div:first-child{border-left:0;padding-left:0}
.nums b{display:block;font:800 clamp(80px,11vw,170px)/.85 var(--serif);letter-spacing:-.04em;font-variant-numeric:lining-nums}
.nums div:nth-child(n+3) b{color:var(--gold-deep);font-style:italic;font-weight:400}
.nums span{display:block;margin-top:18px;font-size:16px;line-height:1.4;color:var(--on-paper-mute)}

/* ---------- final ---------- */
.final{padding:clamp(110px,14vw,200px) 0 clamp(70px,8vw,110px);text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;left:50%;top:44%;width:900px;height:500px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(201,168,106,.14),transparent);pointer-events:none}
.final-q,.final-refl>div{font:800 clamp(64px,11vw,176px)/.9 var(--serif);letter-spacing:-.035em}
.final-q i,.final-refl i{font-weight:400;color:var(--gold)}
.final-q{position:relative}
.final-refl{position:relative;height:clamp(70px,9vw,150px);overflow:hidden;border-top:1px solid rgba(201,168,106,.6);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 85%);mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 85%)}
.final-refl>div{position:absolute;left:0;right:0;top:0;transform:scaleY(-1)}
.final-actions{position:relative;display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;margin-top:24px}
.final-note{position:relative;margin-top:26px;color:var(--on-ink-mute);font-size:15px}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--on-ink-mute);font-size:14px;overflow:hidden;border-top:1px solid var(--on-ink-line)}
.foot-row{display:flex;justify-content:space-between;gap:20px;padding-top:26px;padding-bottom:10px;flex-wrap:wrap}
.foot nav{display:flex;gap:26px}
.foot a:hover{color:var(--on-ink)}
.foot-word{font:800 clamp(90px,25vw,400px)/.78 var(--serif);letter-spacing:-.05em;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(238,233,223,.16);margin-bottom:-.12em;user-select:none}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .m-left,.m-right,.r-copy{grid-column:1/-1}
  .m-right{margin-top:56px}
  .phone{grid-column:1/-1;justify-self:center;margin-top:70px;transform:rotate(2deg)}
  .test-head,.faces-head{flex-direction:column;align-items:flex-start}
  .result{grid-template-columns:1fr}
  .res-emblem{max-width:280px}
  .nums{grid-template-columns:1fr 1fr;row-gap:48px}
  .nums div:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:700px){
  body{font-size:16px}
  .nav-links a:not(.nav-get){display:none}
  .hero{padding-top:84px}
  .hero-meta{font-size:13px}
  .hero-q{font-size:clamp(52px,16.5vw,120px)}
  .refl-text{font-size:clamp(52px,16.5vw,120px)}
  .reflection{height:62px}
  .mirror-note{position:static;margin-top:4px;font-size:14px}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:24px}
  .hero-actions{justify-content:flex-start}
  .index{columns:1}
  .roman li{grid-template-columns:40px 1fr}
  .roman span{grid-column:2}
  .axes dt{font-size:20px}
  .axes dd{font-size:13px}
  .axes div:nth-child(even){padding-left:12px}
  .q-opt{grid-template-columns:40px 1fr auto}
  .res-dims{grid-template-columns:1fr}
  .res-emblem{max-width:200px;justify-self:start}
  .quiz{min-height:0}
  .float-emblem{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero-q .line>span{transform:none}
  .mirror-edge{transform:none}
  .refl-text,.final-refl>div{filter:none}
}
.ps-read{font:italic 400 13.5px/1.5 var(--serif);color:var(--on-ink);margin:18px 4px 0;text-align:left;border-left:2px solid var(--gold);padding-left:10px}
.ps-traits{padding-top:14px}