/* =====================================================================
   やゆめめのこわいコーナー
   Blue CRT / vaporwave liminal / occult posting site
   ===================================================================== */

@font-face {
  font-family: "Shinsyoku Mincho";
  src: url("../fonts/ShinsyokuMincho-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "KuroHana Mincho";
  src: url("../fonts/KuroHanaMincho-ExtraBold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Kaibunsyo";
  src: url("../fonts/Kaibunsyo.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #050712;
  --bg-2: #08102a;
  --panel: rgba(7, 13, 36, .76);
  --panel-strong: rgba(3, 7, 21, .9);
  --paper: #f4f1ff;
  --paper-2: #dcd8ef;
  --ink: #101426;
  --muted-ink: #62617a;
  --text: #f6f3ff;
  --text-dim: #c7c4df;
  --text-faint: #8c88ab;
  --line: rgba(215, 226, 255, .18);
  --line-strong: rgba(215, 226, 255, .34);
  --blue: #245cff;
  --cyan: #7adfff;
  --pink: #ff9ed1;
  --pink-soft: #ffd4ec;
  --shadow: rgba(0, 0, 0, .54);
  --radius: 8px;
  --radius-large: 16px;
  --max: 1180px;
  --read: 780px;
  --font-body: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --font-logo: "Shinsyoku Mincho", "Yu Mincho", serif;
  --font-title: "KuroHana Mincho", "Shinsyoku Mincho", "Yu Mincho", serif;
  --font-note: "Kaibunsyo", "Yu Gothic", sans-serif;
  --font-code: "BIZ UDGothic", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(circle at 30% -10%, rgba(122, 223, 255, .22), transparent 38%),
    radial-gradient(circle at 84% 22%, rgba(255, 158, 209, .16), transparent 34%),
    linear-gradient(180deg, #040611 0%, #071036 46%, #050712 100%);
  line-height: 1.75;
  letter-spacing: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }

.bg-atmo, .grain, .crt, .vignette { pointer-events: none; position: fixed; inset: 0; }
.bg-atmo { z-index: -4; background: linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size: 78px 78px; mask-image: linear-gradient(180deg, black, transparent 72%); }
.grain { z-index: 60; inset: -35%; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 700ms steps(2) infinite; }
.crt { z-index: 61; opacity: .26; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.23) 0 1px, transparent 1px 4px); mix-blend-mode: multiply; }
.vignette { z-index: 59; box-shadow: inset 0 0 180px rgba(0, 0, 0, .68), inset 0 0 42px rgba(0, 0, 0, .38); }
@keyframes grain { 50% { transform: translate(2%, -1%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; } }

.wrap { width: min(100% - 32px, var(--max)); margin-inline: auto; }
.narrow { width: min(100% - 32px, var(--read)); margin-inline: auto; }

/* ---- OSウィンドウ・クローム（ページ自体が「開かれた何か」である枠） ---- */
.oschrome {
  position: relative; z-index: 51;
  display: flex; align-items: center; gap: 18px;
  padding: 9px 14px;
  background: #020308;
  border-bottom: 1px solid rgba(255, 158, 209, .22);
  font-family: var(--font-code);
}
.oschrome .dots { display: inline-flex; gap: 7px; }
.oschrome .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--pink-soft); }
.oschrome .dots i:nth-child(2) { background: rgba(255,255,255,.85); }
.oschrome .dots i:nth-child(3) { background: rgba(255,158,209,.35); }
.oschrome .chips { display: inline-flex; gap: 6px; margin-left: 6px; }
.oschrome .chips i { width: 34px; height: 9px; background: rgba(255,255,255,.14); }
.oschrome .chips i.on { background: var(--pink); box-shadow: 0 0 12px rgba(255, 158, 209, .6); animation: blink 2.2s steps(2) infinite; }
.oschrome .wctl { margin-left: auto; display: inline-flex; gap: 14px; color: var(--pink-soft); font-size: 12px; }
.oschrome .wctl i { font-style: normal; opacity: .85; }

/* ---- BSOD受信バンド（青画面） ---- */
.topband {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 40px;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(255, 158, 209, .34);
  background: linear-gradient(180deg, #0A1FD4 0%, #0919B4 100%);
  box-shadow: 0 0 34px rgba(10, 31, 212, .5), inset 0 0 22px rgba(0, 0, 20, .4);
  font-family: var(--font-code);
  font-size: 12.5px;
  color: #EAF0FF;
  text-shadow: 0 0 6px rgba(122, 223, 255, .5);
}
.topband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.09) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.topband::after {
  content: "▮▮▮▮▯";
  letter-spacing: 2px; color: var(--pink-soft);
  animation: sigJitter 3.4s steps(4) infinite;
}
@keyframes sigJitter { 0%,100%{opacity:1} 25%{opacity:.55} 60%{opacity:.85} 80%{opacity:.4} }
.onair { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.onair::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 16px rgba(255, 158, 209, .95); animation: blink 1.5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .24; } }
.clock { color: var(--pink-soft); }
.ticker { overflow: hidden; white-space: nowrap; }
.ticker span { display: inline-block; padding-left: 100%; animation: tick 28s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }

/* ---- ナビ ---- */
.site-header { padding-top: 10px; }
.gnav { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(255, 158, 209, .2); }
.brandmark {
  display: grid;
  grid-template-columns: 38px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  text-decoration: none;
  line-height: 1.05;
}
.brandmark::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  width: 38px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 158, 209, .35);
  border-radius: 10px;
  background: url("../brand/favicon-192.png") center / cover no-repeat #05091b;
  box-shadow: 0 0 18px rgba(255, 92, 167, .14), inset 0 0 0 1px rgba(122, 223, 255, .08);
}
.brandmark strong {
  grid-column: 2; grid-row: 1;
  font-family: var(--font-code); font-weight: 700;
  font-size: 15px; letter-spacing: .08em;
  color: var(--pink-soft);
  text-shadow: 1px 0 rgba(122,223,255,.6), -1px 0 rgba(255,158,209,.5);
}
.brandmark span { grid-column: 2; grid-row: 2; color: var(--text-faint); font-family: var(--font-code); font-size: 10px; letter-spacing: .22em; }
.navlinks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; font-family: var(--font-code); font-size: 12.5px; letter-spacing: .1em; }
.navlinks a { min-height: 36px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 5px; color: var(--pink-soft); text-decoration: none; border: 1px solid transparent; }
.navlinks a::before { content: "▸"; color: var(--pink); font-size: 10px; opacity: .8; }
.navlinks a:hover { color: #081024; background: var(--pink-soft); border-color: var(--pink); text-shadow: none; }
.navlinks a:hover::before { color: #081024; }
.navlinks a.is-here { color: var(--text); border-color: rgba(255, 158, 209, .4); background: rgba(255, 158, 209, .08); }

.fiction-bar, .fiction-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin: 18px 0;
  padding: 11px 13px;
  border: 1px solid rgba(122, 223, 255, .32);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(122, 223, 255, .12), rgba(255, 158, 209, .07)), rgba(4, 8, 25, .76);
  color: var(--text-dim);
  font-family: var(--font-code);
  font-size: 12px;
}
.fiction-bar b, .fiction-note b { color: var(--pink-soft); }
.mk { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; color: var(--cyan); }

/* ---- ヒーローシェル：ヘッダーとヒーローが同じ背景（巨大TVのある施設）に載る ---- */
.hero-shell {
  position: relative; isolation: isolate; overflow: hidden;
  background: url("../site/hero-start-frame-seedance-v1.jpg") center / cover no-repeat #050712;
}
.hero-shell::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 7, 18, .78) 0%, rgba(5, 7, 18, .5) 30%, rgba(5, 7, 18, .06) 54%, rgba(5, 7, 18, 0) 72%, rgba(5, 7, 18, .22) 100%),
    linear-gradient(180deg, rgba(5, 7, 18, .42) 0%, rgba(5, 7, 18, 0) 18%, rgba(5, 7, 18, 0) 68%, rgba(5, 7, 18, .88) 100%);
}
.hero-shell::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .06) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen; opacity: .32;
}
.hero-shell > * { position: relative; z-index: 1; }
.hero-shell .site-header,
.hero-shell .home-hero { z-index: 2; }
.hero-character {
  position: absolute;
  z-index: 1;
  right: clamp(-72px, -3vw, -20px);
  bottom: -28px;
  width: clamp(430px, 46vw, 720px);
  height: auto;
  pointer-events: none;
  opacity: .96;
  filter: drop-shadow(-18px 10px 26px rgba(0, 0, 0, .58)) drop-shadow(0 0 22px rgba(122, 223, 255, .08));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
}

/* 背景画像内のTV画面に載せるフリッカー（TVは背景写真の1台だけ） */
.hero-flicker {
  position: absolute; z-index: 1; pointer-events: none;
  left: 40%; right: 4%; top: 6%; bottom: 24%;
  background: radial-gradient(ellipse at 52% 42%, rgba(122, 223, 255, .2), transparent 58%);
  mix-blend-mode: screen;
  animation: tvFlicker 4.2s steps(3) infinite;
}

.home-hero {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 48px);
  min-height: min(740px, calc(100dvh - 170px));
  padding: clamp(30px, 5vw, 64px) 0 92px;
}
.hero--compact { min-height: 0; padding: 44px 0 24px; }
.home-hero .hero__copy { width: min(620px, 54%); flex-shrink: 0; }
@keyframes tvFlicker {
  0%, 100% { opacity: .85; } 7% { opacity: .4; } 11% { opacity: .95; }
  52% { opacity: .8; } 55% { opacity: .5; } 58% { opacity: .9; }
}

/* コピーまわりのクロップ枠（左上・右下のL字ブラケット） */
.home-hero .hero__copy { position: relative; padding: 18px 6px; }
.home-hero .hero__copy::before,
.home-hero .hero__copy::after {
  content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none;
  border-color: var(--pink-soft); border-style: solid; opacity: .8;
}
.home-hero .hero__copy::before { top: 0; left: -10px; border-width: 1px 0 0 1px; }
.home-hero .hero__copy::after { bottom: 0; right: -6px; border-width: 0 1px 1px 0; }

/* ロゴの明滅とスパーク */
.hero-logo-wrap { position: relative; }
.hero-logo-wrap::after {
  content: "✦"; position: absolute; top: -8px; right: 8%;
  color: var(--pink-soft); font-size: 20px; text-shadow: 0 0 14px var(--pink);
  animation: sparkle 3.8s ease-in-out infinite;
}
@keyframes sparkle { 0%,100%{opacity:.9; transform:scale(1)} 50%{opacity:.25; transform:scale(.6) rotate(40deg)} }
.hero-logo { animation: logoFlicker 6.5s steps(5) infinite; }
@keyframes logoFlicker {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 18px rgba(122,223,255,.28)) drop-shadow(0 20px 42px rgba(0,0,0,.42)); }
  3% { opacity: .55; transform: translateX(1px); }
  5% { opacity: 1; transform: none; }
  61% { opacity: .8; filter: drop-shadow(2px 0 0 rgba(255,158,209,.6)) drop-shadow(-2px 0 0 rgba(122,223,255,.6)); }
  63% { opacity: 1; }
}

/* メインコピー：色版ずれの明滅 */
.hero-line {
  margin: 18px 0 0;
  font-family: var(--font-title);
  font-size: clamp(26px, 3.1vw, 44px);
  line-height: 1.28; color: var(--text);
  text-wrap: balance;
  animation: lineSplit 7s steps(6) infinite;
}
@keyframes lineSplit {
  0%, 100% { text-shadow: 0 0 26px rgba(122, 223, 255, .26), 2px 0 rgba(255, 158, 209, .18); }
  8% { text-shadow: 3px 0 rgba(255, 158, 209, .55), -3px 0 rgba(36, 92, 255, .6); }
  10% { text-shadow: 0 0 26px rgba(122, 223, 255, .26), 2px 0 rgba(255, 158, 209, .18); }
  54% { text-shadow: -2px 0 rgba(255, 158, 209, .45), 2px 0 rgba(122, 223, 255, .5); }
  57% { text-shadow: 0 0 26px rgba(122, 223, 255, .26), 2px 0 rgba(255, 158, 209, .18); }
}

/* BSODステータス行 */
.hero-bsod {
  width: fit-content; max-width: 100%;
  margin: 12px 0 0; padding: 6px 10px;
  background: #0A1FD4; color: #EAF0FF;
  font-family: var(--font-code); font-size: 12px;
  box-shadow: 0 0 22px rgba(10, 31, 212, .55);
  text-shadow: 0 0 6px rgba(122, 223, 255, .5);
}
.hero-bsod::after { content: "█"; margin-left: 2px; animation: blink 1.1s steps(2) infinite; }

/* 受信欄 */
.hero-mail {
  display: flex; max-width: 430px; margin-top: 20px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: rgba(3, 7, 21, .74); overflow: hidden;
  box-shadow: inset 0 0 18px rgba(36, 92, 255, .12);
}
.hero-mail input {
  flex: 1; min-width: 0; padding: 12px 14px;
  border: 0; background: transparent; outline: none;
  color: var(--text); font-family: var(--font-code); font-size: 14px;
}
.hero-mail input::placeholder { color: var(--text-faint); }
.hero-mail button {
  width: 62px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--pink-soft), var(--pink));
  color: #081024; font-size: 18px; font-weight: 700;
  transition: filter .18s ease;
}
.hero-mail button:hover { filter: brightness(1.08); }
.hero-logo-wrap { margin: 0; }
.hero-logo { display: block; width: min(610px, 100%); height: auto; filter: drop-shadow(0 0 18px rgba(122,223,255,.28)) drop-shadow(0 20px 42px rgba(0,0,0,.42)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.kicker {
  width: fit-content; margin: 0 0 16px; padding: 5px 12px;
  border: 0; border-radius: 0;
  color: #EAF0FF; background: #0A1FD4;
  box-shadow: 0 0 20px rgba(10, 31, 212, .6);
  font-family: var(--font-code); font-size: 12px; letter-spacing: .12em;
  text-shadow: 0 0 6px rgba(122, 223, 255, .5);
}
.corner-title { max-width: 9.5ch; margin: 0; font-family: var(--font-logo); font-size: clamp(52px, 9vw, 118px); line-height: .95; color: var(--text); text-shadow: 0 0 32px rgba(122, 223, 255, .28); text-wrap: balance; }
.corner-title .accent { color: var(--pink-soft); }
.lead { max-width: 42ch; margin: 18px 0 0; color: var(--text-dim); font-size: clamp(15px, 1.45vw, 18px); }
.hero__actions, .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: rgba(5, 10, 30, .68); text-decoration: none; font-weight: 700; white-space: nowrap; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); border-color: rgba(122, 223, 255, .58); background: rgba(16, 25, 62, .9); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { color: #081024; border-color: transparent; background: linear-gradient(180deg, var(--pink-soft), var(--pink)); box-shadow: 0 14px 34px rgba(255, 158, 209, .22); }
.btn-ghost { background: transparent; }

.monitor-stage { position: relative; min-height: 560px; isolation: isolate; overflow: visible; border-radius: 0; }
.stage-bg { display: none; }
.stage-tv { position: absolute; z-index: 2; left: 54%; top: 54%; width: min(120%, 860px); max-width: none; transform: translate(-50%, -50%) rotate(-1deg); filter: drop-shadow(0 28px 54px rgba(0, 0, 0, .7)); }
.program-card {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(54%, 410px);
  transform: translate(-50%, -52%) rotate(-1deg);
  padding: clamp(13px, 2vw, 20px);
  border: 1px solid rgba(122, 223, 255, .36);
  background: linear-gradient(180deg, rgba(4, 13, 52, .7), rgba(2, 4, 18, .84));
  box-shadow: inset 0 0 28px rgba(122, 223, 255, .14), 0 0 24px rgba(255, 158, 209, .12);
  overflow: hidden;
}
.program-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0 1px, transparent 1px 5px); opacity: .42; mix-blend-mode: screen; }
.program-top, .program-crawl { position: relative; display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-code); font-size: 11px; color: var(--cyan); }
.program-card h2 { position: relative; margin: 22px 0 6px; font-family: var(--font-title); font-size: clamp(28px, 4.2vw, 48px); line-height: 1.02; color: var(--text); text-shadow: 2px 0 rgba(122,223,255,.35); }
.program-card p { position: relative; margin: 0; color: var(--text-dim); font-size: 13px; }
.program-lines { position: relative; margin: 18px 0; display: grid; gap: 7px; }
.program-lines span { height: 16px; border: 1px solid rgba(255, 158, 209, .22); background: linear-gradient(90deg, rgba(255,158,209,.24), rgba(122,223,255,.08)); animation: readPulse 2.6s infinite; }
.program-lines span:nth-child(2) { width: 78%; animation-delay: .4s; }
.program-lines span:nth-child(3) { width: 62%; animation-delay: .8s; }
@keyframes readPulse { 50% { transform: translateX(4px); filter: brightness(1.3); } }
.program-crawl { border-top: 1px solid rgba(122,223,255,.2); padding-top: 9px; color: var(--pink-soft); }

.section { padding: clamp(44px, 8vw, 86px) 0; }
.section--tight { padding: 34px 0; }
.section-head { display: grid; gap: 10px; margin-bottom: 22px; }
.section-title { max-width: 720px; margin: 0; font-family: var(--font-title); font-size: clamp(34px, 5vw, 64px); line-height: 1.02; color: var(--text); }
.section-copy { max-width: 60ch; margin: 0; color: var(--text-dim); }

.signal-board { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 18px; }
.latest-panel, .updates, .profile-card, .case-panel, .evidence-panel { border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--panel); box-shadow: 0 20px 58px var(--shadow); }
.latest-panel { padding: 24px; }
.latest-panel h2, .case-panel h2 { margin: 0; font-family: var(--font-title); font-size: clamp(26px, 4vw, 42px); }
.latest-panel p, .case-panel p { color: var(--text-dim); }
.updates { overflow: hidden; }
.uhead { display: flex; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--cyan); font-family: var(--font-code); font-size: 12px; }
.updates ul { list-style: none; padding: 8px 0; margin: 0; }
.updates li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 9px 16px; color: var(--text-dim); font-size: 14px; }
.updates .date { color: var(--pink-soft); font-family: var(--font-code); font-size: 12px; }
.updates a { text-decoration: none; }
.updates a:hover { color: var(--cyan); }

.story-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.story-card { grid-column: span 3; min-height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-large); color: var(--text); background: rgba(5, 10, 31, .78); text-decoration: none; box-shadow: 0 18px 48px var(--shadow); transition: transform .18s ease, border-color .18s ease; }
.story-card:nth-child(1) { grid-column: span 4; }
.story-card:nth-child(2) { grid-column: span 2; }
.story-card:hover { transform: translateY(-4px); border-color: rgba(122, 223, 255, .62); }
.story-card.soon { opacity: .82; }
.story-thumb-shell { position: relative; aspect-ratio: 16 / 9; background: #030613; overflow: hidden; }
.story-thumb { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.96) contrast(1.06); transition: transform .3s ease, filter .3s ease; }
.story-card:hover .story-thumb { transform: scale(1.035); filter: saturate(1.1) contrast(1.1); }
.story-kind-icon { position: absolute; right: 10px; bottom: 10px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(4, 8, 24, .74); backdrop-filter: blur(10px); }
.story-kind-icon img { width: 26px; height: 26px; }
.story-card__body { padding: 17px; }
.st-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; color: var(--text-faint); font-family: var(--font-code); font-size: 12px; }
.st-tag { color: #061022; background: var(--cyan); border-radius: 999px; padding: 2px 8px; font-weight: 700; }
.st-tag.arg { background: var(--pink-soft); }
.st-tag.reading { background: var(--paper); }
.story-card h3 { margin: 0; font-family: var(--font-title); font-size: clamp(24px, 3vw, 36px); line-height: 1.12; }
.story-card p { color: var(--text-dim); }
.more { color: var(--pink-soft); font-family: var(--font-code); font-size: 13px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.filters .is-active { border-color: rgba(255, 158, 209, .72); color: var(--ink); background: var(--pink-soft); }

.format-grid, .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.format-card, .case-card { border: 1px solid var(--line); border-radius: var(--radius-large); padding: 18px; background: rgba(5, 10, 31, .7); }
.format-card strong, .case-card strong { display: block; margin-top: 10px; font-family: var(--font-title); font-size: 24px; }
.format-card span, .case-card span { color: var(--text-dim); }
.format-icon { width: 42px; height: 42px; }
.linkring { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.linkring a { min-height: 138px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--panel); text-decoration: none; }
.lk-k { color: var(--cyan); font-family: var(--font-code); font-size: 12px; }
.lk-n { font-family: var(--font-title); font-size: 28px; }
.lk-d { color: var(--text-dim); }

.profile-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 24px; align-items: center; }
.profile-card .pic { border-radius: var(--radius-large); overflow: hidden; background: rgba(255,255,255,.06); }
.profile-card .pic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.profile-card dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px 18px; margin: 0; }
.profile-card dt { color: var(--cyan); font-family: var(--font-code); }
.profile-card dd { margin: 0; color: var(--text-dim); }
.signature-note { max-width: 780px; color: var(--text-dim); }

.read { width: min(100% - 32px, var(--read)); margin: 34px auto 0; padding: clamp(22px, 4vw, 44px); border-radius: var(--radius-large); color: var(--ink); background: linear-gradient(180deg, rgba(244,241,255,.98), rgba(224,224,242,.96)); box-shadow: 0 26px 72px var(--shadow); }
.read .art-meta { display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted-ink); font-family: var(--font-code); font-size: 12px; }
.read h1 { margin: 16px 0 6px; font-family: var(--font-title); font-size: clamp(40px, 7vw, 74px); line-height: 1.04; color: var(--ink); }
.read h2 { margin-top: 36px; font-family: var(--font-title); font-size: 30px; color: var(--ink); }
.read p { color: #202338; }
.read .by, .read .end { color: var(--muted-ink); font-family: var(--font-code); }
.story-visual { margin: 24px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(15, 20, 38, .14); }
.story-visual img { width: 100%; display: block; }
.read blockquote { margin: 22px 0; padding: 18px 20px; border-left: 4px solid var(--blue); background: rgba(36, 92, 255, .08); color: #1d233c; }
.sns { margin: 24px 0; padding: 14px; border: 1px solid rgba(36, 92, 255, .22); border-radius: var(--radius); background: #10172e; color: var(--text); font-family: var(--font-code); }
.sns .hd { color: var(--cyan); font-size: 12px; margin-bottom: 8px; }
.sns p { margin: 6px 0; color: var(--text-dim); }
.redact { color: transparent; background: #11172b; border-radius: 3px; }
.art-nav { display: flex; gap: 10px; justify-content: center; margin: 24px 0 60px; }

.case-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.case-panel { padding: 20px; }
.case-nav { position: sticky; top: 78px; display: grid; gap: 8px; }
.case-nav a { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text-dim); background: rgba(5, 10, 31, .62); }
.evidence-panel { padding: 18px; margin-bottom: 16px; }
.evidence-panel figure { margin: 0 0 14px; border-radius: var(--radius); overflow: hidden; }
.evidence-panel img { width: 100%; display: block; }
.evidence-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.evidence-list li { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-dim); background: rgba(255,255,255,.04); }

.site-foot { padding: 24px 0 48px; border-top: 1px solid var(--line); }
.foot-grid { display: flex; justify-content: space-between; gap: 24px; align-items: end; }
.foot-brand { font-family: var(--font-logo); font-size: 26px; color: var(--pink-soft); }
.foot-brand small { display: block; margin-top: 3px; color: var(--cyan); font-family: var(--font-code); font-size: 11px; }
.corner-note, .counter { color: var(--text-faint); font-size: 13px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.foot-links a { color: var(--text-dim); font-family: var(--font-code); }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .42s ease, transform .42s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .topband { grid-template-columns: auto auto; }
  .ticker { grid-column: 1 / -1; }
  .gnav { align-items: flex-start; flex-direction: column; padding-bottom: 12px; }
  .navlinks { justify-content: flex-start; }
  .signal-board, .case-layout, .profile-card { grid-template-columns: 1fr; }
  .hero-shell { background-position: 64% center; }
  .hero-character { width: min(70vw, 610px); right: -18vw; opacity: .7; }
  .home-hero .hero__copy { width: min(100%, 560px); }
  .hero-flicker { left: 20%; right: 0; top: 4%; bottom: 40%; opacity: .7; }
  .monitor-stage { min-height: 430px; }
  .program-card { width: min(65%, 340px); }
  .story-grid, .format-grid, .case-grid, .linkring { grid-template-columns: 1fr; }
  .story-card, .story-card:nth-child(1), .story-card:nth-child(2) { grid-column: span 1; }
  .profile-card dl { grid-template-columns: 1fr; }
  .case-nav { position: static; }
}

@media (max-width: 560px) {
  .wrap, .narrow { width: min(100% - 22px, var(--max)); }
  .corner-title { font-size: clamp(44px, 16vw, 68px); }
  .hero-shell { background-position: 60% center; }
  .brandmark { grid-template-columns: 32px auto; column-gap: 8px; }
  .brandmark::before { width: 32px; border-radius: 8px; }
  .brandmark strong { font-size: 13px; }
  .brandmark span { font-size: 8px; letter-spacing: .16em; }
  .hero-character { width: 104vw; right: -25vw; bottom: -12px; opacity: .52; }
  .home-hero { min-height: 620px; padding-top: 24px; padding-bottom: 46px; align-items: flex-start; }
  .hero-logo { width: min(360px, 96vw); }
  .monitor-stage { min-height: 330px; }
  .stage-tv { width: 118%; }
  .program-card { width: 72%; padding: 11px; }
  .program-card h2 { font-size: 28px; margin-top: 14px; }
  .program-lines { margin: 10px 0; }
  .format-card strong, .case-card strong { font-size: 22px; }
  .read { width: min(100% - 22px, var(--read)); padding: 20px; }
  .foot-grid { display: grid; }
}