/* Theme additions on top of the kit. Colours, radius, shadows and fonts come from the kit tokens (var(--...)). */

/* The ritual portholes are buttons, so their photo frame is a span (valid HTML); it keeps the block layout of a figure. */
.stw-port-photo { display: block; }

/* ---------- Radius system: three values across the whole theme ----------
   controls (buttons, fields)  = --shape-control (6px in this kit)
   cards, photos, panels       = --shape-card (12px)
   round things (portholes, avatars, icon buttons) = 50%, instead of the kit's min(control, 50%) */
:root, [data-kit] { --shape-round: 50%; }

/* ---------- Text animations (Smoke In for h1, Letter Rise for h2), letters split by js/theme.js ----------
   Timing per letter: duration = --ta-dur / --ta-speed, delay = --i x --ta-step / --ta-speed. */
.ta { --ta-speed: 1; --ta-dur: 1120ms; --ta-step: 64ms; }
.ta .ow { display: inline-block; white-space: nowrap; }
.ta .oc { display: inline-block; backface-visibility: hidden; }
.ta:not(.is-playing) .oc { opacity: 0; }
.ta.is-playing .oc {
  animation-duration: calc(var(--ta-dur) / var(--ta-speed));
  animation-delay: calc(var(--i, 0) * var(--ta-step) / var(--ta-speed));
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
.ta[data-ta="smoke"] { --ta-dur: 1920ms; --ta-step: 99ms; }
.ta[data-ta="smoke"].is-playing .oc { animation-name: ta-smoke; animation-timing-function: cubic-bezier(.2, .6, .2, 1); }
@keyframes ta-smoke { from { opacity: 0; filter: blur(.22em); transform: translateY(.5em) scale(1.12) rotate(calc((var(--r, .5) - .5) * 14deg)); } }
.ta[data-ta="rise"] { --ta-dur: 1216ms; --ta-step: 72ms; }
.ta[data-ta="rise"].is-playing .oc { animation-name: ta-rise; }
@keyframes ta-rise { from { opacity: 0; transform: translateY(.55em); } }
/* the kit's line reveal steps aside for headlines that animate by letter */
.layout.rv-on [data-rv="lines"]:not(.is-in) .ta .rv-ln > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ta .oc, .ta:not(.is-playing) .oc { animation: none; opacity: 1; }
}

/* ---------- Page head under the floating header ----------
   The minimal header floats over the page (height 0, sticky). On phones the page head's own top padding (28px)
   put the breadcrumbs under the logo. Clear the header on every width. */
.block-nav-min + .block-page-head { padding-top: 104px; }

/* ---------- Home hero: the photo unrolls from the right, the title comes in from the left ----------
   Pure CSS on load; js/theme.js only splits the lead into words. Text sits in the page colour on the photo. */
.hero-unroll .stw-hero-photo { animation: hero-unroll 2.4s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes hero-unroll { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.hero-unroll .stw-hero-photo img { animation: hero-settle 3.84s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes hero-settle { from { transform: scale(1.08) translateX(2%); } to { transform: none; } }
.hero-unroll .stw-eyebrow, .hero-unroll .stw-title, .hero-unroll .stw-lead, .hero-unroll .stw-actions { color: var(--page-bg); }
.hero-unroll .stw-title { animation: hero-title 1.92s cubic-bezier(.2, .8, .2, 1) .56s both; }
@keyframes hero-title { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
.hero-unroll .stw-eyebrow { animation: hero-fade 1.6s ease 1.44s both; }
.hero-unroll .stw-actions { animation: hero-rise 1.6s cubic-bezier(.2, .8, .2, 1) 2.72s both; }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* lead: word by word, split by js/theme.js (data-ta="words") */
.ta[data-ta="words"] { --ta-dur: 832ms; --ta-step: 88ms; }
.ta[data-ta="words"] .ow { display: inline-block; }
.ta[data-ta="words"]:not(.is-playing) .ow { opacity: 0; }
.ta[data-ta="words"].is-playing .ow { animation: ta-rise calc(var(--ta-dur) / var(--ta-speed)) cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * var(--ta-step) / var(--ta-speed) + 1.6s) both; }
/* the hero fills the screen, whatever its height */
.hero-unroll .stw-hero-inner { min-height: var(--screen-h, 100svh); }
/* the floating header sits in the page colour: invisible on the page, revealed as the photo unrolls under it.
   Once the hero is scrolled past (js/theme.js adds .is-past-hero) it goes back to the kit's auto-contrast. */
.layout:has(.hero-cover):not(.is-past-hero) .block-nav-min { color: var(--page-bg); mix-blend-mode: normal; }
.layout:has(.hero-cover) .block-nav-min { transition: color .64s ease; }
@media (prefers-reduced-motion: reduce) {
  .hero-unroll .stw-hero-photo, .hero-unroll .stw-hero-photo img, .hero-unroll .stw-title, .hero-unroll .stw-eyebrow, .hero-unroll .stw-actions,
  .ta[data-ta="words"] .ow { animation: none; opacity: 1; transform: none; clip-path: none; }
}

/* ---------- The house page, two drafts (house-a: continues the home hero; house-b: editorial) ---------- */
/* shared: a thin line of facts */
.hs-factline { padding-block: 0; }
.hs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent); }
.hs-facts div { min-width: 0; }
.hs-facts dt { font-size: 12px; letter-spacing: var(--tracking-caps, .12em); text-transform: uppercase; opacity: .6; }
.hs-facts dd { margin: 4px 0 0; font-family: var(--font-display); font-size: var(--text-lg, 20px); }
@media (max-width: 720px) { .hs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A: the lake across the top, lower than the home hero */
.hs-hero { position: relative; isolation: isolate; overflow: clip; color: var(--page-bg); }
.hs-hero-photo { position: absolute; inset: 0; border-radius: 0; z-index: -1; }
.hs-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hs-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .45)); }
.hs-hero-inner { display: grid; align-content: end; gap: 12px; min-height: clamp(420px, 62svh, 720px); padding: 96px clamp(16px, 3cqw, 40px) clamp(28px, 4cqw, 56px); }
.hs-hero .crumbs, .hs-hero .crumbs a { color: inherit; }
.hs-hero-title { margin: 0; font-family: var(--font-display); font-size: clamp(40px, 7cqw, 96px); line-height: .95; letter-spacing: var(--tracking-display); text-wrap: balance; }
.hs-lead { max-width: 60ch; font-size: var(--text-md); line-height: 1.6; margin: 0 0 28px; }
.hs-room-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5cqw, 20px); }
.hs-room { margin: 0; aspect-ratio: 3 / 4; }
.hs-room img { width: 100%; height: 100%; object-fit: cover; }
.hs-room figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; color: var(--page-bg); font-size: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)); }
.hs-room figcaption b { font-family: var(--font-display); margin-right: 8px; }
@media (max-width: 720px) { .hs-room-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hs-prose-inner { max-width: 62ch; }
.hs-prose h2 { font-family: var(--font-display); font-size: var(--text-xl, 28px); margin: 36px 0 10px; }
.hs-prose p { line-height: 1.7; margin: 0 0 14px; }
.hs-quote, .hs-statement { font-family: var(--font-display); font-size: clamp(22px, 2.6cqw, 34px); line-height: 1.25; margin: 40px 0; }
.hs-quote { padding-left: 20px; border-left: 2px solid var(--color-accent, currentColor); }

/* B: editorial, no big photo at the top */
.hs-edhead { padding-top: 96px; }
.hs-ed-title { margin: 20px 0 20px; font-family: var(--font-display); font-size: clamp(52px, 11cqw, 150px); line-height: .9; letter-spacing: var(--tracking-display); text-wrap: balance; }
.hs-ed-lead { max-width: 56ch; font-size: var(--text-lg, 20px); line-height: 1.55; margin: 0; }
.hs-band { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 4cqw, 64px); align-items: center; padding: clamp(28px, 4cqw, 56px) 0; }
.hs-band.is-flip .hs-band-photo { order: 2; }
.hs-band-photo { margin: 0; aspect-ratio: 4 / 5; }
.hs-band-photo img { width: 100%; height: 100%; object-fit: cover; }
.hs-band-text { max-width: 52ch; }
.hs-no { display: block; font-family: var(--font-display); font-size: 14px; letter-spacing: .1em; opacity: .55; margin-bottom: 8px; }
.hs-band h2 { font-family: var(--font-display); font-size: clamp(26px, 3.2cqw, 42px); margin: 0 0 12px; }
.hs-band p { line-height: 1.7; margin: 0; }
.hs-statement { text-align: center; max-width: 24ch; margin: clamp(32px, 5cqw, 72px) auto; }
.hs-factline--end { padding-block: 24px 48px; }
@media (max-width: 720px) { .hs-band { grid-template-columns: 1fr; } .hs-band.is-flip .hs-band-photo { order: 0; } .hs-band-photo { aspect-ratio: 4 / 3; } }

/* ---------- The house page: motion ----------
   On load the lake settles and the title rises. Everything below waits for the scroll (the kit's data-rv="up"),
   then the facts line draws in from the left and the four photos rise one after another. */
.hs-hero-photo img { animation: hs-settle 3.84s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes hs-settle { from { transform: scale(1.08); } to { transform: none; } }
.hs-hero .crumbs { animation: hero-fade 1.6s ease .96s both; }
.hs-hero-title { animation: hero-rise 1.76s cubic-bezier(.2, .8, .2, 1) .4s both; }
.hs-facts { position: relative; border-top-color: transparent; border-bottom-color: transparent; }
.hs-facts::before, .hs-facts::after { content: ""; position: absolute; left: 0; height: 1px; width: 0; background: color-mix(in srgb, var(--color-ink) 18%, transparent); transition: width 1.76s cubic-bezier(.2, .8, .2, 1); }
.hs-facts::before { top: -1px; } .hs-facts::after { bottom: -1px; transition-delay: .24s; }
.hs-factline.is-in .hs-facts::before, .hs-factline.is-in .hs-facts::after { width: 100%; }
.hs-facts div { opacity: 0; transform: translateY(10px); transition: opacity 1.12s ease, transform 1.12s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.48s + var(--k, 0) * 192ms); }
.hs-factline.is-in .hs-facts div { opacity: 1; transform: none; }
.hs-room { opacity: 0; transform: translateY(28px); transition: opacity 1.28s ease, transform 1.44s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.32s + var(--k, 0) * 208ms); }
.hs-rooms.is-in .hs-room { opacity: 1; transform: none; }
.hs-rooms .photo-plate { opacity: 0; transform: translateY(28px); transition: opacity 1.28s ease, transform 1.44s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.32s + var(--k, 0) * 208ms); }
.hs-rooms.is-in .photo-plate { opacity: 1; transform: none; }
.hs-room img { transition: transform 1.44s cubic-bezier(.2, .8, .2, 1); }
.hs-room:hover img, .hs-room:focus-within img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .hs-hero-photo img, .hs-hero .crumbs, .hs-hero-title { animation: none; }
  .hs-facts div, .hs-room, .hs-rooms .photo-plate { opacity: 1; transform: none; transition: none; }
  .hs-facts::before, .hs-facts::after { width: 100%; transition: none; }
  .hs-room:hover img { transform: none; }
}

/* ---------- Header: a size that holds its own over a full-screen photo ---------- */
.block-nav-min .word-mark { font-size: clamp(24px, 1.6cqw, 30px); }
.block-nav-min nav { font-size: var(--text-md, 17px); gap: clamp(20px, 3cqw, 48px); }
.block-nav-min .block-inner { min-height: 84px; }

/* ---------- The house page: room to breathe between the hero, the facts, the sentence and the photos ---------- */
.hs-factline { padding-block: clamp(36px, 5cqw, 72px) 0; }
.hs-facts { padding: 24px 0; }
.hs-rooms > .block-inner { padding-top: clamp(40px, 6cqw, 88px); }
.hs-lead { max-width: 52ch; font-size: var(--text-lg, 20px); line-height: 1.5; margin: 0 0 clamp(36px, 5cqw, 64px); }
.hs-prose > .block-inner { padding-top: clamp(40px, 6cqw, 80px); }

/* the kit's ".block :is(h1,h2,h3,h4,p) { margin: 0 }" outranks a single class, so these carry the block class too */
.block .hs-lead { max-width: 52ch; font-size: clamp(18px, 1.3cqw, 22px); line-height: 1.5; margin: 0 0 clamp(40px, 6cqw, 80px); }
.block .hs-prose h2 { margin: 36px 0 10px; }
.block .hs-prose p { margin: 0 0 14px; }
.block .hs-band h2 { margin: 0 0 12px; }

/* ---------- The house hero fills the screen: only the lake and the title. What follows is its own section. ---------- */
.hs-hero-inner { min-height: var(--screen-h, 100svh); padding-bottom: clamp(72px, 10svh, 120px); }

/* ---------- Scroll sign at the foot of a full-screen hero: a word and a line with a drop running down it ---------- */
.hero-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; gap: 8px;
  color: var(--page-bg); text-decoration: none; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; animation: hero-fade 1.6s ease 3.2s both; }
.hero-scroll:hover, .hero-scroll:focus-visible { opacity: 1; }
.hero-scroll i { display: block; width: 1px; height: 44px; background: color-mix(in srgb, currentColor 35%, transparent); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: currentColor; animation: hero-scroll-drop 2.88s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes hero-scroll-drop { to { top: 100%; } }
@media (max-width: 720px) { .hero-scroll { left: auto; right: 16px; transform: none; bottom: 16px; } .hero-scroll span { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll, .hero-scroll i::after { animation: none; } }

/* ---------- The house: a wide photo between the four rooms and the text ---------- */
.hs-wide > .block-inner { padding-top: clamp(40px, 6cqw, 88px); padding-bottom: 0; }
.hs-wide-photo { margin: 0; aspect-ratio: 21 / 9; }
.hs-wide-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.92s cubic-bezier(.2, .8, .2, 1); }
.hs-wide-photo:hover img { transform: scale(1.02); }
@media (max-width: 720px) { .hs-wide-photo { aspect-ratio: 4 / 3; } }

/* rituals are not T-shirts: no colour swatches on the cards (also covers the script-drawn version) */
.prod-swatches { display: none; }

/* ---------- The "+" buttons on the cards: raised at rest, lifted and turning on hover, sunken while pressed ----------
   (the kit draws .glass--secondary sunken at rest; these rules are scoped to the layer family to outrank it) */
[data-family="layer"] .btn-icon.glass--secondary { transition: transform .56s cubic-bezier(.2, .8, .2, 1); }
[data-family="layer"] .btn-icon.glass--secondary::after { background: var(--layer-face), var(--layer-2); box-shadow: var(--layer-highlight), var(--layer-shadow); transition: box-shadow .56s ease, background .56s ease; }
[data-family="layer"] .btn-icon.glass--secondary .glass-label { transition: transform .72s cubic-bezier(.2, .8, .2, 1); }
[data-family="layer"] .btn-icon.glass--secondary:is(:hover, .is-hover):not(:disabled, .is-disabled, :active, .is-active) { transform: translateY(-2px); }
[data-family="layer"] .btn-icon.glass--secondary:is(:hover, .is-hover):not(:disabled, .is-disabled, :active, .is-active)::after { box-shadow: var(--layer-highlight), var(--layer-shadow-lg), 0 0 0 3px color-mix(in srgb, var(--color-ink) 10%, transparent); }
[data-family="layer"] .btn-icon.glass--secondary:is(:hover, .is-hover, :focus-visible) .glass-label { transform: rotate(90deg); }
[data-family="layer"] .btn-icon.glass--secondary:is(:active, .is-active):not(:disabled, .is-disabled) { transform: translateY(1px); }
[data-family="layer"] .btn-icon.glass--secondary:is(:active, .is-active):not(:disabled, .is-disabled)::after { background: var(--layer-sunken); box-shadow: var(--layer-sunken-shadow); }
@media (prefers-reduced-motion: reduce) {
  [data-family="layer"] .btn-icon.glass--secondary, [data-family="layer"] .btn-icon.glass--secondary::after, [data-family="layer"] .btn-icon.glass--secondary .glass-label { transition: none; }
}

/* ---------- Short pages: the footer sits at the foot of the screen, never with blank page under it ---------- */
.layout { min-height: var(--screen-h, 100svh); }
.layout > footer { margin-top: auto; }

/* ---------- The menu button (phone) behaves like the card buttons: raised, lifted on hover, sunken when pressed ---------- */
.block-nav-min .btn-icon.glass--primary { transition: transform .56s cubic-bezier(.2, .8, .2, 1); }
.block-nav-min .btn-icon.glass--primary::after { transition: box-shadow .56s ease, filter .56s ease; }
.block-nav-min .btn-icon.glass--primary > svg { transition: transform .56s cubic-bezier(.2, .8, .2, 1); }
.block-nav-min .btn-icon.glass--primary:is(:hover, .is-hover):not(:disabled, :active, .is-active) { transform: translateY(-2px); }
.block-nav-min .btn-icon.glass--primary:is(:hover, .is-hover):not(:disabled, :active, .is-active)::after { box-shadow: var(--layer-accent-shadow), 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.block-nav-min .btn-icon.glass--primary:is(:hover, .is-hover, :focus-visible) > svg { transform: scale(1.12); }
.block-nav-min .btn-icon.glass--primary:is(:active, .is-active):not(:disabled) { transform: translateY(1px); }
.block-nav-min .btn-icon.glass--primary:is(:active, .is-active):not(:disabled)::after { filter: brightness(.85); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) {
  .block-nav-min .btn-icon.glass--primary, .block-nav-min .btn-icon.glass--primary::after, .block-nav-min .btn-icon.glass--primary > svg { transition: none; }
}

/* ---------- Breadcrumbs on a hero: the current page in the hero colour, a little quieter ---------- */
.hs-hero .crumbs [aria-current], .hs-hero .crumbs span { color: inherit; opacity: .75; }

/* ---------- Header on pages without a full-screen hero: plain ink on the page, no blend trick ---------- */
.layout:not(:has(.hero-cover)) .block-nav-min, .layout.is-past-hero .block-nav-min { mix-blend-mode: normal; color: var(--color-ink); }

/* ---------- The menu button: an ink disc with the glyph in the page colour, raised; on a hero it inverts ---------- */
.layout > .block-nav-min .nav-min-menu .glass { color: var(--page-bg); }
.layout > .block-nav-min .nav-min-menu .glass::after { background: var(--color-ink); box-shadow: var(--layer-shadow); border: 0; }
.layout:has(.hero-cover):not(.is-past-hero) > .block-nav-min .nav-min-menu .glass { color: var(--color-ink); }
.layout:has(.hero-cover):not(.is-past-hero) > .block-nav-min .nav-min-menu .glass::after { background: var(--page-bg); }
.layout > .block-nav-min .nav-min-menu .glass:is(:hover, .is-hover):not(:active, .is-active)::after { box-shadow: var(--layer-shadow-lg), 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.layout > .block-nav-min .nav-min-menu .glass:is(:active, .is-active)::after { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); filter: brightness(.85); }

/* ---------- Full-screen heroes on wider screens: the home words a little below the middle, The house lower still ---------- */
@media (min-width: 721px) {
  .hero-unroll .stw-hero-inner { padding-bottom: 13svh; }
  .hs-hero-inner { padding-bottom: 26svh; }
}

/* ---------- Full-screen heroes on phones: the words sit higher, the scroll sign has the foot to itself ---------- */
@media (max-width: 720px) {
  .hero-unroll .stw-hero-inner, .hs-hero-inner { padding-bottom: 104px; }
  .hero-scroll { left: 50%; right: auto; transform: translateX(-50%); bottom: 26px; }
  .hero-scroll i { height: 36px; }
}
@media (max-width: 720px) {
  .hero-unroll .stw-hero-inner, .hs-hero-inner { align-content: center; gap: 22px; padding-top: 104px; padding-bottom: 104px; }
  .hero-unroll .stw-actions { margin-top: 6px; }
}
@media (max-width: 720px) {
  /* buttons at the foot, the words above them, the house kept in the top part of the photo */
  .hero-unroll .stw-hero-inner, .hs-hero-inner { align-content: end; gap: 14px; padding-top: 104px; padding-bottom: 96px; }
  .hero-unroll .stw-actions { margin-top: 26px; }
  .hero-unroll .stw-hero-photo img, .hs-hero-photo img { object-position: 50% 22%; }
  .hero-unroll .stw-hero-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .65) 70%); }
}

/* ---------- Reservation dial on phones: the hours stay on the ring (the kit dropped them into a row) ---------- */
@media (max-width: 720px) {
  .stw-dial-wrap { padding: 28px 30px 30px; }
  .stw-dial { width: min(100%, 320px); }
  .stw-dial-chips { display: contents; }
  .stw-dial-chips .badge { position: absolute; left: calc(50% + cos(calc(-90deg + var(--k) * 45deg)) * 50%); top: calc(50% + sin(calc(-90deg + var(--k) * 45deg)) * 50%); translate: -50% -50%; margin: 0; }
  .stw-dial-time { font-size: clamp(40px, 13cqw, 56px); }
}
@media (max-width: 720px) {
  /* the words sit one title higher above the buttons */
  .hero-unroll .stw-actions { margin-top: 92px; }
}

/* ---------- Prose pages (Gifts, Rituals, Contact, Legal): more air between the facts, the headings and the text ---------- */
.block-prose { padding-top: clamp(32px, 5cqw, 72px); }
.prs-side { gap: 28px; }
.prs-facts div { padding: 18px 0; gap: 4px; }
.prs-facts div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
.prs-text { gap: 18px; }
.block .block-prose .prs-text h2, .block-prose .prs-text h2 { margin-top: 40px; }
.block-prose .prs-text h2:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .block-page-head { padding-bottom: 8px; }
  .prs-grid { gap: 40px; }
  .prs-side { gap: 32px; }
  .prs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .prs-facts div:nth-child(-n + 2) { border-top-width: 1px; }
  .prs-facts div:nth-last-child(-n + 2) { border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent); }
  .prs-facts div:last-child { border-bottom-width: 1px; }
  .prs-text { gap: 22px; }
  .block-prose .prs-text h2 { margin-top: 48px; }
}

/* ---------- Photos on plates: a photo sits on the kit's own card, with a thin margin of card around it ---------- */
.photo-plate { padding: 9px; min-width: 0; }
.photo-plate > .ph { border-radius: var(--radius-card); }   /* the same radius as every card and photo on the site */
.stw-band.is-flip .photo-plate { order: 2; }
.stw-port .photo-plate { display: block; width: 100%; outline: 3px solid transparent; outline-offset: 5px; transition: outline-color var(--motion-hover); }
.stw-port .photo-plate > .stw-port-photo { outline: 0; }   /* the ring of the chosen ritual goes round its plate */
.stw-port[aria-pressed="true"] .photo-plate { outline-color: rgb(var(--color-primary)); }
.stw-port:focus-visible .photo-plate, .stw-port.is-focus .photo-plate { outline-color: var(--color-accent-text); }
.stw-ports.is-round .photo-plate, .stw-ports.is-round .photo-plate > .ph { border-radius: 50%; }   /* round pickers: a round plate with a round photo */
@container (max-width: 700px) { .stw-band.is-flip .photo-plate { order: 0; } }

/* ---------- Header that settles: on wide screens the logo starts twice its size and the links a little larger,
   and both shrink back as the page scrolls (--shrink 0 -> 1 from js/theme.js; without it the header keeps its normal size) ---------- */
@media (min-width: 900px) {
  .block-nav-min .word-mark { font-size: calc(clamp(24px, 1.6cqw, 30px) * (2 - var(--shrink, 1))); }
  .block-nav-min nav { font-size: calc(var(--text-md, 17px) * (1.15 - .15 * var(--shrink, 1))); }
  .block-nav-min .block-inner { min-height: calc(84px + 36px * (1 - var(--shrink, 1))); }
  .block-nav-min + .block-page-head { padding-top: 140px; }   /* room for the big header on pages without a hero */
}

/* ---------- Back to top: a round card like the ritual pickers, lower right; js/theme.js adds it to every page ---------- */
.to-top { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 30; display: grid; place-items: center;
  --r: 50%; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; color: var(--color-ink); cursor: pointer;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--motion-slide), transform var(--motion-slide); }
.to-top::before, .to-top::after { border-radius: inherit; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 20px; height: 20px; transition: transform var(--motion-hover); }
.to-top:hover svg { transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid var(--color-accent-text); outline-offset: 5px; }

/* ---------- Calm motion: a spa moves slowly, so the kit's quick timings are stretched here ---------- */
:root, [data-kit] { --motion-press: .2s ease; --motion-hover: .45s ease; --motion-slide: .6s ease; --motion-switch: .5s ease; }
@media (prefers-reduced-motion: no-preference) {
  .layout.rv-on [data-rv] {
    transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1), transform 1.6s cubic-bezier(.22, .61, .36, 1), clip-path 1.8s cubic-bezier(.7, 0, .2, 1);
    transition-delay: calc(var(--rv-base, 0s) + var(--rv-i, 0) * 180ms);
  }
  .layout[data-turn="curtain"] > .is-arriving { animation-duration: 1.6s; }
  .lst-photo .ph img, .spk-photo img, .cvp-card .ph img, .mr-photo img, .rel-old .ph img { transition-duration: 1.2s; }
  /* a photo on a plate opens from one point in its middle, keeping its round corners, once its part comes in */
  .layout.rv-on .photo-plate > .ph { clip-path: inset(0 round var(--radius-card));
    transition: clip-path 1.8s cubic-bezier(.7, 0, .2, 1) calc(var(--rv-base, 0s) + var(--rv-i, 0) * 180ms + var(--k, 0) * 208ms); }
  .layout.rv-on [data-rv]:not(.is-in) .photo-plate > .ph, .layout.rv-on .photo-plate > [data-rv]:not(.is-in) { clip-path: inset(50% round var(--radius-card)); }
  .layout.rv-on .stw-ports.is-round .photo-plate > .ph { clip-path: circle(50% at 50% 50%); }
  .layout.rv-on .stw-ports.is-round [data-rv]:not(.is-in) .photo-plate > .ph { clip-path: circle(0% at 50% 50%); }
  .photo-plate > .hs-room { opacity: 1; transform: none; }   /* on The house the plate rises (below), the photo opens on it */
  /* inner pages: the title forms first, then the lead, then the rest of the page rises in after it */
  .block-page-head .pgh-lead { animation: hero-rise 1.6s cubic-bezier(.2, .8, .2, 1) 1.4s both; }
  /* home and The house: parts stack like sheets of paper. The hero stays put and the rituals slide over it; the rituals stop once their
     foot is on screen and the values slide over them. A covered part dims (--cover 0 -> 1 and top: from js/theme.js) */
  .block-stw-hero.hero-cover:has(+ .block-stw-rituals), .hs-hero.hero-cover:has(+ .hs-factline) { position: sticky; top: 0; z-index: 0; }
  .hero-cover + :is(.block-stw-rituals, .hs-factline) { position: relative; z-index: 1; background: var(--page-bg); }
  .hero-cover + .block-stw-rituals:has(+ .block-stw-values) { position: sticky; }
  .hero-cover + :is(.block-stw-rituals, .hs-factline) ~ .block { position: relative; z-index: 2; background: var(--page-bg); }   /* the rest of the page covers them too */
  .hero-cover + :is(.block-stw-rituals, .hs-factline), .block-stw-rituals + .block-stw-values { border-radius: var(--radius-card) var(--radius-card) 0 0;
    box-shadow: 0 -24px 60px rgba(40, 24, 16, .18); }
  .block-stw-hero.hero-cover:has(+ .block-stw-rituals)::after, .hs-hero.hero-cover:has(+ .hs-factline)::after, .hero-cover + .block-stw-rituals:has(+ .block-stw-values)::after {
    content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: #1a120d;
    opacity: calc(var(--cover, 0) * .55); pointer-events: none; }
  .block-stw-hero.hero-cover:has(+ .block-stw-rituals)::before, .hs-hero.hero-cover:has(+ .hs-factline)::before, .hero-cover + .block-stw-rituals:has(+ .block-stw-values)::before {
    content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
    -webkit-backdrop-filter: blur(calc(var(--cover, 0) * 8px)); backdrop-filter: blur(calc(var(--cover, 0) * 8px)); }   /* and goes soft */
  /* what is on a stacked hero leaves as the next part comes over it: it rises, shrinks a little and fades */
  .hero-cover > :is(.stw-hero-inner, .hs-hero-inner, .hero-scroll) { transform-origin: 0 100%;
    translate: 0 calc(var(--cover, 0) * -40px); scale: calc(1 - var(--cover, 0) * .1); filter: opacity(max(0, 1 - var(--cover, 0) * .95)); }
  .hero-cover > .hero-scroll { transform-origin: 50% 100%; }
  .hero-cover .pw, .hero-cover .stw-actions > * { translate: 0 calc(var(--cover, 0) * var(--d, 1) * -280px); }   /* each word and button at its own speed */
  .hero-cover .pw { display: inline-block; }
  html.is-scrolled .hero-cover .rv-ln { overflow: visible; }   /* the line masks of the title are done once the page moves: words may leave them */
  /* a sheet always comes in whole: the parts over a stacked one never fade or slide as a block, only what is inside them */
  .layout.rv-on .hero-cover ~ .block[data-rv] { opacity: 1; transform: none; }
  .block-page-head ~ .block:not(.block-foot-slim, .block-prods), .block-page-head ~ .block-prods .prods-head { animation: hero-rise 1.8s cubic-bezier(.2, .8, .2, 1) 2.4s both; }
}