/* ══════════════════════════════════════════════════════════════
   David van Beekum — davidvanbeekum.com
   Palette pulled from the photographs: navy blazer, bleached
   daylight, red brick, and the orange flash on the running shoes.
   The page turns from night to day at "Off the clock".
   ══════════════════════════════════════════════════════════════ */

:root {
  --ink:      #101b30;   /* navy blazer */
  --ink-2:    #17253e;   /* raised surface on ink */
  --ink-3:    #22324f;   /* hairlines on ink */
  --day:      #f2ede3;   /* bleached daylight / concrete */
  --day-2:    #e4dbcb;   /* warm shade */
  --day-3:    #cfc3ad;   /* hairlines on day */
  --brick:    #a84b2e;   /* alley brick */
  --flare:    #e8763a;   /* the orange on the shoes */

  --on-ink:      #ede7db;
  --on-ink-mute: #98a5bd;
  --on-day:      #172034;
  --on-day-mute: #6d6556;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 5vw, 4.5rem);

  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.16, .84, .33, 1);
}

/* ── reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .22vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--flare); color: #fff;
  padding: .75rem 1.25rem; font: 500 .85rem/1 var(--mono);
}
.skip:focus { left: 0; }

/* ── shared pieces ─────────────────────────────────────────── */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.band { padding-block: clamp(4rem, 8.5vw, 7.25rem); position: relative; }
.band--ink { background: var(--ink); color: var(--on-ink); }
.band--day { background: var(--day); color: var(--on-day); }

.eyebrow {
  font: 500 .72rem/1.4 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--flare);
  margin-bottom: 1.1rem;
}
.band--day .eyebrow { color: var(--brick); }

.h2 {
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem);
  line-height: .98;
  letter-spacing: -.028em;
  max-width: 14ch;
}

/* ── top bar ───────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem var(--gut);
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-3);
  font: 500 .74rem/1 var(--mono);
  letter-spacing: .08em;
}
.topbar__mark {
  font-family: var(--display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.02em;
  text-decoration: none; color: var(--on-ink);
}
.topbar__place {
  margin-left: auto; color: var(--on-ink-mute);
  text-transform: uppercase;
}
.topbar__call {
  text-decoration: none; text-transform: uppercase;
  color: var(--ink); background: var(--flare);
  padding: .55rem .95rem; border-radius: 100px;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.topbar__call:hover { background: var(--on-ink); transform: translateY(-1px); }

@media (max-width: 620px) { .topbar__place { display: none; } }

/* ── hero ──────────────────────────────────────────────────── */
/* The portrait is pinned hard to the top-left and bleeds off both
   edges; the name overlaps its inner edge. That overlap is the
   one risk on the page — everything around it stays quiet. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center;
  min-height: 100svh;
}

.hero__frame { position: relative; align-self: stretch; overflow: hidden; }
.hero__frame img {
  height: 100%;
  object-fit: cover;
  object-position: 54% 22%;
  filter: saturate(.94) contrast(1.03);
}
/* fade the photo's right edge into the navy so the name can cross it */
.hero__frame::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 52%, var(--ink) 99%),
    linear-gradient(0deg, color-mix(in srgb, var(--ink) 55%, transparent), transparent 42%);
}

.hero__type {
  position: relative; z-index: 2;
  padding-inline: clamp(1.25rem, 3vw, 3rem) var(--gut);
  margin-left: clamp(-7rem, -6vw, -2rem);
  padding-block: 5.5rem clamp(2rem, 5vw, 4rem);
}

.hero__name {
  font-size: clamp(3rem, 1.1rem + 8.6vw, 8.2rem);
  line-height: .84;
  letter-spacing: -.045em;
  font-weight: 700;
  margin: .1em 0 .55em;
}
.hero__name span { display: block; }
.hero__name span:last-child {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--on-ink);
  text-stroke: 1.5px var(--on-ink);
  margin-left: .06em;
}

.hero__lede {
  max-width: 34ch;
  font-size: clamp(1.05rem, .98rem + .42vw, 1.3rem);
  color: var(--on-ink-mute);
}
.hero__lede em { color: var(--on-ink); font-style: italic; }

.hero__ring {
  max-width: 34ch;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.1rem;
}
.hero__ring a {
  font: 500 clamp(1.15rem, 1rem + .8vw, 1.7rem)/1 var(--mono);
  letter-spacing: -.02em;
  color: var(--flare);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.hero__ring a:hover { border-color: var(--flare); }
.hero__ring span {
  font: 400 .8rem/1 var(--mono);
  letter-spacing: .06em;
  color: var(--on-ink-mute);
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-bottom: clamp(3rem, 9vw, 5rem);
  }
  .hero__frame { height: 62svh; min-height: 340px; }
  .hero__frame::after {
    background: linear-gradient(0deg, var(--ink) 2%, transparent 55%);
  }
  .hero__type {
    margin-left: 0;
    margin-top: -3.5rem;
    padding-top: 0;
    padding-inline: var(--gut);
  }
}

/* ── work ──────────────────────────────────────────────────── */
.work__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.work__item {
  padding: 1.5rem 0;
  border-top: 1px solid var(--ink-3);
}
.work__item:last-child { border-bottom: 1px solid var(--ink-3); }
.work__item dt {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: .45rem;
}
.work__item dd {
  margin: 0;
  color: var(--on-ink-mute);
  max-width: 48ch;
}

.work__shot img {
  border-radius: 3px;
  filter: saturate(.9);
}
.work__shot figcaption,
.mosaic__tile figcaption,
.life__lead figcaption {
  font: 400 .76rem/1.5 var(--mono);
  letter-spacing: .03em;
  margin-top: .75rem;
  color: var(--on-ink-mute);
}

.work__who {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.work__quote {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 24ch;
  border-left: 2px solid var(--flare);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}
.work__street img {
  border-radius: 3px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  filter: saturate(.92);
}
.work__street figcaption {
  font: 400 .76rem/1.5 var(--mono);
  letter-spacing: .03em;
  margin-top: .75rem;
  color: var(--on-ink-mute);
}

.bleed {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  height: clamp(220px, 38vw, 460px);
  overflow: hidden;
}
.bleed img {
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(.92);
}

@media (max-width: 800px) {
  .work__grid { grid-template-columns: 1fr; }
  .work__shot { max-width: 520px; }
  .work__who { grid-template-columns: 1fr; }
  .work__street { max-width: 340px; }
}

/* ── process ───────────────────────────────────────────────── */
/* Numbered because these genuinely happen in this order. */
.flow { padding-top: clamp(3rem, 7vw, 5rem); }

.flow__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.flow__list li { padding-top: 1.1rem; border-top: 1px solid var(--ink-3); }
.flow__n {
  display: block;
  font: 500 .8rem/1 var(--mono);
  letter-spacing: .1em;
  color: var(--flare);
  margin-bottom: .9rem;
}
.flow__list h3 {
  font-size: 1.22rem;
  letter-spacing: -.015em;
  margin-bottom: .4rem;
}
.flow__list p { color: var(--on-ink-mute); font-size: .96rem; }

@media (max-width: 1039px) { .flow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .flow__list { grid-template-columns: 1fr; } }

/* ── off the clock (daylight) ──────────────────────────────── */
.life .eyebrow { color: var(--brick); }

.life__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.life__body {
  max-width: 46ch;
  margin-top: 1.1rem;
  color: var(--on-day);
}
.life__text .h2 { margin-bottom: 1.5rem; }
.life__body:first-of-type {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  line-height: 1.45;
  color: var(--on-day);
}

.life__lead img,
.mosaic__tile img {
  border-radius: 3px;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.mosaic__tile img { aspect-ratio: 2 / 3; }
.life__lead img  { aspect-ratio: 3 / 4; }
.life__lead figcaption,
.mosaic__tile figcaption { color: var(--on-day-mute); }

.life__wide {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 900px;
}
.life__wide img {
  border-radius: 3px;
  /* No forced crop — the group fills the frame edge to edge, so any
     wide crop clips someone out of it. */
}
.life__wide figcaption {
  font: 400 .76rem/1.5 var(--mono);
  letter-spacing: .03em;
  margin-top: .75rem;
  color: var(--on-day-mute);
}

.mosaic {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}
/* stagger the tiles so the grid doesn't read as a contact sheet */
.mosaic__tile:nth-child(even) { margin-top: clamp(1rem, 3vw, 2.75rem); }
.mosaic__tile:nth-child(3n)   { margin-top: clamp(.5rem, 1.5vw, 1.25rem); }

.mosaic__tile { overflow: hidden; }
.mosaic__tile:hover img { transform: scale(1.035); }

@media (max-width: 860px) {
  .life__intro { grid-template-columns: 1fr; }
  .life__lead { max-width: 380px; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mosaic__tile:nth-child(even),
  .mosaic__tile:nth-child(3n) { margin-top: 0; }
}

/* ── call ──────────────────────────────────────────────────── */
/* The phone number is the largest type on the page. That is the
   whole point of the site: he is a man who answers his phone. */
.call {
  text-align: left;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The sprinter in the blocks, faded back behind the closing band.
   The veil is heavy on purpose — the phone number has to stay the
   most legible thing on the page. */
.call__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.call__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 34%;
  /* Darken the photo itself rather than burying it under a veil — the
     silhouette survives, and cream text keeps its contrast. */
  filter: saturate(.55) brightness(.62) contrast(1.1);
}
.call__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--ink) 5%,
      color-mix(in srgb, var(--ink) 56%, transparent) 50%,
      color-mix(in srgb, var(--ink) 30%, transparent) 100%),
    linear-gradient(0deg,
      var(--ink) 1%,
      transparent 24%,
      transparent 78%,
      var(--ink) 100%);
}
/* The photo stays bright, so the type gets its own soft scrim instead —
   a navy halo that lifts it off his shirt without dimming the picture. */
.call .wrap > *,
.call__foot a {
  text-shadow: 0 1px 3px rgba(16, 27, 48, .72),
               0 2px 20px rgba(16, 27, 48, .8);
}
.call__number {
  text-shadow: 0 2px 5px rgba(16, 27, 48, .75),
               0 4px 44px rgba(16, 27, 48, .88);
}

.call__h { color: var(--on-ink); }
.call__note {
  margin-top: 1.25rem;
  max-width: 38ch;
  color: var(--on-ink-mute);
}

/* narrow screens crop the band hard — aim it at his upper body */
@media (max-width: 700px) {
  .call__bg img { object-position: 52% 24%; }
}

.call__number {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(.5rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  font: 500 clamp(2.4rem, .3rem + 10.5vw, 9rem)/.95 var(--mono);
  letter-spacing: -.04em;
  color: var(--on-ink);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.call__number span { display: block; }
.call__number:hover { color: var(--flare); }

.call__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-3);
}
.call__mail {
  font: 400 .92rem/1.4 var(--mono);
  color: var(--on-ink-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.call__mail:hover { color: var(--flare); border-color: var(--flare); }

.follow { display: flex; align-items: center; gap: 1rem; }
.follow__label {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--flare);
}

/* ── social icons ──────────────────────────────────────────── */
.social { display: flex; align-items: center; gap: .15rem; }
.social a {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  color: var(--on-ink-mute);
  border-radius: 100px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.social a:hover { color: var(--flare); background: var(--ink-2); }
.social svg { width: 1.05rem; height: 1.05rem; display: block; }

/* header row sits between the location and the Call button */
.social--bar { margin-left: 1rem; }
.social--bar a { width: 2rem; height: 2rem; }
.social--bar svg { width: .95rem; height: .95rem; }

/* closing row is a touch larger */
.social--foot a { width: 2.5rem; height: 2.5rem; }
.social--foot svg { width: 1.15rem; height: 1.15rem; }

@media (max-width: 860px) {
  /* the location text is already hidden here; keep icons from crowding */
  .social--bar { margin-left: auto; }
}
@media (max-width: 480px) {
  /* keep the tap targets usable on a phone — 28px was too small */
  .social { gap: 0; }
  .social--bar a { width: 2.25rem; height: 2.25rem; }
  .social--bar svg { width: .9rem; height: .9rem; }
  .social--foot a { width: 2.75rem; height: 2.75rem; }
  .call__foot { gap: 1.5rem; }
}

/* ── footer ────────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  border-top: 1px solid var(--ink-3);
  padding: 2rem var(--gut);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
  font: 400 .78rem/1.5 var(--mono);
  letter-spacing: .04em;
  color: var(--on-ink-mute);
}

/* ── motion ────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .85s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}

.rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--rd, 0ms);
}
.rise.is-in { opacity: 1; transform: none; }

@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .rise {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .mosaic__tile:hover img { transform: none; }
}

/* ── print ─────────────────────────────────────────────────── */
@media print {
  .topbar, .mosaic, .bleed { display: none; }
  body { background: #fff; color: #000; }
  .band--ink, .band--day { background: #fff; color: #000; }
}

/* ── photo viewer ──────────────────────────────────────────── */
/* Each photo becomes a button so it is reachable by keyboard.
   The button must not disturb the layout the figure already has. */
.zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}
.zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.zoom:hover::after,
.zoom:focus-visible::after { opacity: 1; }

/* the mosaic's scale-on-hover lives on the image, so keep it working */
.mosaic__tile .zoom:hover img { transform: scale(1.035); }

/* Lock the page behind the viewer straight off the dialog's [open]
   state — declarative, so it cannot be left stuck on. */
html:has(.lb[open]) { overflow: hidden; }

.lb {
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--ink) 97%, black);
  color: var(--on-ink);
  overscroll-behavior: contain;
}
.lb::backdrop { background: color-mix(in srgb, var(--ink) 92%, black); }

.lb__figure {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.25rem;
  place-items: center;
  padding: clamp(3.25rem, 7vw, 4.5rem) clamp(1rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 2.5rem);
}
.lb__img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

.lb__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .35rem 1.25rem;
  text-align: center;
  font: 400 .8rem/1.6 var(--mono);
  letter-spacing: .03em;
  color: var(--on-ink-mute);
}
.lb__count { color: var(--flare); }

/* controls */
.lb__close,
.lb__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  color: var(--on-ink);
  cursor: pointer;
  font-family: var(--body);
  line-height: 1;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.lb__close:hover,
.lb__nav:hover {
  background: var(--flare);
  border-color: var(--flare);
  color: var(--ink);
}

.lb__close {
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 2.75rem; height: 2.75rem;
  font-size: 1.6rem;
  padding-bottom: .18em;
}
.lb__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  font-size: 2rem;
  padding-bottom: .16em;
}
.lb__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 560px) {
  .lb__nav { top: auto; bottom: clamp(.75rem, 3vw, 1.25rem); transform: none; }
  .lb__figure { padding-bottom: 5.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zoom::after, .lb__close, .lb__nav { transition: none; }
  .mosaic__tile .zoom:hover img { transform: none; }
}

/* ── the short list ────────────────────────────────────────── */
/* A quiet warm panel in the daylight half — it picks up the line
   about a conversation being worth an hour and a cigar. */
.pairing {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  background: var(--day-2);
  border-radius: 4px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.pairing__h {
  font: 500 .72rem/1.4 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.pairing__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.pairing__item + .pairing__item {
  border-left: 1px solid var(--day-3);
  padding-left: clamp(1.5rem, 4vw, 3rem);
}
.pairing__item dt {
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-day-mute);
  margin-bottom: .7rem;
}
.pairing__name {
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.9rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--on-day);
}
.pairing__note {
  margin: 0;
  font-size: .95rem;
  color: var(--on-day-mute);
  max-width: 34ch;
}

@media (max-width: 620px) {
  .pairing__list { grid-template-columns: 1fr; }
  .pairing__item + .pairing__item {
    border-left: 0;
    border-top: 1px solid var(--day-3);
    padding-left: 0;
    padding-top: 1.5rem;
  }
}