@font-face {
  font-family: "Rosario";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/rosario-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Rosario";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/rosario-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Rosario";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/rosario-latin-700-normal.woff2") format("woff2");
}

:root {
  --ground: #12121e;
  --ink: #eef4f7;
  --muted: #a3adbd;

  /* rink */
  --ice: #eef4f7;
  --rink-red: #c8102e;
  --rink-blue: #1f4e9c;
  /* film */
  --film: #c2702e;
  --film-ink: #1d1109;
  /* brick */
  --mortar: #cdbba9;
  --paver: #cf6a4a;
  --paver-found: #eb9272;
  --brick-ink: #1d0e0a;
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Rosario, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: lining-nums;
  -webkit-text-size-adjust: 100%;
}

.page {
  min-height: 100vh;
  min-height: 100svh;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(40px, 9vw, 96px) 20px 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
}

/* ---------- masthead ---------- */

.masthead {
  position: relative;
  --word: clamp(88px, 21vw, 200px);  /* wordmark size; the eyebrow is placed from it */
  --dot-top: 0.116;     /* top of the i-dot, as a fraction of --word below the wordmark box top */
  --cap-top: 0.1366;    /* top of the eyebrow capitals, in em below the eyebrow box top */
  --stem-left: 0.031;   /* left edge of the r stem, as a fraction of --word */
}

.masthead h1 {
  margin: 0;
  font-weight: 700;
  font-size: var(--word);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: lowercase;
}

/* "Projects by" sits in the space above "ray", its capitals level with the top of the i-dot. */
.eyebrow {
  position: absolute;
  left: calc(var(--word) * var(--stem-left) - 0.0625em);
  top: calc(var(--word) * var(--dot-top) - var(--cap-top) * 1em);
  margin: 0;
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

/* ---------- the three plates ---------- */

.plates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.plate {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 88px;
  padding: 10px 32px;
  text-decoration: none;
}

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

.plate-text {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
}

.name {
  grid-column: 1;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 29px);
  line-height: 1.1;
}

.desc {
  grid-column: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.where {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---- rink: ice, red line, face-off circle ---- */

.plate-ice {
  background: var(--ice);
  color: var(--ground);
  padding-right: 210px;
}

.plate-ice .where { color: var(--rink-blue); }

.rink {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 190px;
}

.rink-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 9px;
  margin-left: -4.5px;
  background: var(--rink-red);
}

.rink-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 4px solid var(--rink-blue);
  border-radius: 50%;
}

/* The puck is dropped on the dot when the plate is pointed at or focused. */
.rink-puck {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -17px 0 0 -14px;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: 0 4px 0 #000000, 0 8px 8px rgba(20, 45, 80, 0.4);
  transform: translateY(-90px);
  transition: transform 200ms cubic-bezier(0.5, 0, 0.9, 0.5);
}

.plate-ice:hover .rink-puck,
.plate-ice:focus-visible .rink-puck { transform: translateY(0); }

/* ---- film: negative base with perforations ---- */

.plate-film {
  background: var(--film);
  color: var(--film-ink);
  padding-top: 16px;
  padding-bottom: 16px;
}

.perfs {
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  background-image: repeating-linear-gradient(90deg, var(--ground) 0, var(--ground) 12px, transparent 12px, transparent 22px);
  background-position: 6px 0;
  transition: background-position 360ms ease-out;
}

.perfs-top { top: 5px; }
.perfs-bottom { bottom: 5px; }

/* The strip advances one perforation. */
.plate-film:hover .perfs,
.plate-film:focus-visible .perfs { background-position: 28px 0; }

/* ---- brick: an engraved paver in a running-bond walkway ---- */

.plate-brick {
  background: var(--mortar) url("/brick.svg") 0 0 / 264px 88px;
  color: var(--brick-ink);
  align-items: stretch;
  padding: 0 22px 0 66px;
}

/* The paver runs the full height of the plate, so the brick courses meet it cleanly. */
.paver {
  flex: 0 1 auto;
  align-content: center;
  max-width: 100%;
  padding: 10px 30px;
  background: var(--paver);
  border: solid var(--mortar);
  border-width: 0 3px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: background-color 160ms ease-out;
}

/* Like a search hit on the brick map: the paver lights up. */
.plate-brick:hover .paver,
.plate-brick:focus-visible .paver { background: var(--paver-found); }

/* ---------- footer ---------- */

.foot {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

/* ---------- narrower screens ---------- */

@media (max-width: 720px) {
  .plate { padding: 12px 18px; }
  .plate-text { grid-template-columns: minmax(0, 1fr); }
  .name { font-size: 21px; }
  .desc { font-size: 15px; }
  .where { grid-column: 1; grid-row: auto; margin-top: 3px; font-size: 14px; }
  .plate-ice { padding-right: 88px; }
  .rink { width: 130px; right: -52px; }
  .plate-film { padding-top: 20px; padding-bottom: 20px; }
  .plate-brick { padding: 0 14px 0 20px; }
  .paver { padding: 12px 16px; }
}

@media (max-width: 640px) {
  .eyebrow { font-size: 14px; letter-spacing: 0.22em; }
}

@media (max-width: 500px) {
  .eyebrow { font-size: 12px; letter-spacing: 0.18em; }
}

@media (prefers-reduced-motion: reduce) {
  .rink-puck, .perfs, .paver { transition: none; }
}