/* The ferry timetable: the winter departures of a small ferry line on warm paper, in thin tabular figures of Archivo
   (a variable typeface, weight 100 to 900 and width 62 to 125). Under the pointer two vermilion hairlines stretch
   like rubber bands along the row and down the column; the time where they cross takes weight and width. */
:root {
  --paper: #f3f0e8;         /* the page */
  --ink: #141414;           /* the lit row and column, the time under the cross, the headers that snap */
  --grey: #a29d93;          /* the times at rest */
  --soft: #8a857c;          /* the ports and the boats at rest, the small texts */
  --rule: rgba(20, 20, 20, 0.14); /* the two rules of the table */
  --accent: #ff4a1c;        /* the two hairlines */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  --pad: clamp(16px, 6vw, 96px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding: clamp(18px, 3.4vw, 40px) var(--pad) clamp(18px, 3vw, 36px);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the top line and the foot */
.top,
.foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
}

.top > span,
.foot > span {
  display: block;
  overflow: hidden;
}

.top > span > span {
  display: block;
}

.top__name {
  font-weight: 640;
  font-stretch: 104%;
  letter-spacing: -0.01em;
}

.top__note {
  color: var(--soft);
  font-weight: 400;
  text-align: right;
}

.hint {
  color: var(--soft);
  font-size: 13px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the board */
.board {
  --fs: clamp(15px, 2.15vw, 30px);
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(1100px, 100%);
  margin: 28px 0;
}

/* the hairlines live under the texts: every text wears a patch of paper, so the lines run between the cells and
   hide behind the figures, like the leaders of a printed timetable */
.cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.cross__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6.6em, 0.95fr) repeat(var(--cols, 6), minmax(0, 1fr));
  font-size: var(--fs);
  outline: none;
}

.table:focus-visible {
  box-shadow: 0 0 0 1px var(--ink);
}

.cell,
.head,
.port {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cell {
  justify-content: center;
  height: 2.15em;
}

.head {
  justify-content: center;
  height: calc(2.15em + 6px);
  padding-bottom: 6px;
  font-size: max(12px, 0.46em);
}

.port {
  justify-content: flex-start;
  font-size: max(12px, 0.52em);
}

/* the texts: the patch of paper that hides the hairlines, and the weight, width and ink the script moves */
.t {
  --w: 230;
  --s: 88;
  --k: 0;
  display: block;
  padding: 0 0.32em;
  background: var(--paper);
  white-space: nowrap;
  line-height: 1.15;
  font-weight: var(--w);
  font-stretch: calc(var(--s) * 1%);
  color: color-mix(in srgb, var(--ink) calc(var(--k) * 100%), var(--grey));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

.head .t,
.port .t {
  --w: 380;
  --s: 100;
  color: color-mix(in srgb, var(--ink) calc(var(--k) * 100%), var(--soft));
}

.head .t {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.port .t {
  margin-left: -0.32em;
}

/* the two rules: under the boats and under the last port */
.rule {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
  pointer-events: none;
}

@media (max-width: 640px) {
  .top {
    font-size: 13px;
  }

  .board {
    --fs: 13.5px;
    margin: 20px 0;
  }

  .table {
    grid-template-columns: minmax(5.6em, 1.2fr) repeat(var(--cols, 6), minmax(0, 1fr));
  }

  .cell {
    height: 3.4em;
  }

  .head {
    height: calc(3.4em + 4px);
    padding-bottom: 4px;
    font-size: 9.5px;
  }

  .port {
    font-size: 11px;
  }

  .t {
    padding: 0 0.18em;
  }

  .head .t {
    letter-spacing: 0.03em;
  }
}

/* the rows hold no box of their own: their cells sit straight in the grid */
.row {
  display: contents;
}