/* What the Code Actually Says — deco design system (matches the NEC channel) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@400;600;700&display=swap');
:root{
  --bg:#0B111C; --bg2:#0E1116; --panel:#101827; --panel2:#151B24;
  --brass:#C9A227; --amber:#FFB30F; --copper:#B87333; --ivory:#F2E8D5;
  --green:#3FA66A; --red:#C5424A; --silver:#C8CDD2; --muted:#8E8C84;
  --serif:'Cinzel',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ivory);font-family:var(--sans);line-height:1.55;
  background-image:radial-gradient(1200px 600px at 50% -10%,rgba(201,162,39,.06),transparent);}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
a{color:var(--amber);text-decoration:none}a:hover{text-decoration:underline}
/* deco frame */
.frame{border:3px solid var(--brass);position:relative;margin:22px auto;max-width:1100px;background:linear-gradient(180deg,rgba(16,24,39,.6),transparent 40%)}
.frame::before{content:"";position:absolute;inset:7px;border:1px solid var(--copper);pointer-events:none}
.corner{position:absolute;width:34px;height:34px;border-color:var(--brass)}
/* header */
header{padding:34px 0 26px;text-align:center;border-bottom:1px solid rgba(201,162,39,.25)}
.kicker{font-family:var(--serif);letter-spacing:.34em;color:var(--brass);font-size:14px;text-transform:uppercase}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,5vw,52px);color:var(--ivory);margin:10px 0;letter-spacing:.02em}
.sub{color:var(--amber);font-size:clamp(15px,2.4vw,20px);font-weight:600}
.chip{display:inline-block;background:var(--panel);border:2px solid var(--amber);color:var(--amber);
  font-family:var(--serif);font-size:13px;padding:5px 14px;border-radius:8px;margin-top:14px;letter-spacing:.08em}
/* sections */
section{padding:30px 0}
h2{font-family:var(--serif);color:var(--brass);font-size:clamp(20px,3.4vw,30px);margin-bottom:16px;letter-spacing:.03em}
.card{background:var(--panel);border:2px solid rgba(201,162,39,.55);border-radius:14px;padding:22px 24px;margin:14px 0}
.code{border-left:4px solid var(--amber)}
.code .tag{font-family:var(--serif);color:var(--amber);font-weight:700;font-size:15px;letter-spacing:.05em}
.code p{color:var(--silver);font-size:15px;margin-top:8px}
.hl{background:rgba(90,60,5,.9);color:var(--ivory);padding:1px 5px;border-radius:4px}
/* table */
table{width:100%;border-collapse:collapse;margin-top:6px;font-size:16px}
th{font-family:var(--serif);background:#201A08;color:var(--amber);text-align:left;padding:12px 16px;border:1px solid var(--brass)}
td{padding:11px 16px;border:1px solid rgba(201,162,39,.25);color:var(--ivory)}
tr.hi td{background:rgba(63,166,106,.12);color:var(--green);font-weight:700}
/* two-up */
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.two{grid-template-columns:1fr}}
.yr{font-family:var(--serif);font-size:22px;margin-bottom:8px}
.btn{display:inline-block;background:var(--red);color:var(--ivory);font-weight:700;padding:11px 22px;border-radius:30px;margin:6px 8px 6px 0}
.btn.gold{background:transparent;border:2px solid var(--brass);color:var(--brass)}
/* episode grid (hub) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ep{background:var(--panel);border:2px solid rgba(201,162,39,.45);border-radius:14px;padding:20px;transition:.15s}
.ep:hover{border-color:var(--amber);transform:translateY(-2px)}
.ep .n{font-family:var(--serif);color:var(--brass);font-size:13px;letter-spacing:.14em}
.ep h3{font-family:var(--serif);color:var(--ivory);font-size:21px;margin:6px 0}
.ep .sec{color:var(--amber);font-size:13px;font-weight:600}
footer{border-top:1px solid rgba(201,162,39,.25);padding:26px 0;text-align:center;color:var(--muted);font-size:14px}
.tools{color:var(--silver);font-size:14px}.tools b{color:var(--amber)}