/* Holding page lab (2026-10-18): the final layout-4 page with every content and treatment choice switchable from a panel.
   Page styles here are the candidate treatments; .lab-panel is review chrome only. */
.lay-switch, .mo-switch { display: none !important; }

/* identity anchor under the name */
.ed .idline { margin: calc(var(--s3) * -.5) 0 var(--s3); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); line-height: 1.7; }
.ed .idline span { color: rgba(241,241,239,.55); }
.ed .closing { color: var(--fg); font: 400 clamp(15px, 1.12vw, 18px)/1.7 var(--sans); margin: calc(var(--s3) * -.4) 0 32px; max-width: var(--W); }
.ed .selected { width: 100%; font-size: 13px; color: rgba(241,241,239,.68); margin: calc(var(--s6) * -.5) 0 var(--s5); }
.ed .selected b { font-weight: 400; color: var(--fg); margin-right: 12px; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.ed .links .txt-link { border-color: transparent; padding-inline: 6px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.ed .links .ico { padding: 12px; }
.ed .links .ico svg { width: 14px; height: 14px; }

/* keyword treatments */
.kw { width: 100%; position: relative; border-top: 1px solid var(--line); padding-top: var(--s3); font-size: 13px; }
.kw .it { all: unset; color: rgba(241,241,239,.72); cursor: default; transition: color .25s; }
.kw .it.x { cursor: pointer; }
.kw .it.x::after { content: "+"; margin-left: 5px; font-size: 10px; color: var(--line); color: rgba(241,241,239,.35); transition: rotate .3s; display: inline-block; }
.kw .it.on, .kw .it:hover, .kw .it:focus-visible { color: var(--fg); }
.kw .it.on::after { rotate: 45deg; }
.kw .gl { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(241,241,239,.45); }
/* flat: 4 even columns, no labels */
.kw.l-flat .grid { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: var(--s2) var(--s3); }
.kw.l-flat .gl { display: none; }
.kw.l-flat .grp, .kw.l-flat .items, .kw.l-line .items { display: contents; }
.kw.l-cols .items { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* columns: one column per group, label on top */
.kw.l-cols .grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--s3); }
.kw.l-cols .grp { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kw.l-cols .gl { margin-bottom: 4px; }
/* rows: label on the left, items run along the line */
.kw.l-rows .grid { display: grid; gap: 14px; }
.kw.l-rows .grp { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; }
.kw.l-rows .items { display: flex; flex-wrap: wrap; gap: 6px 0; }
.kw.l-rows .it + .it::before, .kw.l-line .it + .it::before { content: "·"; margin: 0 10px; color: rgba(241,241,239,.35); }
/* line: everything on one running line, groups split by a slash */
.kw.l-line .grid { display: flex; flex-wrap: wrap; gap: 8px 0; }
.kw.l-line .grp { display: contents; }
.kw.l-line .gl { display: none; }
.kw.l-line .grp + .grp .it:first-child::before { content: "/"; margin: 0 12px; }
/* fixed caption region: hover previews, click pins; height reserved so nothing jumps */
.kw .cap { min-height: 3.4em; margin-top: var(--s3); color: rgba(241,241,239,.68); font-size: 14px; line-height: 1.6; max-width: 52ch; transition: opacity .3s; }
.kw .cap b { color: var(--fg); font-weight: 400; margin-right: 8px; }
.kw .cap:empty { opacity: 0; }
/* accordion: detail opens under its own group */
.kw .acc { grid-column: 1 / -1; color: rgba(241,241,239,.68); font-size: 14px; line-height: 1.6; max-width: 52ch; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .5s cubic-bezier(.22,1,.36,1), opacity .3s, margin .3s; }
.kw .acc.open { max-height: 8em; opacity: 1; margin: 6px 0 4px; }
.kw.l-cols .acc { grid-column: auto; }

/* watch reacts: the suit tied to the hovered group grows and brightens */
.stage .case .mk .suit.q { transition: scale .5s cubic-bezier(.22,1,.36,1), filter .5s; }
.stage .case .mk .suit.q.lit { scale: 1.9; filter: drop-shadow(0 0 6px rgba(241,241,239,.6)); }

.built { margin-top: clamp(56px, 9vh, 96px); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(241,241,239,.4); }

/* watch reactions */
.stage .case .mk .suit.q.spin { scale: 1.5; rotate: 360deg; transition: scale .5s cubic-bezier(.22,1,.36,1), rotate .9s cubic-bezier(.22,1,.36,1); }
.stage .case.dimmed .mk .suit.q:not(.lit):not(.spin) { opacity: .18; transition: opacity .4s; }
.stage .case.ping { animation: ping 1.2s cubic-bezier(.22,1,.36,1); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(241,241,239,.35); } 100% { box-shadow: 0 0 0 26px rgba(241,241,239,0); } }
/* extra keyword layouts */
.kw.l-pills .grid { display: flex; flex-wrap: wrap; gap: 8px; } .kw.l-pills .grp, .kw.l-pills .items { display: contents; } .kw.l-pills .gl { display: none; }
.kw.l-pills .it { border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.kw.l-stack .grid { display: grid; gap: 16px; } .kw.l-stack .gl { display: block; margin-bottom: 6px; }
.kw.l-stack .items { display: flex; flex-wrap: wrap; } .kw.l-stack .it + .it::before { content: "·"; margin: 0 10px; color: rgba(241,241,239,.35); }
.kw.l-numbered .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; counter-reset: k; } .kw.l-numbered .grp, .kw.l-numbered .items { display: contents; } .kw.l-numbered .gl { display: none; }
.kw.l-numbered .it::before { counter-increment: k; content: counter(k, decimal-leading-zero); font-size: 10px; letter-spacing: .1em; color: rgba(241,241,239,.4); margin-right: 10px; }
.kw .static { grid-column: 1 / -1; color: rgba(241,241,239,.6); font-size: 13px; line-height: 1.55; margin-top: 4px; }
.built.t { font-variant-numeric: tabular-nums; }

/* actions: Email and Copy read as one joined control; quiet = icon-first text links */
.ed .links .pair { display: inline-flex; }
.ed .links .pair .btn:first-child { border-radius: 999px 0 0 999px; }
.ed .links .pair .ico { border-radius: 0 999px 999px 0; margin-left: -1px; }
.ed .links .quiet { display: contents; }
.ed .links .quiet .btn { border-color: transparent; padding-inline: 6px 12px; }
.ed .links .quiet .pair .ico { border-color: transparent; }
.ed .links .btn svg { flex: none; }

/* keyword separators */
.kw[class*=" s-"]:not(.s-line) { border-top: 0; padding-top: 0; }
.kw.s-none { padding-top: 4px; }
.kw.s-beads::before { content: ""; display: block; height: 3px; margin-bottom: var(--s3); background: radial-gradient(circle, rgba(241,241,239,.45) 1.1px, transparent 1.6px) 0 50% / 9px 3px repeat-x; }
.kw.s-stub::before { content: ""; display: block; width: 36px; height: 1px; background: rgba(241,241,239,.6); margin-bottom: var(--s3); }
.kw.s-ticks::before { content: ""; display: block; height: 7px; margin-bottom: var(--s3);
  background: repeating-linear-gradient(90deg, rgba(241,241,239,.5) 0 1px, transparent 1px 60px) 0 0 / 100% 7px no-repeat, repeating-linear-gradient(90deg, rgba(241,241,239,.22) 0 1px, transparent 1px 12px) 0 3px / 100% 4px no-repeat; }
.kw .suitrule { display: flex; gap: 14px; margin-bottom: var(--s3); color: rgba(241,241,239,.55); }
.kw .suitrule svg, .kw .gs { width: 12px; height: 12px; fill: currentColor; color: inherit; }
.kw .gs { width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; color: var(--fg); }

/* rabbit suits as column heads: big enough that the rabbit cut-out reads */
.kw .gh { display: block; margin-bottom: 10px; color: var(--fg); }
.kw .gh .gs { width: 30px; height: 30px; margin: 0; }
.kw.s-rabbits { border-top: 0; padding-top: 0; }
@media (max-width: 600px) { .kw.l-cols .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* round 5 ------------------------------------------------------------ */
/* talk bubble styles; every style hugs its text (holding.js fit) */
[data-tb="compact"] .tb { padding: 8px 12px; font-size: 14px; line-height: 1.4; border-radius: 14px 14px 14px 3px; }
[data-tb="snug"] .tb { padding: 9px 13px; font-size: 14.5px; line-height: 1.4; border-radius: 12px 12px 12px 3px; }
[data-tb="soft"] .tb { padding: 10px 14px; font-size: 14.5px; line-height: 1.4; border-radius: 16px; background: rgba(241,241,239,.93); }
[data-tb="flat"] .tb { padding: 7px 11px; font-size: 14px; line-height: 1.35; border-radius: 6px 6px 6px 1px; }
[data-tb="outline"] .tb { padding: 9px 13px; font-size: 14.5px; line-height: 1.4; border-radius: 14px 14px 14px 3px; background: #0b0b0b; color: var(--fg); border: 1px solid rgba(241,241,239,.55); }

/* keywords that open a talk bubble need no trailing "+" mark */
.kw.e-bubble .it.x::after, .kw.e-none .it::after { content: none; }

/* phone: tighter keyword grid and spacing */
@media (max-width: 600px) {
  .kw.l-cols .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .kw.l-cols .items { gap: 6px; }
  .kw .gh { margin-bottom: 6px; } .kw .gh .gs { width: 22px; height: 22px; }
  .kw .gl { margin-bottom: 2px; }
  .kw { font-size: 13px; }
  .built { margin-top: 48px; }
}

/* round 6 ------------------------------------------------------------ */
/* two-layer keyword tooltip: small uppercase context label, then the description. Same light bubble as the talk bubbles. */
.kt { position: fixed; z-index: 120; left: 0; top: 0; width: max-content; max-width: 340px; box-sizing: border-box; padding: 16px 20px 18px; border-radius: 18px 18px 18px 4px;
  background: var(--fg); color: #0b0b0b; display: grid; gap: 8px; pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity .2s ease, translate .25s cubic-bezier(.22,1,.36,1); }
.kt.below { border-radius: 4px 18px 18px 18px; translate: 0 -4px; }
.kt.on { opacity: 1; translate: 0 0; }
.kt-l { font: 500 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(11,11,11,.55); }
.kt-t { font: 500 16px/1.3 var(--sans); color: #0b0b0b; }
.kt-d { font: 400 15px/1.5 var(--sans); color: rgba(11,11,11,.82); text-wrap: pretty; }
.kw.e-two .it::after { content: none; }
.kw.e-two .it { cursor: default; }
.kw.e-two .it.on, .kw.e-two .it[aria-describedby] { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .kt { transition: none; translate: none; } }

/* keywords sit between the intro and the actions */
.ed .kw + .links { margin-top: var(--s5); margin-bottom: 0; }

/* centred page footer */
main.ed { position: relative; }
.pagefoot { position: absolute; left: 0; right: 0; bottom: 22px; padding: 0 20px; text-align: center; }
.pagefoot .built { text-wrap: balance; line-height: 1.6; }
.pagefoot .built { margin: 0; }
/* desktop is one screen, no scrolling: the page is exactly the viewport tall, vertical rhythm scales with the height,
   the name never grows past what the height allows, and the footer sits on the bottom edge */
@media (min-width: 1001px) {
  main.ed { height: 100svh; min-height: 0; padding-bottom: 0; box-sizing: border-box; overflow: hidden; }
  .ed { --s3: clamp(14px, 2.6vh, 24px); --s4: clamp(18px, 3.6vh, 40px); --s5: clamp(22px, 4.4vh, 48px); --s6: clamp(28px, 5.6vh, 64px); }
  .ed .copy { padding-bottom: 48px; }
  .ed h1 { font-size: min(calc(var(--W) / var(--fit, 4.72)), 13vh); }
  .ed .kw .gh .gs { width: clamp(22px, 3vh, 30px); height: clamp(22px, 3vh, 30px); }
}
@media (max-width: 1000px) { main.ed { padding-bottom: 88px; } }

/* round 8 ------------------------------------------------------------ */
@font-face { font-family: "Avenir Next DS"; src: url("../fonts/AvenirNextLTPro-Demi.otf") format("opentype"); font-weight: 600; font-display: swap; }

/* even padding: trim every text line to cap height and baseline, so the space above and below the words is what the padding says */
.kt, .tb { padding: 16px 18px 18px; }
.kt { gap: 12px; }
.kt > span, .kt > b { text-box: trim-both cap alphabetic; }
.kt-d { line-height: 1.55; }
.kt-t { font-weight: 600; }
.tb { text-box: trim-both cap alphabetic; padding: 13px 16px; line-height: 1.5; }
[data-tb="compact"] .tb { padding: 11px 14px; }
@supports not (text-box: trim-both cap alphabetic) { .kt { padding: 18px 18px 14px; } .tb { padding-top: 14px; padding-bottom: 10px; } }

/* the pointed corner reads as a tail */
.kt::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 14px; height: 9px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
.kt.below::after { top: -7px; bottom: auto; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.kt.cursor { transition: opacity .2s ease; translate: none; }

/* copy button: a true circle, the same height as the buttons beside it */
.ed .links { --bh: 42px; align-items: center; }
.ed .links .btn { height: var(--bh); box-sizing: border-box; }
.ed .links .btn.ico { padding: 0; width: var(--bh); justify-content: center; border-radius: 50%; }
@media (max-width: 600px) { .ed .links { --bh: 38px; } }
.ed .links .btn.ico svg { margin: 0; }

/* phone: keywords look tappable, and a tap opens the detail as a sheet at the bottom */
@media (hover: none), (max-width: 600px) {
  .kw.e-two .it { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(241,241,239,.4); text-underline-offset: 4px; cursor: pointer; }
  .kt.sheet { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; max-width: none; border-radius: 18px; padding: 20px 20px 22px; translate: 0 12px; pointer-events: auto; }
  .kt.sheet.on { translate: 0 0; }
  .kt.sheet::after { content: none; }
  .kt.sheet .kt-x { display: block; }
}
.kt-x { display: none; position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(11,11,11,.08); color: #0b0b0b; font-size: 18px; line-height: 32px; text-align: center; }

/* labels never below 11px (design system rule) */
.kw .gl { font-size: 11px; }

/* round 9 ------------------------------------------------------------ */
/* one bubble shape everywhere: the keyword tooltip takes the exact shape of the talk bubbles (no separate tail) */
:root { --tb-r: 18px 18px 18px 4px; }
[data-tb="compact"] { --tb-r: 14px 14px 14px 3px; } [data-tb="snug"] { --tb-r: 12px 12px 12px 3px; } [data-tb="soft"] { --tb-r: 16px; }
[data-tb="flat"] { --tb-r: 6px 6px 6px 1px; } [data-tb="outline"] { --tb-r: 14px 14px 14px 3px; }
.tb, .kt, .kt.below { border-radius: var(--tb-r); }
.kt::after, .kt.below::after { content: none; }
/* more generous inside, still even top and bottom */
.kt { padding: 20px 22px 20px; gap: 14px; max-width: 360px; }
.kt-d { line-height: 1.6; }
@supports not (text-box: trim-both cap alphabetic) { .kt { padding: 22px 22px 18px; } }

/* round 12: tighter body, and the spacing groups label + keyword together instead of three equal gaps */
.kt { gap: 0; }
.kt-t { margin-top: 8px; }
.kt-d { margin-top: 12px; line-height: 1.45; }
/* round 13: Pei's values */
.kt-t { margin-top: 16px; }
.kt-d { margin-top: 16px; line-height: 1.2; }

/* round 14: balanced lines so the hugged card has an even right edge */
.kt-d { text-wrap: balance; }

/* round 15: Pei's card values, and the same appear/leave motion as every other talk bubble
   (.tb in holding.css: grows from its pointed bottom-left corner with a slight overshoot, fades out the same way) */
.kt { padding: 20px; }
.kt-t { margin-top: 14px; }
.kt-d { margin-top: 14px; }
@supports not (text-box: trim-both cap alphabetic) { .kt { padding: 20px; } }
.kt, .kt.cursor { translate: none; transform-origin: 0 100%; scale: 0; opacity: 0;
  transition: scale .3s cubic-bezier(.3, 1.5, .5, 1), opacity .2s; }
.kt.below { transform-origin: 0 0; }
.kt.on, .kt.cursor.on { scale: 1; opacity: 1; translate: none; }
@media (hover: none), (max-width: 600px) { .kt.sheet { scale: 1; transform-origin: 50% 100%; translate: 0 12px; transition: opacity .2s ease, translate .25s cubic-bezier(.22,1,.36,1); } .kt.sheet.on { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .kt, .kt.cursor { transition: opacity .15s; scale: 1; } }

/* round 16: phone legibility (impeccable adapt: body 16px+, touch targets 44px+, nothing hover-only, more air between tap areas) */
@media (max-width: 600px) {
  main.ed { padding: 0 22px 104px; }
  .stage { --D: min(62vw, 250px); } .stage .st { height: calc(var(--D) + 172px); }
  .ed .kicker { font-size: 12px; letter-spacing: .16em; margin-bottom: 20px; }
  .ed h1 { font-size: clamp(42px, 13vw, 56px); }
  .ed .nm { margin-bottom: 16px; }
  .ed .idline { font-size: 14px; line-height: 1.55; letter-spacing: .12em; margin: 0 0 24px; }
  .ed p { font-size: 17px; line-height: 1.6; color: rgba(241,241,239,.8); margin-bottom: 36px; }
  /* keywords: each one is a full 44px row you can tap */
  .kw.l-cols .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .kw.l-cols .items { gap: 0; }
  .kw .gh { margin-bottom: 8px; } .kw .gh .gs { width: 26px; height: 26px; }
  .kw .gl { font-size: 12px; letter-spacing: .16em; margin-bottom: 2px; }
  .kw .it, .kw.e-two .it { font-size: 16px; line-height: 1.3; min-height: 44px; display: flex; align-items: center; text-align: left; text-underline-offset: 5px; }
  .ed .kw + .links { margin-top: 36px; }
  /* buttons: 48px tall, readable labels */
  .ed .links { --bh: 48px; gap: 12px; }
  .ed .links .btn { font-size: 15px; padding: 0 20px; gap: 10px; }
  .ed .links .btn svg { width: 15px; height: 15px; }
  .ed .links .btn.ico { padding: 0; }
  .pagefoot { bottom: 28px; } .pagefoot .built { font-size: 12px; line-height: 1.7; letter-spacing: .12em; }
  /* detail sheet */
  .kt.sheet { padding: 24px 22px 26px; }
  .kt.sheet .kt-l { font-size: 12px; } .kt.sheet .kt-t { font-size: 19px; } .kt.sheet .kt-d { font-size: 16px; line-height: 1.5; }
  .tb { font-size: 16px; max-width: 260px; }
}
/* very small phones: keep the three actions on one row without dropping below 14px or 44px */
@media (max-width: 360px) { .ed { --W: calc(100vw - 32px); } main.ed { padding-left: 16px; padding-right: 16px; } .ed .links { gap: 8px; flex-wrap: nowrap; } .ed .links .btn { font-size: 14px; padding: 0 12px; gap: 8px; flex: none; } .ed .links .btn.ico { padding: 0; } }

/* round 17: line icons at exactly 1px, whatever size the icon renders at (LinkedIn stays filled) */
svg.ln { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
svg.ln * { vector-effect: non-scaling-stroke; }
.ed .links .btn .copied { align-items: center; gap: 8px; }
.ed .links .btn.is-copied .copied { display: inline-flex; }
.ed .links .btn .copied svg { width: 15px; height: 15px; }

/* round 18: desktop layout variations (desktop only; phones keep the stacked layout) */
@media (min-width: 1001px) {
  /* the text block gets about three quarters of the page; the intro keeps a readable line length */
  [data-desk="rail"] .ed, [data-desk="corner"] .ed { --W: min(58vw, 1000px); }
  [data-desk="rail"] .ed p, [data-desk="corner"] .ed p { max-width: 62ch; }

  /* rail: watch hangs from the top of a narrow left column, text fills the rest */
  [data-desk="rail"] main.ed { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  [data-desk="rail"] .ed .stage { order: -1; --D: clamp(170px, 15vw, 240px); align-self: start; }
  [data-desk="rail"] .ed .stage .st { height: 100svh; }
  [data-desk="rail"] .anchor, [data-desk="rail"] .pend { top: 0; }

  /* corner: a small watch swings in the top-left corner, above the text */
  [data-desk="corner"] main.ed { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  [data-desk="corner"] .ed .stage { position: absolute; left: clamp(16px, 6vw, 112px); top: 0; width: 180px; height: 260px; --D: 110px; z-index: 2; }
  [data-desk="corner"] .ed .stage .st { height: 100%; }
  [data-desk="corner"] .anchor, [data-desk="corner"] .pend { top: 0; }
  [data-desk="corner"] .ed .copy { padding-top: clamp(150px, 24vh, 230px); }
}
/* corner on short screens: the whole watch (chain included) shrinks from its hanging point so it never touches the text */
@media (min-width: 1001px) and (max-height: 820px) {
  [data-desk="corner"] .ed .stage { transform-origin: 50% 0; scale: .52; }
  [data-desk="corner"] .ed .copy { padding-top: 136px; padding-bottom: 40px; }
  [data-desk="corner"] .ed .kw + .links { margin-top: 20px; }
}

/* round 19: watch swings in the top-right corner; the text keeps its three-quarter column on the left, vertically centred */
@media (min-width: 1001px) {
  [data-desk="cornerR"] .ed { --W: min(58vw, 1000px); }
  [data-desk="cornerR"] .ed p { max-width: 62ch; }
  [data-desk="cornerR"] main.ed { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  [data-desk="cornerR"] .ed .stage { position: absolute; right: clamp(16px, 6vw, 112px); top: 0; width: 240px; height: 360px; --D: clamp(130px, 13vw, 190px); z-index: 2; }
  [data-desk="cornerR"] .ed .stage .st { height: 100%; }
  [data-desk="cornerR"] .anchor, [data-desk="cornerR"] .pend { top: 0; }
}
@media (min-width: 1001px) and (max-height: 820px) { [data-desk="cornerR"] .ed .stage { --D: 130px; } }

/* round 20: watch size for corner right. --ws scales the watch; as it grows it slides past the right edge
   (55% of the extra size) so it stays clear of the three-quarter text column */
@media (min-width: 1001px) {
  [data-desk="cornerR"] .ed .stage { --Db: clamp(130px, 13vw, 190px); --D: calc(var(--Db) * var(--ws, 1));
    width: calc(var(--D) + 60px); height: calc(var(--D) + 180px);
    right: calc(clamp(16px, 6vw, 112px) - var(--wx, 0) * 1px); }
}
@media (min-width: 1001px) and (max-height: 820px) { [data-desk="cornerR"] .ed .stage { --Db: 130px; } }
/* round 21: big corner watches may reach into the text area; text always sits above the watch */
@media (min-width: 1001px) { [data-desk="cornerR"] .ed .stage { z-index: 0; } [data-desk="cornerR"] .ed .copy { position: relative; z-index: 1; } }

/* round 23: only the word Pei carries the pronunciation bubble */
.ed h1 .pn { cursor: default; }

/* round 24: the cursor dot grows more over anything clickable */
.cur.hov .d { scale: 4.4; }

/* round 25: on devices with a mouse, the dot is the only cursor everywhere on the page (the lab panel keeps its own) */
@media (hover: hover) and (pointer: fine) {
  html, body, main, main *, .pagefoot, .pagefoot * { cursor: none !important; }
}

/* round 26: in the three-quarter layouts the intro spans the full column, so it lines up with the four keyword columns */
@media (min-width: 1001px) {
  [data-desk="rail"] .ed p, [data-desk="corner"] .ed p, [data-desk="cornerR"] .ed p { max-width: var(--W); }
}
/* round 27: intro ends exactly at the right edge of the third keyword column (3 columns + 2 gaps) */
@media (min-width: 1001px) {
  [data-desk="rail"] .ed p, [data-desk="corner"] .ed p, [data-desk="cornerR"] .ed p { max-width: calc((var(--W) - 3 * var(--s3)) * .75 + 2 * var(--s3)); }
}

/* round 28: phone, centred version */
@media (max-width: 600px) {
  [data-malign="center"] .ed .copy { align-items: center; text-align: center; }
  [data-malign="center"] .ed .kicker { justify-content: center; }
  [data-malign="center"] .ed p { text-wrap: balance; }
  [data-malign="center"] .ed .links { justify-content: center; }
  [data-malign="center"] .kw .grp { display: flex; flex-direction: column; align-items: center; }
  [data-malign="center"] .kw.l-cols .items { align-items: center; }
  [data-malign="center"] .kw .it, [data-malign="center"] .kw.e-two .it { justify-content: center; text-align: center; }
}
/* the round copy button keeps its outline on phones (an older rule hid it when Copy was a text link) */
@media (max-width: 600px) { .ed .links .btn.ico { border-color: var(--line); text-decoration: none; padding: 0; } }

/* round 29: phone keywords read as four tight groups. Rows sit 30px apart visually; an invisible 7px band above and
   below each keyword keeps the tap area at 44px. More space between groups than inside them. */
@media (max-width: 600px) {
  .kw.l-cols .grid { gap: 36px 18px; }
  .kw .gh { margin-bottom: 6px; } .kw .gh .gs { width: 24px; height: 24px; }
  .kw .gl { margin-bottom: 4px; }
  .kw .it, .kw.e-two .it { min-height: 30px; position: relative; }
  .kw .it::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
}

/* round 30: when the page stacks into one column (watch on top, at 1000px and below) the footer starts on the same
   left edge as the content; side-by-side desktop layouts keep it centred */
@media (max-width: 1000px) {
  .pagefoot { text-align: left; padding: 0 clamp(16px, 6vw, 112px); }
  .pagefoot .built { text-wrap: pretty; }
}
@media (max-width: 600px) { .pagefoot { padding: 0 22px; } }
@media (max-width: 360px) { .pagefoot { padding: 0 16px; } }