/* LT UK, direction B at full depth: the room-page components (the four room pages only; Start-ups is the pattern).
   Each room page links ../site.css, then this file, then its own pages/<room>.css. Kept apart from site.css so the
   pages that have no room components (the front door, about, the call, questions, accountants, the small print and
   the not-found page) load less before their first paint. Her seal's rule (.seal) stays in site.css, section 9. */
/* =====================================================================================================================
   THE ROOM-PAGE COMPONENTS (sections 22 to 28). Start-ups (start-ups/index.html) is the pattern every room page copies.
   A room page's <body> carries data-string-colour="<room>" and its sections the colours the string takes there.
   ===================================================================================================================== */

/* ---------- 22. the room header (P46: compact, and it explains) ---------- */
/* Markup:
   <section class="room-head" data-string-colour="startups" aria-labelledby="h1">
     <div class="wall" aria-hidden="true"></div>
     <div class="wrap room-head__grid">
       <div class="room-head__look"><figure class="win room-head__win" data-string="ring"> day and lamplight pair </figure></div>
       <div class="room-head__words">
         <p class="room-noren c-startups"><span class="vh">Start-ups</span><span class="room-noren__cloth" aria-hidden="true">
           <span class="room-noren__p">Start-ups</span><span class="room-noren__p">Start-ups</span><span class="room-noren__p">Start-ups</span></span></p>
         <h1 id="h1">...</h1> <p class="lead">what she does here, and for whom</p>
         <nav class="room-head__in" aria-label="In this room"><p class="kicker">In this room</p><ul> three a.go links to the beats </ul></nav>
       </div></div></section>
   The window carries view-transition-name: room-window, so a room link on home (or "Next room") grows into it.
   Phone and tablet: the window first, then the noren and the words. Desktop: words in columns 1 to 7, window 8 to 12. */
.room-head { position: relative; padding: 12px 0 clamp(36px, 5vw, 72px); --wall-at: 100% 0%; }
.room-head__grid { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: center; }
.room-head__look { display: grid; place-items: center; }
.room-head__win { --d: min(56vw, 230px, 30svh); view-transition-name: room-window; }
.room-head__words { display: grid; gap: 12px; justify-items: start; width: 100%; max-width: 640px; }
.room-head__words h1 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); line-height: .97; }
.room-head__words .lead { max-width: 46ch; }
.room-head__in { display: grid; gap: 2px; width: 100%; margin-top: 2px; }
.room-head__in ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.room-head__in .go { min-height: 44px; }
@media (max-width: 767px) and (max-height: 940px) {
  .room-head { padding-top: 4px; }
  .room-head__grid { gap: 4px; }
  .room-head__win { --d: min(44vw, 176px, 21svh); }
  .room-head__words { gap: 8px; }
  .room-head__words h1 { font-size: 2.05rem; }
}
@media (min-width: 768px) {
  .room-head { padding-top: 32px; }
  .room-head__win { --d: min(40vw, 300px, 34svh); }
}
@media (min-width: 1100px) {
  .room-head { padding: clamp(40px, 6svh, 72px) 0 clamp(40px, 6svh, 72px); }
  .room-head__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: center; justify-items: stretch; }
  .room-head__look { grid-column: 8 / 13; grid-row: 1; }
  .room-head__words { grid-column: 1 / 8; grid-row: 1; max-width: none; gap: 16px; }
  .room-head__win { --d: min(34vw, 62svh, 640px); }
}

/* the room's noren: a cloth of three panels on a timber rod, split by two slits from the foot to a quarter below the
   rod, the room's name across it in Aloja; it parts once as the page arrives (1 s) and never sways after */
.room-noren { position: relative; display: inline-block; padding-top: 3px; color: var(--on-room); }
.room-noren::before { content: ""; position: absolute; z-index: 2; top: 0; left: -5px; right: -5px; height: 3px; border-radius: 2px; background: var(--timber); }
.room-noren__cloth { position: relative; display: block; font: 400 clamp(1.05rem, .9rem + .6vw, 1.4rem)/1 var(--head); letter-spacing: .03em; text-transform: uppercase; }
.room-noren__p { display: block; padding: .5em 1.1em 1.25em; background-color: var(--c); background-image: var(--weave), var(--cloth); color: var(--on-room); white-space: nowrap;
  border-radius: 0 0 2px 2px; transform-origin: 50% 0; box-shadow: 0 6px 14px -9px rgb(0 0 0 / .4); }
.room-noren__p + .room-noren__p { position: absolute; inset: 0; }
.room-noren__p { background-image: linear-gradient(90deg, rgb(28 26 24 / .06), transparent 18%, rgb(255 255 255 / .12) 33%, rgb(28 26 24 / .05) 34%, transparent 50%, rgb(255 255 255 / .12) 66%, rgb(28 26 24 / .05) 67%, transparent 84%, rgb(28 26 24 / .06)),
  linear-gradient(to bottom, transparent calc(100% - 7px), rgb(28 26 24 / .1) calc(100% - 7px)), var(--weave), var(--cloth); }
/* the two slits run up from the hem only to just under the name (66 per cent), so the name is never cut */
.room-noren__p:nth-child(1) { clip-path: polygon(0 0, 33.6% 0, 33.6% 66%, calc(33.333% - 1px) 66%, calc(33.333% - 1px) 100%, 0 100%); }
.room-noren__p:nth-child(2) { clip-path: polygon(33.2% 0, 66.8% 0, 66.8% 66%, calc(66.666% - 1px) 66%, calc(66.666% - 1px) 100%, calc(33.333% + 1px) 100%, calc(33.333% + 1px) 66%, 33.2% 66%); }
.room-noren__p:nth-child(3) { clip-path: polygon(66.4% 0, 100% 0, 100% 100%, calc(66.666% + 1px) 100%, calc(66.666% + 1px) 66%, 66.4% 66%); }
.room-noren.is-parting .room-noren__p:nth-child(1) { animation: rn-left 1s var(--ease) both; }
.room-noren.is-parting .room-noren__p:nth-child(2) { animation: rn-mid 1s var(--ease) both; }
.room-noren.is-parting .room-noren__p:nth-child(3) { animation: rn-right 1s var(--ease) both; }
@keyframes rn-left { 0%, 100% { transform: none; } 40% { transform: translateX(-12%) rotate(4deg); } }
@keyframes rn-right { 0%, 100% { transform: none; } 40% { transform: translateX(12%) rotate(-4deg); } }
@keyframes rn-mid { 0%, 100% { transform: none; } 40% { transform: scaleY(.9); } }
/* the faint weave of the cloth (fine warp and weft) under the 3 per cent noise */
:root { --weave: repeating-linear-gradient(0deg, rgb(28 26 24 / .045) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 3px); }

/* ---------- 23. the transformation (P58 to P60; INVENTORY transformation part) ---------- */
/* Markup: <figure class="ba" data-ba data-ba-start="35" [data-ba-third="Ready to meet the public"] aria-labelledby=...>
     <div class="ba__stage">
       <div class="ba__layer ba__layer--before" data-ba-layer="before"><p class="ba__word">Before</p> pair </div>
       <div class="ba__layer ba__layer--after" data-ba-layer="after"><p class="ba__word">After</p> pair </div>
       [<div class="ba__layer ba__layer--third" data-ba-layer="third"><p class="ba__word">...</p> pair </div>]
       <div class="ba__line" role="slider" tabindex="0" aria-label="..." aria-valuemin="0" aria-valuemax="100"
            aria-valuenow="35" aria-valuetext="..."><span class="ba__grip" aria-hidden="true"></span></div>
     </div>
     <div class="ba__ctrl"><button class="ba__btn" type="button" data-ba-go="0">Before</button>
       <button class="ba__btn" type="button" data-ba-go="100">After</button>[<button ... data-ba-go="third">...</button>]</div>
   </figure>
   After is on the left of the line and Before on its right: the line moves right as the work is done. The light mode
   (.ba--light, data-ba-mode="light"): three layers data-ba-layer="morning|afternoon|lamplight", the first .is-on, and
   three buttons data-ba-light="..." aria-pressed. No script: every picture shows, one under the other, its word above. */
@property --ba { syntax: "<number>"; inherits: true; initial-value: 35; }
.ba { position: relative; --ba: 35; }
.ba__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--paper-2); touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ba__layer--after { z-index: 1; clip-path: inset(0 calc((100 - var(--ba)) * 1%) 0 0); }
.ba__layer--third { z-index: 2; opacity: 0; transition: opacity .8s var(--ease); }
.ba.is-third .ba__layer--third { opacity: 1; }
.ba__word { display: none; }
/* the grab line keeps its whole grip on the picture at both ends */
.ba__line { position: absolute; z-index: 3; top: 0; bottom: 0; left: clamp(22px, calc(var(--ba) * 1%), calc(100% - 22px)); width: 44px; margin-left: -22px; display: grid; place-items: center; cursor: ew-resize; outline: none; }
.ba__line::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fcfbf8; box-shadow: 0 0 0 1px rgb(28 26 24 / .4); }
.ba__grip { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fcfbf8; box-shadow: 0 0 0 2px #1c1a18, 0 6px 16px -6px rgb(0 0 0 / .5); transition: transform .2s var(--ease); }
.ba__grip::before, .ba__grip::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: solid #1c1a18; border-width: 0 0 2.5px 2.5px; }
.ba__grip::before { left: 9px; transform: rotate(45deg); }
.ba__grip::after { right: 9px; transform: rotate(-135deg); }
.ba.is-dragging .ba__grip { transform: scale(1.08); }
.ba__line:focus-visible .ba__grip { box-shadow: 0 0 0 2px #1c1a18, 0 0 0 5px #fcfbf8, 0 0 0 8px #a3461a; }
.ba.is-gliding { transition: --ba .6s var(--ease); }
.ba.is-third .ba__line { opacity: .55; }
.ba__ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ba__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--edge); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 .9375rem/1.2 var(--body); cursor: pointer; transition: background-color .2s var(--ease); }
@media (hover: hover) { .ba__btn:hover { background: var(--paper-2); } }
.ba__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ba--light .ba__stage { cursor: auto; }
.ba--light .ba__layer { opacity: 0; transition: opacity .8s var(--ease); }
.ba--light .ba__layer.is-on { opacity: 1; }
html:not(.js) .ba__stage { aspect-ratio: auto; display: grid; gap: 14px; overflow: visible; background: none; cursor: auto; }
html:not(.js) .ba__layer { position: static; clip-path: none; opacity: 1; display: grid; gap: 6px; }
html:not(.js) .ba__layer img { position: static; aspect-ratio: 3 / 2; height: auto; border-radius: 6px; }
html:not(.js) .ba__word { display: block; font: 700 .8125rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
html:not(.js) .ba__line, html:not(.js) .ba__ctrl { display: none; }

/* ---------- 24. folds that open in place (P31): "What it includes", a worked example ---------- */
/* Markup: <div class="fold" data-fold> <button class="fold__btn" type="button" aria-expanded="true" aria-controls="x">
     <span class="fold__open">What it includes</span><span class="fold__close">What it includes</span>
     <span class="fold__state" aria-hidden="true"><span class="pm"></span></span></button>
     <div class="fold__body" id="x"><div class="fold__in"> ... </div></div></div>
   "What it includes" is closed by default with script; a worked example (.paper) is open by default, the thing itself
   (P62), with its Close button; every fold is open without script; opens at once, its words wiping open over 0.45 s. */
.fold__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: 700 1rem/1.3 var(--body); }
.fold__btn > .fold__open, .fold__btn > .fold__close { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fold__state { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--edge); border-radius: 50%; }
.fold__close { display: none; }
.fold__btn[aria-expanded="true"] .fold__open { display: none; }
.fold__btn[aria-expanded="true"] .fold__close { display: inline; }
html:not(.js) .fold__state { display: none; }
/* with no script every fold is open, so its button says expanded in the markup (script sets the real state), and a
   worked example's Open or Close button, which could do nothing, is not shown */
html:not(.js) .paper__btn { display: none; }
.fold__body { display: grid; grid-template-rows: 1fr; }
.fold__in { min-height: 0; overflow: hidden; }
/* as a box (site.css section 16): the fold takes its open height at once and its words wipe open inside it, only when a
   visitor opens it (a worked example open on arrival does not play) */
.js .fold:not(.is-open) .fold__body { grid-template-rows: 0fr; visibility: hidden; }
html.motion .fold.is-open.was-opened .fold__in { animation: box-open .45s var(--ease) both; }

/* ---------- 25. the worked example: a page of the house's stationery (washi, a timber rule, Lora) ---------- */
/* Markup: <article class="paper fold" data-fold aria-labelledby="x-h">
     <div class="paper__head"><h3 class="paper__kind" id="x-h">An example of the kind she leaves you</h3>
       <p class="paper__title">The document's own title</p> <button class="fold__btn paper__btn" ...>Open the guide / Close the guide</button></div>
     <div class="fold__body" id="..."><div class="fold__in"><div class="paper__body"> the document </div></div></div></article>
   Never a client's document or a result; no figure and no name of a real person, firm or shop. The paper stays
   paper-coloured in the dark theme, with ink words, as a sheet would. */
.paper { --washi: #f8f4ec; position: relative; max-width: 720px; border-radius: 3px; background-color: var(--washi); background-image: var(--cloth), linear-gradient(180deg, rgb(255 255 255 / .5), transparent 40%);
  color: #1c1a18; box-shadow: 0 1px 0 rgb(28 26 24 / .08), 0 18px 40px -22px rgb(28 26 24 / .45); border-top: 4px solid #8a6a4a; }
:root[data-theme="dark"] .paper { box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 18px 40px -18px rgb(0 0 0 / .8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paper { box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 18px 40px -18px rgb(0 0 0 / .8); } }
.paper :focus-visible { outline-color: #a3461a; }
.paper__head { display: grid; gap: 4px; justify-items: start; padding: 22px clamp(18px, 4vw, 40px) 14px; }
.paper__kind { font: 700 .8125rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #8a3a12; }
.paper__title { font: 700 clamp(1.35rem, 1.15rem + .7vw, 1.75rem)/1.25 var(--body); color: #1c1a18; }
.paper .fold__btn { color: #1c1a18; margin-top: 6px; }
.paper .fold__state { border-color: #6b655e; }
.paper__body { margin: 0 clamp(18px, 4vw, 40px); padding: 18px 0 22px; border-top: 1px solid rgb(138 106 74 / .45); }
.paper__steps { counter-reset: st; display: grid; gap: 14px; }
.paper__steps li { counter-increment: st; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.paper__steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 2em; height: 2em; border: 1.5px solid #8a6a4a; border-radius: 50%; font: 700 .9375rem/1 var(--body); color: #1c1a18; }
.paper__steps b { display: block; font-weight: 700; }
.paper__foot { margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgb(138 106 74 / .55); font: italic 400 .9375rem/1.5 var(--body); color: #55504a; }

/* ---------- 26. the price card, and her own card (Tier 3 wording from PRICE-LINES.md, printed exactly) ---------- */
/* "Beside, never apart": the figure and every one of its lines are in the card, in view; only "What it includes"
   (a .fold) may close. The offer comes first (its name and figure), then its lines beside it as one compact group, then
   "What it includes". Markup: <article class="pcard" aria-labelledby="x"> <!-- price-lines: <package> -->
     <div class="pcard__grid"><h3 class="pcard__h" id="x">Name: <span class="pcard__fig">£n</span></h3>
       <div class="pcard__lines"> each line a <p> </div></div> <div class="fold pcard__incl" data-fold> ... </div></article>
   Her Power Hour (.pcard--hers on Start-ups): her heading, her figure and her line, then its lines. Her own list
   (.pcard--list on Business): her heading, the VAT and 14-day lines once at its head, then her lines exactly; from
   900 px her lines and the card's lines sit side by side. All of hers white-space: pre-wrap so her spacing shows. */
.pcard { position: relative; display: grid; gap: 14px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--rule); border-top: 4px solid var(--c); border-radius: 6px; background: var(--paper); }
.pcard__grid { display: grid; gap: 14px; }
.pcard__h { font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.3 var(--body); }
.pcard__fig { display: block; margin-top: 6px; font: 400 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--head); letter-spacing: .01em; }
.pcard__lines { display: grid; gap: 6px; padding-left: 14px; border-left: 3px solid var(--or); font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.pcard__lines p { max-width: 62ch; }
.pcard__incl { border-top: 1px solid var(--rule); padding-top: 4px; }
.pcard__incl .fold__in > p { padding: 4px 0 8px; max-width: 64ch; }
@media (min-width: 900px) { .pcard__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; } }
.pcard--hers .pcard__h, .hers-prices__line { white-space: pre-wrap; }
.pcard--hers .pcard__h { letter-spacing: .04em; }
.pcard--hers .pcard__lines { margin-top: 2px; }
@media (min-width: 900px) {
  .pcard--list { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .pcard--list .pcard__h { grid-column: 1 / -1; }
  .pcard--list .pcard__lines { grid-column: 2; grid-row: 2; margin-top: 10px; }
  .pcard--list .hers-prices { grid-column: 1; grid-row: 2; }
}
.pcard--hers .hers-prices li { display: grid; gap: 4px; padding: 14px 0 4px; border-bottom: 0; }
.hers-prices__fig { font: 700 1.25rem/1.4 var(--body); letter-spacing: .03em; }

/* ---------- 27. on to the next room (P55): her seal in its window, ringed by the string, and the way through ---------- */
/* Markup: <section class="next-room" data-string-colour="<next room>" aria-labelledby="next-h"><div class="wrap next-room__in">
     <h2 class="kicker" id="next-h">On to the next room</h2>
     <div class="next-room__set">
       <span class="win next-room__win" id="next-win" data-string="ring" aria-hidden="true"><span class="seal"> her seal, day and dark files (alt="") </span></span>
       <a class="next-room__link" href="../business/index.html" data-room-link="business" data-vt-from="#next-win"><span class="next-room__words" data-string-block>Next room: Business</span></a>
     </div></div></section>
   Her seal sits beside the link, never inside it (a mark inside a control would have to read as an icon at 3:1); the link's
   ::before stretches over the whole set, so a click on the seal goes through too. Her seal is the file, never redrawn,
   exactly centred (the .seal rule below). */
.next-room { padding: clamp(56px, 8vw, 112px) 0; }
.next-room__in { display: grid; justify-items: center; gap: 10px; text-align: center; }
.next-room__set { position: relative; display: grid; justify-items: center; gap: 8px; padding: 4px 12px 8px; }
.next-room__link { color: var(--ink); text-decoration: none; border-radius: 6px; }
.next-room__link::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 12px; }
.next-room__win { --d: clamp(150px, 18vw, 210px); display: grid; place-items: center; background: var(--paper); }
.next-room__win .seal { width: 86%; }
.next-room__words { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem)/1.1 var(--head); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
@media (hover: hover) { .next-room__set:hover .next-room__words { text-decoration-color: var(--or-text); } }

/* ---------- 28. a room's held steps (D's way, three or four short steps: 52vh, 56svh) ---------- */
/* Markup as section 14, with class "rsteps ride ride--room" and data-steps="n": desktop, the round window on the left,
   the step names as the string's timeline, the step's words on the right; phone and tablet, the window on top, the
   names in a row with the string under them, the words below. */
.ride--room.ride-on { --step-len: 56svh; }
@media (min-width: 1100px) { .ride--room.ride-on { --step-len: 52vh; } }
.rsteps:not(.ride-on) { padding: clamp(64px, 8vw, 112px) 0; }
.rsteps__head { display: grid; gap: 10px; margin-bottom: 8px; }
.rsteps.ride-on .rsteps__head { margin-bottom: clamp(12px, 2.4svh, 32px); }
.rsteps.ride-on .rsteps__head h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 3.2rem); }
.rsteps.ride-on .ride-body { display: grid; justify-items: center; gap: 12px; }
.rsteps .win--ride { --d: min(60vw, 240px, 30svh); }
.rsteps .win--ride[data-string="ring"] { margin: calc(var(--ring-gap) + var(--band) - 4px); }
.rsteps .ride-names { justify-content: center; gap: 0; padding: 0 0 calc(var(--band) + 12px); font-size: .9375rem; }
.rsteps .ride-names > span { padding: 4px 10px; }
.rsteps.ride-on .ride-stops { width: 100%; max-width: 560px; }
.rsteps .ride-stop h3 { margin-top: 2px; }
@media (min-width: 1100px) {
  .rsteps.ride-on .ride-body { grid-template-columns: auto auto minmax(20rem, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; justify-items: start; }
  .rsteps .win--ride { --d: min(34vw, 58svh, calc(100svh - 340px), 560px); }
  .rsteps .ride-names { flex-direction: column; gap: 30px; padding: 0 0 0 calc(var(--band) + 16px); font-size: 1.125rem; }
  .rsteps .ride-names > span { padding: 0; }
  .rsteps.ride-on .ride-stops { max-width: 34rem; }
  .rsteps.ride-on .ride-stop h3 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.6rem); line-height: 1.15; }
  .rsteps.ride-on .ride-stop p { font-size: clamp(1.25rem, 1rem + .5vw, 1.5rem); line-height: 1.5; max-width: 30ch; }
  /* each room's steps take their own form (C16): the window on the right on Start-ups, on the left on Home (the pattern itself); on Business the step
     names run in a row above, the window on the left and the words beside it */
  .rsteps--flip.ride-on .ride-body { grid-template-columns: minmax(20rem, 1fr) auto auto; }
  .rsteps--flip.ride-on .ride-stops { grid-column: 1; grid-row: 1; justify-self: end; }
  .rsteps--flip.ride-on .ride-names { grid-column: 2; grid-row: 1; }
  .rsteps--flip.ride-on .win--ride { grid-column: 3; grid-row: 1; }
  .rsteps--row.ride-on .ride-body { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .rsteps--row.ride-on .ride-names { grid-column: 1 / -1; grid-row: 1; flex-direction: row; gap: 0; padding: 0 0 calc(var(--band) + 12px); }
  .rsteps--row.ride-on .ride-names > span { padding: 4px 18px; }
  .rsteps--row.ride-on .win--ride { grid-column: 1; grid-row: 2; --d: min(30vw, calc(100svh - 440px)); }
  .rsteps--row.ride-on .ride-stops { grid-column: 2; grid-row: 2; }
}
@media (max-width: 1099px) and (max-height: 760px) {
  .rsteps.ride-on .rsteps__head .kicker { display: none; }
  .rsteps.ride-on .rsteps__head h2 { font-size: 1.6rem; }
  .rsteps .win--ride { --d: min(52vw, 200px, 26svh); }
  .rsteps.ride-on .ride-body { gap: 8px; }
}

/* a tablet: the window and the words take the stage, not three lines afloat in it */
@media (min-width: 768px) and (max-width: 1099px) and (min-height: 900px) {
  .rsteps .win--ride { --d: min(56vw, 440px, 36svh); }
  .rsteps.ride-on .ride-stops { max-width: 620px; }
  .rsteps.ride-on .ride-stop h3 { font-size: 1.75rem; }
  .rsteps.ride-on .ride-stop p { font-size: 1.25rem; line-height: 1.5; }
}

/* reduced motion: the room's window gives up its page-change name (site.css section 21 holds the rest) */
@media (prefers-reduced-motion: reduce) { .room-head__win { view-transition-name: none; } }