@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
/* After Hours · cascadiawebdesign.com/after-hours/
   The shared frame around each week's experiment: the bar on top (my name, the After Hours sign, this week, and the
   list of every week). Each week brings its own styles for everything else. */
:root{
  --bg:#0C0A12; --bg-2:#14111C; --bg-3:#1C1826; --line:rgba(241,236,227,.12); --line-2:rgba(241,236,227,.24);
  --text:#F1ECE3; --text-2:#C2BBCB; --text-3:#928B9F;
  --pink:#FF4F8B; --red:#FF3B5C; --aqua:#3DF5E0; --amber:#FFB23E; --violet:#9D7BFF;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Karla","Segoe UI",Arial,sans-serif;
  --f-mono:"DM Mono",Consolas,"Courier New",monospace;
  --f-tube:"Tilt Neon","Trebuchet MS",sans-serif;
  --f-osd:"VT323","DM Mono",Consolas,monospace;
  --gutter:clamp(14px,2.6vw,32px);
}
html,body{height:100%}
body.ah{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.ah :focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ah-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:var(--bg);padding:.6rem 1rem;font-family:var(--f-mono)}
.ah-skip:focus{left:8px;top:8px}

.ah-bar{position:relative;z-index:20;flex:none;display:flex;align-items:center;gap:14px;height:52px;padding-inline:var(--gutter);
  border-bottom:1px solid var(--line);background:var(--bg);box-sizing:border-box}
.ah-me{font:800 17px/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--text);text-decoration:none;white-space:nowrap}
.ah-me:hover{color:var(--amber)}
/* since week 3 the series lives on an old TV (the guide at /after-hours/), so the bar reads like the set's on-screen text */
.ah-name{font:400 25px/1 var(--f-osd);letter-spacing:.06em;text-transform:uppercase;color:#F2F6F3;text-decoration:none;white-space:nowrap;
  text-shadow:1.5px 0 rgba(255,40,80,.6),-1.5px 0 rgba(40,200,255,.6)}
.ah-name:hover{color:#7DFF9B}
.ah-wk{margin:0 auto 0 4px;display:flex;align-items:baseline;gap:10px;min-width:0;font:400 20px/1 var(--f-osd);letter-spacing:.06em;text-transform:uppercase;color:#7DFF9B;white-space:nowrap}
.ah-wk b{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.ah-all{flex:none;font:400 19px/1 var(--f-osd);letter-spacing:.06em;text-transform:uppercase;color:var(--text);background:rgba(10,12,16,.6);
  border:1px solid var(--line-2);border-radius:4px;padding:7px 12px;cursor:pointer}
.ah-all:hover,.ah-all[aria-expanded="true"]{border-color:var(--text)}
.ah-list{position:absolute;right:var(--gutter);top:calc(100% + 8px);width:min(400px,calc(100vw - 2 * var(--gutter)));box-sizing:border-box;
  padding:14px;background:linear-gradient(180deg,#13206E,#0B1452);border:3px solid #8FA0FF;border-radius:0;box-shadow:0 22px 60px rgba(0,0,0,.6)}
.ah-list p{margin:0 4px 12px;color:#D5DCF5;font-size:14px;line-height:1.45}
.ah-list ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ah-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:11px 12px;border-radius:2px;color:var(--text);text-decoration:none}
.ah-list a:hover{background:rgba(241,236,227,.06)}
.ah-list a[aria-current="page"]{background:rgba(255,225,77,.12);box-shadow:inset 4px 0 0 #FFE14D}
.ah-list .n{font:400 17px/1 var(--f-osd);letter-spacing:.06em;text-transform:uppercase;color:#FFE14D}
.ah-list .t{font:800 19px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.ah-list time{font:400 16px/1 var(--f-osd);color:#FFE14D}
.ah-list .d{grid-column:2/4;color:#D5DCF5;font-size:13.5px;line-height:1.4}

/* going from the splash into a week, the big sign flies up into this bar and the week's sign into its title
   (browsers with cross-document view transitions; the splash names its two pieces just before it leaves) */
@view-transition{navigation:auto}
.ah-name{view-transition-name:ah-sign}
.ah-wk b{view-transition-name:ah-week}

@media (max-width:700px){
  .ah-bar{gap:10px;height:48px}
  .ah-me{display:none}
  .ah-name{font-size:22px}
  .ah-wk span{display:none}
}