/* =========================================================
       ARCHIVE OS / RHINE LAB inspired personal portfolio
       Edit the variables below to quickly change the visual tone.
       ========================================================= */
    :root {
      --paper: #eeede6;
      --paper-2: #e5e4dc;
      --ink: #171916;
      --muted: #777a70;
      --line: rgba(23,25,22,.22);
      --line-soft: rgba(23,25,22,.10);
      --orange: #d66a35;
      --orange-bright: #f07a3c;
      --dark: #151916;
      --dark-2: #202621;
      --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      --sans: "Avenir Next", "Manrope", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
      --ease: cubic-bezier(.2,.75,.2,1);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 82px; }
    body {
      margin: 0; color: var(--ink); background: var(--paper);
      font-family: var(--sans); overflow-x: hidden; cursor: none;
    }
    body::selection { background: var(--orange); color: white; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    .mono { font-family: var(--mono); letter-spacing: .06em; }
    .tiny { font: 10px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
    .muted { color: var(--muted); }
    .orange { color: var(--orange); }
    .wrap { width: min(1240px, calc(100% - 72px)); margin-inline: auto; }
    .section { position: relative; padding: 130px 0; }
    .section-kicker { display:flex; align-items:center; gap:12px; color:var(--muted); margin-bottom:22px; }
    .section-kicker::before { content:""; width:26px; height:1px; background:var(--orange); }
    .section-title {
      position:relative; display:inline-block; margin:0; font-family:"Avenir Next","Helvetica Neue",Arial,"PingFang SC",sans-serif; font-size:clamp(38px,6vw,76px);
      line-height:.96; letter-spacing:-.055em; font-weight:700;
    }
    .section-title::before,.section-title::after {
      content:""; position:absolute; top:52%; width:0; height:1px; background:var(--orange);
      transition:width .55s var(--ease);
    }
    .section-title::before { right:calc(100% + 16px); }
    .section-title::after { left:calc(100% + 16px); }
    .section-title:hover::before,.section-title:hover::after { width:34px; }
    .section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:62px; }
    .section-head p { max-width:310px; font-size:13px; line-height:1.8; color:var(--muted); margin:0; }

    /* Layered technical background: grid, coordinates, parallax lines */
    .ambient { position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
    .ambient-grid {
      position:absolute; inset:-10%; opacity:.32;
      background-image: linear-gradient(rgba(35,40,34,.10) 1px,transparent 1px),
                        linear-gradient(90deg,rgba(35,40,34,.10) 1px,transparent 1px);
      background-size:56px 56px; transform:translate3d(var(--grid-x,0),var(--grid-y,0),0);
    }
    .ambient-glow {
      position:absolute; width:460px; height:460px; border-radius:50%;
      background:radial-gradient(circle,rgba(214,106,53,.12),rgba(214,106,53,0) 68%);
      transform:translate3d(calc(var(--mx,50vw) - 50%),calc(var(--my,50vh) - 50%),0);
      transition:transform .18s ease-out;
    }
    .ambient-lines { position:absolute; inset:0; display:flex; justify-content:space-around; opacity:.23; }
    .ambient-lines i {
      display:block; width:1px; height:130%; margin-top:-10%;
      background:linear-gradient(transparent,rgba(30,35,29,.32),transparent);
      transform:translateY(var(--wave,0px)); animation:wave 7s ease-in-out infinite alternate;
    }
    .ambient-lines i:nth-child(2n) { animation-delay:-2.4s; animation-duration:9s; }
    .ambient-lines i:nth-child(3n) { animation-delay:-4s; animation-duration:6s; }
    .cross {
      position:absolute; width:9px; height:9px; opacity:.55;
    }
    .cross::before,.cross::after { content:""; position:absolute; background:var(--orange); }
    .cross::before { width:9px; height:1px; top:4px; }
    .cross::after { height:9px; width:1px; left:4px; }
    .c1 { top:18%; left:8%; }.c2 { top:71%; left:91%; }.c3 { top:43%; left:77%; }.c4 { top:88%; left:23%; }
    @keyframes wave { from{transform:translateY(-18px)} to{transform:translateY(22px)} }

    /* Custom reticle cursor (disabled on touch devices) */
    .cursor {
      position:fixed; z-index:10000; top:0; left:0; width:22px; height:22px; pointer-events:none;
      transform:translate(-50%,-50%); border:1px solid var(--orange); border-radius:50%;
      transition:width .2s,height .2s,border-radius .2s,background .2s;
      mix-blend-mode:multiply;
    }
    .cursor::before,.cursor::after { content:""; position:absolute; background:var(--orange); }
    .cursor::before { width:30px; height:1px; left:-5px; top:10px; }
    .cursor::after { height:30px; width:1px; top:-5px; left:10px; }
    .cursor-dot { position:fixed; z-index:10001; width:3px; height:3px; background:var(--orange); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); }
    .cursor.lock { width:38px; height:38px; border-radius:4px; background:rgba(214,106,53,.08); }
    .cursor.lock::before { width:48px; left:-6px; }.cursor.lock::after { height:48px; top:-6px; }

    /* Intro / launch sequence */
    .intro {
      position:fixed; inset:0; z-index:9990; display:grid; place-items:center; color:#eee;
      background:#101512; overflow:hidden; animation:introAway 1s 3.35s var(--ease) forwards;
    }
    .intro-stars { position:absolute; inset:0; opacity:.8; background-image:radial-gradient(#e6e8df 1px,transparent 1px); background-size:83px 83px; }
    .intro-stars::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%,transparent 5%,#101512 76%); }
    .launch-grid { position:absolute; inset:0; opacity:.18; background:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size:60px 60px; }
    .launch-path { position:absolute; width:120vw; height:1px; background:linear-gradient(90deg,transparent,var(--orange),#fff,transparent); transform:rotate(-32deg); left:-10%; top:67%; animation:pathIn 1.4s .45s ease-out both; }
    .rocket {
      position:absolute; width:130px; height:42px; left:8%; bottom:18%; transform:rotate(-32deg);
      animation:rocketFlight 2.2s .65s cubic-bezier(.3,.7,.2,1) forwards;
    }
    .rocket svg { width:100%; height:100%; overflow:visible; }
    .intro-copy { position:relative; text-align:center; animation:copyIn .8s .35s both; }
    .intro-copy .brand { font:11px var(--mono); letter-spacing:.35em; color:#b9bdb4; }
    .intro-copy strong { display:block; margin:18px 0 12px; font-size:clamp(38px,8vw,88px); letter-spacing:.12em; font-weight:400; }
    .intro-copy small { font:10px var(--mono); color:var(--orange-bright); letter-spacing:.2em; }
    .intro-progress { width:170px; height:1px; background:#414840; margin:28px auto 0; overflow:hidden; }
    .intro-progress::after { content:""; display:block; width:100%; height:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; animation:progress 2.5s .5s forwards; }
    @keyframes copyIn { from{opacity:0;transform:translateY(18px);filter:blur(8px)} to{opacity:1;transform:none;filter:none} }
    @keyframes progress { to{transform:scaleX(1)} }
    @keyframes pathIn { from{opacity:0;transform:translate(-20%,-30%) rotate(-32deg)} to{opacity:1;transform:translate(0,0) rotate(-32deg)} }
    @keyframes rocketFlight { 0%{left:8%;bottom:18%;opacity:0} 12%{opacity:1} 100%{left:112%;bottom:112%;opacity:0} }
    @keyframes introAway { to{opacity:0;visibility:hidden;transform:scale(1.025)} }

    /* Navigation */
    .topbar {
      position:fixed; z-index:100; top:0; left:0; width:100%; height:76px;
      display:flex; align-items:center; border-bottom:1px solid var(--line-soft);
      background:rgba(238,237,230,.82); backdrop-filter:blur(16px);
    }
    .nav-inner { display:flex; align-items:center; justify-content:space-between; }
    .brand-lockup { display:flex; align-items:center; gap:12px; }
    .rhine-mark { width:27px; height:27px; position:relative; border:1px solid var(--ink); transform:rotate(45deg); }
    .rhine-mark::before { content:""; position:absolute; inset:5px; border:1px solid var(--orange); }
    .rhine-mark::after { content:""; position:absolute; width:1px; height:35px; background:var(--ink); left:12px; top:-5px; }
    .brand-type { display:flex; flex-direction:column; gap:3px; }
    .brand-type strong { font:600 11px var(--mono); letter-spacing:.16em; }
    .brand-type span { font:8px var(--mono); letter-spacing:.16em; color:var(--muted); }
    .nav-links { display:flex; align-items:center; gap:34px; }
    .nav-links a { position:relative; font:10px var(--mono); letter-spacing:.12em; color:#55594f; transition:color .2s; }
    .nav-links a::after { content:""; position:absolute; left:0; bottom:-8px; width:0; height:1px; background:var(--orange); transition:width .3s; }
    .nav-links a:hover { color:var(--orange); }.nav-links a:hover::after { width:100%; }
    .nav-status { display:flex; align-items:center; gap:8px; color:var(--muted); font:9px var(--mono); }
    .status-dot { width:6px; height:6px; border-radius:50%; background:#8b9d75; box-shadow:0 0 0 4px rgba(139,157,117,.12); }
    .menu-toggle { display:none; border:1px solid var(--line); background:transparent; padding:9px; color:var(--ink); }

    /* Hero */
    .hero { min-height:100svh; display:flex; align-items:center; padding:130px 0 70px; position:relative; }
    .hero-layout { display:grid; grid-template-columns:1fr 240px; gap:40px; align-items:end; }
    .hero-overline { display:flex; align-items:center; gap:14px; margin-bottom:24px; color:var(--muted); }
    .hero-overline .tag { padding:6px 9px; border:1px solid var(--line); color:var(--orange); }
    .hero h1 { font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif; font-size:clamp(84px,17.4vw,228px); letter-spacing:-.095em; line-height:.75; font-weight:700; margin:0 0 38px -12px; }
    .hero h1 span { display:inline-block; animation:letterIn .85s var(--ease) both; }
    .hero h1 span:nth-child(2){animation-delay:.08s}.hero h1 span:nth-child(3){animation-delay:.16s}.hero h1 span:nth-child(4){animation-delay:.24s}.hero h1 span:nth-child(5){animation-delay:.32s}
    @keyframes letterIn { from{opacity:0;transform:translateY(48px);filter:blur(12px)} to{opacity:1;transform:none;filter:blur(0)} }
    .hero-bottom { display:flex; align-items:flex-start; gap:44px; }
    .hero-welcome { font-size:14px; line-height:1.8; max-width:280px; }
    .hero-welcome b { font-weight:600; }
    .hero-coordinates { padding-top:4px; color:var(--muted); font:10px/1.9 var(--mono); }
    .hero-side { border-left:1px solid var(--line); padding-left:22px; padding-bottom:8px; }
    .radar { width:158px; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; position:relative; margin:0 auto 24px; overflow:hidden; background:repeating-radial-gradient(circle,transparent 0 24px,rgba(23,25,22,.12) 25px 26px); }
    .radar::before { content:""; position:absolute; inset:0; background:conic-gradient(from 0deg,transparent 0 75%,rgba(214,106,53,.3)); border-radius:50%; animation:radarSpin 5s linear infinite; }
    .radar::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--orange); top:34%; left:63%; box-shadow:0 0 0 5px rgba(214,106,53,.12),0 0 16px var(--orange); }
    .radar-cross { position:absolute; inset:50% 0 auto; height:1px; background:var(--line); }.radar-cross.v { transform:rotate(90deg); }
    @keyframes radarSpin { to{transform:rotate(360deg)} }
    .side-readout { display:flex; justify-content:space-between; border-top:1px solid var(--line-soft); padding:9px 0; font:9px var(--mono); color:var(--muted); }
    .side-readout b { color:var(--ink); font-weight:500; }
    .scroll-cue { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; color:var(--muted); }
    .scroll-cue i { width:44px; height:1px; background:var(--orange); position:relative; overflow:hidden; }
    .scroll-cue i::after { content:""; position:absolute; inset:0; background:var(--ink); animation:scan 1.8s infinite; }
    @keyframes scan { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

    /* About */
    .about { background:rgba(229,228,220,.58); border-block:1px solid var(--line-soft); }
    .about-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:12%; align-items:center; }
    .about-copy { max-width:640px; }
    .about-copy .lead { font-size:clamp(22px,3vw,34px); line-height:1.5; letter-spacing:-.035em; margin:0 0 26px; }
    .about-copy p:not(.lead) { max-width:520px; font-size:13px; line-height:2; color:var(--muted); }
    .about-stamp { display:inline-flex; align-items:center; gap:10px; margin-top:24px; border:1px solid var(--line); padding:10px 13px; font:9px var(--mono); letter-spacing:.1em; }
    .about-stamp::before { content:""; width:6px; height:6px; background:var(--orange); }
    .data-panel { border:1px solid var(--line); padding:22px; position:relative; background:rgba(238,237,230,.62); }
    .data-panel::before { content:""; position:absolute; width:32px; height:3px; top:-2px; left:22px; background:var(--orange); }
    .panel-head { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:8px; }
    .data-row { display:grid; grid-template-columns:92px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:11px; }
    .data-row:last-child { border:0; }.data-row span:first-child { color:var(--muted); font:9px var(--mono); letter-spacing:.1em; }.data-row b { font-weight:500; }

    /* Audio terminal */
    .audio-section { background:var(--dark); color:#e7e8df; overflow:hidden; }
    .audio-section::before { content:""; position:absolute; inset:0; opacity:.13; background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:50px 50px; mask-image:linear-gradient(90deg,black,transparent 85%); }
    .audio-section .section-kicker { color:#9da49a; }.audio-section .section-title { color:#f0f0e9; }
    .audio-section .section-head p { color:#9da49a; }
    .audio-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:10%; align-items:center; position:relative; }
    .turntable-wrap { position:relative; width:min(100%,390px); margin:auto; aspect-ratio:1; display:grid; place-items:center; }
    .turntable-frame { position:absolute; inset:4%; border:1px solid rgba(255,255,255,.22); border-radius:50%; }
    .turntable-frame::before,.turntable-frame::after { content:""; position:absolute; inset:12%; border:1px dashed rgba(255,255,255,.18); border-radius:50%; }
    .vinyl { width:76%; aspect-ratio:1; border-radius:50%; position:relative; background:repeating-radial-gradient(circle,#161a17 0 2px,#252a25 3px 4px,#101411 5px 6px); box-shadow:0 16px 50px rgba(0,0,0,.5); animation:vinylSpin 4s linear infinite; animation-play-state:paused; }
    .vinyl.playing { animation-play-state:running; }
    .vinyl::before { content:""; position:absolute; inset:37%; border-radius:50%; background:var(--orange); border:5px solid #252923; box-shadow:0 0 0 1px rgba(255,255,255,.3); }
    .vinyl::after { content:""; position:absolute; inset:48%; border-radius:50%; background:#e7e8df; }
    @keyframes vinylSpin { to{transform:rotate(360deg)} }
    .tonearm { position:absolute; z-index:2; width:43%; height:5px; background:linear-gradient(#d5d5ca,#777d72); top:18%; right:10%; transform-origin:92% 50%; transform:rotate(-28deg); transition:transform .65s var(--ease); border-radius:5px; }
    .tonearm::before { content:""; position:absolute; right:-8px; top:-7px; width:20px; height:18px; border:2px solid #c5c9bd; border-radius:3px; background:#42483f; }
    .tonearm::after { content:""; position:absolute; left:-9px; top:-5px; width:14px; height:14px; border:2px solid #8b9287; border-radius:50%; background:#242a24; }
    .tonearm.playing { transform:rotate(3deg); }
    .deck-label { position:absolute; left:5%; bottom:7%; font:9px var(--mono); letter-spacing:.12em; color:#9da49a; }
    .audio-info { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:18px; margin-bottom:12px; }
    .audio-info .tiny { color:#9da49a; }.track-now { font-size:clamp(24px,3vw,38px); letter-spacing:-.04em; margin:12px 0 4px; }
    .track-artist { font:10px var(--mono); color:#9da49a; letter-spacing:.1em; }
    .track-list { margin:28px 0 20px; }
    .track { display:grid; grid-template-columns:35px 1fr auto; gap:12px; align-items:center; width:100%; text-align:left; border:0; border-bottom:1px solid rgba(255,255,255,.12); padding:14px 4px; background:transparent; color:#dfe2d8; cursor:none; transition:padding .25s,color .25s; }
    .track:hover,.track.active { color:var(--orange-bright); padding-left:12px; }
    .track .num { font:9px var(--mono); color:#737c70; }.track strong { font-size:12px; font-weight:500; }.track small { display:block; margin-top:5px; font:9px var(--mono); color:#899187; }.track time { font:9px var(--mono); color:#899187; }
    .player-controls { display:flex; align-items:center; gap:20px; }
    .play-btn { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--orange); border-radius:50%; color:var(--orange-bright); background:transparent; cursor:none; transition:.2s; }
    .play-btn:hover { background:var(--orange); color:white; }
    .play-btn svg { width:13px; height:13px; fill:currentColor; }
    .volume-line { height:1px; flex:1; background:rgba(255,255,255,.2); position:relative; }
    .volume-line::after { content:""; position:absolute; left:0; width:35%; height:1px; background:var(--orange); }
    .audio-note { font:9px var(--mono); color:#818a7f; }
    .waveform { height:70px; display:flex; align-items:center; justify-content:center; gap:4px; margin-top:52px; opacity:.75; }
    .waveform i { display:block; width:2px; height:var(--h); background:linear-gradient(var(--orange),#7d8b78); transform:scaleY(.16); transform-origin:center; }
    .waveform.active i { animation:equalize .65s ease-in-out infinite alternate; animation-delay:var(--d); }
    @keyframes equalize { from{transform:scaleY(.12)} to{transform:scaleY(1)} }

    /* Works */
    .works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .work-card { display:block; border:1px solid var(--line); background:rgba(255,255,255,.16); transition:transform .45s var(--ease),box-shadow .45s,border-color .3s; }
    .work-card:hover { transform:translateY(-8px); border-color:var(--orange); box-shadow:0 18px 35px rgba(25,29,23,.08); }
    .work-image { aspect-ratio:1.28; background:#d9d8cf; position:relative; overflow:hidden; display:grid; place-items:center; }
    .work-image::before { content:""; position:absolute; inset:0; opacity:.55; background:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.45) 49%,transparent 50%),linear-gradient(45deg,transparent 48%,rgba(23,25,22,.12) 49%,transparent 50%); background-size:44px 44px; }
    .work-image .placeholder { position:relative; display:grid; place-items:center; width:76%; height:72%; border:1px solid rgba(23,25,22,.38); color:rgba(23,25,22,.6); font:10px var(--mono); letter-spacing:.15em; }
    .work-image .placeholder::before { content:""; position:absolute; width:40%; height:40%; border:1px solid var(--orange); transform:rotate(45deg); }
    .work-image .placeholder span { position:absolute; bottom:10px; right:10px; font-size:8px; }
    .work-card:nth-child(2) .work-image { background:#c9c9bf; }.work-card:nth-child(2) .placeholder::before { width:55%; height:55%; border-radius:50%; transform:none; }
    .work-card:nth-child(3) .work-image { background:#d8d2c8; }.work-card:nth-child(3) .placeholder::before { width:55%; height:1px; border:0; background:var(--orange); transform:rotate(-35deg); box-shadow:0 14px 0 var(--orange),0 -14px 0 var(--orange); }
    .work-card:nth-child(4) .work-image { background:#d1d5cd; }.work-card:nth-child(5) .work-image { background:#dedbd1; }.work-card:nth-child(6) .work-image { background:#c9cec7; }
    .work-meta { padding:18px 18px 20px; }
    .work-meta-top { display:flex; justify-content:space-between; color:var(--muted); font:9px var(--mono); }
    .work-meta h3 { font-size:17px; letter-spacing:-.03em; font-weight:550; margin:18px 0 8px; }
    .work-meta p { color:var(--muted); font-size:11px; line-height:1.7; margin:0; }

    /* Skills and log */
    .skills-section { background:rgba(229,228,220,.58); border-block:1px solid var(--line-soft); }
    .skills-grid { display:grid; grid-template-columns:1fr 1fr; gap:12%; }
    .skill { margin-bottom:26px; }
    .skill-top { display:flex; justify-content:space-between; font:10px var(--mono); margin-bottom:10px; }
    .skill-top span:last-child { color:var(--muted); }
    .skill-bar { height:2px; background:rgba(23,25,22,.14); position:relative; }
    .skill-bar i { display:block; width:var(--level); height:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease); }
    .in-view .skill-bar i { transform:scaleX(1); }
    .timeline { border-left:1px solid var(--line); padding-left:26px; }
    .log-entry { position:relative; padding:0 0 34px; }
    .log-entry::before { content:""; position:absolute; left:-31px; top:3px; width:9px; height:9px; background:var(--paper); border:1px solid var(--orange); border-radius:50%; }
    .log-entry time { font:9px var(--mono); color:var(--orange); letter-spacing:.12em; }
    .log-entry h3 { font-size:15px; font-weight:550; margin:9px 0 7px; }
    .log-entry p { font-size:11px; line-height:1.8; color:var(--muted); margin:0; }

    /* Contact / footer */
    .contact { background:var(--dark); color:#e7e8df; padding:112px 0 34px; overflow:hidden; }
    .contact::before { content:""; position:absolute; width:600px; height:600px; border:1px solid rgba(255,255,255,.1); border-radius:50%; right:-130px; top:-240px; box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.02); }
    .contact .section-kicker { color:#929b90; }.contact .section-title { color:#f0f0e9; font-size:clamp(48px,9vw,112px); }
    .contact-lead { font-size:14px; color:#aeb5a9; line-height:1.9; max-width:380px; margin:30px 0 38px; }
    .contact-link { display:inline-flex; align-items:center; gap:18px; border-bottom:1px solid var(--orange); padding:0 0 12px; font-size:17px; transition:gap .25s; }
    .contact-link:hover { gap:28px; color:var(--orange-bright); }
    .contact-link span { color:var(--orange); font-size:22px; }
    .contact-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.18); margin-top:110px; padding-top:22px; color:#818b80; font:9px var(--mono); letter-spacing:.1em; }
    .contact-bottom a { color:#c1c7bb; }.contact-bottom a:hover { color:var(--orange-bright); }

    /* Scroll reveal */
    .reveal { opacity:0; transform:translateY(28px); filter:blur(5px); transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease); }
    .reveal.visible { opacity:1; transform:none; filter:blur(0); }
    .delay-1 { transition-delay:.12s; }.delay-2 { transition-delay:.22s; }.delay-3 { transition-delay:.32s; }


    /* Rising archive files: layered vertical document stacks */
    .archive-field {
      position:absolute; inset:0; overflow:hidden; opacity:.52;
      perspective:900px; transform:translateZ(0);
    }
    .archive-rail {
      position:absolute; top:110%; display:flex; flex-direction:column; gap:18px;
      width:clamp(86px,10vw,142px); transform-style:preserve-3d;
      animation:archiveRise 34s linear infinite;
    }
    .rail-a { left:7.5%; animation-duration:38s; }
    .rail-b { right:9%; animation-duration:46s; animation-delay:-19s; }
    .archive-sheet {
      position:relative; height:156px; padding:13px 12px;
      border:1px solid rgba(30,35,29,.22);
      background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(210,211,199,.08));
      box-shadow:8px 9px 0 rgba(25,30,25,.035);
      color:rgba(27,32,27,.52); backdrop-filter:blur(2px);
      transform:rotateY(-13deg) rotateX(3deg);
    }
    .rail-b .archive-sheet { transform:rotateY(13deg) rotateX(-2deg); }
    .archive-sheet::before {
      content:""; position:absolute; top:0; left:12px; width:22px; height:2px; background:var(--orange);
    }
    .archive-sheet::after {
      content:""; position:absolute; right:11px; top:12px; width:6px; height:6px;
      border:1px solid var(--orange); border-radius:50%;
    }
    .archive-sheet b { display:block; font:8px var(--mono); letter-spacing:.12em; color:rgba(214,106,53,.8); }
    .archive-sheet span { display:block; margin-top:25px; font:600 clamp(10px,1.1vw,14px)/1.25 var(--mono); letter-spacing:.08em; }
    .archive-sheet i { display:block; height:1px; margin-top:16px; width:78%; background:rgba(23,25,22,.24); }
    .archive-sheet small { display:block; margin-top:12px; font:7px var(--mono); letter-spacing:.12em; }
    @keyframes archiveRise {
      0% { transform:translateY(0) translateZ(-30px); }
      100% { transform:translateY(-175vh) translateZ(30px); }
    }
    .archive-orbit {
      position:absolute; width:44vw; height:44vw; max-width:620px; max-height:620px;
      border:1px solid rgba(214,106,53,.15); border-radius:50%;
      left:50%; top:52%; transform:translate(-50%,-50%) rotate(-22deg);
      animation:orbitDrift 42s linear infinite;
    }
    .archive-orbit::before,.archive-orbit::after {
      content:""; position:absolute; width:5px; height:5px; border-radius:50%;
      background:var(--orange); box-shadow:0 0 12px rgba(214,106,53,.6);
    }
    .archive-orbit::before { top:14%; left:17%; }
    .archive-orbit::after { right:8%; bottom:28%; width:3px; height:3px; }
    .orbit-two { width:58vw; height:58vw; border-style:dashed; opacity:.55; animation-duration:68s; animation-direction:reverse; }
    @keyframes orbitDrift { to { transform:translate(-50%,-50%) rotate(338deg); } }
    .archive-scan {
      position:absolute; left:-20%; top:30%; width:140%; height:1px;
      background:linear-gradient(90deg,transparent,rgba(214,106,53,.3),rgba(23,25,22,.16),transparent);
      transform:rotate(-18deg); animation:scanSweep 12s ease-in-out infinite;
    }
    @keyframes scanSweep {
      0%,100% { translate:0 -18vh; opacity:0; }
      20%,75% { opacity:.8; }
      50% { translate:0 55vh; opacity:.35; }
    }
    .ambient-lines i { position:relative; opacity:.75; }
    .ambient-lines i::after {
      content:""; position:absolute; top:18%; left:-2px; width:4px; height:4px;
      border:1px solid rgba(214,106,53,.65); border-radius:50%;
      box-shadow:0 0 10px rgba(214,106,53,.22);
      animation:lineBeacon 4s ease-in-out infinite alternate;
    }
    .ambient-lines i:nth-child(3n)::after { animation-delay:-2s; top:62%; }
    @keyframes lineBeacon { from{transform:translateY(-14px);opacity:.25} to{transform:translateY(34px);opacity:1} }

    /* More deliberate type rhythm and optical spacing */
    h1,h2,h3,.brand-type strong { text-rendering:optimizeLegibility; }
    .hero h1 { font-kerning:normal; }
    .hero-welcome { letter-spacing:.012em; }
    .section-kicker { letter-spacing:.16em; }
    .work-meta h3 { letter-spacing:-.025em; }
    .data-row b { letter-spacing:.015em; }

    /* Subtle interface sound toggle */
    .sound-toggle {
      position:fixed; z-index:120; right:24px; bottom:22px; display:flex; align-items:center; gap:9px;
      padding:9px 12px; border:1px solid rgba(23,25,22,.24); background:rgba(238,237,230,.78);
      color:var(--muted); backdrop-filter:blur(10px); font:8px var(--mono); letter-spacing:.12em;
      cursor:none; transition:border-color .2s,color .2s,background .2s;
    }
    .sound-toggle:hover,.sound-toggle.enabled { border-color:var(--orange); color:var(--orange); }
    .sound-indicator { display:flex; align-items:center; gap:2px; height:10px; }
    .sound-indicator i { display:block; width:2px; height:4px; background:currentColor; }
    .sound-toggle.enabled .sound-indicator i:nth-child(1) { animation:soundBars .55s infinite alternate; }
    .sound-toggle.enabled .sound-indicator i:nth-child(2) { animation:soundBars .7s -.2s infinite alternate; }
    .sound-toggle.enabled .sound-indicator i:nth-child(3) { animation:soundBars .48s -.1s infinite alternate; }
    @keyframes soundBars { to { height:10px; } }
    @media(max-width:680px) {
      .archive-rail { opacity:.48; width:78px; }
      .rail-a { left:2%; }.rail-b { right:2%; }
      .archive-sheet { height:118px; padding:10px; }
      .archive-sheet span { margin-top:18px; }
      .archive-orbit { width:78vw; height:78vw; }
      .orbit-two { width:100vw; height:100vw; }
      .sound-toggle { right:12px; bottom:12px; cursor:pointer; }
    }
    @media(prefers-reduced-motion:reduce) {
      .archive-rail,.archive-orbit,.archive-scan,.ambient-lines i::after { animation:none!important; }
    }

    @media (max-width:900px) {
      .hero-layout { grid-template-columns:1fr 190px; }
      .about-grid,.audio-grid,.skills-grid { gap:7%; }
      .works-grid { grid-template-columns:repeat(2,1fr); }
      .nav-links { gap:18px; }
    }
    @media (max-width:680px) {
      body { cursor:auto; }
      .cursor,.cursor-dot { display:none; }
      .wrap { width:calc(100% - 38px); }
      .section { padding:88px 0; }
      .topbar { height:66px; }
      .menu-toggle { display:block; cursor:pointer; }
      .nav-status { display:none; }
      .nav-links {
        display:none; position:absolute; top:65px; left:0; width:100%; padding:22px 20px 26px;
        background:rgba(238,237,230,.97); border-bottom:1px solid var(--line);
        flex-direction:column; align-items:flex-start; gap:22px;
      }
      .nav-links.open { display:flex; }
      .nav-links a { font-size:11px; }
      .hero { min-height:88svh; padding-top:120px; }
      .hero-layout { display:block; }
      .hero h1 { font-size:clamp(76px,20vw,138px); margin-left:-5px; }
      .hero-bottom { flex-direction:column; gap:15px; }
      .hero-side { display:none; }
      .hero-overline { font-size:9px; }
      .scroll-cue { bottom:20px; }
      .section-head { display:block; margin-bottom:40px; }
      .section-head p { margin-top:20px; }
      .about-grid,.audio-grid,.skills-grid { grid-template-columns:1fr; gap:50px; }
      .data-panel { max-width:100%; }
      .turntable-wrap { width:min(84vw,340px); }
      .audio-grid { gap:42px; }
      .audio-note { display:none; }
      .waveform { margin-top:32px; }
      .works-grid { grid-template-columns:1fr; gap:14px; }
      .work-image { aspect-ratio:1.5; }
      .contact { padding-top:86px; }
      .contact-bottom { margin-top:75px; flex-direction:column; }
      .ambient-grid { background-size:38px 38px; }
      .ambient-lines { opacity:.13; }
      .section-title:hover::before,.section-title:hover::after { width:0; }
    }
    @media (prefers-reduced-motion:reduce) {
      *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
    }

    /* =========================================================
       PROTOTYPE 03 — ARCHIVE SPACE
       A quiet 3D file architecture with precise editorial UI.
       ========================================================= */
    .intro {
      color:var(--ink); background:#e9e7df; isolation:isolate;
      animation:bootExit .85s 4.05s cubic-bezier(.7,0,.2,1) forwards;
    }
    .intro::before {
      content:""; position:absolute; inset:0; z-index:-2; opacity:.34;
      background:linear-gradient(rgba(40,42,36,.07) 1px,transparent 1px),
                 linear-gradient(90deg,rgba(40,42,36,.07) 1px,transparent 1px);
      background-size:54px 54px;
      mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);
    }
    .intro::after {
      content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
      background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.8),transparent 52%),
                 linear-gradient(120deg,rgba(255,255,255,.32),transparent 45%,rgba(180,174,160,.16));
    }
    .boot-grid { position:absolute; width:62vw; height:62vw; max-width:780px; max-height:780px;
      border:1px solid rgba(30,33,29,.12); border-radius:50%; left:50%; top:50%;
      transform:translate(-50%,-50%); animation:bootRotate 24s linear infinite; }
    .boot-grid::before,.boot-grid::after { content:""; position:absolute; inset:9%; border:1px dashed rgba(30,33,29,.13); border-radius:50%; }
    .boot-grid::after { inset:22%; border-style:solid; border-color:rgba(214,106,53,.2); }
    .boot-orbit { position:absolute; width:8px; height:8px; border:1px solid var(--orange); border-radius:50%;
      left:50%; top:50%; opacity:0; animation:bootNode 2.7s .5s ease-out forwards; }
    .orbit-a { transform:translate(-50%,-50%) translateX(-190px); }
    .orbit-b { transform:translate(-50%,-50%) translateX(190px); animation-delay:.85s; }
    .boot-corner,.boot-bottom-line { position:absolute; font:9px var(--mono); letter-spacing:.12em; color:#77786f; }
    .boot-tl { top:34px; left:42px; }.boot-tr { top:34px; right:42px; }
    .boot-bl { bottom:34px; left:42px; }.boot-tr i { display:inline-block; width:5px; height:5px; margin-left:8px; border-radius:50%; background:#8a9b79; }
    .boot-skip { position:absolute; right:40px; bottom:74px; border:1px solid rgba(23,25,22,.25); padding:9px 12px;
      color:var(--ink); background:transparent; font:9px var(--mono); letter-spacing:.1em; cursor:pointer; transition:.25s; }
    .boot-skip:hover { border-color:var(--orange); color:var(--orange); }
    .boot-center { position:relative; width:min(520px,86vw); text-align:center; margin-top:-12px; }
    .boot-emblem { position:relative; width:58px; height:58px; margin:0 auto 25px; opacity:0; animation:emblemReveal .8s .25s forwards; }
    .emblem-ring { position:absolute; inset:3px; border:1px solid rgba(23,25,22,.7); border-radius:50%; }
    .ring-inner { inset:12px; border-color:var(--orange); transform:rotate(45deg); border-radius:2px; }
    .emblem-core { position:absolute; width:5px; height:5px; background:var(--orange); left:26px; top:26px; }
    .emblem-cross { position:absolute; left:28px; top:-5px; height:68px; width:1px; background:rgba(23,25,22,.3); transform:rotate(45deg); }
    .boot-brand { font:9px var(--mono); letter-spacing:.28em; color:#77786f; opacity:0; animation:riseIn .55s .55s forwards; }
    .boot-brand span { color:var(--orange); padding:0 7px; }
    .boot-title { margin:13px 0 18px; font:500 clamp(34px,6vw,62px)/1 var(--sans); letter-spacing:-.055em; opacity:0; animation:riseIn .65s .75s forwards; }
    .boot-title b { font-weight:800; }.boot-title i { color:var(--orange); font-style:normal; animation:blink .8s steps(2) infinite; }
    .boot-terminal { height:20px; font:10px var(--mono); letter-spacing:.11em; color:#55584f; }
    .terminal-prompt { color:var(--orange); margin-right:9px; }.terminal-caret { color:var(--orange); animation:blink .7s steps(2) infinite; }
    .boot-progress { height:2px; width:min(280px,68vw); background:rgba(23,25,22,.12); margin:24px auto 12px; overflow:hidden; }
    .boot-progress i { display:block; width:100%; height:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; }
    .boot-foot { display:flex; justify-content:space-between; font:8px var(--mono); letter-spacing:.12em; color:#88887f; }
    .boot-bottom-line { left:42px; right:42px; bottom:35px; display:flex; justify-content:space-between; font-size:8px; }
    @keyframes bootExit { to { opacity:0; visibility:hidden; transform:scale(1.018); } }
    @keyframes bootRotate { to { transform:translate(-50%,-50%) rotate(360deg); } }
    @keyframes bootNode { 0%{opacity:0;scale:.2} 40%{opacity:1;scale:1.5} 100%{opacity:.5;scale:1} }
    @keyframes emblemReveal { from{opacity:0;transform:scale(.55) rotate(-35deg)} to{opacity:1;transform:scale(1) rotate(0)} }
    @keyframes riseIn { from{opacity:0;transform:translateY(12px);filter:blur(4px)} to{opacity:1;transform:none;filter:none} }
    @keyframes blink { 50%{opacity:0} }

    .hero { overflow:hidden; isolation:isolate; }
    .hero-spatial { position:absolute; inset:0; z-index:-1; overflow:hidden; perspective:1000px; pointer-events:none; }
    .spatial-backlight { position:absolute; inset:0; background:
      radial-gradient(ellipse at 53% 42%,rgba(255,255,255,.78),transparent 52%),
      linear-gradient(115deg,rgba(236,234,225,.3),rgba(205,201,188,.18)); }
    .spatial-floor { position:absolute; left:-15%; right:-15%; height:75%; bottom:-21%;
      transform:rotateX(61deg) rotateZ(-13deg); transform-origin:center bottom;
      background-image:linear-gradient(rgba(60,61,53,.16) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(60,61,53,.13) 1px,transparent 1px);
      background-size:48px 48px; opacity:.43;
      mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent); }
    .spatial-shelf { position:absolute; display:flex; align-items:stretch; gap:clamp(7px,1vw,16px);
      transform-style:preserve-3d; transform:rotateX(54deg) rotateZ(-19deg); transform-origin:center;
      filter:drop-shadow(0 20px 16px rgba(50,45,35,.10)); }
    .spatial-shelf i { display:block; width:clamp(35px,5.5vw,82px); height:clamp(210px,32vw,440px);
      background:linear-gradient(90deg,#c9c5ba 0%,#f7f5ee 13%,#e8e5dc 70%,#d0ccc1 100%);
      border:1px solid rgba(95,91,80,.17); box-shadow:9px 0 0 rgba(120,113,99,.07),inset 5px 0 9px rgba(255,255,255,.65);
      position:relative; transform:translateZ(var(--depth,0px)); }
    .spatial-shelf i::before { content:""; position:absolute; top:13px; left:9px; right:9px; height:1px; background:rgba(60,60,54,.2); }
    .spatial-shelf i::after { content:""; position:absolute; top:18px; right:8px; width:4px; height:4px; border-radius:50%; background:#9d9b91; }
    .shelf-one { left:-8%; top:37%; animation:shelfDrift 22s ease-in-out infinite alternate; }
    .shelf-two { left:17%; top:12%; transform:rotateX(57deg) rotateZ(-19deg) scale(.78); opacity:.58; animation:shelfDrift 28s -8s ease-in-out infinite alternate; }
    .shelf-three { right:-7%; top:28%; transform:rotateX(57deg) rotateZ(-19deg) scale(.9); opacity:.7; animation:shelfDrift 25s -4s ease-in-out infinite alternate; }
    .shelf-one i:nth-child(2n) { height:clamp(170px,25vw,350px); }
    .shelf-two i { height:clamp(190px,29vw,390px); }
    .shelf-three i:nth-child(3n) { height:clamp(160px,23vw,320px); }
    .spatial-data-line { position:absolute; height:1px; width:70vw; background:linear-gradient(90deg,transparent,rgba(214,106,53,.55),rgba(30,32,27,.18),transparent); }
    .line-one { top:29%; left:15%; transform:rotate(-18deg); animation:dataSweep 8s ease-in-out infinite; }
    .line-two { top:72%; right:-10%; transform:rotate(-18deg); animation:dataSweep 11s -4s ease-in-out infinite; }
    .spatial-coordinate { position:absolute; right:5%; top:22%; font:8px var(--mono); letter-spacing:.18em; color:rgba(35,37,32,.38); transform:rotate(-18deg); }
    @keyframes shelfDrift { from{translate:0 10px} to{translate:0 -15px} }
    @keyframes dataSweep { 0%,100%{opacity:.15;translate:-5% 0} 50%{opacity:.8;translate:8% 0} }
    .hero-layout { position:relative; z-index:2; }
    .hero h1 { text-shadow:0 2px 22px rgba(238,237,230,.55); }
    .hero-side,.hero-welcome,.hero-coordinates,.hero-overline { text-shadow:0 1px 12px rgba(238,237,230,.9); }
    .topbar { background:rgba(238,237,230,.72); }
    .archive-field { opacity:.22; }
    @media(max-width:700px) {
      .boot-corner { left:18px; right:auto; top:18px; font-size:7px; }
      .boot-tr { display:none; }.boot-bl { bottom:18px; }
      .boot-skip { right:18px; bottom:58px; }
      .boot-bottom-line { left:18px; right:18px; bottom:18px; font-size:6px; }
      .boot-center { margin-top:-8px; }
      .spatial-shelf { opacity:.55; }
      .shelf-one { left:-38%; top:42%; }.shelf-two { left:-18%; top:13%; }.shelf-three { right:-48%; top:34%; }
      .spatial-floor { bottom:-32%; }
    }
    @media(prefers-reduced-motion:reduce) {
      .intro,.boot-grid,.boot-orbit,.boot-emblem,.boot-brand,.boot-title,.spatial-shelf,.spatial-data-line { animation:none!important; }
      .boot-emblem,.boot-brand,.boot-title { opacity:1; }
    }


    /* PROTOTYPE 04 — expanded spatial wireframe and archive dossier */
    .hero-spatial { position:absolute;inset:-5%;z-index:0;overflow:hidden;pointer-events:none;perspective:1200px; }
    .space-haze { position:absolute;inset:0;background:radial-gradient(ellipse at 55% 46%,rgba(255,255,255,.72),transparent 42%),radial-gradient(ellipse at 50% 100%,rgba(199,195,181,.32),transparent 60%),linear-gradient(135deg,rgba(239,237,229,.25),rgba(221,218,207,.18)); }
    .grand-structure { position:absolute;width:125%;height:125%;left:-12%;top:-12%;overflow:visible;transform:rotate(-7deg) scale(1.02);transform-origin:50% 50%;transition:transform 1.2s cubic-bezier(.2,.75,.2,1); }
    .hero:hover .grand-structure { transform:rotate(-5deg) scale(1.07) translate3d(-.5%,.5%,0); }
    .structure-back path { stroke-dasharray:1800;animation:wireTravel 28s linear infinite; }
    .structure-back path:nth-child(even) { animation-direction:reverse;animation-duration:36s; }
    .orbit-path { stroke-dasharray:8 11;animation:orbitDash 22s linear infinite; }.orbit-second { animation-duration:29s;animation-direction:reverse;opacity:.65; }.orbit-third { animation-duration:34s;opacity:.45; }.orbit-loop { stroke-dasharray:2 8;animation-duration:42s;opacity:.7; }
    .structure-grid { opacity:.65;transform-origin:center;animation:gridBreath 16s ease-in-out infinite alternate; }
    .structure-nodes circle { filter:drop-shadow(0 0 7px rgba(214,106,53,.45));animation:nodePulse 3s ease-in-out infinite; }.structure-nodes circle:nth-child(2){animation-delay:1s}.structure-nodes circle:nth-child(3){animation-delay:2s}
    .structure-markers { opacity:.5;animation:markerSpin 24s linear infinite;transform-origin:800px 500px; }
    .space-plane { position:absolute;border:1px solid rgba(75,80,70,.13);transform:skewY(-22deg) rotate(-10deg); }
    .plane-a { width:54vw;height:17vw;left:18%;top:16%;box-shadow:0 0 0 22px rgba(255,255,255,.06),0 0 0 46px rgba(50,55,48,.025); }.plane-b { width:38vw;height:11vw;right:-5%;bottom:13%;transform:skewY(-22deg) rotate(-10deg);border-color:rgba(214,106,53,.22); }
    .space-readout,.space-coord { position:absolute;font:8px var(--mono);letter-spacing:.16em;color:rgba(37,41,34,.42); }.readout-a{left:9%;top:22%}.readout-b{right:9%;top:36%}.space-coord{right:8%;bottom:18%}
    @keyframes wireTravel{to{stroke-dashoffset:-1800}} @keyframes orbitDash{to{stroke-dashoffset:-380}} @keyframes gridBreath{to{transform:scale(1.035) translateY(-8px);opacity:.95}} @keyframes nodePulse{50%{opacity:.35;r:7}} @keyframes markerSpin{to{transform:rotate(360deg)}}
    .archive-directory { position:relative;min-height:100vh;padding:100px clamp(22px,5vw,82px) 34px;overflow:hidden;background:linear-gradient(135deg,#e9e7df 0%,#f0efe9 48%,#e3e1d8 100%); }
    .archive-directory::before { content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(rgba(45,49,42,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(45,49,42,.09) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,#000,transparent 90%); }
    .archive-directory::after { content:"";position:absolute;width:60vw;height:60vw;right:-20vw;top:4%;border:1px solid rgba(50,54,46,.12);border-radius:50%;box-shadow:0 0 0 45px rgba(50,54,46,.025),0 0 0 90px rgba(50,54,46,.02);pointer-events:none; }
    .directory-topline,.directory-footer { position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;font:8px var(--mono);letter-spacing:.14em;color:#77796f; }
    .directory-head { position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;margin:44px 0 32px; }.directory-head h2{font-size:clamp(44px,7vw,88px);letter-spacing:-.065em;line-height:.9;margin:12px 0 16px;font-weight:650}.directory-head p{color:#77796f;font-size:12px;margin:0}
    .directory-counter{display:flex;align-items:baseline;gap:8px;font:12px var(--mono);color:#85877d}.directory-counter strong{font:300 clamp(54px,8vw,100px)/.8 var(--sans);letter-spacing:-.08em;color:#252923}
    .directory-stage{position:relative;z-index:2;display:grid;grid-template-columns:minmax(190px,.28fr) 1fr;min-height:570px;border-top:1px solid rgba(34,38,32,.25);border-bottom:1px solid rgba(34,38,32,.25)}
    .directory-rail{display:flex;flex-direction:column;padding:26px 26px 20px 0;border-right:1px solid rgba(34,38,32,.18)}
    .directory-item{position:relative;text-align:left;display:grid;grid-template-columns:34px 1fr 20px;align-items:center;gap:7px;padding:22px 8px;border:0;border-bottom:1px solid rgba(34,38,32,.14);background:transparent;color:#77796f;cursor:pointer;transition:all .35s var(--ease)}
    .directory-item>span{font:11px var(--mono)}.directory-item b{font-size:11px;letter-spacing:.08em;color:#454940}.directory-item small{grid-column:2;font-size:10px;color:#888a80;margin-top:3px}.directory-item i{grid-column:3;grid-row:1/3;font-style:normal;font-size:18px;opacity:0;transform:translate(-5px,5px);transition:.3s}
    .directory-item:hover,.directory-item.is-active{padding-left:16px;color:var(--orange);background:rgba(255,255,255,.32)}.directory-item.is-active::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;background:var(--orange)}.directory-item.is-active b{color:#171916}.directory-item.is-active i,.directory-item:hover i{opacity:1;transform:none}
    .directory-rail-note{margin-top:auto;padding-top:26px;font:8px/2 var(--mono);letter-spacing:.12em;color:#92948a}
    .directory-view{position:relative;min-width:0;overflow:hidden;padding:22px clamp(16px,3vw,48px) 70px}.directory-backplate{position:absolute;inset:5% 3% 8% 5%;border:1px solid rgba(255,255,255,.65);background:linear-gradient(140deg,rgba(255,255,255,.44),rgba(255,255,255,.08));box-shadow:18px 22px 55px rgba(48,48,39,.06);transform:perspective(900px) rotateY(-3deg) rotateX(1deg)}
    .directory-panels{position:relative;height:100%;min-height:470px}.directory-panel{position:absolute;inset:0;overflow:auto;opacity:0;visibility:hidden;transform:translateX(7%) rotateY(-5deg) scale(.98);transform-origin:left center;transition:opacity .5s,transform .7s var(--ease),visibility .5s;pointer-events:none;padding:18px 14px 25px}.directory-panel.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
    .directory-panel .panel-meta{display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:.14em;color:#8a8c82;padding-bottom:16px;border-bottom:1px solid rgba(34,38,32,.15);margin-bottom:22px}
    .directory-panel .section-head{margin-bottom:30px}.directory-panel .section-title{font-size:clamp(32px,4.5vw,60px)}.directory-panel .section{padding:0}.directory-panel .wrap{width:100%;margin:0}.directory-panel .works-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.directory-panel .work-card{min-height:190px}
    .directory-panel .skills-section{padding:0}.directory-panel .skills-grid{gap:20px}.directory-panel .contact{padding:8px 0 0;background:transparent;color:var(--ink)}.directory-panel .contact .section-title{color:var(--ink)}.directory-panel .contact-lead{color:#77796f}.directory-panel .contact-link{border-color:rgba(30,34,28,.25);color:var(--ink)}.directory-panel .contact-bottom{margin-top:45px;border-color:rgba(30,34,28,.2);color:#77796f}
    .github-link{display:flex;align-items:center;gap:12px;width:max-content;margin-top:18px;padding:13px 16px;border:1px solid rgba(30,34,28,.24);font:9px var(--mono);letter-spacing:.12em;transition:.3s}.github-link svg{width:19px;height:19px}.github-link b{margin-left:28px;font-size:15px;font-weight:400}.github-link:hover{background:#242923;color:#f1f0e9;border-color:#242923;transform:translateX(5px)}
    .directory-controls{position:absolute;left:clamp(16px,3vw,48px);right:clamp(16px,3vw,48px);bottom:18px;display:flex;align-items:center;gap:16px;z-index:5}.directory-controls button{border:0;background:transparent;font-size:23px;cursor:pointer;color:#34382f;padding:3px 8px;transition:.25s}.directory-controls button:hover{color:var(--orange);transform:scale(1.2)}.directory-progress{height:1px;flex:1;background:rgba(34,38,32,.18);overflow:hidden}.directory-progress i{display:block;width:33.333%;height:100%;background:var(--orange);transition:width .5s var(--ease)}.directory-controls>span{font:7px var(--mono);letter-spacing:.1em;color:#898b80;white-space:nowrap}
    .directory-footer{margin-top:22px}.directory-footer a{color:#41463d}
    @media(max-width:900px){.directory-stage{grid-template-columns:1fr}.directory-rail{flex-direction:row;padding:0;border-right:0;border-bottom:1px solid rgba(34,38,32,.18)}.directory-item{flex:1;grid-template-columns:1fr;gap:5px;padding:13px 9px}.directory-item small{grid-column:1}.directory-item i{display:none}.directory-item.is-active::before{left:8px;right:8px;top:auto;bottom:0;width:auto;height:2px}.directory-rail-note{display:none}.directory-view{min-height:560px}}
    @media(max-width:640px){.archive-directory{padding:82px 18px 25px}.directory-topline span:nth-child(2){display:none}.directory-head{margin:32px 0 24px}.directory-head p{max-width:220px;line-height:1.6}.directory-stage{min-height:660px}.directory-view{padding:15px 10px 68px;min-height:590px}.directory-panels{min-height:490px}.directory-panel{padding:12px 5px 20px}.directory-panel .works-grid{grid-template-columns:1fr 1fr}.directory-panel .work-card{min-height:150px}.directory-panel .section-head{display:block}.directory-panel .section-head p{margin-top:12px}.directory-controls>span{display:none}.directory-footer span{max-width:60%;line-height:1.5}.space-readout,.space-coord{display:none}.grand-structure{width:190%;left:-45%;opacity:.7}}
    @media(prefers-reduced-motion:reduce){.grand-structure,.structure-back path,.orbit-path,.structure-grid,.structure-nodes circle,.structure-markers{animation:none!important}.directory-panel{transition:none}}


    /* CINEMATIC TRANSFER — a short 3D passage between archive environments */
    .scene-transition { position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#e9e7df;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;perspective:1100px; }
    .scene-transition.is-active { opacity:1;visibility:visible;pointer-events:auto;animation:transferOut 3.25s cubic-bezier(.72,0,.22,1) forwards; }
    .transition-vignette { position:absolute;inset:-15%;background:radial-gradient(ellipse at center,transparent 18%,rgba(26,29,24,.14) 100%); }
    .transition-world { position:absolute;inset:0;transform-style:preserve-3d;animation:worldTravel 3.25s cubic-bezier(.68,0,.22,1) both; }
    .transition-grid { position:absolute;inset:-40%;background-image:linear-gradient(rgba(54,59,50,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(54,59,50,.18) 1px,transparent 1px);background-size:68px 68px;transform:rotateX(66deg) translateZ(-160px) scale(1.5);mask-image:radial-gradient(ellipse,#000 20%,transparent 68%); }
    .transition-tunnel { position:absolute;left:50%;top:50%;width:min(62vw,780px);aspect-ratio:1.8/1;transform:translate(-50%,-50%) rotateX(8deg);transform-style:preserve-3d; }
    .transition-tunnel i { position:absolute;inset:calc(var(--n,0)*8%);border:1px solid rgba(53,59,49,.45);transform:translateZ(calc(var(--n,0)*-105px));box-shadow:inset 0 0 30px rgba(255,255,255,.22); }
    .transition-tunnel i:nth-child(1){--n:0}.transition-tunnel i:nth-child(2){--n:1}.transition-tunnel i:nth-child(3){--n:2}.transition-tunnel i:nth-child(4){--n:3}
    .transition-tunnel i:nth-child(5){--n:4}.transition-tunnel i:nth-child(6){--n:5}.transition-tunnel i:nth-child(7){--n:6}.transition-tunnel i:nth-child(8){--n:7}
    .transition-infinity { position:absolute;width:min(70vw,900px);left:50%;top:50%;transform:translate(-50%,-50%) translateZ(80px);overflow:visible; }
    .transition-infinity path { fill:none;stroke:#d66a35;stroke-width:1.3;stroke-dasharray:1800;stroke-dashoffset:1800;animation:drawInfinity 2.25s .15s ease forwards; }
    .transition-infinity path+path { stroke:#343a32;stroke-width:.7;opacity:.5;animation-delay:.4s; }
    .transition-glass { position:absolute;width:24vw;height:38vh;left:50%;top:50%;border:1px solid rgba(255,255,255,.82);background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(164,169,157,.04));box-shadow:0 20px 80px rgba(49,52,44,.08);backdrop-filter:blur(2px);transform-style:preserve-3d; }
    .glass-a { transform:translate(-135%,-50%) rotateY(45deg) translateZ(120px);animation:glassFlyA 3s ease both; }
    .glass-b { transform:translate(35%,-50%) rotateY(-45deg) translateZ(-80px);animation:glassFlyB 3s ease both; }
    .glass-c { width:40vw;height:52vh;transform:translate(-50%,-50%) rotateX(65deg) translateZ(210px);animation:glassFlyC 3s ease both; }
    .transition-label { position:absolute;left:clamp(20px,5vw,70px);right:clamp(20px,5vw,70px);bottom:clamp(24px,6vh,60px);display:flex;align-items:center;gap:18px;font:8px var(--mono);letter-spacing:.15em;color:#77796f; }
    .transition-label b { font-weight:500;color:#242821; }.transition-label i { flex:1;height:1px;background:linear-gradient(90deg,#d66a35,transparent); }
    @keyframes transferOut { 0%,78%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden} }
    @keyframes worldTravel { 0%{transform:translateZ(-650px) scale(.58) rotateX(10deg);filter:blur(8px)} 28%{transform:translateZ(0) scale(1);filter:blur(0)} 72%{transform:translateZ(220px) scale(1.3);filter:blur(1px)} 100%{transform:translateZ(900px) scale(2.2);filter:blur(12px)} }
    @keyframes drawInfinity { to{stroke-dashoffset:0} }
    @keyframes glassFlyA { 0%{translate:-80vw 0;opacity:0} 35%{opacity:1} 100%{translate:0 0;opacity:.8} }
    @keyframes glassFlyB { 0%{translate:80vw 0;opacity:0} 35%{opacity:1} 100%{translate:0 0;opacity:.8} }
    @keyframes glassFlyC { 0%{translate:0 80vh;opacity:0} 45%{opacity:1} 100%{translate:0 0;opacity:.65} }

    /* Fifth file remains a dedicated contact environment, not a directory card. */
    .contact-scene { position:relative;min-height:78vh;padding:clamp(90px,12vh,150px) clamp(22px,7vw,110px) 60px;overflow:hidden;background:#e9e7df;isolation:isolate; }
    .contact-scene::before { content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(47,52,44,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(47,52,44,.07) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent,#000 30%,#000); }
    .contact-scene-geometry { position:absolute;inset:0;z-index:-1;pointer-events:none; }
    .contact-ring { position:absolute;left:72%;top:48%;border:1px solid rgba(51,58,48,.17);border-radius:50%;transform:translate(-50%,-50%) rotateX(66deg) rotateZ(-20deg); }
    .ring-1 { width:48vw;height:48vw;animation:contactOrbit 32s linear infinite; }
    .ring-2 { width:37vw;height:37vw;border-color:rgba(214,106,53,.3);animation:contactOrbit 24s linear infinite reverse; }
    .ring-3 { width:26vw;height:26vw;border-style:dashed;animation:contactOrbit 42s linear infinite; }
    .contact-axis { position:absolute;left:72%;top:48%;background:rgba(55,60,50,.18);transform-origin:left center; }
    .axis-x { width:55vw;height:1px;transform:rotate(-20deg); }.axis-y { width:45vh;height:1px;transform:rotate(70deg); }
    .contact-coordinate { position:absolute;right:7%;bottom:15%;font:8px var(--mono);letter-spacing:.15em;color:#888a80; }
    .contact-scene-inner { max-width:900px;position:relative;z-index:2; }
    .contact-scene .section-title { font-size:clamp(54px,9vw,112px);max-width:700px; }
    .contact-scene .contact-link { display:inline-flex;margin-top:30px; }
    .contact-scene .contact-bottom { margin-top:80px;padding-top:20px;border-top:1px solid rgba(35,39,32,.2);color:#77796f; }
    @keyframes contactOrbit { to { transform:translate(-50%,-50%) rotateX(66deg) rotateZ(340deg); } }

    .music-toggle { position:fixed;right:28px;bottom:68px;z-index:1001;display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(35,39,32,.28);background:rgba(239,237,229,.88);backdrop-filter:blur(12px);color:#30352d;font:8px var(--mono);letter-spacing:.13em;cursor:pointer;transition:.25s; }
    .music-toggle:hover { border-color:var(--orange);transform:translateY(-2px); }
    .music-toggle b { font:14px var(--sans);font-weight:400;color:var(--orange); }
    .music-bars { height:14px;display:flex;align-items:center;gap:2px; }
    .music-bars i { display:block;width:2px;height:4px;background:var(--orange); }
    .music-toggle.is-playing .music-bars i { animation:musicBar .75s ease-in-out infinite alternate; }
    .music-bars i:nth-child(2){animation-delay:-.4s}.music-bars i:nth-child(3){animation-delay:-.2s}.music-bars i:nth-child(4){animation-delay:-.55s}
    @keyframes musicBar { to { height:13px; } }
    .music-toggle.is-off { opacity:.72; }.music-toggle.is-off .music-bars i { animation:none;height:3px; }
    @media(max-width:640px) { .music-toggle { right:14px;bottom:58px;padding:9px 11px; }.transition-infinity{width:110vw}.transition-tunnel{width:90vw}.glass-a,.glass-b{width:38vw} }
    @media(prefers-reduced-motion:reduce) {
      .scene-transition,.transition-world,.transition-infinity path,.transition-glass,.contact-ring { animation-duration:.01ms!important; }
    }


    /* TRANSITION FIX: keep the scene mounted, visible only during an intentional route change. */
    .scene-transition { opacity:0; visibility:hidden; pointer-events:none; display:grid; }
    .scene-transition.is-active { opacity:1; visibility:visible; pointer-events:auto; animation:none; }
    .scene-transition.is-active .transition-world { animation:worldTravel 3.15s cubic-bezier(.68,0,.22,1) both; }
    .scene-transition.is-active .transition-infinity path:first-child { stroke-dasharray:1800; stroke-dashoffset:1800; animation:drawInfinity 2.7s .12s ease-out forwards; }
    .scene-transition.is-active .transition-infinity path:last-child { stroke-dasharray:1000; stroke-dashoffset:1000; animation:drawInfinity 2.3s .35s ease-out forwards; }
    .scene-transition.is-active .glass-a { animation:glassFlyA 2.8s cubic-bezier(.2,.75,.2,1) both; }
    .scene-transition.is-active .glass-b { animation:glassFlyB 2.8s cubic-bezier(.2,.75,.2,1) both; }
    .scene-transition.is-active .glass-c { animation:glassFlyC 2.8s cubic-bezier(.2,.75,.2,1) both; }
    .scene-transition.is-leaving { opacity:0; visibility:hidden; transition:opacity .8s ease,visibility 0s .8s; pointer-events:none; }
    .scene-transition.is-leaving .transition-world { animation:none; }
    @media(prefers-reduced-motion:reduce) {
      .scene-transition.is-active .transition-world,
      .scene-transition.is-active .transition-infinity path,
      .scene-transition.is-active .transition-glass { animation:none!important; }
    }


    /* Contact metadata returns to the original dark system footer treatment. */
    .contact-scene .contact-bottom {
      display:flex;align-items:center;justify-content:space-between;gap:18px;
      margin:76px 0 0;padding:18px 22px;min-height:54px;
      border:0;background:#151916;color:#a8aea2;
      font:9px var(--mono);letter-spacing:.1em;
      box-shadow:0 12px 34px rgba(20,24,20,.08);
    }
    .contact-scene .contact-bottom a { color:#e2e4dc; }
    .contact-scene .contact-bottom a:hover { color:var(--orange-bright); }
    @media(max-width:640px) {
      .contact-scene .contact-bottom { flex-wrap:wrap;padding:15px 16px;gap:10px;font-size:8px; }
    }


    /* PROTOTYPE 05.1 — visible spatial passage. The overlay is triggered by
       both navigation and natural scrolling; it never depends on smooth-scroll timing. */
    .scene-transition {
      position:fixed!important;inset:0!important;z-index:2147483000!important;
      display:grid!important;place-items:center!important;overflow:hidden!important;
      background:#e9e7df!important;opacity:0;visibility:hidden;pointer-events:none;
      perspective:1200px;isolation:isolate;
    }
    .scene-transition.is-active {
      opacity:1;visibility:visible;pointer-events:auto;
      animation:sceneCurtain 3.15s cubic-bezier(.72,0,.22,1) forwards!important;
    }
    .scene-transition .transition-world {
      position:absolute;inset:0;transform-style:preserve-3d;
      animation:none;
    }
    .scene-transition.is-active .transition-world {
      animation:sceneWorldPush 3.15s cubic-bezier(.68,0,.22,1) both!important;
    }
    .scene-transition .transition-grid {
      opacity:.8;transform:rotateX(66deg) translateZ(-160px) scale(1.5);
      animation:none;
    }
    .scene-transition.is-active .transition-grid {
      animation:sceneGridRush 3.1s ease-in-out both!important;
    }
    .scene-transition .transition-tunnel i {
      opacity:.0;transform:translateZ(-900px) scale(.18);
    }
    .scene-transition.is-active .transition-tunnel i {
      animation:sceneTunnelPass 2.9s cubic-bezier(.2,.7,.2,1) both!important;
    }
    .scene-transition.is-active .transition-tunnel i:nth-child(2){animation-delay:.08s!important}
    .scene-transition.is-active .transition-tunnel i:nth-child(3){animation-delay:.16s!important}
    .scene-transition.is-active .transition-tunnel i:nth-child(4){animation-delay:.24s!important}
    .scene-transition.is-active .transition-tunnel i:nth-child(5){animation-delay:.32s!important}
    .scene-transition.is-active .transition-tunnel i:nth-child(6){animation-delay:.40s!important}
    .scene-transition.is-active .transition-tunnel i:nth-child(7){animation-delay:.48s!important}
    .scene-transition.is-active .transition-tunnel i:nth-child(8){animation-delay:.56s!important}
    .scene-transition .transition-infinity {opacity:0;transform:translate(-50%,-50%) translateZ(80px) scale(.65)}
    .scene-transition.is-active .transition-infinity {
      opacity:1;animation:sceneInfinityZoom 3.0s cubic-bezier(.2,.75,.2,1) both!important;
    }
    .scene-transition .transition-infinity path {stroke-dasharray:1800;stroke-dashoffset:1800}
    .scene-transition.is-active .transition-infinity path:first-child {
      animation:drawInfinity 2.55s .12s ease-out forwards!important;
    }
    .scene-transition.is-active .transition-infinity path:last-child {
      animation:drawInfinity 2.25s .34s ease-out forwards!important;
    }
    .scene-transition .transition-glass {opacity:0}
    .scene-transition.is-active .glass-a {animation:sceneGlassLeft 2.85s cubic-bezier(.2,.75,.2,1) both!important}
    .scene-transition.is-active .glass-b {animation:sceneGlassRight 2.85s cubic-bezier(.2,.75,.2,1) both!important}
    .scene-transition.is-active .glass-c {animation:sceneGlassDepth 2.85s cubic-bezier(.2,.75,.2,1) both!important}
    .scene-transition .transition-label {opacity:0;transform:translateY(12px)}
    .scene-transition.is-active .transition-label {animation:sceneLabelIn .6s .35s ease forwards!important}
    @keyframes sceneCurtain {
      0%,76%{opacity:1;visibility:visible}
      100%{opacity:0;visibility:hidden}
    }
    @keyframes sceneWorldPush {
      0%{transform:translateZ(-650px) scale(.55) rotateX(12deg);filter:blur(8px)}
      25%{transform:translateZ(-80px) scale(.9);filter:blur(0)}
      68%{transform:translateZ(180px) scale(1.24);filter:blur(1px)}
      100%{transform:translateZ(850px) scale(2.1);filter:blur(10px)}
    }
    @keyframes sceneGridRush {
      0%{opacity:0;translate:0 8vh}
      28%{opacity:.9;translate:0 0}
      80%{opacity:.55;translate:0 -5vh}
      100%{opacity:0;translate:0 -12vh}
    }
    @keyframes sceneTunnelPass {
      0%{opacity:0;transform:translateZ(-900px) scale(.18)}
      25%{opacity:.7}
      72%{opacity:.8}
      100%{opacity:0;transform:translateZ(700px) scale(2.1)}
    }
    @keyframes sceneInfinityZoom {
      0%{opacity:0;transform:translate(-50%,-50%) translateZ(80px) scale(.45) rotate(-12deg)}
      22%{opacity:1}
      72%{opacity:.9;transform:translate(-50%,-50%) translateZ(180px) scale(1.05) rotate(5deg)}
      100%{opacity:0;transform:translate(-50%,-50%) translateZ(700px) scale(2.3) rotate(12deg)}
    }
    @keyframes sceneGlassLeft {
      0%{opacity:0;translate:-90vw 0;rotate:0 1 0 48deg}
      35%{opacity:.72}
      100%{opacity:0;translate:14vw -8vh;rotate:0 1 0 8deg}
    }
    @keyframes sceneGlassRight {
      0%{opacity:0;translate:90vw 0;rotate:0 1 0 -48deg}
      35%{opacity:.7}
      100%{opacity:0;translate:-14vw 8vh;rotate:0 1 0 -8deg}
    }
    @keyframes sceneGlassDepth {
      0%{opacity:0;transform:translate(-50%,-50%) rotateX(72deg) translateZ(-500px) scale(.3)}
      38%{opacity:.6}
      100%{opacity:0;transform:translate(-50%,-50%) rotateX(72deg) translateZ(550px) scale(1.8)}
    }
    @keyframes sceneLabelIn {
      to{opacity:1;transform:translateY(0)}
    }
    @media(prefers-reduced-motion:reduce) {
      .scene-transition.is-active { animation-duration:2s!important; }
      .scene-transition.is-active .transition-world,
      .scene-transition.is-active .transition-grid,
      .scene-transition.is-active .transition-tunnel i,
      .scene-transition.is-active .transition-infinity,
      .scene-transition.is-active .transition-infinity path,
      .scene-transition.is-active .transition-glass,
      .scene-transition.is-active .transition-label { animation-duration:2s!important; }
    }


    .scene-transition.is-active::before {
      content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.2),rgba(233,231,223,.78) 72%);
      animation:sceneFlash 3.1s ease both;
    }
    .scene-transition.is-active .transition-world { z-index:1; }
    @keyframes sceneFlash {
      0%{opacity:1;transform:scale(.92)}
      35%{opacity:.18;transform:scale(1.04)}
      70%{opacity:.4;transform:scale(1.12)}
      100%{opacity:0;transform:scale(1.22)}
    }


    /* PROTOTYPE 05.3 — editorial identity + quiet system navigation */
    .topbar {
      height:82px; padding:0;
      background:rgba(235,233,225,.88);
      border-bottom:1px solid rgba(28,32,26,.18);
      backdrop-filter:blur(22px) saturate(1.15);
      box-shadow:0 8px 28px rgba(35,37,30,.035);
    }
    .nav-inner { width:min(1440px,calc(100% - 80px)); }
    .brand-lockup { gap:15px; }
    .rhine-mark { width:25px;height:25px;border-color:#3b4037; }
    .brand-type strong { font-size:12px;letter-spacing:.13em;color:#20241f; }
    .brand-type strong b { color:var(--orange);font-weight:800; }
    .brand-type span { font-size:7px;letter-spacing:.14em; }
    .nav-links { gap:clamp(16px,2.5vw,36px); }
    .nav-links a { font-size:9px;letter-spacing:.1em;color:#55594f; }
    .nav-links a::before { content:"";position:absolute;left:0;top:-13px;width:0;height:2px;background:var(--orange);transition:width .28s; }
    .nav-links a:hover::before { width:100%; }
    .nav-links a::after { bottom:-10px; }
    .nav-status { gap:8px;font-size:8px;letter-spacing:.1em; }
    .nav-status-label { color:#9a9b90; }
    .nav-status b { font-weight:500;color:#3c4338; }
    .nav-status-divider { height:14px;width:1px;background:rgba(30,34,28,.2);margin:0 5px; }
    .nav-clock { color:#888b80;min-width:78px; }
    .hero { padding-top:150px; }
    .hero-display { position:relative;margin:0 0 38px;max-width:1100px; }
    .hero-display h1 { display:flex;flex-direction:column;gap:.025em;margin:0;font-family:var(--sans);font-size:clamp(66px,12.8vw,184px);font-weight:750;line-height:.79;letter-spacing:-.085em;color:#171a16; }
    .hero-word { display:block;white-space:nowrap;opacity:0;transform:translateY(24px);filter:blur(8px);animation:heroWordIn .9s .18s var(--ease) forwards; }
    .hero-word-second { animation-delay:.34s; }
    .hero-period { color:var(--orange); }
    .hero-signature { display:flex;align-items:center;gap:11px;margin:24px 0 0 clamp(4px,1vw,16px);font:10px var(--mono);letter-spacing:.24em;color:var(--orange); }
    .hero-signature i { display:block;width:25px;height:1px;background:var(--orange); }
    .hero-signature small { margin-left:10px;color:#85877d;font-size:8px;letter-spacing:.13em; }
    @keyframes heroWordIn { to{opacity:1;transform:none;filter:blur(0)} }
    .hero-bottom { margin-top:8px; }
    .hero-welcome { max-width:340px; }
    .hero-side { background:rgba(245,244,238,.28);backdrop-filter:blur(4px);padding:18px 0 10px 22px; }
    .section-arrived .section-head.reveal,
    .section-arrived .about-copy.reveal,
    .section-arrived .data-panel.reveal,
    .section-arrived .audio-grid.reveal,
    .section-arrived .directory-head,
    .section-arrived .directory-stage,
    .section-arrived .contact-scene-inner > * {
      animation:sectionEnter .85s var(--ease) both;
    }
    .section-arrived .section-head.reveal { animation-delay:.05s; }
    .section-arrived .about-copy.reveal { animation-delay:.16s; }
    .section-arrived .data-panel.reveal { animation-delay:.27s; }
    .section-arrived .directory-stage { animation-delay:.18s; }
    .section-arrived .contact-scene-inner > *:nth-child(2) { animation-delay:.12s; }
    .section-arrived .contact-scene-inner > *:nth-child(3) { animation-delay:.22s; }
    .section-arrived .contact-scene-inner > *:nth-child(4) { animation-delay:.32s; }
    @keyframes sectionEnter {
      from { opacity:0;transform:translate3d(0,24px,0);filter:blur(5px); }
      to { opacity:1;transform:translate3d(0,0,0);filter:blur(0); }
    }
    .section-arrived .reveal { transition-delay:calc(var(--reveal-order,0) * 65ms); }
    .scene-transition { display:none!important; }
    @media(max-width:900px) {
      .nav-inner { width:calc(100% - 38px); }
      .nav-links { gap:13px; }
      .nav-links a { font-size:8px; }
      .nav-status { display:none; }
      .hero-display h1 { font-size:clamp(62px,13vw,116px); }
    }
    @media(max-width:680px) {
      .topbar { height:66px; }
      .hero { padding-top:118px; }
      .hero-display h1 { font-size:clamp(53px,14vw,92px);letter-spacing:-.075em; }
      .hero-signature { margin-top:19px;font-size:9px; }
      .hero-signature small { font-size:7px; }
    }
    @media(prefers-reduced-motion:reduce) {
      .hero-word,.section-arrived .section-head.reveal,.section-arrived .about-copy.reveal,
      .section-arrived .data-panel.reveal,.section-arrived .audio-grid.reveal,
      .section-arrived .directory-head,.section-arrived .directory-stage,
      .section-arrived .contact-scene-inner > * { animation:none!important;opacity:1;transform:none;filter:none; }
    }


    /* Ensure the new editorial title overrides the former per-letter SHIRO animation. */
    .hero h1 .hero-word { display:block; animation:heroWordIn .9s .18s var(--ease) both; }
    .hero h1 .hero-word-second { animation-delay:.34s; }
    .hero h1 .hero-period { display:inline; animation:none; }


    /* PROTOTYPE 07 — atmosphere, spatial depth and stronger reading motion */
    .topbar .nav-links a,
    .topbar .brand-type strong,
    .topbar .brand-type span,
    .topbar .nav-status {
      font-family: "Manrope","Avenir Next","Helvetica Neue","PingFang SC",sans-serif;
      font-weight: 650;
      letter-spacing: .105em;
    }
    .topbar .nav-links a { font-size: 9px; }
    .topbar .brand-type strong { font-size: 11px; letter-spacing: .14em; }
    .topbar .brand-type span { font-size: 7px; font-weight: 550; letter-spacing: .13em; }
    .topbar .nav-status { font-size: 8px; font-weight: 600; }
    .section { isolation:isolate; }
    .section > .wrap { position:relative; z-index:2; }
    .about { overflow:hidden; }
    .about-geometry { position:absolute; inset:-8% -4%; z-index:0; pointer-events:none; opacity:.64; transform:translate3d(0,var(--section-drift,0px),0); }
    .about-geometry svg { width:100%;height:100%; }
    .about-contours path { fill:none;stroke:rgba(68,76,64,.22);stroke-width:1;stroke-dasharray:9 10; animation:contourFlow 36s linear infinite; }
    .about-contours path:nth-child(even) { stroke:rgba(214,106,53,.2);animation-duration:43s;animation-direction:reverse; }
    .about-radials { fill:none;stroke:rgba(64,70,59,.13);stroke-width:1;transform-origin:875px 260px;animation:radialBreath 18s ease-in-out infinite alternate; }
    .about-coordinate { position:absolute;right:7%;top:18%;font:8px var(--mono);letter-spacing:.17em;color:rgba(53,60,49,.38); }
    @keyframes contourFlow { to { stroke-dashoffset:-380; } }
    @keyframes radialBreath { to { transform:scale(1.08) rotate(18deg);opacity:.55; } }

    /* Dark sound archive becomes its own quiet deep-space environment. */
    .audio-section { isolation:isolate; background:#090e11; }
    .audio-section::before { z-index:1;opacity:.17;background-size:64px 64px; }
    .audio-cosmos { position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none; }
    .cosmos-canvas { position:absolute;inset:0;width:100%;height:100%;opacity:.86; }
    .cosmos-nebula { position:absolute;border-radius:50%;filter:blur(58px);mix-blend-mode:screen; }
    .nebula-a { width:44vw;height:38vw;left:38%;top:8%;background:radial-gradient(ellipse,rgba(48,91,104,.23),rgba(30,47,58,.08) 48%,transparent 72%);animation:nebulaDrift 28s ease-in-out infinite alternate; }
    .nebula-b { width:33vw;height:32vw;right:-8%;bottom:-18%;background:radial-gradient(ellipse,rgba(160,93,60,.13),rgba(65,65,74,.06) 50%,transparent 72%);animation:nebulaDrift 35s -9s ease-in-out infinite alternate-reverse; }
    .cosmos-planet { position:absolute;width:clamp(125px,19vw,280px);aspect-ratio:1;right:12%;top:21%;border-radius:50%;opacity:.52;
      background:radial-gradient(circle at 31% 27%,rgba(190,205,196,.52),rgba(87,111,111,.34) 12%,rgba(23,46,53,.88) 48%,#090e12 74%);
      box-shadow:inset -25px -15px 45px rgba(0,0,0,.8),inset 7px 5px 22px rgba(205,222,212,.13),0 0 85px rgba(75,133,144,.12);
      animation:planetFloat 16s ease-in-out infinite alternate; }
    .cosmos-planet::before { content:"";position:absolute;inset:14% 5%;border-radius:50%;border-top:1px solid rgba(218,227,219,.18);transform:rotate(-24deg); }
    .cosmos-planet::after { content:"";position:absolute;left:-28%;right:-28%;top:42%;height:24%;border:1px solid rgba(180,202,198,.25);border-radius:50%;transform:rotate(-18deg); }
    .cosmos-planet span { position:absolute;inset:18%;border-radius:50%;background:repeating-linear-gradient(12deg,transparent 0 17px,rgba(177,198,190,.08) 18px 19px,transparent 20px 29px);mask-image:radial-gradient(circle,#000,transparent 75%); }
    .cosmos-orbit { position:absolute;left:68%;top:43%;border:1px solid rgba(155,191,190,.15);border-radius:50%;transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-18deg); }
    .orbit-wide { width:clamp(340px,56vw,820px);height:clamp(180px,29vw,420px);animation:cosmosOrbit 48s linear infinite; }
    .orbit-mid { width:clamp(280px,43vw,620px);height:clamp(140px,22vw,320px);border-color:rgba(214,106,53,.25);animation:cosmosOrbit 36s linear infinite reverse; }
    .orbit-tight { width:clamp(220px,31vw,450px);height:clamp(110px,16vw,235px);border-style:dashed;border-color:rgba(155,191,190,.2);animation:cosmosOrbit 27s linear infinite; }
    .cosmos-coordinate { position:absolute;font:8px var(--mono);letter-spacing:.17em;color:rgba(174,190,182,.42); }
    .coord-a { left:7%;top:22%; }.coord-b { right:7%;bottom:13%; }
    .audio-section .wrap { z-index:3; }
    .audio-section .section-head,.audio-grid { text-shadow:0 2px 14px rgba(0,0,0,.28); }
    .audio-section .turntable-wrap { filter:drop-shadow(0 22px 34px rgba(0,0,0,.3)); }
    .audio-section .turntable-frame { border-color:rgba(171,196,188,.26);box-shadow:0 0 0 24px rgba(148,180,174,.025),0 0 0 52px rgba(148,180,174,.018); }
    .audio-section .audio-console { position:relative; }
    .audio-section .audio-console::before { content:"";position:absolute;inset:-20px -24px;z-index:-1;border:1px solid rgba(190,207,194,.08);background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 55%);backdrop-filter:blur(2px); }
    @keyframes nebulaDrift { to { transform:translate3d(-5%,7%,0) scale(1.12); } }
    @keyframes planetFloat { to { transform:translate3d(-18px,-12px,0) rotate(8deg); } }
    @keyframes cosmosOrbit { to { transform:translate(-50%,-50%) rotateX(68deg) rotateZ(342deg); } }

    /* Archive index: fine technical geometry behind the document navigator. */
    .archive-directory { isolation:isolate; }
    .directory-geometry { position:absolute;inset:-7% -5%;z-index:0;pointer-events:none;opacity:.48; }
    .directory-geometry svg { width:100%;height:100%; }
    .directory-wire path { fill:none;stroke:rgba(63,70,59,.18);stroke-width:1;stroke-dasharray:6 11;animation:directoryDrift 42s linear infinite; }
    .directory-wire path:nth-child(2n) { stroke:rgba(214,106,53,.18);animation-duration:54s;animation-direction:reverse; }
    .directory-orb { fill:none;stroke:rgba(52,59,49,.12);stroke-width:1;transform-origin:1080px 240px;animation:radialBreath 25s ease-in-out infinite alternate; }
    .directory-geometry>span { position:absolute;left:5%;bottom:13%;font:8px var(--mono);letter-spacing:.18em;color:rgba(52,59,49,.35); }
    @keyframes directoryDrift { to { stroke-dashoffset:-480; } }
    .directory-stage { transform:translate3d(0,var(--section-drift,0px),0); }
    .directory-backplate { box-shadow:22px 28px 70px rgba(48,48,39,.09),inset 0 0 50px rgba(255,255,255,.35); }

    /* Contact orbit system gets a slow scanning signal. */
    .contact-scene { isolation:isolate; }
    .contact-scan { position:absolute;left:72%;top:48%;width:50vw;height:1px;transform-origin:left center;background:linear-gradient(90deg,transparent,rgba(214,106,53,.55),transparent); }
    .contact-scan-a { transform:rotate(-24deg);animation:contactScan 9s ease-in-out infinite; }
    .contact-scan-b { transform:rotate(58deg);animation:contactScan 13s -4s ease-in-out infinite reverse;opacity:.5; }
    @keyframes contactScan { 0%,100%{translate:-22vw 0;opacity:0} 45%,55%{opacity:.8} 50%{translate:24vw 0;opacity:.8} }

    /* More cinematic scroll reveals: content arrives with depth, then settles into the plane. */
    .reveal { opacity:0;transform:perspective(900px) translate3d(0,52px,0) rotateX(5deg) scale(.965);filter:blur(10px);
      transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),filter 1.05s cubic-bezier(.16,1,.3,1);
      transform-origin:50% 80%;will-change:transform,opacity,filter; }
    .reveal.visible { opacity:1;transform:perspective(900px) translate3d(0,0,0) rotateX(0) scale(1);filter:blur(0); }
    .delay-1 { transition-delay:.12s; }.delay-2 { transition-delay:.23s; }.delay-3 { transition-delay:.34s; }
    .work-card.reveal:nth-child(3n+2) { transition-delay:.12s; }
    .work-card.reveal:nth-child(3n) { transition-delay:.24s; }
    .directory-panel.is-active .work-card.visible { transition-duration:1.15s; }
    .section-arrived .directory-head { animation:sectionEnter 1.0s cubic-bezier(.16,1,.3,1) both; }
    .section-arrived .directory-stage { animation:sectionEnter 1.15s .12s cubic-bezier(.16,1,.3,1) both; }
    .section-arrived .contact-scene-inner > * { animation:sectionEnter 1.0s cubic-bezier(.16,1,.3,1) both; }
    @media(max-width:680px) {
      .cosmos-planet { right:-8%;top:17%;opacity:.34; }
      .cosmos-orbit { left:74%;top:33%; }
      .coord-a { left:5%;top:12%; }.coord-b { right:5%;bottom:7%; }
      .about-coordinate { display:none; }
      .directory-geometry { opacity:.28; }
      .reveal { transform:translate3d(0,30px,0) scale(.98);filter:blur(5px); }
    }
    @media(prefers-reduced-motion:reduce) {
      .about-contours path,.about-radials,.nebula-a,.nebula-b,.cosmos-planet,.cosmos-orbit,
      .directory-wire path,.directory-orb,.contact-scan { animation:none!important; }
      .reveal,.reveal.visible { opacity:1;transform:none;filter:none;transition:none; }
    }


    /* PROTOTYPE 08 — Protocol is the single source for both ambient and terminal playback. */
    .now-playing {
      position:fixed;z-index:120;left:26px;bottom:22px;display:grid;
      grid-template-columns:42px minmax(150px,230px) 34px minmax(85px,150px) auto;
      align-items:center;gap:12px;min-width:min(590px,calc(100vw - 32px));
      padding:9px 13px 9px 9px;border:1px solid rgba(232,232,220,.2);
      background:rgba(12,16,15,.91);color:#eceee5;backdrop-filter:blur(22px);
      box-shadow:0 12px 38px rgba(0,0,0,.2);transition:transform .3s,background .3s,border-color .3s;
    }
    .now-playing-cover { width:42px;height:42px;object-fit:cover;display:block; }
    .now-playing-meta { display:flex;flex-direction:column;gap:2px;min-width:0; }
    .now-playing-kicker { font:7px var(--mono);letter-spacing:.15em;color:#9ca397; }
    .now-playing-meta strong { font-size:13px;line-height:1.2;font-weight:650;letter-spacing:.01em; }
    .now-playing-meta small { font:7px var(--mono);letter-spacing:.07em;color:#9ca397;white-space:nowrap; }
    .now-playing-play { width:31px;height:31px;border:1px solid rgba(218,225,213,.45);border-radius:50%;background:transparent;color:#f0f1e9;display:grid;place-items:center;cursor:pointer;transition:.2s; }
    .now-playing-play:hover { border-color:var(--orange);color:var(--orange-bright); }
    .now-playing-play svg { width:11px;height:11px;fill:currentColor; }
    .now-playing-progress { display:flex;flex-direction:column;gap:6px;min-width:0; }
    .now-playing-progress-track { height:2px;background:rgba(255,255,255,.18);overflow:hidden; }
    .now-playing-progress-track i { display:block;width:0;height:100%;background:var(--orange);transition:width .15s linear; }
    .now-playing-progress span { font:7px var(--mono);color:#929b91;letter-spacing:.08em; }
    .now-playing-live { font:7px var(--mono);letter-spacing:.12em;color:#9aa295;white-space:nowrap; }
    .now-playing.is-playing .now-playing-live { color:#d5a078; }
    .sound-icon-toggle { width:25px;height:25px;display:grid;place-items:center;position:relative;border:1px solid rgba(55,62,51,.22);background:transparent;color:#73796d;cursor:pointer;margin-left:8px;transition:.2s; }
    .sound-icon-toggle svg { width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
    .sound-icon-toggle i { position:absolute;right:3px;top:3px;width:4px;height:4px;border-radius:50%;background:#9a9d91; }
    .sound-icon-toggle.enabled { color:var(--orange);border-color:var(--orange); }
    .sound-icon-toggle.enabled i { background:var(--orange);box-shadow:0 0 8px var(--orange); }
    .protocol-info { display:grid;grid-template-columns:104px 1fr auto;gap:22px;align-items:center; }
    .protocol-cover { width:104px;aspect-ratio:1;object-fit:cover;border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 30px rgba(0,0,0,.35); }
    .protocol-meta { min-width:0; }
    .protocol-info .track-now { font-size:clamp(28px,3.5vw,44px);font-weight:650;letter-spacing:-.055em; }
    .protocol-description { display:flex;gap:22px;flex-wrap:wrap;margin:17px 0 4px;padding:10px 0;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);font:8px var(--mono);letter-spacing:.12em;color:#9da49a; }
    .audio-progress-wrap { flex:1;min-width:90px;display:flex;flex-direction:column;gap:5px; }
    .audio-seek { width:100%;height:2px;accent-color:var(--orange);cursor:pointer; }
    .audio-time { display:flex;justify-content:space-between;font:8px var(--mono);color:#929b91; }
    .player-controls { gap:16px; }
    .audio-note { margin-top:22px;line-height:1.8; }
    @media(max-width:900px) {
      .nav-status { display:flex!important; }
      .nav-clock,.nav-status-divider,.nav-status-label { display:none; }
      .now-playing { left:14px;bottom:14px;min-width:0;width:min(500px,calc(100vw - 28px));grid-template-columns:38px minmax(100px,1fr) 30px minmax(75px,.8fr);gap:9px; }
      .now-playing-cover { width:38px;height:38px; }
      .now-playing-live { display:none; }
      .sound-icon-toggle { margin-left:3px; }
    }
    @media(max-width:600px) {
      .now-playing { grid-template-columns:36px minmax(80px,1fr) 30px; }
      .now-playing-cover { width:36px;height:36px; }
      .now-playing-progress { grid-column:2/4;grid-row:2; }
      .now-playing { padding:8px 10px; }
      .now-playing-meta small { font-size:6px; }
      .protocol-info { grid-template-columns:76px 1fr;gap:13px; }
      .protocol-cover { width:76px; }
      .protocol-info #playState { grid-column:2; }
      .protocol-description { gap:10px;font-size:7px; }
      .audio-section { padding-bottom:125px; }
      .sound-icon-toggle { width:23px;height:23px; }
    }


    /* PROTOTYPE 09 — adaptive player dock + event-horizon contact environment */
    .now-playing {
      left:auto;right:22px;bottom:20px;
      grid-template-columns:36px minmax(112px,168px) 30px minmax(72px,112px);
      gap:9px;min-width:0;width:min(410px,calc(100vw - 32px));
      padding:8px 10px 8px 8px;border-radius:9px;
      background:rgba(19,23,21,.56);border:1px solid rgba(230,234,224,.2);
      backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);
      box-shadow:0 8px 28px rgba(0,0,0,.13);
    }
    .now-playing-cover { width:36px;height:36px;border-radius:4px; }
    .now-playing-meta strong { font-size:12px; }
    .now-playing-meta small { font-size:6px; }
    .now-playing-kicker { font-size:6px; }
    .now-playing-play { width:28px;height:28px; }
    .now-playing-progress span { font-size:6px; }
    .now-playing-live { display:none; }
    /* Default: dark lettering on pale pages. */
    .now-playing { color:#20241f;border-color:rgba(30,35,29,.18);background:rgba(239,239,231,.62); }
    .now-playing .now-playing-kicker,
    .now-playing .now-playing-meta small,
    .now-playing .now-playing-progress span { color:#6f756a; }
    .now-playing .now-playing-play { color:#20241f;border-color:rgba(30,35,29,.35); }
    .now-playing .now-playing-progress-track { background:rgba(30,35,29,.18); }
    .now-playing.on-dark { color:#f0f1e9;border-color:rgba(232,236,226,.2);background:rgba(12,16,15,.58); }
    .now-playing.on-dark .now-playing-kicker,
    .now-playing.on-dark .now-playing-meta small,
    .now-playing.on-dark .now-playing-progress span { color:#a8b0a4; }
    .now-playing.on-dark .now-playing-play { color:#f0f1e9;border-color:rgba(232,236,226,.42); }
    .now-playing.on-dark .now-playing-progress-track { background:rgba(255,255,255,.2); }
    .now-playing.on-dark .now-playing-cover { box-shadow:0 0 0 1px rgba(255,255,255,.15); }
    .now-playing.is-hidden { opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none; }
    .now-playing { transition:opacity .35s ease,visibility .35s ease,transform .35s ease,background .3s,border-color .3s,color .3s; }

    /* Restore the original dark connection page composition, now with a black-hole field. */
    .contact-scene {
      background:#111613;color:#f0f0e9;
      min-height:78vh;padding:clamp(90px,12vh,150px) clamp(22px,7vw,110px) 60px;
    }
    .contact-scene::before {
      z-index:0;opacity:.26;
      background-image:linear-gradient(rgba(205,215,204,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(205,215,204,.055) 1px,transparent 1px);
      mask-image:linear-gradient(90deg,transparent,#000 24%,#000);
    }
    .contact-scene-geometry { z-index:1;overflow:hidden; }
    .contact-scene-inner { z-index:2;max-width:1256px;margin:0 auto; }
    .contact-scene .panel-meta { color:#8c978c;border-color:rgba(220,229,216,.18); }
    .contact-scene .section-kicker { color:#9da69a; }
    .contact-scene .section-title { color:#f1f0e9; }
    .contact-scene .contact-lead { color:#aeb5a9; }
    .contact-scene .contact-link { color:#e8e9e1; }
    .contact-scene .contact-bottom { border-top-color:rgba(255,255,255,.16);color:#818b80; }
    .contact-scene .contact-bottom a { color:#c1c7bb; }
    .contact-scene .github-link { color:#d8ddd3;border-color:rgba(220,229,216,.25); }
    .contact-scene .github-link:hover { background:#e9e7df;color:#171c18;border-color:#e9e7df; }
    .contact-blackhole-canvas { position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.95; }
    .contact-scene .contact-ring,.contact-scene .contact-axis,.contact-scene .contact-coordinate,
    .contact-scene .contact-scan { z-index:1; }
    .contact-scene .contact-ring { border-color:rgba(188,205,190,.12); }
    .contact-scene .ring-2 { border-color:rgba(214,106,53,.26); }
    .contact-scene .contact-axis { background:rgba(190,203,189,.12); }
    .contact-scene .contact-coordinate { color:rgba(184,195,181,.48); }
    .contact-scene .contact-scan-a,.contact-scene .contact-scan-b { opacity:.45; }
    @media(max-width:900px) {
      .now-playing { right:14px;left:auto;bottom:14px;width:min(380px,calc(100vw - 28px));grid-template-columns:34px minmax(90px,1fr) 28px minmax(65px,.7fr); }
      .now-playing-cover { width:34px;height:34px; }
      .now-playing-live { display:none; }
    }
    @media(max-width:600px) {
      .now-playing { right:12px;bottom:12px;left:auto;width:min(320px,calc(100vw - 24px));grid-template-columns:32px minmax(78px,1fr) 27px; }
      .now-playing-cover { width:32px;height:32px; }
      .now-playing-progress { grid-column:2/4;grid-row:2; }
      .contact-scene-inner { max-width:100%; }
      .contact-scene .contact-bottom { margin-top:65px;flex-wrap:wrap; }
    }
    @media(prefers-reduced-motion:reduce) {
      .now-playing { transition:none; }
    }


    /* PROTOTYPE 10 — a deliberate handoff from boot sequence into the home interface. */
    body:not(.hero-entered) .hero .hero-overline,
    body:not(.hero-entered) .hero .hero-word,
    body:not(.hero-entered) .hero .hero-signature,
    body:not(.hero-entered) .hero .hero-welcome,
    body:not(.hero-entered) .hero .hero-coordinates,
    body:not(.hero-entered) .hero .hero-side,
    body:not(.hero-entered) .hero .scroll-cue {
      opacity:0!important;
      animation:none!important;
    }
    body:not(.hero-entered) .hero .hero-word { transform:translate3d(0,22px,0) scale(.985);filter:blur(8px); }
    body:not(.hero-entered) .hero .hero-welcome,
    body:not(.hero-entered) .hero .hero-coordinates { transform:translate3d(-34px,0,0);filter:blur(5px); }
    body:not(.hero-entered) .hero .hero-side { transform:translate3d(54px,0,0) scale(.985);filter:blur(7px); }
    body:not(.hero-entered) .hero .hero-signature { transform:translate3d(-18px,8px,0); }
    body:not(.hero-entered) .hero .hero-overline { transform:translate3d(0,-12px,0); }
    body:not(.hero-entered) .hero .scroll-cue { transform:translate3d(0,12px,0); }

    body.hero-entered .hero .hero-overline {
      animation:homeOverlineIn .65s .04s cubic-bezier(.16,1,.3,1) both;
    }
    body.hero-entered .hero .hero-word {
      animation:homeTitleJump .92s cubic-bezier(.16,1,.3,1) both;
    }
    body.hero-entered .hero .hero-word-second {
      animation-delay:.16s;
    }
    body.hero-entered .hero .hero-signature {
      animation:homeSignatureIn .7s .55s cubic-bezier(.16,1,.3,1) both;
    }
    body.hero-entered .hero .hero-welcome {
      animation:homeLeftIn .9s .66s cubic-bezier(.16,1,.3,1) both;
    }
    body.hero-entered .hero .hero-coordinates {
      animation:homeLeftIn .9s .82s cubic-bezier(.16,1,.3,1) both;
    }
    body.hero-entered .hero .hero-side {
      animation:homeRadarIn 1.05s .38s cubic-bezier(.16,1,.3,1) both;
    }
    body.hero-entered .hero .hero-side .side-readout {
      animation:homeReadoutIn .65s cubic-bezier(.16,1,.3,1) both;
    }
    body.hero-entered .hero .hero-side .side-readout:nth-of-type(2) { animation-delay:.72s; }
    body.hero-entered .hero .hero-side .side-readout:nth-of-type(3) { animation-delay:.84s; }
    body.hero-entered .hero .hero-side .side-readout:nth-of-type(4) { animation-delay:.96s; }
    body.hero-entered .hero .scroll-cue {
      animation:homeCueIn .7s 1.05s cubic-bezier(.16,1,.3,1) both;
    }
    body.hero-entered .hero .radar {
      animation:radarReveal .85s .56s cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes homeOverlineIn {
      0%{opacity:0;transform:translate3d(0,-12px,0);filter:blur(5px)}
      65%{opacity:1}
      100%{opacity:1;transform:none;filter:blur(0)}
    }
    @keyframes homeTitleJump {
      0%{opacity:0;transform:translate3d(0,42px,0) scale(.94);filter:blur(12px)}
      48%{opacity:1;transform:translate3d(0,-5px,0) scale(1.012);filter:blur(0)}
      58%{opacity:.72}
      66%{opacity:1}
      100%{opacity:1;transform:none;filter:blur(0)}
    }
    @keyframes homeSignatureIn {
      0%{opacity:0;transform:translate3d(-18px,8px,0)}
      100%{opacity:1;transform:none}
    }
    @keyframes homeLeftIn {
      0%{opacity:0;transform:translate3d(-34px,0,0);filter:blur(7px)}
      100%{opacity:1;transform:none;filter:blur(0)}
    }
    @keyframes homeRadarIn {
      0%{opacity:0;transform:translate3d(54px,0,0) scale(.985);filter:blur(8px)}
      68%{opacity:1;transform:translate3d(-4px,0,0) scale(1.008);filter:blur(0)}
      100%{opacity:1;transform:none;filter:blur(0)}
    }
    @keyframes homeReadoutIn {
      from{opacity:0;transform:translateX(15px)}
      to{opacity:1;transform:none}
    }
    @keyframes radarReveal {
      from{opacity:0;transform:scale(.78) rotate(-18deg);filter:blur(4px)}
      to{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}
    }
    @keyframes homeCueIn {
      from{opacity:0;transform:translate3d(0,12px,0)}
      to{opacity:1;transform:none}
    }
    @media(prefers-reduced-motion:reduce) {
      body:not(.hero-entered) .hero .hero-overline,
      body:not(.hero-entered) .hero .hero-word,
      body:not(.hero-entered) .hero .hero-signature,
      body:not(.hero-entered) .hero .hero-welcome,
      body:not(.hero-entered) .hero .hero-coordinates,
      body:not(.hero-entered) .hero .hero-side,
      body:not(.hero-entered) .hero .scroll-cue { opacity:1!important;transform:none!important;filter:none!important; }
      body.hero-entered .hero .hero-overline,
      body.hero-entered .hero .hero-word,
      body.hero-entered .hero .hero-signature,
      body.hero-entered .hero .hero-welcome,
      body.hero-entered .hero .hero-coordinates,
      body.hero-entered .hero .hero-side,
      body.hero-entered .hero .scroll-cue,
      body.hero-entered .hero .hero-side .side-readout,
      body.hero-entered .hero .radar { animation:none!important;opacity:1!important;transform:none!important;filter:none!important; }
    }


/* =========================================================
   ARCHIVE OS / modular audio archive
   Track selection, archive-page navigation and Ad Astra scene.
   ========================================================= */
.audio-page-nav {
  position:relative;z-index:3;display:flex;align-items:center;gap:22px;
  border-bottom:1px solid rgba(225,232,220,.16);padding:0 0 15px;margin:-18px 0 38px;
}
.audio-page-btn {
  border:0;border-bottom:1px solid transparent;padding:0 0 7px;
  color:#879187;background:transparent;font:8px var(--mono);
  letter-spacing:.13em;cursor:pointer;transition:color .25s,border-color .25s;
}
.audio-page-btn:hover,.audio-page-btn.is-active { color:var(--orange-bright);border-color:var(--orange); }
.audio-page-indicator { margin-left:auto;color:#6f7b70;font:8px var(--mono);letter-spacing:.12em; }
.audio-page { display:none; }
.audio-page.is-active { display:grid;animation:audioPageIn .55s cubic-bezier(.2,.75,.2,1) both; }
@keyframes audioPageIn { from{opacity:0;transform:translateX(22px);filter:blur(5px)} to{opacity:1;transform:none;filter:none} }
.audio-browser { margin-top:20px; }
.audio-browser-head { display:flex;justify-content:space-between;gap:12px;color:#859087;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.13); }
.track-list { margin:0;display:grid;grid-template-columns:1fr; }
.track-choice {
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;
  width:100%;text-align:left;padding:11px 8px;border:0;border-bottom:1px solid rgba(255,255,255,.1);
  background:transparent;color:#dfe2d8;cursor:pointer;transition:background .25s,padding .25s,color .25s;
}
.track-choice:hover,.track-choice.is-active { padding-left:14px;background:rgba(255,255,255,.045);color:var(--orange-bright); }
.track-choice .track-index { font:9px var(--mono);color:#788477; }
.track-choice strong { display:block;font-size:11px;font-weight:550;letter-spacing:.02em; }
.track-choice small { display:block;margin-top:4px;color:#8b958a;font:8px var(--mono);letter-spacing:.06em; }
.track-choice .track-status { color:#7c897d;font:7px var(--mono);letter-spacing:.12em; }
.track-choice.is-active .track-status { color:var(--orange-bright); }
.audio-section[data-track-theme="ad-astra"] .audio-cosmos > :not(.ad-astra-scene) { opacity:.12;transition:opacity 1s ease; }
.ad-astra-scene { position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity 1.2s ease; }
.audio-section[data-track-theme="ad-astra"] .ad-astra-scene { opacity:1; }
.astra-horizon {
  position:absolute;width:78vw;height:78vw;max-width:1080px;max-height:1080px;
  left:53%;top:108%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(206,220,216,.18);
  background:radial-gradient(circle at 50% 0%,rgba(202,218,216,.22),rgba(81,117,129,.12) 24%,rgba(12,24,31,.06) 48%,transparent 66%);
  box-shadow:0 -30px 110px rgba(126,164,174,.12),0 -2px 32px rgba(208,222,217,.1);
}
.astra-horizon::before,.astra-horizon::after {
  content:"";position:absolute;inset:5%;border:1px solid rgba(190,213,211,.12);border-radius:50%;
}
.astra-horizon::after { inset:13%;border-style:dashed;opacity:.55; }
.astra-starveil {
  position:absolute;inset:0;opacity:.8;
  background:
   radial-gradient(ellipse at 50% 78%,rgba(103,145,158,.18),transparent 44%),
   radial-gradient(ellipse at 18% 24%,rgba(157,172,183,.12),transparent 34%),
   radial-gradient(ellipse at 82% 36%,rgba(177,142,119,.1),transparent 36%);
}
.astra-arc { position:absolute;left:50%;top:105%;width:100vw;height:38vw;min-height:240px;border:1px solid rgba(199,216,215,.17);border-radius:50%;transform:translate(-50%,-50%) rotate(-12deg); }
.astra-arc-two { width:112vw;height:48vw;transform:translate(-50%,-50%) rotate(8deg);border-color:rgba(214,106,53,.15); }
.astra-coordinate { position:absolute;right:7%;top:23%;font:8px var(--mono);letter-spacing:.2em;color:rgba(200,215,209,.4); }
.audio-section[data-track-theme="ambient"] .cosmos-planet,
.audio-section[data-track-theme="ambient"] .cosmos-orbit { opacity:.18; }
.audio-section[data-track-theme="ambient"] .nebula-a { opacity:.55;filter:blur(78px); }
.audio-curated-page {
  position:relative;z-index:2;min-height:500px;grid-template-columns:1fr 1fr;align-items:center;
  border-top:1px solid rgba(225,232,220,.14);border-bottom:1px solid rgba(225,232,220,.14);
  padding:46px 4%;
}
.curated-index { position:relative;z-index:2;max-width:420px; }
.curated-index h3 { margin:26px 0 20px;font-size:clamp(46px,7vw,86px);line-height:.88;letter-spacing:-.07em;font-weight:600; }
.curated-index h3 i { color:var(--orange-bright);font-style:normal; }
.curated-index p { max-width:370px;color:#9ca69b;font-size:12px;line-height:1.9; }
.curated-empty { display:grid;gap:9px;max-width:320px;margin-top:38px;padding:17px;border:1px solid rgba(220,230,218,.17);background:rgba(255,255,255,.025); }
.curated-empty span,.curated-empty small { color:#788579;font:8px var(--mono);letter-spacing:.13em; }
.curated-empty b { color:#d5a078;font:10px var(--mono);letter-spacing:.1em;font-weight:500; }
.curated-empty i { display:block;width:100%;height:1px;background:linear-gradient(90deg,var(--orange),rgba(255,255,255,.08)); }
.curated-visual { position:relative;min-height:380px;display:grid;place-items:center;overflow:hidden; }
.curated-visual::before { content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(180,205,197,.15);border-radius:50%;box-shadow:0 0 0 36px rgba(180,205,197,.025),0 0 0 72px rgba(180,205,197,.018); }
.curated-orbit { position:absolute;width:88%;height:44%;border:1px solid rgba(198,215,208,.18);border-radius:50%;transform:rotate(-28deg); }
.curated-orbit.orbit-b { width:100%;height:58%;transform:rotate(36deg);border-style:dashed;border-color:rgba(214,106,53,.25); }
.curated-core { width:74px;height:74px;border:1px solid rgba(214,106,53,.65);transform:rotate(45deg);box-shadow:0 0 55px rgba(214,106,53,.12),inset 0 0 28px rgba(214,106,53,.08); }
.curated-visual>span { position:absolute;right:4%;bottom:8%;font:8px var(--mono);letter-spacing:.18em;color:#788579; }
@media(max-width:680px) {
  .audio-page-nav { gap:13px;margin-top:-8px; }
  .audio-page-btn { font-size:7px; }
  .audio-page-indicator { display:none; }
  .audio-curated-page { grid-template-columns:1fr;min-height:620px;padding:38px 2%; }
  .curated-visual { min-height:260px; }
  .astra-horizon { width:120vw;height:120vw; }
  .astra-coordinate { right:5%;top:14%;font-size:7px; }
}


/* AUDIO MECHANISM / lifted stylus at rest, lowered while transmitting */
.tonearm { transform:rotate(8deg); }
.tonearm.playing { transform:rotate(-22deg); }

/* AD ASTRA / Saturn-like orbital body, brighter nebulae and passing meteors */
.audio-section[data-track-theme="ad-astra"] .ad-astra-scene { opacity:1; }
.audio-section[data-track-theme="ad-astra"] .astra-starveil {
  opacity:1;
  background:
    radial-gradient(ellipse at 70% 42%,rgba(110,151,169,.22),transparent 37%),
    radial-gradient(ellipse at 29% 66%,rgba(132,102,130,.21),transparent 38%),
    radial-gradient(ellipse at 82% 78%,rgba(196,145,112,.15),transparent 31%),
    radial-gradient(ellipse at 46% 18%,rgba(77,119,143,.18),transparent 42%);
}
.astra-nebula {
  position:absolute;border-radius:50%;mix-blend-mode:screen;filter:blur(46px);
  pointer-events:none;will-change:transform,opacity;
}
.astra-nebula-one {
  width:62vw;height:35vw;left:10%;top:13%;
  background:radial-gradient(ellipse,rgba(91,145,165,.28),rgba(93,107,150,.12) 45%,transparent 72%);
  animation:astraNebulaDrift 25s ease-in-out infinite alternate;
}
.astra-nebula-two {
  width:47vw;height:40vw;right:-8%;top:33%;
  background:radial-gradient(ellipse,rgba(151,103,139,.23),rgba(90,112,145,.1) 48%,transparent 72%);
  animation:astraNebulaDrift 32s -9s ease-in-out infinite alternate-reverse;
}
.astra-nebula-three {
  width:56vw;height:30vw;left:24%;bottom:-12%;
  background:radial-gradient(ellipse,rgba(185,139,105,.18),rgba(74,130,145,.12) 48%,transparent 73%);
  animation:astraNebulaDrift 37s -16s ease-in-out infinite alternate;
}
@keyframes astraNebulaDrift {
  0%{transform:translate3d(-3%,2%,0) scale(.92);opacity:.65}
  100%{transform:translate3d(4%,-4%,0) scale(1.12);opacity:1}
}
.astra-saturn {
  position:absolute;right:1%;top:25%;width:clamp(300px,47vw,660px);aspect-ratio:1;
  transform:rotate(-7deg);animation:saturnDrift 28s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 70px rgba(123,166,176,.12));
}
.astra-planet-sphere {
  position:absolute;z-index:2;left:30%;top:29%;width:40%;height:40%;border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 28% 22%,rgba(229,228,207,.66),transparent 10%),
    radial-gradient(ellipse at 36% 28%,#9bafb0 0%,#647d87 22%,#304c5b 55%,#101b28 78%);
  box-shadow:inset -28px -18px 42px rgba(0,0,0,.76),inset 10px 7px 22px rgba(235,230,206,.2),0 0 55px rgba(119,161,174,.13);
}
.astra-planet-sphere::before {
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-linear-gradient(8deg,transparent 0 13px,rgba(220,218,196,.13) 14px 16px,transparent 17px 25px);
  mix-blend-mode:screen;opacity:.7;
}
.astra-planet-sphere::after {
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(112deg,transparent 35%,rgba(2,8,15,.65) 82%);
}
.astra-saturn-ring {
  position:absolute;left:-20%;top:33%;width:140%;height:34%;border-radius:50%;
  transform:rotate(-19deg) skewX(-11deg);
}
.ring-back {z-index:1;border:1px solid rgba(190,211,208,.36);box-shadow:0 0 10px rgba(145,184,187,.12);}
.ring-back-one {left:-24%;top:29%;width:148%;height:40%;border-width:2px;border-color:rgba(174,198,200,.4);}
.ring-back-two {left:-29%;top:24%;width:158%;height:50%;border-color:rgba(203,179,151,.28);border-style:dashed;}
.ring-back-three {left:-16%;top:36%;width:132%;height:27%;border-color:rgba(216,224,210,.23);border-width:3px;}
.ring-front {z-index:3;border:1px solid rgba(186,211,208,.46);box-shadow:0 0 12px rgba(146,192,192,.1);}
.ring-front-one {left:-24%;top:29%;width:148%;height:40%;border-width:2px;clip-path:inset(52% 0 0 0);}
.ring-front-two {left:-29%;top:24%;width:158%;height:50%;border-color:rgba(198,151,119,.42);clip-path:inset(54% 0 0 0);}
.ring-front-three {left:-17%;top:36%;width:134%;height:27%;border-color:rgba(228,228,207,.28);border-width:3px;clip-path:inset(56% 0 0 0);}
@keyframes saturnDrift {from{translate:0 10px}to{translate:-13px -15px}}
.astra-meteor {
  position:absolute;z-index:2;width:clamp(90px,13vw,190px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(192,221,224,.12) 28%,rgba(221,236,231,.9) 82%,transparent);
  transform:rotate(-34deg);opacity:0;filter:drop-shadow(0 0 5px rgba(185,219,222,.65));
}
.astra-meteor::after {
  content:"";position:absolute;right:18%;top:-1px;width:3px;height:3px;border-radius:50%;
  background:#e3eee5;box-shadow:0 0 9px 3px rgba(190,224,223,.65);
}
.meteor-one {left:14%;top:24%;animation:meteorPass 7.8s 1.2s ease-in infinite;}
.meteor-two {left:57%;top:16%;width:clamp(70px,9vw,130px);animation:meteorPass 11.5s 4.7s ease-in infinite;}
.meteor-three {left:38%;top:58%;width:clamp(80px,11vw,160px);animation:meteorPass 14s 8.5s ease-in infinite;}
@keyframes meteorPass {
  0%{opacity:0;translate:0 0}
  5%{opacity:.9}
  20%{opacity:.7;translate:170px 95px}
  25%,100%{opacity:0;translate:220px 123px}
}
@media(max-width:680px) {
  .astra-saturn {width:95vw;right:-28%;top:37%;opacity:.72;}
  .astra-nebula-one {width:100vw;height:65vw;left:-12%;top:20%;}
  .astra-nebula-two {width:90vw;height:70vw;right:-28%;top:38%;}
  .astra-nebula-three {width:100vw;height:60vw;left:0;bottom:3%;}
}
@media(prefers-reduced-motion:reduce) {
  .astra-nebula,.astra-saturn,.astra-meteor {animation:none!important;}
}

/* =========================================================
   SHIRO / explicit media entry, clearer archive tabs,
   and the tiny deep-field expedition of Below the Asteroids.
   ========================================================= */
.entry-gate {
  position:fixed;inset:0;z-index:12050;display:grid;place-items:center;overflow:hidden;
  color:#e8ebe2;background:#080d10;isolation:isolate;cursor:auto;
  transition:opacity .92s cubic-bezier(.72,0,.22,1),visibility .92s;
}
.entry-gate::before {
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(58,82,86,.16),transparent 43%),
    radial-gradient(ellipse at 82% 82%,rgba(201,105,58,.07),transparent 30%),
    linear-gradient(rgba(203,218,208,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(203,218,208,.035) 1px,transparent 1px);
  background-size:auto,auto,64px 64px,64px 64px;
  mask-image:radial-gradient(ellipse at center,#000 28%,rgba(0,0,0,.7) 68%,transparent 110%);
}
.entry-grain { position:absolute;inset:-50%;z-index:-1;opacity:.12;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.1) 4px,transparent 5px);transform:rotate(-8deg); }
.entry-head,.entry-bottom { position:absolute;left:clamp(20px,4vw,54px);right:clamp(20px,4vw,54px);display:flex;justify-content:space-between;gap:16px;color:rgba(219,228,216,.48);font:8px var(--mono);letter-spacing:.15em; }
.entry-head { top:clamp(22px,4vh,38px); }
.entry-bottom { bottom:clamp(20px,4vh,35px); }
.entry-center { width:min(560px,88vw);display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 0 28px; }
.entry-kicker { display:flex;align-items:center;gap:10px;color:#9ba79b;font:8px var(--mono);letter-spacing:.22em; }
.entry-kicker i,.entry-footnote i { display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px rgba(214,106,53,.7); }
.entry-center h1 { margin:24px 0 12px;color:#e9ece3;font-size:clamp(39px,7.7vw,77px);font-weight:500;line-height:.86;letter-spacing:-.065em; }
.entry-center h1 em { color:#b3bcb0;font-style:normal;font-weight:300; }
.entry-center p { margin:0;color:rgba(203,213,203,.55);font-size:11px;letter-spacing:.08em; }
.entry-drive { width:min(330px,68vw);height:126px;margin:31px auto 27px;perspective:700px; }
.entry-drive-frame { position:relative;width:100%;height:100%;border:1px solid rgba(183,201,189,.32);background:linear-gradient(135deg,rgba(160,183,171,.08),rgba(255,255,255,.012));box-shadow:0 20px 70px rgba(0,0,0,.24),inset 0 0 44px rgba(194,216,204,.025); }
.entry-drive-frame::before,.entry-drive-frame::after { content:"";position:absolute;left:12px;right:12px;height:1px;background:rgba(190,208,194,.13); }
.entry-drive-frame::before { top:12px; }.entry-drive-frame::after { bottom:12px; }
.drive-mark { position:absolute;top:22px;width:4px;height:4px;border:1px solid rgba(208,219,205,.42);border-radius:50%; }
.mark-a { left:21px; }.mark-b { right:21px; }
.drive-slot { position:absolute;left:50%;top:49%;width:74%;height:11px;transform:translate(-50%,-50%);border:1px solid rgba(181,198,185,.3);background:#05090b;box-shadow:inset 0 0 18px rgba(0,0,0,.9); }
.drive-slot i { position:absolute;left:50%;top:50%;width:18%;height:1px;transform:translate(-50%,-50%);background:var(--orange);box-shadow:0 0 12px rgba(214,106,53,.8); }
.entry-cassette { position:absolute;left:50%;top:50%;width:116px;height:56px;transform:translate(-50%,-50%);display:grid;place-items:center;background:linear-gradient(140deg,#26302d,#111817);border:1px solid rgba(195,208,193,.64);box-shadow:0 8px 24px rgba(0,0,0,.42);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s; }
.entry-cassette svg { width:94px;height:46px;fill:none;stroke:rgba(207,219,206,.68);stroke-width:1.3; }
.entry-cassette span { position:absolute;left:8px;bottom:5px;color:var(--orange-bright);font:5px var(--mono);letter-spacing:.16em; }
.entry-button { display:flex;align-items:center;justify-content:space-between;gap:40px;min-width:250px;padding:14px 17px;border:1px solid rgba(218,228,213,.46);background:rgba(218,228,213,.055);color:#edf0e7;font:9px var(--mono);letter-spacing:.16em;cursor:pointer;transition:background .25s,border-color .25s,transform .25s; }
.entry-button b { color:var(--orange-bright);font-size:15px;font-weight:400; }
.entry-button:hover { background:rgba(214,106,53,.13);border-color:var(--orange);transform:translateY(-2px); }
.entry-footnote { display:flex;align-items:center;gap:9px;margin-top:15px;color:rgba(192,204,192,.38);font:7px var(--mono);letter-spacing:.13em; }
.entry-gate.is-entering { opacity:0;visibility:hidden;pointer-events:none; }
.entry-gate.is-entering .entry-cassette { transform:translate(-50%,-145%) scale(.88);opacity:0; }
.entry-gate.is-entering .drive-slot i { width:60%;transition:width .35s; }
.entry-gate.is-entering .entry-drive-frame { box-shadow:0 0 55px rgba(214,106,53,.08),inset 0 0 55px rgba(214,106,53,.04); }
/* Pause the existing boot animation until the visitor explicitly enters. */
.intro:not(.is-booting) { opacity:0;visibility:hidden;animation:none!important; }
.intro:not(.is-booting) * { animation-play-state:paused!important; }
.intro.is-booting { opacity:1;visibility:visible;animation:none; }
.intro.is-booting * { animation-play-state:running!important; }

/* The two sound-archive destinations are now real, legible navigation tabs. */
.audio-page-nav {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:stretch;gap:10px;
  margin:-16px 0 34px;padding:0 0 18px;border-bottom:1px solid rgba(225,232,220,.18);
}
.audio-page-btn {
  position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:13px;
  min-height:62px;padding:10px 14px;border:1px solid rgba(225,232,220,.17);border-radius:2px;
  color:#aab5a9;background:rgba(255,255,255,.025);text-align:left;letter-spacing:normal;
  transition:background .28s,border-color .28s,color .28s,transform .28s;
}
.audio-page-btn::before { content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:2px;background:transparent;transition:background .28s; }
.audio-tab-index { color:#778579;font:10px var(--mono);letter-spacing:.1em; }
.audio-tab-copy { display:flex;flex-direction:column;gap:5px;min-width:0; }
.audio-tab-copy b { color:inherit;font:9px var(--mono);letter-spacing:.14em;font-weight:600; }
.audio-tab-copy small { color:#788579;font:7px var(--mono);letter-spacing:.07em; }
.audio-tab-arrow { color:#778579;font-size:14px;transition:transform .28s,color .28s; }
.audio-page-btn:hover { border-color:rgba(214,106,53,.55);background:rgba(255,255,255,.045);transform:translateY(-2px); }
.audio-page-btn.is-active { color:#f0f1e8;border-color:rgba(214,106,53,.65);background:linear-gradient(110deg,rgba(214,106,53,.13),rgba(255,255,255,.035) 68%);box-shadow:inset 0 0 24px rgba(214,106,53,.035); }
.audio-page-btn.is-active::before { background:var(--orange); }
.audio-page-btn.is-active .audio-tab-index,.audio-page-btn.is-active .audio-tab-arrow { color:var(--orange-bright); }
.audio-page-btn.is-active .audio-tab-arrow { transform:translate(2px,-2px); }
.audio-page-btn.is-active .audio-tab-copy small { color:#b19a85; }
.audio-page-indicator { display:flex;align-items:center;align-self:center;margin-left:2px;padding-left:13px;border-left:1px solid rgba(225,232,220,.14);color:#889487;font:7px var(--mono);letter-spacing:.1em;white-space:nowrap; }

/* Below the Asteroids: a small line-work vessel inside a huge, almost empty field. */
.audio-section[data-track-theme="below-asteroids"] .audio-cosmos > :not(.below-asteroids-scene) { opacity:.045;transition:opacity 1.1s ease; }
.below-asteroids-scene { position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity 1.25s ease; }
.audio-section[data-track-theme="below-asteroids"] .below-asteroids-scene { opacity:1; }
.below-starveil { position:absolute;inset:0;background:
  radial-gradient(ellipse at 70% 39%,rgba(79,111,127,.16),transparent 35%),
  radial-gradient(ellipse at 18% 75%,rgba(75,92,105,.12),transparent 35%),
  radial-gradient(circle at 21% 19%,rgba(232,239,226,.58) 0 1px,transparent 1.7px),
  radial-gradient(circle at 78% 25%,rgba(232,239,226,.38) 0 1px,transparent 1.7px),
  radial-gradient(circle at 45% 64%,rgba(232,239,226,.34) 0 1px,transparent 1.7px),
  radial-gradient(circle at 88% 72%,rgba(232,239,226,.42) 0 1px,transparent 1.7px),
  radial-gradient(circle at 8% 42%,rgba(232,239,226,.32) 0 1px,transparent 1.7px);
  background-size:auto,auto,173px 157px,217px 193px,251px 211px,191px 229px,233px 181px;opacity:.82; }
.below-nebula { position:absolute;border-radius:50%;filter:blur(64px);mix-blend-mode:screen;pointer-events:none; }
.below-nebula.nebula-one { width:50vw;height:28vw;left:36%;top:17%;background:radial-gradient(ellipse,rgba(91,130,149,.16),rgba(66,87,108,.07) 48%,transparent 74%);animation:belowNebulaDrift 29s ease-in-out infinite alternate; }
.below-nebula.nebula-two { width:36vw;height:27vw;left:-8%;bottom:6%;background:radial-gradient(ellipse,rgba(99,116,130,.12),transparent 72%);animation:belowNebulaDrift 37s -10s ease-in-out infinite alternate-reverse; }
.below-nebula.nebula-three { width:28vw;height:22vw;right:-6%;top:53%;background:radial-gradient(ellipse,rgba(167,104,73,.09),transparent 73%);animation:belowNebulaDrift 42s -18s ease-in-out infinite alternate; }
@keyframes belowNebulaDrift { to { transform:translate3d(3%,-4%,0) scale(1.12);opacity:.8; } }
.below-orbit-map { position:absolute;inset:-8% -4%;width:108%;height:116%;overflow:visible; }
.below-orbit-map ellipse,.below-orbit-map path { fill:none;stroke:rgba(178,203,204,.19);stroke-width:1; }
.below-orbit-map .orbit-primary { stroke:rgba(190,211,207,.34);stroke-width:1.15; }
.below-orbit-map .orbit-secondary { stroke:rgba(136,166,170,.12);stroke-dasharray:3 10; }
.below-orbit-map .orbit-ticks { stroke:rgba(209,221,210,.37);stroke-width:1.1; }
.below-spacecraft { position:absolute;right:19%;top:35%;width:clamp(106px,13vw,184px);opacity:.78;transform:rotate(-11deg);filter:drop-shadow(0 0 16px rgba(129,175,181,.13));animation:belowShipDrift 19s ease-in-out infinite alternate; }
.below-spacecraft svg { display:block;width:100%;overflow:visible; }
.below-spacecraft .ship-main { fill:rgba(109,142,148,.035);stroke:rgba(209,224,215,.79);stroke-width:1.25;stroke-linejoin:round; }
.below-spacecraft .ship-detail { fill:none;stroke:rgba(139,183,188,.48);stroke-width:.8; }
.below-spacecraft .ship-engine { fill:none;stroke:rgba(214,106,53,.8);stroke-width:1; }
.ship-signal { position:absolute;left:1%;top:50%;width:12px;height:12px;border:1px solid rgba(214,106,53,.7);border-radius:50%;transform:translate(-50%,-50%);animation:shipSignal 3.8s ease-in-out infinite; }
@keyframes belowShipDrift { to { translate:8px -4px;rotate:1.5deg; } }
@keyframes shipSignal { 0%,100%{opacity:.25;box-shadow:0 0 0 0 rgba(214,106,53,.1)} 50%{opacity:1;box-shadow:0 0 0 8px rgba(214,106,53,0)} }
.below-asteroid { position:absolute;display:block;border:1px solid rgba(162,184,183,.2);border-radius:39% 61% 53% 47%;background:radial-gradient(circle at 32% 27%,rgba(173,188,181,.18),rgba(51,65,70,.14) 43%,rgba(8,13,16,.4) 76%);box-shadow:inset -7px -6px 12px rgba(0,0,0,.32); }
.asteroid-a { width:24px;height:18px;left:13%;top:34%;transform:rotate(28deg); }
.asteroid-b { width:40px;height:32px;right:8%;top:19%;transform:rotate(-19deg);opacity:.5; }
.asteroid-c { width:13px;height:11px;left:34%;bottom:19%;filter:blur(1px);opacity:.45; }
.asteroid-d { width:62px;height:48px;left:-2%;bottom:5%;filter:blur(3px);opacity:.3; }
.asteroid-e { width:18px;height:15px;right:29%;bottom:12%;transform:rotate(48deg);opacity:.35; }
.below-beacon { position:absolute;display:flex;align-items:center;gap:8px;color:rgba(188,203,195,.42);font:7px var(--mono);letter-spacing:.14em; }
.below-beacon i { width:4px;height:4px;border-radius:50%;background:rgba(214,106,53,.82);box-shadow:0 0 10px rgba(214,106,53,.5); }
.beacon-one { left:15%;top:24%; }.beacon-two { right:12%;bottom:25%;opacity:.58; }
.below-coordinate { position:absolute;color:rgba(177,195,190,.31);font:7px var(--mono);letter-spacing:.16em; }
.coordinate-a { left:5%;top:15%; }.coordinate-b { right:5%;top:15%; }
.below-scene-caption { position:absolute;right:6%;bottom:12%;color:rgba(181,201,197,.25);font:7px var(--mono);letter-spacing:.18em; }

/* A quiet external link beneath the primary code-profile link. */
.friend-link { display:flex;align-items:center;gap:11px;width:max-content;max-width:100%;margin-top:10px;padding:9px 12px;border:1px solid rgba(224,231,218,.16);color:rgba(225,232,220,.67);transition:background .25s,border-color .25s,color .25s,transform .25s; }
.friend-link-mark { display:grid;place-items:center;width:23px;height:23px;border:1px solid rgba(214,106,53,.45);color:var(--orange-bright);font-size:12px; }
.friend-link>span:nth-child(2) { display:flex;flex-direction:column;gap:3px; }
.friend-link small { color:#8f9a8d;font:6px var(--mono);letter-spacing:.13em; }
.friend-link b { color:inherit;font:8px var(--mono);letter-spacing:.16em;font-weight:500; }
.friend-link>i { margin-left:22px;color:#879287;font:normal 6px var(--mono);letter-spacing:.1em; }
.friend-link:hover { color:#f0f1e8;border-color:rgba(214,106,53,.55);background:rgba(214,106,53,.08);transform:translateX(4px); }
.now-playing-cover { transition:opacity .2s ease; }

@media(max-width:760px) {
  .audio-page-nav { grid-template-columns:1fr 1fr;margin-bottom:26px;gap:8px; }
  .audio-page-btn { grid-template-columns:22px minmax(0,1fr);gap:8px;min-height:58px;padding:9px 8px; }
  .audio-tab-copy b { font-size:7px;letter-spacing:.08em; }
  .audio-tab-copy small { font-size:6px;letter-spacing:0; }
  .audio-tab-arrow { display:none; }
  .audio-page-indicator { grid-column:1/-1;justify-content:flex-end;margin:0;padding:7px 0 0;border:0; }
  .below-spacecraft { right:13%;top:39%;width:clamp(96px,22vw,148px); }
  .below-coordinate { font-size:6px; }
  .entry-head,.entry-bottom {font-size:6px;letter-spacing:.1em;}
  .entry-center h1 { margin-top:20px; }
  .entry-drive { margin:26px auto 22px; }
}
@media(max-width:440px) {
  .audio-tab-copy small { display:none; }
  .audio-page-btn { min-height:48px; }
  .below-scene-caption { right:5%;bottom:9%;font-size:6px; }
  .coordinate-b { display:none; }
  .entry-bottom span:nth-child(2) {display:none;}
}
@media(prefers-reduced-motion:reduce) {
  .entry-gate,.entry-cassette,.audio-page-btn,.below-nebula,.below-spacecraft,.ship-signal { transition:none!important;animation:none!important; }
}
.entry-button:focus-visible,.audio-page-btn:focus-visible,.friend-link:focus-visible { outline:1px solid var(--orange-bright);outline-offset:4px; }
/* The cassette waits just below the slot, then slides inward on confirmation. */
.entry-cassette { top:76%;transform:translate(-50%,-50%) translateY(9px);transition:top .78s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s; }
.entry-gate.is-entering .entry-cassette { top:49%;transform:translate(-50%,-50%) scale(.72);opacity:0; }
.below-spacecraft { width:clamp(95px,10.5vw,150px); }
@media(max-width:760px) { .below-spacecraft { width:clamp(92px,22vw,142px); } }


/* Quiet text navigation for the two audio archive destinations. */
.audio-page-nav {
  display:flex;align-items:center;justify-content:flex-start;gap:clamp(22px,4vw,54px);
  margin:-14px 0 30px;padding:0;border:0;background:transparent;
}
.audio-page-btn {
  position:relative;display:inline-flex;align-items:baseline;gap:10px;min-height:0;
  padding:0 0 9px;border:0;border-radius:0;background:transparent;box-shadow:none;
  color:rgba(216,224,214,.48);text-align:left;transform:none;
  transition:color .2s ease;
}
.audio-page-btn::before { content:none; }
.audio-page-btn::after {
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.audio-page-btn:hover { border:0;background:transparent;transform:none;color:#e8ece2; }
.audio-page-btn.is-active { border:0;background:transparent;box-shadow:none;color:#f0f1e8; }
.audio-page-btn.is-active::after { transform:scaleX(1); }
.audio-tab-index { color:#758176;font-size:8px; }
.audio-page-btn.is-active .audio-tab-index { color:var(--orange-bright); }
.audio-tab-copy { display:inline-flex;flex-direction:row;align-items:baseline;gap:9px; }
.audio-tab-copy b { color:inherit;font:600 9px var(--mono);letter-spacing:.13em; }
.audio-tab-copy small { color:rgba(156,169,155,.55);font:7px var(--mono);letter-spacing:.045em; }
.audio-page-btn.is-active .audio-tab-copy small { color:rgba(199,166,138,.8); }
.audio-tab-arrow,.audio-page-indicator { display:none!important; }

/* Lower-cost motion: favor compositor-friendly opacity/transform over live blur filters. */
.reveal { filter:none!important;transition:opacity .62s var(--ease),transform .62s var(--ease)!important; }
.reveal.visible { filter:none!important; }
@keyframes sectionEnter {
  from { opacity:0;transform:translate3d(0,18px,0); }
  to { opacity:1;transform:translate3d(0,0,0); }
}
@keyframes audioPageIn { from { opacity:0;transform:translate3d(14px,0,0); } to { opacity:1;transform:none; } }
.below-asteroids-scene { visibility:hidden; }
.audio-section[data-track-theme="below-asteroids"] .below-asteroids-scene { visibility:visible; }
.below-nebula { filter:blur(42px);mix-blend-mode:normal;animation-play-state:paused; }
.below-spacecraft,.ship-signal { animation-play-state:paused; }
.audio-section[data-track-theme="below-asteroids"] .below-nebula,
.audio-section[data-track-theme="below-asteroids"] .below-spacecraft,
.audio-section[data-track-theme="below-asteroids"] .ship-signal { animation-play-state:running; }
@media(max-width:760px) {
  .audio-page-nav { display:flex;flex-wrap:wrap;gap:16px 24px;margin:-8px 0 24px; }
  .audio-page-btn { min-height:0;padding:0 0 8px; }
  .audio-tab-copy { flex-direction:column;align-items:flex-start;gap:3px; }
  .audio-tab-copy b { font-size:8px; }
  .audio-tab-copy small { display:block;font-size:6px; }
}
@media(max-width:440px) { .audio-tab-copy small { display:none; } }


/* Stop off-screen decorative motion so it does not compete with scrolling. */
#about:not(.is-in-view) *,
#audio:not(.is-in-view) *,
#archiveDirectory:not(.is-in-view) *,
#contact:not(.is-in-view) * { animation-play-state:paused !important; }