/* No px. Fluid tokens run from their minimum at a 390-wide viewport to their maximum
   at 1440 for space and at 1920 for type (Utopia-style):
     clamp(MIN, INTERCEPT + SLOPE, MAX)
     slope     = (max - min) / (1440 - 390) * 100, in vw   (1920 - 390 for type)
     intercept = (min - slope * 390), in rem
   The "a → b" notes give the equivalent at the browser default root size. */

@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --sage: #5f827a; --sage-light: #8fb0a6; --sage-pale: #e4ece8;
    --ink: #1a2a38;
    --gold: #c08a30; --gold-light: #e3b961;
    --brick: #a04030;
    --cream: #f7f3eb;
    --cream-shade: color-mix(in oklab, var(--cream) 94%, var(--ink));
    --body: #2f3a44;
    --field-border: #c5d0cb;
    --on-sage: #eef3f0;
    --on-sage-muted: #cfdbd5;
    --on-ink-muted: #b7c2cc;
    --rule: color-mix(in srgb, white 18%, transparent);
    --photo-bg: #3e5c54;
    --title-dot-ink: color-mix(in srgb, var(--cream) 16%, transparent);

    /* theme: a home page repaints these in home.css */
    --page-bg: var(--cream);
    --page-fg: var(--ink);
    --copy: var(--body);
    --heading: var(--ink);
    --heading-bar: var(--gold);
    --header-bg: var(--cream);
    --header-fg: var(--ink);
    --nav-current: var(--gold);
    --btn-bg: var(--gold-light);
    --btn-line: var(--gold-light);
    --btn-fg: var(--ink);
    --focus: var(--gold-light);
    --contact-bg: var(--sage-pale);

    --font-sans: 'Libre Franklin', 'Franklin Gothic Medium', Arial, sans-serif;
    --font-wordmark: 'Zilla Slab', 'Roboto Slab', Georgia, serif;

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: clamp(0.5rem, 0.4071rem + 0.381vw, 0.75rem);     /* 8 → 12 */
    --space-s:  clamp(1rem, 0.8143rem + 0.7619vw, 1.5rem);       /* 16 → 24 */
    --space-m:  clamp(1.5rem, 1.1286rem + 1.5238vw, 2.5rem);     /* 24 → 40 */
    --space-l:  clamp(3rem, 2.0714rem + 3.8095vw, 5.5rem);       /* 48 → 88 */
    --gutter:   clamp(1.25rem, 0.2286rem + 4.1905vw, 4rem);      /* 20 → 64 */
    --gap-cols: clamp(2rem, 1.0714rem + 3.8095vw, 4.5rem);       /* 32 → 72 */
    --gap-links: clamp(0.875rem, 0.2714rem + 2.4762vw, 2.5rem);  /* 14 → 40; 14 keeps all five footer links on one line down to 360 */

    /* type is 0.95 of the shared scale, paragraphs 0.9 with a 1rem floor (Rumeal, 2026-10-17): min, slope and max of each token */
    --text-2xs:   clamp(0.7125rem, 0.6822rem + 0.1242vw, 0.8312rem);      /* 11.4 → 13.3 */
    --text-xs:    clamp(0.7719rem, 0.7416rem + 0.1242vw, 0.8906rem);   /* 12.3 → 14.2 */
    --text-s:     clamp(0.8312rem, 0.8009rem + 0.1242vw, 0.95rem);         /* 13.3 → 15.2 */
    --text-m:     clamp(0.95rem, 0.9197rem + 0.1242vw, 1.0687rem);         /* 15.2 → 17.1 */
    --text-body:  clamp(1rem, 0.964rem + 0.1863vw, 1.1875rem);     /* 16 → 19; 16 until ~400, 18.1 at 1440. 0.95 of the shared scale, the one paragraph token a step above 0.9 */
    --text-lead:  clamp(1rem, 0.8845rem + 0.2941vw, 1.2375rem);    /* 16 → 19.8; 16 until ~630, 18.4 at 1440 */
    --text-h3:    clamp(1.425rem, 1.2131rem + 0.8692vw, 2.2563rem);         /* 22.8 → 36.1 */
    --text-h2:    clamp(1.6625rem, 1.4506rem + 0.8692vw, 2.4937rem);        /* 26.6 → 39.9 */
    --text-h2-lg: clamp(1.7812rem, 1.5391rem + 0.9935vw, 2.7312rem);     /* 28.5 → 43.7 */
    /* 32.3 → 60.8, shrinking faster below 390 so "THAT WORKS FOR" stays on one line */
    --text-hero:  max(1.6625rem, min(9.595vw - 0.247rem, clamp(2.0187rem, 1.5647rem + 1.8628vw, 3.8rem)));
    --text-title: clamp(2.85rem, 2.3657rem + 1.9869vw, 4.75rem);             /* 45.6 → 76 */
    /* 30.4 at 390, meeting --text-title at about 900 */
    --text-title-long: min(var(--text-title), 0.6887rem + 4.9733vw);

    /* header logo: the comps' 150 at 390 and 220 at 1440, then growing with the type to 1920.
       Held to 40vw below 375 so logo, Donate and menu fit a 320 phone. */
    --logo-w-s: min(40vw, clamp(9.375rem, 7.75rem + 6.6667vw, 15.75rem));   /* 150 → 220 → 252 */
    --badge-w-m: 5rem;                                                 /* 80, footer badge */
    --text-wordmark: 1.9rem;                                             /* 30.4, footer "Bigger Tent" */

    --header-h:    clamp(4rem, 3.0714rem + 3.8095vw, 6.5rem);         /* 64 → 104 */
    --control-h:   3.125rem;
    --control-h-s: clamp(2.25rem, 2.1571rem + 0.381vw, 2.5rem);       /* 36 → 40 */
    --control-h-m: 2.875rem;
    --btn-chamfer: 0.5em;
    --tap:         2.75rem;
    --icon:        1.5rem;
    --textarea-h:  9rem;
    --label-col:   clamp(17.5rem, 14.7143rem + 11.4286vw, 25rem);     /* 280 → 400 */
    --measure: 54ch;

    --line: 0.0625rem;
    --line-thick: 0.125rem;
    --rule-thick: 0.375rem;

    --dot: 0.075rem;
    --dot-pitch: 1.375rem;
    --dot-ink: color-mix(in srgb, var(--cream) 18%, transparent);
    --dot-fade: clamp(14rem, 10rem + 16vw, 24rem);
    --radius: 0.875rem; --radius-ui: 0.25rem;
  }
}

@layer base {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--page-fg);
    background-color: var(--page-bg);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, p, figure { margin: 0; }
  h2 { text-wrap: balance; }
  p { text-wrap: pretty; }
  img, svg { display: block; }
  img { max-inline-size: 100%; }
  a { color: inherit; text-decoration: none; }

  :focus-visible { outline: var(--line-thick) solid var(--focus); outline-offset: var(--line-thick); }
}

@layer layout {
  .wrap { inline-size: 100%; max-inline-size: 90rem; margin-inline: auto; padding-inline: var(--gutter); }

  .section { padding-block: var(--space-l); }

  .stack { display: flex; flex-direction: column; gap: var(--space-s); }
  .stack--2xs { gap: var(--space-2xs); }
  .stack--xs { gap: var(--space-xs); }
  .stack--m { gap: var(--space-m); }
  .stack--l { gap: var(--space-l); }

  .row {
    display: grid;
    gap: var(--gap-cols);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  }
  .row > .photo { inline-size: 100%; aspect-ratio: 4 / 3; max-block-size: 28.75rem; border-radius: var(--radius); overflow: hidden; }
  /* photo | text side by side, text first when stacked. self-start keeps a child narrower
     than its cell at its own left edge rather than the rtl grid's start. */
  .row--start { align-items: start; }   /* the text starts at the photo's top edge, not centered on it */
  .row--flip { direction: rtl; }
  .row--flip > * { direction: ltr; justify-self: self-start; }

  /* heading column beside the content, wrapping above it when the content would drop under --content-min */
  .label-row {
    --content-min: 30rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-s) var(--gutter);
  }
  .label-row > :first-child { flex: 0 1 var(--label-col); }
  .label-row > :last-child { flex: 1 1 var(--content-min); min-inline-size: 0; }

  .auto-grid {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
}

@layer components {

  .brand__logo { inline-size: var(--logo-w-s); block-size: auto; }

  /* cuts all four corners at 45° by --c. A layer inset by d inside another takes c − 0.586d (2 − √2),
     so its diagonals stay as thick and as far in as its straight sides. */
  .btn::before,
  .btn::after { clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }

  .btn {
    --btn-inset: 0rem;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--control-h);
    padding: 0 1.75em;
    border: 0;
    background: none;
    color: var(--btn-fg);
    font-family: inherit;
    font-size: var(--text-m);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s ease, color 0.15s ease;
  }
  /* the badge's cut-corner line, once: a line layer, then the fill inset by the line's width */
  .btn::before,
  .btn::after { content: ""; position: absolute; z-index: -1; transition: background-color 0.15s ease; }
  .btn::before { --c: var(--btn-chamfer); inset: var(--btn-inset); background: var(--btn-line); }
  .btn::after { --c: calc(var(--btn-chamfer) - 0.586 * var(--line-thick)); inset: calc(var(--btn-inset) + var(--line-thick)); background: var(--btn-bg); }
  .btn:hover { filter: brightness(1.07); }
  .btn:focus-visible { outline-offset: calc(var(--line-thick) - var(--btn-inset)); }
  .stack > .btn { align-self: flex-start; }

  /* drawn inside a box 0.25rem larger all round, so the short header button keeps a comfortable hit area */
  .btn--nav {
    --btn-inset: 0.25rem;
    min-block-size: calc(var(--control-h-s) + 2 * var(--btn-inset));
    margin: calc(-1 * var(--btn-inset));
    padding-inline: calc(1.25em + var(--btn-inset));
    font-size: var(--text-s);
  }


  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: var(--header-bg);
    color: var(--header-fg);
    --focus: var(--header-fg);
  }
  main { scroll-margin-block-start: var(--header-h); }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: var(--header-h);
  }
  .site-header__actions { display: flex; align-items: center; gap: var(--space-2xs); }

  .primary-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-s) var(--gutter) var(--space-m);
    background: var(--header-bg);
    border-block: var(--line) solid color-mix(in srgb, currentColor 14%, transparent);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .site-header[data-open] .primary-nav { display: flex; }
  .primary-nav a {
    padding-block: 0.75em;
    border-block-end: var(--line-thick) solid transparent;
    color: color-mix(in srgb, var(--header-fg) 78%, transparent);
  }
  .primary-nav a:hover,
  .primary-nav a[aria-current="page"] { color: var(--header-fg); }
  .primary-nav a[aria-current="page"] { border-block-end-color: var(--nav-current); }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .nav-toggle svg {
    inline-size: var(--icon);
    block-size: var(--icon);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
  }
  .nav-toggle .icon-close,
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  /* the one breakpoint, 900 at the default root size */
  @media (min-width: 56.25em) {
    .site-header { position: relative; }
    main { scroll-margin-block-start: 0; }
    .site-header__actions { gap: var(--space-m); }

    .primary-nav {
      display: flex;
      position: static;
      flex-direction: row;
      align-items: center;
      gap: var(--space-m);
      padding: 0;
      background: none;
      border: 0;
      letter-spacing: 0.01em;
    }
    .nav-toggle { display: none; }
  }

  .h2 {
    font-size: var(--text-h2);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--heading);
  }
  .h2--lg { font-size: var(--text-h2-lg); line-height: 1.05; letter-spacing: -0.02em; }
  /* half the inner pages' heading column, so the bar is the same length under every heading */
  .h2::after {
    content: "";
    display: block;
    inline-size: min(100%, calc(var(--label-col) / 2));
    block-size: var(--rule-thick);
    margin-block-start: 0.35em;
    background: var(--heading-bar);
  }

  .prose { max-inline-size: var(--measure); }
  .prose p { color: var(--copy); }
  .prose--lead { font-size: var(--text-lead); }
  .prose .emphasis { font-weight: 600; }

  .photo { position: relative; background: var(--photo-bg); }
  .photo img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .page-title {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: calc(var(--space-l) + var(--space-m)) var(--space-l);
    background: var(--sage);
    color: white;
  }
  /* dots growing in from the right, so the title sits on the plain side */
  .page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(var(--title-dot-ink) var(--dot), transparent var(--dot)) 0 0 / var(--dot-pitch) var(--dot-pitch);
    mask-image: linear-gradient(to right, transparent 30%, black 85%);
  }
  @media (min-width: 56.25em) {
    .page-title::before { mask-image: linear-gradient(to right, transparent 45%, black 80%); }
  }
  .page-title h1 {
    font-size: var(--text-title);
    line-height: 1;
    text-wrap: balance;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .page-title--long h1 { font-size: var(--text-title-long); }

  /* dots at the top and bottom of a block, fading to the plain ground between */
  .dot-fade { position: relative; isolation: isolate; }
  .dot-fade::before,
  .dot-fade::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    block-size: var(--dot-fade);
    background-image: radial-gradient(var(--dot-ink) var(--dot), transparent var(--dot));
    background-size: var(--dot-pitch) var(--dot-pitch);
    pointer-events: none;
  }
  .dot-fade::before { inset-block-start: 0; mask-image: linear-gradient(to bottom, black, transparent); }
  .dot-fade::after { inset-block-end: 0; mask-image: linear-gradient(to top, black, transparent); }
  .dot-fade--end::before { content: none; }

  .band--shade { background: var(--cream-shade); }

  .videos .label-row { --content-min: 49.5rem; }
  .videos__intro p { max-inline-size: 22rem; color: var(--copy); }
  /* two per row; a third starts the next row */
  .video-list {
    gap: var(--space-m) var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  }

  .video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--photo-bg);
  }
  .video__frame iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }
  .video figcaption { display: flex; flex-direction: column; gap: var(--space-3xs); }
  .video__place {
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brick);
  }
  .video__title { font-weight: 600; line-height: 1.3; }

  /* a light band whatever the page around it is painted with */
  .contact {
    --heading: var(--ink);
    --copy: var(--body);
    --heading-bar: var(--gold);
    --focus: var(--ink);
    background-color: var(--contact-bg);
    color: var(--ink);
  }
  .contact__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-m) var(--gutter);
  }
  .contact__intro { flex: 5 1 20rem; }
  .contact__intro p { max-inline-size: 26rem; color: var(--copy); }
  .contact-form { flex: 7 1 26rem; min-inline-size: 0; }

  .field label {
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--heading);
  }
  .field input,
  .field textarea {
    inline-size: 100%;
    border: var(--line-thick) solid var(--field-border);
    border-radius: var(--radius-ui);
    background: white;
    color: var(--ink);
    font-family: inherit;
    font-size: max(1rem, var(--text-m));   /* never under 16: iOS zooms into smaller fields */
  }
  .field input { min-block-size: var(--control-h); padding: 0 1em; }
  .field textarea { min-block-size: var(--textarea-h); padding: 0.875em 1em; line-height: 1.5; resize: vertical; }
  .contact-form .btn { --btn-bg: var(--brick); --btn-line: var(--brick); --btn-fg: white; }
  .form-status { font-size: var(--text-s); color: var(--heading); }

  .site-footer {
    padding-block: calc(var(--space-m) * 1.6) var(--space-m);
    background: var(--ink);
    color: white;
    text-align: center;
  }
  .site-footer__inner { align-items: center; }
  .brand--footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); }
  .brand__badge { inline-size: var(--badge-w-m); block-size: auto; aspect-ratio: 616 / 462; }
  .wordmark { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
  .wordmark__name {
    padding-block-end: var(--space-2xs);
    border-block-end: var(--line-thick) solid var(--gold);
    font-family: var(--font-wordmark);
    font-size: var(--text-wordmark);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  /* the leading pad matches the trailing tracking, so the word sits centered */
  .wordmark__sub {
    padding-inline-start: 0.32em;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs) var(--gap-links);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .footer-nav a:hover { color: var(--on-ink-muted); }
  .footer-nav .is-donate,
  .footer-nav .is-donate:hover { color: var(--gold-light); }

  .site-footer__legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3xs);
    inline-size: 100%;
    padding-block-start: var(--space-s);
    border-block-start: var(--line) solid var(--rule);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--on-ink-muted);
  }
}

@layer utilities {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--gutter);
    inset-block-start: -10rem;
    z-index: 20;
    padding: 0.625em 0.875em;
    border-radius: var(--radius-ui);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
  }
  .skip-link:focus { inset-block-start: var(--space-2xs); }
}