/* Spume: a stone hammam in Burnside. Near-black ink, copper only in the copper things and the thin
   line of each ritual's heat, foam white, the rituals laid on the pale marble of the slab, and a
   ground that follows the heat of the rooms: warm stone in the hot room, lime plaster in the warm rooms,
   cooling step by step to pale limestone and linen in the cool room. The headings carry the same heat on
   Truculenta's width and weight: wide and heavy in the hot room, narrow and light in the cool. */
@font-face {
  font-family: "Truculenta";
  src: url("/assets/fonts/specimen/truculenta-var.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 75% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manuale";
  src: url("/assets/fonts/specimen/manuale-var.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@property --spm-wdth { syntax: "<number>"; inherits: true; initial-value: 96; }
@property --spm-wght { syntax: "<number>"; inherits: true; initial-value: 440; }
@property --spm-trk { syntax: "<number>"; inherits: true; initial-value: .004; }
@property --spm-lh { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --spm-rw { syntax: "<number>"; inherits: false; initial-value: 96; }
@property --spm-rg { syntax: "<number>"; inherits: false; initial-value: 460; }

body.spec-spume { margin: 0; background: #B3ACA4; }

.spm-root {
  --spm-stone: #B3ACA4; --spm-plaster: #CFC4B8; --spm-mist: #D9D5CE; --spm-lime: #E3E2DD; --spm-linen: #EDECE8;
  --spm-ink: #1F1A16; --spm-ink-soft: #3B342E; --spm-copper: #824C29;
  --spm-foam: #F4F1EC; --spm-hair: rgba(31, 26, 22, .28);
  --spm-display: "Truculenta", "Arial Narrow", Arial, sans-serif;
  --spm-text: "Manuale", Georgia, serif;
  --spm-gut: clamp(20px, 4.4vw, 64px);
  --spm-gap: clamp(16px, 2vw, 28px);
  --spm-nav-h: 60px;
  /* the slab photograph as it is fitted behind the headline */
  --spm-slab-x: 50%;
  --spm-slab-y: 50%;
  --spm-hot: cubic-bezier(.16, 1, .3, 1);
  --spm-seam: min(46vh, 420px);
  position: relative;
  background: var(--spm-stone);
  color: var(--spm-ink);
  font-family: var(--spm-text);
  font-weight: 400;
  font-size: clamp(1.0625rem, .3vw + .95rem, 1.1875rem);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}
.spm-root *, .spm-root *::before, .spm-root *::after { box-sizing: border-box; }
.spm-root :where(h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset) { margin: 0; }
.spm-root :where(ol, ul) { padding: 0; list-style: none; }
.spm-root :where(img) { display: block; max-width: 100%; height: auto; }
.spm-root [hidden] { display: none !important; }
.spm-root :where(a) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.spm-root :focus-visible { outline: 2px solid var(--spm-ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--spm-foam); }
.spm-wrap { max-width: calc(1440px + 2 * var(--spm-gut)); margin-inline: auto; padding-inline: var(--spm-gut); }
/* a link to a section lands below the slim bar and the nav */
.spm-root [id] { scroll-margin-top: calc(var(--bar-h, 40px) + var(--spm-nav-h) + 12px); }
.spm-root > section { scroll-margin-top: calc(var(--bar-h, 40px) + var(--spm-nav-h)); }

/* ---------- heat: each room's setting on the display face's axes ---------- */
.spm-root [data-room="hot"] { --spm-wdth: 118; --spm-wght: 640; --spm-trk: .012; --spm-lh: .92; }
.spm-root [data-room="warm"] { --spm-wdth: 96; --spm-wght: 440; --spm-trk: .004; --spm-lh: 1; }
.spm-root [data-room="cool"] { --spm-wdth: 75; --spm-wght: 190; --spm-trk: .002; --spm-lh: 1.04; }
.spm-root :where(h1, h2, h3, dt, legend) {
  font-family: var(--spm-display);
  font-weight: var(--spm-wght);
  font-stretch: calc(var(--spm-wdth) * 1%);
  font-variation-settings: "wdth" var(--spm-wdth), "wght" var(--spm-wght);
  letter-spacing: calc(var(--spm-trk) * 1em);
  line-height: var(--spm-lh);
  text-wrap: balance;
}
.spm-root :where(p) { text-wrap: pretty; }
/* the reading text follows the heat too: fuller in the hot rooms, lighter in the cool */
.spm-root [data-room="hot"] { --spm-body: 450; }
.spm-root [data-room="warm"] { --spm-body: 410; }
.spm-root [data-room="cool"] { --spm-body: 370; }
/* a room's name at its own heat, wherever it is named */
.spm-root [data-rw="warm"] { --spm-rw: 96; --spm-rg: 470; }
.spm-root [data-rw="hot"] { --spm-rw: 125; --spm-rg: 780; }
.spm-root [data-rw="slab"] { --spm-rw: 114; --spm-rg: 640; }
.spm-root [data-rw="treat"] { --spm-rw: 88; --spm-rg: 380; }
.spm-root [data-rw="cool"] { --spm-rw: 75; --spm-rg: 240; }
.spm-rw, .spm-kw, .spm-stop {
  font-family: var(--spm-display);
  font-weight: var(--spm-rg); font-stretch: calc(var(--spm-rw) * 1%);
  font-variation-settings: "wdth" var(--spm-rw), "wght" var(--spm-rg);
}

/* ---------- the nav: its ground is the room under it (none over the photograph) ---------- */
.spm-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 50;
  height: var(--spm-nav-h);
  display: flex; align-items: center; gap: 24px;
  padding-inline: var(--spm-gut);
  background: var(--spm-nav-bg, var(--spm-stone)); color: var(--spm-nav-fg, var(--spm-ink));
  transition: background-color .6s ease-out, color .6s ease-out;
  font-family: var(--spm-display);
  font-weight: 470; font-stretch: 92%;
  font-variation-settings: "wdth" 92, "wght" 470;
  font-size: 1.0625rem; line-height: 1;
}
/* (only while the script keeps the nav's ground in step with the page; without it the nav stays on stone) */
.spm-js .spm-nav[data-over="photo"] { --spm-nav-bg: rgba(179, 172, 164, 0); }
/* once the page moves, the nav keeps a veil of the stone over the photograph so its words stay clear */
.spm-js .spm-nav[data-over="photo"].spm-moved { --spm-nav-bg: rgba(179, 172, 164, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* over the marble of the rituals: a veil of foam white, the stone showing through */
.spm-nav[data-over="marble"] { --spm-nav-bg: rgba(244, 241, 236, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.spm-nav[data-over="warm"] { --spm-nav-bg: var(--spm-plaster); }
.spm-nav[data-over="mist"] { --spm-nav-bg: var(--spm-mist); }
.spm-nav[data-over="cool"] { --spm-nav-bg: var(--spm-lime); }
.spm-nav[data-over="linen"] { --spm-nav-bg: var(--spm-linen); }
.spm-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; margin-right: auto; }
.spm-brand-name { font-size: 1.375rem; font-variation-settings: "wdth" 110, "wght" 600; font-stretch: 110%; font-weight: 600; letter-spacing: .01em; }
.spm-mark { width: 28px; height: 28px; flex: none; overflow: visible; }
.spm-mk-bowl { fill: var(--spm-copper); }
.spm-mk-b { fill: var(--spm-foam); stroke: var(--spm-ink); stroke-width: 2.5; }
.spm-links { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.spm-links a { text-decoration: none; padding-block: 8px; letter-spacing: .02em; }
.spm-links a:hover { text-decoration: underline; }
.spm-menu-btn {
  display: none; font: inherit; font-variation-settings: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid currentColor; padding: 6px 0 4px; cursor: pointer; letter-spacing: .02em;
}
.spm-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--spm-stone); padding: 8px var(--spm-gut) 28px;
  box-shadow: 0 18px 30px -24px rgba(31, 26, 22, .5);
}
.spm-nav[data-over="marble"] .spm-menu { background: var(--spm-foam); }
.spm-menu a {
  display: block; padding: 10px 0; text-decoration: none;
  font-size: 1.75rem; font-variation-settings: "wdth" 96, "wght" 440; font-stretch: 96%; font-weight: 440;
}
@media (max-width: 900px) { .spm-l-b { display: none; } }
@media (max-width: 700px) { .spm-root { --spm-nav-h: 56px; } }
@media (max-width: 520px) {
  .spm-l-a { display: none; }
  .spm-menu-btn { display: inline-block; }
  .spm-nav { gap: 20px; }
}

/* ---------- the hero: the slab in its room, the words on the wall, the foam in front of them ---------- */
.spm-hero {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: calc(-1 * var(--spm-nav-h));
  height: max(540px, calc(100svh - var(--bar-h, 40px)));
  background: #8f8983;
  view-timeline-name: --spm-hero;
}
/* the steam under the dome, a little lighter up near the vault */
.spm-hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 52%; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(179, 172, 164, .5), rgba(179, 172, 164, .16) 58%, rgba(179, 172, 164, 0));
}
.spm-foam { position: absolute; inset: 0; touch-action: pan-y; cursor: pointer; }
.spm-foam:focus-visible { outline: none; box-shadow: none; }
.spm-hero:has(.spm-foam:focus-visible)::after, .spm-plate::after {
  content: ""; position: absolute; z-index: 6; pointer-events: none;
  inset: calc(var(--spm-nav-h) + 14px) 14px 14px;
  --c: var(--spm-foam); --l: 26px; --t: 2px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--l);
  background-repeat: no-repeat;
}
.spm-slab, .spm-poster, .spm-slab img, .spm-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.spm-slab { z-index: 0; }
.spm-poster { z-index: 1; transition: opacity .9s ease-out, visibility 0s linear .9s; }
.spm-slab img, .spm-poster img { object-fit: cover; object-position: var(--spm-slab-x) var(--spm-slab-y); }
.spm-live:not(.spm-relay) .spm-poster { opacity: 0; visibility: hidden; }
/* re-laid after a resize: the photograph at once, the canvas hidden until its first new frame, then a cut */
.spm-relay .spm-poster, .spm-cut .spm-poster { transition: none; }
.spm-relay .spm-cv { visibility: hidden; }
.spm-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.spm-hero-in {
  position: absolute; left: 0; right: 0; bottom: var(--spm-h1-b, 51%); z-index: 2;
  padding-inline: var(--spm-gut); pointer-events: none;
}
.spm-kicker {
  font-family: var(--spm-display);
  font-size: clamp(1.125rem, 1.55vw, 1.625rem); line-height: 1.1;
  font-weight: 300; font-stretch: 84%;
  font-variation-settings: "wdth" 84, "wght" 300;
  letter-spacing: .012em;
  margin-bottom: clamp(8px, 1.6svh, 20px);
}
.spm-h1 {
  --spm-wdth: 122; --spm-wght: 660; --spm-trk: .006; --spm-lh: .86;
  font-size: max(3rem, min(10.2vw, calc(27.8svh - 95px), 11rem));
  margin-left: -.04em;
}
.spm-h1-l { display: block; white-space: nowrap; }
/* the cotton bag the foam is poured from: on the slab at rest, over the heap while it pours */
.spm-bag {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: var(--spm-bag-w, 150px); aspect-ratio: 360 / 198;
  background: url("/assets/work/spume/bag-sm.webp") center / contain no-repeat;
  transform-origin: 50% 50%;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(31, 26, 22, .28)) drop-shadow(0 14px 16px rgba(31, 26, 22, .18));
  transition: opacity .5s ease-out;
}
.spm-bag.spm-on { opacity: 1; }
.spm-bag-sh {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(31, 26, 22, .46), rgba(31, 26, 22, .16) 60%, rgba(31, 26, 22, 0));
}
/* the one hint, written on the face of the slab under the bag */
.spm-hint {
  position: absolute; z-index: 5; left: var(--spm-cue-x, 62%); top: var(--spm-cue-y, 72%);
  transform: translateX(-50%);
  padding-top: calc(var(--spm-cue-l, 22px) + 12px);
  font-family: var(--spm-display); color: var(--spm-foam);
  text-shadow: 0 1px 2px rgba(31, 26, 22, .45);
  font-size: clamp(1.125rem, 1.4vw, 1.5rem); line-height: 1.1; white-space: nowrap;
  font-weight: 580; font-stretch: 104%; font-variation-settings: "wdth" 104, "wght" 580; letter-spacing: .008em;
  pointer-events: none;
  visibility: hidden; opacity: 0; transition: opacity .6s ease-out, visibility 0s linear .6s;
}
/* a line up from the words to the bag */
.spm-hint::after {
  content: ""; position: absolute; left: 50%; top: 2px; width: 1px; height: calc(var(--spm-cue-l, 22px) + 4px);
  background: linear-gradient(rgba(244, 241, 236, .35), rgba(244, 241, 236, .95));
}
/* the words carry a soft shade of the slab's own dark face behind them, so they read wherever the face is lighter */
.spm-hint > span { padding: 2px 6px; border-radius: 10px; background: rgba(31, 26, 22, .42); box-shadow: 0 0 12px 8px rgba(31, 26, 22, .42); }
.spm-hint-t, .spm-hint-k { display: none; }
@media (hover: none) and (pointer: coarse) { .spm-hint-p { display: none; } .spm-hint-t { display: inline; } }
.spm-cue-on .spm-hint { visibility: visible; opacity: 1; transition: opacity .6s ease-out; }
.spm-hero:has(.spm-foam:focus-visible) .spm-hint :is(.spm-hint-p, .spm-hint-t) { display: none; }
.spm-hero:has(.spm-foam:focus-visible) .spm-hint .spm-hint-k { display: inline; }

/* a short landscape screen (1280 x 720, 1366 x 768): the kicker steps aside */
@media (min-width: 701px) and (max-height: 700px) { .spm-kicker { display: none; } }
/* a portrait tablet: the mitt, the soap and the right of the slab in the frame */
@media (min-width: 701px) and (max-aspect-ratio: 5/4) {
  .spm-root { --spm-slab-x: 78%; }
  .spm-hero { height: clamp(620px, 78svh, 980px); }
  .spm-hero-in { --spm-h1-b: 45%; }
  .spm-h1 { font-size: min(12.4vw, 7.5rem); }
}
@media (max-width: 700px) {
  .spm-root { --spm-slab-x: 30%; }
  .spm-hero { height: clamp(460px, 64svh, 580px); }
  .spm-hero-in { --spm-h1-b: 56%; }
  .spm-kicker { font-size: 1.0625rem; }
  .spm-h1 { font-size: clamp(2.5rem, 13.4vw, 3.6rem); }
}
@media (max-width: 700px) and (max-height: 640px) {
  .spm-kicker { display: none; }
  .spm-hero { height: 440px; }
}

/* ---------- heat in the type: each section eases in from the room before it ---------- */
.spm-root [data-from="hot"] { --spm-f-wdth: 118; --spm-f-wght: 640; --spm-f-trk: .012; }
.spm-root [data-from="warm"] { --spm-f-wdth: 96; --spm-f-wght: 440; --spm-f-trk: .004; }
.spm-root [data-from="cool"] { --spm-f-wdth: 75; --spm-f-wght: 190; --spm-f-trk: .002; }
.spm-root [data-room="hot"] { --spm-pace: 1400ms; --spm-ease: var(--spm-hot); }
.spm-root [data-room="warm"] { --spm-pace: 800ms; --spm-ease: ease-out; }
.spm-root [data-room="cool"] { --spm-pace: 450ms; --spm-ease: ease-out; }
.spm-l { display: block; }
@keyframes spm-heat { from { --spm-wdth: var(--spm-f-wdth); --spm-wght: var(--spm-f-wght); --spm-trk: var(--spm-f-trk); } }
@keyframes spm-dome { from { --spm-wdth: 96; --spm-wght: 440; --spm-trk: .004; } }
@keyframes spm-row { from { opacity: .72; translate: 0 22px; } }
@keyframes spm-draw { from { clip-path: inset(-12px 100% -12px 0); } to { clip-path: inset(-12px 0 -12px 0); } }
@keyframes spm-name { from { --spm-wght: 340; } }
@keyframes spm-sink { to { translate: 0 .16em; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* a heading takes its room's heat as it comes up into view, before anything below it is read */
    .spm-heat { animation: spm-heat linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .spm-dl { animation: spm-dome linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    .spm-rit { animation: spm-row linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    .spm-rit-name { animation: spm-name linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    /* each ritual's line is drawn through its rooms as it comes into view */
    .spm-line:not(.spm-glow) { animation: spm-draw linear both; animation-timeline: --spm-route; animation-range: entry 10% cover 42%; }
    .spm-route { view-timeline-name: --spm-route; }
    /* the words sink into the foam as the room is left behind */
    .spm-h1 { animation: spm-sink linear both; animation-timeline: --spm-hero; animation-range: exit 0% exit 55%; }
  }
}
/* where scroll timelines are missing, one observer eases each piece in at its room's pace */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .spm-js :is(.spm-heat, .spm-dl, .spm-rit-name) {
      transition: --spm-wdth var(--spm-pace) var(--spm-ease), --spm-wght var(--spm-pace) var(--spm-ease), --spm-trk var(--spm-pace) var(--spm-ease);
    }
    .spm-js .spm-heat:not(.spm-in) { --spm-wdth: var(--spm-f-wdth); --spm-wght: var(--spm-f-wght); --spm-trk: var(--spm-f-trk); }
    .spm-js .spm-dome:not(.spm-in) .spm-dl { --spm-wdth: 96; --spm-wght: 440; --spm-trk: .004; }
    .spm-js .spm-dl:nth-child(2) { transition-delay: 90ms; }
    .spm-js .spm-dl:nth-child(3) { transition-delay: 180ms; }
    .spm-js .spm-dl:nth-child(4) { transition-delay: 270ms; }
    .spm-js .spm-dl:nth-child(5) { transition-delay: 360ms; }
    .spm-js .spm-rit { transition: opacity var(--spm-pace) var(--spm-ease), translate var(--spm-pace) var(--spm-ease); }
    .spm-js .spm-rit:not(.spm-in) { opacity: .72; translate: 0 22px; }
    .spm-js .spm-rit:not(.spm-in) .spm-rit-name { --spm-wght: 340; }
  }
}

/* ---------- the rituals: laid on the pale marble of the slab, each ritual a thin copper line through the rooms ---------- */
.spm-rituals {
  position: relative; isolation: isolate; overflow: clip;
  background: #E2DFDA; color: var(--spm-ink);
}
/* the marble stays put behind the rituals while they pass over it, under a thin veil of foam white */
.spm-rit-bg { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; z-index: -1; overflow: hidden; pointer-events: none; }
.spm-rit-bg picture, .spm-rit-bg img { display: block; width: 100%; height: 100%; }
.spm-rit-bg img { object-fit: cover; object-position: 50% 40%; max-width: none; }
.spm-rit-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(244, 241, 236, .5), rgba(244, 241, 236, .3) 70%, rgba(244, 241, 236, .38)); }
.spm-rit-in { padding-block: 112px 128px; }
.spm-rit-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spm-gap); }
.spm-lead { grid-column: 1 / 9; margin-bottom: 120px; }
.spm-lead p { font-size: clamp(1.3125rem, .9vw + 1rem, 1.875rem); line-height: 1.42; font-weight: 400; max-width: 34ch; }
.spm-cta {
  display: inline-block; margin-top: 22px;
  font-family: var(--spm-display); font-size: 1.25rem; line-height: 1.2;
  font-weight: 560; font-stretch: 104%; font-variation-settings: "wdth" 104, "wght" 560;
  letter-spacing: .012em;
}
.spm-rit-h { grid-column: 1 / 9; font-size: clamp(2.375rem, 5vw, 5rem); margin-bottom: 30px; }
.spm-key { grid-column: 1 / 8; max-width: 50ch; font-size: clamp(1.0625rem, .3vw + .95rem, 1.1875rem); line-height: 1.55; font-weight: 420; margin-bottom: 72px; }
.spm-kw { font-size: 1.08em; line-height: 1; }
/* the hours, above the lines */
.spm-scale {
  grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 6px;
  font-family: var(--spm-display); font-size: .9375rem; line-height: 1;
  font-weight: 300; font-stretch: 84%; font-variation-settings: "wdth" 84, "wght" 300; letter-spacing: .02em;
}
.spm-hr { text-align: right; padding: 0 0 8px; border-right: 1px solid rgba(31, 26, 22, .4); padding-right: 8px; }
.spm-rit-list { grid-column: 1 / -1; }
.spm-rit {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spm-gap); align-items: start;
  padding-block: 38px 40px; border-top: 1px solid rgba(31, 26, 22, .22);
}
/* the hour lines run down through every ritual */
.spm-rit::before {
  content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none;
  left: calc(3 * (100% - 11 * var(--spm-gap)) / 12 + 3 * var(--spm-gap)); right: 0;
  background: linear-gradient(90deg, transparent calc(25% - 1px), rgba(31, 26, 22, .1) calc(25% - 1px) 25%, transparent 25%),
              linear-gradient(90deg, transparent calc(50% - 1px), rgba(31, 26, 22, .1) calc(50% - 1px) 50%, transparent 50%),
              linear-gradient(90deg, transparent calc(75% - 1px), rgba(31, 26, 22, .1) calc(75% - 1px) 75%, transparent 75%),
              linear-gradient(90deg, transparent calc(100% - 1px), rgba(31, 26, 22, .1) calc(100% - 1px));
}
.spm-rit-head { grid-column: 1 / 4; grid-row: 1 / 3; padding-right: 12px; }
.spm-rit-name { font-size: clamp(1.75rem, 2.7vw, 2.75rem); --spm-wght: 540; }
.spm-rit-time { margin-top: 12px; font-size: 1rem; line-height: 1.45; font-weight: 420; max-width: 26ch; }
.spm-route { grid-column: 4 / 13; grid-row: 1; position: relative; height: 188px; }
.spm-line { position: absolute; left: 0; top: 50px; width: 100%; height: 120px; overflow: visible; }
.spm-line path { fill: none; stroke: var(--spm-copper); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spm-line-a { stroke-width: 2; }
.spm-line-b { stroke-width: 4.5; stroke-linecap: round; }
.spm-glow { clip-path: inset(-12px 100% -12px 0); }
.spm-stops { position: absolute; inset: 0; }
.spm-stop {
  position: absolute; left: calc(var(--a) / 240 * 100%); top: calc(50px + var(--y) * 1.2px); transform: translateY(calc(-100% - 8px));
  font-size: clamp(1.125rem, .7vw + .8rem, 1.5rem); line-height: 1; white-space: nowrap; color: var(--spm-ink);
  padding-left: 10px;
}
/* the warm room's name under its step, clear of the rise into the hot room */
.spm-stop[data-rw="warm"] { transform: translateY(9px); padding-left: 2px; }
.spm-rit-body { grid-column: 4 / 11; grid-row: 2; margin-top: 18px; font-size: clamp(1.0625rem, .35vw + .95rem, 1.25rem); line-height: 1.5; font-weight: 440; }
.spm-rit-body p { max-width: 52ch; }
/* hovered, focused or chosen: the rooms warm one after another along the line */
@keyframes spm-flare { 35% { --spm-rw: 125; --spm-rg: 820; } }
/* a short bright stretch of the line runs from the warm room to the cool room */
@keyframes spm-heatline {
  0% { clip-path: inset(-12px 100% -12px 0); }
  25% { clip-path: inset(-12px 62% -12px 12%); }
  50% { clip-path: inset(-12px 38% -12px 36%); }
  75% { clip-path: inset(-12px 14% -12px 60%); }
  100% { clip-path: inset(-12px 0 -12px 100%); }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.spm-lit, .spm-rit:hover, .spm-rit:focus-within) .spm-stop { animation: spm-flare 1.2s var(--spm-hot) both; }
  :is(.spm-lit, .spm-rit:hover, .spm-rit:focus-within) .spm-glow { animation: spm-heatline 1.7s cubic-bezier(.45, 0, .55, 1) both; }
  .spm-stop:nth-child(2) { animation-delay: 110ms; }
  .spm-stop:nth-child(3) { animation-delay: 240ms; }
  .spm-stop:nth-child(4) { animation-delay: 420ms; }
  .spm-stop:nth-child(5) { animation-delay: 640ms; }
}
.spm-choose {
  margin-top: 16px; padding: 6px 0 3px; background: none; border: 0; border-bottom: 1px solid currentColor; color: inherit; cursor: pointer;
  font-family: var(--spm-display); font-size: 1.0625rem; font-weight: 540; font-stretch: 100%;
  font-variation-settings: "wdth" 100, "wght" 540; letter-spacing: .02em;
}
.spm-choose:hover { border-bottom-width: 2px; padding-bottom: 2px; }
/* the long afternoon: the whole of the scale, the hot room and the slab kept for the party */
.spm-rit-long { padding-block: 52px 56px; border-bottom: 1px solid rgba(31, 26, 22, .22); }
.spm-rit-long .spm-rit-name { font-size: clamp(2.125rem, 3.6vw, 3.625rem); --spm-wdth: 112; --spm-wght: 600; }
.spm-rit-long .spm-rit-body { font-size: clamp(1.125rem, .5vw + 1rem, 1.375rem); }
.spm-own {
  position: absolute; left: calc(15 / 240 * 100%); width: calc(60 / 240 * 100%); top: 0;
  border-top: 1.5px solid var(--spm-ink); padding-top: 5px;
  font-family: var(--spm-display); font-size: .9375rem; line-height: 1; text-align: center;
  font-weight: 420; font-stretch: 96%; font-variation-settings: "wdth" 96, "wght" 420;
}
.spm-own::before, .spm-own::after { content: ""; position: absolute; top: -1.5px; width: 1.5px; height: 8px; background: var(--spm-ink); }
.spm-own::before { left: 0; }
.spm-own::after { right: 0; }
.spm-rit-long .spm-route { height: 208px; }
.spm-rit-long .spm-line { top: 70px; }
.spm-rit-long .spm-stop { top: calc(70px + var(--y) * 1.2px); }
.spm-rit-note { grid-column: 4 / 12; margin-top: 56px; font-size: clamp(1.125rem, .4vw + 1rem, 1.3125rem); line-height: 1.45; font-weight: 440; max-width: 44ch; }

/* the rooms further down wait to be laid out until the first screen is ready (the script lets them go) */
.spm-root:not(.spm-laid) :is(.spm-visit, .spm-rooms, .spm-treat, .spm-days, .spm-cool, .spm-bring, .spm-book) { content-visibility: auto; contain-intrinsic-size: auto 1000px; }

/* ---------- the grounds: hot stone, then cooling a step at a time toward the cool room ---------- */
.spm-rooms { background: linear-gradient(var(--spm-linen), var(--spm-stone) min(64vh, 560px)); }
.spm-treat { background: linear-gradient(var(--spm-stone), var(--spm-plaster) var(--spm-seam)); }
.spm-days { background: linear-gradient(var(--spm-plaster), var(--spm-mist) min(40vh, 360px)); }
.spm-cool { background: linear-gradient(var(--spm-mist), var(--spm-lime) min(50vh, 440px)); }
.spm-bring { background: linear-gradient(var(--spm-lime), var(--spm-linen) min(40vh, 360px) calc(100% - 120px), var(--spm-plaster)); }
.spm-book { background: var(--spm-plaster); }
.spm-visit, .spm-rooms, .spm-treat, .spm-days, .spm-cool, .spm-bring, .spm-book { font-weight: var(--spm-body); }

/* ---------- the visit: one paragraph, its measure narrowing and its ground cooling as it goes ---------- */
.spm-visit {
  padding-block: 152px 176px;
  background: linear-gradient(var(--spm-stone) 0%, var(--spm-stone) 12%, var(--spm-plaster) 44%, var(--spm-mist) 66%, var(--spm-lime) 84%, var(--spm-linen) 100%);
}
.spm-visit-h { font-size: clamp(2.125rem, 4.4vw, 4.25rem); margin-bottom: 56px; }
.spm-visit-body { position: relative; display: flow-root; font-size: clamp(1.125rem, .45vw + .95rem, 1.3125rem); }
.spm-visit-p { font-size: inherit; line-height: 1.6; text-wrap: wrap; hyphens: manual; }
.spm-visit-p::first-letter {
  float: left; margin: .02em .1em 0 0;
  font-family: var(--spm-display); font-size: 4.3em; line-height: .8;
  font-weight: 640; font-stretch: 118%; font-variation-settings: "wdth" 118, "wght" 640;
}
@supports (initial-letter: 3) {
  .spm-visit-p::first-letter { float: none; initial-letter: 3; margin: 0 .12em 0 0; font-size: 1em; line-height: 1; }
}
/* each room named at its heat, set to sit on the line with the reading face */
.spm-rw { font-size: 1.12em; line-height: 1; letter-spacing: .005em; white-space: nowrap; }
/* the sentences cool as they go: Manuale from 480 down to 330 */
.spm-vs:nth-child(1) { font-weight: 480; }
.spm-vs:nth-child(2) { font-weight: 450; }
.spm-vs:nth-child(3) { font-weight: 420; }
.spm-vs:nth-child(4) { font-weight: 390; }
.spm-vs:nth-child(5) { font-weight: 360; }
.spm-vs:nth-child(6) { font-weight: 340; }
/* without the script: each sentence a step narrower */
.spm-vs { display: block; }
.spm-vs:nth-child(1) { max-width: 76ch; }
.spm-vs:nth-child(2) { max-width: 68ch; }
.spm-vs:nth-child(3) { max-width: 58ch; }
.spm-vs:nth-child(4) { max-width: 50ch; }
.spm-vs:nth-child(5) { max-width: 42ch; }
.spm-vs:nth-child(6) { max-width: 34ch; }
.spm-taper { display: none; }
.spm-tapered .spm-vs { display: inline; max-width: none; }
.spm-tapered .spm-taper {
  display: block; float: right; height: 0; width: calc(100% - 32ch); margin-left: 2.5ch;
  shape-outside: polygon(min(44ch, 100%) 0, 100% 0, 100% 100%, 0 100%);
}
.spm-mitt { width: min(34%, 460px); margin: 48px 0 0 auto; }
.spm-tapered .spm-mitt { position: absolute; right: 0; bottom: 0; margin: 0; }
.spm-root figcaption { margin-top: 12px; font-size: .9375rem; line-height: 1.45; font-weight: 460; color: var(--spm-ink-soft); max-width: 44ch; }

/* ---------- the hot room: the dome in type, the room itself, then the slab ---------- */
.spm-rooms { padding-top: 168px; }
.spm-dome-wrap { padding: 0 var(--spm-gut) 120px; }
.spm-dome { text-align: center; font-size: clamp(2.25rem, 5.6vw, 5.5rem); --spm-lh: .98; text-wrap: initial; }
.spm-dl {
  display: block; width: fit-content; margin-inline: auto; white-space: nowrap;
  font-weight: var(--spm-wght); font-stretch: calc(var(--spm-wdth) * 1%);
  font-variation-settings: "wdth" var(--spm-wdth), "wght" var(--spm-wght);
  letter-spacing: calc(var(--spm-trk) * 1em);
}
.spm-solving .spm-dl { animation: none !important; transition: none !important; }
.spm-dl:nth-child(1) { --spm-wdth: 80; --spm-wght: 330; --spm-trk: .004; }
.spm-dl:nth-child(2) { --spm-wdth: 90; --spm-wght: 420; --spm-trk: .006; }
.spm-dl:nth-child(3) { --spm-wdth: 102; --spm-wght: 520; --spm-trk: .008; }
.spm-dl:nth-child(4) { --spm-wdth: 114; --spm-wght: 690; --spm-trk: .011; }
.spm-dl:nth-child(5) { --spm-wdth: 125; --spm-wght: 800; --spm-trk: .014; }
.spm-plate { position: relative; overflow: hidden; background: #8f8983; touch-action: pan-y; }
.spm-plate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.spm-room-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* focus: a light frame inside the photograph, never a line along the page */
.spm-plate:focus-visible { outline: none; box-shadow: none; }
.spm-plate::after { inset: 14px; z-index: 2; opacity: 0; transition: opacity .3s ease-out; }
.spm-plate:focus-visible::after { opacity: .95; }
.spm-plate-hot { height: min(88vh, 900px); min-height: 420px; }
.spm-rooms-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spm-gap); padding-block: 64px 0; }
.spm-rooms-p { grid-column: 2 / 7; font-size: clamp(1.1875rem, .5vw + 1rem, 1.4375rem); line-height: 1.5; max-width: 40ch; }
.spm-slab-p {
  grid-column: 8 / 12; align-self: end;
  font-family: var(--spm-display); font-size: clamp(1.625rem, 2.4vw, 2.375rem); line-height: 1.06;
  font-weight: 620; font-stretch: 114%; font-variation-settings: "wdth" 114, "wght" 620; letter-spacing: .01em;
}
/* the slab again, smaller, with the foam from the top of the page on it as it is by now */
.spm-later {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spm-gap); align-items: end;
  max-width: calc(1440px + 2 * var(--spm-gut)); margin: 80px auto 0; padding: 0 var(--spm-gut) 136px;
}
.spm-later-strip {
  grid-column: 4 / 13; grid-row: 1;
  position: relative; overflow: hidden; background: #8f8983;
  aspect-ratio: 2.4 / 1; width: 100%;
  box-shadow: 0 30px 60px -40px rgba(31, 26, 22, .45);
}
.spm-later-strip picture, .spm-later-strip img { position: absolute; inset: 0; width: 100%; height: 100%; }
.spm-later-strip img { object-fit: cover; object-position: 50% 62%; }
.spm-later-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.spm-later-strip.spm-live picture { visibility: hidden; }
/* the slab behind it, placed as it is at the top of the page */
.spm-stage { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; visibility: hidden; pointer-events: none; }
.spm-live .spm-stage { visibility: visible; }
.spm-stage img { position: absolute; left: 0; max-width: none; object-fit: cover; object-position: var(--spm-slab-x) var(--spm-slab-y); }
.spm-root .spm-later-cap { grid-column: 1 / 4; grid-row: 1; max-width: none; margin: 0 0 4px; color: var(--spm-ink); }
.spm-age {
  display: block; margin-bottom: 14px;
  font-family: var(--spm-display); font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: 1.04;
  font-weight: 620; font-stretch: 112%; font-variation-settings: "wdth" 112, "wght" 620; letter-spacing: .008em;
}
.spm-later-a { display: block; font-size: 1rem; line-height: 1.5; color: var(--spm-ink-soft); max-width: 26ch; }

/* ---------- the treatment room ---------- */
.spm-treat { padding-block: 128px 104px; }
.spm-treat-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spm-gap); align-items: center; }
.spm-plate-treat { grid-column: 1 / 6; margin-left: calc(-1 * var(--spm-gut)); aspect-ratio: 1 / 1; }
.spm-plate-treat img { object-position: 50% 66%; }
.spm-treat-text { grid-column: 7 / 13; }
.spm-treat-h { font-size: clamp(2rem, 4vw, 3.875rem); margin-bottom: 48px; }
.spm-treat-list { max-width: 44ch; }
.spm-treat-item { margin-bottom: 32px; }
.spm-treat-item dt { font-size: 1.75rem; line-height: 1.1; margin-bottom: 8px; --spm-wdth: 100; --spm-wght: 520; }
.spm-treat-item dd { margin: 0; font-weight: var(--spm-body); }
.spm-treat-staff { max-width: 40ch; padding-top: 26px; border-top: 1px solid var(--spm-hair); }

/* ---------- the days, in type alone ---------- */
.spm-days { padding-block: 104px 120px; }
.spm-days-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spm-gap); }
.spm-days-h { grid-column: 1 / -1; font-size: clamp(2.125rem, 4.9vw, 5.75rem); line-height: 1; text-wrap: initial; }
.spm-dy { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 10.4fr); column-gap: var(--spm-gap); align-items: baseline; padding-block: .16em .2em; border-top: 1px solid var(--spm-hair); }
.spm-dy + .spm-dy { border-bottom: 1px solid var(--spm-hair); }
.spm-who { font-weight: 220; font-stretch: 75%; font-variation-settings: "wdth" 75, "wght" 220; letter-spacing: 0; font-size: .62em; }
.spm-when { font-weight: 680; font-stretch: 116%; font-variation-settings: "wdth" 116, "wght" 680; letter-spacing: .006em; text-wrap: balance; }
.spm-fri {
  grid-column: 3 / 9; margin-top: 22px;
  font-family: var(--spm-display); font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.2;
  font-weight: 280; font-stretch: 80%; font-variation-settings: "wdth" 80, "wght" 280; letter-spacing: .01em;
}
.spm-days-p { grid-column: 8 / 12; margin-top: 40px; max-width: 40ch; }

/* ---------- the cool room: the emptiest band, a narrow column of light type and the room kept small ---------- */
.spm-cool { padding-block: 200px 128px; }
.spm-cool-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spm-gap); row-gap: 40px; align-items: end; }
.spm-cool-h { grid-column: 1 / 5; grid-row: 1 / 3; align-self: start; font-size: clamp(3.25rem, 7.4vw, 7.25rem); --spm-wght: 170; text-wrap: initial; }
.spm-cl { display: block; }
.spm-plate-cool { grid-column: 7 / 12; grid-row: 1; aspect-ratio: 4 / 3; }
.spm-plate-cool img { object-position: 50% 58%; }
.spm-cool-p { grid-column: 7 / 11; grid-row: 2; max-width: 40ch; }

/* ---------- bring nothing, the questions answered in notes beside it ---------- */
.spm-bring { padding-block: 112px 176px; }
.spm-bring-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spm-gap); align-items: start; }
.spm-bring-h { grid-column: 1 / 7; font-size: clamp(2.75rem, 6vw, 5.5rem); margin-bottom: 36px; }
.spm-bring-p { grid-column: 1 / 6; grid-row: 2; max-width: 38ch; font-size: clamp(1.125rem, .4vw + 1rem, 1.3125rem); line-height: 1.55; }
.spm-notes { grid-column: 7 / 13; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 44px var(--spm-gap); padding-top: 12px; }
.spm-note:nth-child(2) { translate: 0 64px; }
.spm-note:nth-child(4) { translate: 0 64px; }
.spm-note dt { --spm-wdth: 84; --spm-wght: 330; --spm-lh: 1.08; font-size: 1.5rem; margin-bottom: 8px; }
.spm-note dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--spm-ink-soft); max-width: 28ch; }

/* ---------- book: out through the warm room ---------- */
.spm-book { padding-top: 152px; }
.spm-book-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spm-gap); padding-bottom: 160px; }
.spm-book-head { grid-column: 1 / 7; position: sticky; top: calc(var(--bar-h, 40px) + var(--spm-nav-h) + 48px); align-self: start; }
.spm-book-h { font-size: clamp(3rem, 7.4vw, 7.25rem); margin-bottom: 32px; }
.spm-book-head p { max-width: 30ch; font-size: clamp(1.125rem, .4vw + 1rem, 1.3125rem); }
.spm-form { grid-column: 8 / 13; max-width: 44ch; padding-top: 12px; }
.spm-field { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.spm-field > label, .spm-field > legend, .spm-label {
  display: block; margin-bottom: 6px; padding: 0;
  font-family: var(--spm-text); font-size: .9375rem; font-weight: 500; letter-spacing: 0; line-height: 1.4;
  font-variation-settings: normal; font-stretch: 100%;
}
.spm-form :is(input[type="text"], select, textarea) {
  width: 100%; min-height: 44px; font: inherit; font-size: 1rem; color: var(--spm-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--spm-ink); border-radius: 0; padding: 8px 0;
}
.spm-form select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--spm-ink) 50%) calc(100% - 10px) 55% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--spm-ink) 50%) calc(100% - 4px) 55% / 6px 6px no-repeat; padding-right: 28px; }
.spm-form textarea { resize: vertical; }
/* the week as the house keeps it: women's days, men's days, and Friday for the stone */
.spm-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 4px; border-top: 1px solid var(--spm-ink); border-bottom: 1px solid var(--spm-ink); }
.spm-wd {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 72px; padding: 10px 2px; cursor: pointer; text-align: center;
  transition: background-color .25s ease-out, color .25s ease-out;
}
.spm-wd + .spm-wd { border-left: 1px solid var(--spm-hair); }
.spm-wd input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spm-wd-n {
  font-family: var(--spm-display); font-size: 1.25rem; line-height: 1;
  font-weight: 560; font-stretch: 104%; font-variation-settings: "wdth" 104, "wght" 560;
}
.spm-wd-s { font-size: .8125rem; line-height: 1; font-weight: 460; color: var(--spm-ink-soft); }
.spm-wd-m .spm-wd-n { font-weight: 300; font-stretch: 80%; font-variation-settings: "wdth" 80, "wght" 300; }
.spm-wd:hover { background: rgba(31, 26, 22, .06); }
.spm-wd:has(input:checked) { background: var(--spm-ink); color: var(--spm-foam); }
.spm-wd:has(input:checked) .spm-wd-s { color: var(--spm-foam); }
.spm-wd:has(input:focus-visible) { outline: 2px solid var(--spm-ink); outline-offset: 2px; z-index: 1; }
.spm-wd-x { cursor: default; color: rgba(31, 26, 22, .5); background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(31, 26, 22, .07) 6px 7px); }
.spm-wd-x .spm-wd-s { color: rgba(31, 26, 22, .62); }
.spm-wd-x input { cursor: default; }
.spm-wk-say { margin-top: 10px; }
.spm-help { margin-top: 6px; font-size: .9375rem; line-height: 1.45; font-weight: 460; color: var(--spm-ink-soft); }
.spm-step { display: flex; align-items: center; gap: 14px; }
.spm-step-b { width: 44px; height: 44px; border: 1px solid var(--spm-ink); background: none; border-radius: 3px; font: inherit; font-size: 1.25rem; color: inherit; cursor: pointer; }
.spm-step-n { min-width: 2ch; text-align: center; font-size: 1.25rem; font-variant-numeric: lining-nums; }
.spm-send {
  margin-top: 8px; min-height: 52px; padding: 0 32px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--spm-ink); color: var(--spm-foam);
  font-family: var(--spm-display); font-size: 1.1875rem; font-weight: 560; font-stretch: 100%;
  font-variation-settings: "wdth" 100, "wght" 560; letter-spacing: .02em;
}
.spm-status { margin-top: 14px; min-height: 1.5em; font-size: .9375rem; font-weight: 500; }
.spm-foot { border-top: 1px solid var(--spm-hair); padding-block: 44px 60px; background: var(--spm-plaster); }
.spm-foot-in { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.spm-foot-name {
  display: flex; align-items: center; gap: 12px; margin-right: auto;
  font-family: var(--spm-display); font-variation-settings: "wdth" 84, "wght" 360; font-stretch: 84%; font-weight: 360; font-size: 1.5rem;
}
.spm-foot-name .spm-mark { width: 40px; height: 40px; }
.spm-foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--spm-display); font-variation-settings: "wdth" 84, "wght" 380; font-stretch: 84%; font-weight: 380; font-size: 1.1875rem; }
.spm-foot-links a { display: inline-block; padding-block: 8px; }
.spm-foot-days { flex-basis: 100%; font-size: .9375rem; color: var(--spm-ink-soft); font-weight: 460; }

/* ---------- 1024 to 1180 ---------- */
@media (max-width: 1180px) {
  .spm-lead { grid-column: 1 / 11; }
  .spm-rit-h { grid-column: 1 / 11; }
  .spm-key { grid-column: 1 / 10; }
  .spm-plate-hot { height: 78vh; }
  .spm-rooms-p { grid-column: 1 / 7; }
  .spm-slab-p { grid-column: 8 / 13; }
  .spm-plate-treat { grid-column: 1 / 7; }
  .spm-treat-text { grid-column: 8 / 13; }
  .spm-cool-h { grid-column: 1 / 6; }
  .spm-plate-cool { grid-column: 7 / 13; }
  .spm-cool-p { grid-column: 7 / 12; }
  .spm-bring-h { grid-column: 1 / 8; }
  .spm-days-p { grid-column: 7 / 12; }
}
/* ---------- tablets ---------- */
@media (max-width: 900px) {
  .spm-scale, .spm-route, .spm-rit-body { grid-column: 1 / -1; }
  .spm-rit::before { left: 0; }
  .spm-rit-head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 18px; }
  .spm-route { grid-row: 2; }
  .spm-rit-body { grid-row: 3; }
  .spm-rit-note { grid-column: 1 / -1; }
  .spm-rooms-p, .spm-slab-p { grid-column: 1 / -1; }
  .spm-slab-p { margin-top: 48px; max-width: 22ch; }
  .spm-later-strip { grid-column: 1 / -1; }
  .spm-root .spm-later-cap { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; }
  .spm-plate-treat { grid-column: 1 / -1; margin: 0 calc(-1 * var(--spm-gut)); aspect-ratio: 4 / 3; }
  .spm-treat-text { grid-column: 1 / -1; margin-top: 64px; }
  .spm-dy { grid-template-columns: minmax(0, 1fr); }
  .spm-fri, .spm-days-p { grid-column: 1 / -1; }
  .spm-cool-h { grid-column: 1 / 8; grid-row: 1; }
  .spm-plate-cool { grid-column: 3 / -1; grid-row: 2; margin-right: calc(-1 * var(--spm-gut)); }
  .spm-cool-p { grid-column: 1 / -1; grid-row: 3; }
  .spm-bring-h, .spm-bring-p, .spm-notes { grid-column: 1 / -1; }
  .spm-notes { grid-row: 3; margin-top: 56px; }
  .spm-book-head, .spm-form { grid-column: 1 / -1; }
  .spm-book-head { position: static; }
  .spm-form { margin-top: 48px; max-width: 48ch; }
}
/* ---------- phones ---------- */
@media (max-width: 700px) {
  .spm-rit-in { padding-block: 88px 96px; }
  .spm-lead { grid-column: 1 / -1; margin-bottom: 80px; }
  .spm-rit-h { grid-column: 1 / -1; }
  .spm-key { grid-column: 1 / -1; margin-bottom: 44px; }
  .spm-scale { font-size: .8125rem; }
  .spm-hr:nth-child(2), .spm-hr:nth-child(3) { color: transparent; }
  .spm-rit { padding-block: 30px 34px; }
  /* on a phone the line keeps its rise and fall, and the rooms are named in a row beneath it */
  .spm-route { height: auto; }
  .spm-line { position: relative; top: 0; height: 78px; display: block; }
  .spm-glow { position: absolute; top: 0; left: 0; }
  .spm-rit-long .spm-route { padding-top: 26px; }
  .spm-rit-long .spm-line { top: 0; }
  .spm-rit-long .spm-glow { top: 26px; }
  .spm-stops { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 14px; }
  .spm-stop, .spm-stop[data-rw="warm"], .spm-rit-long .spm-stop { position: static; transform: none; padding: 0; font-size: 1.0625rem; }
  .spm-stop + .spm-stop::before { content: ""; display: inline-block; width: 10px; height: 1px; margin-right: 10px; vertical-align: .3em; background: rgba(244, 241, 236, .6); }
  .spm-own { font-size: .8125rem; }
  .spm-visit, .spm-days { padding-block: 104px; }
  .spm-treat { padding-block: 80px 72px; }
  .spm-days { padding-top: 80px; }
  .spm-visit-h { margin-bottom: 40px; }
  .spm-tapered .spm-taper { width: 26%; margin-left: 12px; shape-outside: polygon(100% 0, 100% 0, 100% 100%, 0 100%); }
  .spm-mitt, .spm-tapered .spm-mitt { position: static; width: 72%; margin: 44px calc(-1 * var(--spm-gut)) 0 auto; }
  .spm-rooms { padding-top: 112px; }
  .spm-dome-wrap { padding-bottom: 64px; }
  .spm-plate-hot { height: 72svh; }
  .spm-rooms-in { padding-block: 40px 0; }
  .spm-later { margin-top: 44px; padding-bottom: 88px; }
  .spm-later-strip { margin-inline: calc(-1 * var(--spm-gut)); width: auto; aspect-ratio: 4 / 3; }
  .spm-plate-treat { aspect-ratio: 1 / 1; }
  .spm-dy { padding-block: .22em .26em; }
  .spm-who { font-size: .7em; }
  .spm-days-p { margin-top: 40px; }
  .spm-cool { padding-block: 128px 120px; }
  .spm-cool-h { grid-column: 1 / -1; }
  .spm-plate-cool { grid-column: 2 / -1; aspect-ratio: 5 / 4; }
  .spm-plate-cool img { object-position: 38% 50%; }
  .spm-bring { padding-block: 104px 88px; }
  .spm-notes { grid-template-columns: 1fr; gap: 32px; }
  .spm-note:nth-child(2), .spm-note:nth-child(4) { translate: none; }
  .spm-book { padding-top: 96px; }
  .spm-book-in { padding-bottom: 112px; }
  .spm-form { max-width: none; }
  .spm-form :is(input[type="text"], select, textarea) { font-size: 16px; }
  .spm-wd { min-height: 64px; }
  .spm-wd-n { font-size: 1.0625rem; }
  .spm-wd-s { font-size: .75rem; }
}
@media (max-width: 700px) and (max-height: 640px) { .spm-plate-hot { height: 64svh; } }
@media (prefers-reduced-motion: reduce) {
  .spm-poster, .spm-bag, .spm-hint, .spm-nav, .spm-wd { transition: none; }
}