/* Desert Solace, Direction A "Shade" (2026-10-18): design system and site chrome. Loaded on every page.
   1. Fonts  2. Tokens  3. Reset  4. Base type  5. Layout  6. Buttons and links  7. Forms  8. Header and nav  9. Action bar
   10. Help now dialog  11. Quick exit  12. Page header, breadcrumbs, prose, bands  13. Closing band  14. Footer  15. Utilities, motion
   Palette and contrast: design/a-shade/DIRECTION.md, with the round-1 creative review changes (warmer mist, one visible shade step,
   bark kept for one job, antelope-brush only for CTAs on dark ground and the night "lit window"). */

/* 1. Fonts (self-hosted subsets, SIL OFL: assets/fonts/OFL.txt). Both preloaded; font-display: optional so a slow first
   visit keeps the fallback instead of shifting the page when the font lands (it's cached for the next page). ------------------------------------------------------------- */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight: 300 450; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: optional;
}
/* metric-matched fallbacks keep the swap from shifting the layout */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 92%; descent-override: 26%; }
@font-face { font-family: "Source Sans Fallback"; src: local("Arial"); size-adjust: 93%; ascent-override: 103%; descent-override: 29%; }

/* 2. Tokens ------------------------------------------------------------------------------------------------------------ */
:root {
  /* five colours with jobs, plus the shade steps */
  --c-shade: #1E2925;      /* Pine shade: text, dark bands. 12.4:1 on mist, 13.8:1 on paper */
  --c-sage: #46564A;       /* Big sage: secondary text. 6.4:1 on mist, 5.3:1 on the shade step */
  --c-mist: #E7E9E1;       /* Sage mist, a hair warmer and drier: main ground */
  --c-lake: #2A4856;       /* Osoyoos Lake under cloud: buttons, links, focus. Paper on lake 8.9:1 */
  --c-brush: #E2C15A;      /* Antelope-brush: CTA on dark ground, the night "lit window". Pine on it 8.6:1 */
  --c-bark: #8A4526;       /* Ponderosa bark: one job only, the rule beside a counsellor's own hard-night line */

  --c-paper: #F4F6F1;      /* step 0 */
  --c-step: #CFD9D0;       /* the one visible step into the shade */
  --c-deep: #16201C;       /* deepest shade: footer, crisis */
  --c-rule: #A9B5A6;
  --c-rule-soft: rgba(70, 86, 74, 0.2);
  --c-on-dark: #E7E9E1;
  --c-on-dark-soft: #B9C4BB; /* 9.1:1 on pine */
  --c-flag: #EFE3B6;
  /* from the original Desert Solace logo (2023): sky over the dunes, and the sand (Mark's review 2026-11-07: "add some flavour") */
  --c-sky: #BCD6E4;
  --c-sand: #E9C796;
  --c-cream: #F6EDDC;

  --font-heading: "Newsreader", "Newsreader Fallback", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", "Source Sans Fallback", "Segoe UI", system-ui, sans-serif;

  --fs-sm: 1rem;                                   /* small meta never below 16px (tired eyes) */
  --fs-base: 1.125rem;                             /* 18px phones, 19px desktop via html font-size */
  --fs-lg: 1.3125rem;
  --fs-xl: clamp(1.375rem, 1.25rem + 0.45vw, 1.6rem);    /* 22px phone */
  --fs-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-3xl: clamp(2.85rem, 1.5rem + 6vw, 6rem);
  /* the one type scale (pass 2): every template takes its headings from these, no per-template sizes */
  --fs-h1: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);           /* 40px phone, ~64px desktop, weight 330, -0.022em */
  --fs-h2: clamp(2rem, 1.55rem + 1.5vw, 2.75rem);         /* 32px phone, weight 350, -0.015em */
  --fs-h3: var(--fs-xl);                                  /* serif H3 (and minor H2s: sidebars, footer help), weight 380 */
  --fs-label: 1.0625rem;                                  /* sans "label" H3s (Main work, A good fit for) at 600, card facts */
  --fs-voice: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);/* a counsellor's own words in the serif */
  --fs-name: clamp(3rem, 1.8rem + 4.6vw, 5.25rem);        /* profile name: one step above H1, profiles only */
  --section-y: 3.5rem;                                    /* one vertical rhythm for every full-width band */
  --lh-body: 1.6;
  --lh-heading: 1.12;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-section: 5rem;

  --radius: 3px;
  --gutter: 1rem;
  --max: 76rem;
  --measure: 38em;
  --header-h: 4rem;
  --bar-h: 4.25rem;
}
@media (min-width: 600px) { :root { --gutter: 2rem; } }
@media (min-width: 900px) { :root { --section-y: 5rem; } }
@media (min-width: 1100px) { :root { --gutter: 3rem; } }

/* 3. Reset ------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
img, video, picture, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
ul, ol { padding-left: 1.2em; }
table { border-collapse: collapse; }

/* 4. Base type --------------------------------------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* phones: focused or scrolled-to things stop above the fixed action bar (r2 tech M2, WCAG 2.4.11) */
@media (max-width: 759px) { html { scroll-padding-bottom: calc(var(--bar-h) + 1rem); } }
@media (min-width: 900px) { html { font-size: 105.5%; } }
body {
  background: var(--c-mist); color: var(--c-shade);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); font-weight: 400;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading); font-weight: 380; line-height: var(--lh-heading);
  font-optical-sizing: auto; text-wrap-style: balance; letter-spacing: 0;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.022em; font-weight: 330; line-height: 1.05; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; font-weight: 350; }
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 380; }
h4 { font-size: var(--fs-lg); line-height: 1.25; }
p, li, dd, figcaption, blockquote { text-wrap-style: pretty; }
p, li, dd { max-width: var(--measure); }
a { color: var(--c-lake); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 600; }
small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--c-rule); margin: var(--space-xl) 0; }

:focus-visible { outline: 3px solid var(--c-lake); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
.ds-on-dark :focus-visible, .ds-footer :focus-visible, .ds-crisis :focus-visible, .ds-closing :focus-visible, [data-ink="light"] :focus-visible { outline-color: var(--c-brush); }

/* 5. Layout ------------------------------------------------------------------------------------------------------------ */
.ds-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.ds-main { display: block; }
.ds-main:focus { outline: none; }
.ds-section { padding-block: var(--section-y); }

/* 6. Buttons and links ------------------------------------------------------------------------------------------------- */
.ds-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg); }
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.35rem;
  background: var(--c-lake); color: var(--c-paper); border: 1px solid var(--c-lake); border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ds-btn:hover { background: var(--c-shade); border-color: var(--c-shade); color: var(--c-paper); text-decoration: none; }
.ds-btn--secondary { background: transparent; color: var(--c-lake); border-color: var(--c-lake); }
.ds-btn--secondary:hover { background: var(--c-lake); border-color: var(--c-lake); color: var(--c-paper); }
.ds-btn--quiet { background: transparent; color: var(--c-shade); border-color: var(--c-rule); font-weight: 600; }
.ds-btn--quiet:hover { background: var(--c-step); color: var(--c-shade); border-color: var(--c-sage); }
.ds-btn--link, .ds-linkbtn {
  background: none; border: 0; padding: 0; min-height: 2.75rem; color: var(--c-lake); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer;
}
.ds-btn--link:hover, .ds-linkbtn:hover { background: none; color: var(--c-shade); text-decoration-thickness: 2px; }
.ds-linkbtn { min-height: 0; font-weight: 600; font-size: inherit; display: inline; }

/* one call-to-action rule: lake + paper on light ground, antelope-brush + pine on dark ground */
.ds-on-dark .ds-btn--primary, .ds-closing .ds-btn--primary, .ds-footer .ds-btn--primary, .ds-crisis .ds-btn--primary {
  background: var(--c-brush); border-color: var(--c-brush); color: var(--c-shade);
}
.ds-on-dark .ds-btn--primary:hover, .ds-closing .ds-btn--primary:hover, .ds-footer .ds-btn--primary:hover { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-shade); }
.ds-on-dark .ds-btn--secondary, .ds-closing .ds-btn--secondary, .ds-footer .ds-btn--secondary,
.ds-on-dark .ds-btn--quiet, .ds-closing .ds-btn--quiet { background: transparent; color: var(--c-on-dark); border-color: var(--c-on-dark-soft); }
.ds-on-dark .ds-btn--secondary:hover, .ds-closing .ds-btn--secondary:hover, .ds-footer .ds-btn--secondary:hover { background: var(--c-on-dark); color: var(--c-shade); border-color: var(--c-on-dark); }
.ds-on-dark a:not(.ds-btn), .ds-closing a:not(.ds-btn), .ds-footer a:not(.ds-btn) { color: var(--c-on-dark); }

.ds-jane-note { margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--c-sage); max-width: 34rem; }
.ds-on-dark .ds-jane-note, .ds-closing .ds-jane-note, .ds-footer .ds-jane-note { color: var(--c-on-dark-soft); }
.ds-more-link { margin-top: var(--space-lg); }
.ds-more-link a { font-weight: 600; }

/* 7. Forms (base; the contact form layout is in components.css) -------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea, .ds-form__input {
  width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem;
  background: var(--c-paper); color: var(--c-shade);
  border: 1px solid var(--c-sage); border-radius: var(--radius); font-size: 1.0625rem; line-height: 1.4;
}
textarea { min-height: 8rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--c-lake); outline-offset: 1px; border-color: var(--c-lake); }
input[type="radio"], input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--c-lake); }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* staged open questions, visible on purpose until fixed in wp-admin */
mark.ds-flag { background: var(--c-flag); color: var(--c-shade); padding: 0 0.25em; border-radius: 2px; font-size: 0.85em; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

/* 8. Header and nav ---------------------------------------------------------------------------------------------------- */
.ds-skip { position: absolute; left: 1rem; top: -5rem; z-index: 200; background: var(--c-shade); color: var(--c-paper); padding: 0.75rem 1rem; border-radius: var(--radius); font-weight: 600; }
.ds-skip:focus { top: 1rem; }
.ds-announcement { background: var(--c-shade); color: var(--c-on-dark); font-size: var(--fs-sm); padding: 0.5rem 0; }
.ds-announcement a { color: var(--c-on-dark); }

.ds-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 246, 241, 0.95);
  -webkit-backdrop-filter: saturate(1.15) blur(8px); backdrop-filter: saturate(1.15) blur(8px);
  border-bottom: 1px solid var(--c-rule-soft);
  color: var(--c-shade);
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.ds-header__inner { display: flex; align-items: center; gap: var(--space-md); min-height: var(--header-h); }
.ds-header__brand { display: inline-flex; flex-direction: row; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; margin-right: auto; padding-block: 0.4rem; }
.ds-header__logo { display: block; width: 2.6rem; height: 2.6rem; flex: none; }
@media (max-width: 399px) { .ds-header__logo { width: 2.1rem; height: 2.1rem; } }
.ds-header__name { font-family: var(--font-heading); font-weight: 380; font-variation-settings: "opsz" 36; font-size: 1.45rem; line-height: 1; letter-spacing: -0.01em; }
.ds-header__sub { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.2; margin-top: 0.2rem; color: var(--c-sage); }
.ds-header__brand:hover .ds-header__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

.ds-nav .ds-menu { list-style: none; padding: 0; margin: 0; }
.ds-menu__link { color: inherit; text-decoration: none; }
.ds-menu__link:hover { text-decoration: underline; }
.ds-menu__item--current > .ds-menu__link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.ds-nav__phone { display: none; }

.ds-header__actions { display: flex; align-items: center; gap: var(--space-sm); }
.ds-header__crisis, .ds-header__book { min-height: 2.75rem; padding: 0.5rem 1rem; }
.ds-header__menu-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0 0.9rem;
  background: transparent; border: 1px solid var(--c-rule); border-radius: var(--radius); color: inherit;
  font-weight: 600; font-size: 1rem; cursor: pointer;
}
.ds-header__menu-icon { position: relative; width: 1rem; height: 0.7rem; border-block: 2px solid currentColor; }
.ds-header__menu-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
[aria-expanded="true"] > .ds-header__menu-icon { border-color: transparent; }
[aria-expanded="true"] > .ds-header__menu-icon::after { transform: rotate(45deg); box-shadow: 0 0 0 0 currentColor; }
[aria-expanded="true"] > .ds-header__menu-icon::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transform: rotate(-45deg); }

/* phones: wordmark + Menu; Help now and Book move to the action bar */
@media (max-width: 759px) {
  .ds-header__crisis, .ds-header__book { display: none; }
}
/* below the desktop nav: Menu opens a panel under the header */
@media (max-width: 1179px) {
  .ds-js .ds-nav { display: none; }
  .ds-js .ds-menu-open .ds-nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-paper); color: var(--c-shade); border-bottom: 1px solid var(--c-rule-soft);
    padding: var(--space-sm) var(--gutter) var(--space-xl); max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .ds-nav .ds-menu__link { display: block; padding: 0.8rem 0; font-size: 1.2rem; border-bottom: 1px solid var(--c-rule-soft); }
  .ds-nav__phone { display: block; margin-top: var(--space-lg); font-weight: 600; }
  .ds-nav__phone a { color: var(--c-lake); }
  html:not(.ds-js) .ds-nav { order: 5; flex-basis: 100%; }
  html:not(.ds-js) .ds-header__inner { flex-wrap: wrap; }
  html:not(.ds-js) .ds-header__menu-toggle { display: none; }
  .ds-menu-open .ds-header { background: var(--c-paper); color: var(--c-shade); }
}
@media (min-width: 1180px) {
  .ds-header__menu-toggle { display: none; }
  .ds-nav { margin-right: var(--space-md); }
  .ds-nav .ds-menu { display: flex; align-items: center; gap: 1.5rem; }
  .ds-nav .ds-menu__link { font-size: 1rem; padding-block: 0.5rem; }
}

/* Home: while the hero is in view the header and action bar take the hero's light (ds.js sets data-ground) */
.ds-header[data-ground="hero"] { background: transparent; border-bottom-color: transparent; color: var(--hero-ink, var(--c-shade)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ds-header[data-ground="hero"] .ds-header__sub { color: var(--hero-sub, var(--c-sage)); }
.ds-header[data-ground="hero"] .ds-header__menu-toggle, .ds-header[data-ground="hero"] .ds-btn--quiet { color: var(--hero-ink, var(--c-shade)); border-color: var(--hero-rule, var(--c-rule)); }
.ds-header[data-ground="hero"] .ds-btn--quiet:hover { background: rgba(255,255,255,.12); }
.ds-header[data-ground="hero"] .ds-btn--primary, .ds-actionbar[data-ground="hero"] .ds-btn--primary { background: var(--hero-btn-bg, var(--c-lake)); border-color: var(--hero-btn-bg, var(--c-lake)); color: var(--hero-btn-ink, var(--c-paper)); }
[data-ink="light"] ~ * .ds-header__name { color: inherit; }
.ds-header[data-ground="hero"] :focus-visible { outline-color: var(--hero-focus, var(--c-lake)); }

/* 9. Phone action bar: Help now + Book, one tap from anywhere ----------------------------------------------------------- */
.ds-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(244, 246, 241, 0.97); border-top: 1px solid var(--c-rule-soft);
  transition: background-color .4s ease, border-color .4s ease;
}
.ds-actionbar .ds-btn { min-height: 3rem; }
.ds-actionbar--crisis { grid-template-columns: 1fr 1fr; }
.ds-actionbar[data-ground="hero"] { background: var(--hero-bar, rgba(244, 246, 241, 0.92)); border-top-color: transparent; }
.ds-actionbar[data-ground="hero"] .ds-btn--quiet { color: var(--hero-ink, var(--c-shade)); border-color: var(--hero-rule, var(--c-rule)); }
/* over a dark band (closing, pine, footer) the bar takes the dark ground: one CTA style per screen (ds.js, r2 creative 12) */
.ds-actionbar[data-ground="dark"], .ds-cbar[data-ground="dark"] { background: rgba(22, 32, 28, 0.96); border-top-color: rgba(185, 196, 187, 0.2); }
:is(.ds-actionbar, .ds-cbar)[data-ground="dark"] .ds-btn--primary { background: var(--c-brush); border-color: var(--c-brush); color: var(--c-shade); }
:is(.ds-actionbar, .ds-cbar)[data-ground="dark"] :is(.ds-btn--quiet, .ds-btn--secondary) { background: transparent; color: var(--c-on-dark); border-color: var(--c-on-dark-soft); }
:is(.ds-actionbar, .ds-cbar)[data-ground="dark"] :focus-visible { outline-color: var(--c-brush); }
body { padding-bottom: var(--bar-h); }
@media (min-width: 760px) { .ds-actionbar { display: none; } body { padding-bottom: 0; } }

/* 10. Help now dialog (native <dialog>, focus trapped, Esc closes): big numbers on deep shade --------------------------- */
.ds-crisis {
  width: min(36rem, calc(100vw - 1.5rem)); max-height: calc(100svh - 1.5rem); padding: 0; margin: auto;
  border: 0; border-radius: var(--radius); background: var(--c-deep); color: var(--c-on-dark); overflow-y: auto;
}
.ds-crisis::backdrop { background: rgba(22, 32, 28, 0.62); }
.ds-crisis__inner { position: relative; padding: var(--space-xl) var(--space-lg) var(--space-lg); }
@media (min-width: 600px) { .ds-crisis__inner { padding: var(--space-2xl) var(--space-2xl) var(--space-xl); } }
.ds-crisis__heading { font-size: var(--fs-h2); padding-right: 5rem; color: var(--c-on-dark); }
.ds-crisis__body { margin-top: var(--space-sm); color: var(--c-on-dark-soft); }
.ds-crisis__footnote { margin-top: var(--space-lg); font-size: var(--fs-sm); color: var(--c-on-dark-soft); }
.ds-crisis__more { margin-top: var(--space-sm); font-weight: 600; }
.ds-crisis__more a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ds-crisis__more a, .ds-crisis a { color: var(--c-on-dark); }
.ds-crisis__close-form { position: absolute; top: 0.75rem; right: 0.75rem; }
.ds-crisis__close { min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.9rem; background: transparent; color: var(--c-on-dark); border: 1px solid var(--c-on-dark-soft); border-radius: var(--radius); font-weight: 600; cursor: pointer; }
.ds-crisis__close:hover { background: var(--c-on-dark); color: var(--c-shade); }

/* crisis numbers: shared by the dialog, the footer band and the Crisis page. Light ground by default (Crisis page body);
   on dark ground (dialog, footer, a dark band) the numbers are antelope-brush, big, like B's treatment. */
.ds-lines { list-style: none; padding: 0; margin: var(--space-lg) 0 0; border-top: 1px solid var(--c-rule); }
.ds-lines__item { max-width: none; padding: 0.85rem 0; border-bottom: 1px solid var(--c-rule-soft); display: grid; gap: 0.15rem 1rem; }
.ds-lines__name { font-size: var(--fs-sm); color: var(--c-sage); max-width: none; }
.ds-lines__actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem; max-width: none; }
.ds-lines__call {
  font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1.1;
  font-variant-numeric: lining-nums; color: var(--c-shade); text-decoration: none; letter-spacing: 0.01em;
}
.ds-lines__call { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ds-lines__call:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.ds-lines__text {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.35rem 0.9rem;
  border: 1px solid var(--c-lake); border-radius: var(--radius); color: var(--c-lake); font-weight: 600; text-decoration: none; font-size: 1rem;
}
.ds-lines__text:hover { background: var(--c-lake); color: var(--c-paper); }
.ds-lines__line { font-size: var(--fs-sm); color: var(--c-sage); }
.ds-crisis .ds-lines, .ds-footer .ds-lines, .ds-lines-dark .ds-lines { border-top-color: rgba(185, 196, 187, 0.28); }
.ds-crisis .ds-lines__item, .ds-footer .ds-lines__item, .ds-lines-dark .ds-lines__item { border-bottom-color: rgba(185, 196, 187, 0.28); }
.ds-crisis .ds-lines__name, .ds-footer .ds-lines__name, .ds-lines-dark .ds-lines__name,
.ds-crisis .ds-lines__line, .ds-footer .ds-lines__line, .ds-lines-dark .ds-lines__line { color: var(--c-on-dark-soft); }
.ds-crisis .ds-lines__call, .ds-footer .ds-lines__call, .ds-lines-dark .ds-lines__call { color: var(--c-brush) !important; }
.ds-crisis .ds-lines__text, .ds-footer .ds-lines__text, .ds-lines-dark .ds-lines__text { border-color: var(--c-on-dark-soft); color: var(--c-on-dark) !important; }
.ds-crisis .ds-lines__text:hover, .ds-footer .ds-lines__text:hover, .ds-lines-dark .ds-lines__text:hover { background: var(--c-on-dark); color: var(--c-shade) !important; }
.ds-lines--compact .ds-lines__item:nth-child(n+4) .ds-lines__call { font-size: 1.6rem; }

/* 11. Quick exit (sensitive pages): a quiet outline button in the header row, beside Menu (r2 creative 1). Never floats over
   content. First in the Tab order (it is the first thing in the header), drawn just before the actions. Esc also leaves. */
.ds-header__leave {
  order: 2; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.9rem; white-space: nowrap;
  background: transparent; color: inherit; border: 1px solid currentColor; border-radius: var(--radius);
  font-weight: 600; font-size: 1rem; text-decoration: none;
}
.ds-header__leave:hover { background: var(--c-shade); color: var(--c-paper); border-color: var(--c-shade); }
.ds-header__brand { order: 1; }
.ds-nav { order: 3; }
.ds-header__actions { order: 4; }
@media (max-width: 1179px) { .ds-js .ds-nav { order: 5; } }
@media (max-width: 399px) {
  .ds-header__leave-more { display: none; }
  .ds-has-quick-exit .ds-header__sub { display: none; }
  .ds-has-quick-exit .ds-header__inner { gap: 0.5rem; }
  .ds-has-quick-exit .ds-header__leave, .ds-has-quick-exit .ds-header__menu-toggle { padding-inline: 0.7rem; }
}

.ds-qx-note { margin-top: var(--space-md); max-width: 34rem; font-size: 1rem; line-height: 1.45; color: var(--c-sage); }

/* 12. Page header, breadcrumbs, prose, bands ------------------------------------------------------------------------------ */
.ds-page-header { background: var(--c-paper); padding: var(--space-xl) 0 var(--space-2xl); border-bottom: 4px solid; border-image: linear-gradient(to right, var(--c-sky), var(--c-sand)) 1; }
@media (min-width: 900px) { .ds-page-header { padding: var(--space-2xl) 0 var(--space-3xl); } }
.ds-page-header__title { font-size: var(--fs-h1); font-weight: 330; letter-spacing: -0.022em; line-height: 1.05; max-width: 18ch; margin-top: var(--space-md); }
.ds-page-header__intro { margin-top: var(--space-lg); font-size: var(--fs-lg); line-height: 1.5; color: var(--c-sage); max-width: 38rem; }
.ds-status-note { display: inline-block; margin-top: var(--space-md); padding: 0.4rem 0.75rem; background: var(--c-mist); border-left: 3px solid var(--c-lake); font-size: var(--fs-sm); }

.ds-breadcrumbs__list { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; padding: 0; font-size: var(--fs-sm); color: var(--c-sage); }
.ds-breadcrumbs__item { max-width: none; }
.ds-breadcrumbs__item a { display: inline-block; padding-block: 0.6rem; }
.ds-breadcrumbs__item + .ds-breadcrumbs__item::before { content: "/"; margin-right: 0.5rem; color: var(--c-rule); }
.ds-breadcrumbs a { color: var(--c-sage); }

.ds-prose > * + * { margin-top: var(--space-md); }
.ds-prose h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.ds-prose h3 { margin-top: var(--space-xl); }
.ds-prose h2 + *, .ds-prose h3 + * { margin-top: var(--space-sm); }
.ds-prose :where(ul, ol):not([class*="ds-"]) > li + li { margin-top: 0.4rem; }
.ds-prose :where(ul, ol):not([class*="ds-"]) { padding-left: 1.25em; }
.ds-prose blockquote { padding-left: var(--space-lg); border-left: 2px solid var(--c-rule); font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.45; }
.ds-prose .ds-band { padding-block: var(--space-xl); }
.ds-prose .ds-band + .ds-band { border-top: 1px solid var(--c-rule-soft); }
.ds-prose .ds-band > .wp-block-group__inner-container > * + * { margin-top: var(--space-md); }
.ds-prose .ds-band h2 { margin-top: 0; }
.wp-block-group__inner-container > *:first-child { margin-top: 0; }

/* 13. Closing band: pine shade, the last call to action ------------------------------------------------------------------ */
.ds-closing { background: var(--c-shade); color: var(--c-on-dark); padding: var(--section-y) 0; }
.ds-closing__heading { font-size: var(--fs-h2); max-width: 16ch; color: var(--c-on-dark); }
.ds-closing__body { margin-top: var(--space-md); font-size: var(--fs-lg); line-height: 1.5; color: var(--c-on-dark-soft); max-width: 34rem; }
.ds-closing__note { margin-top: var(--space-lg); font-size: var(--fs-sm); color: var(--c-on-dark-soft); }

/* 14. Footer: the deepest shade ---------------------------------------------------------------------------------------- */
.ds-footer { background: var(--c-deep); color: var(--c-on-dark-soft); font-size: var(--fs-sm); }
.ds-footer__band { background: var(--c-shade); color: var(--c-on-dark); padding: var(--section-y) 0; }
.ds-footer__band-heading { font-size: var(--fs-h2); max-width: 16ch; color: var(--c-on-dark); }
.ds-footer__band-body { margin-top: var(--space-md); font-size: var(--fs-lg); color: var(--c-on-dark-soft); }
.ds-footer__help { padding: var(--space-3xl) 0 var(--space-2xl); border-bottom: 1px solid rgba(185, 196, 187, 0.18); }
.ds-footer__help-inner { display: grid; gap: var(--space-xl); }
.ds-footer__help--short { padding: var(--space-xl) 0; }
.ds-footer__help--short .ds-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--space-lg); }
.ds-footer__help--short .ds-footer__help-heading { margin: 0; font-size: var(--fs-h3); }
.ds-footer__help-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-lg); max-width: none; }
.ds-footer__help-line a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.ds-footer a.ds-footer__help-num { font-family: var(--font-heading); font-weight: 400; font-size: 1.6rem; color: var(--c-brush); text-decoration: none; }
.ds-footer a.ds-footer__help-num:hover { text-decoration: underline; text-underline-offset: 0.15em; }
@media (min-width: 900px) { .ds-footer__help-inner { grid-template-columns: 5fr 7fr; gap: var(--space-3xl); align-items: start; } }
.ds-footer__help-heading { font-size: var(--fs-h3); color: var(--c-on-dark); margin-bottom: var(--space-sm); }
.ds-footer__help-text p + p { margin-top: var(--space-sm); }
.ds-footer__help-text a { font-weight: 600; }
.ds-footer .ds-lines { margin-top: 0; }
.ds-footer .ds-lines--footer { display: grid; }
@media (min-width: 600px) { .ds-lines--footer { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); } .ds-lines--footer .ds-lines__item:nth-child(-n+2) { border-top: 0; } }
.ds-lines--footer .ds-lines__call { font-size: 1.85rem; }
.ds-footer__main { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl); }
@media (min-width: 1000px) { .ds-footer__main { grid-template-columns: 4fr 8fr; gap: var(--space-3xl); } }
.ds-footer__name { color: var(--c-on-dark); max-width: none; }
.ds-footer__wordmark { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 380; letter-spacing: -0.01em; }
.ds-footer__sub { display: block; font-size: 0.9375rem; color: var(--c-on-dark-soft); }
.ds-footer__sessions { margin-top: var(--space-md); }
.ds-footer__details, .ds-footer__social, .ds-footer__menu { list-style: none; padding: 0; margin-top: var(--space-md); }
.ds-footer__details li + li, .ds-footer__social li + li { margin-top: 0.1rem; }
.ds-footer__details a, .ds-footer__social a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ds-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
@media (min-width: 760px) { .ds-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds-footer__group-heading { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--c-on-dark); margin-bottom: var(--space-sm); }
.ds-footer__menu { margin-top: 0; }
.ds-footer__menu .ds-menu__item { max-width: none; }
.ds-footer__menu .ds-menu__link { display: inline-block; padding-block: 0.65rem; color: var(--c-on-dark-soft); line-height: 1.35; }
.ds-footer__menu .ds-menu__link:hover, .ds-footer__menu [aria-current] { color: var(--c-on-dark); }
.ds-footer__notes { padding-block: var(--space-xl) var(--space-2xl); border-top: 1px solid rgba(185, 196, 187, 0.18); }
.ds-footer__notes p + p { margin-top: var(--space-md); }
.ds-footer__ack { max-width: 46rem; }
.ds-footer__bottom { margin-top: var(--space-md); color: var(--c-on-dark-soft); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.ds-footer__notes .ds-footer__bottom p { margin: 0; }
.ds-footer__bottom p:first-child { margin-right: auto; }
.ds-footer__pride { display: inline-flex; align-items: center; gap: 0.5rem; }
.ds-footer__flag { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
@media (max-width: 40em) { .ds-footer__bottom { flex-direction: column; align-items: flex-start; } .ds-footer__bottom p:first-child { margin-right: 0; } }

/* 15. Utilities and motion ------------------------------------------------------------------------------------------------ */
.ds-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ds-script { font-family: "Noto Sans Gurmukhi", "Noto Sans Devanagari", "Mukta Mahee", "Kohinoor Devanagari", system-ui, sans-serif; font-weight: 500; }
.ds-on-dark { background: var(--c-shade); color: var(--c-on-dark); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .ds-header, .ds-actionbar, .ds-quick-exit, .ds-footer__help, .ds-hero__shadow { display: none !important; }
  body { background: #fff; padding: 0; }
}
.ds-header__book-short { display: none; }
@media (max-width: 1279px) { .ds-header__book-long { display: none; } .ds-header__book-short { display: inline; } }