/* ==========================================================================
   Demo Festival Runway
   A departures board for submission deadlines, drawn on a pixel grid.
   Two rules hold the whole thing together:
     1. Colour means time-left and nothing else.
     2. Pixel type carries the chrome; real type carries the reading.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --sunk:#F4F4F4;
  --grid:#EDEDED;
  --ink:#000000;
  --ink-2:#525252;
  --ink-3:#8A8A8A;
  --line:#E3E3E3;
  --line-2:#C4C4C4;

  --hot:#C4261A;   --hot-bg:#FCEAE7;
  --warm:#8A5A00;  --warm-bg:#FBF1DC;
  --cool:#2C6E30;  --cool-bg:#E8F2E8;
  --idle:#39608C;  --idle-bg:#E9EEF4;
  --off:#8A8A8A;

  --focus:#1A5FB4;
  --sp:clamp(16px,4vw,28px);
  --maxw:1120px;
  --px:2px;                 /* one "pixel" — every notch and border steps by this */
}

:root[data-theme="dark"]{
  --paper:#000000; --card:#000000; --sunk:#131313; --grid:#1C1C1C;
  --ink:#FFFFFF; --ink-2:#A6A6A6; --ink-3:#707070;
  --line:#242424; --line-2:#3A3A3A;
  --hot:#FF7A5C;  --hot-bg:#2B0F09;
  --warm:#FFC44D; --warm-bg:#2B2008;
  --cool:#9FE06B; --cool-bg:#132409;
  --idle:#79B0E8; --idle-bg:#0C1A28;
  --off:#707070;
  --focus:#7FB8FF;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img,svg{image-rendering:pixelated; max-width:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.shell{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp)}
a{color:inherit; text-underline-offset:3px; text-decoration-thickness:1px}
:focus-visible{outline:var(--px) solid var(--focus); outline-offset:var(--px)}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:var(--card); padding:8px 14px; z-index:99}
.skip:focus{left:var(--sp)}

/* pixel faces ------------------------------------------------------------ */
/* Two pixel faces, split by how much they have to say.
   Pixelify Sans has near-normal metrics, so it takes anything phrase-length.
   Silkscreen is a true 8px bitmap — very wide — so it only gets 3-4 characters. */
.pixel,.utc,.sechead,.stat span,.groupline,.live,.nextout-label,.cd .sm,.when .lab{
  font-family:"Pixelify Sans","Hanken Grotesk",sans-serif;
}
.tally,.clock .u,.gbtn .gc,.tbtn .tc,.loading{
  font-family:Silkscreen,"Hanken Grotesk",monospace;
}

/* The pixel box: a border drawn as four offset shadows, so the corners stay
   open. That notch is what makes an edge read as drawn on a grid. */
.px{
  border:0; border-radius:0; background:var(--card);
  box-shadow:0 calc(var(--px) * -1) 0 var(--line-2), 0 var(--px) 0 var(--line-2),
             calc(var(--px) * -1) 0 0 var(--line-2), var(--px) 0 0 var(--line-2);
}
.px:hover{
  box-shadow:0 calc(var(--px) * -1) 0 var(--ink-3), 0 var(--px) 0 var(--ink-3),
             calc(var(--px) * -1) 0 0 var(--ink-3), var(--px) 0 0 var(--ink-3);
}

/* ---------- masthead ---------- */
.masthead{position:relative; padding-block:clamp(28px,6vw,52px) clamp(22px,5vw,38px); overflow:hidden}
.masthead::before{               /* the grid the type is drawn on */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:8px 8px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 72%);
}
.masthead .shell{position:relative}
.mast-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px}
.utc{
  margin:0; font-family:"Pixelify Sans",monospace; font-size:13px; letter-spacing:.02em;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.utc b{color:var(--ink); font-weight:600}
.utc span{color:var(--ink-3)}
.theme{width:30px; height:30px; flex:none; cursor:pointer; padding:0; position:relative; color:var(--ink-2)}
.theme::after{
  content:""; position:absolute; inset:6px;
  box-shadow:inset 0 0 0 var(--px) currentColor;
  background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%);
}
.theme:hover{color:var(--ink)}
h1{
  font-family:"Pixelify Sans","Hanken Grotesk",sans-serif;
  margin:0 0 16px; font-weight:700; line-height:.92; letter-spacing:0;
  font-size:clamp(40px,9vw,78px);
  text-shadow:var(--px) var(--px) 0 var(--line-2), calc(var(--px)*2) calc(var(--px)*2) 0 var(--grid);
}
.deck{margin:0; max-width:50ch; color:var(--ink-2); font-size:clamp(14.5px,2.1vw,16.5px)}
.deck strong{color:var(--ink); font-weight:600}

/* ---------- join band ---------- */
.join{
  display:block; text-decoration:none; color:var(--paper); background:var(--ink);
  border-block:var(--px) solid var(--ink);
}
.join-inner{
  display:flex; align-items:center; gap:clamp(12px,3vw,20px);
  padding-block:13px; flex-wrap:wrap;
}
/* a speech bubble built out of pixels — 6x3 grid, one blank for the tail */
.join-mark{
  display:grid; grid-template-columns:repeat(6,5px); gap:2px; flex:none;
}
.join-mark i{width:5px; height:5px; background:var(--paper); display:block}
.join-mark i:nth-child(13),.join-mark i:nth-child(16),
.join-mark i:nth-child(17),.join-mark i:nth-child(18){background:transparent}
.join-mark i:nth-child(8),.join-mark i:nth-child(10){background:var(--ink)}
.join-text{flex:1 1 auto; min-width:0; line-height:1.3}
.join-text b{display:block; font-size:15px; font-weight:600; letter-spacing:-.01em}
.join-text small{display:block; font-size:12px; opacity:.66; margin-top:2px}
.join-go{
  flex:none; font-family:Silkscreen,monospace; font-size:9px; letter-spacing:.06em;
  padding:6px 9px; opacity:.8;
  box-shadow:0 calc(var(--px)*-1) 0 var(--paper),0 var(--px) 0 var(--paper),
             calc(var(--px)*-1) 0 0 var(--paper),var(--px) 0 0 var(--paper);
}
.join:hover .join-go{opacity:1; background:var(--paper); color:var(--ink)}
.join:hover .join-mark i{background:var(--warm)}
.join:hover .join-mark i:nth-child(13),.join:hover .join-mark i:nth-child(16),
.join:hover .join-mark i:nth-child(17),.join:hover .join-mark i:nth-child(18){background:transparent}
.join:hover .join-mark i:nth-child(8),.join:hover .join-mark i:nth-child(10){background:var(--ink)}

/* ---------- next out ---------- */
.nextout{border-block:var(--px) solid var(--ink); background:var(--card)}
.nextout-inner{
  display:flex; align-items:center; gap:clamp(14px,3vw,30px);
  padding-block:clamp(14px,3vw,18px); flex-wrap:wrap;
}
.nextout-label{
  margin:0; flex:none; font-size:11px; line-height:1.4; letter-spacing:.01em;
  text-transform:uppercase; color:var(--hot);
}
.nextout-body{flex:1 1 240px; min-width:0}
.nextout-name{margin:0; font-size:clamp(17px,3vw,21px); font-weight:600; letter-spacing:-.015em; line-height:1.35}
.nextout-name a{display:inline-block; padding-block:3px}
.nextout-meta{margin:3px 0 0; font-size:12.5px; color:var(--ink-2)}
.clock{display:flex; gap:calc(var(--px)*3); flex:none}
.clock .unit{min-width:54px; text-align:center; background:var(--sunk); padding:6px 6px 5px;
  box-shadow:0 calc(var(--px)*-1) 0 var(--line-2),0 var(--px) 0 var(--line-2),
             calc(var(--px)*-1) 0 0 var(--line-2),var(--px) 0 0 var(--line-2);}
.clock .n{
  font-family:"Pixelify Sans",monospace; display:block; font-weight:700;
  font-size:clamp(20px,3.6vw,25px); line-height:1; color:var(--hot); font-variant-numeric:tabular-nums;
}
.clock .u{display:block; font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:4px}

/* ---------- stats ---------- */
.stats{display:grid; overflow-wrap:anywhere; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:16px 20px; padding-block:18px}
.stat b{
  font-family:"Pixelify Sans",monospace; display:block; font-weight:700;
  font-size:clamp(22px,4vw,30px); line-height:1; font-variant-numeric:tabular-nums;
}
.stat span{display:block; margin-top:6px; font-size:11px; letter-spacing:.01em; text-transform:uppercase; color:var(--ink-3); line-height:1.5}

/* ---------- section heads ---------- */
.sechead{
  display:flex; align-items:center; gap:12px; margin:clamp(18px,4vw,26px) 0 12px;
  font-size:12px; font-weight:500; letter-spacing:.01em; text-transform:uppercase; color:var(--ink-2);
}
.sechead .rule{
  flex:1; height:var(--px);
  background:repeating-linear-gradient(90deg,var(--line-2) 0 var(--px),transparent var(--px) calc(var(--px)*2));
}
.sechead .secn{font-family:Silkscreen,monospace; font-size:8px; color:var(--ink-3); letter-spacing:.02em; text-transform:none}

/* ---------- genre picker ---------- */
.genres{display:flex; flex-wrap:wrap; gap:calc(var(--px)*4); width:100%; min-width:0}
.gbtn{
  font:inherit; font-size:13px; cursor:pointer; color:var(--ink-2); background:var(--card);
  border:0; border-radius:0; padding:6px 11px; display:inline-flex; align-items:baseline; gap:7px;
  box-shadow:0 calc(var(--px)*-1) 0 var(--line-2),0 var(--px) 0 var(--line-2),
             calc(var(--px)*-1) 0 0 var(--line-2),var(--px) 0 0 var(--line-2);
}
.gbtn:hover{color:var(--ink);
  box-shadow:0 calc(var(--px)*-1) 0 var(--ink-3),0 var(--px) 0 var(--ink-3),
             calc(var(--px)*-1) 0 0 var(--ink-3),var(--px) 0 0 var(--ink-3);}
.gbtn .gc{font-family:Silkscreen,monospace; font-size:9px; color:var(--ink-3)}
.gbtn[aria-pressed="true"]{background:var(--ink); color:var(--paper);
  box-shadow:0 calc(var(--px)*-1) 0 var(--ink),0 var(--px) 0 var(--ink),
             calc(var(--px)*-1) 0 0 var(--ink),var(--px) 0 0 var(--ink);}
.gbtn[aria-pressed="true"] .gc{color:var(--paper); opacity:.6}
.morebtn{
  display:none; margin-top:10px; font:inherit; font-size:12.5px; cursor:pointer;
  background:none; border:0; padding:2px; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px;
}
.morebtn:hover{color:var(--ink)}

/* ---------- controls ---------- */
.controls{
  padding-block:12px 10px; margin-top:clamp(12px,3vw,20px);
  border-bottom:var(--px) solid var(--line-2);
}
.crow{display:flex; flex-wrap:wrap; gap:calc(var(--px)*4); align-items:center}
.crow-meta{margin-top:8px; gap:14px}
.field{display:flex; min-width:0}
.field.grow{flex:1 1 210px}
input[type="search"],select{
  font:inherit; font-size:14px; color:var(--ink); padding:8px 10px; width:100%; min-width:0; appearance:none;
}
select{
  padding-right:26px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px);
  background-size:4px 4px,4px 4px; background-repeat:no-repeat;
}
input[type="search"]::placeholder{color:var(--ink-3)}
.types{display:flex; flex-wrap:wrap; gap:calc(var(--px)*3)}
.tbtn{
  font:inherit; font-size:12px; cursor:pointer; color:var(--ink-2); background:none;
  border:var(--px) solid var(--line); border-radius:0; padding:3px 8px;
  display:inline-flex; gap:6px; align-items:baseline;
}
.tbtn:hover{border-color:var(--ink-3); color:var(--ink)}
.tbtn[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.tbtn .tc{font-family:Silkscreen,monospace; font-size:8px; opacity:.6}
.tally{margin:0 0 0 auto; font-family:Silkscreen,monospace; font-size:9px; color:var(--ink-3); white-space:nowrap}
.reset{font:inherit; font-size:12px; cursor:pointer; background:none; border:0; padding:3px 2px;
  color:var(--ink-2); text-decoration:underline; text-underline-offset:3px}
.reset:hover{color:var(--ink)}

/* ---------- key ---------- */
.key{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:0;
  font-size:11px; color:var(--ink-3);
}
.key span{display:inline-flex; align-items:center; gap:6px}
.key .blk{width:8px; height:8px; display:inline-block}
.key .b-hot{background:var(--hot)} .key .b-warm{background:var(--warm)}
.key .b-cool{background:var(--cool)}
.key-est i{font-style:normal; font-weight:700; color:var(--ink-2)}

/* ---------- footer ---------- */
.site-footer{margin-top:34px; padding-block:18px 28px; border-top:var(--px) solid var(--line)}
.footer-main{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 32px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line);
}
.footer-brand{margin:0; font-size:22px; font-weight:600; line-height:1.2}
.footer-tagline{margin:6px 0 0; font-size:13px; color:var(--ink-2)}
.footer-links{display:flex; flex-wrap:wrap; gap:4px 24px; font-size:13px; color:var(--ink-2)}
.footer-links a{display:inline-flex; align-items:center; gap:6px; min-height:44px; text-decoration:none}
.footer-links a:hover{color:var(--ink); text-decoration:underline}

/* ---------- board ---------- */
.board{margin-top:8px; min-height:40vh}
.loading{padding:56px 0; text-align:center; color:var(--ink-3); font-family:Silkscreen,monospace; font-size:11px}
.groupline{
  display:flex; align-items:center; gap:12px; padding:26px 0 9px;
  font-size:12px; letter-spacing:.01em; text-transform:uppercase; color:var(--ink-2);
}
.groupline .rule{flex:1; height:var(--px);
  background:repeating-linear-gradient(90deg,var(--line-2) 0 var(--px),transparent var(--px) calc(var(--px)*2));}
.groupline .gn{font-family:Silkscreen,monospace; font-size:8px; color:var(--ink-3); letter-spacing:.02em; text-transform:none}

.item{
  display:grid;
  grid-template-columns:86px minmax(0,1.6fr) 148px minmax(0,1.25fr);
  gap:0 18px; align-items:start; padding:15px 0;
  border-bottom:1px solid var(--line);
}
.item:first-of-type{border-top:1px solid var(--line)}

/* countdown column — the scan target */
.cd{line-height:1.1; padding-top:2px}
.cd .big{
  font-family:"Pixelify Sans",monospace; display:block; font-size:23px; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.cd .sm{display:block; font-size:10px; letter-spacing:.01em; text-transform:uppercase; color:var(--ink-3); margin-top:5px}
/* a four-block meter: how much runway is left, in form as well as colour */
.meter{display:flex; gap:var(--px); margin-top:6px}
.meter i{width:11px; height:5px; background:var(--line-2)}
.s-hot  .cd .big{color:var(--hot)}  .s-hot  .meter i:nth-child(-n+1){background:var(--hot)}
.s-warm .cd .big{color:var(--warm)} .s-warm .meter i:nth-child(-n+2){background:var(--warm)}
.s-cool .cd .big{color:var(--cool)} .s-cool .meter i{background:var(--cool)}

.title{margin:0 0 6px; font-size:15.5px; font-weight:600; letter-spacing:-.012em; line-height:1.3}
.title a{text-decoration:none; display:inline-block; padding-block:2px}
.title a:hover{text-decoration:underline}
.live{
  font-size:10px; letter-spacing:.01em; text-transform:uppercase; color:var(--hot);
  background:var(--hot-bg); padding:3px 5px 2px; margin-left:8px; vertical-align:2px; white-space:nowrap;
  box-shadow:0 calc(var(--px)*-1) 0 var(--hot),0 var(--px) 0 var(--hot),
             calc(var(--px)*-1) 0 0 var(--hot),var(--px) 0 0 var(--hot);
}
.meta{display:flex; flex-wrap:wrap; gap:calc(var(--px)*2.5); align-items:center}
.t{font-size:10.5px; color:var(--ink-3); border:1px solid var(--line); padding:1px 6px; white-space:nowrap}
.t-any{color:var(--cool); background:var(--cool-bg); border-color:var(--cool); font-weight:500}
.t-genre{color:var(--ink); background:var(--sunk); border-color:var(--line-2); font-weight:500}
.t-elig{color:var(--warm); background:var(--warm-bg); border-color:var(--warm)}
.t-apply{color:var(--idle); background:var(--idle-bg); border-color:var(--idle)}

.when{font-size:12px; color:var(--ink-2); line-height:1.5; font-variant-numeric:tabular-nums}
.when .lab{display:block; font-size:10px; letter-spacing:.01em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.when .due{color:var(--ink); font-weight:600}
.when .due.est::before{content:"~"; color:var(--ink-3); font-weight:400}
.note{font-size:13px; color:var(--ink-2); line-height:1.5; margin:0}


.nores{padding:52px 0; text-align:center; color:var(--ink-3)}
.nores button{font:inherit; background:none; border:0; color:var(--ink); text-decoration:underline; cursor:pointer; padding:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .item{grid-template-columns:78px minmax(0,1fr); gap:0 14px}
  .cd{grid-row:1/span 2}
  .title,.meta{grid-column:2}
  .when,.note{grid-column:2; margin-top:9px}
  .when{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
  .when .lab{display:inline; margin:0}
  .note{margin-top:6px}
}
@media (max-width:700px){
  .genres.collapsed .gbtn:nth-child(n+8){display:none}
  .morebtn{display:inline-block}
  h1{font-size:clamp(34px,11vw,52px)}
}
@media (max-width:560px){
  .nextout-inner{gap:12px}
  .clock{width:100%}
  .clock .unit{flex:1; min-width:0}
  .tally{width:100%; margin-left:0; order:3}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media print{
  .controls,.picker,.theme,.nextout,.key{display:none}
  .item{break-inside:avoid} body{background:#fff; color:#000}
  .masthead::before{display:none}
}


/* ---------- phone + tablet ---------- */
@media (max-width:900px){
  /* one swipeable row instead of 18 stacked chips eating the whole screen */
  .genres{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:3px; scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  .genres::-webkit-scrollbar{display:none}
  .gbtn{flex:0 0 auto; scroll-snap-align:start; font-size:12.5px; padding:7px 11px}

  /* the masthead was pushing the first event below two screenfuls */
  .masthead{padding-block:16px 14px}
  .join-inner{padding-block:11px}
  .join-go{display:none}
  .mast-top{margin-bottom:12px}
  h1{margin-bottom:10px}
  .deck{font-size:14px}
  .nextout-inner{padding-block:12px}

  /* three numbers are enough on a phone */
  .stats{grid-template-columns:repeat(3,1fr); gap:10px; padding-block:12px}
  .stat:nth-child(n+4){display:none}
  .stat b{font-size:21px}
  .stat span{font-size:9.5px}

  .title a{padding-block:4px}
}
@media (max-width:359px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(n+3){display:none}
}