:root {
  --deck: #1A3570;      /* page: the blue a card is held against */
  --slot: #132A5C;      /* empty calendar slots */
  --buff: #EADFBF;      /* card stock */
  --ink: #2A2520;       /* text printed on cards */
  --print: #A8362B;     /* digits pre-printed on the card */
  --amber: #E8B33F;     /* coloured card stock: a program still being made */
  --haze: #9FB0D3;      /* secondary text on the deck */

  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;

  /* classic typographic scale */
  --s-12: 0.75rem;
  --s-14: 0.875rem;
  --s-16: 1rem;
  --s-18: 1.125rem;
  --s-21: 1.3125rem;
  --s-24: 1.5rem;
  --s-36: 2.25rem;
  --s-72: clamp(3rem, 8vw, 5.5rem);

  --gutter: 16px;
  --cut: 18px;          /* the clipped top-left corner of every card */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--deck);
  color: var(--buff);
  font-family: var(--sans);
  font-size: var(--s-18);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--buff);
  outline-offset: 3px;
}

.wrap {
  width: min(1180px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--buff);
  color: var(--ink);
  padding: 8px 12px;
  z-index: 10;
}
.skip:focus { top: var(--gutter); }

/* Masthead */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: var(--s-21);
  letter-spacing: 0.04em;
}

.brand-mark { width: 40px; height: 40px; }
.brand-mark path { fill: var(--buff); }
.brand-mark rect { fill: var(--deck); }

.masthead-link {
  font-size: var(--s-16);
  color: var(--haze);
  text-underline-offset: 4px;
}
.masthead-link:hover { color: var(--buff); }

/* Hero */

.hero { padding-block: 24px 96px; }

.hero-cards {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.card-frame {
  flex: 0 1 660px;
  min-width: 0;
  /* on narrow screens the card runs off the right edge instead of shrinking to illegible holes */
  margin-right: calc(-1 * var(--gutter));
  overflow: hidden;
  max-width: 660px;
  perspective: 1100px;
}

/* wide enough for the whole card: let it tilt and cast its shadow without being clipped */
@media (min-width: 700px) {
  .card-frame { overflow: visible; margin-right: 0; }
}

.hero-card {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgb(6 16 40 / 0.45));
  transform-origin: 50% 50%;
  will-change: transform;
}

.punch-card .stock { fill: var(--buff); }
.punch-card .printed { fill: var(--print); font-family: var(--mono); font-size: 6.4px; text-anchor: middle; }
.punch-card .typed { fill: var(--ink); font-family: var(--mono); font-weight: 600; font-size: 8.5px; text-anchor: middle; }
.punch-card .rule { stroke: var(--print); stroke-width: 0.5; opacity: 0.5; }
.punch-card .hole { fill: var(--deck); }

/* loose cards to the right of the main one, only where there is room for them */
.card-pile { display: none; }

@media (min-width: 1100px) {
  .card-pile {
    display: block;
    position: relative;
    flex: 1;
    align-self: stretch;
    min-height: 300px;
  }
}

.pile-card {
  position: absolute;
  width: min(300px, 64%);
  height: auto;
  filter: drop-shadow(0 8px 14px rgb(6 16 40 / 0.4));
}
/* --r is each card's resting angle on the table; the hover tilt is added on top of it */
.pile-card { transform: rotate(calc(var(--r) * 1deg)); }
.pile-card:nth-child(1) { left: 2%;  top: 0;   --r: -8; }
.pile-card:nth-child(2) { left: 30%; top: 18%; --r: 5; }
.pile-card:nth-child(3) { left: 6%;  top: 44%; --r: 2; }
.pile-card:nth-child(4) { left: 33%; top: 58%; --r: -6; }
.pile-amber .stock { fill: var(--amber); }

/* the one orchestrated moment: the card is punched column by column on load */
.hero-card .col {
  opacity: 0;
  transition: opacity 60ms linear;
  transition-delay: calc(var(--c) * 22ms + 250ms);
}
.hero-card.punched .col { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-card .col { transition: none; }
}

.hero-text {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-top: 56px;
}

h1 {
  font-size: var(--s-72);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 9ch;
}

.hero-intro { max-width: 34em; }
.hero-intro p + p { margin-top: 20px; }

.status {
  font-family: var(--mono);
  font-variation-settings: "wdth" 87.5;
  font-size: var(--s-16);
  color: var(--buff);
  padding-left: 14px;
  border-left: 3px solid var(--buff);
}

/* Calendar */

.calendar { padding-bottom: 96px; }

.calendar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 32px;
}

h2 {
  font-size: var(--s-36);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 0;
  list-style: none;
  font-size: var(--s-14);
  color: var(--haze);
}
.legend li { display: inline-flex; align-items: center; gap: 8px; }

.swatch { width: 14px; height: 18px; display: inline-block; }
.swatch-published { background: var(--buff); clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); }
.swatch-open { background: var(--amber); clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); }
.swatch-locked { background: var(--slot); border: 1px dashed var(--haze); }

.days {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.day {
  position: relative;
  min-height: 196px;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 18px;
}

.day-date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-variation-settings: "wdth" 87.5;
}
.day-num { font-size: var(--s-36); font-weight: 700; line-height: 1; font-variation-settings: "wdth" 100; }
.day-week { font-size: var(--s-12); }

.day-topic {
  margin-top: auto;
  font-size: var(--s-18);
  font-weight: 700;
  line-height: 1.2;
}

.day-note {
  margin-top: 6px;
  font-size: var(--s-14);
  line-height: 1.4;
}

/* locked: an empty slot waiting for its card */
.day-locked {
  background: var(--slot);
  outline: 1px dashed rgb(159 176 211 / 0.45);
  outline-offset: -1px;
  color: rgb(159 176 211 / 0.7);
}

/* open: the day has arrived, the program is still being made; a card of a different stock, not clickable */
.day-open {
  background: var(--amber);
  color: var(--ink);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.day-open .day-week { color: var(--ink); }
.day-open .day-note { color: rgb(42 37 32 / 0.8); }

/* published: a real card, clipped corner and all */
.day-published {
  background: var(--buff);
  color: var(--ink);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  padding: 0;
}
.day-btn {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 16px 16px 18px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.day-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.day-published .day-week { color: var(--print); }
.day-published .day-note { color: rgb(42 37 32 / 0.75); }
.day-published .day-cta {
  margin-top: 12px;
  font-size: var(--s-14);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.day-btn:hover .day-cta { text-decoration-thickness: 2px; }

.today-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--s-12);
  font-weight: 700;
  color: var(--amber);
  background: var(--ink);
  padding: 2px 8px;
  align-self: flex-start;
}

/* Program dialog: the day's card, pulled out of the deck and enlarged */

[hidden] { display: none !important; }

.program {
  width: min(860px, 100% - 2 * var(--gutter));
  max-width: none;
  max-height: calc(100dvh - 2 * var(--gutter));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.program::backdrop { background: rgb(13 27 60 / 0.82); }

.program-card {
  background: var(--buff);
  clip-path: polygon(calc(var(--cut) * 2) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) * 2));
  padding: 28px 32px 32px;
}

.program[open] .program-card { animation: card-in 280ms cubic-bezier(.2, .7, .2, 1); }
@keyframes card-in {
  from { transform: translateY(48px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .program[open] .program-card { animation: none; }
}

.program-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-left: 28px; /* clear the clipped corner */
}

.program-date {
  font-family: var(--mono);
  font-variation-settings: "wdth" 87.5;
  font-size: var(--s-14);
  color: var(--print);
}

.program-close {
  border: 2px solid var(--ink);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--s-14);
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
}
.program-close:hover { background: var(--ink); color: var(--buff); }
.program-close:focus-visible, .program-github:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.program-topic {
  margin-top: 20px;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.program-title {
  margin-top: 10px;
  font-size: var(--s-21);
  font-weight: 500;
}

.program-shot { margin: 28px 0 0; }
.program-shot a { display: block; }
.program-shot img,
.program-shot-empty {
  display: block;
  width: 100%;
  max-height: min(520px, 60vh);
  object-fit: contain;
  background: var(--ink);
  border: 2px solid var(--ink);
}
.program-shot a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.program-shot-empty {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: none;
  border-style: dashed;
  color: rgb(42 37 32 / 0.6);
  font-size: var(--s-14);
}

.program-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgb(42 37 32 / 0.25);
}

.program-label {
  font-size: var(--s-18);
  font-weight: 700;
  margin-bottom: 10px;
}

.program-text { max-width: 36em; }
.program-text p + p { margin-top: 14px; }
.program-text > * + * { margin-top: 14px; }
.program-text ul, .program-text ol { padding-left: 1.4em; }
.program-text ul { list-style: disc; }
.program-text ol { list-style: decimal; }
.program-text a { text-decoration: underline; }
.program-text code, .program-text pre { font-family: ui-monospace, Consolas, monospace; font-size: 0.92em; }
.program-text pre { overflow-x: auto; }
.program-text img { max-width: 100%; height: auto; }

.program-player {
  margin-top: 18px;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.program-player iframe,
.program-player video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.program-github {
  display: inline-block;
  margin-top: 28px;
  background: var(--ink);
  color: var(--buff);
  font-weight: 700;
  font-size: var(--s-16);
  padding: 12px 20px;
  text-decoration: none;
}
.program-github:hover { background: var(--deck); }

@media (max-width: 760px) {
  .program-card { padding: 22px 20px 24px; }
}

/* Rules */

.rules { padding-bottom: 96px; max-width: 1180px; }
.rules h2 { margin-bottom: 24px; }
.rules ul {
  padding-left: 1.1em;
  max-width: 38em;
  display: grid;
  gap: 12px;
}
.rules li::marker { color: var(--haze); }

.footer {
  padding-block: 32px 48px;
  border-top: 1px solid rgb(159 176 211 / 0.3);
  font-size: var(--s-14);
  color: var(--haze);
}

/* Responsive */

@media (max-width: 1000px) {
  .days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hero { padding-bottom: 72px; }
  .hero-text { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
  .days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .day { min-height: 168px; }
  .masthead-link { display: none; }
}

#calendar:focus { outline: none; } /* focus lands here after the scroll; the scroll itself shows where you are */

/* "per day": a slow, translucent iridescent film drifting through the letters */
.iridescent {
  background-image: linear-gradient(105deg,
    rgb(245 208 230 / 0.92) 0%,
    rgb(189 232 240 / 0.88) 18%,
    rgb(217 204 245 / 0.86) 34%,
    rgb(243 233 184 / 0.92) 50%,
    rgb(201 242 216 / 0.86) 66%,
    rgb(189 232 240 / 0.88) 82%,
    rgb(245 208 230 / 0.92) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: iridescent-drift 14s ease-in-out infinite alternate;
}

@keyframes iridescent-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}