/* 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); }
}

/* ---- 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; }