/* ───────────────────────────────────────────────────────────────
   Emery Reszka — recruiter view
   A swim-meet program. The facts read as a heat-sheet entry, the
   projects swim in lanes separated by lane ropes, and each lane
   ends at the wall on a touchpad that lights when you reach it.
   ─────────────────────────────────────────────────────────────── */

:root {
  --paper:  #F6F8F7;   /* pool-deck white, the printed sheet */
  --sheet:  #FFFFFF;
  --ink:    #0C1719;
  --teal:   #00595F;   /* lane lines, T-marks, primary action */
  --teal-d: #00444A;
  --water:  #D9EEEC;   /* the lanes section */
  --gold:   #F0B429;   /* lane-rope floats and the touch state only */
  --mute:   #44585A;
  --rule:   #B9CBCA;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text:    "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --data:    "Courier Prime", "Courier New", monospace;

  --t-xs:  .8125rem;
  --t-sm:  .9375rem;
  --t-base: 1.0625rem;
  --t-md:  1.3125rem;

  --measure: 64ch;
  --edge: clamp(1rem, 4vw, 3rem);
  --max: 76rem;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-quint: cubic-bezier(.22, 1, .36, 1);

  /* one lane-rope float pair: gold bead, white bead, cord through both */
  --rope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='18' viewBox='0 0 64 18'%3E%3Cpath d='M0 9h64' stroke='%2300444A' stroke-width='2'/%3E%3Crect x='3' y='2' width='26' height='14' rx='7' fill='%23F0B429'/%3E%3Cpath d='M11 2.6v12.8M16 2v14M21 2.6v12.8' stroke='%23C98F10' stroke-width='1.2'/%3E%3Crect x='35' y='2' width='26' height='14' rx='7' fill='%23FFFFFF' stroke='%2300595F' stroke-width='1.2'/%3E%3Cpath d='M43 2.6v12.8M48 2v14M53 2.6v12.8' stroke='%2300595F' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--teal) var(--water);
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--teal); color: var(--sheet); }

a {
  color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s var(--ease-out), text-decoration-thickness .2s var(--ease-out);
}
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

svg { flex: none; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: var(--edge);
  top: -5rem;
  z-index: 20;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--sheet);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: .75rem; outline-color: var(--sheet); }
.skip:hover { color: var(--sheet); }

/* tabular figures only where figures line up: Schibsted's tnum also
   sets commas and periods on the tabular grid, so prose keeps it off */
.pad, .block figcaption { font-variant-numeric: tabular-nums; }

h1, h2, h3 { text-wrap: balance; }

/* ── lane rope: the page's divider ───────────────────────────── */
.rope {
  display: block;
  height: 18px;
  background: var(--rope) repeat-x;
  background-size: 64px 18px;
  /* the floats roll along the cord as the page scrolls */
  background-position-x: calc(var(--sy, 0) * -.45px);
}
.rope--top { animation: rope-pull 1.2s var(--ease-out) both; }
@keyframes rope-pull {
  from { background-position-x: -640px; clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0); }
}

/* ── masthead ────────────────────────────────────────────────── */
.masthead {
  max-width: var(--max);
  margin: 0 auto;
  padding: .5rem var(--edge);
  display: flex;
  align-items: center;
  gap: .25rem 2rem;
  flex-wrap: wrap;
}
.masthead .who {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.masthead nav { display: flex; gap: .25rem 1.5rem; }
.masthead nav a {
  font-size: var(--t-sm);
  color: var(--mute);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
}
.masthead nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.masthead nav a:hover { color: var(--ink); }
.masthead nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── the entry: name, block, heat-sheet row, actions ─────────── */
.entry {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) var(--edge) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "id     block"
    "sheet  sheet"
    "act    blurb"
    "line   line";
  column-gap: clamp(1.25rem, 5vw, 4.5rem);
  align-items: end;
}
.entry-id { grid-area: id; align-self: start; }

.name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.25rem, 10.5vw, 6rem);
  line-height: .86;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 .35em;
}
.name .ln { display: inline-block; overflow: hidden; padding-bottom: .04em; vertical-align: top; }
.name .ln > span {
  display: inline-block;
  animation: rise 1s var(--ease-out) both;
}
.name .ln + .ln > span { animation-delay: .09s; }
@keyframes rise { from { transform: translateY(105%); } }

.standfirst {
  font-size: clamp(1.125rem, 2.1vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.38;
  max-width: 34ch;
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  animation: fade-up .9s var(--ease-out) .25s both;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }

/* the headshot sits on a starting block: photo over a numbered plate */
.block {
  grid-area: block;
  align-self: start;
  margin: 0;
  width: clamp(6.25rem, 20vw, 14rem);
}
.block picture {
  display: block;
  border: 2px solid var(--ink);
  border-bottom: 0;
  overflow: hidden;
  background: var(--water);
}
.block img {
  display: block;
  width: 100%;
  height: auto;
  animation: surface 1.1s var(--ease-out) .15s both;
}
@keyframes surface {
  from { clip-path: inset(100% 0 0 0); transform: scale(1.12); }
  to   { clip-path: inset(0); }
}
.block figcaption {
  background: var(--ink);
  color: var(--sheet);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 2.4vw, 1.75rem);
  letter-spacing: .06em;
  line-height: 1;
  padding: .45em .5em .4em;
  display: flex;
  justify-content: space-between;
}
.block figcaption span { color: var(--gold); }

/* heat-sheet row: a double rule, printed column heads, one entry */
.sheet {
  grid-area: sheet;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: 1.55fr .75fr 1.15fr 1.15fr 1.4fr;
  border-top: 4px double var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--sheet);
}
.sheet > div {
  padding: .75rem .9rem .9rem;
  border-left: 1px dashed var(--rule);
  animation: step 0.7s var(--ease-quint) both;
}
.sheet > div:first-child { border-left: 0; }
.sheet > div:nth-child(1) { animation-delay: .35s; }
.sheet > div:nth-child(2) { animation-delay: .42s; }
.sheet > div:nth-child(3) { animation-delay: .49s; }
.sheet > div:nth-child(4) { animation-delay: .56s; }
.sheet > div:nth-child(5) { animation-delay: .63s; }
@keyframes step { from { opacity: 0; transform: translateY(.9rem); } }
.sheet dt {
  font-family: var(--data);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mute);
  margin-bottom: .35rem;
}
.sheet dd {
  margin: 0;
  font-family: var(--data);
  font-weight: 700;
  font-size: var(--t-sm);
  line-height: 1.4;
}

.actions {
  grid-area: act;
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-self: start;
  animation: fade-up .8s var(--ease-out) .7s both;
}
.blurb {
  grid-area: blurb;
  align-self: start;
  font-size: var(--t-sm);
  color: var(--mute);
  max-width: 34ch;
  margin: 0;
  animation: fade-up .8s var(--ease-out) .8s both;
}

/* pool-bottom lane line: a thick stripe ending in a T at the wall */
.laneline,
.lane::before {
  height: 28px;
  background:
    linear-gradient(var(--teal), var(--teal)) left center / calc(100% - 4px) 6px no-repeat,
    linear-gradient(var(--teal), var(--teal)) right center / 6px 28px no-repeat;
}
.laneline {
  grid-area: line;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  animation: draw 1.4s var(--ease-out) .85s both;
}
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* ── buttons ─────────────────────────────────────────────────── */
.action {
  font-family: var(--text);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  padding: .7rem 1.2rem;
  border: 2px solid var(--ink);
  color: var(--ink);
  background-color: transparent;
  position: relative;
  isolation: isolate;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out), transform .12s ease-out;
}
/* hover wipes an ink fill in from the left, behind the label */
.action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wipe, var(--ink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.action svg { width: 1em; height: 1em; }
.action:hover { color: var(--sheet); text-decoration: none; }
.action:hover::before { transform: scaleX(1); }
.action:active { transform: translateY(2px); }
.action:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.action--fill {
  background-color: var(--teal);
  border-color: var(--teal);
  color: var(--sheet);
}
.action--fill:hover { border-color: var(--ink); }

.action--quiet {
  border-width: 1px;
  border-color: var(--mute);
  color: var(--mute);
  font-weight: 500;
  --wipe: var(--water);
}
.action--quiet:hover { color: var(--ink); border-color: var(--ink); }

/* ── band titles: section names that slide as you pass them ──── */
.band {
  overflow: clip;
  margin: 0 calc(var(--edge) * -1) clamp(1.75rem, 4vw, 3rem);
  padding: 0 var(--edge);
}
.band h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
  transform: translate3d(calc((.5 - var(--q, .5)) * 26vw), 0, 0);
  will-change: transform;
}

/* ── the pool: projects in lanes ─────────────────────────────── */
.pool {
  margin-top: clamp(3rem, 8vw, 6rem);
  background: var(--water);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--edge) clamp(2rem, 5vw, 3.5rem);
  overflow-x: clip;
  position: relative;
}
.pool::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  background: var(--rope) repeat-x;
  background-size: 64px 18px;
  background-position-x: calc(var(--sy, 0) * .45px);
}
.pool > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.pool .band h2 { color: var(--teal-d); }

.lanes { list-style: none; margin: 0 auto; padding: 0; }

.lane {
  position: relative;
  display: grid;
  grid-template-columns: clamp(4rem, 8vw, 7rem) minmax(0, 1fr) auto 3.25rem;
  grid-template-areas: "no body shot pad";
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
  padding: clamp(2rem, 4vw, 3rem) 0 calc(clamp(2rem, 4vw, 3rem) + 60px);
}
/* lane rope under every lane, rolling the other way to the one above */
.lane::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: 0;
  height: 18px;
  background: var(--rope) repeat-x;
  background-size: 64px 18px;
  background-position-x: calc(var(--sy, 0) * -.45px);
}
.lane:nth-child(even)::after { background-position-x: calc(var(--sy, 0) * .45px); }
/* the lane line draws toward the wall as the lane comes up the screen */
.lane::before {
  content: "";
  position: absolute;
  left: clamp(4rem, 8vw, 7rem);
  right: 0;
  bottom: 34px;
  opacity: .7;
  clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0);
}

.lane-no {
  grid-area: no;
  align-self: start;
  position: sticky;
  top: 1.25rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--teal);
  transform: translate3d(0, calc((1 - var(--p, 1)) * 3rem), 0);
  transition: color .5s var(--ease-out);
}
.lane.touched .lane-no { color: var(--teal); }

.lane-body { grid-area: body; min-width: 0; }
.lane h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
}
.lane .what {
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1.4;
  margin: 0 0 1rem;
  max-width: 40ch;
}
.lane p { margin: 0 0 1rem; max-width: var(--measure); }
.lane .hard {
  padding-left: 1rem;
  border-left: 1px solid var(--teal);
  color: var(--mute);
  font-size: var(--t-sm);
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 0;
  list-style: none;
  margin: 1.25rem 0 .5rem;
  padding: 0;
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--mute);
}
.stack li:not(:last-child)::after { content: "/"; margin: 0 .55em; color: var(--teal); opacity: .6; }

.lane .go { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; }
.go a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  font-size: var(--t-sm);
  font-weight: 600;
}
.go a svg { width: .85em; height: .85em; transition: transform .3s var(--ease-out); }
.go a:hover svg { transform: translate(2px, -2px); }
.go a[download] svg,
.go a[href*="releases"] svg { transform: none; }
.go a[href*="releases"]:hover svg { transform: translateY(2px); }

/* the screenshot swims in along the lane */
.shot {
  grid-area: shot;
  align-self: start;
  display: block;
  position: relative;
  z-index: 1;
  transform: translate3d(calc((var(--p, 1) - 1) * 9vw), 0, 0);
  /* revealed from the start line toward the wall; the -3rem margins keep
     the drop shadow once it has arrived */
  clip-path: inset(-3rem calc((1 - var(--p, 1)) * (100% + 3rem) - 3rem) -3rem -3rem);
  opacity: calc(.6 + var(--p, 1) * .4);
  will-change: transform, clip-path;
}
.shot img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 34rem;
  border: 2px solid var(--ink);
  background: var(--sheet);
  box-shadow: 0 18px 40px -18px rgba(0, 68, 74, .45);
}
.shot--wide img { max-height: none; width: min(30rem, 38vw); }

/* touchpad on the wall: lights gold when the lane arrives, then holds teal */
.pad {
  grid-area: pad;
  align-self: start;
  min-height: 12rem;
  margin: 0;
  position: relative;
  z-index: 2;   /* the shot swims in under the wall, not over it */
  background: var(--sheet);
  border: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem 0;
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  transition: background-color .6s var(--ease-out), color .6s var(--ease-out);
}
.pad small {
  font-family: var(--data);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .04em;
}
.lane.touched .pad {
  background: var(--teal);
  color: var(--sheet);
  animation: touch 1.1s var(--ease-out);
}
@keyframes touch {
  0%   { background: var(--gold); color: var(--ink); transform: scaleX(1.18); }
  35%  { background: var(--gold); color: var(--ink); transform: scaleX(1); }
  100% { background: var(--teal); color: var(--sheet); }
}

.lane--text { grid-template-areas: "no body body pad"; }

.aside {
  /* sits on the lanes' grid: the prose column, not the page edge */
  display: grid;
  grid-template-columns: clamp(4rem, 8vw, 7rem) minmax(0, 1fr) 3.25rem;
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: 0;
  font-size: var(--t-base);
  color: var(--ink);
}
.aside > span { grid-column: 2; max-width: var(--measure); }
.aside a { font-weight: 600; }

/* ── deck sections: stack and background, printed on the sheet ─ */
.deck {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--edge) 0;
}
.deck .band h2 { color: var(--ink); }

.caps { margin: 0; border-top: 4px double var(--ink); }
.caps > div {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1rem 2rem;
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--rule);
}
.caps dt {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal-d);
  padding-top: .1rem;
}
.caps dd { margin: 0; font-size: var(--t-md); line-height: 1.45; max-width: 52ch; }

.history {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 4px double var(--ink);
}
.history > li {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  grid-template-areas: "when h" "when list";
  gap: .25rem 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px dashed var(--rule);
}
.history h3 {
  grid-area: h;
  font-size: var(--t-md);
  font-weight: 650;
  line-height: 1.35;
  margin: 0;
}
.history .when {
  grid-area: when;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--teal-d);
  margin: 0;
  padding-top: .15rem;
}
.history ul { grid-area: list; margin: .35rem 0 0; padding-left: 1.1rem; max-width: var(--measure); }
.history ul li { margin-bottom: .25rem; }
.history ul li::marker { color: var(--teal); }
.history .swim h3::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: .8rem;
  margin-right: .6rem;
  border-radius: .4rem;
  background: var(--gold);
  box-shadow: inset 0 0 0 1px #C98F10;
  vertical-align: .05em;
}

/* ── the wall: contact ───────────────────────────────────────── */
.wall {
  margin-top: clamp(4rem, 10vw, 7rem);
  background: var(--water);
  position: relative;
  overflow: clip;
  padding-bottom: clamp(3rem, 8vw, 5rem);
}
.wall-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--edge) 0;
  position: relative;
  z-index: 1;
}
.wall h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: .9;
  text-transform: uppercase;
  color: var(--teal-d);
  margin: 0 0 1.25rem;
}
.wall .ask {
  font-size: clamp(1.1875rem, 2.4vw, 1.625rem);
  font-weight: 500;
  line-height: 1.35;
  max-width: 36ch;
  margin: 0 0 2rem;
}
.wall .act { margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .625rem; }
.wall .act .action { font-size: var(--t-base); padding: .9rem 1.5rem; min-height: 56px; }
.wall .lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0;
  font-size: var(--t-sm);
}
.wall .lines a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.wall .where { font-size: var(--t-sm); color: var(--mute); margin: .5rem 0 0; }

/* ── the basement: below the pool floor, the page's last word ─ */
/* An ink plate, like the starting block's, set under the wall: the
   deepest point of the page, and a quiet door to the games. */
.basement { background: var(--ink); color: var(--sheet); }
.basement-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.5rem) var(--edge);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
}
.basement h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  padding: .45em .5em .4em;
  border: 2px solid var(--sheet);
}
.basement p { margin: 0; max-width: 58ch; font-size: var(--t-sm); line-height: 1.5; color: var(--sheet); }
.action--dark { border-color: var(--sheet); color: var(--sheet); --wipe: var(--sheet); white-space: nowrap; }
.action--dark:hover { color: var(--ink); }
.action--dark:focus-visible { outline-color: var(--sheet); }

/* a big T-mark on the pool floor behind the close, drawn as you arrive */
.tmark {
  position: absolute;
  right: clamp(1rem, 7vw, 7rem);
  top: 18px;
  bottom: clamp(1.5rem, 4vw, 3rem);
  width: clamp(7rem, 20vw, 16rem);
  pointer-events: none;
  opacity: .14;
  background:
    linear-gradient(var(--teal), var(--teal)) center top / 18% 100% no-repeat,
    linear-gradient(var(--teal), var(--teal)) center bottom / 100% 3.25rem no-repeat;
  clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0);
  transform: translate3d(0, calc((1 - var(--p, 1)) * 4rem), 0);
}

/* ── compact ─────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .sheet { grid-template-columns: 1fr 1fr; }
  .sheet > div { border-left: 0; border-top: 1px dashed var(--rule); }
  .sheet > div:nth-child(1) { grid-column: 1 / -1; border-top: 0; }
  .sheet > div:nth-child(even) { border-right: 1px dashed var(--rule); }
  .sheet > div:nth-child(4),
  .sheet > div:nth-child(5) { grid-column: 1 / -1; border-right: 0; }

  .entry {
    grid-template-areas:
      "id     block"
      "sheet  sheet"
      "act    act"
      "blurb  blurb"
      "line   line";
  }
  .blurb { margin-top: 1rem; max-width: none; }

  .lane {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "no   no"
      "body body"
      "shot shot"
      "pad  pad";
    row-gap: 1.25rem;
  }
  .lane--text { grid-template-areas: "no no" "body body" "pad pad"; }
  .aside { display: block; }
  .lane::before { left: 0; }
  .lane-no { position: static; font-size: 4.5rem; }
  .pad {
    writing-mode: horizontal-tb;
    flex-direction: row;
    align-self: end;
    justify-self: end;
    min-height: 0;
    padding: .5rem .8rem;
    font-size: 1.125rem;
  }
  .shot { justify-self: center; transform: translate3d(calc((var(--p, 1) - 1) * 14vw), 0, 0); }
  .shot img { max-height: 30rem; }
  .shot--wide img { width: 100%; }

  .caps > div,
  .history > li { grid-template-columns: 1fr; grid-template-areas: "h" "when" "list"; }
  .caps > div { gap: .35rem; }
  .caps dd { font-size: var(--t-base); }
}

@media (max-width: 40rem) {
  .masthead { padding-top: .25rem; padding-bottom: 0; column-gap: 1rem; }
  .masthead nav {
    order: 3;
    width: calc(100% + var(--edge) * 2);
    margin: 0 calc(var(--edge) * -1);
    padding: 0 var(--edge);
    gap: 0 1.25rem;
    border-top: 1px dashed var(--rule);
    border-bottom: 1px dashed var(--rule);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .masthead nav::-webkit-scrollbar { display: none; }
  .masthead nav a { font-size: var(--t-xs); white-space: nowrap; }
  .masthead nav a:focus-visible { outline-offset: -3px; }

  .entry { padding-top: 1rem; column-gap: .875rem; }
  .name { font-size: clamp(2.75rem, 14vw, 3.75rem); margin-bottom: .25em; }
  .standfirst { font-size: 1rem; line-height: 1.4; margin-bottom: 1rem; }
  .block { width: 6.5rem; }
  .block figcaption { font-size: .9rem; }

  .sheet { margin-bottom: 1rem; }
  .sheet > div { padding: .4rem .6rem .45rem; }
  .sheet dt { font-size: .6875rem; margin-bottom: .05rem; }
  .sheet dd { font-size: .8125rem; line-height: 1.35; }
  .standfirst { font-size: .9375rem; }
  .action { min-height: 48px; padding-block: .55rem; }

  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .action--fill, .action--wide { grid-column: 1 / -1; }
  .laneline { margin-top: 1.75rem; }

  .band h2 { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .lane h3 { font-size: 2.125rem; }
  .lane .what { font-size: 1.125rem; }
  .lane p { font-size: 1rem; }
  .wall .act .action { display: flex; width: 100%; font-size: var(--t-sm); padding-inline: .75rem; }
  .wall { padding-bottom: 9rem; }
  .tmark { top: auto; height: 7rem; right: var(--edge); width: 7rem; bottom: 1.25rem; }
  .basement-in { grid-template-columns: 1fr; row-gap: 1rem; justify-items: start; }
  .basement .action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* nothing travels: no slide, tilt, rise or rolling rope */
  *, *::before, *::after { animation: none !important; }
  .band h2, .shot, .lane-no, .tmark { transform: none !important; }
  .shot { opacity: 1 !important; clip-path: none !important; }
  .rope, .pool::before, .lane::after { background-position-x: 0 !important; }
  .action, .action::before, .dock { transition: none !important; }
  /* state still changes in place: the lane line draws, the number
     fills, the pad lights gold and settles to teal */
  .lane.touched .pad { animation: touch-color 1.1s var(--ease-out) !important; }
}
@keyframes touch-color { 0%, 35% { background: var(--gold); color: var(--ink); } }

/* ── dock: résumé and email stay in thumb reach on phones ────── */
.dock { display: none; }
@media (max-width: 40rem) {
  .dock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    padding: .5rem var(--edge) calc(.5rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 2px solid var(--ink);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .4s var(--ease-out), visibility 0s .4s;
  }
  .dock.on { transform: none; visibility: visible; transition: transform .4s var(--ease-out); }
  .dock .action { grid-column: auto; min-height: 48px; padding-inline: .5rem; }
}

@media print {
  body { background: #fff; }
  .rope, .pool::before, .lane::after, .lane::before, .laneline, .tmark,
  .basement, .masthead nav { display: none !important; }
  .pool, .wall { background: #fff; padding-left: 0; padding-right: 0; }
  .band h2 { transform: none !important; font-size: 2.25rem; }
  .shot { transform: none !important; opacity: 1 !important; }
  .shot img, .shot--wide img { max-height: 14rem; width: auto; box-shadow: none; }
  .lane-no { position: static; transform: none !important; color: var(--ink); -webkit-text-stroke: 0; font-size: 2rem; }
  .pad { background: #fff !important; color: var(--ink) !important; }
  .action, .go a, .wall .lines a { min-height: 0; }
  .action--fill { background: transparent; color: var(--ink); border-color: var(--ink); }
  .block { width: 7rem; }
  .dock { display: none !important; }
}