/* HUMN NEWS — shared system. the future, as the 80s imagined it. */

:root {
  /* color */
  --bg: #08070e; --panel: #110f1c; --panel-2: #171427; --line: #2a2640; --faint: #4a4562;
  --fg: #f3f0fa; --text: #cfcbe0; --dim: #9d98b4; --mute: #837e9c;   /* mute: 4.9:1 minimum, for locked/secondary text */
  --yel: #f9f002; --yel-hi: #fffb7a; --ink: #0c0b12;                  /* the one accent */
  --mag: #ff3d7f;                                                     /* live */
  --cyan: #3ee4f0;                                                    /* the machine's voice */
  /* type: six sizes */
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px; --t-hero: clamp(56px, 10vw, 108px);
  --sans: "Inter", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --disp: "Dela Gothic One", "Arial Black", sans-serif;
  /* space + shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r1: 6px; --r2: 10px; --rp: 999px;
  --tap: 44px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--t-md); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, video, svg { display: block; max-width: 100%; }
::selection { background: var(--yel); color: var(--ink); }
:focus-visible { outline: 2px solid var(--yel); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- voices ---------- */
.label { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.machine { font-family: var(--mono); color: var(--cyan); font-size: var(--t-sm); }
.machine.tag::before { content: "HUMN ▸ "; opacity: .7; }
.kind { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.kind.breaking { color: var(--mag); } .kind.record { color: var(--cyan); } .kind.transmission { color: var(--yel); }
.kind.broadcast { color: var(--fg); } .kind.sponsored { color: var(--mute); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 18px; border-radius: var(--r1);
  font-weight: 600; font-size: var(--t-sm); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .08s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--yel); color: var(--ink); }
.btn.primary:hover:not(:disabled) { background: var(--yel-hi); }
.btn.ghost { border-color: var(--line); color: var(--fg); background: transparent; }
.btn.ghost:hover:not(:disabled) { border-color: var(--dim); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: var(--t-xs); }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-color: var(--ink) transparent var(--ink) transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.ghost.busy::after { border-color: var(--fg) transparent var(--fg) transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { color: var(--yel); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- masthead ---------- */
.mast { border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 20; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.logo { display: flex; flex-direction: column; text-decoration: none; font-family: var(--disp); line-height: .86; transform: skewX(-7deg); transform-origin: left; flex: none; }
.logo b { font-weight: 400; color: var(--yel); font-size: var(--t-xl); text-shadow: 2px 0 var(--mag), -1px 0 var(--cyan); }
.logo i { font-style: normal; color: var(--fg); font-size: var(--t-xl); }
.logo .a { display: inline-block; color: var(--cyan); text-shadow: 0 0 14px var(--cyan); }
.strap { font-family: var(--mono); font-size: var(--t-xs); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; border-left: 1px solid var(--line); padding-left: var(--s4); line-height: 1.5; }
.strap b { color: var(--fg); font-weight: 500; }
.mast-right { display: flex; align-items: center; gap: var(--s3); flex: none; }
.xlink { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); text-decoration: none; font-weight: 700; transition: border-color .15s; }
.xlink:hover { border-color: var(--dim); }
.me { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); font-family: var(--mono); font-size: var(--t-xs); color: var(--fg); border: 1px solid var(--line); border-radius: var(--rp); padding: 0 14px 0 6px; cursor: pointer; background: transparent; transition: border-color .15s; }
.me:hover { border-color: var(--dim); }
.me .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); }
.me .dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.me img { width: 30px; height: 30px; border-radius: 50%; }

/* ---------- yellow bar ---------- */
.ybar { background: var(--yel); color: var(--ink); position: relative; z-index: 19; }
.ybar .wrap { display: flex; align-items: center; gap: var(--s5); height: 48px; overflow-x: auto; scrollbar-width: none; }
.ybar .wrap::-webkit-scrollbar { display: none; }
.ybar a, .ybar .soon { font-weight: 600; font-size: var(--t-sm); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--tap); }
.ybar a:hover, .ybar a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ybar .soon { opacity: .5; }
.ybar .soon em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.ybar .grow { flex: 1; }
.live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: var(--t-xs); white-space: nowrap; font-weight: 500; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mag); animation: pulse 2s ease-in-out infinite; }

/* ---------- ticker ---------- */
.ticker { display: flex; align-items: stretch; height: 40px; border-bottom: 1px solid var(--line); background: #0b0a13; overflow: hidden; }
.ticker .tag { flex: none; display: grid; place-items: center; padding: 0 14px; background: var(--mag); color: var(--ink); font-family: var(--disp); font-size: var(--t-xs); letter-spacing: .12em; }
.ticker .lane { flex: 1; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent); }
.ticker .track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; animation: ticker 70s linear infinite; font-family: var(--mono); font-size: var(--t-xs); color: var(--fg); font-weight: 500; letter-spacing: .02em; }
.ticker:hover .track { animation-play-state: paused; }
.ticker .track > * { padding: 0 18px; text-decoration: none; }
.ticker .track > *::after { content: "■"; color: var(--mag); margin-left: 36px; font-size: 8px; vertical-align: 2px; }
.ticker .track a:hover { color: var(--yel); }

/* ---------- motion: three patterns ---------- */
@keyframes pulse { 50% { opacity: .35; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes glitch {                     /* the house glitch: a tear, a split, back to normal */
  0%, 92%, 100% { transform: skewX(-7deg); text-shadow: 2px 0 var(--mag), -2px 0 var(--cyan); clip-path: none; }
  93% { transform: skewX(-7deg) translate(5px, -2px); text-shadow: 7px 0 var(--mag), -6px 0 var(--cyan); }
  94% { transform: skewX(-7deg) translate(-4px, 1px); clip-path: inset(10% 0 45% 0); }
  95% { transform: skewX(-7deg) translate(2px, 0); clip-path: inset(55% 0 5% 0); }
}

/* ---------- panels + HUD corners ---------- */
.hud { position: relative; }
.hud::before, .hud::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 6; }
.hud::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); border-top-left-radius: var(--r2); }
.hud::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); border-bottom-right-radius: var(--r2); }
.scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.30) 0 1px, transparent 1px 3px); }

/* ---------- section heads ---------- */
.shead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 2px solid var(--yel); }
.shead h2 { font-family: var(--disp); font-weight: 400; font-size: var(--t-xl); color: var(--fg); line-height: 1.1; }
.state { display: inline-flex; align-items: center; gap: 7px; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.state.on { color: var(--fg); } .state.on::before { background: var(--mag); animation: pulse 2s ease-in-out infinite; }

/* ---------- broadcast slot ---------- */
.onair { margin-top: var(--s5); display: grid; grid-template-columns: 1.7fr 1fr; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--panel); }
.screen { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.screen video, .screen img.poster { width: 100%; height: 100%; object-fit: cover; }
.screen .badge { position: absolute; top: var(--s3); left: var(--s3); z-index: 3; font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .06em; padding: 4px 9px; border-radius: 4px; background: var(--mag); color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
.screen .badge.dim { background: rgba(8,7,14,.8); color: var(--fg); border: 1px solid var(--line); }
.screen .badge.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: pulse 1.6s ease-in-out infinite; }
.deadsig { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background:
    radial-gradient(70% 90% at 50% 45%, rgba(62,228,240,.10), transparent 70%), #05040a; }
.deadsig svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.deadsig .msg { position: relative; z-index: 2; display: grid; gap: var(--s2); padding: var(--s6) var(--s4) var(--s4); }
.deadsig .msg b { font-family: var(--disp); font-weight: 400; color: var(--fg); font-size: clamp(22px, 3.2vw, 34px); line-height: 1.1; letter-spacing: .02em; }
.onair .info { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); border-left: 1px solid var(--line); }
.onair .info h3 { font-size: var(--t-lg); line-height: 1.3; color: var(--fg); font-weight: 700; }
.onair .info p { color: var(--dim); font-size: var(--t-sm); }
.onair .info .grow { flex: 1; }
.onair .info .acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.past { display: grid; gap: 2px; margin-top: var(--s2); }
.past a { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); text-decoration: none; font-size: var(--t-sm); color: var(--text); min-height: var(--tap); align-items: center; }
.past a:hover { color: var(--fg); }
.past a span:last-child { font-family: var(--mono); font-size: var(--t-xs); color: var(--mute); white-space: nowrap; }

/* ---------- feed ---------- */
.feed { position: relative; margin-top: var(--s6); }
.feed-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s6); }
.col h4 { font-size: var(--t-lg); font-weight: 700; color: var(--fg); margin-bottom: var(--s3); display: flex; justify-content: space-between; align-items: baseline; }
.rows a { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.rows a:first-child { padding-top: 0; }
.rows .h { color: var(--fg); font-weight: 600; font-size: var(--t-md); line-height: 1.35; display: block; margin-top: 2px; }
.rows a:hover .h { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--yel); }
.rows .ago { font-family: var(--mono); font-size: var(--t-xs); color: var(--mute); white-space: nowrap; }
.empty { color: var(--mute); font-size: var(--t-sm); padding: var(--s3) 0; }
.empty.machine { color: var(--cyan); }
.skel { display: grid; gap: var(--s3); }
.skel i { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: pulse 1.4s ease-in-out infinite; }
.skel i:nth-child(3n) { width: 70%; } .skel i:nth-child(3n+1) { width: 92%; }

/* locked newsroom */
.locked .feed-grid { filter: blur(6px) saturate(.6); opacity: .5; pointer-events: none; user-select: none; }
.offline { position: absolute; left: 0; right: 0; top: 40px; display: none; justify-content: center; z-index: 5; padding: 0 var(--s4); }
.locked .offline { display: flex; }
.offline .box { background: rgba(8,7,14,.94); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s5) var(--s6); text-align: center; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,.6); display: grid; gap: var(--s2); justify-items: center; }
.offline .box b { font-family: var(--disp); font-weight: 400; font-size: var(--t-xl); color: var(--fg); line-height: 1.1; }
.offline .box p { color: var(--dim); font-size: var(--t-sm); }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--dim); transform: translateY(-2px); }
.card .thumb { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(70% 90% at 80% 10%, rgba(249,240,2,.10), transparent 70%), #0d0b16; display: grid; place-items: center; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb .ph { position: absolute; inset: 0; }
.card .thumb .ph svg { width: 100%; height: 100%; display: block; }
.card .thumb .play { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(8,7,14,.75); border: 1px solid rgba(243,240,250,.3); display: grid; place-items: center; }
.card .thumb .play::before { content: ""; border-left: 12px solid var(--fg); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.card .b { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: 4px; }
.card .b .h { color: var(--fg); font-weight: 600; font-size: var(--t-md); line-height: 1.35; }
.card .b .ago { font-family: var(--mono); font-size: var(--t-xs); color: var(--mute); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { min-height: 36px; padding: 0 14px; border-radius: var(--rp); border: 1px solid var(--line); background: transparent; color: var(--dim); font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.chip:hover { border-color: var(--dim); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--yel); border-color: var(--yel); color: var(--ink); }
.chip .n { opacity: .6; margin-left: 4px; }

/* ---------- join modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(4,3,8,.8); backdrop-filter: blur(6px); padding: var(--s4); }
.modal.open { display: flex; }
.sheet { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: var(--s5); position: relative; }
.sheet h3 { font-family: var(--disp); font-weight: 400; font-size: var(--t-xl); color: var(--fg); line-height: 1.1; padding-right: var(--s6); }
.sheet .close { position: absolute; top: 8px; right: 8px; width: var(--tap); height: var(--tap); display: grid; place-items: center; background: none; border: 0; color: var(--dim); font-size: 22px; cursor: pointer; border-radius: 50%; }
.sheet .close:hover { color: var(--fg); background: var(--panel-2); }
.stepr { margin-top: var(--s4); display: grid; gap: var(--s3); }
.sheet label { display: grid; gap: 6px; font-size: var(--t-xs); font-weight: 500; color: var(--dim); }
.sheet .chk { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-xs); color: var(--dim); font-weight: 400; cursor: pointer; }
.sheet .chk input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--yel); flex: none; }
.note { font-size: var(--t-xs); color: var(--dim); min-height: 1.4em; }
.note.err { color: var(--mag); } .note.ok { color: var(--cyan); }
.step { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: var(--s3); display: grid; gap: 10px; transition: border-color .2s, opacity .2s; }
.step.done { border-color: rgba(62,228,240,.45); }
.step.off { opacity: .45; pointer-events: none; }
.step .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.step .hd b { color: var(--fg); font-size: var(--t-sm); font-weight: 600; }
.step .hd b span { font-family: var(--mono); color: var(--mute); font-weight: 400; margin-right: 6px; }
.step .st { font-family: var(--mono); font-size: var(--t-xs); color: var(--dim); display: flex; align-items: center; gap: var(--s2); }
.step.done .st { color: var(--cyan); }
.step .st img { width: 22px; height: 22px; border-radius: 50%; }
.signout { background: none; border: 0; color: var(--dim); font-size: var(--t-xs); cursor: pointer; text-decoration: underline; justify-self: start; min-height: 32px; }
.legal { font-size: var(--t-xs); color: var(--mute); }
.legal a { color: var(--yel); }

/* ---------- inputs ---------- */
input[type="text"], input[type="email"], input[type="url"], input[type="datetime-local"], input:not([type]), textarea, select {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r1); color: var(--fg); font-size: var(--t-md);
  padding: 11px 12px; outline: none; width: 100%; min-height: var(--tap); transition: border-color .15s; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--yel); }
input::placeholder, textarea::placeholder { color: var(--mute); }

/* ---------- footer ---------- */
footer.site { margin-top: var(--s8); border-top: 1px solid var(--line); }
footer.site .wrap { padding-top: var(--s5); padding-bottom: var(--s6); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--mute); }
footer.site nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
footer.site a { text-decoration: none; color: var(--dim); display: inline-flex; align-items: center; min-height: 32px; }
footer.site a:hover { color: var(--fg); }
footer.site .jp { font-family: var(--disp); color: var(--mag); letter-spacing: .2em; }

/* ---------- layout ---------- */
@media (max-width: 980px) {
  .strap { display: none; }
  .onair { grid-template-columns: 1fr; }
  .onair .info { border-left: 0; border-top: 1px solid var(--line); }
  .feed-grid { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 600px) {
  .mast .wrap { height: 64px; }
  .logo b, .logo i { font-size: 22px; }
  .onair .info { padding: var(--s4); }
  .ybar .wrap { gap: var(--s4); }
  .ybar .live { display: none; }
  .btn.small, .chip { min-height: var(--tap); }
  footer.site a { min-height: var(--tap); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }