@font-face {
  font-family: "Roboto Serif Rms";
  src: url("/assets/fonts/specimen/roboto-serif-wdth-var.woff2") format("woff2-variations"), url("/assets/fonts/specimen/roboto-serif-wdth-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Cond Rms";
  src: url("/assets/fonts/specimen/ibm-plex-sans-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Cond Rms";
  src: url("/assets/fonts/specimen/ibm-plex-sans-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rms Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
}
@property --rms-wd { syntax: "<number>"; inherits: true; initial-value: 100; }
@property --rms-wg { syntax: "<number>"; inherits: true; initial-value: 400; }
@property --rms-p { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --rms-bwd { syntax: "<number>"; inherits: true; initial-value: 100; }
@property --rms-bwg { syntax: "<number>"; inherits: true; initial-value: 400; }
@property --rms-fwd { syntax: "<number>"; inherits: true; initial-value: 110; }
@property --rms-near-px { syntax: "<length>"; inherits: true; initial-value: 40px; }
@property --rms-far-px { syntax: "<length>"; inherits: true; initial-value: 16px; }

body.spec-rimsong { margin: 0; background: #E6E1D5; }

.rms-page {
  --rms-linen: #F4EEE4;
  --rms-ground: #E6E1D5;
  --rms-ink: #19130C;
  --rms-verdigris: #0E6F7B;
  --rms-brass: #B8893A;
  --rms-g: clamp(16px, 4.4vw, 64px);
  --rms-nav-h: 56px;
  --rms-face: "Roboto Serif Rms", "Rms Fallback", Georgia, serif;
  --rms-gro: "Plex Cond Rms", "Arial Narrow", "Roboto Condensed", sans-serif;
  --rms-fs-body: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  --rms-fs-small: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  color: var(--rms-ink);
  background: var(--rms-ground);
  font-family: var(--rms-face);
  font-size: var(--rms-fs-body);
  line-height: 1.58;
  font-variant-numeric: lining-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
.rms-page *, .rms-page *::before, .rms-page *::after { box-sizing: border-box; }
.rms-page :where(h1, h2, h3, p, ul, blockquote, figure, fieldset) { margin: 0; }
.rms-page :where(h1, h2, h3) { font-weight: inherit; text-wrap: balance; }
.rms-page img { display: block; max-width: 100%; height: auto; }
.rms-page a { color: inherit; }
.rms-page :focus-visible { outline: 2px solid var(--rms-verdigris); outline-offset: 2px; box-shadow: 0 0 0 4px var(--rms-linen); }
.rms-page ::selection { background: var(--rms-verdigris); color: var(--rms-linen); }


/* ---------- nav ---------- */
.rms-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60;
  display: flex; align-items: center; gap: 24px;
  height: var(--rms-nav-h); padding: 0 var(--rms-g);
  background: var(--rms-ground);
  border-bottom: 1px solid rgba(25, 19, 12, 0.16);
  font-family: var(--rms-gro); font-weight: 600; font-size: 15px; line-height: 1;
}
.rms-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; font-family: var(--rms-face); font-weight: 400; font-size: 19px; font-variation-settings: "wdth" 88, "wght" 380; letter-spacing: -0.005em; white-space: nowrap; }
.rms-mark { width: 28px; height: 28px; flex: none; }
.rms-links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.rms-links a, .rms-go { text-decoration: none; padding: 8px 0; white-space: nowrap; }
.rms-links a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.rms-go { text-decoration: underline; text-decoration-color: var(--rms-verdigris); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 1040px) { .rms-links { gap: 18px; } .rms-nav { gap: 18px; } }
@media (max-width: 900px) { .rms-links li:nth-child(2) { display: none; } }
@media (max-width: 760px) { .rms-links { display: none; } }

/* ---------- hero: the bowl has the whole first screen; the heading is bent round its rim ---------- */
.rms-hero {
  position: relative;
  height: max(560px, calc(100svh - var(--bar-h, 40px) - var(--rms-nav-h)));
  background: #3a2716;
  /* where the rim should land in the plate, and how wide (read by the script) */
  --rms-rim-x: 0.5; --rms-rim-y: 0.35; --rms-rim-w: 0.42; --rms-rim-wh: 0.6;
  --rms-near-px: clamp(1.5rem, 0.5rem + 2.6vw, 3.25rem);
  --rms-far-px: clamp(0.875rem, 0.62rem + 0.55vw, 1.25rem);
}
.rms-plate { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#6b4526, #6b4526); }
.rms-plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(0deg, rgba(25, 19, 12, 0.86) 0%, rgba(25, 19, 12, 0.62) 16%, rgba(25, 19, 12, 0.18) 30%, rgba(25, 19, 12, 0) 40%),
    radial-gradient(120% 95% at 50% 46%, rgba(25, 19, 12, 0) 48%, rgba(25, 19, 12, 0.4) 100%),
    linear-gradient(180deg, rgba(25, 19, 12, 0.3) 0%, rgba(25, 19, 12, 0) 30%);
}
.rms-bowl { position: absolute; inset: 0; outline: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.rms-bowl:focus-visible { outline: none; box-shadow: none; }
.rms-stage, .rms-h1 { position: absolute; left: var(--rms-sx, 0px); top: var(--rms-sy, 0px); width: var(--rms-sw, 100%); height: var(--rms-sh, 100%); }
.rms-stage picture, .rms-stage img { width: 100%; height: 100%; }
.rms-stage img { object-fit: cover; object-position: 50% 50%; max-width: none; }
.rms-poster { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rms-ring-focus { display: none; }
.rms-bowl:focus-visible .rms-ring-focus { display: inline; }
.rms-water { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; }
.rms-live .rms-water { opacity: 1; }
.rms-live .rms-rings { display: none; }
.rms-hit { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; touch-action: none; }
.rms-puck {
  position: absolute; left: 0; top: 0; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--rms-verdigris); border: 2px solid var(--rms-linen); box-shadow: 0 1px 4px rgba(25, 19, 12, 0.45);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.rms-rubbing .rms-puck { opacity: 1; }
/* the invitation on the object: a ghost fingertip that rides the rim until the bowl is first touched */
.rms-ghost {
  position: absolute; left: 0; top: 0; z-index: 3; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(244, 238, 228, 0.55), rgba(244, 238, 228, 0.16) 62%, rgba(244, 238, 228, 0) 72%);
  box-shadow: inset 0 0 0 1.5px rgba(244, 238, 228, 0.7);
  opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.rms-hinting .rms-ghost { opacity: 1; }
.rms-h1 { margin: 0; pointer-events: none; z-index: 2; --rms-wd: 72; --rms-wg: 720; --rms-fwd: 110; }
.rms-arcs { display: block; width: 100%; height: 100%; overflow: visible; }
.rms-arc { font-size: var(--rms-arc-fs, 20px); }
/* a soft light band along the lip, under the words only, so the heading reads over the brightest brass */
.rms-band { fill: none; stroke: #F4EEE4; stroke-opacity: 0.55; stroke-linecap: round; stroke-width: 40px; stroke-dasharray: 0 99999; }
.rms-trail { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.45s; overflow: visible; }
.rms-trail.rms-on { opacity: 1; }
.rms-tg { fill: none; stroke: #F4EEE4; stroke-width: 9px; stroke-linecap: round; }
.rms-tl { fill: none; stroke: var(--rms-verdigris); stroke-width: 3px; stroke-linecap: round; }
.rms-arc-near {
  font-size: var(--rms-near-fs, 30px);
  color: var(--rms-ink); fill: currentColor; letter-spacing: -0.005em;
  font-variation-settings: "wdth" var(--rms-wd), "wght" var(--rms-wg);
}
.rms-arc-far {
  font-size: var(--rms-far-fs, 14px);
  color: var(--rms-linen); fill: currentColor; letter-spacing: 0.04em;
  font-variation-settings: "wdth" var(--rms-fwd), "wght" 520;
}

/* the deck sits on the photograph's floor: what the place is, the way in, then how to play the bowl */
.rms-deck {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lede cta" "play cta";
  align-items: end; gap: 10px clamp(24px, 4vw, 72px);
  padding: 0 var(--rms-g) clamp(22px, 3.6vh, 40px);
  color: var(--rms-linen); pointer-events: none;
}
.rms-deck > * { pointer-events: auto; }
.rms-lede {
  grid-area: lede;
  font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.4375rem);
  line-height: 1.34; max-width: 50ch;
  font-variation-settings: "wdth" 72, "wght" 560;
  text-wrap: pretty; text-shadow: 0 1px 12px rgba(25, 19, 12, 0.5);
}
.rms-deck .rms-cta { grid-area: cta; align-self: end; }
.rms-play { grid-area: play; display: flex; align-items: center; gap: 18px; }
.rms-hint { font-family: var(--rms-gro); font-weight: 600; font-size: var(--rms-fs-small); line-height: 1.35; opacity: 0.94; }
.rms-hint::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--rms-verdigris); box-shadow: 0 0 0 2px var(--rms-linen); vertical-align: 0; }
/* while the bowl sounds, the damper waits on the floor of the photograph, so nothing in the deck moves */
.rms-damp { position: absolute; left: var(--rms-g); bottom: calc(100% + 18px); display: flex; align-items: center; gap: 10px; flex: none; }
.rms-damp[hidden] { display: none; }
.rms-damp-l { color: var(--rms-linen); text-shadow: 0 1px 3px rgba(25, 19, 12, 0.8), 0 0 12px rgba(25, 19, 12, 0.5); font-family: var(--rms-gro); font-weight: 600; font-size: var(--rms-fs-small); white-space: nowrap; }
.rms-damper { width: 44px; height: 44px; padding: 4px; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; }
.rms-damper svg { width: 36px; height: 36px; display: block; }
.rms-damper:hover svg { transform: scale(1.04); }
.rms-cta {
  display: inline-flex; align-items: center; gap: 12px; justify-self: end;
  padding: 16px 24px 17px; background: var(--rms-verdigris); color: var(--rms-linen) !important;
  border: 1.5px solid var(--rms-linen); border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-family: var(--rms-gro); font-weight: 600; font-size: 1.125rem; line-height: 1;
}
.rms-cta:hover { background: #0b5a64; }
.rms-cta svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s; }
.rms-cta:hover svg { transform: translateX(3px); }
.rms-page .rms-deck :focus-visible { box-shadow: 0 0 0 4px #19130C; outline-color: var(--rms-linen); }

@media (max-width: 1180px) { .rms-hero { --rms-rim-w: 0.48; } }
@media (max-height: 760px) and (min-width: 761px) {
  .rms-hero { --rms-rim-y: 0.33; --rms-rim-wh: 0.58; }
  .rms-lede { font-size: 1.125rem; }
}
@media (max-width: 760px) {
  .rms-hero { height: max(420px, calc(100svh - var(--bar-h, 40px) - var(--rms-nav-h))); --rms-rim-x: 0.5; --rms-rim-y: 0.3; --rms-rim-w: 0.7; --rms-rim-wh: 0.5; --rms-near-px: 22px; --rms-far-px: 13px; }
  .rms-plate::after {
    background:
      linear-gradient(0deg, rgba(25, 19, 12, 0.9) 0%, rgba(25, 19, 12, 0.72) 26%, rgba(25, 19, 12, 0.2) 40%, rgba(25, 19, 12, 0) 48%),
      linear-gradient(180deg, rgba(25, 19, 12, 0.3) 0%, rgba(25, 19, 12, 0) 26%);
  }
  .rms-deck { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 16px 20px; }
  .rms-lede { font-size: 1.125rem; line-height: 1.36; }
  .rms-deck .rms-cta { align-self: flex-start; }
  .rms-play { margin-top: 2px; }
  .rms-damp { left: 16px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .rms-lede { font-size: 1rem; }
  .rms-deck { gap: 10px; padding-bottom: 14px; }
  .rms-cta { padding: 13px 20px 14px; }
  .rms-hero { --rms-near-px: 19px; --rms-far-px: 12px; }
}

/* ---------- the lower page: limestone between full-bleed room photographs ---------- */
.rms-sec { position: relative; padding: clamp(64px, 7vw, 128px) var(--rms-g); overflow-x: clip; }

/* the type holds the pose: every heading is one very large, light line; its width follows the posture of
   its section, scrubbing from the last pose to its own as it scrolls in. The weight stays light; the dense
   voice is the small grotesque beside it */
.rms-h {
  --rms-hwd-from: var(--rms-hwd); --rms-hwg-from: var(--rms-hwg);
  font-variation-settings: "wdth" calc(var(--rms-hwd-from) + (var(--rms-hwd) - var(--rms-hwd-from)) * var(--rms-p)), "wght" calc(var(--rms-hwg-from) + (var(--rms-hwg) - var(--rms-hwg-from)) * var(--rms-p));
  font-size: var(--rms-hfs, clamp(2.75rem, 0.9rem + 5.6vw, 7rem));
  line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance;
}
.rms-fit .rms-h { white-space: nowrap; text-wrap: nowrap; }
.rms-hk {
  display: block; margin-bottom: 0.06em;
  font-family: var(--rms-gro); font-weight: 700; font-variation-settings: normal; font-synthesis: none;
  font-size: var(--rms-hkfs, clamp(2.25rem, 1.1rem + 3.4vw, 4.75rem)); line-height: 0.92; letter-spacing: -0.018em;
}
.rms-hs { display: block; }
@keyframes rms-p { from { --rms-p: 0; } to { --rms-p: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rms-pose .rms-h { animation: rms-p linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
.rms-lg {
  font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-synthesis: none;
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem); line-height: 1.3; letter-spacing: 0.002em;
  max-width: 31ch; margin-top: clamp(16px, 1.8vw, 26px); text-wrap: pretty;
}
.rms-body { font-variation-settings: "wdth" var(--rms-bwd), "wght" var(--rms-bwg); text-align: start; text-wrap: pretty; }
.rms-js .rms-pose:not(.rms-posed) .rms-body { --rms-bwd: var(--rms-bwd-from); --rms-bwg: var(--rms-bwg-from); }
.rms-posed .rms-body { transition: --rms-bwd 650ms cubic-bezier(.3, 0, .2, 1), --rms-bwg 650ms cubic-bezier(.3, 0, .2, 1); }
.rms-posed.rms-snap .rms-body { transition: none; }
.rms-measure .rms-h { animation: none !important; }
.rms-measure .rms-body { transition: none !important; }
.rms-body p + p { margin-top: 1em; }
.rms-col { position: relative; display: flow-root; }
/* the spine: two unpainted floats whose shapes are the curve; the text only shows where it stops */
.rms-wl, .rms-wr { display: none; }
.rms-spine .rms-wl { display: block; float: left; }
.rms-spine .rms-wr { display: block; float: right; }
.rms-hy .rms-just { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* s2, standing: tall and narrow */
.rms-class { --rms-hwd: 56; --rms-hwg: 250; --rms-hwd-from: 100; --rms-hwg-from: 200; --rms-bwd: 72; --rms-bwg: 430; --rms-bwd-from: 88; --rms-bwg-from: 410; padding-top: clamp(56px, 7vw, 120px); }
.rms-class-in { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 30fr); gap: clamp(32px, 6vw, 120px); align-items: start; margin-top: clamp(40px, 5vw, 80px); }
.rms-class .rms-body { font-size: clamp(1.125rem, 0.98rem + 0.45vw, 1.3125rem); line-height: 1.55; }
.rms-plate-tall { margin-top: clamp(24px, 9vw, 150px); }
.rms-plate-tall img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

/* bands on the room's own photographs: the words and the classes are set on the picture */
.rms-pb { padding: 0; isolation: isolate; color: var(--rms-linen); }
.rms-ph { position: absolute; inset: 0; margin: 0; z-index: -1; overflow: hidden; background: #6b4526; }
.rms-ph picture, .rms-ph img { width: 100%; height: 100%; }
.rms-ph img { object-fit: cover; max-width: none; }
.rms-pb-in { position: relative; display: grid; padding: clamp(48px, 5.5vw, 96px) var(--rms-g) clamp(48px, 5vw, 88px); }
.rms-pb-head { color: var(--rms-ink); text-shadow: 0 0 20px rgba(244, 238, 228, 0.3); }
.rms-pb .rms-lg { text-wrap: pretty; }

/* s3, leaning: the classes on the mats laid out; each drawn as its own length of sound */
.rms-kinds { --rms-hwd: 84; --rms-hwg: 280; --rms-hwd-from: 56; --rms-hwg-from: 250; --rms-bwd: 86; --rms-bwg: 420; --rms-bwd-from: 72; --rms-bwg-from: 430; }
.rms-kinds .rms-ph img { object-position: 22% 50%; }
.rms-kinds .rms-pb-in { background-image: linear-gradient(270deg, rgba(25, 19, 12, 0.84) 0%, rgba(25, 19, 12, 0.72) 33%, rgba(25, 19, 12, 0.3) 50%, rgba(25, 19, 12, 0) 60%); }
.rms-kinds .rms-pb-in { min-height: clamp(760px, calc(100svh - var(--bar-h, 40px)), 1080px); grid-template-columns: minmax(0, 1fr) minmax(0, min(42%, 600px)); column-gap: clamp(32px, 5vw, 96px); align-items: start; }
.rms-kinds .rms-pb-head { grid-column: 1; max-width: 44rem; }
.rms-klead { max-width: 34ch; margin: 0 0 clamp(28px, 3.4vw, 48px); color: #E7C77A; }
.rms-klist { grid-column: 2; align-self: end; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.5; text-shadow: 0 1px 10px rgba(25, 19, 12, 0.45); }
.rms-k + .rms-k { margin-top: clamp(26px, 3vw, 44px); }
.rms-kind { font-size: clamp(1.625rem, 1rem + 1.4vw, 2.5rem); line-height: 1.02; letter-spacing: -0.01em; font-variation-settings: "wdth" var(--rms-kwd, 90), "wght" 330; }
.rms-k:nth-child(1) { --rms-kwd: 96; }
.rms-k:nth-child(2) { --rms-kwd: 70; }
.rms-k:nth-child(3) { --rms-kwd: 124; }
.rms-k:nth-child(4) { --rms-kwd: 62; }
.rms-min { display: inline-block; margin-left: 0.6em; vertical-align: 0.28em; font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: var(--rms-fs-small); letter-spacing: 0.01em; line-height: 1.2; color: #E7C77A; }
.rms-k p { max-width: 34em; }
.rms-tone { display: block; width: calc(var(--rms-len, 1) * 100%); max-width: 100%; height: 40px; margin: 6px 0 8px; overflow: visible; }
.rms-tone .rms-tp { fill: none; stroke: var(--rms-linen); stroke-opacity: 0.75; stroke-width: 1.4px; stroke-linejoin: round; }
.rms-tone .rms-tr { fill: none; stroke: #E7C77A; stroke-width: 1.6px; stroke-linejoin: round; }
.rms-tone .rms-te { fill: #E7C77A; fill-opacity: 0.16; stroke: none; }
.rms-inline { text-decoration-color: #E7C77A; text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }

/* s4, the forward fold: the room edge to edge, then its words, folded in under it */
.rms-room { --rms-hwd: 100; --rms-hwg: 260; --rms-hwd-from: 66; --rms-hwg-from: 300; --rms-bwd: 94; --rms-bwg: 410; --rms-bwd-from: 86; --rms-bwg-from: 420; padding-top: 0; }
.rms-bleed { margin: 0 calc(-1 * var(--rms-g)); }
.rms-bleed img { width: 100%; height: min(82vh, 56.25vw); min-height: 420px; object-fit: cover; object-position: 38% 60%; }
.rms-room-in { margin-top: clamp(36px, 4.5vw, 72px); }
.rms-room-t { display: grid; grid-template-columns: minmax(0, 28fr) minmax(0, 52fr); gap: clamp(28px, 5vw, 96px); margin: clamp(28px, 3.5vw, 56px) 0 0 clamp(0px, 14vw, 240px); align-items: start; }
.rms-room-t .rms-lg { margin-top: 0.3em; }
.rms-room .rms-body { font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.55; }

/* s5, upright again: what to wear, what to bring; the heading stands at the right */
.rms-door { --rms-hwd: 66; --rms-hwg: 300; --rms-hwd-from: 84; --rms-hwg-from: 280; --rms-bwd: 82; --rms-bwg: 430; --rms-bwd-from: 94; --rms-bwg-from: 410; }
.rms-door .rms-h { text-align: right; }
.rms-said { list-style: none; margin: clamp(40px, 5vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px) clamp(24px, 4vw, 64px); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.4; }
.rms-said strong { display: block; margin-bottom: 8px; font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: var(--rms-fs-body); line-height: 1.2; }

/* s6, the four weeks: one paragraph that spreads like a ring, each week reached by a wider ring, and set wider */
@property --rms-ww { syntax: "<number>"; inherits: true; initial-value: 60; }
@property --rms-wg { syntax: "<number>"; inherits: true; initial-value: 440; }
.rms-four { --rms-hwd: 118; --rms-hwg: 240; --rms-hwd-from: 66; --rms-hwg-from: 300; }
.rms-breath { position: relative; margin-top: clamp(40px, 5vw, 80px); padding-left: clamp(36px, 7vw, 132px); }
.rms-swell { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.rms-swell path { fill: none; stroke: var(--rms-ink); stroke-opacity: 0.22; stroke-width: 1.25px; }
.rms-swell path.rms-s0 { stroke: var(--rms-verdigris); stroke-opacity: 0.85; stroke-width: 1.6px; }
.rms-src { position: absolute; left: 0; top: 0.45em; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #E7C77A, #B8893A); box-shadow: 0 0 0 1.5px var(--rms-ink); font-size: clamp(1.375rem, 0.95rem + 1.5vw, 2.375rem); left: clamp(9px, 1vw, 16px); }
.rms-weeks { position: relative; z-index: 1; max-width: 29em; font-size: clamp(1.375rem, 0.95rem + 1.5vw, 2.375rem); line-height: 1.4; }
.rms-w { font-variation-settings: "wdth" var(--rms-ww), "wght" var(--rms-wg); }
.rms-w1 { --rms-ww: 58; --rms-wg: 450; }
.rms-w2 { --rms-ww: 76; --rms-wg: 410; }
.rms-w3 { --rms-ww: 100; --rms-wg: 360; }
.rms-w4 { --rms-ww: 142; --rms-wg: 270; line-height: 1.8; word-spacing: 0.06em; }
.rms-js .rms-four .rms-w { transition: --rms-ww 1.4s cubic-bezier(.3, 0, .2, 1), --rms-wg 1.4s cubic-bezier(.3, 0, .2, 1); }
.rms-js .rms-four .rms-w1:not(.rms-on) { --rms-ww: 50; --rms-wg: 500; }
.rms-js .rms-four .rms-w2:not(.rms-on) { --rms-ww: 58; --rms-wg: 450; }
.rms-js .rms-four .rms-w3:not(.rms-on) { --rms-ww: 76; --rms-wg: 410; }
.rms-js .rms-four .rms-w4:not(.rms-on) { --rms-ww: 100; --rms-wg: 360; }
.rms-wn { font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: 0.6em; letter-spacing: 0.01em; color: #0A5760; white-space: nowrap; }
.rms-plain { position: relative; z-index: 1; margin-top: clamp(32px, 4vw, 56px); max-width: 34em; font-size: var(--rms-fs-body); font-variation-settings: "wdth" 88, "wght" 430; }

/* s7, the week on the window light: every class drawn as the bowl's decay, placed at its hour */
.rms-times { --rms-hwd: 76; --rms-hwg: 280; --rms-hwd-from: 118; --rms-hwg-from: 240; }
.rms-times .rms-ph img { object-position: 8% 50%; }
.rms-times .rms-pb-in { background-image: linear-gradient(0deg, rgba(25, 19, 12, 0.84) 0%, rgba(25, 19, 12, 0.74) 50%, rgba(25, 19, 12, 0.42) 60%, rgba(25, 19, 12, 0) 71%); }
.rms-times .rms-pb-in { min-height: clamp(900px, calc(100svh - var(--bar-h, 40px) + 120px), 1180px); grid-template-rows: auto 1fr; row-gap: clamp(40px, 5vw, 80px); }
.rms-times .rms-pb-head { justify-self: end; width: min(100%, 36rem); }
.rms-times .rms-pb-head .rms-lg { max-width: 34ch; }
.rms-wkw { position: relative; align-self: end; --rms-dcol: clamp(120px, 12vw, 200px); --rms-gap: clamp(16px, 2vw, 36px); --rms-lh: clamp(72px, 6vw, 88px); font-variant-numeric: lining-nums tabular-nums; }
.rms-ax { position: absolute; top: 0; bottom: 0; left: calc(var(--rms-dcol) + var(--rms-gap)); right: 0; pointer-events: none; font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: 0.8125rem; line-height: 1; color: rgba(244, 238, 228, 0.78); }
.rms-half { position: absolute; top: 0; left: 0; color: #E7C77A; }
.rms-half-e { left: 53%; }
.rms-tk { position: absolute; top: 0; bottom: 0; left: calc(var(--rms-x) * 100%); padding: 22px 0 0 6px; white-space: nowrap; border-left: 1px dotted rgba(244, 238, 228, 0.26); }
.rms-wk { position: relative; list-style: none; margin: 0; padding: 46px 0 0; }
.rms-day { display: grid; grid-template-columns: var(--rms-dcol) minmax(0, 1fr); column-gap: var(--rms-gap); height: var(--rms-lh); }
.rms-dn { align-self: end; padding-bottom: 8px; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); line-height: 1; letter-spacing: -0.01em; font-variation-settings: "wdth" 76, "wght" 280; }
.rms-lane { position: relative; list-style: none; margin: 0; padding: 0; }
.rms-cl { position: absolute; top: 0; bottom: 0; left: calc(var(--rms-s) * 100%); width: calc((var(--rms-e) - var(--rms-s)) * 100%); }
.rms-cl-t { position: absolute; left: 0; top: 4px; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; line-height: 1.12; text-shadow: 0 1px 8px rgba(25, 19, 12, 0.6); }
.rms-end .rms-cl-t { left: auto; right: 0; text-align: right; align-items: flex-end; }
.rms-t { font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: 0.8125rem; color: #E7C77A; }
.rms-c { font-size: clamp(0.9375rem, 0.86rem + 0.3vw, 1.125rem); font-variation-settings: "wdth" 84, "wght" 440; }
.rms-dk { position: absolute; left: 0; bottom: 2px; width: 100%; height: 30px; overflow: visible; }
.rms-dk .rms-dl { fill: none; stroke: var(--rms-linen); stroke-width: 1.3px; stroke-linejoin: round; }
.rms-dk .rms-de { fill: #E7C77A; fill-opacity: 0.3; stroke: none; }
.rms-kd-rest .rms-de { fill-opacity: 0.42; }
@media (prefers-reduced-motion: no-preference) {
  .rms-js .rms-dk { transition: clip-path 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--rms-i, 0) * 70ms); }
  .rms-js .rms-wk:not(.rms-in) .rms-dk { clip-path: inset(0 100% 0 0); }
}

/* s8, the floor: everyone lies down; the widest, lightest voice on the page */
.rms-rest { --rms-hwd: 150; --rms-hwg: 200; --rms-hwd-from: 76; --rms-hwg-from: 280; --rms-bwd: 128; --rms-bwg: 350; --rms-bwd-from: 88; --rms-bwg-from: 430; padding-bottom: 0; }
.rms-letterbox { margin: clamp(56px, 6vw, 104px) calc(-1 * var(--rms-g)) 0; }
.rms-letterbox img { width: 100%; height: min(86vh, 56.25vw); min-height: 320px; object-fit: cover; object-position: 50% 64%; }
.rms-rest-in { position: relative; }
.rms-rest .rms-body { margin-top: clamp(24px, 3vw, 40px); margin-left: clamp(0px, 8vw, 160px); }
.rms-rest-p { font-variation-settings: "wdth" var(--rms-bwd), "wght" var(--rms-bwg); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); max-width: 56em; }
/* the rings: spread from the strike across the section, and gone once the note has died away */
.rms-waves { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; color: var(--rms-verdigris); }
.rms-waves path { fill: none; stroke: currentColor; stroke-width: 1.4px; }
.rms-rest .rms-h, .rms-rest .rms-body { position: relative; z-index: 1; }
.rms-strike-row { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.rms-strike { display: inline-flex; align-items: center; gap: 24px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.rms-strike-disc { width: 112px; height: 112px; border-radius: 50%; border: 1.5px solid var(--rms-ink); box-shadow: 0 0 0 10px var(--rms-ground), 0 0 0 11px rgba(25, 19, 12, 0.35); display: grid; place-items: center; flex: none; transition: transform 0.2s; }
.rms-strike:hover .rms-strike-disc { transform: scale(1.03); }
.rms-strike:active .rms-strike-disc { transform: scale(0.97); }
.rms-strike-disc svg { width: 70px; height: 70px; }
.rms-strike-l { font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.rms-hush {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 20px 12px 16px;
  font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: 1.0625rem; line-height: 1; color: var(--rms-ink); background: var(--rms-linen);
  border: 1.5px solid var(--rms-ink); border-radius: 999px; cursor: pointer;
}
.rms-hush[hidden] { display: none; }
.rms-hush:hover { background: #fffaf2; }
.rms-hush-i { width: 16px; height: 16px; border-radius: 3px; background: var(--rms-verdigris); flex: none; }

/* s9, sitting up: the way in */
.rms-ask { --rms-hwd: 64; --rms-hwg: 300; --rms-hwd-from: 150; --rms-hwg-from: 200; padding-bottom: clamp(40px, 5vw, 72px); }
.rms-ask .rms-hk { color: var(--rms-verdigris); }
.rms-ask-in { display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 62fr); gap: clamp(32px, 6vw, 120px); align-items: start; margin-top: clamp(32px, 4vw, 64px); }
.rms-ask-in .rms-lg { margin-top: 0; }
.rms-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 24px; font-variation-settings: "wdth" 90, "wght" 440; }
.rms-field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; min-width: 0; margin: 0; }
.rms-field label, .rms-field legend { font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: var(--rms-fs-small); }
.rms-field input:not([type="radio"]), .rms-field select, .rms-field textarea {
  font: inherit; font-size: 1.0625rem; color: inherit; background: var(--rms-linen); border: 1.5px solid rgba(25, 19, 12, 0.42); border-radius: 10px; padding: 13px 14px; width: 100%; min-height: 50px;
}
.rms-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--rms-ink) 50%), linear-gradient(135deg, var(--rms-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.rms-field textarea { resize: vertical; min-height: 7.5em; }
.rms-page .rms-ask :focus-visible { outline-color: var(--rms-ink); box-shadow: 0 0 0 4px var(--rms-linen); }
.rms-field:nth-child(3), .rms-when, .rms-wide, .rms-send { grid-column: 1 / -1; }
.rms-when { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.rms-when legend { width: 100%; margin-bottom: 8px; padding: 0; float: left; }
.rms-when label { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 16px; border-radius: 999px; background: var(--rms-linen); border: 1.5px solid rgba(25, 19, 12, 0.42); cursor: pointer; font-family: var(--rms-face); font-weight: 400; font-size: 1.0625rem; font-variation-settings: "wdth" 90, "wght" 440; }
.rms-when label:has(input:checked) { border-color: var(--rms-ink); box-shadow: inset 0 0 0 1.5px var(--rms-ink); }
.rms-when input { appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 1.5px solid var(--rms-ink); background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; }
.rms-when input::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--rms-verdigris); transform: scale(0); transition: transform 0.15s; }
.rms-when input:checked::before { transform: scale(1); }
.rms-fhint { font-size: var(--rms-fs-small); max-width: 52ch; }
.rms-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.rms-btn { font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: 1.125rem; background: var(--rms-ink); color: var(--rms-linen); border: 1.5px solid var(--rms-ink); border-radius: 999px; padding: 16px 30px; cursor: pointer; }
.rms-btn:hover { background: var(--rms-verdigris); border-color: var(--rms-verdigris); }
.rms-status { min-height: 1.6em; font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; }
.rms-foot { margin-top: clamp(64px, 8vw, 120px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: var(--rms-fs-small); }

/* the bowl follows you down the page while it is still sounding, and stops from here */
.rms-float {
  position: fixed; right: max(16px, var(--rms-g)); bottom: 20px; z-index: 50;
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 20px 6px 6px;
  font-family: var(--rms-gro); font-weight: 600; font-variation-settings: normal; font-size: 1rem; line-height: 1; color: var(--rms-ink); background: var(--rms-linen);
  border: 1.5px solid var(--rms-ink); border-radius: 999px; cursor: pointer; box-shadow: 0 6px 20px rgba(25, 19, 12, 0.22);
}
.rms-float[hidden] { display: none; }
.rms-float-d { position: relative; width: 40px; height: 40px; flex: none; }
.rms-float-d svg { position: relative; width: 40px; height: 40px; display: block; }
.rms-float-d::before, .rms-float-d::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--rms-verdigris);
  transform: scale(calc(1 + var(--rms-lv, 0) * 0.32)); opacity: calc(var(--rms-lv, 0) * 0.9);
}
.rms-float-d::after { transform: scale(calc(1 + var(--rms-lv, 0) * 0.62)); opacity: calc(var(--rms-lv, 0) * 0.45); }

@media (max-width: 1199px) and (min-width: 761px) {
  .rms-class-in { grid-template-columns: minmax(0, 58fr) minmax(0, 38fr); }
  .rms-room-t { margin-left: 0; grid-template-columns: minmax(0, 34fr) minmax(0, 60fr); }
  .rms-said { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rms-kinds .rms-pb-in { grid-template-columns: minmax(0, 1fr) minmax(0, 50%); }
  .rms-ask-in { grid-template-columns: minmax(0, 1fr); }
  .rms-ask-in .rms-lg { max-width: 44ch; }
}
@media (max-width: 760px) {
  .rms-sec { padding-top: 56px; padding-bottom: 56px; }
  .rms-pb { padding: 0; }
  .rms-pb-head { color: var(--rms-linen); text-shadow: 0 1px 12px rgba(25, 19, 12, 0.5); }
  .rms-pb-in { padding: 44px 16px 48px; }
  .rms-kinds .rms-pb-in { display: block; min-height: 0; }
  .rms-kinds .rms-ph img { object-position: 50% 50%; }
  .rms-kinds .rms-pb-in { background-image: linear-gradient(180deg, rgba(25, 19, 12, 0.5) 0%, rgba(25, 19, 12, 0.2) 22%, rgba(25, 19, 12, 0.62) 40%, rgba(25, 19, 12, 0.76) 100%); }
  .rms-klist { margin-top: 44vw; }
  .rms-times .rms-pb-in { min-height: 0; display: block; }
  .rms-times .rms-ph img { object-position: 36% 50%; }
  .rms-times .rms-pb-in { background-image: linear-gradient(180deg, rgba(25, 19, 12, 0.45) 0%, rgba(25, 19, 12, 0.3) 20%, rgba(25, 19, 12, 0.7) 40%, rgba(25, 19, 12, 0.8) 100%); }
  .rms-wkw { margin-top: 40px; --rms-dcol: 0px; --rms-gap: 0px; --rms-lh: 84px; }
  .rms-ax { top: 0; }
  .rms-wk { padding-top: 40px; }
  .rms-day { display: block; height: auto; margin-top: 14px; }
  .rms-dn { padding: 0 0 4px; font-size: 1.375rem; }
  .rms-lane { height: 84px; }
  .rms-cl-t { white-space: normal; width: max-content; max-width: 6.6em; }
  .rms-c { font-size: 0.875rem; }
  .rms-tight .rms-cl-t { max-width: 3.4em; }
  .rms-t { font-size: 0.75rem; }
  .rms-dk { height: 24px; }
  .rms-tk { padding-left: 3px; font-size: 0.6875rem; }
  .rms-h { font-size: var(--rms-hfs, clamp(2.5rem, 1rem + 7vw, 3.25rem)); line-height: 1.04; }
  .rms-class { padding-top: 48px; }
  .rms-class-in { display: block; margin-top: 28px; }
  .rms-plate-tall { margin: 40px calc(-1 * var(--rms-g)) 0; }
  .rms-plate-tall img { aspect-ratio: 3 / 4; }
  .rms-door .rms-h { text-align: left; }
  .rms-bleed img { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .rms-room-t { display: block; margin: 20px 0 0; }
  .rms-room-t .rms-lg { margin-bottom: 24px; }
  .rms-said { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 36px; }
  .rms-breath { padding-left: 30px; margin-top: 36px; }
  .rms-src { left: 8px; }
  .rms-weeks { font-size: 1.3125rem; line-height: 1.42; }
  .rms-w4 { line-height: 1.7; word-spacing: 0.03em; }
  .rms-rest .rms-body { margin-left: 0; }
  .rms-letterbox img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .rms-strike-disc { width: 92px; height: 92px; }
  .rms-strike-disc svg { width: 56px; height: 56px; }
  .rms-ask-in { display: block; margin-top: 20px; }
  .rms-ask-in .rms-lg { margin-bottom: 32px; }
  .rms-form { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rms-when { gap: 12px; }
  .rms-when label { flex: 1 1 auto; justify-content: flex-start; min-height: 56px; }
  .rms-field input, .rms-field select, .rms-field textarea { scroll-margin-bottom: 40vh; }
  .rms-btn { width: 100%; }
  .rms-float { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rms-page *, .rms-page *::before, .rms-page *::after { transition: none !important; animation: none !important; }
}