/* Storink site. The platform has its own voice (Bricolage Grotesque, ink blue on a night stage);
   each series keeps its own look inside its reader. */
:root{
  --night:#12161f;   /* stage */
  --panel:#1a1f2b;   /* raised surfaces */
  --line:#2a3142;
  --paper:#f0e8d8;   /* primary text, comic-paper white */
  --rain:#98a1b0;    /* secondary text */
  --ink:#5b7cff;     /* ink blue: links, focus, the spotlight edge */
  --display:"Bricolage Grotesque","Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;
  --ui:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--paper);font:17px/1.55 var(--ui);min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:var(--paper);text-decoration-color:var(--ink);text-underline-offset:3px}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.01em}
.skip{position:absolute;left:-999px;top:8px;background:var(--paper);color:var(--night);padding:6px 10px;z-index:10}.skip:focus{left:8px}
.top,main,.foot{width:100%;max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}

/* header */
.top{display:flex;align-items:center;gap:28px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:18px}
.brand{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;text-decoration:none;line-height:1}
.menu{display:flex;gap:22px;flex:1}
.menu a,.langs a{color:var(--rain);text-decoration:none;font-size:.95rem}
.menu a:hover,.langs a:hover{color:var(--paper)}
.langs{display:flex;gap:10px;font-size:.9rem}.langs span{color:var(--paper);box-shadow:0 2px 0 var(--ink)}
main{flex:1;padding-top:24px;padding-bottom:72px;display:grid;gap:96px;align-content:start}
.muted{color:var(--rain)}

/* buttons */
.btn{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;border:1px solid var(--line);border-radius:999px;color:var(--paper);text-decoration:none;font-weight:600;font-size:.98rem}
.btn:hover{border-color:var(--rain)}
.btn.primary{background:var(--paper);color:var(--night);border-color:var(--paper)}
.btn.primary:hover{background:#fff}

/* home: intro with the live demo */
.intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,88px);align-items:center;min-height:min(78vh,760px)}
.intro.no-demo{grid-template-columns:minmax(0,1fr)}
.intro h1{font-size:clamp(2.7rem,6.4vw,5.4rem);line-height:.96;font-weight:800;letter-spacing:-.03em;max-width:12ch;text-wrap:balance}
.intro .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:#d9d1c1;max-width:46ch;margin:28px 0 0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}
.demo{margin:0;display:grid;gap:14px;justify-items:center}
.demo-page{position:relative;display:block;width:min(100%,460px);overflow:hidden;border-radius:4px;background:var(--panel);box-shadow:0 40px 90px #0009}
.demo-page img{width:100%;height:100%;object-fit:cover}
.demo-spot{position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:0 0 0 400vmax rgba(10,12,18,0);outline:2px solid transparent;transition:left .8s cubic-bezier(.45,.05,.2,1),top .8s cubic-bezier(.45,.05,.2,1),width .8s cubic-bezier(.45,.05,.2,1),height .8s cubic-bezier(.45,.05,.2,1),box-shadow .6s;pointer-events:none}
.demo-page.lit .demo-spot{box-shadow:0 0 0 400vmax rgba(10,12,18,.82);outline-color:var(--ink);outline-offset:3px}
.demo figcaption{font-size:.88rem;color:var(--rain);max-width:44ch;text-align:center}
@media (prefers-reduced-motion:reduce){.demo-spot{transition:none}}

/* home: how it reads */
section > h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.05;margin-bottom:32px}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);border-top:1px solid var(--line);padding-top:28px}
.how-item h3{font-size:1.25rem;margin-bottom:10px}
.how-item p{margin:0;color:var(--rain);max-width:38ch}

/* home: series rows */
.series-list{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.series-row{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;text-decoration:none}
.series-row:hover{border-color:var(--rain)}
.series-row .cover{aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:var(--night)}
.series-row .cover img{width:100%;height:100%;object-fit:cover;object-position:top}
.series-row .meta{display:flex;flex-direction:column;gap:8px;min-width:0}
.series-row .title{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1;letter-spacing:-.02em}
.series-row .tagline{font-size:1.08rem;color:#d9d1c1;max-width:48ch}
.by{color:var(--rain);font-size:.95rem;margin:0}
.facts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.9rem;color:var(--rain);margin-top:4px}
.count.soon{color:var(--ink)}
.tags{display:inline-flex;gap:4px}
.tag{border:1px solid var(--line);border-radius:4px;padding:0 6px;font-size:.75rem;letter-spacing:.04em;color:var(--rain)}
.tag.on{border-color:var(--rain);color:var(--paper)}
.tag.lock{border-color:var(--ink);color:var(--ink)}

/* home: in the works */
.next-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);border-top:1px solid var(--line);padding-top:28px}
.next-list h3{font-size:1.25rem;margin-bottom:10px}
.next-list p{margin:0;color:var(--rain);max-width:44ch}

/* series page */
.crumb{margin:0;font-size:.95rem}.crumb a{color:var(--rain);text-decoration:none}.crumb a:hover{color:var(--paper)}
main:has(.series-head){gap:48px}
.series-head{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.series-cover{width:100%;border-radius:4px;box-shadow:0 30px 70px #0009}
.display{font-size:clamp(2.6rem,6vw,4.4rem);line-height:.98;font-weight:800;letter-spacing:-.03em}
.lead{font-size:1.08rem;max-width:60ch;margin:18px 0 0}
.notice{font-size:.95rem;color:var(--rain);border-left:2px solid var(--ink);padding-left:12px;max-width:60ch;margin:20px 0 0}
.ai-badge{display:inline-block;font-size:.85rem;color:var(--rain);border:1px solid var(--line);border-radius:999px;padding:3px 12px;margin:18px 0 0}
.eyebrow{font-size:.9rem;color:var(--rain);margin:0 0 14px}
.eps{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ep{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;text-decoration:none}
.ep:hover{border-color:var(--rain)}
.ep .thumb{aspect-ratio:3/4;border-radius:3px;background:var(--night);overflow:hidden}.ep .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.ep .meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.ep .eyebrow{margin:0}
.ep .title{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.05}
.ep .date{font-size:.9rem;color:var(--rain)}
.ep .go{font-weight:600;color:var(--paper);padding-right:8px}
section > h2.eyebrow{font-family:var(--ui);font-size:.95rem;font-weight:600;color:var(--rain);margin-bottom:16px}

/* fixed pages */
.prose{max-width:68ch}
.prose h2{font-size:1.6rem;margin:2.2rem 0 .5rem}
.prose p,.prose li{color:#ddd5c4}
.prose ul{padding-left:1.2rem}

/* footer */
.foot{border-top:1px solid var(--line);padding-top:24px;padding-bottom:max(28px,env(safe-area-inset-bottom));display:grid;gap:12px;font-size:.92rem;color:var(--rain)}
.foot p{margin:0}.foot nav{display:flex;gap:20px;flex-wrap:wrap}.foot a{color:var(--rain)}.foot a:hover{color:var(--paper)}
.ad-slot{min-height:90px;border:1px dashed var(--line);border-radius:10px}

@media (max-width:860px){
  .intro{grid-template-columns:1fr;min-height:0;gap:40px}
  .demo-page{width:min(100%,400px)}
  .how-grid,.next-list{grid-template-columns:1fr;gap:28px}
  main{gap:72px}
}
@media (max-width:640px){
  .top{flex-wrap:wrap;gap:12px 20px}.menu{order:3;flex-basis:100%}
  .series-row{grid-template-columns:96px minmax(0,1fr);padding:14px;gap:16px}
  .series-head{grid-template-columns:1fr}.series-cover{max-width:220px}
  .ep{grid-template-columns:60px minmax(0,1fr)}.ep .go{display:none}
}

/* news series: one block per day, one card per story */
.day h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 18px}
.day + .day{margin-top:44px}
.story-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:22px}
.story-card{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.story-card .thumb{aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.story-card .thumb img{width:100%;height:100%;object-fit:cover}
.story-card:hover .thumb{border-color:var(--rain)}
.story-card .title{font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.15;text-wrap:balance}
.story-card .style{font-size:.85rem;color:var(--rain)}
@media (max-width:640px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.story-card .title{font-size:.98rem}}