/* Four Wellness v4 family layer: "Four elements. One weave."
   Shared by the hub and all four houses. Tokens, faces, the knot, the bar, the
   directory footer, the "same roof" band, buttons, type scale and live times.
   Houses theme it with --h-* tokens; they never restyle the chrome. */

@font-face { font-family: "Manrope"; src: url("/family/fonts/manrope-300-800.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/family/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/family/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/family/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/family/fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nothing You Could Do"; src: url("/family/fonts/nothing-you-could-do-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --fw-night: #1d1c14;
  --fw-night-2: #26251b;
  --fw-bone: #f3f0e7;
  --fw-paper: #faf8f2;
  --fw-ink: #1c1d19;
  --fw-stone: #5f5d50;      /* secondary text on bone, 5.9:1 */
  --fw-mist: #b9b4a2;       /* secondary text on night */
  --fw-rule: #d9d4c4;       /* hairline on bone */
  --fw-rule-dark: #3a382b;  /* hairline on night */

  /* the four elements: deep = text-safe on bone, light = text-safe on night, knot = the mark's tone */
  --fw-earth: #1f4d3a;  --fw-earth-light: #bfca91;  --fw-earth-knot: #1f4d3a;
  --fw-fire:  #a8401a;  --fw-fire-light:  #f6a26b;  --fw-fire-knot:  #c2531f;
  --fw-water: #14666f;  --fw-water-light: #8bd3db;  --fw-water-knot: #14666f;
  --fw-air:   #57623f;  --fw-air-light:   #c4cda9;  --fw-air-knot:   #7d8a5a;

  --fw-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fw-text: "Manrope", system-ui, sans-serif;
  --fw-ease: cubic-bezier(.23, 1, .32, 1);
  --fw-radius: 2px;
  --fw-bar-h: 44px;
  --fw-max: 1320px;
  --fw-gutter: clamp(20px, 4vw, 56px);
}

/* ---- the knot: four loops, one per element, woven over and under ---- */
.fw-knot { display: inline-block; width: 1em; height: 1em; flex: none; overflow: visible; vertical-align: -.16em; }
.fw-knot path { fill: none; stroke-width: 6.2; stroke-linecap: butt; stroke-linejoin: round; }
.fw-knot [data-el="air"]   { stroke: var(--k-air, var(--fw-air-knot)); }
.fw-knot [data-el="water"] { stroke: var(--k-water, var(--fw-water-knot)); }
.fw-knot [data-el="earth"] { stroke: var(--k-earth, var(--fw-earth-knot)); }
.fw-knot [data-el="fire"]  { stroke: var(--k-fire, var(--fw-fire-knot)); }
/* on dark grounds use the light stops */
.fw-on-dark .fw-knot, .fw-bar .fw-knot, .fw-foot .fw-knot { --k-air: var(--fw-air-light); --k-water: var(--fw-water-light); --k-earth: var(--fw-earth-light); --k-fire: var(--fw-fire-light); }
/* a house lights its own loop; the other three stay in the weave, quiet */
.fw-knot[data-lit="air"]   path:not([data-el="air"]),
.fw-knot[data-lit="water"] path:not([data-el="water"]),
.fw-knot[data-lit="earth"] path:not([data-el="earth"]),
.fw-knot[data-lit="fire"]  path:not([data-el="fire"]) { stroke: currentColor; opacity: .32; }
.fw-knot--mono path { stroke: currentColor !important; opacity: 1 !important; }

.fw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50% 0; transform: rotate(45deg); background: var(--c); flex: none; }
.fw-dot[data-el="earth"] { --c: var(--fw-earth-light); }
.fw-dot[data-el="fire"]  { --c: var(--fw-fire-light); }
.fw-dot[data-el="water"] { --c: var(--fw-water-light); }
.fw-dot[data-el="air"]   { --c: var(--fw-air-light); }
.fw-on-light .fw-dot[data-el="earth"] { --c: var(--fw-earth); }
.fw-on-light .fw-dot[data-el="fire"]  { --c: var(--fw-fire); }
.fw-on-light .fw-dot[data-el="water"] { --c: var(--fw-water); }
.fw-on-light .fw-dot[data-el="air"]   { --c: var(--fw-air-knot); }

/* ---- the bar: the same band on top of every site, in flow, never fixed ---- */
.fw-bar { position: relative; z-index: 70; height: var(--fw-bar-h); background: var(--fw-night); color: var(--fw-bone); font: 600 11px/1 var(--fw-text); letter-spacing: .14em; text-transform: uppercase; }
.fw-bar__in { height: 100%; max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--fw-gutter); display: flex; align-items: center; gap: 24px; }
.fw-bar a { color: inherit; text-decoration: none; }
.fw-bar__home { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; min-height: 44px; }
.fw-bar__home .fw-knot { font-size: 22px; }
.fw-bar__list { display: flex; gap: 2px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.fw-bar__list a { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 12px; border-radius: var(--fw-radius); color: #cfcab8; transition: color .16s var(--fw-ease), background-color .16s var(--fw-ease); }
.fw-bar__list a[aria-current="page"] { color: var(--fw-bone); background: #ffffff14; }
@media (hover: hover) and (pointer: fine) { .fw-bar__list a:hover { color: var(--fw-bone); background: #ffffff10; } }
.fw-bar a:focus-visible, .fw-bar button:focus-visible { outline: 2px solid var(--fw-bone); outline-offset: 2px; }
.fw-bar__more { display: none; }
@media (max-width: 900px) {
  .fw-bar__more { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; height: 44px; padding: 0 14px; border: 1px solid #ffffff2e; border-radius: var(--fw-radius); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .fw-bar__more::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--fw-ease); }
  .fw-bar__more[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
  .fw-bar__list { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px 0 0; background: #ffffff1a; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s var(--fw-ease), transform .2s var(--fw-ease), visibility 0s linear .2s; }
  .fw-bar.is-open .fw-bar__list { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .fw-bar__list a { height: 56px; padding: 0 16px; background: var(--fw-night); border-radius: 0; }
  .fw-bar__list a[aria-current="page"] { background: var(--fw-night-2); }
}

/* ---- shared type + layout primitives ---- */
.fw-wrap { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--fw-gutter); }
.fw-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 700 12px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--h-soft, var(--fw-stone)); }
.fw-display { font: 700 clamp(48px, 8.4vw, 132px)/.9 var(--fw-display); letter-spacing: -.01em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.fw-h2 { font: 700 clamp(36px, 5.2vw, 76px)/.95 var(--fw-display); letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 20px; text-wrap: balance; }
.fw-h3 { font: 700 clamp(24px, 2.4vw, 32px)/1.05 var(--fw-display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 10px; }
.fw-lede { font: 400 clamp(17px, 1.5vw, 21px)/1.55 var(--fw-text); max-width: 40ch; margin: 0 0 28px; text-wrap: pretty; }
.fw-body { font: 400 16px/1.65 var(--fw-text); max-width: 62ch; }

/* ---- buttons: one system everywhere. Border, never inset box-shadow (first-raster cost on phones) ---- */
.fw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1.5px solid var(--h-accent, var(--fw-ink)); border-radius: var(--fw-radius); background: var(--h-accent, var(--fw-ink)); color: var(--h-accent-ink, var(--fw-bone)); font: 700 14px/1 var(--fw-text); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .18s var(--fw-ease), background-color .18s var(--fw-ease), color .18s var(--fw-ease); }
.fw-btn::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); margin-left: 2px; }
.fw-btn--line { background: none; color: var(--h-line-ink, var(--fw-ink)); border-color: currentColor; }
.fw-btn:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .fw-btn:hover { transform: translateY(-1px); } }
.fw-btn:focus-visible { outline: 2px solid var(--h-focus, currentColor); outline-offset: 3px; }
.fw-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- same roof, three more ways in ---- */
.fw-pair { background: var(--fw-bone); color: var(--fw-ink); padding: clamp(64px, 9vw, 120px) 0; }
.fw-pair__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--fw-gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.fw-pair__head { display: grid; gap: 24px; align-content: start; }
.fw-pair__head .fw-knot { font-size: 72px; color: var(--fw-ink); }
.fw-pair__h { font: 700 clamp(34px, 4.2vw, 60px)/.95 var(--fw-display); text-transform: uppercase; margin: 0; max-width: 12ch; }
.fw-pair__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fw-rule); }
.fw-pair__list a { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 6px 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--fw-rule); color: inherit; text-decoration: none; }
.fw-pair__list a::after { content: ""; grid-row: 1 / span 2; grid-column: 3; align-self: center; width: 10px; height: 10px; border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); transition: transform .2s var(--fw-ease); }
@media (hover: hover) and (pointer: fine) { .fw-pair__list a:hover::after { transform: translateX(4px) rotate(45deg); } }
.fw-pair__list a:focus-visible { outline: 2px solid var(--fw-ink); outline-offset: 4px; }
.fw-pair__el { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--fw-stone); }
.fw-pair__list [data-el="earth"] .fw-dot { --c: var(--fw-earth); }
.fw-pair__list [data-el="fire"] .fw-dot { --c: var(--fw-fire-knot); }
.fw-pair__list [data-el="water"] .fw-dot { --c: var(--fw-water); }
.fw-pair__list [data-el="air"] .fw-dot { --c: var(--fw-air-knot); }
.fw-pair__name { font: 700 clamp(26px, 2.6vw, 36px)/1 var(--fw-display); text-transform: uppercase; }
.fw-pair__line { grid-column: 2; font: 400 15px/1.5 var(--fw-text); color: var(--fw-stone); }
@media (max-width: 760px) {
  .fw-pair__in { grid-template-columns: 1fr; }
  .fw-pair__head .fw-knot { font-size: 56px; }
  .fw-pair__list a { grid-template-columns: 1fr auto; }
  .fw-pair__el { grid-column: 1; }
  .fw-pair__name, .fw-pair__line { grid-column: 1; }
  .fw-pair__list a::after { grid-row: 1 / span 3; }
}

/* ---- the directory footer: every house, every platform, one place ---- */
.fw-foot { background: var(--fw-night); color: var(--fw-mist); font: 400 15px/1.6 var(--fw-text); padding: clamp(64px, 8vw, 104px) 0 32px; }
.fw-foot a { color: var(--fw-bone); text-decoration: none; }
.fw-foot a:focus-visible { outline: 2px solid var(--fw-bone); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .fw-foot a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.fw-foot__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--fw-gutter); display: grid; grid-template-columns: minmax(240px, 3fr) minmax(0, 9fr); gap: 48px clamp(32px, 5vw, 80px); }
.fw-foot__home { display: inline-flex; align-items: center; gap: 14px; }
.fw-foot__home .fw-knot { font-size: 52px; color: var(--fw-bone); }
.fw-foot__word { font: 700 28px/.95 var(--fw-display); letter-spacing: .04em; text-transform: uppercase; color: var(--fw-bone); max-width: 6ch; }
.fw-foot__tag { margin: 20px 0 20px; color: var(--fw-bone); }
.fw-foot address { font-style: normal; margin: 0 0 12px; }
.fw-foot__dir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fw-rule-dark); }
.fw-foot__house { position: relative; padding: 22px 20px 8px 0; }
.fw-foot__house + .fw-foot__house { padding-left: 20px; border-left: 1px solid var(--fw-rule-dark); }
.fw-foot__house[data-current]::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--c); }
.fw-foot__house[data-el="earth"] { --c: var(--fw-earth-light); }
.fw-foot__house[data-el="fire"]  { --c: var(--fw-fire-light); }
.fw-foot__house[data-el="water"] { --c: var(--fw-water-light); }
.fw-foot__house[data-el="air"]   { --c: var(--fw-air-light); }
.fw-foot__el { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px; font: 700 11px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--c); }
.fw-foot__name { margin: 0 0 6px; font: 700 22px/1.05 var(--fw-display); text-transform: uppercase; letter-spacing: .02em; }
.fw-foot__line { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.fw-foot__house ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fw-foot__house li a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.fw-foot__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--fw-rule-dark); font-size: 13px; }
.fw-foot__base a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1080px) {
  .fw-foot__in { grid-template-columns: 1fr; }
  .fw-foot__dir { grid-template-columns: 1fr 1fr; }
  .fw-foot__house:nth-child(3) { padding-left: 0; border-left: 0; }
  .fw-foot__house:nth-child(n+3) { border-top: 1px solid var(--fw-rule-dark); }
}
@media (max-width: 480px) {
  .fw-foot__dir { grid-template-columns: 1fr; }
  .fw-foot__house, .fw-foot__house + .fw-foot__house { padding-left: 0; border-left: 0; }
  .fw-foot__house + .fw-foot__house { border-top: 1px solid var(--fw-rule-dark); }
}

/* v6: every footer link is a full 44px target on touch screens */
@media (pointer: coarse) { .fw-foot address a, .fw-foot__base a, .fw-foot__tag a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---- live times from ATND: structure only, each site themes it ---- */
.fw-slots { --s-soft: color-mix(in srgb, currentColor 68%, transparent); --s-line: color-mix(in srgb, currentColor 18%, transparent); --s-accent: currentColor; list-style: none; margin: 0; padding: 0; font-family: var(--fw-text); font-variant-numeric: tabular-nums; }
.fw-slots[aria-busy="true"] { min-height: 280px; }
.fw-slots__day { margin: 26px 0 6px; font: 700 11px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--s-soft); }
.fw-slots__day:first-child { margin-top: 0; }
.fw-slot { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 4px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--s-line); }
.fw-slot__time, .fw-slot__name { font-weight: 700; }
.fw-slot__meta { grid-column: 2; font-size: 13px; color: var(--s-soft); }
.fw-slot__go { grid-row: 1 / span 2; grid-column: 3; display: inline-flex; align-items: center; min-height: 44px; font: 700 13px/1 var(--fw-text); color: var(--s-accent); text-underline-offset: 3px; white-space: nowrap; }
.fw-slot.is-full .fw-slot__go, .fw-slot.is-closed .fw-slot__go { color: var(--s-soft); }
.fw-slots__note { margin-top: 12px; font-size: 14px; color: var(--s-soft); }

.fw-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--fw-bone); color: var(--fw-ink); font: 700 14px/1 var(--fw-text); border-radius: var(--fw-radius); }
.fw-skip:focus { top: 8px; }
.fw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===================== v6 family additions (main thread owns these) ===================== */

/* ---- walking between houses: cross-document view transitions (Chrome 126+, Safari 18.2+; others just navigate) ---- */
@view-transition { navigation: auto; }
.fw-bar { view-transition-name: fw-bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--fw-ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---- the film: one component on all five sites. Poster button first; the <video> appears only when asked for ---- */
.fw-film { --film-ground: var(--h-dark, var(--fw-night)); background: var(--film-ground); color: var(--fw-bone); padding: clamp(56px, 9vw, 128px) 0; }
.fw-film__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--fw-gutter); display: grid; gap: clamp(20px, 3vw, 36px); }
.fw-film__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; }
.fw-film__h { font: 700 clamp(34px, 5vw, 72px)/.92 var(--fw-display); text-transform: uppercase; margin: 0; max-width: 16ch; text-wrap: balance; }
.fw-film__line { font: 400 16px/1.6 var(--fw-text); color: var(--fw-mist); max-width: 46ch; margin: 0; }
.fw-film__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--fw-radius); overflow: hidden; }
.fw-film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.fw-film__play { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: var(--fw-bone); cursor: pointer; text-align: left; }
.fw-film__play picture, .fw-film__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fw-film__play::before { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(10, 10, 8, .72), rgba(10, 10, 8, 0)); z-index: 1; }
.fw-film__cue { position: absolute; z-index: 2; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px); display: inline-flex; align-items: center; gap: 14px; font: 700 14px/1 var(--fw-text); letter-spacing: .12em; text-transform: uppercase; }
.fw-film__cue i { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border: 1.5px solid currentColor; border-radius: 50%; transition: transform .25s var(--fw-ease), background-color .25s var(--fw-ease); }
.fw-film__cue i::after { content: ""; margin-left: 4px; border-left: 16px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.fw-film__cue small { display: block; margin-top: 6px; font: 600 12px/1 var(--fw-text); letter-spacing: .14em; color: var(--fw-mist); }
@media (hover: hover) and (pointer: fine) { .fw-film__play:hover .fw-film__cue i { transform: scale(1.06); background: rgba(243, 240, 231, .12); } }
.fw-film__play:focus-visible { outline: 3px solid var(--h-focus, var(--fw-bone)); outline-offset: -6px; }
.fw-film.is-playing .fw-film__play { display: none; }
.fw-film__note { font: 400 14px/1.5 var(--fw-text); color: var(--fw-mist); margin: 0; }
.fw-film__chapters { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fw-film__chapters button { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--fw-rule-dark); border-radius: 999px; background: none; color: inherit; font: 600 13px/1 var(--fw-text); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fw-film__chapters button[aria-current="true"] { border-color: currentColor; }
@media (max-width: 640px) {
  /* phones: the poster can be art-directed taller; the film itself plays 16:9 (native fullscreen on tap) */
  .fw-film__frame { aspect-ratio: var(--film-phone-ratio, 4 / 5); }
  .fw-film.is-playing .fw-film__frame { aspect-ratio: 16 / 9; }
  .fw-film__cue i { width: 56px; height: 56px; }
}

/* ---- next door: every house hands you to the next element, and the last one hands you home ---- */
.fw-next { display: block; background: var(--n-ground); color: var(--n-ink); text-decoration: none; padding: clamp(56px, 9vw, 120px) 0; }
.fw-next[data-el="earth"] { --n-ground: var(--fw-earth); --n-ink: var(--fw-bone); --n-soft: var(--fw-earth-light); }
.fw-next[data-el="fire"]  { --n-ground: var(--fw-fire); --n-ink: var(--fw-bone); --n-soft: #fde4d2; }
.fw-next[data-el="water"] { --n-ground: #0f555c; --n-ink: var(--fw-bone); --n-soft: var(--fw-water-light); }
.fw-next[data-el="air"]   { --n-ground: #4a5434; --n-ink: var(--fw-bone); --n-soft: var(--fw-air-light); }
.fw-next[data-el="all"]   { --n-ground: var(--fw-bone); --n-ink: var(--fw-ink); --n-soft: var(--fw-stone); }
.fw-next__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--fw-gutter); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px clamp(20px, 4vw, 56px); }
.fw-next .fw-knot { font-size: clamp(64px, 9vw, 120px); }
.fw-next[data-el="all"] .fw-knot { --k-air: var(--fw-air-knot); }
.fw-next__k { display: block; font: 700 12px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--n-soft); margin-bottom: 12px; }
.fw-next__name { display: block; font: 700 clamp(44px, 8vw, 120px)/.88 var(--fw-display); text-transform: uppercase; }
.fw-next__line { display: block; margin-top: 14px; font: 400 16px/1.5 var(--fw-text); color: var(--n-soft); max-width: 44ch; }
.fw-next__go { width: clamp(56px, 6vw, 80px); height: clamp(56px, 6vw, 80px); border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; transition: transform .25s var(--fw-ease); }
.fw-next__go::after { content: ""; width: 14px; height: 14px; border-top: 2px solid; border-right: 2px solid; transform: translateX(-3px) rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .fw-next:hover .fw-next__go { transform: translateX(6px); } }
.fw-next:focus-visible { outline: 3px solid var(--n-ink); outline-offset: -8px; }
@media (max-width: 640px) { .fw-next__in { grid-template-columns: 1fr auto; } .fw-next .fw-knot { grid-column: 1 / -1; font-size: 56px; } }