/* ============================================================
   Additions on top of styles.css (the original brand system).
   Same tokens, same type. Adds: the hero pieces the markup used,
   language toggle, the grimoire pages (frameworks, play), writing.
   ============================================================ */

/* ---------- language: show only the active one ---------- */
html[data-lang="en"] [lang="es"],
html[data-lang="es"] [lang="en"]{display:none!important}

.skip{position:absolute; left:-999px; top:8px; z-index:99; background:var(--red-btn); color:#fff; padding:10px 14px}
.skip:focus{left:8px}

/* ---------- nav additions ---------- */
.brand .spark svg{width:11px; height:11px; fill:var(--red); transform:translateY(-1px)}
.nav-right{display:flex; align-items:center; gap:26px}
.lang{
  font:600 .7rem/1 var(--body); letter-spacing:.16em; color:var(--on-dark-mut);
  background:transparent; border:1px solid var(--hairline-d); border-radius:100px; padding:8px 11px; cursor:pointer;
  transition:all .25s var(--ease);
}
.lang:hover{color:var(--on-dark); border-color:var(--brand-soft)}
.nav-links a[data-portal] .star{color:var(--brand-soft); font-size:.7em; margin-left:5px; vertical-align:.3em}
@media(max-width:860px){ .nav-right{gap:8px} }
@media(max-width:420px){ .brand small{display:none} }

/* ---------- HERO (the pieces index.html already used) ---------- */
.hero-bg{position:absolute; inset:-6% 0 0; will-change:transform}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%; opacity:.34; filter:saturate(.6) blur(1px)}
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--void) 3%, rgba(6,4,26,.8) 30%, rgba(18,11,56,.5) 64%, rgba(36,18,99,.42) 100%),
    linear-gradient(to right, rgba(6,4,26,.85) 0%, rgba(6,4,26,.25) 60%, transparent);
}
.hero-aurora{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.hero-aurora i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:aur 22s var(--ease) infinite alternate}
.hero-aurora i:nth-child(1){width:52vw; height:52vw; left:-12vw; bottom:-22vw; background:radial-gradient(circle, rgba(59,46,232,.9), transparent 65%)}
.hero-aurora i:nth-child(2){width:44vw; height:44vw; right:-8vw; top:-14vw; background:radial-gradient(circle, rgba(106,43,201,.85), transparent 65%); animation-duration:28s}
.hero-aurora i:nth-child(3){width:26vw; height:26vw; right:22vw; bottom:4vw; background:radial-gradient(circle, rgba(255,45,70,.42), transparent 65%); animation-duration:34s}
@keyframes aur{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(4vw,-3vw,0) scale(1.12)}}
.hero-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(167,157,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(167,157,255,.06) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%, #000 10%, transparent 70%); mask-image:radial-gradient(ellipse at 70% 40%, #000 10%, transparent 70%);
}
.hero-grid-l{display:grid; gap:clamp(40px,6vw,80px); align-items:end}
@media(min-width:900px){ .hero-grid-l{grid-template-columns:7fr 5fr} }
.hero h1 .ln{display:block}
.hero-sub{max-width:34ch}
.hero-sub span{display:block}
.hero-figure{position:relative; max-width:440px; width:100%; justify-self:end}
.hero-figure .shot{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:3px; z-index:1}
.hero-figure .shot img{width:100%; height:100%; object-fit:cover; object-position:30% 30%}
.hero-figure .shot::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(59,46,232,.22), transparent 45%, rgba(6,4,26,.55))}
.rule-frame{position:absolute; inset:18px -18px -18px 18px; border:1px solid rgba(167,157,255,.35); border-radius:3px; z-index:0}
.hero-chip{
  position:absolute; left:-14px; bottom:28px; z-index:2;
  background:var(--red-btn); color:#fff; font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:9px 14px;
}
@media(max-width:899px){
  .hero{min-height:auto}
  .hero-figure{justify-self:start; max-width:340px}
}

/* quiet strip under the hero (static, no motion) */
.facts{border-bottom:1px solid var(--hairline-d); background:var(--void)}
.facts ul{list-style:none; margin:0; padding:18px 0; display:flex; flex-wrap:wrap; gap:8px 30px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-dim)}
.facts li::before{content:"✦"; color:var(--red); margin-right:10px}

/* ---------- small additions to shared components ---------- */
.lede.light{color:var(--on-dark)}
.note{border-left:2px solid var(--red); padding:4px 0 4px 20px; color:var(--on-dark-mut); max-width:56ch}
.s-light .note{color:var(--on-light-mut)}
.tokens-row{display:flex; justify-content:center; gap:16px; margin:34px 0 0}
.tokens-row svg{width:38px; height:38px; opacity:.9}
.mosaic .m7{grid-column:span 2}
@media(min-width:820px){ .mosaic .m7{grid-column:span 6; grid-row:span 2} }

/* ---------- writing ---------- */
.posts{list-style:none; margin:0; padding:0; max-width:760px}
.posts li{border-top:1px solid var(--hairline-d); padding:26px 0}
.posts a{font-family:var(--display); font-size:1.6rem; letter-spacing:-.02em}
.posts a:hover{color:var(--brand-soft)}
.posts time{display:block; margin-top:6px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-dim)}
.posts-empty{color:var(--on-dark-dim); border-top:1px solid var(--hairline-d); padding-top:26px}
.post{max-width:700px}
.post .meta{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-dim); margin:20px 0 44px}
.post p,.post li{font-size:1.1rem; line-height:1.78; color:var(--on-dark-mut)}
.post h2{font-size:1.7rem; margin:1.8em 0 .6em}
.post blockquote{margin:1.6em 0; padding-left:20px; border-left:2px solid var(--red); font-family:var(--display); font-size:1.35rem; line-height:1.45; color:var(--on-dark)}

/* =========================================================
   GRIMOIRE PAGES (frameworks, play)
   ========================================================= */
body.grim{
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 78% 12%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 42%,rgba(167,157,255,.6),transparent 60%),
    radial-gradient(1px 1px at 28% 66%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1px 1px at 88% 78%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 88%,rgba(255,45,70,.5),transparent 60%),
    radial-gradient(1px 1px at 36% 30%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(80% 60% at 85% -10%,rgba(106,43,201,.42),transparent 70%),
    radial-gradient(70% 60% at -10% 40%,rgba(59,46,232,.30),transparent 70%),
    var(--void);
  background-attachment:fixed;
}
.grim-head{padding:clamp(56px,9vw,112px) 0 clamp(28px,4vw,48px); text-align:center}
.grim-head h1{font-style:italic; font-weight:300; margin-bottom:22px}
.grim-head p{max-width:40rem; margin-inline:auto; color:var(--on-dark-mut)}
.sigil{display:block; width:52px; height:52px; margin:0 auto 22px; color:var(--brand-soft)}

/* framework leaves */
.leaf{display:grid; gap:clamp(28px,5vw,64px); align-items:center; padding-block:clamp(48px,7vw,88px); border-top:1px solid var(--hairline-d)}
@media(min-width:900px){
  .leaf{grid-template-columns:7fr 5fr}
  .leaf:nth-of-type(even){grid-template-columns:5fr 7fr}
  .leaf:nth-of-type(even) .plate{order:2}
}
.plate{border:1px solid var(--hairline-d); border-radius:3px; padding:clamp(14px,2.5vw,28px); position:relative;
  background:linear-gradient(170deg,rgba(36,18,99,.5),rgba(11,7,38,.85))}
.plate::before,.plate::after{content:"✦"; position:absolute; font-size:.7rem; color:var(--brand-soft); opacity:.7}
.plate::before{top:8px; left:10px}.plate::after{bottom:8px; right:10px}
.plate svg{width:100%; height:auto; display:block}
.leaf .num{font-family:var(--display); font-style:italic; font-size:1.05rem; color:var(--red); display:block; margin-bottom:12px}
.leaf h2{margin-bottom:20px}
.leaf p{color:var(--on-dark-mut)}
.credit{font-size:.78rem; color:var(--on-dark-dim); border-top:1px solid var(--hairline-d); padding-top:14px; margin-top:22px}

/* svg tokens for plates and maps */
.s-line{stroke:#D6D1EE; stroke-opacity:.5; fill:none}
.s-axis{stroke:#D6D1EE; stroke-opacity:.7; fill:none}
.s-label{fill:#EDEAF7; font:600 13px var(--body); letter-spacing:.06em}
.s-note{fill:#ABA4CC; font:italic 300 13px var(--display)}
.s-title{fill:#fff; font:italic 400 18px var(--display)}

/* ---------- portal (the book closing and opening) ---------- */
.portal{position:fixed; inset:0; z-index:100; pointer-events:none; perspective:1600px}
.portal i{position:absolute; top:0; bottom:0; width:50.5%;
  background:radial-gradient(90% 70% at 50% 50%,rgba(106,43,201,.55),transparent 70%),linear-gradient(180deg,var(--deep-2),var(--ink));
  border:1px solid rgba(167,157,255,.35); transition:transform .62s cubic-bezier(.7,0,.3,1)}
.portal i::after{content:""; position:absolute; inset:18px; border:1px solid rgba(167,157,255,.25); border-radius:2px}
.portal .l{left:0; transform-origin:left center; transform:translateX(-101%)}
.portal .r{right:0; transform-origin:right center; transform:translateX(101%)}
.portal b{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; color:var(--brand-soft); opacity:0; transition:opacity .3s .25s}
.portal.closed i{transform:none}
.portal.closed b{opacity:1}
.portal.opening .l{transform:rotateY(-80deg) translateX(-30%); transition-duration:.9s}
.portal.opening .r{transform:rotateY(80deg) translateX(30%); transition-duration:.9s}
.portal.opening b{opacity:0; transition-delay:0s}

@media(prefers-reduced-motion:reduce){
  .portal{display:none}
  .hero-aurora i{animation:none}
}

/* =========================================================
   PLAY
   ========================================================= */
.play{max-width:780px; margin:0 auto; padding-bottom:clamp(56px,9vw,112px)}
.panel{border:1px solid var(--hairline-d); border-radius:3px; padding:clamp(22px,4vw,44px);
  background:linear-gradient(165deg, rgba(126,111,255,.10), rgba(126,111,255,.02))}
.panel h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:14px}
.panel p{color:var(--on-dark-mut)}
.panel .eyebrow{margin-bottom:14px}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.row.between{justify-content:space-between}
.play .btn[disabled]{opacity:.4; cursor:default}
@media(max-width:520px){ .play .row.between .btn{width:auto; flex:1} }

.tokens{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:8px 0 30px}
.tokens button{aspect-ratio:1; border-radius:50%; border:1px solid var(--hairline-d); background:rgba(126,111,255,.05); cursor:pointer; display:grid; place-items:center; padding:0; transition:all .25s var(--ease)}
.tokens button:hover{border-color:var(--brand-soft)}
.tokens button svg{width:56%; height:56%}
.tokens button[aria-pressed="true"]{border-color:var(--red); background:rgba(255,45,70,.12); box-shadow:0 0 0 3px rgba(255,45,70,.18)}
@media(max-width:480px){ .tokens{grid-template-columns:repeat(3,1fr)} }

.steps{display:flex; gap:6px; justify-content:center; margin:0 0 20px}
.steps span{width:30px; height:2px; background:var(--hairline-d)}
.steps span.on{background:var(--red)}
.map-wrap{position:relative; touch-action:none; user-select:none; -webkit-user-select:none; margin:10px 0 6px}
.map-wrap svg{width:100%; height:auto; display:block; cursor:crosshair}
.map-wrap svg:focus{outline:none}
.map-wrap svg:focus-visible{outline:2px solid var(--brand-soft); outline-offset:4px}
.readout{min-height:3.6em; text-align:center; margin:10px 0 22px}
.readout b{display:block; font-family:var(--display); font-style:italic; font-weight:400; font-size:1.5rem; line-height:1.2; color:var(--on-dark)}
.readout span{color:var(--on-dark-mut); font-size:.95rem}
.hint{text-align:center; font-size:.78rem; color:var(--on-dark-dim); margin:0 0 4px}
.small{font-size:.82rem; color:var(--on-dark-dim)}
.small a{text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.2em}

/* result card */
.rcard{border:1px solid rgba(167,157,255,.4); border-radius:3px; padding:clamp(24px,4vw,44px); position:relative; overflow:hidden;
  background:radial-gradient(90% 60% at 50% 0%,rgba(106,43,201,.4),transparent 70%),linear-gradient(180deg,var(--deep),var(--ink))}
.rcard::after{content:""; position:absolute; inset:10px; border:1px solid rgba(167,157,255,.16); border-radius:2px; pointer-events:none}
.rcard-top{text-align:center; margin-bottom:30px}
.rcard-top .avatar{width:64px; height:64px; margin:0 auto 14px}
.rcard-top .season{font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-soft); margin:0}
.rcard-top h2{font-style:italic; font-weight:300; font-size:clamp(2.2rem,6vw,3.2rem); margin:12px 0 12px}
.rcard-top p{max-width:32rem; margin:0 auto; color:var(--on-dark-mut)}
.facets{display:grid; grid-template-columns:1fr 1fr; gap:20px 30px; position:relative; z-index:1}
.facet h4{margin:0 0 6px; font-family:var(--body); font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red-soft)}
.facet p{margin:0; color:var(--on-dark); font-size:.98rem}
.facet.wide{grid-column:1/-1}
.facet.move{border-top:1px solid var(--hairline-d); padding-top:20px}
.facet.move p{font-family:var(--display); font-style:italic; font-size:1.25rem; line-height:1.45}
@media(max-width:560px){ .facets{grid-template-columns:1fr} }
.readings{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:0}
.readings li{display:flex; gap:12px; font-size:.9rem; color:var(--on-dark-mut); border-top:1px solid var(--hairline-d); padding:10px 0}
.readings li b{color:var(--on-dark); font-weight:500; min-width:9.5em}
@media(max-width:520px){ .readings li{flex-direction:column; gap:2px} }
.season-note{text-align:center; font-size:.9rem; color:var(--on-dark-dim); margin:24px auto 0; max-width:32rem}

/* mobile menu: solid panel, hidden when closed */
@media(max-width:860px){
  .nav-links{background:var(--ink); visibility:hidden; transition:transform .4s var(--ease), visibility 0s .4s}
  .nav-links.open{visibility:visible; transition:transform .4s var(--ease), visibility 0s}
}
.story-note{margin-top:30px}

/* ---------- hero v2: the portrait's navy background fills the whole hero ---------- */
.hero{background:#1A1B46}
.hero-photo{position:absolute; top:0; right:0; bottom:0; width:min(64%,980px)}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:32% 22%}
.hero-veil{
  background:
    linear-gradient(to right, #1A1B46 0%, #1A1B46 36%, rgba(26,27,70,.55) 50%, rgba(26,27,70,0) 66%),
    linear-gradient(to top, var(--void) 0%, rgba(6,4,26,.55) 16%, rgba(6,4,26,0) 38%),
    linear-gradient(to bottom, rgba(26,27,70,.75) 0%, rgba(26,27,70,0) 18%);
}
.hero-aurora i{opacity:.32}
.hero-grid{opacity:.25}
.hero-in .hero-grid-l > div{max-width:620px; position:relative; z-index:2}
@media(max-width:899px){
  .hero{min-height:auto; align-items:flex-end}
  .hero-photo{width:100%; bottom:auto; height:min(104vw,560px)}
  .hero-photo img{object-position:38% 18%}
  .hero-veil{
    background:
      linear-gradient(to top, var(--void) 0%, #1A1B46 calc(100% - min(104vw,560px) + 40px), rgba(26,27,70,.0) calc(100% - min(104vw,560px) + 220px)),
      linear-gradient(to bottom, rgba(26,27,70,.6) 0%, rgba(26,27,70,0) 14%);
  }
  .hero-in{padding-top:min(92vw,500px)}
}

/* =========================================================
   PLAY v2: map screens fit one viewport, regions light up
   ========================================================= */
.play{max-width:1060px; padding-top:clamp(20px,3vw,36px)}
.play .panel.stage:not(.stage-map){max-width:780px; margin:0 auto}
.panel p.muted{color:var(--on-dark-dim); font-size:.95rem}
.stage{animation:stageIn .45s var(--ease) both}
@keyframes stageIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.stage-map{display:grid; gap:10px 48px; grid-template-columns:1fr; grid-template-areas:"head" "map" "foot"; padding:clamp(20px,3.4vw,40px)}
.st-head{grid-area:head} .st-map{grid-area:map} .st-foot{grid-area:foot}
@media(min-width:900px){
  .stage-map{grid-template-columns:minmax(0,5fr) minmax(0,6fr); grid-template-areas:"head map" "foot map"; align-items:start}
  .st-foot{align-self:end}
  .st-map{align-self:center}
}
.st-head .steps{justify-content:flex-start; margin-bottom:18px}
.steps span{width:26px; height:3px; border-radius:2px; background:var(--hairline-d); transition:background .3s}
.steps span.done{background:rgba(255,45,70,.45)}
.steps span.on{background:var(--red)}
.st-head .eyebrow{margin-bottom:10px}
.st-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:12px}
.st-head .ask{color:var(--on-dark-mut); font-size:1.02rem; line-height:1.55; margin:0}
.st-foot .readout{text-align:left; min-height:5.4em; margin:6px 0 20px}
.st-foot .readout b{font-size:1.7rem}
.readout .ro-wait{color:var(--on-dark-dim); font-style:italic}
.readout.swap{animation:roIn .35s var(--ease)}
@keyframes roIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.credit-s{margin:18px 0 0; font-size:.75rem; color:var(--on-dark-dim)}
.hint{margin-top:8px}
.play .btn-primary[disabled]{opacity:.35; box-shadow:none; transform:none; cursor:not-allowed}
@media(max-width:899px){
  .st-head{text-align:center} .st-head .steps{justify-content:center}
  .st-foot .readout{text-align:center; min-height:4.6em}
  .st-foot .readout b{font-size:1.45rem}
  .st-head h2{font-size:1.8rem}
  .st-head .ask{font-size:.97rem}
  .credit-s{text-align:center}
}

/* the map itself */
.map-svg{width:100%; height:auto; display:block; cursor:pointer; touch-action:none; overflow:visible}
.map-attention .map-wrap{padding:20px 0 6px}
.m-region{fill-opacity:.07; transition:fill-opacity .3s var(--ease)}
.m-region.on{fill-opacity:.42}
.m-frame{fill:none; stroke:rgba(238,236,255,.28); stroke-width:1}
.m-grid{stroke:rgba(238,236,255,.18); stroke-dasharray:3 5}
.m-diag{stroke:rgba(255,45,70,.4)}
.m-base{stroke:rgba(238,236,255,.28)}
.m-curve{fill:none; stroke:var(--brand-soft); stroke-width:2.5; stroke-linecap:round}
.m-label{fill:rgba(238,236,255,.55); font:600 11px var(--body); letter-spacing:.08em; transition:fill .3s}
.m-label.on{fill:#fff}
.m-label-sm{letter-spacing:.02em; font-size:12px; text-transform:none}
.m-axis{fill:rgba(238,236,255,.42); font:italic 400 12px var(--display)}
.map-svg .m-seg{fill-opacity:.22}
.map-svg .m-seg.on{fill-opacity:.85}

/* token */
.token{transition:transform .32s cubic-bezier(.3,1.4,.5,1)}
.dragging .token{transition:none}
.tok-halo{fill:rgba(255,45,70,.22)}
.tok-ring{fill:none; stroke:rgba(255,45,70,.0); stroke-width:1.5}
.token.waiting .tok-ring{animation:ring 1.6s var(--ease) infinite}
@keyframes ring{0%{stroke:rgba(255,45,70,.8); r:14}100%{stroke:rgba(255,45,70,0); r:30}}
.map-svg:focus-visible .tok-halo{fill:rgba(167,157,255,.45)}

/* result reveal */
.rcard.reveal{animation:stageIn .6s var(--ease) both}
.rcard.reveal .rcard-top .avatar{animation:pop .7s .1s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pop{from{opacity:0; transform:scale(.4) rotate(-20deg)} to{opacity:1; transform:none}}
.rcard.reveal .facet{animation:stageIn .5s var(--ease) both; animation-delay:var(--d,0ms)}
.readings li em{font-style:normal; color:var(--on-dark)}
@media(prefers-reduced-motion:reduce){
  .stage,.readout.swap,.rcard.reveal,.rcard.reveal .facet,.rcard.reveal .avatar{animation:none}
  .token{transition:none} .token.waiting .tok-ring{animation:none}
}
.m-tick{stroke:rgba(238,236,255,.22)}
@media(max-width:899px){
  .play{padding-top:12px}
  .stage-map{padding:20px 14px 0; gap:6px}
  .m-label{font-size:15px; letter-spacing:.04em}
  .m-label-sm{font-size:16px}
  .m-axis{font-size:15px}
  .st-head .steps{margin-bottom:12px}
  .st-head .ask{margin-bottom:4px}
  .st-foot{padding:4px 0 18px}
  .map-flow .map-wrap,.map-love .map-wrap,.map-range .map-wrap,.map-pressure .map-wrap{max-width:max(240px, min(100%, calc(100svh - 450px))); margin-inline:auto}
  .st-foot .readout{min-height:3.6em; margin:0 0 12px}
  .st-foot .credit-s{margin-top:12px}
}

/* ---------- hero v3: portrait further away, floating in the navy ---------- */
.hero-photo{top:auto; bottom:0; right:4%; width:min(46vw,620px); height:auto; aspect-ratio:1/1;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 52% 50%, #000 48%, transparent 99%);
          mask-image:radial-gradient(ellipse 50% 50% at 52% 50%, #000 48%, transparent 99%)}
.hero-photo img{object-position:center}
.hero-veil{
  background:
    linear-gradient(to top, var(--void) 0%, rgba(6,4,26,.5) 12%, rgba(6,4,26,0) 30%),
    linear-gradient(to bottom, rgba(26,27,70,.6) 0%, rgba(26,27,70,0) 16%);
}
@media(min-width:900px){ .hero{min-height:clamp(600px,88vh,860px)} }
@media(max-width:899px){
  .hero-photo{top:84px; bottom:auto; left:50%; right:auto; transform:translateX(-50%); width:min(80vw,400px); height:auto}
  .hero-veil{background:linear-gradient(to top, var(--void) 0%, rgba(26,27,70,0) 40%)}
  .hero-in{padding-top:min(96vw,480px)}
}

/* ---------- floating map previews (home, Play section) ---------- */
.play-tease{overflow:hidden}
.play-tease .wrap{position:relative; z-index:2}
.mapfloats{position:absolute; inset:0; pointer-events:none}
.mf{position:absolute; width:150px; padding:10px 10px 8px; border:1px solid var(--hairline-d); border-radius:4px; pointer-events:auto;
  background:linear-gradient(165deg, rgba(36,18,99,.75), rgba(11,7,38,.85)); box-shadow:0 20px 50px -24px rgba(0,0,0,.8);
  animation:mfloat 9s var(--ease) infinite alternate; transition:border-color .3s, opacity .3s; opacity:.85}
.mf:hover{border-color:var(--brand-soft); opacity:1}
.mf svg{display:block; width:100%; height:auto}
.mf > span{display:block; margin-top:4px; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-mut); text-align:center}
.mf-1{left:5%;  top:14%; --r:-7deg; animation-delay:-1s}
.mf-2{left:12%; bottom:10%; --r:5deg; width:130px; animation-delay:-4s}
.mf-3{right:6%; top:10%; --r:6deg; animation-delay:-2s}
.mf-4{right:13%; bottom:12%; --r:-4deg; width:132px; animation-delay:-6s}
.mf-5{right:28%; top:4%; --r:3deg; width:110px; opacity:.55; animation-delay:-3s}
@keyframes mfloat{from{transform:translateY(0) rotate(var(--r))} to{transform:translateY(-16px) rotate(calc(var(--r) * -.4))}}
@media(max-width:1100px){ .mf-5{display:none} .mf{width:120px} .mf-1{left:2%} .mf-3{right:2%} .mf-2{left:4%} .mf-4{right:4%} }
@media(max-width:899px){
  .mapfloats{position:relative; inset:auto; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 auto 34px; padding:0 16px; max-width:420px}
  .mf{position:relative; inset:auto; width:calc(33% - 8px)!important; animation-duration:7s}
  .mf-4,.mf-5{display:none}
}
@media(prefers-reduced-motion:reduce){ .mf{animation:none; transform:rotate(var(--r))} }
.hero-quote{font-family:var(--display); font-size:clamp(1.25rem,2.1vw,1.55rem); line-height:1.4; letter-spacing:-.01em; max-width:30ch}
.hero-quote b{font-style:italic; font-weight:400}
/* hero v4: name on one line, a quote instead of a line about me */
.hero h1.hero-name{max-width:none; white-space:nowrap; font-size:clamp(2.7rem,6.6vw,5.6rem)}
.hero-quote{margin:30px 0 0; max-width:34ch; font-family:var(--display); font-size:clamp(1.15rem,1.9vw,1.42rem); line-height:1.45; letter-spacing:-.01em; color:var(--on-dark-mut)}
.hero-quote blockquote{margin:0}
.hero-quote b{font-weight:400; font-style:italic; color:var(--on-dark)}
.hero-quote figcaption{padding:14px 0 0; border:0; font-family:var(--body); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-dim)}
.hero-quote figcaption::before{content:""; display:inline-block; width:22px; height:1px; background:var(--red); vertical-align:middle; margin-right:10px}
.hero-quote figcaption i{text-transform:none; letter-spacing:.04em; font-family:var(--display); font-size:.95rem}
/* show the English quote in both languages */
html[data-lang="es"] .hero-quote [lang="en"]{display:block!important}
.hero-quote{font-size:clamp(1.3rem,2.2vw,1.65rem); color:var(--on-dark)}
.hero-quote b{color:#fff}
.hero-quote-2{margin:16px 0 0; font-family:var(--body); font-size:.98rem; letter-spacing:0; color:var(--on-dark-mut)}
.hero-quote-2::before{content:""; display:inline-block; width:22px; height:1px; background:var(--red); vertical-align:middle; margin-right:12px}
html[data-lang="es"] .hero-quote [lang="en"]{display:block!important}
/* hero photo: fade the sides and bottom, keep the top (UNIVERSITY) readable */
.hero-photo{
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 24%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.7) 3.5%, #000 10%, #000 72%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 24%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.7) 3.5%, #000 10%, #000 72%, transparent 100%);
  mask-composite:intersect;
}
.hero-quote-2.plain{font-family:var(--display); font-style:italic; font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--on-dark-mut); margin-top:14px}
.hero-quote-2.plain::before{display:none}
/* hero photo v5: the fade is baked into the image (soft on every side), so no CSS mask */
.hero-photo{-webkit-mask-image:none; mask-image:none; overflow:visible}
.hero-photo img{position:absolute; width:162.5%; height:162.5%; max-width:none; left:-31.25%; top:-31.25%; object-fit:fill}
/* hero photo v6: image already fades into the navy, shown at its own size */
.hero-photo img{position:static; width:100%; height:100%; left:auto; top:auto}
/* hero photo v7: oval fade baked into a larger canvas (photo + 300px navy margin) */
.hero-photo img{position:absolute; width:158.6%; height:158.6%; max-width:none; left:-29.3%; top:-29.3%; object-fit:fill}

/* ---------- frameworks v2 ---------- */
.oz-qs{display:grid; gap:8px; margin:22px 0 6px}
.oz-q{border:1px solid var(--hairline-d); border-left:3px solid var(--c); border-radius:3px; background:rgba(126,111,255,.05)}
.oz-q summary{cursor:pointer; list-style:none; padding:12px 16px; font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark)}
.oz-q summary::-webkit-details-marker{display:none}
.oz-q summary::after{content:"+"; float:right; color:var(--c); font-size:1.1rem; line-height:1}
.oz-q[open] summary::after{content:"–"}
.oz-q ul{margin:0; padding:0 18px 14px 34px; color:var(--on-dark-mut); font-size:.95rem}
.oz-q li{margin:6px 0}
.evidence{margin-top:20px; padding:16px 18px; border-radius:3px; background:rgba(59,46,232,.12); border:1px solid rgba(126,111,255,.25); font-size:.88rem; line-height:1.6; color:var(--on-dark-mut)}
.leaf p b{color:var(--on-dark); font-weight:600}