/* peterszel.com — hand-written, no build step. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 400 650;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #f6f7f5;
  --ink: #141517;
  --blue: #2438e0;
  --red: #b5310f;
  --mute: #565a60;   /* small text */
  --ghost: #81858c;  /* large display text only */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(18px, 3.4vw, 48px);
  --ease: cubic-bezier(.3, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, p, ul, figure, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
::selection { background: var(--blue); color: var(--paper); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.page {
  max-width: 1840px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 26px) var(--pad) clamp(18px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Labels: the dial and the links */
.toplink, .rail label, .cta, .code {
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.top { display: flex; align-items: center; gap: 20px; }
.who { margin-right: auto; }
.name {
  font-size: clamp(1.625rem, 2.3vw, 2rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 36;
}
.role { font-family: var(--sans); font-size: .9375rem; line-height: 1.35; color: var(--mute); white-space: nowrap; }
.toplink {
  padding: 6px 0;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(var(--blue), var(--blue)) 0 100% / 100% 2px no-repeat;
  transition: background-size .25s var(--ease), color .2s, box-shadow .2s;
}
.toplink:hover { background-size: 100% 100%; color: var(--paper); box-shadow: -7px 0 var(--blue), 7px 0 var(--blue); }
.arr { display: inline-block; transition: transform .25s var(--ease); }
a:hover .arr, a:focus-visible .arr { transform: translate(2px, -2px); }

/* ---------- Main ---------- */
.main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lead" "fig" "facts" "dial" "cta";
  row-gap: 18px;
  padding: 16px 0 6px;
  align-content: start;
}
.col { display: contents; }
.lead {
  grid-area: lead;
  font-size: clamp(2.2rem, 10.2vw, 4.4rem);
  line-height: 1;
  font-weight: 560;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.del, .chat { transition: color .35s; }
.del { color: var(--blue); }
.chat { color: var(--ghost); }

/* ---------- Track record ---------- */
.facts { grid-area: facts; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 30px; }
.facts strong { font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; font-variation-settings: "opsz" 24; }
.facts span { display: block; font-family: var(--sans); font-size: .9375rem; line-height: 1.35; color: var(--mute); }

/* ---------- The dial ----------
   --k is the knob's touch area (never under 44px), --v the knob you see, --s a stop. The knob is a wrapper (.thumb, which carries the position and the colour)
   around a halo (::before), a ripple (::after) and the face with its two chevrons (.knob). */
.dial { grid-area: dial; margin-top: 8px; --k: 48px; --v: 36px; --s: 22px; --g: calc((var(--k) - var(--v)) / 2);
  /* Half the width of the first and of the last label, measured per label size. The track is set in by these,
     so the outer labels reach the edges of the column and every stop sits under the centre of its label. */
  --a: 36px; --z: 55px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.track {
  padding: 0 max(var(--z), var(--k) / 2) 0 max(var(--a), var(--k) / 2);
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rail { position: relative; height: calc(var(--k) + 32px); }   /* the labels on top, the track under them */
.rail::before {            /* the scale line */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--k) / 2 - 1px);
  height: 2px;
  background: var(--ink);
}
.rail input {
  position: absolute;
  bottom: 0;
  width: var(--k); height: var(--k);
  margin: 0 0 0 calc(var(--k) / -2);
  opacity: 0;
  cursor: pointer;
}
.rail input:checked { cursor: grab; }
.rail label {
  position: absolute;
  bottom: 0;                  /* anchored to the track, whatever the label's size: its circle is measured from here */
  padding-bottom: calc(var(--k) + 8px);
  color: var(--mute);
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color .2s;
}
.rail label::before {      /* the stop: a ring that fills with the colour the knob takes there */
  content: "";
  position: absolute;
  bottom: calc((var(--k) - var(--s)) / 2); left: 50%;
  width: var(--s); height: var(--s);
  margin-left: calc(var(--s) / -2);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 4px var(--paper);
  transition: background-color .2s, border-color .2s, transform .25s var(--ease);
}
#s1, #s1 + label { left: 0; }
#s2, #s2 + label { left: 33.333%; }
#s3, #s3 + label { left: 66.667%; }
#s4, #s4 + label { left: 100%; }
#s1 + label, #s2 + label { --c: var(--ink); }
#s3 + label { --c: var(--blue); }
#s4 + label { --c: var(--red); }
.rail input:checked + label { color: var(--ink); font-weight: 700; }
.rail input:checked + label::before { background: var(--c); border-color: var(--c); }   /* under the knob; shows where it will settle while dragged */
.rail input:active + label::before, .rail label:active::before { background: var(--c); border-color: var(--c); transform: scale(.9); }

.thumb {
  position: absolute;
  bottom: 0; left: 66.667%;
  width: var(--k); height: var(--k);
  margin-left: calc(var(--k) / -2);
  border-radius: 50%;
  color: var(--blue);
  pointer-events: none;
  transition: left .55s cubic-bezier(.16, 1, .3, 1), color .3s;   /* without script: fast away, long deceleration */
}
.thumb::before {           /* halo */
  content: "";
  position: absolute;
  inset: calc(var(--g) - 6px);
  border-radius: 50%;
  background: currentColor;
  opacity: .17;
  transition: transform .3s var(--ease), opacity .3s;
}
.thumb::after {            /* ripple */
  content: "";
  position: absolute;
  inset: var(--g);
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
}
.knob {
  position: absolute;
  inset: var(--g);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 6px 14px -4px rgba(20, 21, 23, .45);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.grip {                    /* the two chevrons: one SVG, 20px in a 36px (or 40px) face, so it sits on whole pixels */
  position: absolute;
  inset: 0;
  width: 20px; height: 20px;
  margin: auto;
  overflow: visible;
  fill: none;
  stroke: var(--paper);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.grip path { transition: transform .25s var(--ease); }
.dial.pre .thumb { color: var(--ink); transition: color .3s; }
.dial.live .thumb, .dial.go .thumb { transition: color .3s; }   /* with script, js/site.js moves the knob */
/* The focus ring is for the keyboard only. Browsers also report :focus-visible on a radio after a click that
   moved the selection, so the script marks pointer use (.ptr on <html>) and the ring stays away then. */
:root:not(.ptr) .rail:has(input:focus-visible) .thumb { outline: 3px solid var(--ink); outline-offset: calc(4px - var(--g)); }
:root:not(.ptr) .rail:has(input:focus-visible) .thumb::before { opacity: 0; }
.rail input:focus { outline: none; }
:root:has(#s1:checked) .thumb { left: 0; color: var(--ink); }
:root:has(#s2:checked) .thumb { left: 33.333%; color: var(--ink); }
:root:has(#s4:checked) .thumb { left: 100%; color: var(--red); }

/* Pressed: the face sinks, the halo spreads out from under the finger. */
.dial.drag .track, .dial.drag .rail input { cursor: grabbing; }
.dial.drag .thumb { transition: color .3s; }
.dial.drag .knob, .rail input:checked:active ~ .thumb .knob { transform: scale(.93); box-shadow: 0 2px 6px -2px rgba(20, 21, 23, .5); }
.dial.drag .thumb::before, .rail input:checked:active ~ .thumb::before { transform: scale(1.34); opacity: .15; }
.dial.drag .grip .cl, .rail input:checked:active ~ .thumb .grip .cl { transform: translateX(-3px); }
.dial.drag .grip .cr, .rail input:checked:active ~ .thumb .grip .cr { transform: translateX(3px); }

/* Hover, where there is a pointer that can: the knob lifts and its chevrons part; a stop shows what it would become. */
@media (hover: hover) and (pointer: fine) {
  .rail input:not(:checked):hover + label, .rail label:hover { color: var(--ink); }
  .rail input:not(:checked):hover + label::before, .rail label:hover::before { background: var(--c); border-color: var(--c); transform: scale(1.14); }
  .dial:not(.drag) .rail input:checked:hover:not(:active) ~ .thumb .knob { transform: scale(1.1); box-shadow: 0 12px 20px -8px rgba(20, 21, 23, .5); }
  .dial:not(.drag) .rail input:checked:hover:not(:active) ~ .thumb::before { transform: scale(1.2); opacity: .22; }
  .dial:not(.drag) .rail input:checked:hover:not(:active) ~ .thumb .grip .cl { transform: translateX(-3px); }
  .dial:not(.drag) .rail input:checked:hover:not(:active) ~ .thumb .grip .cr { transform: translateX(3px); }
}

.says { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.say {
  grid-area: 1 / 1;
  max-width: 31em;
  font-size: clamp(1.25rem, 1.75vw, 1.5rem);
  line-height: 1.25;
  font-weight: 450;
  letter-spacing: -.005em;
  font-variation-settings: "opsz" 30;
  min-height: 2.5em;          /* two lines, so nothing moves when the statement changes */
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
#t3 { opacity: 1; visibility: visible; }
.tag { color: var(--blue); }
#t4 .tag { color: var(--red); }
:root:has(#s1:checked, #s2:checked, #s4:checked) #t3 { opacity: 0; visibility: hidden; }
:root:has(#s1:checked) #t1, :root:has(#s2:checked) #t2, :root:has(#s4:checked) #t4 { opacity: 1; visibility: visible; }
:root:has(#s1:checked, #s2:checked, #s4:checked) .del { color: var(--ghost); }
:root:has(#s2:checked) .chat { color: var(--ink); }
/* Very old browsers without :has(): the dial would do nothing, so it steps aside. */
.nohas .track { display: none; }

/* ---------- LinkedIn ----------
   The next step is built from the dial's own parts: an ink bar that ends in the blue knob.
   On hover or press the knob wakes up (its halo opens, the arrow leaves and a new one arrives). */
.cta-row { grid-area: cta; display: flex; justify-content: center; margin-top: 6px; }
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 19px 32px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  text-decoration: none;
  border-radius: 4px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cta:hover, .cta:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(20, 21, 23, .7); }
.cta:active { transform: translateY(1px) scale(.985); box-shadow: none; transition-duration: .06s; }
.cta.li {
  --d: 42px;
  gap: 16px;
  padding: 9px 9px 9px 22px;
  border-radius: 999px;
}
.in { flex: none; width: 28px; height: 28px; margin: 0 -1px 0 -3px; fill: currentColor; }
.cta.li .txt { padding-right: 6px; white-space: nowrap; }
.cta.li:focus-visible { outline-offset: 4px; border-radius: 999px; }
.orb {
  position: relative;
  flex: none;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(72, 92, 255, .45);
  overflow: hidden;
  transition: box-shadow .3s var(--ease), background-color .2s;
}
.orb::before, .orb::after {
  content: "↗";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0;
  transition: transform .4s var(--ease);
}
.orb::after { transform: translate(-110%, 110%); }
.cta:hover .orb, .cta:focus-visible .orb, .cta:active .orb { box-shadow: 0 0 0 5px rgba(72, 92, 255, .45); }
.cta:hover .orb::before, .cta:focus-visible .orb::before, .cta:active .orb::before { transform: translate(110%, -110%); }
.cta:hover .orb::after, .cta:focus-visible .orb::after, .cta:active .orb::after { transform: none; }

/* ---------- The portrait ----------
   A framed photograph. With WebGL, a shader in js/site.js treats it as the dial moves (and in between stops).
   Without WebGL or without script, the same four looks are approximated here with CSS filters. */
.fig { grid-area: fig; width: 100%; max-width: 560px; justify-self: center; }
.frame {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: #1b191a;       /* the studio backdrop, while the photo loads */
  isolation: isolate;
}
/* A soft blob with waves around its edge. This is its resting outline (also the shape without script and under
   reduced motion); js/site.js lets the waves travel and swell. Made by tools/blob.py from the same formula. */
.frame.pebble { border-radius: 0; -webkit-clip-path: polygon(95.7% 50.0%,95.4% 52.4%,95.1% 54.7%,95.0% 57.1%,95.1% 59.6%,95.2% 62.1%,95.3% 64.7%,95.4% 67.4%,95.4% 70.2%,95.3% 73.1%,94.8% 75.9%,94.2% 78.7%,93.2% 81.4%,91.9% 83.9%,90.3% 86.3%,88.4% 88.4%,86.3% 90.4%,84.0% 92.0%,81.6% 93.5%,79.0% 94.7%,76.3% 95.6%,73.5% 96.2%,70.7% 96.5%,67.9% 96.6%,65.1% 96.5%,62.4% 96.2%,59.7% 95.7%,57.2% 95.2%,54.7% 94.7%,52.3% 94.4%,50.0% 94.1%,47.7% 94.1%,45.3% 94.3%,42.9% 94.6%,40.4% 95.1%,37.8% 95.5%,35.1% 95.9%,32.3% 96.2%,29.5% 96.1%,26.7% 95.8%,24.0% 95.1%,21.4% 94.0%,19.0% 92.6%,16.8% 90.9%,14.9% 89.0%,13.1% 86.9%,11.5% 84.6%,10.1% 82.3%,8.8% 79.9%,7.6% 77.5%,6.5% 75.1%,5.6% 72.6%,4.7% 70.1%,4.1% 67.6%,3.5% 65.1%,3.1% 62.6%,2.7% 60.0%,2.5% 57.5%,2.3% 55.0%,2.2% 52.5%,2.0% 50.0%,1.8% 47.5%,1.7% 44.9%,1.5% 42.3%,1.5% 39.7%,1.5% 37.0%,1.7% 34.3%,2.1% 31.6%,2.8% 29.0%,3.7% 26.4%,4.8% 23.9%,6.2% 21.6%,7.8% 19.3%,9.6% 17.3%,11.5% 15.3%,13.5% 13.5%,15.5% 11.7%,17.7% 10.1%,19.9% 8.6%,22.2% 7.1%,24.5% 5.8%,26.9% 4.6%,29.3% 3.6%,31.9% 2.8%,34.4% 2.1%,37.0% 1.6%,39.7% 1.3%,42.3% 1.2%,44.9% 1.1%,47.4% 1.1%,50.0% 1.2%,52.6% 1.3%,55.1% 1.4%,57.7% 1.6%,60.3% 1.7%,62.9% 1.9%,65.5% 2.2%,68.2% 2.6%,70.8% 3.2%,73.5% 3.9%,76.1% 4.9%,78.6% 6.0%,81.0% 7.3%,83.3% 8.9%,85.5% 10.6%,87.6% 12.4%,89.5% 14.5%,91.2% 16.6%,92.8% 18.9%,94.3% 21.3%,95.5% 23.8%,96.4% 26.3%,97.2% 29.0%,97.6% 31.7%,97.9% 34.5%,97.8% 37.2%,97.6% 39.9%,97.2% 42.5%,96.7% 45.1%,96.2% 47.6%); clip-path: polygon(95.7% 50.0%,95.4% 52.4%,95.1% 54.7%,95.0% 57.1%,95.1% 59.6%,95.2% 62.1%,95.3% 64.7%,95.4% 67.4%,95.4% 70.2%,95.3% 73.1%,94.8% 75.9%,94.2% 78.7%,93.2% 81.4%,91.9% 83.9%,90.3% 86.3%,88.4% 88.4%,86.3% 90.4%,84.0% 92.0%,81.6% 93.5%,79.0% 94.7%,76.3% 95.6%,73.5% 96.2%,70.7% 96.5%,67.9% 96.6%,65.1% 96.5%,62.4% 96.2%,59.7% 95.7%,57.2% 95.2%,54.7% 94.7%,52.3% 94.4%,50.0% 94.1%,47.7% 94.1%,45.3% 94.3%,42.9% 94.6%,40.4% 95.1%,37.8% 95.5%,35.1% 95.9%,32.3% 96.2%,29.5% 96.1%,26.7% 95.8%,24.0% 95.1%,21.4% 94.0%,19.0% 92.6%,16.8% 90.9%,14.9% 89.0%,13.1% 86.9%,11.5% 84.6%,10.1% 82.3%,8.8% 79.9%,7.6% 77.5%,6.5% 75.1%,5.6% 72.6%,4.7% 70.1%,4.1% 67.6%,3.5% 65.1%,3.1% 62.6%,2.7% 60.0%,2.5% 57.5%,2.3% 55.0%,2.2% 52.5%,2.0% 50.0%,1.8% 47.5%,1.7% 44.9%,1.5% 42.3%,1.5% 39.7%,1.5% 37.0%,1.7% 34.3%,2.1% 31.6%,2.8% 29.0%,3.7% 26.4%,4.8% 23.9%,6.2% 21.6%,7.8% 19.3%,9.6% 17.3%,11.5% 15.3%,13.5% 13.5%,15.5% 11.7%,17.7% 10.1%,19.9% 8.6%,22.2% 7.1%,24.5% 5.8%,26.9% 4.6%,29.3% 3.6%,31.9% 2.8%,34.4% 2.1%,37.0% 1.6%,39.7% 1.3%,42.3% 1.2%,44.9% 1.1%,47.4% 1.1%,50.0% 1.2%,52.6% 1.3%,55.1% 1.4%,57.7% 1.6%,60.3% 1.7%,62.9% 1.9%,65.5% 2.2%,68.2% 2.6%,70.8% 3.2%,73.5% 3.9%,76.1% 4.9%,78.6% 6.0%,81.0% 7.3%,83.3% 8.9%,85.5% 10.6%,87.6% 12.4%,89.5% 14.5%,91.2% 16.6%,92.8% 18.9%,94.3% 21.3%,95.5% 23.8%,96.4% 26.3%,97.2% 29.0%,97.6% 31.7%,97.9% 34.5%,97.8% 37.2%,97.6% 39.9%,97.2% 42.5%,96.7% 45.1%,96.2% 47.6%); }
.frame img, .fx {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
.frame img { transition: filter .5s ease, opacity .3s; }
.fx { opacity: 0; }
.gl .fx { opacity: 1; }
.gl .frame img, .js:not(.on) .frame img { opacity: 0; }
.frame::before, .frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.frame::after { background: repeating-linear-gradient(rgba(20, 19, 20, 0) 0 5px, rgba(20, 19, 20, .5) 5px 9px); }   /* the line screen */
.frame::before { mix-blend-mode: color; background: repeating-linear-gradient(transparent 0 58px, var(--blue) 58px 63px); }
.gl .frame::before, .gl .frame::after { content: none; }
:root:has(#s1:checked, #s2:checked) .frame img, .lost .frame img { filter: grayscale(1) brightness(1.12); }
:root:has(#s1:checked, #s2:checked) .frame::after, .lost .frame::after { opacity: 1; }
:root:has(#s2:checked) .frame::before { opacity: 1; }
:root:has(#s4:checked) .frame img { filter: grayscale(1) contrast(2.1) brightness(1.3); }
:root:has(#s4:checked) .frame::before { opacity: 1; background: var(--blue); }

/* ---------- 404 ---------- */
.home { text-decoration: none; }
.lost .say { opacity: 1; visibility: visible; margin-top: 22px; }
.lost .tag { color: var(--red); }
.lost .cta { margin-top: 28px; }
.lost { grid-template-areas: "col" "fig"; row-gap: 30px; padding-top: 30px; }
.lost .col { display: block; grid-area: col; align-self: center; }
.lost .lead { margin-top: 0; }
.code { display: block; margin-bottom: 14px; color: var(--mute); }
.back { order: -1; }
a:hover .back, a:focus-visible .back { transform: translateX(-3px); }

/* ---------- Sizes ---------- */
/* Which layout? Chosen by shape as well as width:
     wide   - 1000px and up, or 720-999px in landscape: sentence and dial on the left, portrait on the right
     narrow - below 720px, or 720-999px in portrait:    name, portrait, sentence, LinkedIn, dial, in one column
   Below 1000px the three facts are folded into the role line ("Ex-CTO"); the list itself stays in the page
   for screen readers and search. */
@media (max-width: 999px) {
  .toplink { display: none; }
  .facts { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* narrow: the portrait stays small enough to remain in view while the dial is used */
@media (max-width: 719px), (max-width: 999px) and (orientation: portrait) {
  .main { grid-template-areas: "fig" "lead" "cta" "dial"; row-gap: 18px; padding-top: 14px; }
  .fig { max-width: 340px; }
  .lead { font-size: clamp(2rem, 9.2vw, 3.4rem); text-align: center; }
  .cta-row { margin-top: 0; }
  .dial { margin-top: 6px; }
}
/* narrow, on a portrait tablet: the same order as one centred column, so portrait and words share an axis */
@media (min-width: 720px) and (max-width: 999px) and (orientation: portrait) {
  .page { max-width: calc(620px + 2 * var(--pad)); }
  .top { justify-content: center; text-align: center; }
  .who { margin-right: 0; }
  .main { row-gap: 26px; padding-top: 22px; align-content: center; text-align: center; }
  .fig { max-width: min(440px, 46vh); }
  .lead { font-size: 3.25rem; }
  .says { justify-items: center; }
  .dial { margin-top: 2px; }
}
@media (min-width: 1000px) {
  .ph { display: none; }      /* on wide screens the facts are shown in full instead */
}
@media (max-width: 479px) {
  .cta-row { display: block; }                 /* the button spans the column: mark and words left, the knob right */
  .cta.li { display: flex; }
  .cta.li .txt { margin-right: auto; }
  .say { min-height: 3.75em; }                 /* three lines here, so the page does not move between statements */
  .cta.li { gap: 12px; padding-left: 18px; font-size: .9375rem; letter-spacing: .04em; }
  .cta.li .txt { padding-right: 2px; }
  .rail label { font-size: .75rem; letter-spacing: .02em; }
  .dial { --a: 29px; --z: 43px; }
  .role { font-size: .875rem; }
  .facts strong { font-size: 1.0625rem; }
  .facts span { font-size: .875rem; }
}
@media (max-width: 374px) {
  .rail label { font-size: .71875rem; letter-spacing: 0; }
  .dial { --a: 26px; --z: 40px; }
  .toplink { font-size: .875rem; }
}
/* wide */
@media (min-width: 1000px), (min-width: 720px) and (orientation: landscape) {
  /* Header: one identity group, read left to right: who he is, then three facts. Each is two lines
     (name over role, title over detail) and the second lines share a baseline. */
  .top { align-items: flex-end; justify-content: flex-start; gap: clamp(30px, 4vw, 76px); }
  .who { margin-right: 0; }
  .facts { display: flex; gap: clamp(24px, 2.8vw, 52px); }
  .facts strong { display: block; font-size: 1.125rem; line-height: 1.3; }
  .facts span { font-size: .9375rem; white-space: nowrap; }
  .main {
    --fh: min(100vh - 128px, 43vw * 1.25, 1040px);      /* frame height: the screen, or the column, whichever is smaller */
    grid-template-columns: minmax(0, 1fr) calc(var(--fh) * .8);
    grid-template-areas: "col fig";
    column-gap: clamp(28px, 4.4vw, 84px);
    align-content: center;
    padding: clamp(6px, 1vh, 11px) 0 0;
  }
  .col {
    grid-area: col;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(30px, 6.4vh, 76px);          /* the sentence, the next step, the dial: three parts with room between */
  }
  .lead { font-size: clamp(2.8rem, min(5.5vw, 11vh), 6.7rem); max-width: 11.5em; }
  .dial { max-width: min(760px, 100%); margin-top: 0; }
  .cta-row { justify-content: flex-start; margin-top: 0; }
  .fig { max-width: none; align-self: center; }
  .frame { aspect-ratio: 4 / 5; }
  .frame img, .fx { object-position: 50% 50%; }
  .lost { padding-top: clamp(10px, 1.6vh, 20px); }
  .lost .col { display: block; }
}
@media (min-width: 720px) and (orientation: landscape) and (max-height: 700px) {      /* short laptop and tablet screens: still one screen */
  .page { padding-top: 12px; padding-bottom: 10px; }
}
@media (min-width: 1000px) and (max-width: 1239px) {
  .main { --fh: min(100vh - 128px, 35vw * 1.25); column-gap: 30px; }
  .lead { font-size: clamp(2.5rem, min(4.7vw, 9.6vh), 4rem); }
  .top { gap: 30px; }
  .facts { gap: 26px; }
}
/* wide, on a landscape tablet or small window (720-999px): the same layout, scaled down */
@media (min-width: 720px) and (max-width: 999px) and (orientation: landscape) {
  .main { --fh: min(100vh - 124px, 35vw * 1.25); column-gap: 28px; }
  .col { gap: clamp(18px, 5vh, 40px); }
  .lead { font-size: clamp(2rem, min(4.7vw, 9vh), 3rem); }
  .say { font-size: 1.125rem; }
  .rail label { font-size: .8125rem; letter-spacing: .03em; }
  .dial { --a: 31px; --z: 46px; }
  .fig { align-self: start; position: sticky; top: 12px; }     /* on a very short screen the portrait stays in view while the dial is used */
}
@media (min-width: 1600px) {
  .facts strong { font-size: 1.25rem; }
  .facts span, .role { font-size: 1.0625rem; }
  .say { font-size: 1.625rem; }
  .dial { --k: 52px; --v: 40px; --s: 24px; --a: 41px; --z: 61px; }
  .rail label { font-size: 1.0625rem; }
  .cta { font-size: 1.125rem; }
  .cta.li { --d: 50px; padding: 10px 10px 10px 26px; gap: 18px; }
  .in { width: 30px; height: 30px; }
}

/* ---------- Motion ---------- */
/* The knob is alive: its halo breathes, and half a beat later a ring leaves it and fades; its chevrons part a
   little with each breath. This goes on for the whole visit, and rests only while the knob is held, hovered,
   sliding in on arrival, or focused from the keyboard. */
@keyframes breathe { 50% { transform: scale(1.22); opacity: .1; } }
@keyframes ripple { 0% { transform: scale(1); opacity: .5; } 60%, 100% { transform: scale(1.75); opacity: 0; } }
@keyframes part-l { 50% { transform: translateX(-1.5px); } }
@keyframes part-r { 50% { transform: translateX(1.5px); } }

/* While the tab is hidden (.away on <html>, set by the script) nothing animates. */
.away *, .away *::before, .away *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: no-preference) {
  .thumb::before { animation: breathe 3.6s ease-in-out infinite; }
  .thumb::after { animation: ripple 3.6s 1.8s ease-out infinite; }
  .grip .cl { animation: part-l 3.6s ease-in-out infinite; }
  .grip .cr { animation: part-r 3.6s ease-in-out infinite; }
  .dial:is(.go, .drag) .thumb::before, .dial:is(.go, .drag) .thumb::after, .dial:is(.go, .drag) .grip .cl, .dial:is(.go, .drag) .grip .cr,
  :root:not(.ptr) .rail:has(input:focus-visible) .thumb::before, :root:not(.ptr) .rail:has(input:focus-visible) .thumb::after,
  .rail:has(input:checked:active) .thumb::before, .rail:has(input:checked:active) .thumb::after,
  .rail:has(input:checked:active) .grip .cl, .rail:has(input:checked:active) .grip .cr { animation: none; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .rail:has(input:checked:hover) .thumb::before, .rail:has(input:checked:hover) .thumb::after,
  .rail:has(input:checked:hover) .grip .cl, .rail:has(input:checked:hover) .grip .cr { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-delay: 0s !important;
    transition-duration: .2s !important;
    transition-property: opacity, color, background-color, border-color, visibility, filter !important;
  }
  .cta:hover, .cta:focus-visible, .cta:active { transform: none; }
}

@media print {
  .track { display: none; }
}