/* Leonida Universe — GTA 6 character & lore wiki */
@font-face{font-family:"Shrikhand";src:url(/assets/fonts/shrikhand-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Overpass";src:url(/assets/fonts/overpass-latin-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/overpass-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --lagoon:#0D3B45;--deep:#082C33;--flamingo:#FF5C8A;--tangerine:#FFA94D;--sand:#F6E6C8;--palm:#1F6B4E;--sign:#0B6B45;
  --ink:#1C2A2E;--muted:#9FC3C4;--paper-muted:#4B6167;
  --display:"Shrikhand","Georgia",serif;--body:"Overpass","Segoe UI","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--lagoon);color:var(--sand);font-family:var(--body);font-size:1.0625rem;line-height:1.65}
img,svg{max-width:100%;height:auto}
a{color:var(--tangerine)}a:hover{color:var(--flamingo)}
:focus-visible{outline:3px solid var(--tangerine);outline-offset:3px;border-radius:2px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--sand);color:var(--ink);padding:.6rem 1rem;z-index:50}.skip:focus{left:1rem;top:1rem}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(8,44,51,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(246,230,200,.12)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{font-family:var(--display);font-size:1.45rem;color:var(--sand);text-decoration:none;line-height:1}
.brand span{color:var(--flamingo)}
.nav ul{list-style:none;display:flex;gap:1.3rem;margin:0;padding:0}
.nav ul a{color:var(--sand);text-decoration:none;font-weight:700;font-size:.95rem;white-space:nowrap}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--tangerine)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font-weight:800;border:2px solid rgba(246,230,200,.4);border-radius:999px;padding:.3rem .9rem}
.menu summary::-webkit-details-marker{display:none}
.menu ul{position:absolute;right:0;top:calc(100% + .5rem);flex-direction:column;gap:.2rem;background:var(--deep);border:1px solid rgba(246,230,200,.2);border-radius:12px;padding:.6rem 1rem;min-width:200px}
.menu ul a{display:block;padding:.35rem 0}
@media (max-width:860px){.nav nav>ul{display:none}.menu{display:block}}

/* hero (home) */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#2B1E4A 0%,#8E3B6B 34%,#FF6F7D 58%,#FFA94D 74%,#FFD08A 80%,var(--lagoon) 80.2%,var(--deep) 100%)}
.hero .sun{position:absolute;left:50%;top:80%;width:min(560px,86vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#FFE3A3 0%,#FFB45E 55%,rgba(255,111,125,0) 72%);opacity:.9}
.hero .palms{position:absolute;bottom:19.8%;left:0;right:0;width:100%;pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding:4rem 0 7.5rem;display:grid;gap:1.6rem;justify-items:center;text-align:center}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,6.4vw,4.8rem);line-height:1.04;margin:0;color:#FFF4E0;text-shadow:0 4px 0 rgba(43,30,74,.55);max-width:18ch}
.hero .lede{max-width:46ch;margin:0;font-size:1.18rem;color:#FFF4E0;font-weight:600;text-shadow:0 1px 8px rgba(43,30,74,.6)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.btn{display:inline-block;padding:.85rem 1.4rem;border-radius:999px;font-weight:800;text-decoration:none;background:var(--flamingo);color:#fff;border:2px solid var(--flamingo)}
.btn:hover{background:#fff;color:var(--flamingo)}
.btn.ghost{background:transparent;border-color:#FFF4E0;color:#FFF4E0}.btn.ghost:hover{background:#FFF4E0;color:var(--ink)}
.sign{background:var(--sign);color:#fff;border:5px solid #fff;outline:5px solid var(--sign);border-radius:16px;padding:.9rem 1.4rem .8rem;box-shadow:0 18px 34px rgba(20,8,40,.45);width:min(520px,100%);margin-top:.6rem}
.sign-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-weight:800;font-size:1.15rem}
.shield{display:inline-grid;place-items:center;min-width:2.6rem;height:2.6rem;padding:0 .4rem;border-radius:9px 9px 50% 50%;background:#fff;color:var(--sign);font-weight:900}
.timer{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;margin-top:.6rem;border-top:3px solid rgba(255,255,255,.85);padding-top:.6rem}
.unit b{display:block;font-weight:900;font-size:clamp(1.7rem,6vw,2.6rem);line-height:1;font-variant-numeric:tabular-nums}
.unit span{font-size:.85rem;font-weight:600;opacity:.9}
.sign-foot{margin:.5rem 0 0;font-size:.85rem;opacity:.9}

/* sections */
.band{padding:clamp(3.2rem,7vw,5.5rem) 0}
.paper{background:var(--sand);color:var(--ink)}
.paper a{color:#B8325B}.paper a:hover{color:var(--lagoon)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.08;margin:0 0 1rem}
.paper h2{color:var(--lagoon)}
h3{font-size:1.25rem;line-height:1.25;margin:0 0 .4rem;font-weight:800}
.intro{max-width:62ch;font-size:1.1rem;margin:0 0 2rem}

/* page head (inner pages) */
.page-head{background:linear-gradient(180deg,#2B1E4A 0%,#6E3466 60%,#8E3B6B 100%);padding:2.2rem 0 2.4rem;border-bottom:6px solid var(--tangerine)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;font-size:.9rem;color:#E9D3E0}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.6}
.crumbs a{color:#FFD08A}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5.6vw,4rem);line-height:1.05;margin:.8rem 0 .6rem;color:#FFF4E0}
.page-head .lede{max-width:58ch;margin:0;font-size:1.15rem;color:#FFF4E0}
.page-head .updated{margin:.8rem 0 0;font-size:.9rem;color:#E9D3E0}

/* article + infobox layout */
.doc{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:3rem;padding:2.8rem 0 3.6rem;align-items:start}
@media (max-width:900px){.doc{grid-template-columns:minmax(0,1fr)}.doc aside{order:-1}}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:2.4rem 0 .8rem}
.prose>h2:first-child{margin-top:0}
.prose p,.prose li{font-size:1.06rem}
.prose ul,.prose ol{padding-left:1.3rem}.prose li{margin-bottom:.4rem}
.chip{display:inline-block;font-size:.74rem;font-weight:800;padding:.08rem .5rem;border-radius:999px;vertical-align:.12em;white-space:nowrap;border:1.5px solid}
.chip.ok{color:#0B6B45;border-color:#0B6B45;background:rgba(11,107,69,.08)}
.chip.pv{color:#9A5B00;border-color:#C98322;background:rgba(255,169,77,.14)}
.chip.rm{color:#B8325B;border-color:#B8325B;background:rgba(255,92,138,.1)}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.88rem;color:var(--paper-muted);margin:0 0 1.6rem}
.note-box{background:#fff;border-left:6px solid var(--tangerine);padding:1rem 1.2rem;border-radius:0 10px 10px 0}
.faq{margin-top:2.4rem}
.faq details{border-bottom:1px solid rgba(13,59,69,.2)}
.faq summary{cursor:pointer;list-style:none;font-weight:800;font-size:1.08rem;padding:.9rem 2rem .9rem 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:.55rem;font-size:1.5rem;color:#B8325B;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 1rem}
.dark .faq details{border-color:rgba(246,230,200,.2)}.dark .faq summary::after{color:var(--tangerine)}

/* infobox / case file */
.infobox{background:#fff;border:2px solid var(--lagoon);border-radius:4px;position:sticky;top:84px;box-shadow:6px 6px 0 var(--lagoon)}
.infobox .file-head{display:flex;align-items:center;gap:1rem;padding:1.1rem;border-bottom:2px dashed rgba(13,59,69,.3)}
.mono{flex:none;display:grid;place-items:center;width:84px;height:100px;background:var(--c);color:#fff;font:400 2.1rem/1 var(--display);border:5px solid #fff;outline:2px dashed var(--c);transform:rotate(-3deg)}
.infobox .file-head strong{display:block;font:400 1.5rem/1.1 var(--display);color:var(--lagoon)}
.infobox .file-head div span{font-size:.9rem;color:var(--paper-muted)}
.infobox dl{margin:0;padding:.8rem 1.1rem 1.1rem;font-size:.95rem}
.infobox dt{font-weight:800;margin-top:.6rem;color:var(--lagoon)}
.infobox dd{margin:.1rem 0 0}
.infobox .conn{padding:0 1.1rem 1.1rem}
.infobox .conn h2,.side-box h2{font:800 .95rem/1.2 var(--body);color:var(--lagoon);margin:0 0 .4rem}
.infobox .conn ul,.side-box ul{list-style:none;margin:0;padding:0}.infobox .conn li,.side-box li{margin:.3rem 0}
.side-box{background:#fff;border:2px solid var(--lagoon);border-radius:4px;padding:1rem 1.1rem;margin-top:1.2rem;font-size:.95rem}
@media (max-width:900px){.infobox{position:static}}

/* character cards */
.cast{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1.4rem}
.cast li{position:relative;background:#fff;border:2px solid var(--lagoon);padding:1.1rem 1.1rem 1rem;display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;box-shadow:5px 5px 0 var(--lagoon);transition:transform .15s,box-shadow .15s}
.cast li:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--lagoon)}
.cast .mono{width:64px;height:76px;font-size:1.6rem;border-width:4px}
.cast li:nth-child(even) .mono{transform:rotate(3deg)}
.cast h3{font:400 1.35rem/1.1 var(--display);margin:0 0 .25rem}
.cast h3 a{color:var(--lagoon);text-decoration:none}.cast h3 a::after{content:"";position:absolute;inset:0}
.cast p{margin:0;font-size:.93rem;color:var(--paper-muted);line-height:1.45}
.cast .role{font-weight:800;color:var(--ink);font-size:.85rem;margin-bottom:.3rem}

/* relationship web */
.web{background:var(--deep);border:1px solid rgba(246,230,200,.15);border-radius:18px;padding:1rem;overflow-x:auto}
.web svg{display:block;min-width:720px;width:100%}
.web .edge{stroke:#FFD08A;stroke-width:2.5;opacity:.75}
.web .elbl{font:700 15px var(--body);fill:#FFD08A;paint-order:stroke;stroke:var(--deep);stroke-width:6px}
.web .node text{font:400 22px var(--display);fill:#fff}
.web .node .nm{font:800 16px var(--body);fill:var(--sand)}
.web a:hover .ring,.web a:focus .ring{stroke:var(--tangerine);stroke-width:5}
.web .note{font:600 14px var(--body);fill:var(--muted)}
.web-cap{font-size:.92rem;color:var(--muted);margin:.8rem 0 0}
.paper .web-cap{color:var(--paper-muted)}

/* scenes */
.scene{margin:1.8rem 0;border:2px solid var(--lagoon);background:var(--lagoon)}
.scene img{display:block;width:100%}
.scene figcaption{font-size:.85rem;color:var(--sand);padding:.5rem .8rem}
.scenes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:1.4rem}
.scenes li{position:relative;background:var(--deep);border-radius:14px;overflow:hidden;border:1px solid rgba(246,230,200,.15)}
.scenes img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.scenes div{padding:1rem 1.1rem 1.1rem}
.scenes h3{font:400 1.5rem/1.1 var(--display);margin:0 0 .2rem}
.scenes h3 a{color:var(--tangerine);text-decoration:none}.scenes h3 a::after{content:"";position:absolute;inset:0}
.scenes li:hover h3 a{color:var(--flamingo)}
.scenes p{margin:0;font-size:.95rem;color:#E7DCC6}
.scenes .insp{color:var(--muted);font-weight:700;font-size:.85rem;margin-bottom:.3rem}
.regions-list{display:grid;gap:1.6rem;margin:1.2rem 0}
.region-row{display:grid;grid-template-columns:280px minmax(0,1fr);gap:1.3rem;align-items:start;scroll-margin-top:90px}
.region-row img{border:2px solid var(--lagoon);display:block}
.region-row h3{font:400 1.6rem/1.1 var(--display);color:var(--lagoon);margin:0}
.region-row .insp{margin:.2rem 0 .4rem;font-weight:800;font-size:.9rem;color:var(--paper-muted)}
.region-row p{margin:.3rem 0}
.more-links a{margin-right:1rem;font-weight:800;font-size:.92rem}
@media (max-width:640px){.region-row{grid-template-columns:1fr}}

/* lore grid & library */
.lore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1rem;margin:1rem 0 1.4rem}
.lore-grid article{background:#fff;border:2px solid var(--lagoon);padding:1rem 1.1rem}
.lore-grid h3{font-size:1.08rem;color:var(--lagoon)}
.lore-grid p{margin:.3rem 0 0;font-size:.97rem}
.lore-grid .tie{font-size:.88rem;font-weight:700;color:var(--paper-muted)}
.cols{columns:2;column-gap:2rem}@media (max-width:560px){.cols{columns:1}}
.library{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1.2rem}
.library li{position:relative;background:#fff;border:2px solid var(--lagoon);padding:1.2rem;box-shadow:5px 5px 0 var(--flamingo);transition:box-shadow .15s}
.library h3 a{color:var(--lagoon);text-decoration:none}.library h3 a::after{content:"";position:absolute;inset:0}
.library li:hover{box-shadow:7px 7px 0 var(--flamingo)}
.library p{margin:0;font-size:.95rem;color:var(--paper-muted)}

/* timeline */
.timeline{list-style:none;margin:1.4rem 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:3px;background:repeating-linear-gradient(180deg,#C98322 0 14px,transparent 14px 24px)}
.timeline li{position:relative;padding:0 0 1.5rem 2.6rem}
.timeline li::before{content:"";position:absolute;left:0;top:.3rem;width:21px;height:21px;border-radius:50%;background:var(--sand);border:3px solid #C98322}
.timeline li.now::before{background:var(--flamingo);border-color:var(--flamingo);box-shadow:0 0 0 6px rgba(255,92,138,.25)}
.timeline time{display:block;font:400 1.3rem/1 var(--display);color:#B8325B}
.timeline strong{display:block;margin-top:.2rem}
.timeline p{margin:.2rem 0 0}

/* youtube facade */
.yt{position:relative;aspect-ratio:16/9;background:radial-gradient(circle at 50% 70%,#FFB45E 0,#FF6F7D 30%,#8E3B6B 58%,#2B1E4A 100%);border:2px solid var(--lagoon);overflow:hidden}
.yt-btn{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.6rem;text-align:center;color:#fff;padding:1rem}
.yt-play{width:86px;height:86px;border-radius:50%;background:rgba(8,44,51,.85);border:4px solid #fff;position:relative}
.yt-play::after{content:"";position:absolute;left:32px;top:22px;border-left:26px solid #fff;border-top:17px solid transparent;border-bottom:17px solid transparent}
.yt-btn:hover .yt-play,.yt-btn:focus-visible .yt-play{background:var(--flamingo)}
.yt-title{font:400 clamp(1.2rem,3vw,1.8rem)/1.1 var(--display);text-shadow:0 2px 0 rgba(43,30,74,.6)}
.yt-date{font-weight:700;font-size:.95rem}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-note{font-size:.82rem;color:var(--paper-muted);margin:.4rem 0 1.4rem}
.dark .yt-note{color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.4rem;align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* footer */
footer{background:var(--deep);padding:2.6rem 0 3rem;font-size:.92rem;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
footer h2{font:800 .95rem/1.2 var(--body);color:var(--sand);margin:0 0 .6rem}
footer ul{list-style:none;margin:0;padding:0}footer li{margin:.3rem 0}
footer .brand{font-size:1.3rem}
footer p{margin:.6rem 0 0;max-width:62ch}