/* Astrid and the Singularity · Lost Futures Spaceport. Source: b4ndz/_gen/static/css/astrid.css */
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/michroma-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:optional;src:url(../fonts/newsreader-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:optional;src:url(../fonts/newsreader-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plexmono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plexmono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira Stencil One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/stencil-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader Fallback';src:local('Georgia'),local('Times New Roman');size-adjust:92.5%;ascent-override:79.5%;descent-override:28.7%;line-gap-override:0%}
@font-face{font-family:'Plex Mono Fallback';src:local('Courier New'),local('Courier');size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}
@font-face{font-family:'Michroma Fallback';src:local('Arial'),local('Helvetica');size-adjust:142.6%;ascent-override:81.1%;descent-override:18.6%;line-gap-override:0%}
@font-face{font-family:'Stencil Fallback';src:local('Arial'),local('Helvetica');size-adjust:107.7%;ascent-override:105.4%;descent-override:40.8%;line-gap-override:0%}
:root{
--night:#0A1418; --petrol:#12333A; --petrol-2:#0f2a30; --teal-mute:#2E6B72;
--dusk:#1b1712; --umber:#3A2C22; --bronze:#A96A2C;
--gold:#C9A24B; --gold-hi:#E4C374; --amber:#F0A63C; --bone:#E3D6C3; --bone-dim:#cdc1ab;
--cyan:#5FE8E0; --rust:#B5472F; --rust-hi:#cf5a3f; --gunmetal:#6B6E70; --clyde:#d9c08a;
--f-display:'Michroma','Michroma Fallback','Eurostile',sans-serif;
--f-body:'Newsreader','Newsreader Fallback','Iowan Old Style',Georgia,serif;
--f-mono:'IBM Plex Mono','Plex Mono Fallback',ui-monospace,monospace;
--f-stencil:'Saira Stencil One','Stencil Fallback',var(--f-display);
--radius-port:999px; --radius-badge:10px;
--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--night);color:var(--bone);font-family:var(--f-body);font-size:19px;line-height:1.6;text-rendering:optimizeLegibility;overflow-x:hidden}
body.dusk{background:var(--dusk)}
img{max-width:100%;display:block;height:auto}
a{color:var(--cyan);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#9ff2ec}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--cyan);color:var(--night);padding:10px 14px;z-index:50;font-family:var(--f-mono)}
.skip:focus{left:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{text-wrap:balance}
.pinstripe{height:7px;border:0;border-top:2px solid var(--rust);border-bottom:2px solid var(--gold);margin:0}
.badge{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-stencil);letter-spacing:.08em;text-transform:uppercase;
border:1.5px solid currentColor;border-radius:var(--radius-badge);padding:.18em .7em .12em;font-size:.78rem;line-height:1.4;color:var(--gold);text-decoration:none;white-space:nowrap}
a.badge{min-height:44px;padding-inline:1em}
a.badge:hover{color:var(--gold-hi)}
.badge--cyan{color:var(--cyan)}
.halo{--s:38px;width:var(--s);height:var(--s);border-radius:50%;flex:none;
background:radial-gradient(circle,var(--night) 0 26%,transparent 27%),repeating-conic-gradient(var(--gold) 0 4deg,transparent 4deg 15deg);
-webkit-mask:radial-gradient(circle,#000 0 49%,transparent 50%);mask:radial-gradient(circle,#000 0 49%,transparent 50%);
filter:drop-shadow(0 0 6px rgba(240,166,60,.45))}
.dotmatrix{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
text-shadow:0 0 6px rgba(240,166,60,.55);background:radial-gradient(rgba(240,166,60,.10) 1px,transparent 1.4px) 0 0/4px 4px,#0d0b08;
padding:.55em 0;border-block:1px solid #2a2219;padding-top:max(.55em,env(safe-area-inset-top))}
.dotmatrix .wrap{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dotmatrix b{color:var(--bone);font-weight:500;text-shadow:none}
.dotmatrix a{color:inherit;text-decoration:none}
.dotmatrix a:hover{color:var(--gold-hi)}
.dotmatrix .sep{opacity:.6;margin-inline:.8em}
.dotmatrix .right{float:right;margin-left:2em}
.topbar{display:flex;align-items:center;gap:22px;padding:14px 0;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone);min-height:44px}
.brand span{font-family:var(--f-display);font-size:.8rem;letter-spacing:.14em;line-height:1.25;text-transform:uppercase}
.brand small{display:block;color:var(--gold);font-size:.62rem;letter-spacing:.24em}
.nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav a{font-family:var(--f-display);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);text-decoration:none;padding:14px 0}
.nav a:hover,.nav a[aria-current]{color:var(--gold-hi)}
.mnav{display:none;margin-left:auto}
.mnav summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;gap:.6em;padding:0 14px;border-radius:999px;
box-shadow:inset 0 0 0 1.5px var(--gold);font-family:var(--f-display);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary i{width:16px;height:10px;border-block:2px solid currentColor;position:relative}
.mnav summary i::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid currentColor}
.mnav[open] summary{color:var(--gold-hi)}
.mnav nav{position:absolute;right:0;left:0;top:100%;z-index:40;background:#0d0b08;border:1px solid #3a2f22;border-radius:14px;padding:8px 0;
box-shadow:0 20px 50px rgba(0,0,0,.6);display:grid}
.mnav nav a{display:flex;align-items:center;min-height:48px;padding:0 20px;font-family:var(--f-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);text-decoration:none;border-top:1px dashed #241d15}
.mnav nav a:first-child{border-top:0}
.mnav nav a[aria-current]{color:var(--gold-hi)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 1.3em;border-radius:var(--radius-port);
font-family:var(--f-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;white-space:nowrap}
.btn--follow{background:var(--rust);color:#fff4e6;box-shadow:inset 0 0 0 2px rgba(255,220,180,.18),0 0 0 3px rgba(181,71,47,.25)}
.btn--follow:hover{background:#c4502f;color:#fff}
.btn--ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn--ghost:hover{color:var(--gold-hi)}
.btn .dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.btn--sm{min-height:44px;padding:0 1em;font-size:.64rem}
.lock{position:relative}
.lock::before,.lock::after{content:"";position:absolute;width:30px;height:30px;border:2px solid var(--cyan);pointer-events:none;filter:drop-shadow(0 0 4px rgba(95,232,224,.6));z-index:2;display:none}
.lock.locked::before,.lock.locked::after,.lock.locked .lock-tag{display:block}
.lock .lock-tag{display:none}
.lock::before{left:var(--lx);top:var(--ly);border-right:0;border-bottom:0}
.lock::after{left:calc(var(--lx) + var(--lw));top:calc(var(--ly) + var(--lh));border-left:0;border-top:0;transform:translate(-100%,-100%)}
.lock .lock-tag{position:absolute;right:6%;top:calc(var(--ly) + var(--lh) + 14px);z-index:2;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
color:var(--cyan);background:rgba(6,10,12,.86);box-shadow:inset 0 0 0 1px rgba(95,232,224,.55);padding:3px 8px;text-transform:uppercase;white-space:nowrap}
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.18;mix-blend-mode:overlay;pointer-events:none;border-radius:inherit}
.sky{position:relative;background:#14110d}
.sky-img{position:absolute;inset:0;background:url(../img/city_dusk.webp) center 35%/cover no-repeat;opacity:.55}
.sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,13,.35) 0%,rgba(20,17,13,.15) 40%,var(--dusk) 100%);pointer-events:none}
.sky>*{position:relative;z-index:1}
.sky .topbar{z-index:30}
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:stretch;padding:28px 0 64px}
.port{margin:0;border-radius:48% 48% 18px 18px / 30% 30% 18px 18px;overflow:hidden;min-height:560px;
box-shadow:0 0 0 2px var(--gold),0 0 0 9px #14110d,0 0 0 11px rgba(201,162,75,.45),0 30px 80px rgba(0,0,0,.6)}
.port img,.port picture{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hero-copy{display:flex;flex-direction:column;justify-content:flex-start}
.kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
h1.title{font-family:var(--f-display);font-weight:400;font-size:clamp(3.2rem,8.5vw,7.4rem);line-height:.92;letter-spacing:.02em;margin:.2em 0 .3em;color:var(--bone);text-shadow:0 2px 0 #000,0 0 40px rgba(240,166,60,.25)}
.title em{font-style:normal;color:var(--gold)}
.lede{font-size:1.18rem;max-width:34ch;color:var(--bone);margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sysline{margin-top:22px;font-family:var(--f-mono);font-size:.86rem;color:var(--cyan);letter-spacing:.04em}
.hero-copy .sysline{margin-bottom:0}
.sysline::after{content:"▌";animation:blink 1.1s steps(1) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.screen{margin-top:28px;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 0 0 1.5px rgba(201,162,75,.6);background:#0d0b08}
.screen img,.screen picture{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.screen .facade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,6,.9),rgba(10,8,6,.35) 50%,transparent 75%);border:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 18px;color:var(--bone);width:100%;text-align:left;font:inherit}
button.facade{cursor:pointer}
.screen .play{flex:none;width:58px;height:58px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(201,162,75,.25)}
.screen .play::before{content:"";border-left:16px solid #14110d;border-block:10px solid transparent;margin-left:4px}
.screen .label{font-family:var(--f-display);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.chip{display:inline-block;margin-top:8px;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:6px;background:rgba(6,10,12,.86);color:var(--amber);box-shadow:inset 0 0 0 1px rgba(240,166,60,.6)}
.chip--pending{color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(95,232,224,.7)}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sec{padding:64px 0 32px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.sec-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--gold)}
.board{background:radial-gradient(rgba(240,166,60,.07) 1px,transparent 1.4px) 0 0/4px 4px,#0d0b08;border:1px solid #2a2219;border-radius:14px;overflow:hidden}
.board table{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:.86rem}
.board th{text-align:left;font-weight:400;font-size:.78rem;letter-spacing:.22em;color:var(--bone-dim);padding:12px 18px;border-bottom:1px solid #2a2219;text-transform:uppercase}
.board td{padding:15px 18px;border-bottom:1px dashed #241d15;color:var(--amber);text-shadow:0 0 6px rgba(240,166,60,.4);vertical-align:top}
.board tr:last-child td{border-bottom:0}
.board th:last-child,.board td:last-child{width:1%;white-space:nowrap;text-align:right}
.board th:first-child,.board td:first-child{width:4.5em}
.board .filed{width:7em;white-space:nowrap}
.board td.t a,.board td.t .tt{color:var(--bone);text-shadow:none;text-decoration:none;font-family:var(--f-body);font-size:1.1rem}
.board td.t a:hover{color:var(--gold-hi)}
.board td.t small{display:block;color:var(--bone);opacity:.95;font-family:var(--f-body);font-size:1rem;line-height:1.45;text-shadow:none;margin-top:3px}
.st{display:inline-block;padding:1px 8px;border-radius:6px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.st--landed{color:var(--amber);box-shadow:inset 0 0 0 1px rgba(240,166,60,.6)}
.st--boarding{color:#06201f;background:var(--cyan);text-shadow:none;box-shadow:0 0 12px rgba(95,232,224,.45)}
.st--hangar{color:var(--bone-dim);box-shadow:inset 0 0 0 1px #6a5c48;text-shadow:none}
.board tr.now td{background:rgba(95,232,224,.05)}
.songs-note{margin:14px 0 0;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.04em;color:var(--cyan)}
.counter{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.counter .num{font-family:var(--f-display);font-size:2.2rem;color:var(--amber);text-shadow:0 0 14px rgba(240,166,60,.45)}
.counter .lbl{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.argument{position:relative;margin:48px 0;padding:120px 0;overflow:hidden}
.argument .bg{position:absolute;inset:0;background:url(../img/spaceport.webp) center 62%/cover;opacity:.42}
.argument::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dusk) 0%,rgba(27,23,18,.86) 45%,rgba(27,23,18,.35) 100%),linear-gradient(0deg,rgba(27,23,18,.7),transparent 60%)}
.argument blockquote{position:relative;z-index:1;margin:0;max-width:30ch;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.3;font-style:italic}
.argument blockquote strong{font-style:normal;color:var(--gold-hi);font-weight:500}
.argument cite{position:relative;z-index:1;display:block;margin-top:22px;font-style:normal;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #3a2f22}
.crew>div{padding:26px 26px 30px 0;border-bottom:1px solid #3a2f22}
.crew>div+div{padding-left:26px;border-left:1px solid #3a2f22}
.crew h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem;letter-spacing:.06em;margin:.5em 0 .2em}
.crew h3 a{color:var(--bone);text-decoration:none}
.crew h3 a:hover{color:var(--gold-hi)}
.crew p{margin:0;color:var(--bone);opacity:.86;font-size:1.02rem}
.role{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.producers-line{margin-top:22px;font-size:1.02rem;color:var(--bone-dim)}
.producers-line b{color:var(--bone);font-weight:500}
.pagehead{padding:30px 0 34px}
.pagehead h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,5vw,3.2rem);line-height:1.08;letter-spacing:.02em;margin:.3em 0 .2em;text-shadow:0 2px 0 #000}
.pagehead p.lede{max-width:46ch;margin:0}
.prose{max-width:640px}
.prose h2{font-family:var(--f-display);font-weight:400;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:2.2em 0 .6em}
.prose p{margin:0 0 1.05em}
.prose ul{padding-left:1.1em}
.prose li{margin:.35em 0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:linear-gradient(180deg,#221c15,#18140f);border-radius:16px;padding:24px;box-shadow:inset 0 0 0 1px #3a2f22}
.card h2,.card h3{font-family:var(--f-display);font-weight:400;letter-spacing:.06em;margin:.4em 0 .3em;font-size:1.4rem}
.card h2 a,.card h3 a{color:var(--bone);text-decoration:none}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0;font-size:.98rem}
.card dt{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);padding-top:.3em}
.card dd{margin:0}
.card blockquote,.quote{margin:16px 0 0;font-style:italic;color:var(--gold-hi)}
.quote cite,.card cite{display:block;font-style:normal;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-top:6px}
.credits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;font-family:var(--f-mono);font-size:.86rem;border-top:1px solid #3a2f22}
.credits div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed #3a2f22}
.credits dt{color:var(--amber);letter-spacing:.14em;text-transform:uppercase;font-size:.74rem}
.credits dd{margin:0;color:var(--bone);text-align:right}
.liner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.liner li{background:#0d0b08;border:1px solid #2a2219;border-radius:14px;padding:18px}
.liner b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.8rem;color:var(--amber);text-shadow:0 0 10px rgba(240,166,60,.35)}
.liner span{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;color:var(--bone)}
.techs{list-style:none;padding:0;margin:0;border-top:1px solid #3a2f22}
.techs li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px dashed #3a2f22}
.techs li span{max-width:60ch}
.techs a{font-family:var(--f-mono);font-size:.8rem;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.follow-list{display:grid;gap:16px;max-width:640px}
.follow-list .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-radius:14px;box-shadow:inset 0 0 0 1px #3a2f22;flex-wrap:wrap}
.follow-list .row p{margin:0}
.follow-list .row small{display:block;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.lesson-group{margin:0 0 36px}
.lesson-group h2{display:flex;align-items:center;gap:12px}
.lessons{list-style:none;margin:0;padding:0;border-top:1px dashed rgba(201,162,75,.3)}
.lessons li{padding:12px 0 12px 1.4em;border-bottom:1px dashed rgba(201,162,75,.2);position:relative}
.lessons li::before{content:"·";position:absolute;left:.3em;color:var(--amber);font-weight:700}
.lessons a{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;white-space:nowrap;margin-left:.4em;display:inline-block;padding:10px 0}
.tagnav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.masthead{position:relative;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;overflow:visible}
.masthead .bg{position:absolute;inset:0;background:url(../img/city_night.webp) center 40%/cover;overflow:hidden}
.masthead::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,20,24,.8) 0,rgba(10,20,24,.3) 22%,rgba(10,20,24,.6) 60%,var(--night)),linear-gradient(90deg,rgba(10,20,24,.55),transparent 70%)}
.masthead>.wrap{position:relative;z-index:1}
.masthead .topbar{z-index:30}
.masthead .head{padding:40px 0 34px}
.issue-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.masthead h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,5vw,3.6rem);line-height:1.08;letter-spacing:.02em;margin:0;max-width:20ch;text-shadow:0 2px 0 #000}
.masthead .dateline{margin:14px 0 0;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.article{display:grid;grid-template-columns:minmax(0,600px) 250px;gap:0 64px;padding:40px 0 20px;justify-content:start;position:relative}
.body h2{font-family:var(--f-display);font-weight:400;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:2.4em 0 .6em;line-height:1.5}
.body>h2:first-child{margin-top:0}
.body p{margin:0 0 1.05em}
.body strong{color:#fff;font-weight:500}
.body ul{padding-left:1.1em}
.body li{margin:.35em 0}
.body .first::first-letter{font-family:var(--f-display);float:left;font-size:3.4em;line-height:.9;padding:.06em .12em 0 0;color:var(--gold)}
.body blockquote.pull{margin:1.6em 0 1.4em;padding:0;font-size:1.5rem;line-height:1.3;font-style:italic;color:var(--gold-hi)}
.body blockquote.pull::before{content:"“";display:block;font-family:var(--f-body);font-style:normal;font-weight:500;font-size:3.4em;line-height:1;height:.5em;margin-bottom:.12em;color:var(--rust)}
sup.fn a{font-family:var(--f-mono);font-size:.72em;text-decoration:none;display:inline-block;min-width:24px;min-height:24px;text-align:center;line-height:24px}
abbr.gl{text-decoration:underline dotted var(--cyan);text-underline-offset:4px;cursor:help;position:relative}
abbr.gl:hover::after,abbr.gl:focus::after{content:attr(data-def);position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:min(280px,70vw);padding:10px 12px;border-radius:10px;
background:#06171b;box-shadow:inset 0 0 0 1px rgba(95,232,224,.5),0 10px 30px rgba(0,0,0,.5);font-family:var(--f-mono);font-size:.74rem;line-height:1.5;color:var(--bone);font-style:normal;text-transform:none;letter-spacing:0}
.margin{position:relative}
.margin-note{font-family:var(--f-mono);font-size:.8rem;line-height:1.5;color:var(--cyan);letter-spacing:.02em}
.margin-note .who{display:block;font-size:.68rem;letter-spacing:.2em;opacity:.8}
.margin .margin-note{position:absolute;left:0;right:0;margin:0;padding-left:14px;border-left:1px dotted rgba(95,232,224,.6)}
.margin-note--greg{color:var(--amber)} .margin .margin-note--greg{border-left-color:rgba(240,166,60,.6)}
.margin-note--clyde{color:var(--clyde)} .margin .margin-note--clyde{border-left-color:rgba(217,192,138,.6)}
.margin .eof{position:absolute;left:0;right:0;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);border-top:1px dashed #24474e;padding-top:8px}
details.inline-note{display:none}
.article-end{grid-column:1/-1;max-width:914px}
.studio{margin:2em 0 1.8em;background:linear-gradient(180deg,#16383f,#102b31);border-radius:14px;padding:26px 30px 22px;position:relative;
box-shadow:inset 0 0 0 1.5px rgba(201,162,75,.55),0 18px 40px rgba(0,0,0,.35)}
.studio{--rv:radial-gradient(circle at 35% 35%,#e9d9a8 0 1.5px,#7d6530 2.5px 3.5px,transparent 4px)}
.studio::before{content:"";position:absolute;inset:9px;pointer-events:none;background:var(--rv) 0 0/8px 8px no-repeat,var(--rv) 100% 0/8px 8px no-repeat,var(--rv) 0 100%/8px 8px no-repeat,var(--rv) 100% 100%/8px 8px no-repeat}
.studio h2{margin:0 0 .7em;font-family:var(--f-stencil);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-size:1rem}
.studio ul{margin:0;padding:0;list-style:none}
.studio li{padding:.5em 0 .5em 1.4em;border-top:1px dashed rgba(201,162,75,.25);position:relative;font-size:1.02rem}
.studio li::before{content:"·";position:absolute;left:.3em;color:var(--amber);font-weight:700}
.signoff{font-style:italic;margin-top:1.4em}
.signoff b{font-style:normal;font-family:var(--f-display);letter-spacing:.08em;font-weight:400;color:var(--gold)}
.dotmatrix.shutdown{margin-top:24px;border-radius:10px;padding:.7em 1em;white-space:normal;letter-spacing:.12em}
.footnotes{border-top:1px solid #1d3a40;margin-top:32px;padding-top:12px;font-size:.92rem;color:var(--bone-dim)}
.footnotes ol{padding-left:1.2em;margin:.4em 0}
.footnotes li:target{color:var(--bone)}
.footnotes .back{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;text-decoration:none;font-family:var(--f-mono)}
.lessons-here{margin-top:22px;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em}
.lessons-here a{display:inline-flex;min-height:44px;align-items:center}
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0 0}
.nextprev a,.nextprev .ghost{display:flex;flex-direction:column;justify-content:center;min-height:84px;padding:16px 20px;border-radius:14px;text-decoration:none;color:var(--bone);box-shadow:inset 0 0 0 1px #24474e}
.nextprev a:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.nextprev small{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.nextprev .r{text-align:right}
.nextprev .ghost{color:var(--bone-dim);box-shadow:inset 0 0 0 1px #1a3036;background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(36,71,78,.18) 8px 9px)}
.nextprev .ghost small{color:var(--bone-dim)}
:target{scroll-margin-top:24px}
footer{margin-top:64px;background:#0f0d0a}
body.night footer{background:#071013}
.foot{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;padding:22px 0 36px;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em;color:var(--bone-dim)}
.foot a{color:var(--gold)}
.foot a.btn--follow{color:#fff4e6}
.foot a.btn--follow:hover{color:#fff}
.foot .links{display:flex;flex-wrap:wrap;gap:0 18px}
.foot .links a,.foot .credit a{display:inline-flex;align-items:center;min-height:44px}
.lost{min-height:62vh;display:grid;place-items:center;text-align:center;padding:60px 0}
.lost h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,6vw,3.6rem);letter-spacing:.08em;margin:.3em 0;color:var(--amber);text-shadow:0 0 20px rgba(240,166,60,.4)}
@media (max-width:980px){
.article{grid-template-columns:minmax(0,1fr)}
.margin{display:none}
details.inline-note{display:block;margin:-.4em 0 1.2em;font-family:var(--f-mono);font-size:.84rem;color:var(--cyan)}
details.inline-note summary{cursor:pointer;letter-spacing:.06em;min-height:44px;display:flex;align-items:center;gap:.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
details.inline-note summary b{letter-spacing:.16em;font-weight:500}
details.inline-note summary span{overflow:hidden;text-overflow:ellipsis;opacity:.8}
details.inline-note[open] summary span{display:none}
details.inline-note p{margin:0 0 .4em;padding-left:14px;border-left:1px dotted currentColor}
details.inline-note.greg{color:var(--amber)}
details.inline-note.clyde{color:var(--clyde)}
}
@media (max-width:860px){
.sky-img{background-image:url(../img/city_dusk-800.webp)}
.masthead .bg{background-image:url(../img/city_night-800.webp)}
.argument .bg{background-image:url(../img/spaceport-800.webp)}
.hide-sm{display:none}
.nav{display:none}
.mnav{display:block}
.sec-head h2{letter-spacing:.14em}
.hero{grid-template-columns:1fr;gap:28px;padding-top:8px;padding-bottom:40px}
.port{min-height:0;aspect-ratio:1287/1500;max-width:440px;width:100%}
.crew,.cards{grid-template-columns:1fr}
.crew>div+div{padding-left:0;border-left:0}
.board thead{display:none}
.board table,.board tbody,.board tr,.board td{display:block}
.board tr{padding:14px 16px;border-bottom:1px dashed #241d15;display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.board tr:last-child{border-bottom:0}
.board td{padding:0;border:0;width:auto!important}
.board td.t{grid-column:1/-1;grid-row:2}
.board td:last-child{justify-self:end;grid-row:1;grid-column:2}
.board tr.now{background:rgba(95,232,224,.05)}
.board tr.now td{background:none}
.sec{padding:36px 0 24px}
.argument{padding:72px 0;margin:32px 0}
.liner{grid-template-columns:repeat(2,minmax(0,1fr))}
.credits{grid-template-columns:1fr}
.techs li{flex-direction:column;gap:2px}
.dotmatrix .right{display:none}
}
@media (max-width:600px){
body{font-size:18px}
.brand span{font-size:.66rem;letter-spacing:.1em}
.brand small{display:none}
.halo{--s:30px}
.topbar{gap:12px}
.topbar .btn--follow{display:none}
.dotmatrix{letter-spacing:.08em}
.badge{font-size:.7rem;padding:.14em .55em .1em}
.issue-meta{gap:8px}
.nextprev{grid-template-columns:1fr}
.nextprev .r{text-align:left}
.lock .lock-tag{font-size:.66rem;right:4%}
.cta .btn{flex:1 1 auto}
}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px;align-items:start}
.gallery-note{max-width:65ch;margin:0 0 30px;color:var(--bone-dim)}
.gallery-plate,.inline-still{margin:0;min-width:0}
.still-link{display:block;background:var(--petrol-2);border:1px solid var(--teal-mute);padding:6px;min-height:44px}
.still-link:hover{border-color:var(--gold)}
.still-link picture{display:block}
.still-link img{width:100%;height:auto;max-height:420px;object-fit:contain;background:var(--night)}
.gallery-plate figcaption,.inline-still figcaption{font-family:var(--f-mono);font-size:.76rem;line-height:1.6;letter-spacing:.02em;color:var(--bone-dim);padding:12px 0}
.inline-still{margin:1.8em 0 2em}
.inline-still .still-link img{max-height:560px}
.inline-still figcaption a{display:inline-flex;min-height:44px;align-items:center;color:var(--cyan)}
body.night .sky{background:var(--night)}
body.night .sky::after{background:linear-gradient(180deg,rgba(10,20,24,.65),var(--night))}
@media (min-width:861px) and (max-width:1200px){.nav{gap:12px}.nav a{font-size:.60rem;letter-spacing:.08em}.topbar{gap:16px}.topbar .btn--sm{display:none}}
@media (max-width:980px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gallery-grid{grid-template-columns:1fr;gap:24px}.still-link img{max-height:540px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.film-card{display:block;text-decoration:none;color:var(--bone)}
.film-img{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 0 0 1.5px rgba(201,162,75,.55),0 18px 40px rgba(0,0,0,.45);background:#0d0b08}
.film-img img,.film-img picture{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.film-img .play{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 0 0 5px rgba(201,162,75,.25)}
.film-img .play::before{content:"";border-left:13px solid #14110d;border-block:8px solid transparent;margin-left:3px}
.film-card:hover .film-img img{transform:scale(1.03)}
.film-card:hover b{color:var(--gold-hi)}
.film-meta{display:block;padding:12px 2px 0}
.film-meta b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.05rem;letter-spacing:.08em}
.film-meta small{display:block;margin-top:4px;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.crew-pic{display:block;width:100%;max-width:260px;aspect-ratio:1;border-radius:50% 50% 14px 14px;overflow:hidden;margin-bottom:16px;box-shadow:0 0 0 2px var(--gold),0 0 0 7px #14110d,0 0 0 8.5px rgba(201,162,75,.45)}
.crew-pic img,.crew-pic picture{display:block;width:100%;height:100%;object-fit:cover}
.venues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.venue{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 0 0 1.5px rgba(201,162,75,.45)}
.venue img,.venue picture{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.04)}
.dep-thumb{float:right;width:96px;height:54px;object-fit:cover;border-radius:6px;margin:2px 0 6px 14px;box-shadow:0 0 0 1px rgba(201,162,75,.45)}
@media (max-width:860px){.films,.venues{grid-template-columns:1fr}.crew-pic{max-width:180px}.dep-thumb{width:72px;height:40px}}
@media (prefers-reduced-motion:reduce){.film-img img{transition:none}.film-card:hover .film-img img{transform:none}}