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

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

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

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  fieldset {
    margin: 0;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
  }

  button,
  input,
  select,
  textarea {
    color: inherit;
    font: inherit;
  }
}

@layer tokens {
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Bitter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/bitter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    color-scheme: light;

    --color-canvas: #e8dccc;
    --color-ink: #000000;
    --color-brand: #354b30;
    --color-brand-muted: #768c71;
    --color-label: #5a5a5a;
    --color-surface: rgb(255 255 255 / 50%);
    --color-surface-solid: #f4eee6;
    --color-focus: #000000;
    --color-disabled: rgb(0 0 0 / 42%);
    --color-scrim: rgb(0 0 0 / 8%);
    --color-critical: #a3271f;
    --color-room-glow: #edb654;
    --color-transparent: transparent;
    --color-machine-compress: #8f4a2a;
    --color-machine-condense: #a3271f;
    --color-machine-expand: #5a6f8c;
    --color-machine-evaporate: #1f5aa3;

    --font-display: "Inter", Arial, sans-serif;
    --font-body: "Bitter", Georgia, serif;
    --font-label: "Inter", Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --text-display: clamp(3rem, 8vw, 7.5rem);
    --text-heading: clamp(2rem, 4.5vw, 4.5rem);
    --text-subheading: clamp(1.5rem, 2.4vw, 2.25rem);
    --text-body: 1rem;
    --text-label: 0.75rem;
    --leading-display: 0.92;
    --leading-heading: 1.08;
    --leading-body: 1.55;
    --tracking-display: -0.045em;
    --tracking-label: 0.12em;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --radius-card: 5px;
    --radius-control: 5px;
    --radius-pill: 999px;
    --border-hairline: 1px;
    --table-border-model: collapse;
    --elevation-card: 0 0.75rem 2rem rgb(0 0 0 / 8%);

    --measure-copy: 42rem;
    --measure-narrow: 30rem;
    --layout-max: 90rem;
    --layout-gutter: clamp(1rem, 3vw, 2.5rem);
    --layout-gap: clamp(1.5rem, 4vw, 4.25rem);
    --layout-content-max: 85rem;

    --focus-width: 2px;
    --focus-offset: 3px;
    --motion-instant: 80ms;
    --motion-fast: 140ms;
    --motion-base: 220ms;
    --motion-slow: 360ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --motion-distance-xs: 2px;
    --motion-distance-sm: 6px;
    --motion-distance-md: 12px;
    --motion-duration: var(--motion-fast);
    --motion-easing: var(--ease-standard);
  }
}

@layer base {
  html {
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 100%;
    line-height: var(--leading-body);
    scroll-behavior: smooth;
  }

  body {
    min-block-size: 100vh;
    overflow-wrap: break-word;
  }

  main {
    display: block;
  }

  h1,
  h2,
  h3,
  legend {
    font-family: var(--font-display);
    font-weight: var(--font-weight-regular);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
  }

  h2 {
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
  }

  h3,
  legend {
    font-size: var(--text-subheading);
    line-height: var(--leading-heading);
  }

  p,
  li,
  dd,
  dt,
  label,
  input,
  select,
  textarea,
  button {
    font-size: max(var(--text-body), 1em);
  }

  p,
  li,
  dd {
    max-inline-size: var(--measure-copy);
  }

  a {
    color: currentColor;
    text-decoration-thickness: var(--border-hairline);
    text-underline-offset: var(--space-1);
    transition: color var(--motion-fast) var(--ease-standard),
      text-decoration-color var(--motion-fast) var(--ease-standard),
      text-underline-offset var(--motion-fast) var(--ease-standard);
  }

  a:hover {
    text-underline-offset: var(--space-2);
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  :where(button, input, select, textarea):disabled,
  [aria-disabled="true"] {
    color: var(--color-disabled);
    cursor: not-allowed;
  }

  [hidden] {
    display: none !important;
  }

  ::selection {
    background: var(--color-brand);
    color: var(--color-canvas);
  }
}

@layer components {
  .c-container {
    inline-size: min(
      calc(100% - var(--layout-gutter) - var(--layout-gutter)),
      var(--layout-max)
    );
    margin-inline: auto;
  }

  .c-section {
    padding-block: clamp(var(--space-12), 8vw, var(--space-24));
  }

  .c-section--brand {
    background: var(--color-brand);
    color: var(--color-canvas);
  }

  .c-eyebrow {
    font-family: var(--font-label);
    font-size: var(--text-label);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-label);
    line-height: 1.2;
    text-transform: uppercase;
  }

  .c-header,
  .c-footer {
    font-family: var(--font-label);
  }

  .c-header {
    background: var(--color-canvas);
    border-block-end: var(--border-hairline) solid var(--color-scrim);
    inset-block-start: 0;
    position: sticky;
    z-index: 20;
  }

  /* The mark holds one size at every width; it never scales with the
     viewport. Narrow layouts wrap around it instead. */
  .c-logo {
    block-size: auto;
    inline-size: 193px;
  }

  .c-header__inner,
  .c-footer__inner,
  .c-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .c-header__inner,
  .c-footer__inner {
    justify-content: space-between;
    padding-block: var(--space-6);
  }

  .c-nav {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .c-nav a:not(.c-button) {
    display: inline-flex;
    min-block-size: 44px;
    padding-block: var(--space-3);
    text-decoration: none;
    text-decoration-color: var(--color-transparent);
    text-decoration-line: underline;
    text-underline-offset: var(--space-2);
    transition: text-decoration-color var(--motion-duration) var(--motion-easing);
  }

  .c-nav a:not(.c-button):hover {
    text-decoration-color: currentColor;
  }

  .c-nav-toggle {
    appearance: none;
    background: transparent;
    border: var(--border-hairline) solid var(--color-ink);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: none;
    min-block-size: 44px;
    padding: var(--space-2) var(--space-4);
    transition: background-color var(--motion-duration) var(--motion-easing),
      color var(--motion-duration) var(--motion-easing);
  }

  .c-nav-toggle:hover,
  [data-nav-open] .c-nav-toggle {
    background: var(--color-ink);
    color: var(--color-canvas);
  }

  .c-nav-toggle:active {
    transform: translateY(var(--border-hairline));
  }

  .c-nav a[aria-current="page"] {
    text-decoration-thickness: var(--focus-width);
  }

  .c-button {
    align-items: center;
    appearance: none;
    border: var(--border-hairline) solid var(--color-ink);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-label);
    font-weight: var(--font-weight-bold);
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: var(--space-3) var(--space-6);
    text-align: center;
    text-decoration: none;
    position: relative;
    transition: background-color var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard),
      color var(--motion-fast) var(--ease-standard),
      transform var(--motion-instant) var(--ease-standard);
  }

  .c-button--primary {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-canvas);
  }

  .c-button--secondary {
    background: transparent;
    color: var(--color-ink);
  }

  .c-button--on-brand {
    background: var(--color-canvas);
    border-color: var(--color-canvas);
    color: var(--color-brand);
  }

  .c-button:not(:disabled, [aria-disabled="true"]):hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-canvas);
  }

  .c-button:not(:disabled, [aria-disabled="true"]):active {
    transform: translateY(var(--border-hairline));
  }

  .c-button[aria-busy="true"] {
    cursor: progress;
    opacity: 0.72;
  }

  .c-button[aria-busy="true"]::after {
    animation: c-pending-spin 700ms linear infinite;
    block-size: var(--space-4);
    border: var(--border-hairline) solid currentColor;
    border-block-start-color: var(--color-transparent);
    border-radius: var(--radius-pill);
    content: "";
    inline-size: var(--space-4);
    margin-inline-start: var(--space-2);
  }

  @keyframes c-pending-spin {
    to { transform: rotate(1turn); }
  }

  .c-card {
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--elevation-card);
    display: grid;
    gap: var(--space-4);
    overflow: clip;
    padding: var(--space-6);
    position: relative;
    transition: box-shadow var(--motion-duration) var(--motion-easing),
      transform var(--motion-duration) var(--motion-easing);
  }

  .c-card:has(.c-card__link:hover) {
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 14%);
    transform: translateY(calc(var(--border-hairline) * -2));
  }

  .c-card__link {
    font-family: var(--font-label);
    font-weight: var(--font-weight-bold);
  }

  .c-card__link::after {
    content: "";
    inset: 0;
    position: absolute;
  }

  .c-card:has(.c-card__link:focus-visible) {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  .c-card__link:focus-visible {
    outline: 0;
  }

  .c-field,
  .c-choice-group {
    border: 0;
    display: grid;
    gap: var(--space-2);
    min-inline-size: 0;
    padding: 0;
  }

  .c-field__label,
  .c-field__hint,
  .c-field__error {
    max-inline-size: var(--measure-copy);
  }

  .c-field__label {
    font-family: var(--font-label);
    font-weight: var(--font-weight-bold);
  }

  .c-field__hint {
    color: var(--color-label);
  }

  .c-field__error {
    font-weight: var(--font-weight-bold);
  }

  .c-field :where(input, select, textarea) {
    background: var(--color-surface);
    border: var(--border-hairline) solid var(--color-ink);
    border-radius: var(--radius-control);
    inline-size: 100%;
    min-block-size: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .c-field :where(input, select, textarea):hover {
    border-color: var(--color-brand);
  }

  .c-field :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--color-critical);
    border-width: var(--focus-width);
  }

  .c-field__error {
    color: var(--color-critical);
  }

  .c-choice {
    align-items: center;
    border: var(--border-hairline) solid var(--color-ink);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    min-block-size: 44px;
    padding: var(--space-3) var(--space-4);
    transition: background-color var(--motion-duration) var(--motion-easing),
      color var(--motion-duration) var(--motion-easing);
  }

  .c-choice:hover:not(:has(input:checked)) {
    background: var(--color-surface-solid);
  }

  .c-choice:has(input:checked),
  [aria-selected="true"].c-choice {
    background: var(--color-brand);
    color: var(--color-canvas);
  }

  .c-choice:has(input:focus-visible) {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  .c-status {
    border-block-start: var(--focus-width) solid var(--color-ink);
    max-inline-size: var(--measure-copy);
    padding-block-start: var(--space-3);
  }

  .c-status[aria-busy="true"] {
    color: var(--color-label);
  }

  .c-progress {
    display: grid;
    font-family: var(--font-label);
    gap: var(--space-2);
    max-inline-size: var(--measure-copy);
  }

  .c-progress__meter {
    accent-color: var(--color-brand);
    block-size: var(--space-2);
    inline-size: 100%;
  }

  .c-media-fallback {
    aspect-ratio: var(--media-ratio, 4 / 3);
    background: var(--color-brand-muted);
    border-radius: var(--radius-card);
    display: grid;
    overflow: hidden;
    place-items: center;
  }

  .c-media-fallback img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  .c-scroll-region {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  @media (max-width: 64rem) {
    [data-navigation][data-nav-ready] .c-nav-toggle {
      display: inline-flex;
    }

    [data-navigation][data-nav-ready] .c-nav-panel {
      background: var(--color-canvas);
      border-block-end: var(--border-hairline) solid var(--color-scrim);
      display: block;
      inset-inline: 0;
      padding: var(--space-4) var(--layout-gutter) var(--space-6);
      position: absolute;
      top: 100%;
      opacity: 0;
      pointer-events: none;
      transform: translateY(calc(var(--motion-distance-sm) * -1));
      transition: opacity var(--motion-base) var(--ease-enter),
        transform var(--motion-base) var(--ease-enter),
        visibility 0s linear var(--motion-base);
      visibility: hidden;
    }

    [data-navigation][data-nav-ready][data-nav-open] .c-nav-panel {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      transition-delay: 0s;
      visibility: visible;
    }

    [data-navigation][data-nav-ready] .c-nav {
      align-items: stretch;
      display: grid;
    }

    [data-navigation][data-nav-ready] .c-nav a {
      inline-size: 100%;
    }
  }

}

@layer utilities {
  .u-stack {
    display: grid;
    gap: var(--stack-space, var(--space-6));
  }

  .u-cluster {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-space, var(--space-4));
  }

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

  .u-reading-width {
    max-inline-size: var(--measure-copy);
  }

  .u-visually-hidden {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-delay: 0s !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-delay: 0s !important;
      transition-duration: 0.01ms !important;
    }

    .c-button[aria-busy="true"]::after {
      animation: none;
      border-block-start-color: currentColor;
    }
  }

  @media (forced-colors: active) {
    .c-button,
    .c-choice,
    .c-field :where(input, select, textarea) {
      forced-color-adjust: auto;
    }
  }
}