/* Held world — isolated concept overrides. The original face never transforms. */
.held-world{--bg:#090909;--fg:#f2f2ef;--rule:#292929;background:var(--bg)}
.held-world .header{background:#090909}
.held-world .hero{min-height:740px;max-height:1000px;background:#090909}
.held-world .hero:after{display:none}
.held-world .hero-content{width:54%;padding:clamp(3rem,5.4vh,5rem) 0 8rem 7.5%;max-width:none}
.held-world .hero-heading h1{font-size:clamp(4rem,6.4vw,7.8rem);line-height:1.03;letter-spacing:-.065em}
.held-world .hero-heading .eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:2rem;color:#c1c1c1;white-space:nowrap}
.held-world .hero-intro{max-width:420px;font-size:1rem;color:#bdbdbd;line-height:1.8}
.held-world .hero-note{font-size:11px;color:#a3a3a3;letter-spacing:.035em}
.held-world .hero-actions{gap:1.1rem 1.6rem}
.held-world .hero-actions .button{font-size:13px;padding:1rem 1.15rem;gap:1.6rem}
.held-world .hero-actions .text-link{font-size:13px}
.held-world .world-art{inset:0 0 65px 39%;width:auto;height:auto;opacity:1;overflow:hidden;background:none;isolation:isolate;--depth-x:0px;--depth-y:0px;--glow:0}
/* Use grayscale colours directly instead of filtering the whole animated scene.
   The portrait retains its own grayscale/contrast treatment. */
.held-world .world-art .world-code-bottom{color:#9e9e9e}
.held-world .world-art .code-fragment em{color:#d4d4d4}
.held-world .world-art .crosshair{color:#797979}
.held-world .world-art .code-cursor{background:#c2c2c2}
.held-world .world-art .orbit:before{border-top-color:#d1d1d166}
.held-world .world-art .orbit:after{background:#dadada;box-shadow:0 0 12px #d8d8d880}
.held-world.effects-running .world-art .orbit:after{box-shadow:0 0 calc(12px + var(--audio-bass)*18px) rgba(216,216,216,calc(.5 + var(--audio-voice)*.25))}
.held-world.effects-running .world-art .crosshair{text-shadow:0 0 12px rgba(216,216,216,calc(var(--audio-voice)*.45))}
.held-world .world-art:before{display:none}
.world-backdrop{position:absolute;inset:-5%;background:radial-gradient(ellipse at 61% 41%,#42424224,transparent 60%);transform:translate(calc(var(--depth-x)*-1),calc(var(--depth-y)*-1))}
.world-backdrop:after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#fff5 .65px,transparent .9px);background-size:83px 79px;opacity:.18;mask-image:radial-gradient(ellipse,#000,transparent 65%)}
.world-stage{position:absolute;width:min(100%,660px);aspect-ratio:1122 / 1402;right:3%;bottom:-6%;isolation:isolate}
.world-portrait{pointer-events:none;user-select:none;-webkit-user-drag:none;display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(.87) contrast(1.12);mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent,#000 7%,#000 79%,transparent 100%);mask-composite:intersect}
/* A shaded 3D sphere turns around its tilted north/south axis. The silhouette stays fixed. */
.world-globe{position:absolute;left:15.87%;top:46.1%;width:37.48%;aspect-ratio:1;border-radius:50%;overflow:hidden;mask-image:radial-gradient(closest-side,#000 98.5%,transparent 100%);pointer-events:none}
.world-sphere{display:block;width:100%;height:100%;opacity:0}
.world-sphere[data-ready="true"]{opacity:1}
.world-light{position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(ellipse 23% 19% at 34.5% 61%,#ececec24,transparent 76%);opacity:calc(.4 + var(--glow)*.6);transform:translate(var(--depth-x),var(--depth-y));pointer-events:none}
.world-orbits{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.world-coordinate{position:absolute;z-index:2;top:5%;right:8%;font:9px/1.9 var(--mono);color:#aaa;letter-spacing:.1em;text-align:right}
.world-coordinate span{display:block;font-size:8px;color:#787878;letter-spacing:.17em}
.world-signature{position:absolute;right:8%;bottom:5%;font:10px/1.9 var(--mono);letter-spacing:.14em;color:#c7c7c7}
.world-signature span{display:block;font-size:8px;letter-spacing:.11em;color:#999}
.world-pin{position:absolute;left:58%;top:63%;font:8px/1.8 var(--mono);letter-spacing:.13em;color:#aaa;display:flex;gap:12px;align-items:center;transform:translate(calc(var(--depth-x)*.7),calc(var(--depth-y)*.7))}
.world-pin i{width:40px;height:1px;background:linear-gradient(90deg,#ffffff88,#ffffff22);position:relative}
.world-pin i:before{content:'';position:absolute;width:3px;height:3px;left:0;top:-1px;background:#eee;border-radius:50%;box-shadow:0 0 8px #fff}
/* Original atmosphere restored around the portrait, under one motion control. */
.held-world .world-stage{z-index:1}
.world-code-field{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.held-world .world-name{z-index:0;left:0;top:18%;font-size:clamp(10rem,20vw,24rem);color:#ffffff08}
.held-world .world-halo{z-index:0;width:90%;height:auto;aspect-ratio:1;left:3%;top:8%;opacity:.6}
.held-world .world-halo.orbit-two{top:12%;left:7%;opacity:.35}
.held-world .world-code-top{left:5%;right:auto;top:8%;font-size:9px;color:#a0a0a0;max-width:none}
.held-world .world-code-top span{color:#707070;padding-right:.6rem}
.held-world .world-code-bottom{right:6%;bottom:21%;font-size:9px;opacity:.7;border-color:#ffffff40;background:none}
.held-world .world-crosshair-one{right:5%;top:25%;font-size:18px}
.held-world .world-crosshair-two{left:7%;bottom:26%;font-size:18px}
.held-world .world-art[data-motion="paused"]{--effects-play-state:paused}
.held-world .world-art[data-motion="running"]{--effects-play-state:running}
.held-world .world-light{opacity:calc(.4 + var(--glow)*.6 + var(--audio-energy,0)*.15)}
.held-world .hero-footer{color:#999;font-size:9px}
.held-world .hero-footer a{color:#ccc}
@media(min-width:1600px){.world-stage{width:740px;right:8%;bottom:-7%}.held-world .hero-content{padding-top:6rem}}
@media(min-width:681px) and (max-width:1050px){
  .held-world .hero{min-height:760px}
  .held-world .hero-content{width:58%;padding-left:6%}
  .held-world .hero-heading h1{font-size:clamp(3.5rem,7.2vw,5rem)}
  .held-world .hero-heading .eyebrow{font-size:8px;letter-spacing:.04em}
  .held-world .hero-intro{max-width:350px;font-size:15px;padding-right:1rem}
  .held-world .world-art{left:38%;bottom:90px;mask-image:linear-gradient(to right,transparent,#000 30%)}
  .world-stage{width:620px;max-width:128%;right:-13%;bottom:0}
  .world-coordinate{top:5%;right:9%}.world-signature{bottom:2%}
  .world-pin{display:none}
  .held-world .world-code-top{left:8%;top:5%;font-size:8px}
  .held-world .world-code-bottom{right:6%;bottom:17%;font-size:8px}
  .held-world .world-halo{width:110%;left:-12%;top:18%}
}
@media(max-width:680px){
  .held-world .hero{min-height:0;height:auto;max-height:none;grid-template-columns:minmax(0,1fr)}
  .held-world .hero-content{display:contents}
  .held-world .hero-heading{grid-row:1;padding:2rem 6% 0}
  .held-world .hero-heading .eyebrow{font-size:8px;white-space:normal;letter-spacing:.055em;margin-bottom:1.25rem}
  .held-world .hero-heading h1{font-size:clamp(2.9rem,12.6vw,5rem);line-height:1.02;margin-bottom:0}
  .held-world .hero-heading h1 br:nth-of-type(2){display:none}
  .held-world .hero-heading h1 em{margin-left:0}
  .held-world .world-art{grid-row:2;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.13;margin:-.2rem 0 0;overflow:hidden}
  .world-stage{width:82%;right:2%;bottom:-15%}
  .world-coordinate{top:12%;left:6%;right:auto;text-align:left;font-size:7px;max-width:90px}
  .world-coordinate span{font-size:6px;line-height:1.8;margin-top:5px}
  .world-signature{right:6%;bottom:3%;font-size:8px;letter-spacing:.07em}
  .world-signature span{font-size:6px}
  .world-pin{font-size:6px;gap:7px}.world-pin i{width:20px}
  .held-world .world-code-top{left:6%;top:32%;font-size:6px;line-height:1.8;opacity:.7}
  .held-world .world-code-top span{padding-right:.2rem}
  .held-world .world-code-top .code-cursor{width:3px;height:5px;bottom:-7px}
  .held-world .world-code-bottom{left:6%;right:auto;bottom:5%;font-size:6px;padding-left:.5rem;opacity:.65}
  .held-world .world-crosshair-one{top:14%;right:6%;font-size:12px}
  .held-world .world-crosshair-two{bottom:20%;left:7%;font-size:12px}
  .held-world .world-halo{width:90%;left:3%;top:4%;opacity:.4}
  .held-world .world-name{font-size:8rem;top:15%;left:0}
  .held-world .hero-summary{grid-row:3;padding:1rem 6% 1.75rem}
  .held-world .hero-intro{font-size:14px;line-height:1.7;max-width:none;margin:0 0 1.25rem}
  .held-world .hero-actions{gap:.6rem}
  .held-world .hero-actions .button{width:auto;flex:1;min-height:48px;padding:.8rem 1rem;gap:1rem;font-size:12px}
  .held-world .hero-actions .text-link{width:auto;font-size:12px;padding:.75rem 0;gap:.5rem}
  .held-world .hero-note{font-size:9px;letter-spacing:0;line-height:1.7}
  .held-world .hero-footer{grid-row:4;font-size:8px;margin:0 6%;gap:1rem}
}
@media(prefers-reduced-motion:reduce){.world-backdrop,.world-light,.world-pin{transform:none!important}}

@media(max-width:380px){.held-world .hero-actions .button{flex-basis:100%}.held-world .hero-actions .text-link{width:100%;justify-content:space-between}}
.held-world .hero-footer{align-items:center;padding-top:.65rem;padding-bottom:.65rem;min-height:65px}
@media(prefers-reduced-motion:reduce){.held-world .world-art *,.held-world .world-art *:before,.held-world .world-art *:after{animation-play-state:paused!important}}
@media(min-width:681px){.held-world .hero-footer{display:grid;grid-template-columns:1fr auto 1fr}}
