/* Live Industry Lab — course page. Colors sampled from the approved marks:
   black ground, distressed off-white, red #E80000. */
:root{
  --bg:#0a0a0a; --bg-2:#131313; --bg-3:#1b1b1b;
  --ink:#f4f1ec; --muted:#a8a8a8; --line:rgba(244,241,236,.13);
  --red:#e80000;          /* brand red: large type, fills, rules */
  --red-text:#ff4d4d;     /* brand red lifted for small text on black (5.6:1) */
  --red-dark:#b80000;
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --label:"Bebas Neue","Oswald","Arial Narrow",sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.55;
  /* faint grain, echoing the distressed logo */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 12px}
h1,h2,h3{margin:0;font-weight:400}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:880px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}
.dot{color:var(--red-text);padding:0 .15em}

/* tagline strip */
.tagline{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:calc(env(safe-area-inset-top,0px) + 9px) 16px 8px;
  font-family:var(--label);font-size:15px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);
  border-bottom:3px solid var(--red);background:#000;white-space:nowrap;overflow:hidden;
}
.tagline::before,.tagline::after{content:"";flex:0 1 56px;height:3px;background:var(--red)}
.tagline b{color:var(--red-text);font-weight:400}

/* hero */
.hero{text-align:center;padding:30px 0 34px}
.hero__logo{display:block;margin:0 auto 6px;width:min(520px,88vw)}
.hero__logo img{display:block;width:100%}
.kicker{font-family:var(--label);font-size:21px;letter-spacing:.22em;color:var(--red-text);margin:0 0 4px}
.hero h1{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(46px,11.5vw,98px);line-height:.95;margin:0 0 18px;overflow-wrap:anywhere;
}
.lede{max-width:34em;margin:0 auto 12px;font-size:clamp(17px,4.4vw,19px);color:#dcd8d1}
.instructor{font-family:var(--label);font-size:19px;letter-spacing:.14em;color:var(--muted);margin:14px 0 0}

/* notice */
.notice{background:var(--bg-2);border:1px solid var(--line);border-left:5px solid var(--red);border-radius:4px;padding:14px 16px 4px;margin:0 0 30px}
.notice__label{display:block;font-family:var(--label);letter-spacing:.2em;color:var(--red-text);font-size:16px;margin-bottom:2px}

/* assignments */
.assignments{padding-bottom:40px}
.assignments h2{display:flex;align-items:center;gap:14px;font-family:var(--label);font-size:30px;letter-spacing:.16em;margin:0 0 16px}
.assignments h2::after{content:"";flex:1;height:3px;background:var(--red)}
.assign-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.assign{
  display:grid;grid-template-columns:104px 1fr;
  background:var(--bg-2);border:1px solid var(--line);border-left:6px solid var(--red);border-radius:4px;
  transition:transform .15s ease,border-color .15s ease;
}
.assign:hover{transform:translateY(-2px);border-color:rgba(244,241,236,.24);border-left-color:var(--red)}
.assign__code{
  font-family:var(--display);font-size:52px;line-height:1;color:var(--red);
  padding:20px 4px 0;text-align:center;border-right:1px solid var(--line);overflow-wrap:anywhere;
}
.assign__body{padding:18px 20px 20px;min-width:0}
.assign__top{margin-bottom:6px}
.badge{display:inline-block;font-family:var(--label);font-size:15px;letter-spacing:.14em;line-height:1;padding:5px 9px 4px;border-radius:3px;background:var(--red);color:#fff}
.assign__title{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,6.4vw,38px);line-height:1.02;letter-spacing:.01em;margin:0 0 6px;overflow-wrap:anywhere}
.assign__title a{text-decoration:none}
.assign__title a:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:4px}
.assign__meta{font-family:var(--label);font-size:18px;letter-spacing:.1em;color:var(--muted);margin:0 0 10px}
.assign__desc{color:#d7d3cc;max-width:40em}
.btn{
  display:inline-flex;align-items:center;gap:8px;min-height:46px;margin-top:6px;padding:10px 18px 8px;
  background:var(--red);color:#fff;text-decoration:none;border-radius:3px;
  font-family:var(--label);font-size:21px;letter-spacing:.1em;
  transition:background-color .15s ease;
}
.btn:hover{background:var(--red-dark)}
.assign.is-upcoming,.assign.is-closed{border-left-color:#3a3a3a}
.assign.is-upcoming:hover,.assign.is-closed:hover{transform:none;border-left-color:#3a3a3a}
.is-upcoming .assign__code,.is-closed .assign__code{color:#6b6b6b} /* 3.5:1 — dimmed but legible */
.is-upcoming .badge{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px #555}
.is-closed .badge{background:#2c2c2c;color:var(--muted)}
.is-closed .assign__title,.is-closed .assign__desc{color:var(--muted)}
.empty{color:var(--muted);font-style:italic}

/* footer */
.foot{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);padding-top:20px;padding-bottom:36px;color:var(--muted);font-size:14px}
.foot img{flex:none}
.foot p{margin:0}
.foot__small{font-size:13px;margin-top:2px !important}
.foot a{color:var(--muted)}

@media (max-width:560px){
  .assign{grid-template-columns:64px 1fr}
  .assign__code{font-size:34px;padding-top:18px}
  .assign__body{padding:16px 14px 18px}
  .btn{font-size:18px;letter-spacing:.05em;padding:10px 14px 8px} /* keeps the label on one line at 320px */
  .tagline{letter-spacing:.22em;font-size:13px;gap:10px}
  .tagline::before,.tagline::after{flex-basis:24px}
}
@media (prefers-reduced-motion:reduce){
  .assign,.btn{transition:none}
  .assign:hover{transform:none}
}
@media print{
  body{background:#fff;color:#000}
  .tagline,.foot a{display:none}
  .assign{background:#fff;border-color:#999;break-inside:avoid}
  .lede,.assign__desc{color:#000}
}