/* The Analogue Movement — Creative Alter Ego Quiz. Local DLS-derived tokens; see docs/DLS-PROPOSALS.md. */
@font-face{font-family:Urbanist;src:url('../assets/fonts/Urbanist-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Urbanist;src:url('../assets/fonts/Urbanist-Variable-Italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Instrument;src:url('../assets/fonts/InstrumentSerif-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:Instrument;src:url('../assets/fonts/InstrumentSerif-Italic.woff2') format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:Plex;src:url('../assets/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('../assets/fonts/IBMPlexMono-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---- tokens ---- */
:root{
  --white:#ffffff;--porcelain:#f4f6dc;--lime-cream:#ffffac;--golden-sand:#dfcc4c;--tangerine:#f99067;--grapefruit:#ffadad;--crimson:#e8003e;--dark-wine:#6e211b;--pale-sky:#c9e3fc;--wisteria:#708ac4;--tea-green:#cbf3d2;--turf-green:#297045;--tropical-teal:#3d897a;--pine-blue:#204e4a;--onyx:#161616;
  --ground:var(--white);--ink:var(--onyx);--cta:var(--crimson);--cta-text:var(--white);
  --radius:12px;--radius-lg:20px;--gutter:clamp(20px,5vw,80px);--ease:cubic-bezier(.2,.7,.2,1);
  font-family:Urbanist,sans-serif;font-synthesis:none;-webkit-text-size-adjust:100%;
}
:root,.skin{--line:color-mix(in srgb,var(--ink) 14%,transparent);--line-strong:color-mix(in srgb,var(--ink) 34%,transparent);--tint:color-mix(in srgb,var(--ink) 7%,transparent);--tint-strong:color-mix(in srgb,var(--ink) 13%,transparent)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%}
body{margin:0;min-height:100dvh;background:var(--ground);color:var(--ink);transition:background-color .7s ease,color .7s ease}
button,input{font:inherit;color:inherit}
button,a,input,label{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit}
button:disabled{cursor:default;opacity:.45}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1:focus,main:focus{outline:none}
h1,h2,p,blockquote,figure{margin:0}
h1,h2{font-family:Instrument,serif;font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(2.125rem,4.2vw,3.25rem);line-height:1.08}
h1 em{font-style:italic;color:var(--cta)}
h2{font-size:1.875rem;line-height:1.15}
p{font-size:1.0625rem;line-height:1.5}
.lead{font-size:1.125rem;line-height:1.5;margin-top:14px}
.meta{font:400 .75rem/1.5 Plex,monospace;text-transform:uppercase;letter-spacing:.04em}
.overline{display:block;margin-bottom:14px}
.helper{font-size:.875rem;line-height:1.5}
.hint{font-size:.875rem;opacity:.7}
kbd{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:20px;top:-80px;background:var(--white);color:var(--onyx);padding:16px;z-index:20;border-radius:var(--radius)}
.skip-link:focus{top:10px}

/* ---- chrome ---- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gutter);background:var(--ground);border-bottom:1px solid transparent;transition:background-color .7s ease,color .7s ease,padding .35s var(--ease),border-color .3s ease}
body.scrolled .site-header{padding-block:10px;border-bottom-color:var(--line)}
.brand-link{display:flex;align-items:center;gap:14px;color:inherit;border-radius:4px}
.brand-mark{width:74px;height:36px;flex:none;display:block;transition:width .35s var(--ease),height .35s var(--ease)}
.brand-word{width:69px;height:36px;flex:none;display:block;overflow:hidden;transition:width .35s var(--ease),opacity .25s ease,margin .35s var(--ease)}
body.scrolled .brand-mark{width:54px;height:26px}
body.scrolled .brand-word{width:0;opacity:0;margin-left:-14px}
.header-right{display:flex;align-items:center;gap:22px}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9;background:var(--line)}
.progress-fill{height:100%;width:0;background:var(--cta);transition:width .6s var(--ease),background-color .7s ease}
.deck-nav{position:fixed;right:24px;bottom:24px;z-index:8;display:flex;gap:8px}
.deck-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:var(--ground);color:var(--ink);display:grid;place-items:center;padding:0;transition:background-color .2s,color .2s,transform .2s var(--ease),border-color .7s ease}
.deck-nav button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.deck-nav button:not(:disabled):hover{background:var(--ink);color:var(--ground);transform:translateY(-1px)}

/* ---- buttons ---- */
.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:inherit;font-size:1rem;font-weight:600;line-height:1.3;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease}
.secondary:hover{background:var(--tint);border-color:var(--ink)}
.secondary:active{background:var(--tint-strong)}
.primary{border:0;background:var(--cta);color:var(--cta-text);border-radius:999px;min-height:52px;padding:14px 26px;font-weight:600;font-size:1.0625rem;line-height:1.3;display:inline-flex;align-items:center;justify-content:center;gap:12px;max-width:100%;transition:background-color .25s ease,color .25s ease,transform .15s var(--ease),filter .2s ease}
.primary:hover{filter:brightness(.88)}
.primary:active{transform:scale(.97)}
.primary.ink{background:var(--onyx);color:var(--white)}
.btn-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.primary:hover .btn-icon{transform:translateX(3px)}
.primary:disabled{filter:none;opacity:.6}
.quiet{border:0;background:transparent;padding:6px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-size:1rem;font-weight:600;color:inherit;cursor:pointer;transition:text-decoration-thickness .15s}
.quiet:hover{text-decoration-thickness:2px}
.panel-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}

/* ---- the deck ---- */
.deck{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.panel{min-height:100dvh;scroll-snap-align:start;display:grid;align-content:center;padding:96px var(--gutter) 92px}
.panel-inner{width:min(100%,720px);margin:0 auto}
/* Supplied light paper scans use Multiply (guidelines pp.42–43 allow alternate
   blends). Texture stays behind the ink and never intercepts controls. */
.panel:not(.panel-film),.result-hero{position:relative;isolation:isolate;background-color:var(--ground);transition:background-color .7s ease}
.panel:not(.panel-film)::before,.result-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../assets/textures/paper.jpg') center/cover;mix-blend-mode:multiply;opacity:.22}
.site-header{isolation:isolate}
.result-hero::before{background-image:url('../assets/textures/folded-paper.jpg');opacity:.38}
.panel-intro .panel-inner{width:min(100%,960px);text-align:center;display:grid;justify-items:center}
.panel-intro h1{font-size:clamp(3.25rem,8vw,7rem);line-height:1.04;letter-spacing:-.025em}
.panel-intro .lead{font-size:clamp(1.125rem,1.6vw,1.375rem);margin-top:22px}
.panel-intro .panel-actions{flex-direction:column;gap:14px;margin-top:34px}
.panel-intro .primary{min-width:200px}

/* entrance: rise once per panel */
.rise{opacity:1}
.panel:not(.seen) .rise{opacity:0;transform:translateY(16px)}
.panel.is-active:not(.seen) .rise{animation:rise .65s var(--ease) forwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* OK bar: sticks to the foot of the screen, level with the arrows, until the panel's end scrolls into view */
form .panel-actions{position:sticky;bottom:0;z-index:3;margin-inline:-14px;padding:24px 14px calc(21px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--ground) 62%,color-mix(in srgb,var(--ground) 0%,transparent));transition:background-color .7s ease}

/* ---- choices ---- */
.choices{border:0;padding:0;margin:22px 0 0;display:grid;gap:7px}
.choice{position:relative;display:flex;align-items:center;gap:14px;padding:11px 16px;min-height:54px;border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;font-size:1.0625rem;line-height:1.35;background:transparent;transition:background-color .2s ease,border-color .2s ease,transform .2s var(--ease)}
.choice:hover{background:var(--tint);border-color:var(--ink)}
.choice:active{transform:scale(.995)}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.choice:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.choice:has(input:checked){background:var(--tint-strong);border-color:var(--ink)}
.choice:has(input:checked) .choice-text{font-weight:600}
.keycap{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:6px;font:700 .75rem Plex,monospace;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.choice:hover .keycap{border-color:var(--ink)}
.choice:has(input:checked) .keycap{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.choice.chosen .keycap{animation:pop .4s var(--ease)}
@keyframes pop{35%{transform:scale(1.18)}}
.choice-text{flex:1;min-width:0}
.choice-check{flex:none;margin-left:auto;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.choice-check path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease) .05s}
.choice:has(input:checked) .choice-check{opacity:1}
.choice:has(input:checked) .choice-check path{stroke-dashoffset:0}
.error{font-size:1rem;line-height:1.5;min-height:24px;margin-top:14px;font-weight:600}
.error:not(:empty){animation:shake .4s var(--ease)}
@keyframes shake{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}

/* ---- email gate ---- */
.notice{margin-top:20px;padding:16px 18px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:.9375rem;line-height:1.5}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.fields>*{min-width:0}
.field{display:grid;gap:8px;font-size:.9375rem;font-weight:500}
.field.full{grid-column:1/-1}
.field input{min-height:54px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--radius);width:100%;font-size:1.0625rem;background:var(--white);color:var(--onyx);transition:border-color .2s}
.field input:hover{border-color:var(--ink)}
.field input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.consent{position:relative;display:flex;gap:14px;align-items:flex-start;margin-top:22px;font-size:1rem;line-height:1.5;cursor:pointer}
.consent .helper{display:block;opacity:.75}
.consent input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.consent-box{flex:none;width:24px;height:24px;margin-top:2px;border:1px solid var(--line-strong);border-radius:6px;display:grid;place-items:center;background:var(--white);transition:background-color .2s,border-color .2s}
.consent-box svg{width:16px;height:16px;fill:none;stroke:var(--white);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.consent-box path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s var(--ease)}
.consent:hover .consent-box{border-color:var(--ink)}
.consent:has(input:checked) .consent-box{background:var(--onyx);border-color:var(--onyx)}
.consent:has(input:checked) .consent-box path{stroke-dashoffset:0}
.consent:has(input:focus-visible) .consent-box{outline:2px solid var(--ink);outline-offset:2px}

/* ---- modal ---- */
.modal{border:1px solid var(--line-strong);border-radius:var(--radius-lg);padding:32px;width:min(calc(100% - 32px),440px);background:var(--white);color:var(--onyx);--ink:var(--onyx)}
.modal::backdrop{background:rgb(22 22 22/.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal[open]{animation:modal-in .32s var(--ease)}
.modal[open]::backdrop{animation:fade .32s ease}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes fade{from{opacity:0}}
.modal h2{font-size:2rem}
.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.modal p{margin-top:12px}
.modal-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}

/* ---- result & persona pages ---- */
.view-enter{animation:fade .45s ease}
.result{min-height:100dvh;background:var(--white)}
.result-hero{background:var(--ground);color:var(--ink);padding:136px var(--gutter) 84px}
.hero-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.result h1{font-size:clamp(3.25rem,7.5vw,6.75rem);line-height:.98;letter-spacing:-.025em;margin:10px 0 24px}
.result blockquote{font-family:Instrument,serif;font-size:clamp(1.375rem,2.1vw,1.75rem);line-height:1.3;max-width:520px}
.hero-art{display:grid;place-items:center}
.ill{width:min(100%,400px);height:auto;display:block;overflow:visible}
.ill .fill{fill:currentColor;fill-opacity:.22}
.ill .dot{fill:currentColor;stroke:none}
.ill .dots{stroke-dasharray:2 9}
.result .rise{animation:rise .7s var(--ease) both;animation-delay:calc(var(--i,0)*90ms)}
.hero-art .ill [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s var(--ease) forwards;animation-delay:calc(.3s + var(--i,0)*70ms)}
.hero-art .ill .fill{fill-opacity:0;animation:draw 1s var(--ease) forwards,fillin .6s ease forwards;animation-delay:calc(.3s + var(--i,0)*70ms),1.4s}
.hero-art .ill .dot,.hero-art .ill .dots{animation:fade .8s ease both;animation-delay:1.2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill-opacity:.22}}
.result-body{--ground:var(--white);--ink:var(--onyx);background:var(--white);color:var(--onyx);max-width:720px;margin:0 auto;padding:64px var(--gutter) 40px}
.blurb{font-size:1.3125rem;line-height:1.6}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;margin:40px 0;padding:28px 0;border-block:1px solid var(--line)}
.facts dt{font:400 .75rem/1.5 Plex,monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--crimson)}
.facts dd{margin:6px 0 0;font-size:1.125rem;line-height:1.4;font-weight:500}
.result h2{font-size:1.75rem}
.tags{list-style:none;padding:0;margin:16px 0 40px;display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid var(--line-strong);border-radius:999px;padding:9px 14px;font:700 .75rem/1.3 Plex,monospace;text-transform:uppercase;letter-spacing:.04em}
.runner-up{padding:28px 0 30px;border-block:1px solid var(--line);margin-bottom:40px}
.runner-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:14px}
.runner{display:inline-flex;align-items:center;gap:18px;text-decoration:none;color:inherit;border-radius:999px}
.runner-art{width:76px;height:76px;border-radius:50%;background:var(--ground);color:var(--ink);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease)}
.runner-art .ill{width:54px}
.runner:hover .runner-art{transform:scale(1.07) rotate(-3deg)}
.runner-name{font:2rem/1.1 Instrument,serif;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.runner:hover .runner-name{text-decoration-color:currentColor}
.runner-up .helper{margin-top:16px}
.share{display:grid;grid-template-columns:168px 1fr;gap:32px;align-items:center;padding:8px 0 44px}
.card-preview{aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;background:var(--tint);border:1px solid var(--line)}
.card-preview img{width:100%;height:100%;display:block;object-fit:cover;animation:fade .5s ease}
.share .helper{margin-top:10px;opacity:.8}
.result-actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:18px}
.status{font-size:.875rem;line-height:1.5;margin-top:14px}
.status:empty{display:none}
#card-fallback:not(:empty){margin-top:8px}
.launch{font:clamp(1.75rem,3vw,2.25rem)/1.2 Instrument,serif;padding:40px 0;border-top:1px solid var(--line)}
.launch .meta{display:block;margin-top:10px;color:var(--crimson)}
.result-foot{padding:22px 0 8px;border-top:1px solid var(--line)}
.result-foot .result-actions{margin-top:8px}

/* ---- alter egos: two responsive pages, three images per viewport ---- */
.others{padding:32px 0 24px;border-top:1px solid var(--line)}
.result .result-section-title{font:400 .875rem/1.5 Plex,monospace;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;color:var(--crimson)}
.persona-strip{position:relative;list-style:none;margin:24px 0 0;padding:6px 0;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.persona-strip::-webkit-scrollbar{display:none}
.persona-page{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,3vw,32px);scroll-snap-align:start;scroll-snap-stop:always}
.persona-card{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;text-align:center;text-decoration:none;color:var(--onyx);border-radius:var(--radius);padding:4px}
.persona-card-art{display:grid;place-items:center;width:100%;max-width:220px;aspect-ratio:1;border-radius:50%;background:var(--ground);color:var(--ink);transition:transform .35s var(--ease)}
.persona-card-art .ill{width:62%}
.persona-card:hover .persona-card-art{transform:translateY(-3px)}
.persona-card-name{font:clamp(1.05rem,3vw,2rem)/1.15 Instrument,serif;overflow-wrap:anywhere}
.persona-card-label{font:400 clamp(.55rem,1.4vw,.7rem)/1.5 Plex,monospace;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid currentColor;padding-bottom:3px}
.persona-dots{display:flex;justify-content:center;margin-top:16px}
.persona-dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--onyx);cursor:pointer;border-radius:50%}
.persona-dot span{width:8px;height:8px;border:1px solid currentColor;border-radius:50%;transition:background .2s,transform .2s}
.persona-dot[aria-current="true"] span{background:currentColor;transform:scale(1.25)}

/* ---- overflow safety ---- */
h1,h2,.choice-text,.facts dd,.runner-name,.blurb{overflow-wrap:anywhere}

/* ---- mobile ---- */
@media(max-width:640px){
  .site-header{padding:14px 20px}
  .brand-mark{width:59px;height:29px}
  .brand-word{width:55px;height:29px;margin-left:-2px}
  body.scrolled .brand-mark{width:45px;height:22px}
  body.scrolled .site-header{padding-block:9px}
  .header-right{gap:10px}
  #restart{font-size:.875rem;min-height:44px;padding-inline:12px}
  .panel{padding:84px 20px 132px}
  .panel-intro h1{font-size:clamp(3rem,13vw,4.5rem)}
  .choice{padding:12px 14px;gap:12px;font-size:1rem}
  .keycap{width:26px;height:26px}
  .hint{display:none}
  .panel-actions{margin-top:22px}
  form .panel-actions{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .deck-nav{right:14px;bottom:max(14px,env(safe-area-inset-bottom));gap:6px}
  .deck-nav button{width:40px;height:40px}
  .fields{grid-template-columns:1fr}
  .result-hero{padding:112px 20px 56px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-art{order:-1}
  .ill{width:min(58vw,240px)}
  .result h1{font-size:clamp(3rem,13vw,4.25rem)}
  .result-body{padding:44px 20px 32px}
  .blurb{font-size:1.1875rem}
  .facts{grid-template-columns:1fr;gap:18px}
  .share{grid-template-columns:1fr}
  .card-preview{width:150px}
  .runner-name{font-size:1.625rem}
  .persona-card{gap:8px}
  .persona-page{gap:10px}
  .modal{padding:26px}
  .stage-caption{left:20px;bottom:88px}
  .intro-switch{margin-top:28px}
  .intro-switch .meta{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rise{opacity:1!important;transform:none!important}
  .ill [pathLength]{stroke-dashoffset:0!important}
  .ill .fill{fill-opacity:.22!important}
}

/* Persistent restart and compact accessible close controls. */
.icon-button{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.icon-button:hover{background:var(--tint)}
.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
/* A small downward invitation, with a quiet pause between nudges. */
.panel-intro.is-active #start:not(:disabled) .btn-icon{animation:go-arrow-nudge 3.2s ease-in-out 1s infinite}
@keyframes go-arrow-nudge{0%,65%,100%{transform:translateY(0)}82%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){#start .btn-icon{animation:none!important;transform:none!important}}
.persona-open{overflow:hidden}
.persona-modal{padding:0;width:min(calc(100% - 32px),680px);max-height:calc(100dvh - 32px);overscroll-behavior:contain}
.persona-close{position:sticky;top:12px;float:right;margin:12px 12px -56px 0;z-index:2;background:var(--white);color:var(--onyx)}
.persona-modal-hero{background:var(--ground);color:var(--ink);padding:36px 32px 32px;text-align:center}
.persona-modal-hero .ill{width:180px}
.persona-modal-hero h2{font-size:clamp(2.5rem,8vw,4rem);line-height:1.05;margin-bottom:18px}
.persona-modal-hero blockquote{font:1.5rem/1.3 Instrument,serif}
.persona-modal-body{padding:28px 32px}
.persona-modal-body .facts{margin-bottom:0}
.persona-modal-classes{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.persona-modal-classes .result-section-title{font:400 .875rem/1.5 Plex,monospace;text-transform:uppercase;letter-spacing:.06em;margin:0 0 16px;color:var(--crimson)}
.persona-modal-classes .tags{margin-bottom:0}
@media(max-width:640px){.persona-modal-hero{padding:40px 24px 28px}.persona-modal-body{padding:24px}.persona-modal-body .blurb{font-size:1.0625rem}}

/* Silkscreen prints retain the approved ink/paper appearance of the source art. */
/* Darken treats the light source paper as unprinted space on the warm scan.
   Blend the hero wrapper too: its entrance animation creates a stacking context. */
.hero-art{mix-blend-mode:darken}
.ill.silkscreen{overflow:hidden;aspect-ratio:1;border-radius:0;mix-blend-mode:darken}
.runner-art,.persona-card-art{overflow:hidden}
.runner-art .silkscreen,.persona-card-art .silkscreen{width:100%;height:100%;border-radius:50%}
.persona-modal-hero{position:relative;isolation:isolate}
.persona-modal-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../assets/textures/folded-paper.jpg') center/cover;mix-blend-mode:multiply;opacity:.38}

/* Result exports live in the banner, with no on-page image preview. */
 .banner-actions{position:relative;margin-top:24px;width:fit-content;z-index:5}
#share-options{border:1px solid currentColor}
.export-dropdown{position:absolute;top:calc(100% + 10px);left:0;width:min(340px,calc(100vw - 40px));padding:22px;background:#f4f6dc;color:var(--onyx);border:1px solid rgb(22 22 22/.2);border-radius:12px;box-shadow:0 12px 40px #0002;max-height:65dvh;overflow:auto}
.export-dropdown h2{margin:0 0 18px}
.export-option + .export-option{padding-top:16px;margin-top:16px;border-top:1px solid rgb(22 22 22/.15)}
.export-option p{margin:8px 0 0;font-size:.85rem;line-height:1.5}
.export-actions{display:flex;align-items:flex-start;flex-direction:column;gap:14px}
.export-dropdown .status{font-size:.85rem}
.export-dropdown .status:empty{display:none}
.export-dropdown #export-fallback:not(:empty){margin-top:12px}
.persona-modal{inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:var(--ground);color:var(--ink)}
.persona-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 32px;background:var(--ground);border-bottom:1px solid #0002}
.persona-toolbar nav{display:flex;align-items:center;gap:16px}
.persona-close{position:static;float:none;margin:0;background:transparent;color:inherit}
.persona-modal-content{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;max-width:1240px;min-height:calc(100dvh - 77px);margin:auto;padding:32px 48px 64px}
.persona-modal-hero{padding:0;background:transparent;isolation:auto}
.persona-modal-hero::before{display:none}
.persona-modal{background-image:linear-gradient(#f4f6dccc,#f4f6dccc),url('../assets/textures/folded-paper.jpg');background-size:cover}
.persona-modal-hero .ill{width:min(100%,360px)}
.persona-modal-body{padding:0}
@media(max-width:760px){.persona-toolbar{padding:12px 16px;gap:8px}.persona-toolbar nav{gap:4px}.persona-toolbar>.meta{font-size:.7rem}.persona-modal-content{grid-template-columns:1fr;gap:32px;padding:20px 24px 48px}.persona-modal-hero .ill{width:250px}.persona-modal-body{padding:0}}

.export-dropdown h2.meta{font-size:.8rem;line-height:1.4}
.export-dropdown.opens-up{top:auto;bottom:calc(100% + 10px)}
.persona-modal[open]{animation:none;transform:none}

/* Keep browsing controls in reach while only the persona content scrolls. */
.persona-modal[open]{display:flex;flex-direction:column;overflow:hidden}
.persona-toolbar{position:relative;flex:none;padding:12px clamp(16px,3vw,40px)}
.persona-modal-content{flex:1;min-height:0;width:100%;max-width:none;overflow-y:auto;overscroll-behavior:contain;align-items:center;gap:clamp(24px,5vw,64px);padding:24px max(32px,calc((100vw - 1144px)/2)) 32px;margin:0}
.persona-modal-content>*{min-width:0}
.persona-carousel{flex:none;padding:10px 24px max(10px,env(safe-area-inset-bottom));background:var(--ground);border-top:1px solid #0002}
.persona-carousel nav{display:flex;align-items:center;justify-content:center;gap:32px}
.persona-modal-hero .ill{width:min(100%,360px,42vh)}
@media(max-width:760px){.persona-modal-content{display:block;padding:20px 24px 32px}.persona-modal-body{margin-top:32px}.persona-modal-hero .ill{width:min(70vw,280px)}.persona-modal-hero h2{font-size:clamp(2.4rem,9vw,4rem)}.persona-modal-hero blockquote{font-size:1.35rem}.persona-carousel nav{gap:40px}}
@media(min-width:761px) and (max-height:700px){.persona-modal-content{align-items:start}.persona-modal-hero .ill{width:220px}.persona-modal-hero h2{font-size:2.8rem}}

/* October 3: oval stamps, separate runner-up and an inset card viewer. */
blockquote cite{display:block;font-style:normal;margin-top:.2em}
.result-hero h1,.persona-modal-hero h2{color:var(--onyx)}
.result-hero .overline{color:var(--onyx)}
.persona-modal-hero .overline{color:var(--crimson)}
.result blockquote,.persona-modal-hero blockquote{color:var(--onyx);font-style:italic}
.result blockquote cite,.persona-modal-hero blockquote cite{color:var(--onyx);font-size:.75em;font-style:normal;margin-top:.45em}
.ill.silkscreen{aspect-ratio:5/6}
.persona-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;overflow:visible;scroll-snap-type:none}
.persona-card-art{max-width:240px;aspect-ratio:5/6;border-radius:0;background:transparent}
.persona-card-art .silkscreen{border-radius:0}
.runner-up{margin:40px 0 0;padding:32px 0;border-top:1px solid var(--line);border-bottom:0}
.runner-up>.persona-card{width:min(240px,60%);margin:20px auto 0}
.persona-modal{inset:0;margin:auto;width:min(940px,calc(100% - 40px));height:min(820px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);border:1px solid #16161633;border-radius:14px;box-shadow:0 24px 100px #0005}
.persona-modal::backdrop{background:#16161685;backdrop-filter:blur(3px)}
.persona-modal-content{padding:24px 32px 32px;gap:32px}
.persona-modal-hero .ill{width:min(100%,250px)}
.persona-modal-hero h2{font-size:clamp(2.5rem,5vw,3.5rem)}
.persona-modal-body .blurb{font-size:1.05rem}
@media(max-width:760px){.persona-modal{width:calc(100% - 28px);height:calc(100dvh - 40px);max-height:calc(100dvh - 40px)}.persona-modal-content{padding:20px}.persona-modal-hero .ill{width:190px}.persona-strip{gap:18px 6px}.persona-card{padding:0}.persona-modal-hero h2{font-size:2.8rem}}

/* Familiar app destinations and copy-link sharing, in the quiz's paper palette. */
.review-result{margin-top:20px}
.review-result:disabled{opacity:.45;cursor:not-allowed}
.share-open{overflow:hidden}
.share-panel{inset:0;margin:auto;width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;padding:32px;border:1px solid #16161633;border-radius:18px;background:#f4f6dc;color:#161616;box-shadow:0 24px 100px #0005}
.share-panel::backdrop{background:#16161685;backdrop-filter:blur(3px)}
.share-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}
.share-heading h2{font:2.6rem/1.1 Instrument,serif;margin-top:8px}
.share-heading .icon-button{flex:none;color:inherit}
.share-intro{margin-top:16px;font-size:.95rem}
.share-carousel{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.share-carousel.is-scrollable{grid-template-columns:44px minmax(0,1fr) 44px}
.share-scroll{display:none;place-items:center;width:44px;height:44px;margin-top:38px;padding:6px;border:0;background:transparent;color:var(--onyx);cursor:pointer}
.share-carousel.is-scrollable .share-scroll{display:grid}
.share-scroll svg{width:32px;height:32px;padding:7px;border:1px solid #16161655;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.share-scroll:hover svg{background:#1616160a;border-color:var(--onyx)}
.share-scroll:disabled{visibility:hidden;pointer-events:none}
.share-destinations{display:flex;min-width:0;gap:18px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scroll-padding-inline:6px;scrollbar-width:none;padding:28px 6px 24px;margin:0}
.share-destinations::-webkit-scrollbar{display:none}
.share-destination{flex:0 0 76px;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:inherit;font-size:.85rem}
.share-app{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:white;transition:transform .2s}
.share-destination:hover .share-app{transform:translateY(-3px)}
.share-app svg{width:36px;height:36px}.share-whatsapp{background:#25d366}.share-facebook{background:#1877f2}.share-x{background:#111}.share-linkedin{background:#0a66c2}.share-email{background:#161616}
.share-link-label{display:block;margin:8px 0}
.share-copy{display:flex;align-items:center;gap:12px;border:1px solid #16161640;border-radius:10px;padding:10px 12px;background:#fff5}
.share-copy input{width:100%;min-width:0;border:0;background:transparent;color:inherit;font:inherit;text-overflow:ellipsis;padding:8px 0}
.share-copy .primary{padding:10px 22px;min-height:44px;background:#161616;color:#f4f6dc;flex:none}
.share-local-note{margin-top:10px}
.share-card-actions{border-top:1px solid #16161633;margin-top:24px;padding-top:22px}
.share-card-actions h3{font:1.6rem Instrument,serif;margin:0 0 6px}
.share-card-actions .export-actions{margin:0 0 12px;flex-direction:row;flex-wrap:wrap;gap:10px}
.share-card-actions .export-actions button{min-height:44px;padding:10px 16px;font-size:.875rem;line-height:1.3}
#share-social{display:inline-flex;align-items:center;gap:8px}#share-social[hidden]{display:none}#share-social svg{width:24px;height:24px}
.share-panel .status{margin-top:16px;font-size:.9rem}.share-panel .status:empty{display:none}
@media(max-width:640px){.share-panel{padding:24px 20px}.share-heading h2{font-size:2.2rem}.share-destinations{gap:16px}.share-scroll{margin-top:34px}.share-app{width:56px;height:56px}.share-destination{flex-basis:78px}.share-copy{gap:8px}.share-copy .primary{padding:10px 16px}}

/* Traits precede the description on both result surfaces. */
.result-body > .facts,.persona-modal-body > .facts{margin:0 0 32px;border-top:0}

.share-destination:is(button){border:0;background:transparent;padding:0;font-family:inherit;cursor:pointer}
.share-destination:disabled{opacity:.5;cursor:wait}
.share-instagram{background:linear-gradient(35deg,#f9ce34,#ee2a7b,#6228d7)}
.share-tiktok{background:#111}
.result-body > .blurb + h2{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}

/* Balance the banner stamp against the title and quotation. */
.result-hero .hero-art .ill{width:min(100%,300px)}
@media(max-width:640px){.result-hero .hero-art .ill{width:min(46vw,190px)}}

/* Shared result typography across all six alter egos. */
.result-body,.persona-modal{--ink:var(--onyx);color:var(--onyx)}

/* Identical stamp size in the separate runner-up and the six-stamp grid. */
.runner-up>.persona-card{width:calc((100% - 64px)/3);max-width:240px}
@media(max-width:760px){.runner-up>.persona-card{width:calc((100% - 12px)/3)}}

/* Intro: branded two-tone display type on the result's warm paper. */
.panel.panel-intro::before{background-image:url('../assets/textures/folded-paper.jpg');opacity:.38}
.intro-heading{position:relative;width:100%}
.panel-intro .intro-go{min-width:0;width:auto;height:52px;padding:0 20px;gap:10px;background:var(--crimson);color:var(--white)}
.panel-intro .intro-go .btn-icon{width:20px;height:20px}

/* Result identity palette: Pine Blue names and symbols. */
.result-hero h1,.persona-modal-hero h2,.persona-card-name{color:var(--pine-blue)}
.share-heading h2{color:var(--crimson)}

/* Result images are prepared invisibly before the native share gesture. */
.share-destination[aria-pressed="true"] .share-app{outline:2px solid var(--onyx);outline-offset:4px}
#share-caption{display:block;width:100%;resize:vertical;padding:12px;background:#fff5;color:var(--onyx);border:1px solid #16161640;border-radius:10px;font:inherit;line-height:1.5;margin:8px 0 12px}

/* Simple result sharing: one main action, one practical fallback. */
.share-panel.share-simple{width:min(860px,calc(100% - 40px));padding:24px;border-radius:14px;background:#fff;--ink:var(--onyx);--cta:var(--crimson);--cta-text:var(--white)}
.share-simple[open]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px}
.share-simple .share-close{position:absolute;top:16px;right:16px;border:1px solid var(--line-strong);background:#fff;color:var(--onyx);z-index:1}
.share-result-banner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 20px;background:var(--share-ground);color:var(--share-ink);border-radius:var(--radius);min-width:0}
.share-result-banner .material-art{width:min(100%,200px);height:auto;display:block;margin:0 auto 20px}
.share-result-banner .meta{font-size:.7rem}
.share-result-banner h3{font:400 2.6rem/1.05 Instrument,serif;margin:12px 0 18px}
.share-result-banner:has([data-symbol="storyteller"]) h3{color:var(--crimson)}
.share-result-banner blockquote{font:italic 1.25rem/1.3 Instrument,serif;margin:0}
.share-result-banner cite{display:block;font-size:.8em;font-style:normal;margin-top:8px}
.share-options-body{min-width:0;align-self:center;padding:52px 0 28px}
.share-simple .share-heading h2{font-size:2.4rem;margin:0;color:var(--onyx)}
.share-simple .share-intro{font-size:1.0625rem;line-height:1.5;margin-top:12px}
.share-simple-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
.share-simple-actions button,.share-simple-actions a{display:flex;align-items:center;gap:10px;min-width:0;min-height:54px;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--onyx);font:600 .9375rem/1.25 Urbanist,sans-serif;text-align:left;text-decoration:none;cursor:pointer}
.share-simple-actions [hidden]{display:none}
.share-simple-actions #share-social{grid-column:1/-1}
.share-simple-actions button:hover,.share-simple-actions a:hover{background:var(--porcelain);border-color:var(--onyx)}
.share-simple-actions svg,.share-save svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.share-simple-actions svg.share-brand-icon{width:24px;height:24px;fill:currentColor;stroke:none}
.share-simple .share-save{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 0;min-height:44px;border:0;background:transparent;color:var(--onyx);font:600 .9375rem Urbanist,sans-serif;cursor:pointer}
.share-simple .share-save[hidden]{display:none}
.share-simple #social-help:not(:empty){margin-top:12px;line-height:1.5;font-size:.8125rem}
.share-simple #share-manual-copy{margin-top:20px}
.share-simple #share-message{display:block;width:100%;min-height:120px;margin-top:8px;padding:12px;resize:vertical;background:#fff;color:var(--onyx);border:1px solid var(--line-strong);border-radius:var(--radius);font:inherit;line-height:1.5}
@media(max-width:640px){
  .share-panel.share-simple{width:calc(100% - 20px);padding:12px;max-height:calc(100dvh - 32px)}
  .share-simple[open]{grid-template-columns:1fr;gap:0}
  .share-result-banner{padding:24px 20px 22px}
  .share-result-banner .material-art{width:120px;margin-bottom:8px}
  .share-result-banner h3{font-size:2.3rem;margin:8px 0 12px}
  .share-result-banner blockquote{font-size:1.1rem}
  .share-simple .share-close{position:sticky;top:4px;margin:8px 8px -52px auto;grid-column:1;justify-self:end}
  .share-options-body{padding:24px 12px 12px}
  .share-simple .share-heading h2{font-size:2rem}
  .share-simple-actions{margin-top:20px}
}
@media(max-width:360px){.share-simple-actions{grid-template-columns:1fr}}

/* Quiet symbol trial: open marks, separate labels and generous space. */
.ill.persona-glyph{aspect-ratio:1;color:var(--pine-blue)}
.result-hero .hero-art .persona-glyph{width:min(100%,280px)}
.persona-modal-hero .persona-glyph{width:220px}
.persona-card-art{aspect-ratio:1;max-width:160px;background:transparent}
.persona-card-art .persona-glyph{width:100%;height:auto}
.persona-card{gap:0}
.persona-card-name{font:400 clamp(.65rem,1.4vw,.85rem)/1.5 Plex,monospace;text-transform:uppercase;letter-spacing:.035em;overflow-wrap:normal}
.persona-strip{row-gap:32px}
@media(max-width:640px){.result-hero .hero-art{justify-items:start}.result-hero .hero-art .persona-glyph{width:180px}.persona-modal-hero .persona-glyph{width:170px}.persona-card-name{font-size:.65rem;letter-spacing:0}}