/* Running Retreats hub (/running-retreats/) - built 2026-10-14 with web-design, brand runnersconnect */

html,body{overflow-x:clip}
.rr,.rr *,.rr *::before,.rr *::after{box-sizing:border-box}
.rr{position:relative;z-index:0;overflow:hidden;font-family:var(--ff-body);font-weight:var(--fw-body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
.rr img{max-width:100%;display:block}
.rr a{color:var(--brand-blue-d)}
.rr h1,.rr h2,.rr h3{font-family:var(--ff-display);margin:0;overflow-wrap:anywhere;min-width:0;text-wrap:pretty}
.rr p{margin:0}
.rr .wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.rr .head .eyebrow,.rr .fit .eyebrow,.rr .eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-blue);margin:0 0 16px}

/* buttons */
.rr .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border-radius:var(--r-pill);background:var(--cta);color:var(--cta-fg);font-weight:700;font-size:16px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;box-shadow:0 6px 20px rgba(80,184,72,.32);transition:background .2s ease}
.rr .btn:hover{background:var(--cta-h)}
.rr .btn svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rr .btn--ghost{background:transparent;color:var(--ink-on-dark);box-shadow:none;border:2px solid rgba(255,255,255,.5)}
.rr .btn--ghost:hover{background:rgba(255,255,255,.1)}

/* hero */
.rr .hero{position:relative;color:var(--ink-on-dark);background:var(--brand-navy);isolation:isolate}
.rr .hero-photos{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);z-index:-2}
.rr .hero-photos img{width:100%;height:100%;object-fit:cover}
.rr .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,35,64,.62) 0%,rgba(12,35,64,.78) 55%,rgba(12,35,64,.94) 100%)}
.rr .hero-inner{padding:128px 24px 112px;text-align:center}
.rr .hero .eyebrow{color:var(--brand-green-l)}
.rr .hero h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--ink-on-dark)}
.rr .hero-sub{margin:24px 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--ink-on-dark-s);text-wrap:balance}
.rr .hero-cta{margin-top:48px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.rr .hero-dates{margin-top:48px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px;font-size:14px;font-weight:600;color:var(--ink-on-dark-s);letter-spacing:.04em;text-transform:uppercase}
.rr .hero-dates span{display:inline-flex;align-items:center;gap:10px}
.rr .hero-dates i{width:8px;height:8px;border-radius:50%;background:var(--brand-green-l)}

/* section shell */
.rr .sect{padding:var(--sect) 0}
.rr .sect--alt{background:var(--bg-alt)}
.rr .head{text-align:center;margin:0 0 var(--sect-sub)}
.rr .head h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--brand-blue)}
.rr .head p{margin-top:16px;font-size:18px;color:var(--ink-muted);text-wrap:balance}

/* retreat cards (card-spec with an image) */
.rr .retreats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:stretch}
.rr .retreat{--c-pad:32px;display:flex;flex-direction:column;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border);overflow:hidden}
.rr .retreat .c-img{position:relative;aspect-ratio:3/2;margin:calc(-1 * var(--c-pad)) calc(-1 * var(--c-pad)) 32px;border-radius:0}
.rr .retreat .badge{position:absolute;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pill);background:var(--bg);color:var(--brand-navy);font-size:14px;font-weight:700;box-shadow:var(--shadow-sm)}
.rr .retreat .badge svg{width:16px;height:16px;stroke:var(--brand-blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rr .retreat .c-eyebrow{color:var(--brand-blue)}
.rr .retreat .c-title{font-size:clamp(24px,2.4vw,30px);font-weight:800;line-height:1.15;color:var(--brand-navy);margin:0}
.rr .retreat .lede{margin:16px 0 24px;font-size:16px;line-height:1.6;color:var(--ink)}
.rr .retreat .c-figure{margin-bottom:16px}
.rr .retreat .c-kv{margin:0 0 24px}
.rr .retreat .tags{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rr .retreat .tags li{padding:8px 16px;border-radius:var(--r-pill);background:var(--card-tint-2);color:var(--brand-blue-d);font-size:13px;font-weight:600}
.rr .retreat .btn{margin-top:auto;width:100%}

/* includes */
.rr .incl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.rr .incl-item{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-items:start}
.rr .incl-ico{width:48px;height:48px;border-radius:var(--r-md);background:var(--bg);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--brand-blue)}
.rr .incl-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rr .incl-item h3{font-size:17px;font-weight:700;color:var(--ink);line-height:1.3;margin:2px 0 6px}
.rr .incl-item p{font-size:15px;line-height:1.55;color:var(--ink-muted)}

/* fit in */
.rr .fit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.rr .fit-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.rr .fit-photo img{width:100%;height:100%;object-fit:cover}
.rr .fit h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.15;color:var(--brand-blue);margin:0 0 20px}
.rr .fit p{max-width:var(--m-prose)}
.rr .fit p + p{margin-top:16px}
.rr .fit .card-strip{margin-top:32px}

/* quotes */
.rr .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}

/* final cta */
.rr .final{background:var(--brand-navy);color:var(--ink-on-dark);text-align:center}
.rr .final .eyebrow{color:var(--brand-green-l)}
.rr .final h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.15;color:var(--ink-on-dark)}
.rr .final p{margin-top:16px;font-size:18px;color:var(--ink-on-dark-s);text-wrap:balance}
.rr .final .hero-cta{margin-top:48px}
.rr .final .help{margin-top:32px;font-size:15px}
.rr .final .help a{color:var(--ink-on-dark);font-weight:600}

@media (max-width:960px){
  .rr .retreats{grid-template-columns:minmax(0,1fr);gap:40px}
  .rr .incl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rr .fit{grid-template-columns:minmax(0,1fr);gap:40px}
  .rr .quotes{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:600px){
  .rr{font-size:16px}
  .rr .wrap{padding:0 16px}
  .rr .hero-inner{padding:88px 16px 72px}
  .rr .hero-photos{grid-template-columns:minmax(0,1fr)}
  .rr .hero-photos img + img{display:none}
  .rr .retreat{--c-pad:24px}
  .rr .incl{grid-template-columns:minmax(0,1fr);gap:28px}
  .rr .hero-cta .btn{width:100%}
}
/* == brand tokens: runnersconnect (runnersconnect.net) == */
/* Source of truth: the live runnersconnect.net Elementor kit (post-55471.css, read
   2026-09-03): Montserrat everywhere; h1/h2 --e-global-color-primary #0066B3 weight 700;
   h3 #333333; links #134185 weight 500; buttons --e-global-color-secondary #50B848;
   --e-global-color-accent #61CE70; container 1140px. Ruled by Jeff 2026-09-03: Montserrat
   everywhere (Barlow Condensed on the tool pages and Playfair/DM Sans on the iron review
   retire), CTA green = the site's #50B848. Dark-section navy, off-white, border and muted
   text come from the shipped tool pages (hill calculators, temperature calculator).
   brand_lint.py allows ONLY the hex values in this file (plus rgba() of them). */
:root{
  /* -- brand core -- */
  --brand-blue:#0066B3;      /* primary: h1/h2, key highlights, rank pills */
  --brand-blue-d:#134185;    /* links (site default), pressed states */
  --brand-navy:#0C2340;      /* dark sections, hero overlays (tool pages) */
  --brand-green:#50B848;     /* THE action colour: buttons, primary CTA (site parity with header/footer) */
  --brand-green-l:#61CE70;   /* site accent: success states, light highlights */

  /* -- surfaces -- */
  --bg:#FFFFFF;              /* page base (the theme is white; custom pages match it) */
  --bg-alt:#F4F7FA;          /* alternate section band, cards on white */
  --card:#FFFFFF;
  --border:#DDE3EC;

  /* -- text -- */
  --ink:#333333;             /* headings h3+, body text — the theme's own dark text */
  --ink-2:#1A1F2E;           /* body text on tool pages (either is fine; don't mix in one page) */
  --ink-muted:#6B7280;       /* captions, secondary (4.8:1 on white) — never the theme's #7A7A7A for body, it fails AA */
  --ink-on-dark:#FFFFFF;
  --ink-on-dark-s:rgba(255,255,255,.72);

  /* -- CTA -- */
  --cta:var(--brand-green);
  --cta-h:color-mix(in srgb,var(--brand-green) 85%,black);  /* derived, no new hex */
  --cta-fg:#FFFFFF;
  --cta-2:var(--brand-blue);  /* secondary CTA: blue outline/ghost */

  /* -- type -- */
  --ff-display:'Montserrat',system-ui,sans-serif;  /* h1/h2 700; kit sizes h2 28px desktop / 22px mobile */
  --ff-body:'Montserrat',system-ui,sans-serif;     /* 400 body, 500 links, 600 subheads/buttons */
  --fw-display:700;
  --fw-body:400;

  /* -- layout -- */
  --container:1140px;        /* the theme's boxed container; custom pages inside the theme match it */

  /* -- shadows, radii (navy-tinted, from the tool pages) -- */
  --shadow-sm:0 2px 12px rgba(12,31,63,.09);
  --shadow-lg:0 8px 40px rgba(12,31,63,.16);
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:9999px;
}
/* Green is the action colour; blue carries hierarchy; navy carries weight. A page needs no
   other hue. Race-branded calculator pages layer a --race-* set on top (see brand.md). */

/* -- cards (components/cards.css reads ONLY these; added 2026-09-07, references/cards.md) --
   Derived from the values above — no new hex. Figure = blue (hierarchy), fills = blue,
   good = green. RC has no warning hue; warn falls back to the dark blue and is paired
   with a word. Proposed by Claude, to be confirmed by Jeff. */
:root{
  --card-surface:var(--card);
  --card-surface-2:var(--bg-alt);
  --card-line:var(--border);
  --card-tint:var(--bg-alt);
  --card-tint-2:rgba(0,102,179,.07);
  --card-figure:var(--brand-blue);
  --card-figure-ff:var(--ff-display);
  --card-label:var(--ink-muted);
  --card-text:var(--ink);
  --card-fill:var(--brand-blue);
  --card-fill-off:rgba(12,35,64,.16);         /* navy at 16%; the border grey sat at 1.31:1, the lint floor */
  --card-good:var(--brand-green);
  --card-warn:var(--brand-blue-d);
  --card-off:var(--ink-muted);
  --card-ico-bg:var(--bg-alt);
  --card-ico-fg:var(--brand-blue);
  --card-wash:none;
  --card-edge:none;
  --card-radius:var(--r-md);
  --card-shadow:var(--shadow-sm);
}
/* == cards: web-design components/cards.css == */
/* The card vocabulary — references/cards.md is the contract, this is the rendering.
   Reads ONLY --card-* tokens (defined per brand in brands/<slug>/tokens.css) plus
   --ff-body. Injected by normalize_layout.py after the brand block on every run; never
   copy it into a page by hand. Eight types: card-stat, card-frac, card-edit, card-strip,
   card-spec, card-table, card-steps, card-quote. Every slot is a class; every gap is a
   token. The .q-* classes at the end are the seven arrangements a set of quote cards is
   shown in. */

.card{
  --c-pad:24px;
  --c-gap-figure:6px;      /* figure -> label */
  --c-gap-line:10px;       /* label -> consequence line */
  --c-figure:44px;
  --c-label:12px;
  --c-text:15px;
  position:relative;box-sizing:border-box;container-type:inline-size;
  background:var(--card-wash,none),var(--card-surface);color:var(--card-text);
  border:1px solid var(--card-line);border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  padding:var(--c-pad);
  font-family:var(--ff-body);font-size:var(--c-text);line-height:1.5;
}
.card::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:var(--card-edge,none);pointer-events:none;border-radius:1px}
.card > :last-child{margin-bottom:0}
/* --c-figure-chars is set by cards.js to the figure's character count (0.62em per tabular digit), so a
   six-character figure in a 205px card scales down instead of running past the edge. Static default 4. */
.card > :first-child{margin-top:0}
.card p{margin:0}
@media(max-width:560px){.card{--c-pad:20px;--c-figure:36px}}

/* -- slots -- */
.c-eyebrow{font-size:var(--c-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--card-label);margin:0 0 10px}
.c-figure{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;min-width:0;font-family:var(--card-figure-ff);font-weight:var(--fw-display,800);font-size:min(var(--c-figure),calc(100cqi / var(--c-figure-chars,4)));line-height:1;color:var(--card-figure);letter-spacing:-.01em;margin:0 0 var(--c-gap-figure);font-variant-numeric:tabular-nums}
.c-unit,.c-of{white-space:nowrap;font-family:var(--ff-body);font-weight:600;font-size:var(--c-label);letter-spacing:.02em;color:var(--card-label);text-transform:none;margin-left:2px;vertical-align:baseline}
.c-figure .c-unit{font-size:calc(var(--c-label) + 2px)}
.c-label{font-size:calc(var(--c-label) + 2px);font-weight:600;color:var(--card-label);margin:0 0 var(--c-gap-line);line-height:1.3}
.c-line{color:var(--card-text);font-size:var(--c-text);line-height:1.5;margin:0}
.c-sub{font-size:var(--c-label);color:var(--card-label);margin-top:4px}
.c-delta{display:inline-flex;align-items:center;gap:6px;margin-top:var(--c-gap-line);font-size:var(--c-label);font-weight:600;color:var(--card-label)}
.c-delta::before{content:"";width:0;height:0;border:4px solid transparent}
.c-delta[data-dir=up]{color:var(--card-good)}.c-delta[data-dir=up]::before{border-bottom-color:currentColor;border-top:0}
.c-delta[data-dir=down]{color:var(--card-warn)}.c-delta[data-dir=down]::before{border-top-color:currentColor;border-bottom:0}
.c-link{display:inline-block;margin-top:var(--c-gap-line);font-size:calc(var(--c-label) + 2px);font-weight:600;color:var(--card-figure);text-decoration:none}
.c-link:hover{text-decoration:underline}
.c-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--card-figure);margin-left:8px;vertical-align:middle}

/* -- icon slot: one inline SVG family (components/cards.js injects the sprite), 20px in a 36px roundel, top-right,
   or inline before the eyebrow with .c-ico--inline. Never an emoji, never a second icon library. -- */
.c-ico{position:absolute;top:var(--c-pad);right:var(--c-pad);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--card-ico-bg,var(--card-tint));color:var(--card-ico-fg,var(--card-figure))}
.c-ico svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.card:has(> .c-ico) > .c-eyebrow,.card:has(> .c-ico) > .c-figure:first-child{padding-right:48px}
.c-ico--inline{position:static;width:28px;height:28px;border-radius:8px;display:inline-grid;vertical-align:middle;margin:0 8px 0 0}
.c-ico--inline svg{width:16px;height:16px}
.c-eyebrow:has(.c-ico--inline){display:flex;align-items:center}
/* -- image slot: a real photo or product shot, full-bleed at the top of the card (never a placeholder, never an icon blown up) -- */
.c-img{margin:calc(-1 * var(--c-pad)) calc(-1 * var(--c-pad)) 16px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--card-radius) var(--card-radius) 0 0;background:var(--card-tint)}
.c-img img{width:100%;height:100%;object-fit:cover;display:block}
.c-img--square{aspect-ratio:1}
.card-spec .c-img{margin-bottom:18px}

/* -- emphasis: one lead per group; lightness, never glow -- */
.card--lead,.card-stat--lead,.card-edit--lead,.card-spec--lead{background:var(--card-surface-2);border-color:var(--card-fill)}
.card-stat--tint{background:var(--card-tint);border-color:transparent}
.card-stat--tint.t2{background:var(--card-tint-2)}
.card-stat--offset{margin-top:var(--c-pad)}

/* -- 1 · stat tile -- */
.card-stat{display:flex;flex-direction:column}
.card-stat .c-bar,.card-stat .c-strip{margin-top:var(--c-gap-line)}

/* -- 2 · fraction: strip / bar / ring -- */
.c-strip{display:grid;grid-template-columns:repeat(var(--n,10),1fr);gap:6px;margin:var(--c-gap-line) 0 0}
.c-strip i{display:block;height:10px;border-radius:2px;background:var(--card-fill-off);position:relative}
.c-strip i.on{background:var(--card-fill)}
.c-strip i[data-l]::after{content:attr(data-l);position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:10px;font-style:normal;color:var(--card-label);white-space:nowrap}
.c-strip.has-labels{margin-bottom:22px}
@media(max-width:560px){.c-strip i:not(.on)[data-l]::after{display:none}}  /* 15 labels do not fit in 300px; lit ones carry the meaning */
@container (max-width:420px){.c-strip i:not(.on)[data-l]::after{display:none}}
.c-strip + .c-line{margin-top:calc(var(--c-gap-line) + 4px)}
.c-bar{--v:0;position:relative;height:6px;border-radius:3px;background:var(--card-fill-off);margin:var(--c-gap-line) 0 0}
.c-bar::before{content:"";position:absolute;inset:0;width:calc(var(--v) * 1%);border-radius:3px;background:var(--card-fill)}
.c-bar-foot{display:flex;justify-content:space-between;font-size:var(--c-label);color:var(--card-label);margin-top:6px}
.c-bar-foot b{color:var(--card-text);font-weight:600}
.c-ring{--v:0;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:conic-gradient(var(--card-fill) calc(var(--v) * 1%),var(--card-fill-off) 0);vertical-align:middle;margin-right:8px}
.c-ring::before{content:attr(data-v);width:24px;height:24px;border-radius:50%;background:var(--card-surface);display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--card-text)}

/* -- 3 · editorial stat card -- */
.card-edit{--c-pad:28px;display:flex;flex-direction:column}
.card-edit .c-vis{margin-top:auto;padding-top:calc(var(--c-gap-line) + 6px)}
.card-edit .c-line{font-size:var(--c-text)}
.card-edit .c-vis svg{display:block;width:100%;height:auto;max-height:120px}
.card-edit--h .c-vis svg{max-height:84px}
.card-edit--h{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto auto auto auto;column-gap:var(--c-pad);row-gap:0;align-items:start}
.card-edit--h .c-eyebrow{grid-area:1/1}.card-edit--h .c-figure{grid-area:2/1}.card-edit--h .c-label{grid-area:3/1;margin-bottom:0}
.card-edit--h .c-line{grid-area:1/2/3/3;align-self:start}
.card-edit--h .c-vis{grid-area:3/2;margin-top:calc(var(--c-gap-line) + 6px);align-self:end}
.card-edit--h .c-more{grid-area:4/1/5/3}
@media(max-width:700px){.card-edit--h{display:flex;flex-direction:column}}
.c-more{margin-top:calc(var(--c-gap-line) + 6px);border-top:1px solid var(--card-line);padding-top:10px;font-size:calc(var(--c-label) + 2px)}
.c-more summary{cursor:pointer;font-weight:600;color:var(--card-figure);list-style:none}
.c-more summary::-webkit-details-marker{display:none}
.c-more summary::after{content:" +";color:var(--card-label)}
.c-more[open] summary::after{content:" −"}
.c-more > :not(summary){margin-top:8px;color:var(--card-text)}

/* every visual says what it shows, under it, or it is not on the card (cards.md rule 11) */
.c-vis-cap{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:var(--c-label);color:var(--card-label);line-height:1.4}
.c-vis-cap i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--card-fill);vertical-align:-1px;margin-right:5px}
.c-vis-cap i.off{background:var(--card-fill-off)}
.c-vis-cap i.warn{background:var(--card-warn)}
.c-vis svg text{font-family:var(--ff-body);font-size:11px;fill:var(--card-label)}
.c-vis svg .lbl-b{fill:var(--card-text);font-weight:700}
.c-vis svg .lbl-f{fill:var(--card-figure);font-weight:700}

/* -- 4 · segmented strip -- */
.card-strip{display:flex;padding:0}
.card-strip .c-cell{flex:1 1 0;min-width:0;padding:var(--c-pad);border-left:1px solid var(--card-line);container-type:inline-size}  /* the CELL sizes its figure, not the whole strip (figure-overflow on a 4-cell strip, 2026-09-07) */
.card-strip .c-cell:first-child{border-left:0}
.card-strip .c-cell .c-label{margin-bottom:var(--c-gap-figure)}
.card-strip .c-cell .c-figure{margin-bottom:var(--c-gap-figure)}
.card-strip .c-cell--lead{background:var(--card-surface-2)}
.card-strip .c-cell:first-child.c-cell--lead{border-radius:var(--card-radius) 0 0 var(--card-radius)}
.card-strip .c-cell:last-child.c-cell--lead{border-radius:0 var(--card-radius) var(--card-radius) 0}
@media(max-width:560px){.card-strip{flex-direction:column}.card-strip .c-cell{border-left:0;border-top:1px solid var(--card-line)}.card-strip .c-cell:first-child{border-top:0}
  .card-strip .c-cell--lead{border-radius:0!important}}

/* -- 5 · spec card -- */
.card-spec .c-head{margin:0 0 14px}
.card-spec .c-head .c-eyebrow{margin-bottom:6px}
.card-spec .c-title{font-family:var(--ff-display,var(--ff-body));font-weight:var(--fw-display,800);font-size:22px;line-height:1.2;margin:0;color:var(--card-text)}
.card-spec .c-figure{--c-figure:36px;margin-bottom:14px}
.c-kv{margin:0;display:grid;gap:1px;background:var(--card-line);border-radius:calc(var(--card-radius) - 4px);overflow:hidden}
.c-kv > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 14px;background:var(--card-tint)}
.c-kv dt{margin:0;font-size:calc(var(--c-label) + 1px);color:var(--card-label);font-weight:500}
.c-kv dd{margin:0;font-weight:700;color:var(--card-text);font-variant-numeric:tabular-nums;text-align:right}
.c-kv > div.is-lead dd{color:var(--card-figure)}
.c-score{--v:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:14px}
.c-score .c-label{margin:0}
.c-score i{display:block;height:6px;border-radius:3px;background:var(--card-fill-off);position:relative}
.c-score i::before{content:"";position:absolute;inset:0;width:calc(var(--v) * 1%);border-radius:3px;background:var(--card-fill)}
.c-score b{font-size:calc(var(--c-label) + 3px);color:var(--card-text);font-variant-numeric:tabular-nums}
.c-score small{font-size:var(--c-label);color:var(--card-label);font-weight:500}

/* -- 6 · table -- */
.card-table{padding:var(--c-pad)}   /* symmetric with or without an eyebrow: the old pad-6px top assumed one (card-pad-asym on the Berlin tables, 2026-09-07) */
.card-table .c-eyebrow{margin:0 0 12px}
.card-table table{width:100%;border-collapse:collapse;font-size:var(--c-text)}
.card-table th,.card-table td{padding:11px 12px;text-align:right;border-top:1px solid var(--card-line);font-variant-numeric:tabular-nums;white-space:nowrap}
.card-table th:first-child,.card-table td:first-child{text-align:left}
.card-table thead th{border-top:0;font-size:var(--c-label);letter-spacing:.06em;text-transform:uppercase;color:var(--card-label);font-weight:600;padding-top:0}
.card-table tbody th{font-weight:700;color:var(--card-text)}
.card-table tbody td{color:var(--card-text)}
.card-table tfoot th,.card-table tfoot td{font-weight:700;border-top:2px solid var(--card-line)}
.card-table tr.is-you th,.card-table tr.is-you td{background:var(--card-surface-2);font-weight:700}
.card-table tr.is-you{outline:2px solid var(--card-fill);outline-offset:-2px}   /* cards.md §6: a 2px fill OUTLINE — the inset left stripe it replaced was rule 3's side stripe at row level (2026-09-07) */
.card-table tr.is-you td{color:var(--card-figure)}
.c-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;background:var(--card-off)}
.c-dot[data-s=good]{background:var(--card-good)}.c-dot[data-s=warn]{background:var(--card-warn)}
/* flair variant: tinted head, icon slot, the is-you row in the fill colour */
.card-table--flair thead th{background:var(--card-tint);padding-top:10px;border-radius:6px 6px 0 0}
.card-table--flair .c-ico{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:8px;color:var(--card-figure)}
.card-table--flair .c-ico svg{width:18px;height:18px;display:block}
.card-table--flair tr.is-you th,.card-table--flair tr.is-you td{background:var(--card-fill);color:var(--card-surface)}
.card-table--flair tr.is-you th:first-child{box-shadow:none;border-radius:6px 0 0 6px}
.card-table--flair tr.is-you td:last-child{border-radius:0 6px 6px 0}
.card-table--flair tr.is-you .c-tag,.card-table--flair tr.is-you .c-ico{color:inherit;opacity:.85}
/* Under 560px words wrap and numbers do not, so a four-column table fits a 342px card; a wider table
   scrolls inside the card and SAYS so — cards.js adds .is-scroll while there is more to the right, and
   the fade is the cue (Berlin feed table at 390 clipped every arrival time to one digit, 2026-09-07). */
@media(max-width:560px){
  .card-table th,.card-table td{padding:9px 6px;font-size:13px;white-space:normal}
  .card-table td.num,.card-table td.r,.card-table td:last-child{white-space:nowrap}   /* headers may wrap; numbers never */
  .card-table > table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card-table.is-scroll > table{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
}

/* -- 7 · timeline -- */
.card-steps ol{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.card-steps ol::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--card-line)}
.card-steps li{position:relative;padding:0 0 16px}
.card-steps li:last-child{padding-bottom:0}
.card-steps li::before{content:"";position:absolute;left:-22px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--card-surface);border:3px solid var(--card-fill);box-sizing:border-box}
.card-steps li.is-off::before{border-color:var(--card-off)}
.card-steps li b{font-weight:700;color:var(--card-text);margin-left:8px}
.card-steps li p{margin:4px 0 0;color:var(--card-text)}
.card-steps .c-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--card-line);font-size:calc(var(--c-label) + 2px);color:var(--card-label)}
.c-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--card-tint);color:var(--card-text);vertical-align:middle}
.c-chip[data-s=good]{background:var(--card-good);color:var(--card-surface)}
.c-chip[data-s=warn]{background:var(--card-warn);color:var(--card-surface)}
.c-chip[data-s=off]{background:var(--card-fill-off);color:var(--card-label)}

/* -- 8 · quote card (a testimonial) --
   Two rows, always in this order: photo + name + rating, then the words.
   The rating sits BESIDE the name, not on a line of its own — five glyphs do not earn a
   whole line, and the row never wraps: .c-who shrinks and, in a narrow card, the container
   query below tightens the photo, the stars and the gaps instead.
   Built from --card-* tokens only; the arrangements are further down (.q-*). */
/* margin:0 is load-bearing — this is the one type documented as a <figure>, and the UA
   gives figure `1em 40px`, which inset every quote card 40px inside its own wrapper and
   made .q-deck's ghosts (which are sized to the wrapper) stand proud of the card. */
.card-quote{--c-pad:22px;margin:0;container-type:inline-size}
.card-quote .c-by{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:0 0 12px}
.card-quote .c-av{width:40px;height:40px;flex:0 0 auto;border-radius:999px;object-fit:cover;object-position:center top;box-shadow:0 0 0 1px var(--card-line)}
.card-quote .c-who{flex:0 1 auto;min-width:0;font-size:15px;font-weight:600;color:var(--card-heading,var(--card-text));line-height:1.25}
.card-quote .c-role{display:block;font-weight:500;font-size:12.5px;color:var(--card-label);line-height:1.4}   /* optional second line — off by default */
.card-quote .c-stars{flex:0 0 auto;line-height:0;margin:0}
.card-quote .c-stars svg{display:block;width:64px;height:12px;fill:var(--card-fill)}
.card-quote .c-quote{margin:0;color:var(--card-text);font-size:15px;line-height:1.62;text-align:left}
.card-quote .c-quote p{margin:0}
.card-quote .c-hi{font-weight:600;color:var(--card-heading,var(--card-text))}   /* ONE run the speaker already wrote, lifted — never reworded, never added */
.card-quote .c-pull{margin:0 0 12px;font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.35;color:var(--card-heading,var(--card-text))}
/* Plain variant: no chrome, for a slot that already draws its own box. */
.card-quote--plain{background:none;border:0;box-shadow:none;padding:0}
.card-quote--plain::before{content:none}
/* Large variant: one quote carrying a whole section. */
.card-quote--lg{--c-pad:32px}
.card-quote--lg .c-av{width:60px;height:60px}
.card-quote--lg .c-who{font-size:17px}
.card-quote--lg .c-stars svg{width:84px;height:16px}
.card-quote--lg .c-by{margin-bottom:22px}
.card-quote--lg .c-quote{font-size:19px;line-height:1.58}
@media(max-width:560px){.card-quote--lg .c-quote{font-size:16px}}
/* Compact: a shallower card for a slot that cannot give up the height. */
.card-quote--sm{--c-pad:16px}
.card-quote--sm .c-quote{font-size:14px}
.card-quote--sm .c-stars svg{width:58px;height:11px}
/* A card too narrow for photo + name + stars tightens the row rather than wrapping it.
   Container query, not a viewport one: the same card is 245px in a phone carousel and
   320px in a desktop one, and only its own width decides. */
@container (max-width:270px){
  .card-quote .c-by{gap:7px}
  .card-quote .c-av{width:34px;height:34px}
  .card-quote .c-stars svg{width:50px;height:9px}
  .card-quote .c-who{font-size:13.5px}
}
/* Video tile — same card, a poster and a play affordance instead of words. Until the clip
   exists it is a labelled placeholder, never an empty box. */
/* Content-height, not min-height + centring: a stretched tile carries its slack under the
   last line and card_lint reads that as card-pad-asym. Padding gives it presence instead. */
/* .card.card-quote--video, not .card-quote--video: .q-wall > .card sets display:block at
   the same specificity and lands later in this file, which silently turned the tile back
   into a block box inside a wall — its children went inline and the padding read as
   asymmetric. */
.card.card-quote--video{--c-pad:40px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;background:var(--card-tint);border-style:dashed}
.card-quote--video .c-eyebrow{margin:0}
.card-quote--video .c-play{line-height:0}
.card-quote--video .c-play svg{display:block;width:46px;height:46px;fill:var(--card-fill);stroke:none}
.card-quote--video .c-vcap{font-size:13px;line-height:1.5;color:var(--card-label);max-width:24ch}

/* -- the arrangements: seven ways a set of quote cards is shown --
   Each is a wrapper class over .card.card-quote children. They carry the MECHANICS only
   (how the cards sit, move and are navigated); how many, which slot and what sits above
   them is the page's call, never baked in here.
     .q-stack    one column
     .q-wall     masonry columns — the "many people" argument
     .q-mosaic   the wall with video tiles mixed in
     .q-scroll   a fixed-height column the reader scrolls, masked top and bottom
     .q-rail     a horizontal carousel, snapped, arrows + dots, LOOPS
     .q-cover    coverflow: one lit in the middle, neighbours part-shown at either side
     .q-deck     one at a time, the rest as ghost cards behind it */

.q-stack{display:flex;flex-direction:column;gap:16px}

.q-wall,.q-mosaic{column-gap:var(--c-pad,24px)}
.q-wall{column-count:3}
.q-mosaic{column-count:4}
.q-wall > .card,.q-mosaic > .card{break-inside:avoid;display:block;margin:0 0 var(--c-pad,24px)}
@media(max-width:1100px){.q-mosaic{column-count:3}}
@media(max-width:1000px){.q-wall{column-count:2}}
@media(max-width:820px){.q-mosaic{column-count:2}}
@media(max-width:640px){.q-wall,.q-mosaic{column-count:1}}

.q-scroll{--q-h:420px;height:var(--q-h);overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;padding-right:12px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 36px,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(180deg,transparent,#000 36px,#000 calc(100% - 44px),transparent)}
.q-scroll > .card{scroll-snap-align:start;margin-bottom:16px}
.q-scroll > .card:last-child{margin-bottom:24px}
.q-scroll::-webkit-scrollbar{width:6px}
.q-scroll::-webkit-scrollbar-track{background:var(--card-fill-off);border-radius:3px}
.q-scroll::-webkit-scrollbar-thumb{background:var(--card-label);border-radius:3px}

/* Rail. The track is grid-auto-flow:column so every card is exactly --q-cw wide and the
   step is measurable; cards.js renders nothing, it only scrolls. No visible scrollbar —
   the arrows and the dots already say where you are, and a styled bar under the cards
   reads as a stray UI element. Drag, swipe and keyboard still work. */
.q-rail{position:relative;--q-cw:320px}
.q-rail .q-track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--q-cw);gap:20px;align-items:start;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
.q-rail .q-track::-webkit-scrollbar{display:none}
.q-rail .q-track > .card{scroll-snap-align:start}
.q-rail--one{--q-cw:100%}
.q-rail--one .q-track{-webkit-mask-image:none;mask-image:none}
@media(max-width:560px){.q-rail{--q-cw:84vw}.q-rail--one{--q-cw:100%}}

/* Coverflow. Both neighbours sit WHOLLY inside the stage so their rounded corners survive;
   clipping the outer edge with overflow is what squares them off. All percentages, so the
   geometry holds at any column width:
     --q-cw    card width, a share of the stage
     --q-step  neighbour offset, a share of ITS OWN width (a translateX percentage)
   A neighbour is scaled --q-scale, so its outer edge lands at
     (q-step + q-scale/2) x q-cw  from the middle — keep that under half the stage.
   66% / 32% / .88 = .483 of the stage. Change one, recheck the other two. */
.q-cover{position:relative;--q-cw:min(340px,66%);--q-step:32%;--q-scale:.88}
.q-cover .q-stage{display:grid;place-items:center;overflow:hidden;padding:2px 12px}
/* Every slide in ONE grid cell: the tallest quote fixes the height once, so the stage does
   not resize as cards move through it. */
.q-cover .q-slide{grid-area:1/1;width:var(--q-cw);transition:transform 450ms var(--ease-out,cubic-bezier(.22,1,.36,1)),opacity 450ms ease}
.q-cover .q-slide[data-d="0"]{transform:none;opacity:1;z-index:3}
.q-cover .q-slide[data-d="-1"]{transform:translateX(calc(-1 * var(--q-step))) scale(var(--q-scale));opacity:.38;z-index:2;pointer-events:none}
.q-cover .q-slide[data-d="1"]{transform:translateX(var(--q-step)) scale(var(--q-scale));opacity:.38;z-index:2;pointer-events:none}
.q-cover .q-slide[data-d="far"]{transform:scale(var(--q-scale));opacity:0;z-index:1;pointer-events:none}
@media(max-width:620px){.q-cover{--q-cw:72%;--q-step:24%}}
@media(prefers-reduced-motion:reduce){.q-cover .q-slide{transition:none}}

/* Deck. One card, the others as empty ghosts stepped behind it. The ghosts are not cards —
   they hold nothing, so they are never .card and the lint never counts them. */
.q-deck{position:relative;padding-bottom:var(--c-pad,24px)}
.q-deck .q-ghost{position:absolute;left:0;right:0;top:0;bottom:var(--c-pad,24px);border-radius:var(--card-radius);background:var(--card-surface);border:1px solid var(--card-line)}
.q-deck .q-ghost[data-g="1"]{transform:translateY(20px) scaleX(.955);background:var(--card-surface-2)}
.q-deck .q-ghost[data-g="2"]{transform:translateY(40px) scaleX(.905);background:var(--card-tint)}
.q-deck > .card{position:relative;margin:0}
.q-deck > .card[hidden]{display:none}   /* beats any author display: rule on .card */

/* Navigation — shared by .q-rail, .q-cover and .q-deck. */
.q-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.q-btn{width:40px;height:40px;flex:0 0 auto;border-radius:999px;background:var(--card-surface-2);border:1px solid var(--card-line);color:var(--card-text);display:grid;place-items:center;cursor:pointer;padding:0}
.q-btn:hover:not(:disabled){background:var(--card-surface)}
.q-btn:disabled{color:var(--card-off);cursor:default}
.q-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.q-dots{display:inline-flex;align-items:center;gap:6px}
.q-dots i{display:block;width:7px;height:7px;border-radius:999px;background:var(--card-fill-off);transition:width 200ms var(--ease-out,ease-out),background-color 200ms var(--ease-out,ease-out)}
.q-dots i.on{width:22px;background:var(--card-fill)}
@media(prefers-reduced-motion:reduce){.q-dots i{transition:none}}

/* -- hover: one property, only on a linked card, only with a pointer -- */
@media(hover:hover){
  a.card,.card[href],.card.is-link{transition:background-color 150ms var(--ease-out,ease-out)}
  a.card:hover,.card[href]:hover,.card.is-link:hover{background:var(--card-surface-2)}
}
a.card{display:block;color:inherit;text-decoration:none}
@media(prefers-reduced-motion:reduce){.card,.card *{transition:none!important}}

/* -- grids that hold cards: same gap as the pad, and a lead never changes size -- */
.card-grid{display:grid;gap:var(--c-pad,24px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
/* cards are content-height by default: a card stretched to a taller neighbour carries dead space under its last
   line, which card_lint reports as card-pad-asym. Opt a row INTO equal heights only when every card in it holds
   the same slots (a row of three stat tiles), with .card-grid--equal. */
.card-grid--equal{align-items:stretch}
.card-grid--offset{align-items:start}     /* --offset pair (ref 04): both cards content-height, the second stepped down by --c-pad; stretching the first left dead space under its last line */
.card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.card-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.card-grid--2,.card-grid--3{grid-template-columns:1fr}}
.arg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
@media(max-width:900px){.arg-grid{grid-template-columns:1fr;gap:28px}}

/* -- motion: the onboarding grammar (patterns.md → BRAND.md §7.8), applied to cards --
   Everything here is gated on html.cards-js, which components/cards.js adds only when it runs. Without the
   script — or under prefers-reduced-motion, or in a webdriver render — cards sit at rest and fully visible. */
@property --v{syntax:'<number>';inherits:false;initial-value:0}
.cards-js .card{opacity:0;transform:translateY(20px);filter:blur(5px);
  transition:opacity 700ms var(--ease-out,cubic-bezier(.16,1,.3,1)),transform 700ms var(--ease-out,cubic-bezier(.16,1,.3,1)),filter 700ms var(--ease-out,cubic-bezier(.16,1,.3,1));
  transition-delay:calc(var(--i,0) * 70ms)}
.cards-js .card.is-in{opacity:1;transform:none;filter:none}
.cards-js .c-bar,.cards-js .c-score i,.cards-js .c-ring{--v:0;transition:--v 900ms var(--ease-out,cubic-bezier(.16,1,.3,1)) 250ms}
.cards-js .is-in .c-bar,.cards-js .is-in .c-score i,.cards-js .is-in .c-ring{--v:var(--v-to,0)}
.cards-js .c-strip i.on{background:var(--card-fill-off);transition:background-color 220ms var(--ease-out,ease-out);transition-delay:calc(200ms + var(--si,0) * 45ms)}
.cards-js .is-in .c-strip i.on{background:var(--card-fill)}
.cards-js .card-table tr.is-you th,.cards-js .card-table tr.is-you td{transition:background-color 500ms var(--ease-out,ease-out) 400ms}
@media(prefers-reduced-motion:reduce){
  .cards-js .card{opacity:1;transform:none;filter:none;transition:none}
  .cards-js .c-bar,.cards-js .c-score i,.cards-js .c-ring{--v:var(--v-to,0);transition:none}
  .cards-js .c-strip i.on{background:var(--card-fill);transition:none}
}
/* == layout-system tokens (normalize_layout.py) == */
/* One measure system, not a new ch cap per block. Regeneration passes keep
   re-inventing per-block caps; this block is re-applied on every audit run. */
:root{--m-prose:68ch;--m-caption:36ch;
  --sect:96px;--sect-sub:48px}
@media(max-width:900px){:root{--sect:64px;--sect-sub:40px}}
@media(max-width:560px){:root{--sect:56px;--sect-sub:32px}}
/* The tokens are the ONLY caps a block may carry (ad-hoc ch caps are rewritten
   to them above). WHERE a cap applies is geometry, not this static block:
   Jeff 2026-09-07 — a text block alone in a row of a full-width section fills
   the container inside its padding, centred; fix_layout.py lifts the cap there
   from measured geometry, measure_layout.py flags it (constrained-in-fullwidth).
   So no `.lede` cap is installed here any more — the old
   `body .lede{max-width:var(--m-prose)}` line is what put the constraint on
   every hero on every run. Captions keep the caption token. */
body .lede{font-size:17px;line-height:1.6}
/* captions only. `.sub` came off 2026-10-06: it is the subheadline class, and a 36ch cap on it
   is what pinched centred subheads under every heading (Jeff: "every single design you do this"). */
body .cap,body figcaption{max-width:min(var(--m-caption),100%)}
/* centered heads keep their measure centered */
body [style*="text-align:center"] > .lede,body .fshead .lede{margin-left:auto;margin-right:auto}

/* -- page-specific, from running-retreats.layout.css -- */
/* == fix_layout.py: mechanical fixes (regenerated each run) == */
/* Written by fix_layout.py from measured geometry, and CUMULATIVE:
   a rule stays even once its defect stops measuring, because the rule
   is why it stopped. Do not hand-edit — regenerated every run, and
   normalize_layout.py re-injects this file into the page, so these
   rules survive a regeneration. */

/* --- nowrap (3) --- */
/* label wraps to 2 lines in a 273px button */
div.wrap.hero-inner > div.hero-cta > a.btn{white-space:nowrap;min-width:max-content}
/* label wraps to 2 lines in a 464px button */
div.rr > section.sect > div.wrap > div.retreats > article.card.card-spec.retreat > a.btn{white-space:nowrap;min-width:max-content}
/* label wraps to 2 lines in a 256px button */
div.rr > section.sect.final > div.wrap > div.hero-cta > a.btn{white-space:nowrap;min-width:max-content}

/* --- row-stack (3) --- */
/* holds a wrapping CTA — let the row stack instead of squeezing it */
div.wrap.hero-inner > div.hero-cta{flex-wrap:wrap}
/* holds a wrapping CTA — let the row stack instead of squeezing it */
div.rr > section.sect > div.wrap > div.retreats > article.card.card-spec.retreat{flex-wrap:wrap}
/* holds a wrapping CTA — let the row stack instead of squeezing it */
section.sect.final > div.wrap > div.hero-cta{flex-wrap:wrap}
/* == end fix_layout.py == */

/* kill the Elementor header's 50px bottom margin on this template */
body.page-template-running-retreats header.elementor-location-header > .elementor-section{margin-bottom:0}