/* ─────────────────────────────────────────────────────────────────────────────────────────────
   The Team page · 11 Oct 2026 (second version the same day). Loaded after /styles.css, by this
   page only. Every rule starts with .tm so no other page can be touched by it; a first version
   used the class "lead", this site's name for a dark opening panel, and drew one behind the tiles.

   WHERE EACH PART COMES FROM (the record: the vault, website/team-page-research.md)
   the wall at the top      Ask Phill, askphill.com: every face of the team before anything else
   the grid of faces        QTMA, qtma.ca/team: leads first, then each group under its name,
                            portraits 4 by 5, four across on a computer, two on a phone
   the row of groups        Accel and First Round: tabs across the top of their team pages
   the list                 Locomotive's table (number, group, "10 people", name left, role right)
                            and QuatreCentQuatre: the face comes to the pointer; on a phone the row
                            in the middle of the screen shows it
   the card that opens      Silent House, PXR Legal, Tux: on a phone a tap opens the person
   the card at the pointer  QTMA shows a person's details over their photo on hover; here they
                            come up beside it, and a click keeps the card open (Ian, 11 Oct)
   the VP's running outline Ian's own (11 Oct): a thin orange line just outside a VP's photograph,
                            with a brighter stretch that travels round it in a loop
   two truths and a lie     Ian's own (12 Oct): on a person's card, three lines to pick the lie from;
                            wrong shakes and goes red, right goes green with green confetti
   rows rising in           First Round (0.8s); the photo growing 3% under the pointer (First
                            Round 2%, QTMA 5%)
   THE FINISH is this site's own: its 16px corner, the left edge, Outfit, no shadows, one orange.
   Under "reduce motion", and with scripts off, everything stands still and is all there.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

.tm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tm-note { margin: 16px var(--inset) 0; padding: 12px 16px; border-radius: 12px; background: var(--panel); font-size: 14px; line-height: 21px; color: var(--body); }
.tm-note strong { font-weight: 600; color: var(--ink); }

/* ── the opening and the wall ────────────────────────────────────────────────────────────────── */
.tm-open { padding-top: 32px; overflow: hidden; }
.tm-open-in { padding: 0 var(--edge); }
.tm-open .eyebrow { margin-bottom: 20px; }
.tm-open .say { max-width: 36ch; margin-top: 20px; text-wrap: balance; }      /* balance: no single word left alone on the last line */
.tm-wall { --w: 88px; --g: 8px; display: grid; gap: var(--g); margin-top: 40px; }
.tm-row { overflow: hidden; }
/* Each row holds its people twice; moving it left by half its length (plus half a gap) brings the
   second copy exactly to where the first began, so it can go round for ever without a seam. */
.tm-run { display: flex; gap: var(--g); width: max-content; animation: tm-drift 90s linear infinite; }
.tm-row:nth-child(2) .tm-run { animation-duration: 110s; animation-direction: reverse; }
.tm-row:nth-child(3) .tm-run { animation-duration: 78s; }
.tm-cell { flex: none; width: var(--w); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--panel); }
.tm-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes tm-drift { to { transform: translateX(calc(-50% - var(--g) / 2)); } }
.tm-soon { margin: 16px var(--edge) 0; font-size: 14px; line-height: 21px; color: var(--muted); }

/* ── the row of groups, and the switch at its end ────────────────────────────────────────────── */
/* It sticks under the header. The header's height changes (taller at the top of the page), so
   team.js measures it and writes it here as --tm-top. The ground is the header's own. */
.tm-jump {
  position: sticky; top: var(--tm-top, 64px); z-index: 40; display: flex; align-items: center; margin-top: 32px;
  background: rgba(246, 243, 239, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.tm-jump nav { flex: 1; min-width: 0; }
.tm-jump ul { display: flex; gap: 8px; margin: 0; padding: 8px 28px 8px var(--inset); list-style: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }      /* the last pill fades out where the switch begins */
.tm-jump ul::-webkit-scrollbar { display: none; }
.tm-jump li { flex: none; }
.tm-jump nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #D1D5DC; border-radius: 999px;
  background: var(--white); color: var(--ink); font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.tm-jump nav a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tm-view { flex: none; display: flex; margin: 0 var(--inset) 0 4px; padding: 0; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px #D1D5DC; }
.tm-view[hidden] { display: none; }
.tm-view button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-weight: 500; font-size: 14px; line-height: 20px; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.tm-view button[aria-pressed="true"] { background: var(--orange-l); color: var(--ink); }
@media (hover: hover) { .tm-jump nav a:not([aria-current="true"]):hover { background: var(--panel); } }

/* ── faces: a group ──────────────────────────────────────────────────────────────────────────── */
.tm-faces[hidden], .tm-list[hidden] { display: none; }
.tm-group { padding: 64px var(--inset) 0; }
.tm-group.tm-first { padding-top: 40px; }
/* Where a link in the row lands when scripts are off, and what the address bar's #marketing points
   at. With scripts on, team.js places the group's name exactly under the row. */
.tm-anchor { position: absolute; left: 0; top: -76px; width: 1px; height: 1px; }
.tm-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.tm-head h2 { font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: -.02em; color: var(--ink); }
.tm-head h2::before { content: ""; display: inline-block; width: 22px; height: 3px; margin-right: 12px; border-radius: 3px; background: var(--orange-l); vertical-align: middle; position: relative; top: -2px; }
.tm-tally { flex: none; font-size: 14px; line-height: 21px; color: var(--muted); }

/* ── faces: the tiles ────────────────────────────────────────────────────────────────────────── */
.tm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.tm-person { position: relative; }
.tm-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--panel); }
.tm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.25, .46, .45, .94); }
/* A VP: a thin orange outline just outside the photograph, and a brighter stretch of it that runs round in a loop.
   The line is a ring cut from a turning gradient: the mask keeps only the 2px edge. Where a browser cannot turn it
   (no @property), the outline is simply there and still. */
@property --tm-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tm-frame { position: relative; }
.tm-ring { position: absolute; inset: -5px; padding: 2px; border-radius: 21px; pointer-events: none; background: conic-gradient(from var(--tm-turn), rgba(255, 128, 51, .28) 0deg, rgba(255, 128, 51, .28) 215deg, #FF8033 345deg, rgba(255, 128, 51, .28) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tm-loop 4.5s linear infinite; }
@keyframes tm-loop { to { --tm-turn: 360deg; } }
.tm-photo.empty::after { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: .04em; color: #B4B4B4; }
.tm-name { margin-top: 12px; font-weight: 600; font-size: 16px; line-height: 22px; letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; }
.tm-role { margin-top: 2px; font-size: 14px; line-height: 21px; color: var(--muted); }
.tm-line { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--body); }
.tm-grid.tm-two .tm-name { font-size: 20px; line-height: 28px; letter-spacing: -.01em; }
/* the whole tile is the button that opens the person (shown once team.js is running) */
.tm-hit { position: absolute; inset: -4px; border: 0; border-radius: 20px; background: none; cursor: pointer; }
.tm-hit[hidden] { display: none; }
.tm-hit:focus-visible, .tm-rowb:focus-visible, .tm-card button:focus-visible, .tm-view button:focus-visible { outline: 2px solid var(--orange-l); outline-offset: 2px; }
.tm-person { transition: opacity .35s ease; }
@media (hover: hover) {
  .tm-person:hover .tm-photo img { transform: scale(1.03); }
  .tm-person:hover .tm-name { text-decoration: underline; text-decoration-color: var(--orange-l); text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
/* the rows arriving (team.js adds .tm-go to the page, and .wait to each tile still to come) */
.tm-go .tm-person.wait { opacity: 0; transform: translateY(18px); }
.tm-go .tm-person.rise { transition: opacity .6s cubic-bezier(.25, .46, .45, .94), transform .8s cubic-bezier(.25, .46, .45, .94); transition-delay: calc(var(--i, 0) * 70ms); }

/* ── the list ────────────────────────────────────────────────────────────────────────────────── */
/* The page's one dark panel. Labels may be the dark-ground orange; names are white. */
.tm-list { padding: 24px 8px 0; }
.tm-list-in { padding: 8px 24px 32px; border-radius: 24px; background: var(--black); color: var(--white); }
.tm-sheet { padding-top: 40px; }
.tm-sheet-head { display: grid; grid-template-columns: 36px 1fr auto; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--d-rule); font-size: 14px; line-height: 21px; color: var(--d-muted); font-variant-numeric: tabular-nums; }
.tm-sheet-head h2 { font-weight: 600; font-size: 12px; line-height: 21px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-d); }
.tm-sheet ul { margin: 0; padding: 0; list-style: none; }
.tm-rowb {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; width: 100%; min-height: 60px; padding: 4px 0;
  border: 0; border-bottom: 1px solid var(--d-rule); background: none; color: var(--white); font: inherit; text-align: left; cursor: pointer; transition: opacity .3s ease;
}
.tm-rowb .n { font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -.01em; transition: color .3s ease, transform .4s cubic-bezier(.25, .46, .45, .94); }
.tm-rowb .r { padding-left: 12px; font-size: 14px; line-height: 21px; color: var(--d-muted); text-align: right; }
/* the small face at the end of the row: shut until the row is the one in the middle of the screen */
.tm-rowb .f { width: 0; height: 50px; margin-left: 0; overflow: hidden; border-radius: 8px; opacity: 0; transition: width .4s cubic-bezier(.25, .46, .45, .94), margin-left .4s cubic-bezier(.25, .46, .45, .94), opacity .3s ease; }
.tm-rowb .f img { display: block; width: 40px; height: 50px; max-width: none; object-fit: cover; }
.tm-rowb.on .f { width: 40px; margin-left: 12px; opacity: 1; }
.tm-rowb.on .n { color: var(--orange-d); }
/* with a mouse: no small faces; a large one follows the pointer (team.js moves .tm-float) */
.tm-float { position: fixed; left: 0; top: 0; z-index: 45; width: 190px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--panel); pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform; }
.tm-float.on { opacity: 1; }
.tm-float img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .tm-rowb .f { display: none; }
  .tm-rowb:hover .n { color: var(--orange-d); transform: translateX(10px); }
  .tm-list-in:has(.tm-rowb:hover) .tm-rowb:not(:hover) { opacity: .45; }
}

/* ── the card that opens ─────────────────────────────────────────────────────────────────────── */
.tm-card { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.tm-card::backdrop { background: rgba(17, 17, 17, .58); }
.tm-card-in { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 24px; border-radius: 24px 24px 0 0; background: var(--white); color: var(--ink); }
.tm-card[open] .tm-card-in { animation: tm-up .45s cubic-bezier(.25, .46, .45, .94); }
.tm-card[open]::backdrop { animation: tm-fade .3s ease; }
@keyframes tm-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes tm-fade { from { opacity: 0; } }
/* The close button stays in the sheet's top corner while the rest scrolls under it (12 Oct 2026: with a bio and the
   game the sheet is taller than a phone screen, and a button that scrolled away left no way to close it from the
   game). It is in the flow and sticky; the negative margins put it 12px from the corner and give its room back, so
   the photograph starts where it always did. "top" is measured from inside the sheet's padding, hence the minus. */
.tm-x { position: sticky; top: -8px; z-index: 2; margin: -8px -8px -36px auto; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.tm-card-photo { width: min(52vw, 220px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--panel); }
.tm-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; animation: tm-fade .35s ease; }
.tm-card-words { margin-top: 20px; }
.tm-card-words .eyebrow { margin-bottom: 10px; }
.tm-card-words h2 { font-weight: 500; font-size: 36px; line-height: 40px; letter-spacing: -.02em; color: var(--ink); outline: none; }
.tm-card-role { margin-top: 6px; font-size: 16px; line-height: 24px; color: var(--muted); }
.tm-card-line { margin-top: 14px; font-size: 16px; line-height: 24px; color: var(--body); }
.tm-card-out { margin-top: 14px; }
.tm-card-out a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; font-size: 14px; text-underline-offset: 4px; }
.tm-card-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
/* The arrows stay at the foot of the sheet while the rest scrolls under them (a person with a bio and the game is
   taller than a phone screen). The row reaches down through the sheet's own 24px of padding, so nothing shows below it. */
.tm-card-nav { position: sticky; bottom: -24px; margin-bottom: -24px; padding-bottom: 24px; background: var(--white); }      /* -24px: the browser measures "bottom" from inside the padding */
.tm-card-nav button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #D1D5DC; border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.tm-at { flex: 1; font-size: 14px; line-height: 21px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .tm-card-nav button:hover, .tm-x:hover { background: var(--panel); } .tm-x:hover { background: #E9E9E9; } }
html.tm-lock, html.tm-lock body { overflow: hidden; }

/* ── with a mouse: the small card beside the face under the pointer ──────────────────────────── */
/* team.js makes it, fills it and places it. Until it is clicked it cannot be touched (the pointer
   passes through it to the faces); a click on the face pins it, and then it can. */
.tm-pop { position: fixed; left: 0; top: 0; z-index: 44; width: 304px; padding: 20px 20px 16px; border: 1px solid var(--ink); border-radius: 20px; background: var(--white); color: var(--ink);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s .18s; }
.tm-pop.on { opacity: 1; visibility: visible; transition: opacity .18s ease; }
.tm-pop.pin { pointer-events: auto; }
.tm-pop .eyebrow { margin-bottom: 8px; }
.tm-pop h3 { font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: -.02em; color: var(--ink); outline: none; }
.tm-pop-role { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--muted); }
.tm-pop-line { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--body); }
.tm-pop-line:empty { display: none; }
.tm-pop-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tm-pop-at { flex: 1; }
.tm-pop-foot button, .tm-pop-x { display: none; place-items: center; width: 36px; height: 36px; border: 1px solid #D1D5DC; border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.tm-pop.pin .tm-pop-foot button, .tm-pop.pin .tm-pop-x { display: grid; }
.tm-pop.pin .tm-pop-hint { display: none; }
.tm-pop-x { position: absolute; top: 10px; right: 10px; border-color: transparent; background: var(--panel); font-size: 20px; }
.tm-pop button:hover { background: var(--panel); }
.tm-pop button:focus-visible { outline: 2px solid var(--orange-l); outline-offset: 2px; }
/* the face whose card is pinned */
.tm-person.held .tm-photo { outline: 2px solid var(--orange-l); outline-offset: 3px; }
/* a short phone: a smaller photograph, so the arrows are on screen without scrolling the card */
/* a phone, and a person with a bio: the same smaller photograph, so the game's first line is on the first screen */
@media (max-width: 767px) { .tm-card.tm-full .tm-card-photo { width: min(38vw, 150px); } }
@media (max-height: 700px) and (max-width: 767px) { .tm-card-photo { width: min(38vw, 150px); } .tm-card-words { margin-top: 14px; } .tm-card-nav { margin-top: 16px; padding-top: 12px; } }

/* ── from the bio form: the facts under the role, and the bio (12 Oct 2026) ──────────────────── */
.tm-card-facts { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--muted); }
.tm-card-bio { margin-top: 14px; max-width: 46ch; font-size: 16px; line-height: 24px; color: var(--body); }
.tm-pop-facts { margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--muted); }
.tm-pop-bio { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--body); }
.tm-pop-facts:empty, .tm-pop-bio:empty, .tm-pop-out[hidden] { display: none; }
.tm-pop.wide { width: 372px; }
.tm-pop.pin { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 0; }      /* team.js caps its height at the room under the row of groups */
/* on a screen too short for the whole card, it scrolls inside itself and its arrows stay in view at its foot */
.tm-pop.pin .tm-pop-foot { position: sticky; bottom: 0; padding-bottom: 14px; background: var(--white); }
.tm-pop-out { margin-top: 12px; }
.tm-pop-out a { color: var(--ink); font-weight: 500; font-size: 13px; line-height: 20px; text-underline-offset: 4px; }

/* ── two truths and a lie (Ian, 12 Oct 2026) ─────────────────────────────────────────────────── */
/* Three lines, one of them the lie. THE RED AND THE GREEN ARE NOT THE BRAND'S: the kit has white,
   black and one orange. Ian asked for a wrong pick to go red and the right one green, with green
   confetti, so those two colours live here and nowhere else on the site. Each state is also said
   in words (the tag on the button, the line above the three), never by colour alone. */
.tm-game { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.tm-game[hidden] { display: none; }
.tm-game-label { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.tm-game-ask { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--body); }
.tm-game-opts { display: grid; gap: 8px; margin-top: 12px; }
.tm-game .tm-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #D1D5DC; border-radius: 12px; background: var(--white); color: var(--ink);
  font: inherit; font-size: 15px; line-height: 21px; text-align: left; cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.tm-opt-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; }
.tm-opt-tag:empty { display: none; }
.tm-game .tm-opt[aria-disabled="true"] { cursor: default; }
.tm-game .tm-opt.was { background: var(--white); border-color: var(--rule); color: var(--muted); }
.tm-game .tm-opt.no { background: #FDECEA; border-color: #D93025; color: #8C1D18; }
.tm-game .tm-opt.yes { background: #E4F6EB; border-color: #1F9D55; color: #0E5A2E; }
.tm-game .tm-opt.shake { animation: tm-shake .45s cubic-bezier(.36, .07, .19, .97); }
.tm-game .tm-opt.yes.now { animation: tm-yes .55s cubic-bezier(.25, .46, .45, .94); }
.tm-tick path { stroke-dasharray: 1; }
.tm-opt.yes.now .tm-tick path { animation: tm-draw .45s .12s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes tm-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@keyframes tm-yes { 40% { transform: scale(1.025); } }
@keyframes tm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.tm-game-ask.no { font-weight: 600; color: #B3261E; }      /* the prompt turns into the answer to a pick */
.tm-game-ask.yes { font-weight: 600; color: #12703A; }
.tm-confetti { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.tm-confetti span { position: absolute; border-radius: 2px; will-change: transform, opacity; }
@media (hover: hover) { .tm-game .tm-opt:not([aria-disabled="true"]):hover { background: var(--panel); border-color: var(--ink); } }
.tm-game .tm-opt:focus-visible { outline: 2px solid var(--orange-l); outline-offset: 2px; }

.tm .part.pair { padding-bottom: 8px; }

@media (min-width: 768px) {
  .tm-open { padding-top: 48px; }
  .tm-wall { --w: 112px; --g: 10px; margin-top: 48px; }
  .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
  .tm-grid.tm-two { grid-template-columns: repeat(2, minmax(0, 300px)); }
  .tm-group { padding-top: 80px; }
  .tm-group.tm-first { padding-top: 48px; }
  .tm-list-in { padding: 16px 48px 48px; }
  .tm-rowb .n { font-size: 28px; line-height: 36px; letter-spacing: -.02em; }
  .tm-rowb { min-height: 68px; }
  /* the card: in the middle of the screen, the photograph beside the words */
  .tm-card-in { inset: 0; width: min(860px, calc(100% - 48px)); height: fit-content; max-height: calc(100svh - 48px); margin: auto; padding: 24px; border-radius: 24px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
  /* the close button, the photograph and the words share the one row; the button lies over its right-hand end */
  .tm-x { grid-column: 1 / -1; grid-row: 1; justify-self: end; top: -12px; margin: -12px -12px 0 0; }
  .tm-card-photo { grid-column: 1; grid-row: 1; }
  .tm-card-words { grid-column: 2; grid-row: 1; }
  .tm-card-photo { width: 100%; }
  .tm-card-words { margin-top: 28px; padding-right: 24px; }
  .tm-card-words h2 { font-size: 46px; line-height: 48px; }
}
@media (min-width: 1024px) {
  .tm-note, .tm-soon { margin-inline: var(--gutter); }
  .tm-open-in { padding: 0 var(--gutter); }
  .tm-wall { --w: 132px; --g: 12px; }
  .tm-jump { padding: 0 var(--gutter); }      /* on the row itself: the margin is worked out from the width of the box it is set on */
  .tm-jump ul { padding-left: 0; }
  .tm-view { margin-right: 0; }
  .tm-group { padding: 96px var(--gutter) 0; }
  .tm-group.tm-first { padding-top: 56px; }
  .tm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; margin-top: 32px; }
  .tm-grid.tm-two { grid-template-columns: repeat(2, minmax(0, 320px)); }
  .tm-name { font-size: 17px; line-height: 24px; }
  .tm-grid.tm-two .tm-name { font-size: 24px; line-height: 32px; }
  .tm-list { padding: 32px 12px 0; }
  .tm-list-in { padding: 24px max(64px, calc(var(--gutter) - 12px)) 64px; border-radius: 28px; }
  .tm-sheet { padding-top: 56px; }
}
@media (min-width: 1280px) {
  .tm-open .display { font-size: 84px; }      /* the headline on one line */
}
@media (prefers-reduced-motion: reduce) {
  .tm-run { animation: none; }
  .tm-ring { animation: none; background: var(--orange-l); }
  .tm-row:nth-child(2) .tm-run { margin-left: calc(var(--w) / -2); }
  .tm-photo img, .tm-jump nav a, .tm-view button, .tm-person, .tm-rowb, .tm-rowb .n, .tm-rowb .f, .tm-float, .tm-pop, .tm-pop.on { transition: none; }
  .tm-person:hover .tm-photo img, .tm-rowb:hover .n { transform: none; }
  .tm-card[open] .tm-card-in, .tm-card[open]::backdrop, .tm-card-photo img { animation: none; }
  .tm-game .tm-opt { transition: none; }
  .tm-game .tm-opt.shake, .tm-game .tm-opt.yes.now, .tm-opt.yes.now .tm-tick path { animation: none; }
}