/* Same tokens as the site: aura / cream / ink / copper, Space Grotesk + IBM Plex Mono */
.page-about{
  --bg:#e3d5c9; --bg-2:#d9c8bc; --card:#efe6dc;
  --ink:#15160f; --ink-2:#3a3a31; --muted:#6a665b;
  --line:rgba(21,22,15,.13); --line-2:rgba(21,22,15,.28);
  --copper:#9a5334;
  /* chocolate carton */
  --c-front:#7b4a2b; --c-right:#673d23; --c-left:#5d371f; --c-back:#4b2b18; --c-in:#3a2112;
  --c-flap:#87532f; --c-flap-2:#6f4326; --c-tape:#b98758; --c-ink:rgba(25,12,5,.62);
  --shadow:rgba(50,30,15,.35);
  --head:linear-gradient(180deg, rgba(150,146,132,.94), rgba(118,114,101,.94)); --head-ink:#f4efe6;
  --disp:'Space Grotesk', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
html[data-theme="dark"] .page-about{
  --bg:#15160f; --bg-2:#1b1c15; --card:#1d1e17;
  --ink:#f2ece1; --ink-2:#d6cfc2; --muted:#a39c8e;
  --line:rgba(242,236,225,.12); --line-2:rgba(242,236,225,.26);
  --copper:#d1825c; --shadow:rgba(0,0,0,.6);
  --head:linear-gradient(180deg, rgba(40,41,33,.94), rgba(29,30,23,.94)); --head-ink:#f2ece1;
  color-scheme:dark;
}
.page-about *{box-sizing:border-box}
.page-about html{scroll-behavior:smooth}
.page-about body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--disp); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:144px 100%; transition:background-color .4s, color .4s}
.page-about a{color:inherit; text-decoration:none}
.page-about button{font:inherit; color:inherit}
.page-about .container{max-width:1240px; margin:0 auto; padding:0 32px}
@media (max-width:1100px){
}
@media (max-width:520px){ }

/* ---------- Hero ---------- */
.page-about .hero{position:relative; min-height:100svh; display:flex; flex-direction:column; padding-top:150px; background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%)}
.page-about .hero-grid{flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-areas:'text stage' 'read stage'; gap:28px 48px; align-items:center; padding-bottom:40px}
.page-about .h-text{grid-area:text; align-self:end}
.page-about .h-read{grid-area:read; align-self:start}
.page-about .h-stage{grid-area:stage}
.page-about .kicker{display:inline-block; font:500 14px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.page-about h1{margin:18px 0 0; font-weight:500; font-size:clamp(44px, 5.6vw, 92px); line-height:.98; letter-spacing:-.02em}
.page-about h1 .line{display:block; overflow:hidden; padding-bottom:.06em}
.page-about h1 .line span{display:inline-block; transform:translateY(105%); transition:transform 1s var(--ease)}
#about-hero.ready h1 .line span{transform:none}
#about-hero.ready h1 .line + .line span{transition-delay:.1s}
.page-about .subline{max-width:46ch; margin:22px 0 0; font-size:19px; line-height:1.55; color:var(--ink-2)}
.page-about .readout{margin:0; max-width:540px; border:1px solid var(--line-2); padding:6px 22px; font:500 13.5px var(--mono); letter-spacing:.1em; background:color-mix(in srgb, var(--card) 45%, transparent)}
.page-about .readout div{display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--line)}
.page-about .readout div:last-child{border-bottom:0}
.page-about .readout dt{color:var(--muted)} .readout dd{margin:0; text-align:right}

/* ---------- Stage ---------- */
.page-about .stage{position:relative; height:clamp(340px, 46vw, 600px); perspective:1500px; overflow:hidden}
.page-about .scaler{position:absolute; left:50%; top:58%; width:0; height:0; transform:scale(var(--k,1)); transform-style:preserve-3d}
.page-about .tilt{transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform 1.2s var(--ease)}
@media (hover:none){ .tilt{animation:sway 9s ease-in-out infinite} }
@keyframes sway{0%,100%{transform:rotateY(-4deg)}50%{transform:rotateY(4deg)}}
.page-about .ground{position:absolute; left:-230px; top:70px; width:460px; height:110px; border-radius:50%; background:radial-gradient(closest-side, var(--shadow), transparent); transform:rotateX(90deg) translateZ(-96px); filter:blur(6px)}
.page-about .box{position:absolute; left:-130px; top:-95px; width:260px; height:190px; transform-style:preserve-3d; transform:rotateX(-20deg) rotateY(-32deg)}
.page-about .box.hop{animation:hop 1s var(--ease)}
@keyframes hop{30%{transform:rotateX(-20deg) rotateY(-32deg) translateY(-26px)}60%{transform:rotateX(-20deg) rotateY(-24deg) translateY(0)}}
#about-hero.ready .box-in{animation:boxIn 1.2s var(--ease) backwards .2s}
@keyframes boxIn{from{opacity:0; transform:translateY(80px)}}
.page-about .box-in{position:absolute; inset:0; transform-style:preserve-3d}
.page-about .f{position:absolute; backface-visibility:visible}
.page-about .f-front{left:0; top:0; width:260px; height:190px; background:var(--c-front); transform:translateZ(100px)}
.page-about .f-back{left:0; top:0; width:260px; height:190px; background:var(--c-back); transform:rotateY(180deg) translateZ(100px)}
.page-about .f-left{left:30px; top:0; width:200px; height:190px; background:var(--c-left); transform:rotateY(-90deg) translateZ(130px)}
.page-about .f-right{left:30px; top:0; width:200px; height:190px; background:var(--c-right); transform:rotateY(90deg) translateZ(130px)}
.page-about .f-bottom{left:0; top:-5px; width:260px; height:200px; background:var(--c-in); transform:rotateX(-90deg) translateZ(95px)}
.page-about .f-front::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.18), transparent 26%, transparent 80%, rgba(0,0,0,.12)); pointer-events:none}
.page-about .f-front::after, .page-about .f-right::after{content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(0,0,0,.12)}
.page-about .print{position:absolute; left:0; right:0; top:46px; text-align:center; color:var(--c-ink); text-transform:uppercase}
.page-about .print b{display:block; font:700 46px/1 var(--disp); letter-spacing:.06em; transform:scaleY(1.08)}
.page-about .print span{display:block; margin-top:10px; font:600 11px var(--mono); letter-spacing:.32em}
.page-about .marks{position:absolute; left:14px; bottom:14px; display:flex; gap:6px; color:var(--c-ink)}
.page-about .marks svg{width:16px; height:16px}
.page-about .f-right .side{position:absolute; left:16px; bottom:16px; font:600 10px var(--mono); letter-spacing:.24em; color:var(--c-ink); text-transform:uppercase; line-height:1.6}
.page-about .flap{position:absolute; transform-origin:50% 100%; backface-visibility:visible; transition:transform .75s cubic-bezier(.55,0,.2,1)}
.page-about .fl-front{left:0; top:-100px; width:260px; height:100px; background:var(--c-flap); transform:translateZ(100px) rotateX(var(--a,-58deg))}
.page-about .fl-back{left:0; top:-101px; width:260px; height:100px; background:var(--c-flap-2); transform:rotateY(180deg) translateZ(100px) rotateX(var(--a,-58deg))}
.page-about .fl-left{left:30px; top:-130px; width:200px; height:130px; background:var(--c-flap-2); transform:rotateY(-90deg) translateZ(130px) rotateX(var(--b,-68deg))}
.page-about .fl-right{left:30px; top:-130px; width:200px; height:130px; background:var(--c-flap); transform:rotateY(90deg) translateZ(130px) rotateX(var(--b,-68deg))}
.page-about .box.closed{--a:90deg; --b:89deg}
.page-about .box.closed .fl-front, .page-about .box.closed .fl-back{transition-delay:.22s}
.page-about .tape{position:absolute; left:107px; top:-5px; width:46px; height:200px; background:var(--c-tape); transform-origin:50% 50%; transform:rotateX(90deg) translateZ(97px) scaleY(0); opacity:0; transition:transform .5s var(--ease), opacity .2s}
.page-about .box.closed .tape{opacity:.95; transform:rotateX(90deg) translateZ(97px) scaleY(1); transition-delay:.85s}
.page-about .spr{position:absolute; left:0; top:0; width:132px; height:92px; margin:-46px 0 0 -66px; transform-style:preserve-3d; opacity:0; will-change:transform}
.page-about .spr .bob{width:100%; height:100%; animation:bob 3.4s ease-in-out infinite; animation-delay:var(--bd)}
.page-about .spr svg{display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 10px 8px rgba(40,20,10,.22))}
@keyframes bob{50%{transform:translateY(-10px)}}

.page-about .steps{position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:22px; margin:0; padding:0; list-style:none; font:500 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.page-about .steps li{display:flex; align-items:center; gap:8px; transition:color .4s}
.page-about .steps li::before{content:""; width:16px; height:1px; background:currentColor; transition:width .5s var(--ease)}
.page-about .steps li.on{color:var(--ink)}
.page-about .steps li.on::before{width:30px}
.page-about .stage-ctrl{position:absolute; right:0; top:0; border:1px solid var(--line-2); background:none; height:34px; padding:0 12px; cursor:pointer; font:500 11.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.page-about .stage-ctrl:hover{border-color:var(--ink)}

/* ---------- Strip ---------- */
.page-about .hero-strip{border-top:1px solid var(--line-2)}
.page-about .strip{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px 40px; padding:22px 0 26px}
.page-about .strip-list{display:flex; flex-wrap:wrap; gap:18px 60px}
.page-about .strip-list div{font:500 15px var(--mono); letter-spacing:.06em}
.page-about .strip-list span{display:block; margin-bottom:6px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.page-about .tagline{font:500 14px var(--mono); letter-spacing:.24em; text-transform:uppercase}

.page-about .rv{opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--dl,0s)}
#about-hero.ready .rv{opacity:1; transform:none}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
.page-about .hero{min-height:auto}
.page-about .hero-grid{grid-template-columns:1fr 1fr; grid-template-areas:'text text' 'stage stage' 'read read'; gap:24px 32px}
.page-about .stage{height:clamp(360px, 62vw, 520px)}
.page-about .readout{max-width:none; display:grid; grid-template-columns:1fr 1fr; column-gap:32px}
.page-about .readout div:nth-last-child(2){border-bottom:0}
}
/* ---------- Phone ---------- */
@media (max-width:640px){
.page-about .container{padding:0 18px}
.page-about .hero{padding-top:118px}
.page-about .subline{font-size:17px}
.page-about .stage{height:clamp(300px, 92vw, 400px)}
.page-about .readout{display:block; padding:4px 16px; margin-bottom:12px}
.page-about .readout div:nth-last-child(2){border-bottom:1px solid var(--line)}
.page-about .readout dd{font-size:12.5px}
.page-about .steps{gap:12px; font-size:10.5px; letter-spacing:.1em}
.page-about .steps li::before{width:10px} .steps li.on::before{width:18px}
.page-about .strip-list{flex-direction:column; gap:14px}
}
.page-about html.still *{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition:none !important}
.page-about .rv{opacity:1; transform:none} h1 .line span{transform:none}
}