/* p0st-4am-c1ub. A zine printed in three inks on bone stock.
   Every colour is an ink. Where inks overlap they multiply, the way they do on paper.
   The plates never quite register. That is the point. */

:root {
  --stock: #E9E7E0;
  --ink: #1C1B19;
  --pink: #FF48B0;
  --orange: #FF6C2F;
  /* The third ink. It prints only while the window is open. */
  --yellow: #FFE800;
  --paper: #F4F2EC;

  --ink-2: rgba(28, 27, 25, 0.74);
  --ink-3: rgba(28, 27, 25, 0.52);

  --grotesk: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --typed: "Courier Prime", "Courier New", Courier, monospace;

  --gutter: clamp(1.25rem, 6vw, 6rem);
  --bind: clamp(1.25rem, 9vw, 9rem);
  --measure: 60ch;
  --section: clamp(4.5rem, 13vh, 9.5rem);
}

* { box-sizing: border-box; }

html {
  background: var(--stock);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 112.5%;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pink); color: var(--ink); }

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

p { margin: 0; }

/* The sheet. A screened tint drawn on a canvas, crop marks, registration crosses,
   and the colour bar. Fixed behind everything; pasted paper covers it. */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--ink);
}
.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.crop { position: absolute; width: 1.75rem; height: 1.75rem; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--ink); }
.crop::before { width: 0.875rem; height: 1px; }
.crop::after { width: 1px; height: 0.875rem; }
.crop-tl { top: 0; left: 0; }
.crop-tl::before { top: 1.5rem; left: 0.25rem; }
.crop-tl::after { left: 1.5rem; top: 0.25rem; }
.crop-tr { top: 0; right: 0; }
.crop-tr::before { top: 1.5rem; right: 0.25rem; }
.crop-tr::after { right: 1.5rem; top: 0.25rem; }
.crop-bl { bottom: 0; left: 0; }
.crop-bl::before { bottom: 1.5rem; left: 0.25rem; }
.crop-bl::after { left: 1.5rem; bottom: 0.25rem; }
.crop-br { bottom: 0; right: 0; }
.crop-br::before { bottom: 1.5rem; right: 0.25rem; }
.crop-br::after { right: 1.5rem; bottom: 0.25rem; }
.reg { position: absolute; left: 50%; transform: translateX(-50%); }
.reg svg { display: block; stroke-width: 1; }
.reg-t { top: 0.5rem; }
.reg-b { bottom: 0.5rem; }

.bar {
  position: absolute;
  left: 1rem;
  bottom: 1.25rem;
  display: grid;
  gap: 0.5rem;
}
.swatch {
  display: grid;
  grid-template-columns: repeat(3, 0.75rem);
  gap: 2px;
  font-family: var(--typed);
  font-size: 0.5625rem;
  line-height: 1;
}
.swatch i { display: block; height: 0.75rem; background: currentColor; }
.swatch i:nth-child(2) { opacity: 0.5; }
.swatch i:nth-child(3) { opacity: 0.25; }
.swatch small { grid-column: 1 / -1; margin-top: 2px; font-size: inherit; color: var(--ink); }
.swatch-pink { color: var(--pink); }
.swatch-orange { color: var(--orange); }
.swatch-yellow { color: var(--yellow); opacity: 0; transition: opacity 1s ease; }
:root[data-open="true"] .swatch-yellow { opacity: 1; }

/* Masthead. Sits over the cover, does not follow the reader. */

.mast {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: max(1.25rem, env(safe-area-inset-top)) var(--gutter) 0 var(--bind);
}
.mast-left {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin: 0;
}
.landing .mast-mark { display: none; }
.mast-mark {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.mast-home {
  font-family: var(--typed);
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
}
.mast-home:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.clock {
  font-family: var(--typed);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.clock-zone { color: var(--ink-3); }

/* Cover */

main { position: relative; z-index: 1; }

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem var(--gutter) clamp(2.5rem, 8vh, 5.5rem) var(--bind);
}

/* The wordmark is printed once in ink over colour plates that have slipped.
   --slip runs 0 to 1 on load. --px and --py follow the pointer afterwards. */
.wordmark {
  position: relative;
  margin: 0 0 0 -0.03em;
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(3.4rem, 18.3vw, 19rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
  --slip: 0;
  --px: 0;
  --py: 0;
}
.wordmark .plate { display: block; }
.wordmark .plate-k { position: relative; }
.wordmark .plate-a,
.wordmark .plate-b,
.wordmark .plate-c {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.8s ease;
  will-change: transform;
}
.wordmark .plate-a {
  color: var(--pink);
  transform: translate(
    calc(var(--slip) * -0.035em + var(--px) * -0.014em),
    calc(var(--slip) * 0.03em + var(--py) * -0.012em)
  );
}
.wordmark .plate-b {
  color: var(--orange);
  transform: translate(
    calc(var(--slip) * 0.04em + var(--px) * 0.014em),
    calc(var(--slip) * -0.025em + var(--py) * 0.01em)
  );
}
.wordmark .plate-c {
  color: var(--yellow);
  opacity: 0;
  transform: translate(
    calc(var(--slip) * 0.012em + var(--px) * 0.022em),
    calc(var(--slip) * 0.048em + var(--py) * 0.018em)
  );
}
:root[data-open="true"] .wordmark .plate-c { opacity: 1; }
.wordmark.is-slipped { --slip: 1; }
.wordmark.is-live .plate-a,
.wordmark.is-live .plate-b,
.wordmark.is-live .plate-c { transition-duration: 350ms, 0.8s; transition-timing-function: ease-out, ease; }

.hero-line {
  max-width: 38ch;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  font-family: var(--typed);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.status-swatch {
  width: 0.85em;
  height: 0.85em;
  background: var(--orange);
}
.status[data-open="true"] .status-swatch { background: var(--pink); }
.status-count { font-weight: 700; }

/* Sections */

section { padding: var(--section) var(--gutter) var(--section) var(--bind); }
.hero + section { padding-top: clamp(3rem, 8vh, 6rem); }

h2 {
  margin: 0 0 1.25rem;
  font-weight: 700;
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

.window-caption, .rules-note, .steps p, .cta > p { color: var(--ink-2); }

/* The transition. Two states printed over each other in two inks, so the
   overlap is a colour neither has alone. The words drift slowly across each other. */

.transition {
  display: grid;
  grid-template-columns: minmax(12rem, 24rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: 80rem;
}
.overprint {
  position: relative;
  height: 1.55em;
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(3.75rem, 10.4vw, 9.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  transform: rotate(-4deg);
}
.op {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  mix-blend-mode: multiply;
}
.op-a { color: var(--pink); animation: op-a 9s ease-in-out infinite alternate; }
.op-b { color: var(--orange); top: 0.52em; left: 0.22em; animation: op-b 9s ease-in-out infinite alternate; }
.op-c {
  color: var(--yellow);
  top: 0.58em;
  left: 0.3em;
  opacity: 0;
  transition: opacity 1.2s ease;
  animation: op-b 9s ease-in-out infinite alternate;
}
:root[data-open="true"] .op-c { opacity: 1; }
@keyframes op-a { from { translate: 0 0; } to { translate: 0.05em 0.03em; } }
@keyframes op-b { from { translate: 0 0; } to { translate: -0.06em -0.03em; } }

.transition-copy { max-width: 31rem; }
.transition p {
  margin-bottom: 1em;
  font-size: clamp(1.375rem, 2.3vw, 2rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.transition p:last-child { margin-bottom: 0; }

/* The window. The day as a strip of twenty four cells. */

.window-section {
  display: grid;
  gap: 2.25rem;
  max-width: 80rem;
}
.strip24 {
  position: relative;
  padding: 1.5rem 0 2rem;
  --now: 0;
}
.cells {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
}
.cell {
  position: relative;
  aspect-ratio: 1 / 1.8;
  border: 1.5px solid var(--ink);
  background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(28, 27, 25, 0.3) 4px 5px);
  font-family: var(--typed);
  font-size: 0.75rem;
  line-height: 1;
}
.cell span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.4rem;
  text-align: center;
}
.cell.open { background: none; }
.cell.open::before, .cell.open::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  mix-blend-mode: multiply;
}
.cell.open::after { background: var(--pink); transform: translate(1.5px, -1.5px); }
.cell.open::before { background: var(--yellow); transform: translate(-1.5px, 2px); opacity: 0; transition: opacity 1s ease; }
:root[data-open="true"] .cell.open::before { opacity: 1; }
.cell.open span { z-index: 1; }
.cell.tick { animation: tick 900ms ease-out; }
@keyframes tick { from { transform: scale(1.08); } to { transform: none; } }

.strip-now {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--now) * 100%);
  width: 0;
  transition: left 1s linear;
}
.strip-now::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 1.7rem;
  left: -1px;
  width: 2px;
  background: var(--ink);
}
.strip-now::after {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: -0.4rem;
  border: 0.4rem solid transparent;
  border-top: 0.6rem solid var(--ink);
  border-bottom: 0;
}
.now-time {
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  font-family: var(--typed);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Past noon the label sits on the other side of the marker, so it never leaves the strip. */
.strip24.is-late .now-time { left: auto; right: 0.5rem; }
.window-caption {
  max-width: 34ch;
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Heard at this hour. Typed strips, cut out and pasted down. */

.room-note {
  font-family: var(--typed);
  font-size: 1rem;
  color: var(--ink-3);
}
.strips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.2rem 1.5rem;
  max-width: 80rem;
  margin: 2.5rem 0 0;
  padding: 0;
}
.strip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9rem;
  max-width: 42rem;
  padding: 0.75rem 1.1rem 0.7rem;
  background: var(--paper);
  font-family: var(--typed);
  font-size: 1.0625rem;
  line-height: 1.4;
  transform: rotate(var(--tilt));
}
.strip:nth-child(4n + 1) { --tilt: -1.1deg; }
.strip:nth-child(4n + 2) { --tilt: 0.7deg; }
.strip:nth-child(4n + 3) { --tilt: -0.4deg; }
.strip:nth-child(4n + 4) { --tilt: 1.3deg; }
.strip:nth-child(5n + 2) { margin-left: clamp(0rem, 4vw, 3rem); }
.strip-t {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--pink);
  font-variant-numeric: tabular-nums;
}

/* Two rules. The stamp comes down when the rule comes into view. */

.rule-list {
  list-style: none;
  display: grid;
  gap: 2.25rem;
  margin: 2rem 0 0;
  padding: 0;
  max-width: 54rem;
}
.rule {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
}
.rule p {
  max-width: 30ch;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.stamp {
  display: inline-block;
  padding: 0.3em 0.55em 0.25em;
  border: 2px solid var(--pink);
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  color: var(--pink);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: rotate(-11deg) scale(2.1);
  transition: transform 260ms cubic-bezier(0.2, 1.6, 0.4, 1), opacity 110ms linear;
}
.stamp.is-down {
  opacity: 1;
  transform: rotate(-7deg) scale(1);
}
.rules-note {
  margin-top: 2.5rem;
  font-family: var(--typed);
  font-size: 1rem;
}

/* How a seat opens. A sequence, so it is numbered. */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: 40rem;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 0;
}
.steps li::before {
  content: counter(step);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--pink);
}
.steps p {
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  line-height: 1.45;
}

/* Ask for a seat */

.cta { padding-bottom: clamp(6rem, 18vh, 12rem); }
.cta > p {
  max-width: 40ch;
  margin-bottom: 2.5rem;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
}

/* The button is a stock rectangle over a pink plate that has slipped.
   Hover brings the plate into register and the pink fills the button.
   While the window is open a yellow plate prints under it too. */
.button {
  position: relative;
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--grotesk);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.button::before, .button::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 1s ease;
}
.button::before {
  background: var(--pink);
  transform: translate(-7px, 7px);
}
.button::after {
  background: var(--yellow);
  transform: translate(7px, -5px);
  opacity: 0;
}
.button.is-open::after { opacity: 1; }
.button-face {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.05rem 1.5rem 0.95rem;
  border: 2px solid var(--ink);
  background: var(--stock);
  transition: background-color 200ms ease;
}
.button:hover::before, .button:focus-visible::before,
.button:hover::after, .button:focus-visible::after { transform: translate(0, 0); }
.button:hover .button-face, .button:focus-visible .button-face { background: transparent; }
.button:active .button-face { transform: translate(1px, 1px); }
.button-label {
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.button-sub {
  font-family: var(--typed);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* Footer */

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding: 1.75rem var(--gutter) max(1.75rem, env(safe-area-inset-bottom)) var(--bind);
  font-size: 0.9375rem;
}
/* The rule runs from the binding to the outer gutter, clear of the colour bar. */
.foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--bind);
  right: var(--gutter);
  height: 2px;
  background: var(--ink);
}
.foot-mark { font-weight: 700; }
.foot-clock { font-family: var(--typed); font-variant-numeric: tabular-nums; }

/* Small screens */

@media (max-width: 760px) {
  .transition { grid-template-columns: 1fr; }
  .overprint { font-size: clamp(3.75rem, 17vw, 6rem); margin: 0.5rem 0 1rem; }
  .stamp { margin-left: 0.25rem; font-size: 1.125rem; }
}
@media (max-width: 640px) {
  .hero { padding-top: 5rem; }
  .wordmark { font-size: clamp(2.5rem, 18vw, 6rem); }
  .cells { gap: 2px; }
  .cell { aspect-ratio: 1 / 3.4; font-size: 0.6875rem; }
  .cell span { top: 0.3rem; }
  .cell:not(.major) span { display: none; }
  .strip { max-width: 100%; font-size: 1rem; padding: 0.65rem 0.9rem; }
  .strip:nth-child(5n + 2) { margin-left: 0; }
  .steps li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .mast { align-items: flex-start; }
}
@media (max-width: 760px) {
  .bar, .reg { display: none; }
}

/* Accessibility preferences */

@media (prefers-reduced-motion: reduce) {
  .wordmark { --slip: 1; }
  .wordmark .plate-a, .wordmark .plate-b, .wordmark .plate-c { transition: none; }
  .op { animation: none; }
  .cell.tick { animation: none; }
  .strip-now { transition: none; }
  .stamp { opacity: 1; transform: rotate(-7deg); transition: none; }
  .button::before, .button::after, .button-face { transition: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --ink-3: rgba(28, 27, 25, 0.8); }
}