/* Devlog (Hanoi Z group). Loads AFTER hanoiz.css, reuses its tokens/classes. Never edit hanoiz.css. */

/* ---------- Solid header (no hero behind it) ---------- */
.hdr.solid{position:relative;background:oklch(0.17 0.004 150);border-bottom:3px solid var(--sodium)}
.nav a[aria-current="page"]{border-color:var(--sodium);color:var(--sodium)}

/* ---------- Map board texture (pinned-map wall) ---------- */
.mapwall{background-color:var(--concrete-2);
  background-image:var(--noise),
    repeating-linear-gradient(27deg,transparent 0 92px,oklch(0.55 0.03 120 / .13) 92px 94px),
    repeating-linear-gradient(-61deg,transparent 0 140px,oklch(0.55 0.03 120 / .09) 140px 141px),
    radial-gradient(700px 420px at 85% 10%,oklch(0.34 0.04 128 / .55),transparent 70%);
  background-blend-mode:soft-light,normal,normal,normal}
.pin{position:absolute;z-index:3;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,oklch(0.75 0.17 40),var(--blood) 62%,oklch(0.3 0.08 25));
  box-shadow:3px 5px 4px oklch(0 0 0 / .45),inset -2px -2px 3px oklch(0 0 0 / .3)}
.pin::after{content:"";position:absolute;left:6px;top:5px;width:6px;height:4px;border-radius:50%;background:oklch(1 0 0 / .55)}

/* ---------- Masthead ---------- */
.dl-mast{position:relative;padding:88px 0 72px;overflow:hidden}
.dl-mast .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:end}
.dl-mast .ttl{grid-column:1/9}
.dl-mast .kick{font:400 15px/1.3 var(--f-type);color:var(--sodium);margin-bottom:14px}
.dl-mast h1{font:900 clamp(96px,16vw,236px)/.78 var(--f-name);text-transform:uppercase;color:var(--paper);letter-spacing:-.01em;text-shadow:0 6px 0 oklch(0.1 0 0 / .45)}
.dl-mast h1 .game{display:block;margin-top:.22em;font:900 clamp(26px,3.4vw,48px)/1 var(--f-sten);letter-spacing:.14em;color:var(--sodium);text-shadow:none}
.slip{grid-column:9/13;position:relative;padding:26px 24px 22px;transform:rotate(1.8deg);box-shadow:0 18px 34px oklch(0 0 0 / .45);margin-bottom:12px}
.slip p{font:400 20px/1.45 var(--f-type);color:var(--ink)}
.slip .src{display:block;margin-top:12px;padding-top:10px;border-top:1px dashed oklch(0.4 0.03 70 / .5);font:400 13px/1.3 var(--f-type);color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Dossier list ---------- */
.dl-files{padding:96px 0 120px}
.dos-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 32px;align-items:start}
.dos-list > li{position:relative}
.dos-list > li:nth-child(1){grid-column:1/9}
.dos-list > li:nth-child(2){grid-column:9/13;margin-top:80px}
.dos{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;padding:30px 30px 28px;text-decoration:none;color:var(--ink);
  box-shadow:0 24px 44px oklch(0 0 0 / .5);transform:rotate(-.7deg);transition:transform .2s,box-shadow .2s}
.dos::before{content:"";position:absolute;left:28px;top:-22px;width:150px;height:24px;background:var(--paper-2);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.dos:hover{transform:rotate(0) translateY(-4px);box-shadow:0 30px 52px oklch(0 0 0 / .55)}
.dos .pin{top:-8px;left:50%;margin-left:-11px}
.dos-ph{position:relative;margin:0;background:oklch(0.97 0.01 90);padding:10px 10px 30px;box-shadow:0 6px 14px oklch(0 0 0 / .3);transform:rotate(-2.4deg);align-self:start}
.dos-ph img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:sepia(.3) saturate(.75) contrast(1.05)}
.dos-ph figcaption{position:absolute;left:12px;right:12px;bottom:7px;font:400 12px/1.2 var(--f-type);color:var(--ink-2)}
.dos-txt{display:flex;flex-direction:column;gap:12px;min-width:0}
.dos-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font:400 14px/1.3 var(--f-type);color:var(--ink-2)}
.dos-meta .file{font:900 16px/1 var(--f-sten);letter-spacing:.12em;text-transform:uppercase;color:var(--blood);border:2px solid currentColor;padding:5px 8px;transform:rotate(-3deg)}
.dos h2,.dos h3{font:900 clamp(34px,3.4vw,50px)/.92 var(--f-name);text-transform:uppercase;text-wrap:balance}
.dos p{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:40ch}
.dos-ft{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;padding-top:14px;border-top:1px dashed oklch(0.4 0.03 70 / .5)}
.dos-ft .rt{font:400 14px/1.2 var(--f-type);color:var(--ink-2)}
.dos-ft .go{font:900 17px/1 var(--f-sten);letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:4px}
.dos:hover .go{color:var(--blood);border-color:var(--blood)}

.slot{position:relative;padding:28px 24px;border:2px dashed oklch(0.7 0.02 85 / .45);transform:rotate(1.4deg);color:var(--muted)}
.slot .pin{top:-10px;right:26px;background:radial-gradient(circle at 35% 30%,oklch(0.85 0.1 70),oklch(0.55 0.12 60) 62%,oklch(0.3 0.05 60))}
.slot .no{display:block;font:900 15px/1 var(--f-sten);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);margin-bottom:12px}
.slot p{font:400 17px/1.45 var(--f-type)}

/* ---------- Get new devlogs ---------- */
.dl-sub{padding:0 0 120px}
.flyer{position:relative;max-width:900px;margin:0 auto;padding:46px 52px 48px;transform:rotate(-.6deg);box-shadow:0 26px 50px oklch(0 0 0 / .5);
  clip-path:polygon(0 3%,4% 0,9% 2%,15% 0,22% 1.5%,30% 0,38% 2%,47% .5%,55% 2%,63% 0,72% 1.5%,80% 0,88% 2%,95% .5%,100% 2%,100% 100%,0 100%)}
.flyer .k{font:400 14px/1.3 var(--f-type);color:var(--blood);text-transform:uppercase;letter-spacing:.08em}
.flyer h2{margin:10px 0 14px;font:900 clamp(48px,6.4vw,92px)/.86 var(--f-sten);text-transform:uppercase;color:var(--ink)}
.flyer p{font:400 19px/1.5 var(--f-type);color:var(--ink-2);max-width:46ch}
.chans{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.chan{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:220px;min-height:60px;padding:0 22px;border:3px solid var(--ink);color:var(--ink);text-decoration:none;
  font:900 24px/1 var(--f-sten);letter-spacing:.08em;text-transform:uppercase;transition:background-color .15s,color .15s}
.chan .h{font:400 14px/1 var(--f-type);letter-spacing:0;text-transform:none}
.chan:hover{background:var(--ink);color:var(--paper)}

/* ================= POST TEMPLATE ================= */
.tpl-flag{background:var(--sodium);color:var(--ink);font:400 14px/1.3 var(--f-type);text-align:center;padding:8px var(--pad)}
.p-head{position:relative;padding:80px 0 56px;overflow:hidden}
.p-head .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 32px;align-items:end}
.p-crumb{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 18px;font:400 15px/1.3 var(--f-type);color:var(--muted)}
.p-crumb a{color:var(--sodium);text-decoration:none;border-bottom:1px solid transparent}
.p-crumb a:hover{border-color:var(--sodium)}
.p-head h1{grid-column:1/11;font:900 clamp(56px,8vw,124px)/.86 var(--f-name);text-transform:uppercase;color:var(--paper);text-wrap:balance}
.bignum{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 22px;padding:18px 0 4px;border-top:2px solid oklch(0.5 0.01 150);border-bottom:2px solid oklch(0.5 0.01 150)}
.bignum b{font:900 clamp(50px,11.5vw,168px)/.84 var(--f-sten);color:var(--sodium);min-width:0;overflow-wrap:anywhere}
.bignum span{padding-bottom:10px;font:400 15px/1.3 var(--f-type);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;max-width:22ch}
.p-dek{grid-column:1/9;font:400 clamp(20px,2vw,25px)/1.45 var(--f-type);color:var(--paper);max-width:40ch}
.p-meta{grid-column:9/13;justify-self:end;align-self:end;display:flex;flex-wrap:wrap;gap:6px 16px;font:400 14px/1.3 var(--f-type);color:var(--muted)}
.dl-mast,.p-head{isolation:isolate}

.p-hero{position:relative;margin:0 auto;max-width:1200px;padding:0 var(--pad)}
.p-hero .frame{position:relative;background:var(--ink);padding:8px;box-shadow:0 30px 60px oklch(0 0 0 / .55)}
.p-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.8) contrast(1.06)}
.p-hero figcaption{margin-top:12px;font:400 14px/1.4 var(--f-type);color:var(--muted)}

/* Reading column: aged paper sheet */
.p-body{padding:72px 0 110px}
.sheet{position:relative;max-width:820px;margin:0 auto;padding:72px 80px 80px;box-shadow:0 30px 60px oklch(0 0 0 / .5)}
.sheet > * + *{margin-top:1.3em}
.sheet h2{margin-top:2.2em;font:900 clamp(34px,3.6vw,48px)/1 var(--f-sten);text-transform:uppercase;letter-spacing:.03em;color:var(--blood)}
.sheet h2 + p{margin-top:.8em}
.sheet p{font:400 19px/1.72 var(--f-body);color:var(--ink);max-width:64ch}
.sheet p code{font:400 .92em/1 var(--f-type);background:oklch(0.8 0.04 80);padding:2px 5px}
.sheet a{color:var(--blood);text-decoration-thickness:2px;text-underline-offset:3px}
.sheet blockquote{margin:2em 0;padding:4px 0 4px 28px;border-left:6px solid var(--ink)}
.sheet blockquote p{font:400 clamp(24px,2.6vw,30px)/1.38 var(--f-type);color:var(--ink)}
.sheet blockquote cite{display:block;margin-top:12px;font:400 14px/1.3 var(--f-type);font-style:normal;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}

/* Terminal code block (CRT, reuses .screen) */
.term{margin:2em -24px;padding:16px;border-radius:18px;background:linear-gradient(160deg,oklch(0.42 0.02 90),oklch(0.28 0.015 90));box-shadow:0 18px 34px oklch(0 0 0 / .4)}
.term .screen{padding:24px 26px 26px;border-radius:12px / 18px}
.term .bar{display:flex;justify-content:space-between;gap:12px;font-size:18px;color:var(--phos-dim);border-bottom:1px dashed oklch(0.62 0.17 135 / .5);padding-bottom:8px;margin-bottom:12px}
.term pre{margin:0;overflow-x:auto;font:400 21px/1.3 var(--f-crt);color:var(--phos);white-space:pre}
.term pre .c{color:var(--phos-dim)}

/* By the numbers (CRT table) */
.nums{margin:2.2em -24px}
.nums table{width:100%;border-collapse:collapse;font:400 22px/1.25 var(--f-crt)}
.nums caption{text-align:left;font:400 clamp(30px,3.4vw,40px)/1 var(--f-crt);text-transform:uppercase;padding-bottom:12px}
.nums th,.nums td{padding:9px 10px;border-bottom:1px dashed oklch(0.62 0.17 135 / .45);text-align:left;vertical-align:top}
.nums thead th{color:var(--phos-dim);font-weight:400}
.nums td.v{text-align:right;white-space:nowrap;font-size:26px}

/* Figure with caption */
.fig{margin:2.2em -24px}
.fig .ph{background:var(--ink);padding:6px}
.fig img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:sepia(.2) saturate(.8)}
.fig figcaption{margin-top:10px;display:flex;gap:12px;font:400 14px/1.4 var(--f-type);color:var(--ink-2)}
.fig figcaption b{font-weight:400;color:var(--blood);white-space:nowrap}

/* What the director cut: taped note */
.cut{position:relative;margin:2.6em 0 2.2em;padding:34px 34px 30px;transform:rotate(-1.2deg);
  background-color:oklch(0.9 0.09 95);color:var(--ink);background-image:var(--noise),linear-gradient(175deg,oklch(0.93 0.09 98),oklch(0.85 0.1 88));background-blend-mode:multiply;
  box-shadow:0 14px 26px oklch(0 0 0 / .35)}
.cut h2{margin:0 0 6px;color:var(--ink);font-size:clamp(28px,3vw,38px)}
.cut .by{font:400 14px/1.3 var(--f-type);color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.cut ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px}
.cut li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font:400 18px/1.45 var(--f-type)}
.cut li s{grid-column:1/-1;color:var(--blood);text-decoration-thickness:2px}
.cut li .why{grid-column:2;color:var(--ink)}
.cut li .lbl{grid-column:1;font:900 14px/1.6 var(--f-sten);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* Read next */
.next{padding:0 0 120px}
.next-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 32px;list-style:none;margin:0;padding:0}
.next-grid li:nth-child(1){grid-column:1/7}
.next-grid li:nth-child(2){grid-column:7/13;margin-top:48px}
.next-grid .dos{grid-template-columns:1fr;gap:20px}
.next-grid li:nth-child(2) .dos{transform:rotate(.9deg)}

/* ---------- Responsive (devlog) ---------- */
@media (max-width:1000px){
  .dl-mast .ttl,.slip{grid-column:1/-1}
  .slip{max-width:460px}
  .dos-list > li:nth-child(n){grid-column:1/-1;margin-top:0}
  .p-head h1,.p-dek,.p-meta{grid-column:1/-1;justify-self:start}
  .next-grid li:nth-child(n){grid-column:1/-1;margin-top:0}
}
@media (max-width:760px){
  .dl-mast{padding:56px 0 48px}
  .dl-mast h1{font-size:clamp(76px,23vw,120px)}
  .slip,.dos,.flyer,.next-grid li:nth-child(2) .dos{transform:none}
  .dos{grid-template-columns:1fr;padding:22px 18px 20px}
  .dl-files{padding:72px 0 88px}
  .flyer{padding:36px 22px 32px}
  .chan{min-width:0;flex:1 1 100%}
  .p-head{padding:52px 0 40px}
  .p-body{padding:48px 0 84px}
  .sheet{padding:44px 22px 48px;margin:0 calc(var(--pad) * -1 + 8px)}
  .sheet p{font-size:18px}
  .term,.nums,.fig{margin-left:-10px;margin-right:-10px}
  .term pre{font-size:18px}
  .nums table{font-size:19px}.nums td.v{font-size:21px}
  .cut{padding:26px 20px 24px;transform:none}
  .cut li{grid-template-columns:1fr}.cut li .why,.cut li .lbl{grid-column:1}
}