/* ============================================================
   Lost Paradise — design system
   Graphite ground · single accent · Space Grotesk + IBM Plex Mono
   ============================================================ */

/* --- self-hosted fonts (woff2 in /assets/fonts) --- */
@font-face{font-family:'Space Grotesk';font-weight:400;font-style:normal;font-display:swap;
    src:url('/assets/fonts/space-grotesk-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-weight:500;font-style:normal;font-display:swap;
    src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-weight:700;font-style:normal;font-display:swap;
    src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;
    src:url('/assets/fonts/plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;
    src:url('/assets/fonts/plex-mono-500.woff2') format('woff2');}
/* latin-ext (polskie znaki: ł ą ę ś ż ź ć ń …) — dobierane per glif przez unicode-range */
@font-face{font-family:'Space Grotesk';font-weight:400;font-style:normal;font-display:swap;
    src:url('/assets/fonts/space-grotesk-ext-400.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+030B,U+0329,U+0330-0349,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-weight:500;font-style:normal;font-display:swap;
    src:url('/assets/fonts/space-grotesk-ext-500.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+030B,U+0329,U+0330-0349,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-weight:700;font-style:normal;font-display:swap;
    src:url('/assets/fonts/space-grotesk-ext-700.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+030B,U+0329,U+0330-0349,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;
    src:url('/assets/fonts/plex-mono-ext-400.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+030B,U+0329,U+0330-0349,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;
    src:url('/assets/fonts/plex-mono-ext-500.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+030B,U+0329,U+0330-0349,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
    --bg:#17191b;          /* graphite ground, not pure black */
    --bg-2:#101113;
    --black:#000;          /* about section / hoods */
    --ink:#ececec;
    --ink-2:#b7babd;       /* secondary text */
    --ink-dim:#7f8386;
    --line:#26292b;        /* hairlines */
    --rule:#e4e4e4;        /* the two thick rules */
    --accent:#ff4d6d;      /* overridden server-side + by visitor */

    --font-display:'Space Grotesk','Arial Narrow',system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,'Consolas',monospace;

    --pad:clamp(1.25rem,5vw,4.5rem);
    --maxw:1400px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;}
body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--font-display);font-weight:400;
    font-size:clamp(15px,1.05vw,17px);line-height:1.55;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{list-style:none;padding:0;}

/* Background canvas — the signature layer */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;
    background:radial-gradient(120% 90% at 78% 0%,#1e2124 0%,var(--bg) 46%,var(--bg-2) 100%);}

.skip{position:fixed;left:-999px;top:0;background:var(--accent);color:#000;padding:.6rem 1rem;
    font-family:var(--font-mono);z-index:100;}
.skip:focus{left:0;}

/* Strobe / colour-inversion burst (~every 15s). Off for reduced-motion. */
.strobe{position:fixed;inset:0;z-index:9998;background:#fff;mix-blend-mode:difference;
    opacity:0;pointer-events:none;}
.strobe.flash{opacity:1;}
@media (prefers-reduced-motion:reduce){.strobe{display:none;}}

/* ---------------- top bar ---------------- */
.topbar{position:relative;z-index:5;display:flex;align-items:baseline;justify-content:space-between;
    gap:1rem;padding:1.5rem var(--pad) .5rem;}
.nav{display:flex;gap:clamp(1rem,2.5vw,2.4rem);}
.nav-link,.nav-tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-2);}
.nav-link{position:relative;padding-bottom:.35rem;transition:color .18s;}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);
    transition:width .22s ease;}
.nav-link:hover,.nav-link:focus-visible{color:var(--ink);}
.nav-link:hover::after,.nav-link:focus-visible::after{width:100%;}
.nav-tag{color:var(--ink-dim);}
.nav-link.active{color:var(--ink);}
.nav-link.active::after{width:100%;}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);font-size:1.2rem;cursor:pointer;
    font-family:var(--font-mono);}

/* ---------------- hero ---------------- */
.hero{padding:clamp(.5rem,2vw,1.5rem) var(--pad) 0;max-width:var(--maxw);margin:0 auto;}
.hero-head,.hero{position:relative;}
.logotype{font-family:var(--font-display);font-weight:700;text-transform:lowercase;
    font-size:clamp(3.6rem,15.5vw,15rem);line-height:.8;letter-spacing:-.035em;
    display:flex;flex-direction:column;}
.logotype span{display:block;}
.vol{position:absolute;right:0;bottom:.12em;font-family:var(--font-display);font-weight:500;
    font-size:clamp(1.4rem,4vw,3rem);letter-spacing:-.01em;color:var(--ink);}

.rule{border:0;height:3px;background:var(--rule);margin:0;}
.rule-top{margin-top:clamp(1rem,3vw,2.2rem);}
.rule-bottom{margin-top:0;}

.hero-band{display:grid;grid-template-columns:minmax(240px,32%) 1fr;gap:clamp(1.5rem,4vw,3rem);
    padding:clamp(1.5rem,3.5vw,2.6rem) 0;align-items:start;}
.facts{display:flex;flex-direction:column;gap:.5rem;}
.fact-date{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,4.5vw,3rem);
    line-height:1;letter-spacing:-.01em;}
.fact-time{font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,4vw,2.6rem);
    line-height:1;margin-top:.6rem;}
.fact-sub{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.05em;color:var(--ink-dim);
    text-transform:lowercase;}
.lineup{margin-top:1.4rem;display:flex;flex-direction:column;gap:.15rem;}
.lineup li{font-family:var(--font-display);font-weight:400;font-size:clamp(1.15rem,2.4vw,1.5rem);
    text-transform:lowercase;line-height:1.15;}
.btn{align-self:flex-start;margin-top:1.6rem;font-family:var(--font-mono);font-size:.74rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--ink-2);
    background:none;cursor:pointer;padding:.85rem 2.4rem;transition:border-color .2s,color .2s,background .2s;}
.btn:hover,.btn:focus-visible{border-color:var(--accent);color:var(--accent);}

/* countdown */
.countdown{display:flex;gap:1.3rem;margin-top:1.3rem;}
.cd-cell{display:flex;flex-direction:column;align-items:flex-start;}
.cd-num{font-family:var(--font-mono);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1;
    color:var(--ink);font-variant-numeric:tabular-nums;}
.cd-lab{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent);margin-top:.4rem;}
.countdown.done .cd-num{color:var(--accent);}

.hero-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0c0d0e;
    border:1px solid var(--line);}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);}
.photo-empty{position:absolute;inset:0;display:grid;place-items:center;
    background:
        linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 100%),
        repeating-linear-gradient(90deg,#1b1e20 0 1px,transparent 1px 46px),
        repeating-linear-gradient(0deg,#1b1e20 0 1px,transparent 1px 46px),
        radial-gradient(90% 120% at 80% -10%,#26292c,#0c0d0e 70%);}
.photo-empty span{font-family:var(--font-mono);letter-spacing:.4em;color:var(--ink-dim);font-size:.9rem;}

/* ---------------- manifest ---------------- */
.manifest{max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,10vw,8rem) var(--pad);}
.manifest blockquote{display:flex;flex-direction:column;gap:.1em;}
.mline{font-family:var(--font-display);font-weight:500;text-transform:lowercase;
    font-size:clamp(1.7rem,5.6vw,4.2rem);line-height:1.02;letter-spacing:-.02em;max-width:16ch;}
.mline:first-child{color:var(--ink);}
.manifest cite{margin-top:1.2rem;font-style:normal;font-family:var(--font-mono);font-size:.8rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}

/* ---------------- shared section head ---------------- */
.sec-head{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:clamp(1rem,3vw,2.5rem);
    align-items:start;margin-bottom:clamp(2rem,5vw,3.5rem);}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--accent);}
.sec-lead{font-family:var(--font-display);font-weight:400;font-size:clamp(1.2rem,2.8vw,1.9rem);
    line-height:1.3;max-width:34ch;color:var(--ink);}

/* ---------------- about (black) ---------------- */
.about{background:var(--black);padding:clamp(3.5rem,8vw,7rem) var(--pad);}
.about .sec-head,.residents{max-width:var(--maxw);margin-left:auto;margin-right:auto;}
.residents{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
.resident{display:flex;flex-direction:column;}
.portrait{aspect-ratio:3/3.4;background:#000;overflow:hidden;border:1px solid #171717;
    filter:contrast(1.04) brightness(.94);}
.portrait img{width:100%;height:100%;object-fit:cover;}
.hood{width:100%;height:100%;}
.res-name{font-family:var(--font-display);font-weight:700;text-transform:lowercase;
    font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;margin-top:1.1rem;}
.res-role{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);margin-top:.3rem;}
.res-bio{color:var(--ink-2);font-size:.96rem;line-height:1.6;margin-top:.9rem;max-width:42ch;white-space:pre-line;}

/* ---------------- events ---------------- */
.events{max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,8vw,7rem) var(--pad);}
.event-detail{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,4rem);
    align-items:end;border-top:3px solid var(--rule);padding-top:clamp(1.5rem,3vw,2.4rem);}
.ed-vol{font-family:var(--font-display);font-weight:700;text-transform:lowercase;
    font-size:clamp(2.6rem,9vw,7rem);line-height:.8;letter-spacing:-.03em;}
.ed-meta{display:flex;flex-direction:column;gap:.45rem;padding-bottom:.5rem;}
.ed-title{font-family:var(--font-display);font-weight:500;text-transform:lowercase;
    font-size:clamp(1.3rem,3vw,2rem);}
.ed-line{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.04em;color:var(--ink-dim);
    text-transform:lowercase;}

/* ---------------- archive ---------------- */
.archive{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(3.5rem,8vw,7rem);}
.arch-list{border-top:1px solid var(--line);}
.arch-row{display:grid;grid-template-columns:6rem 8rem 1fr;gap:1rem;align-items:baseline;
    padding:1.1rem 0;border-bottom:1px solid var(--line);transition:padding-left .2s,color .2s;}
.arch-row:hover{padding-left:.8rem;}
.arch-vol{font-family:var(--font-display);font-weight:500;font-size:1.15rem;text-transform:lowercase;}
.arch-date,.arch-line{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-dim);
    letter-spacing:.04em;text-transform:lowercase;}
.arch-row:hover .arch-line{color:var(--accent);}

/* ---------------- info ---------------- */
.info{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(3.5rem,8vw,6rem);}
.info-text{font-family:var(--font-display);font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.5;
    max-width:52ch;color:var(--ink-2);}

/* ---------------- telemetry (decorative data block) ---------------- */
.telemetry{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vw,4rem) var(--pad);}
.tele-pre{font-family:var(--font-mono);font-size:clamp(.52rem,1.15vw,.8rem);line-height:1.55;
    color:var(--ink-dim);letter-spacing:.02em;white-space:pre;margin:0;opacity:.72;overflow-x:auto;}

/* ---------------- credo (signed manifesto) ---------------- */
.credo{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,7vw,6rem) var(--pad);border-top:1px solid var(--line);}
.credo blockquote{display:flex;flex-direction:column;gap:.06em;}
.cline{font-family:var(--font-display);font-weight:500;text-transform:lowercase;
    font-size:clamp(1.4rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-.015em;max-width:24ch;color:var(--ink-2);}
.cline:first-child{color:var(--ink);}
.credo cite{margin-top:1rem;font-style:normal;font-family:var(--font-mono);font-size:.78rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}

/* ---------------- footer ---------------- */
.footer{border-top:3px solid var(--rule);max-width:var(--maxw);margin:0 auto;
    padding:clamp(1.6rem,3vw,2.4rem) var(--pad) clamp(2.5rem,4vw,3.5rem);
    display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.f-col{display:flex;flex-direction:column;gap:.3rem;font-family:var(--font-mono);font-size:.74rem;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);}
.f-col a:hover{color:var(--accent);}
.f-brand{color:var(--ink);}
.f-social{flex-direction:row;gap:1.2rem;}

/* ---------------- accent picker ---------------- */
.accent-dock{position:fixed;right:1.2rem;bottom:1.2rem;z-index:20;display:flex;flex-direction:column;
    align-items:flex-end;gap:.7rem;}
.accent-fab{width:38px;height:38px;border-radius:50%;border:2px solid #000;cursor:pointer;
    background:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 6px 20px rgba(0,0,0,.5);}
.accent-menu{display:flex;gap:.5rem;align-items:center;background:rgba(10,11,12,.9);
    border:1px solid var(--line);padding:.55rem .6rem;backdrop-filter:blur(6px);}
.accent-menu[hidden]{display:none;}
.swatch{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer;
    background:var(--sw);transition:transform .15s;}
.swatch:hover{transform:scale(1.18);}
.swatch-custom{width:22px;height:22px;border-radius:50%;overflow:hidden;border:1px dashed var(--ink-dim);
    display:grid;place-items:center;cursor:pointer;position:relative;}
.swatch-custom input{position:absolute;inset:-6px;width:200%;height:200%;border:0;padding:0;cursor:pointer;background:none;}

/* ---------------- emblem + footer codes ---------------- */
.f-brandcol{gap:.55rem;}
.emblem{width:34px;height:34px;display:block;margin-bottom:.15rem;}
.f-code span{font-family:var(--font-mono);font-size:1.05rem;color:var(--ink-2);letter-spacing:.12em;}
.f-code{justify-content:flex-start;}

/* ---------------- sound toggle ---------------- */
.sfx-dock{position:fixed;right:1.2rem;bottom:1.2rem;z-index:20;}
.sound-fab{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
    background:rgba(10,11,12,.9);backdrop-filter:blur(6px);display:grid;place-items:center;
    box-shadow:0 6px 20px rgba(0,0,0,.5);}
.sound-fab:hover{border-color:var(--accent);}
.sfx-bars{display:flex;gap:2.5px;align-items:flex-end;height:15px;}
.sfx-bars i{width:2.5px;height:4px;background:var(--ink-2);display:block;}
.sound-fab.on .sfx-bars i{background:var(--accent);animation:sfx .9s ease-in-out infinite;}
.sound-fab.on .sfx-bars i:nth-child(2){animation-delay:.18s;}
.sound-fab.on .sfx-bars i:nth-child(3){animation-delay:.36s;}
.sound-fab.on .sfx-bars i:nth-child(4){animation-delay:.12s;}
@keyframes sfx{0%,100%{height:4px;}50%{height:15px;}}

/* ---------------- focus ---------------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------------- entry / map modal ---------------- */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:1.2rem;
    background:rgba(6,7,8,.86);backdrop-filter:blur(4px);}
.modal[hidden]{display:none;}
.modal-inner{position:relative;width:min(640px,96vw);background:var(--bg-2);border:2px solid var(--rule);
    padding:clamp(1.4rem,3vw,2.2rem);}
.modal-close{position:absolute;top:.5rem;right:.75rem;background:none;border:0;color:var(--ink-2);
    font-size:1.7rem;line-height:1;cursor:pointer;font-family:var(--font-display);}
.modal-close:hover{color:var(--accent);}
.modal-head{margin-bottom:1rem;}
.modal-title{font-family:var(--font-display);font-weight:700;text-transform:lowercase;
    font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.02em;margin-top:.3rem;}
.modal-addr{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-dim);margin-top:.25rem;}
.map-frame{position:relative;aspect-ratio:16/10;border:1px solid var(--line);overflow:hidden;background:#0c0d0e;}
.map-frame iframe{width:100%;height:100%;border:0;display:block;
    filter:invert(0.92) hue-rotate(180deg) saturate(.6) contrast(.9) brightness(.95);}
.mc{position:absolute;width:16px;height:16px;border:2px solid var(--accent);pointer-events:none;}
.mc-tl{top:6px;left:6px;border-right:0;border-bottom:0;}
.mc-tr{top:6px;right:6px;border-left:0;border-bottom:0;}
.mc-bl{bottom:6px;left:6px;border-right:0;border-top:0;}
.mc-br{bottom:6px;right:6px;border-left:0;border-top:0;}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;flex-wrap:wrap;}
.mono-cap{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);}
.btn-sm{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
    border:1.5px solid var(--ink-2);background:none;cursor:pointer;padding:.6rem 1.2rem;transition:border-color .2s,color .2s;}
.btn-sm:hover{border-color:var(--accent);color:var(--accent);}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
    .nav{display:none;}
    .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
        gap:1.2rem;background:rgba(10,11,12,.96);padding:1.5rem var(--pad);border-top:1px solid var(--line);}
    .nav-toggle{display:block;}
    .topbar{align-items:center;}
    .hero-band{grid-template-columns:1fr;}
    .hero-photo{aspect-ratio:16/11;order:-1;}
    .residents{grid-template-columns:1fr;max-width:420px;}
    .sec-head{grid-template-columns:1fr;}
    .event-detail{grid-template-columns:1fr;align-items:start;}
    .arch-row{grid-template-columns:4.5rem 1fr;}
    .arch-line{grid-column:1/-1;}
    .footer{grid-template-columns:1fr 1fr;}
    .vol{position:static;margin-top:.5rem;}
    .logotype{font-size:clamp(2.6rem,15.5vw,7rem);letter-spacing:-.03em;}
    .logotype span{max-width:100%;}
    .mline{max-width:none;}
    .sec-lead,.res-bio,.info-text,.cline{max-width:none;}
    .tele-pre{font-size:.5rem;}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}