/* Four Wellness v6 hub: "Unweave". One knot comes apart into four rooms, goes quiet, weaves itself back (One roof),
   then you weave your own week into it. Mobile first: written for 390 wide, widened at 861.
   Nothing in the stage animates a mask, a filter or a size: leaf photos, lenses and room bases are pre-drawn canvases,
   and scroll only moves them (transform, opacity). */
:root {
  --h-soft: var(--fw-stone); --h-accent: var(--fw-night); --h-accent-ink: var(--fw-bone);
  --bar: 44px; --sb: calc(100lvh - 100svh); --pad: clamp(72px, 10vw, 150px);
  --vis: calc(100svh - var(--bar));           /* the stage area a phone actually sees at rest */
  --F1: clamp(84px, 27vw, 128px);             /* FOUR / ONE */
  --F2: clamp(52px, 17.4vw, 92px);            /* ELEMENTS / ROOF */
  --K: min(96vw, calc(var(--vis) - 268px));   /* the knot */
  --slack: max(0px, calc(var(--vis) - var(--dock) - 150px - var(--F1) * .7 - var(--K) - var(--F2) * .5));
  --kt: calc(var(--F1) * .7 + var(--slack) * .34);   /* knot top: the type, knot and copy share the spare height */
  --dock: 72px;
}
html { background: var(--fw-bone); -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body { margin: 0; background: var(--fw-bone); color: var(--fw-ink); font: 400 16px/1.6 var(--fw-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fw-ink); outline-offset: 3px; }
.u-hide-m { display: none; }

/* ============ the dock: the four elements under the thumb, and Book ============ */
.u-dock { position: fixed; z-index: 60; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translate3d(-50%, 0, 0); display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid #ffffff26; border-radius: 999px; background: rgba(29, 28, 20, .96); color: var(--fw-bone); transition: transform .38s var(--fw-ease), opacity .3s var(--fw-ease); }
.u-dock.is-away { transform: translate3d(-50%, 160%, 0); opacity: 0; pointer-events: none; }
.u-dock__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.u-dock__a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 52px; height: 48px; padding: 0 6px; border-radius: 999px; color: var(--c); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.u-dock__a[data-el="earth"] { --c: var(--fw-earth-light); }
.u-dock__a[data-el="fire"]  { --c: var(--fw-fire-light); }
.u-dock__a[data-el="water"] { --c: var(--fw-water-light); }
.u-dock__a[data-el="air"]   { --c: var(--fw-air-light); }
.u-dock__a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; fill-opacity: 0; }
.u-dock__a path { fill: currentColor; }
.u-dock__t { display: none; font: 700 10px/1 var(--fw-text); letter-spacing: .14em; text-transform: uppercase; }
.u-dock__a.is-seen svg { fill-opacity: .38; }
.u-dock__a.is-on { background: #ffffff1c; }
.u-dock__a.is-on svg, .u-dock__a.is-woven svg { fill-opacity: 1; }
.u-dock__a:active { background: #ffffff26; }
.u-dock a:focus-visible { outline: 2px solid var(--fw-bone); outline-offset: 1px; }
.u-dock__book { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; margin-left: 2px; border-radius: 999px; background: var(--fw-bone); color: var(--fw-night); font: 700 13px/1 var(--fw-text); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.u-dock__book:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .u-dock__a:hover { background: #ffffff14; } .u-dock__book:hover { background: #fff; } }

/* ============ the stage: hero, unweave, silence, peak ============ */
.u { position: relative; height: calc(var(--C, 7.4) * 100vh); height: calc(var(--C, 7.4) * 100lvh); }
.u-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--fw-bone); isolation: isolate; }
.u-ground { position: absolute; inset: 0; z-index: 0; background: var(--fw-night); opacity: 0; }
.u-hero, .u-peak { position: absolute; inset: 0; pointer-events: none; }

.u-big { margin: 0; font: 700 var(--F1)/.8 var(--fw-display); text-transform: uppercase; letter-spacing: -.012em; }
.u-big span { position: absolute; display: block; white-space: nowrap; }
.u-big .u-h1 { left: var(--fw-gutter); top: calc(6px + var(--slack) * .34); font-size: var(--F1); }
.u-big .u-h2 { right: var(--fw-gutter); top: calc(var(--kt) + var(--K) - var(--F2) * .5); font-size: var(--F2); line-height: .8; letter-spacing: -.005em; }
.u-hero { z-index: 1; color: var(--fw-ink); }
.u-peak { z-index: 1; color: var(--fw-bone); opacity: 0; visibility: hidden; }
.u-peak .u-h2 { color: var(--fw-bone); }

.u-foot { position: absolute; z-index: 5; left: var(--fw-gutter); right: var(--fw-gutter); bottom: calc(var(--sb) + var(--dock) + var(--bar) + 16px); }
.u-foot .fw-lede { font-size: 15.5px; line-height: 1.5; margin: 0 0 14px; max-width: 34ch; color: #3b3a33; }
.u-foot .fw-actions { gap: 10px; }
.u-foot .fw-btn { padding: 0 20px; font-size: 13px; }
.u-peak__foot { opacity: 0; visibility: hidden; }
.u-peak__foot .fw-lede { color: var(--fw-mist); }
.u-peak__foot .fw-btn:not(.fw-btn--line) { --h-accent: var(--fw-bone); --h-accent-ink: var(--fw-night); }
.u-peak__foot .fw-btn--line { color: var(--fw-bone); }
.u-peak__foot .fw-btn:focus-visible { outline-color: var(--fw-bone); }

/* the rooms: four full-bleed rooms stacked earth < fire < water < air, shown only when their leaf has opened */
.u-rooms { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.u-room { position: absolute; inset: 0; overflow: hidden; background: var(--fw-night); color: var(--fw-bone); visibility: hidden; isolation: isolate; }
.u-room.is-on { visibility: visible; pointer-events: auto; }
.u-room img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* the figure is a cover-fit box: the photo and its cutout share one frame, so they always register */
.u-fig { position: absolute; z-index: 1; --fx: .5; --fy: .5; --ar: var(--ar-d); width: max(var(--W, 390px), calc(var(--H, 844px) * var(--ar))); aspect-ratio: var(--ar); left: calc((var(--W, 390px) - max(var(--W, 390px), var(--H, 844px) * var(--ar))) * var(--fx)); top: calc((var(--H, 844px) - max(var(--W, 390px) / var(--ar), var(--H, 844px))) * var(--fy)); }
.u-far { left: 0; top: 0; width: 100%; height: 100%; }
.u-base { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.u-room.has-base .u-far { visibility: hidden; }
.u-room.has-base::before { display: none; }
.u-room.has-base { background: none; }
.u-mid { transform-origin: 50% 62%; left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh); }
/* phones get their own portrait plate for Earth: a sharp frame of the real class, with its own aspect, focus and cutout box */
@media (max-width: 640px) {
  .u-fig { --ar: var(--ar-p, var(--ar-d)); }
  .u-mid { left: var(--mx-p, var(--mx)); top: var(--my-p, var(--my)); width: var(--mw-p, var(--mw)); height: var(--mh-p, var(--mh)); }
}
.u-near { z-index: 5; }
.u-atm { z-index: 6; }
.u-room.is-live .u-mid, .u-room.is-live .u-near, .u-room.is-live .u-atm, .u-room.is-live .u-say { will-change: transform, opacity; }
.u-room::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* the knot: four leaf windows. Each is a small clipped window until it is big, then a pre-cut lens canvas, then the room itself */
.u-knot { position: absolute; z-index: 3; width: var(--K); height: var(--K); left: calc(50% - var(--K) / 2); top: var(--kt); }
.u-leaf { position: absolute; transform-origin: 50% 50%; backface-visibility: hidden; }
.u-stage.is-live .u-leaf { will-change: transform; }
.u-ph { position: absolute; inset: 0; }
.u-ph canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-pb { opacity: 0; transition: opacity 1.2s var(--fw-ease); }
.u-pb.is-in { opacity: 1; }
.u-lens { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; pointer-events: none; visibility: hidden; opacity: 0; }

.u-say { position: absolute; z-index: 8; left: var(--fw-gutter); right: var(--fw-gutter); display: grid; gap: 10px; justify-items: start; opacity: 0; visibility: hidden; padding-bottom: var(--sb); }
.u-say.is-on { visibility: inherit; }
.u-say__k { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 11px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--fw-bone); }
.u-say__h { margin: 0; font: 700 clamp(60px, 19vw, 96px)/.82 var(--fw-display); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 22px rgba(10, 8, 4, .38); }
.u-say__p { margin: 0; max-width: 30ch; font: 400 15.5px/1.5 var(--fw-text); color: #e6e1d3; }
.u-say__p b { color: var(--fw-bone); font-weight: 700; }
.u-say__p .fw-dot { margin-right: 9px; vertical-align: 1px; }
.u-say__a { color: var(--fw-bone); min-height: 48px; }
.u-say__a:focus-visible { outline-color: var(--fw-bone); }
/* one anchor per room, never the same twice in a row */
.u-say[data-say="earth"] { top: calc(var(--bar) + 20px); }
.u-say[data-say="fire"]  { bottom: calc(var(--sb) + var(--dock) + 22px); }
.u-say[data-say="water"] { top: calc(var(--bar) + 20px); justify-items: end; text-align: right; }
.u-say[data-say="air"]   { bottom: calc(var(--sb) + var(--dock) + 22px); }
.u-say[data-say="water"] .u-say__p { margin-left: auto; }

/* room by room: framing, scrims, planes */
.u-room[data-room="earth"]::before { background: linear-gradient(180deg, rgba(8, 14, 22, .84) 0%, rgba(8, 14, 22, .46) 32%, rgba(8, 14, 22, 0) 58%); }
[data-fig="earth"] { --fx: .93; }
@media (max-width: 640px) { [data-fig="earth"] { --fx: .5; } }
.u-room[data-room="earth"] .u-near { left: -3%; bottom: -4%; height: 78%; width: auto; opacity: .92; }

.u-room[data-room="fire"]::before { background: linear-gradient(0deg, rgba(30, 14, 6, .8) 0%, rgba(30, 14, 6, .4) 28%, rgba(30, 14, 6, 0) 52%); }
[data-fig="fire"] { --fx: .513; }
.u-room[data-room="fire"] .u-near { left: -16%; top: 22%; width: 134%; height: auto; opacity: .9; }

.u-room[data-room="water"]::before { background: linear-gradient(180deg, rgba(4, 22, 26, .82) 0%, rgba(4, 22, 26, .4) 30%, rgba(4, 22, 26, .08) 60%); }
[data-fig="water"] { --fx: .16; }
.u-room[data-room="water"] .u-near { left: -34%; bottom: 0; height: 66%; width: auto; opacity: .55; }
.u-room[data-room="water"] .u-atm { left: -30%; bottom: -3%; height: 54%; width: auto; opacity: .62; }

.u-room[data-room="air"]::before { background: linear-gradient(0deg, rgba(20, 12, 6, .84) 0%, rgba(20, 12, 6, .42) 30%, rgba(20, 12, 6, 0) 56%); }
[data-fig="air"] { --fy: .62; }
.u-room[data-room="air"] .u-near { right: -34%; bottom: 8%; height: 92%; width: auto; opacity: .42; }
.u-room[data-room="air"] .u-atm { left: -46%; top: -8%; height: 84%; width: auto; opacity: .24; }

/* the weave over the knot */
.u-weave { position: absolute; left: 0; top: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
.w-weave path { fill: none; stroke-width: 4.6; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.w-weave [data-el="air"], .w-ghost [data-el="air"] { stroke: var(--k-air); }
.w-weave [data-el="water"], .w-ghost [data-el="water"] { stroke: var(--k-water); }
.w-weave [data-el="earth"], .w-ghost [data-el="earth"] { stroke: var(--k-earth); }
.w-weave [data-el="fire"], .w-ghost [data-el="fire"] { stroke: var(--k-fire); }
.u-stage.is-night .u-hero { color: var(--fw-bone); }

/* wide screens: type tucked into the knot's corners */
@media (min-width: 861px) {
  :root { --F1: clamp(120px, 12vw, 200px); --F2: clamp(96px, 9.4vw, 160px); --K: min(46vw, calc(var(--vis) - 40px), 680px); --kt: calc((var(--vis) - var(--K)) / 2); --dock: 84px; }
  .u-big .u-h1 { left: auto; right: calc(50% + var(--K) * .2); top: calc(var(--kt) - var(--F1) * .08); }
  .u-big .u-h2 { right: auto; left: calc(50% + var(--K) * .0); top: calc(var(--kt) + var(--K) - var(--F2) * .66); }
  .u-foot { left: var(--fw-gutter); right: auto; width: calc(50% - var(--K) / 2 - var(--fw-gutter) - 28px); top: auto; bottom: calc(var(--sb) + 52px); }
  .u-foot .fw-lede { font-size: clamp(16px, 1.25vw, 19px); }
  .u-foot .fw-actions { flex-direction: column; align-items: flex-start; }
  .u-hide-m { display: inline-flex; }
  .u-dock__a { flex-direction: row; gap: 8px; padding: 0 14px; }
  .u-dock__t { display: block; }
  .u-say { left: max(var(--fw-gutter), calc(50% - var(--fw-max) / 2 + var(--fw-gutter))); right: max(var(--fw-gutter), calc(50% - var(--fw-max) / 2 + var(--fw-gutter))); }
  .u-say__h { font-size: clamp(96px, 11vw, 188px); }
  .u-say__p { font-size: 17px; max-width: 34ch; }
  .u-room[data-room="fire"] .u-near { left: auto; right: -4%; top: 4%; width: 62%; height: auto; }
  .u-room[data-room="water"] .u-near { left: auto; right: -4%; width: auto; height: 66%; }
  .u-room[data-room="water"] .u-atm { left: -4%; height: 54%; }
  [data-fig="earth"] { --fx: .9; }
  [data-fig="fire"] { --fx: .6; }
  [data-fig="water"] { --fx: .1; }
  .u-say[data-say="earth"] { top: calc(var(--bar) + 36px); }
  .u-say[data-say="fire"]  { bottom: calc(var(--sb) + var(--dock) + 28px); }
}
@media (max-width: 860px) and (max-height: 700px) { .u-foot .fw-lede { display: none; } }

/* ============ film ============ */
.fw-film__chapters button .fw-dot { transform: rotate(45deg); }
.fw-film__chapters button[aria-current] { border-color: currentColor; background: #ffffff14; }

/* ============ weave your week ============ */
.w { padding: var(--pad) 0 calc(var(--pad) * .8); background: var(--fw-paper); border-top: 1px solid var(--fw-rule); }
.w-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 56px); max-width: 60ch; }
.w-head .fw-h2 { margin: 0; }
.w-head .fw-body { margin: 0; color: #3b3a33; }
.w-grid { display: grid; gap: 28px clamp(32px, 6vw, 96px); align-items: start; }
.w-dial { position: relative; }
.w-knot { position: relative; width: min(80vw, 380px); margin: 0 auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; --a: -180deg; }
.w-knot.is-drag { cursor: grabbing; }
.w-knot .k { position: relative; width: 100%; aspect-ratio: 1; transform: rotate(var(--a)); transition: transform 1s var(--fw-ease); }
.w-knot .k-p { position: absolute; cursor: pointer; opacity: .16; transition: opacity .7s var(--fw-ease); }
.w-knot .k-p.is-sel { opacity: .42; }
.w-knot .k-p.is-woven { opacity: 1; }
.w-knot .k-r { position: absolute; transform: rotate(calc(var(--a) * -1)); transition: transform 1s var(--fw-ease); }
.w-knot .k-r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-knot.is-drag .k, .w-knot.is-drag .k-r { transition: none; }
.w-weave, .w-ghost { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; --k-air: var(--fw-air-knot); --k-water: var(--fw-water-knot); --k-earth: var(--fw-earth-knot); --k-fire: var(--fw-fire-knot); }
.w-ghost { opacity: .22; }
.w-ghost path { fill: none; stroke-width: 4.6; stroke-linejoin: round; }
.w-pin { position: absolute; left: 50%; top: 1%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50% 0; transform: rotate(45deg); background: var(--fw-ink); }
.w-count { margin: 14px 0 0; text-align: center; font: 600 14px/1.2 var(--fw-text); color: var(--fw-stone); letter-spacing: .04em; }
.w-count b { color: var(--fw-ink); font: 700 24px/1 var(--fw-display); letter-spacing: .02em; text-transform: uppercase; margin-right: 6px; }
.w-count.is-whole b { color: var(--fw-earth); }
.w-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--fw-rule); }
.w-tabs button { display: flex; align-items: flex-start; gap: 8px; min-height: 64px; padding: 14px 4px 12px 0; border: 0; border-top: 2px solid transparent; margin-top: -1px; background: none; color: var(--fw-stone); font: 700 17px/1 var(--fw-display); text-transform: uppercase; letter-spacing: .02em; text-align: left; cursor: pointer; }
.w-tabs button .fw-dot { margin-top: 3px; }
.w-tabs small { display: block; margin-bottom: 5px; font: 700 9.5px/1 var(--fw-text); letter-spacing: .12em; color: var(--fw-stone); }
.w-tabs button[aria-selected="true"] { color: var(--fw-ink); border-top-color: var(--fw-ink); }
.w-tabs button.is-woven small::after { content: " · in"; color: var(--fw-ink); }
@media (hover: hover) and (pointer: fine) { .w-tabs button:hover { color: var(--fw-ink); } }
@media (max-width: 380px) { .w-tabs button .fw-dot { display: none; } }

.w-panel { --h-accent: var(--fw-ink); }
.w-panel[hidden] { display: none; }
.w-panel.is-enter { animation: w-in .6s var(--fw-ease) both; }
@keyframes w-in { from { opacity: 0; transform: translateY(12px); } }
.w-panel__h { margin: 0 0 10px; font: 700 clamp(40px, 5vw, 64px)/.9 var(--fw-display); text-transform: uppercase; }
.w-panel[data-el="earth"] .w-panel__h { color: var(--fw-earth); }
.w-panel[data-el="fire"] .w-panel__h { color: var(--fw-fire); }
.w-panel[data-el="water"] .w-panel__h { color: var(--fw-water); }
.w-panel[data-el="air"] .w-panel__h { color: var(--fw-air); }
.w-panel__p { margin: 0 0 18px; max-width: 54ch; color: #3b3a33; }
.w-panel__go { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 14px 0 0; font-size: 14px; }
.w-panel__go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 4px; }

.w-days { display: flex; flex-wrap: wrap; gap: 8px; }
.w-days button { min-width: 52px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--fw-ink); border-radius: var(--fw-radius); background: none; color: var(--fw-ink); font: 700 13px/1 var(--fw-text); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .18s var(--fw-ease), color .18s var(--fw-ease), transform .18s var(--fw-ease); }
.w-days button[aria-pressed="true"] { background: var(--fw-earth); border-color: var(--fw-earth); color: var(--fw-bone); }
.w-days button:active, .w-pick:active { transform: scale(.98); }

.w-picks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fw-rule); font-variant-numeric: tabular-nums; }
.w-picks[aria-busy="true"] { min-height: 220px; }
.w-picks__day { padding: 18px 0 8px; font: 700 11px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--fw-stone); }
.w-picks__note { padding: 14px 0; font-size: 15px; color: var(--fw-stone); }
.w-picks__note a { font-weight: 700; color: var(--fw-ink); }
.w-pick { position: relative; display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; width: 100%; min-height: 64px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--fw-rule); background: none; color: var(--fw-ink); text-align: left; font: inherit; cursor: pointer; transition: transform .18s var(--fw-ease); }
.w-pick__t { font: 700 24px/1 var(--fw-display); letter-spacing: .01em; }
.w-pick__n { font-weight: 700; line-height: 1.25; }
.w-pick__s { grid-column: 2; font-size: 13.5px; color: var(--fw-stone); line-height: 1.35; }
.w-pick--solo { grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--fw-rule); }
.w-pick--solo .w-pick__t { font-size: 28px; text-transform: uppercase; }
.w-pick--solo .w-pick__s { grid-column: 1; }
.w-pick__go { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid currentColor; border-radius: 50%; }
.w-pick--solo .w-pick__go { grid-column: 2; }
.w-pick__go::before { content: ""; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .25s var(--fw-ease); }
.w-pick[aria-pressed="true"] .w-pick__go { background: var(--c, var(--fw-ink)); border-color: var(--c, var(--fw-ink)); color: var(--fw-bone); }
.w-pick[aria-pressed="true"] .w-pick__go::before { transform: rotate(45deg); }
.w-pick.is-full { color: var(--fw-stone); }
[data-el="fire"] .w-pick { --c: var(--fw-fire); }
[data-el="water"] .w-pick { --c: var(--fw-water); }
[data-el="air"] .w-pick { --c: var(--fw-air); }
@media (hover: hover) and (pointer: fine) { .w-pick:hover .w-pick__n, .w-pick:hover .w-pick__t { text-decoration: underline; text-underline-offset: 4px; } }

.w-sheet { margin-top: 36px; padding: 22px 20px 20px; background: var(--fw-night); color: var(--fw-bone); border-radius: var(--fw-radius); }
.w-sheet__h { margin: 0 0 12px; font: 700 28px/1 var(--fw-display); text-transform: uppercase; letter-spacing: .02em; }
.w-sheet__list { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--fw-rule-dark); }
.w-sheet__list li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--fw-rule-dark); }
.w-sheet__list li.w-sheet__empty { display: block; padding: 14px 0; color: var(--fw-mist); }
.w-sheet__list .fw-dot { grid-row: 1 / span 2; align-self: start; margin-top: 8px; }
.w-sheet__who { font: 700 12px/1.2 var(--fw-text); letter-spacing: .14em; text-transform: uppercase; color: var(--fw-mist); }
.w-sheet__what { grid-column: 2; font-weight: 700; line-height: 1.3; }
.w-sheet__x { grid-column: 3; grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--fw-bone); cursor: pointer; font-size: 24px; line-height: 1; }
.w-sheet__book { grid-column: 2; font-size: 13.5px; }
.w-sheet__book a { color: var(--fw-bone); font-weight: 600; text-underline-offset: 3px; }
.w-sheet .fw-btn:not(.fw-btn--line) { --h-accent: var(--fw-bone); --h-accent-ink: var(--fw-night); }
.w-sheet .fw-btn--line { color: var(--fw-bone); }
.w-sheet a:focus-visible, .w-sheet button:focus-visible { outline-color: var(--fw-bone); }
.w-sheet__note { margin: 14px 0 0; font-size: 13px; color: var(--fw-mist); }
.w-sheet.is-whole { box-shadow: none; border: 1.5px solid var(--fw-earth-light); }

@media (min-width: 861px) {
  .w-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .w-dial { position: sticky; top: 24px; }
  .w-knot { width: min(100%, 520px); }
  .w-tabs button { font-size: 20px; }
  .w-tabs small { font-size: 10px; letter-spacing: .18em; }
}

/* the walk starts at Holohan */
.u-walk { padding-bottom: calc(clamp(56px, 9vw, 120px) + var(--dock)); }

/* ============ reduced motion: a complete static page, every act's content in reading order ============ */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .u { height: auto; }
  .u-stage { position: relative; height: auto; overflow: visible; display: grid; background: var(--fw-bone); }
  .u-ground, .u-knot, .u-weave { display: none; }
  .u-stage > * { grid-column: 1; }
  .u-hero, .u-peak { position: relative; inset: auto; opacity: 1; visibility: visible; }
  .u-hero { grid-row: 1; padding: 6px 0 0; }
  .u-rmk--hero { grid-row: 2; }
  .u-hero__foot { position: relative; grid-row: 3; left: auto; right: auto; bottom: auto; width: auto; margin: 22px var(--fw-gutter) 34px; max-width: 520px; }
  .u-hero__foot .fw-actions { flex-direction: row; }
  .u-big { position: relative; line-height: .86; padding: 0 var(--fw-gutter); }
  .u-big span { position: static; display: block; white-space: normal; }
  .u-rooms { position: relative; grid-row: 4; inset: auto; display: grid; gap: 14px; padding: 0 var(--fw-gutter); pointer-events: auto; }
  .u-room { position: relative; inset: auto; visibility: visible; pointer-events: auto; height: min(78svh, 640px); border-radius: var(--fw-radius); }
  .u-room .u-say { opacity: 1 !important; visibility: visible !important; transform: none !important; left: 20px; right: 20px; top: auto !important; bottom: 20px; justify-items: start !important; text-align: left !important; padding-bottom: 0; }
  .u-room .u-say__h { font-size: clamp(56px, 16vw, 88px); }
  .u-mid, .u-near, .u-atm, .u-base { display: none; }
  .u-room .u-fig { inset: 0; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .u-room .u-far { object-fit: cover; object-position: calc(var(--fx) * 100%) calc(var(--fy) * 100%); }
  .u-peak { grid-row: 5; background: var(--fw-night); margin-top: 34px; padding: 44px 0 6px; min-height: 0; }
  .u-stage .u-rmk--peak { grid-row: 6; background: var(--fw-night); margin: 0; padding-bottom: 8px; }
  .u-peak .u-big { color: var(--fw-bone); }
  .u-peak__foot { position: relative; grid-row: 7; left: auto; right: auto; bottom: auto; width: auto; margin: 0; padding: 12px var(--fw-gutter) 52px; background: var(--fw-night); max-width: none; opacity: 1; visibility: visible; }
  .u-peak__foot .fw-lede { margin-bottom: 16px; }
  .u-dock { transition: none; }
  .w-knot .k, .w-knot .k-r, .w-knot .k-p { transition: none; }
  .w-panel.is-enter { animation: none; }
  .u-pb { transition: none; }
}

/* ============ first paint: the knot arrives with the settle, not before it ============ */
.u-knot { transition: opacity .5s var(--fw-ease); }
.js:not(.is-ready) .u-knot { opacity: 0; }
.u-rmk { display: none; }
@media (prefers-reduced-motion: reduce) {
  .js:not(.is-ready) .u-knot { opacity: 1; }
  .u-rmk { display: grid; place-items: center; position: relative; margin: 14px 0 0; }
  .u-rmk .k { position: relative; width: min(86vw, 440px); aspect-ratio: 1; }
  .u-rmk .k-p { position: absolute; }
  .u-rmk .k-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .u-rmk .w-weave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; --k-air: var(--fw-air-knot); --k-water: var(--fw-water-knot); --k-earth: var(--fw-earth-knot); --k-fire: var(--fw-fire-knot); }
  .u-rmk--peak .w-weave { --k-air: var(--fw-air-light); --k-water: var(--fw-water-light); --k-earth: var(--fw-earth-light); --k-fire: var(--fw-fire-light); }
}


/* warm-up: every room and lens is drawn once at 1% opacity after load so its textures are uploaded before a scroll needs them */
.u-room.is-warm { visibility: visible !important; opacity: .01 !important; }
.u-room.is-warm .u-say { visibility: visible !important; opacity: 1 !important; }
.u-leaf.is-warm .u-lens { visibility: visible !important; opacity: .01 !important; }

/* the sections below the stage are not rendered until they are near the viewport: the stage's per-frame work stays small */
.fw-film, .w, .u-walk, .fw-foot { content-visibility: auto; }
.fw-film { contain-intrinsic-size: auto 900px; }
.w { contain-intrinsic-size: auto 1700px; }
.u-walk { contain-intrinsic-size: auto 420px; }
.fw-foot { contain-intrinsic-size: auto 1400px; }