/* Deductive design system: components for plain HTML sites.
   Load after tokens.css. Light only. Class prefix: dds-. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--jet); font-family: var(--font-serif); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--oxford-blue); margin: 0; text-wrap: balance; }
h1 { font-size: 48px; line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 32px; line-height: 1.2; font-weight: 700; }
h3 { font-size: 22px; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
.dds-prose > * + * { margin-top: 1em; }
.dds-prose { max-width: var(--reading-width); }
.dds-lead { font-family: var(--font-serif); font-size: 20px; line-height: 1.6; color: var(--jet); max-width: var(--reading-width); }
.dds-accent { color: var(--barn-red); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--barn-red); outline-offset: 2px; }
@media (max-width: 640px) {
  body { font-size: 17px; }
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .dds-lead { font-size: 18px; }
}

/* ---------- Links ---------- */
.dds-link, .dds-prose a { color: var(--barn-red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: var(--radius-sm); }
.dds-link:hover, .dds-prose a:hover { color: var(--barn-red-hover); text-decoration-thickness: 2px; }
.dds-link--arrow { font-family: var(--font-sans); font-weight: 600; font-size: 16px; text-decoration: none; }
.dds-link--arrow::after { content: " \2192"; }
.dds-link--arrow:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.dds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-5); border: 0; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 120ms ease; }
.dds-btn--primary { background: var(--barn-red); color: var(--white); }
.dds-btn--primary:hover { background: var(--barn-red-hover); }
.dds-btn--secondary { background: var(--alabaster); color: var(--oxford-blue); }
.dds-btn--secondary:hover { background: var(--alabaster-hover); }
.dds-btn:focus-visible { outline: 2px solid var(--barn-red); outline-offset: 3px; }
.dds-btn:disabled, .dds-btn[aria-disabled="true"] { background: var(--callout-neutral); color: var(--field-border); cursor: not-allowed; }
.dds-btn--block { display: flex; width: 100%; }
.dds-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
@media (prefers-reduced-motion: reduce) { .dds-btn { transition: none; } }

/* ---------- Form fields ---------- */
.dds-form { display: grid; gap: var(--space-5); max-width: 560px; }
.dds-field { display: grid; gap: var(--space-2); }
.dds-label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--oxford-blue); }
.dds-optional { font-weight: 400; color: var(--dim-gray); }
.dds-hint { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--dim-gray); }
.dds-input, .dds-textarea, .dds-select { width: 100%; min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: 1px solid var(--field-border); border-radius: var(--radius-md); background: var(--white); color: var(--jet); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
.dds-textarea { min-height: 144px; resize: vertical; }
.dds-input::placeholder, .dds-textarea::placeholder { color: var(--dim-gray); }
.dds-input:hover, .dds-textarea:hover, .dds-select:hover { border-color: var(--dim-gray); }
.dds-input:focus, .dds-textarea:focus, .dds-select:focus { outline: none; border-color: var(--barn-red); box-shadow: 0 0 0 1px var(--barn-red); }
.dds-input:disabled, .dds-textarea:disabled, .dds-select:disabled { background: var(--callout-neutral); color: var(--field-border); cursor: not-allowed; }
.dds-field--error .dds-input, .dds-field--error .dds-textarea, .dds-field--error .dds-select { border-color: var(--barn-red); border-width: 2px; padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }
.dds-error { display: flex; gap: var(--space-2); align-items: flex-start; font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--barn-red); }
.dds-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--barn-red); color: var(--white); font-size: 12px; font-weight: 800; line-height: 1; }
.dds-select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%230E172B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

/* Checkbox */
.dds-check { display: flex; gap: var(--space-3); align-items: flex-start; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--jet); cursor: pointer; }
.dds-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--barn-red); cursor: pointer; }
.dds-check input:focus-visible { outline: 2px solid var(--barn-red); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- Layout ---------- */
.dds-container { width: 100%; max-width: calc(var(--content-width) + 2 * var(--space-5)); margin-inline: auto; padding-inline: var(--space-5); }
.dds-section { padding-block: var(--space-9); background: var(--white); }
.dds-section--alt { background: var(--seasalt); }
.dds-section-heading { display: grid; gap: var(--space-4); max-width: var(--reading-width); margin-bottom: var(--space-7); }
.dds-eyebrow { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--barn-red); }
.dds-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 640px) {
  .dds-container { padding-inline: var(--space-4); }
  .dds-section { padding-block: var(--space-8); }
  .dds-section-heading { margin-bottom: var(--space-6); }
}

/* ---------- Site header and navigation ---------- */
/* Wider than 640px: a horizontal bar with every main link visible. 640px and narrower (phones): a Menu button. */
.dds-header { container-type: inline-size; background: var(--white); position: relative; z-index: 10; }
.dds-header--sticky { position: sticky; top: 0; }
.dds-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); min-height: 88px; padding-block: var(--space-3); }
.dds-header__brand { display: inline-flex; flex: none; }
.dds-header__brand img { display: block; height: var(--header-logo-height); width: auto; }
.dds-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-6); margin: 0; padding: 0; list-style: none; }
.dds-nav__item { position: relative; }
.dds-nav__link { display: inline-flex; align-items: center; gap: 6px; padding-block: var(--space-2); border: 0; background: none; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--oxford-blue); text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm); cursor: pointer; }
.dds-nav__link:hover { color: var(--barn-red); }
.dds-nav__link[aria-current="page"], .dds-nav__link--current { color: var(--barn-red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.dds-nav-toggle { display: none; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--alabaster); color: var(--oxford-blue); font-family: var(--font-sans); font-size: 16px; font-weight: 600; cursor: pointer; }
.dds-nav-toggle:hover { background: var(--alabaster-hover); }
.dds-nav-toggle__icon { display: inline-grid; gap: 4px; width: 18px; }
.dds-nav-toggle__icon span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
@container (max-width: 640px) {
  .dds-header__inner { min-height: 72px; gap: 0 var(--space-4); }
  .dds-header__brand img { height: 36px; }
  .dds-nav-toggle { display: inline-flex; }
  .dds-nav { display: none; flex-basis: 100%; padding-block: var(--space-2) var(--space-3); }
  .dds-header[data-open] .dds-nav { display: block; }
  .dds-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .dds-nav__item + .dds-nav__item { border-top: 1px solid var(--alabaster); }
  .dds-nav__link { display: flex; width: 100%; justify-content: space-between; padding-block: var(--space-3); font-size: 18px; }
  .dds-nav__link[aria-current="page"], .dds-nav__link--current { text-decoration: none; }
}

/* Submenu: a disclosure button in the bar that opens a short list of links. */
.dds-nav__sub-toggle::after { content: ""; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 120ms ease; }
.dds-nav__sub-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.dds-subnav { position: absolute; top: calc(100% + var(--space-1)); left: calc(-1 * var(--space-4)); min-width: 260px; margin: 0; padding: var(--space-2) 0; list-style: none; background: var(--white); border: 1px solid var(--alabaster-hover); border-radius: var(--radius-md); z-index: 20; }
.dds-subnav[hidden] { display: none; }
.dds-subnav a { display: block; padding: var(--space-2) var(--space-4); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; color: var(--jet); text-decoration: none; }
.dds-subnav a:hover { background: var(--seasalt); color: var(--barn-red); }
.dds-subnav a[aria-current="page"] { color: var(--barn-red); font-weight: 600; }
.dds-subnav a:focus-visible { outline-offset: -2px; }
@container (max-width: 640px) {
  .dds-subnav { position: static; min-width: 0; margin: 0 0 var(--space-2); padding: 0 0 0 var(--space-4); border: 0; border-left: 2px solid var(--alabaster); border-radius: 0; }
  .dds-subnav a { padding-inline: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .dds-nav__sub-toggle::after { transition: none; } }

/* ---------- Dialog (pop-up window) ---------- */
.dds-dialog { width: calc(100% - 2 * var(--space-4)); max-width: 560px; max-height: calc(100% - 2 * var(--space-4)); margin: auto; padding: 0; border: 0; overflow: auto; border-radius: var(--radius-md); background: var(--white); color: var(--jet); }
.dds-dialog::backdrop { background: rgba(14, 23, 43, 0.6); }
html:has(.dds-dialog:modal) { overflow: hidden; }
/* A static picture of the dialog, for documentation pages only. */
.dds-dialog--sample { display: block; position: static; width: 100%; margin: 0; border: 1px solid var(--alabaster-hover); }
.dds-dialog__inner { display: grid; gap: var(--space-4); padding: var(--space-6); }
.dds-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.dds-dialog__title { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 700; color: var(--oxford-blue); margin: 0; }
.dds-dialog__body { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; }
.dds-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.dds-icon-btn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--alabaster); color: var(--oxford-blue); font-family: var(--font-sans); font-size: 22px; line-height: 1; font-weight: 600; cursor: pointer; }
.dds-icon-btn:hover { background: var(--alabaster-hover); }
.dds-icon-btn:disabled { background: var(--callout-neutral); color: var(--field-border); cursor: not-allowed; }

/* ---------- Tabs ---------- */
.dds-tabs__list { display: flex; gap: var(--space-6); overflow-x: auto; border-bottom: 1px solid var(--alabaster-hover); scrollbar-width: thin; }
.dds-tab { flex: none; margin: 0 0 -1px; padding: var(--space-3) 0; border: 0; border-bottom: 3px solid transparent; background: none; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--dim-gray); cursor: pointer; white-space: nowrap; }
.dds-tab:hover { color: var(--oxford-blue); }
.dds-tab[aria-selected="true"] { color: var(--barn-red); border-bottom-color: var(--barn-red); }
.dds-tab:focus-visible { outline-offset: -2px; }
.dds-tabpanel { padding-top: var(--space-6); }
.dds-tabpanel:focus-visible { outline-offset: 4px; }

/* ---------- Carousel ---------- */
.dds-carousel { display: grid; gap: var(--space-5); }
.dds-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.dds-carousel__track::-webkit-scrollbar { display: none; }
.dds-carousel__slide { scroll-snap-align: start; min-width: 0; }
.dds-carousel__controls { display: flex; align-items: center; gap: var(--space-3); }
.dds-carousel__status { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--dim-gray); margin-left: var(--space-2); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .dds-carousel__track { scroll-behavior: auto; } }

/* ---------- Site footer ---------- */
.dds-footer { background: var(--alabaster); color: var(--jet); padding-block: var(--space-7); font-family: var(--font-sans); font-size: 15px; line-height: 24px; }
.dds-footer__top { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-9); justify-content: space-between; align-items: flex-start; }
.dds-footer__brand img { display: block; height: 32px; width: auto; }
.dds-footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-9); }
.dds-footer__title { font-weight: 600; color: var(--oxford-blue); margin-bottom: var(--space-2); }
.dds-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.dds-footer a { color: var(--jet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dds-footer a:hover { color: var(--barn-red); }
.dds-footer__legal { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--alabaster-hover); font-size: 14px; line-height: 20px; color: var(--jet); }

/* ---------- Stat tiles ---------- */
.dds-stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dds-stat { background: var(--oxford-blue); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; }
.dds-stat__number { font-family: var(--font-sans); font-size: 48px; line-height: 1.05; font-weight: 800; color: var(--white); font-variant-numeric: tabular-nums; }
.dds-stat__label { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--light-tint); }

/* ---------- Testimonial ---------- */
.dds-testimonial { margin: 0; display: flex; gap: var(--space-5); align-items: flex-start; max-width: 760px; }
.dds-testimonial__portrait { flex: none; width: 72px; height: 72px; border-radius: var(--radius-full); object-fit: cover; background: var(--alabaster); }
.dds-testimonial__body { display: grid; gap: var(--space-4); min-width: 0; }
.dds-testimonial blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.55; color: var(--jet); }
.dds-testimonial figcaption { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--dim-gray); }
.dds-testimonial figcaption strong { display: block; color: var(--oxford-blue); font-weight: 700; font-size: 16px; }
@media (max-width: 640px) { .dds-testimonial { flex-direction: column; gap: var(--space-4); } .dds-testimonial__portrait { width: 64px; height: 64px; } }

/* ---------- Quote block ---------- */
.dds-quote { margin: 0; padding-left: var(--space-5); border-left: 4px solid var(--barn-red); max-width: var(--reading-width); }
.dds-quote p { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.55; color: var(--jet); }
.dds-quote cite { display: block; margin-top: var(--space-3); font-family: var(--font-sans); font-style: normal; font-size: 15px; line-height: 22px; color: var(--dim-gray); }

/* ---------- Callouts ---------- */
.dds-callout { padding: var(--space-6); background: var(--callout-neutral); color: var(--jet); font-family: var(--font-serif); font-size: 17px; line-height: 1.6; max-width: var(--reading-width); }
.dds-callout > * + * { margin-top: var(--space-3); }
.dds-callout__label { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--oxford-blue); }
.dds-callout--exercise { background: var(--callout-exercise); }
.dds-callout--info { background: var(--callout-info); }
.dds-callout--caution { background: var(--callout-caution); }
.dds-callout--positive { background: var(--callout-positive); }

/* ---------- Table ---------- */
.dds-table-block { max-width: 100%; }
.dds-table-title { font-family: var(--font-sans); font-weight: 700; font-size: 18px; line-height: 26px; color: var(--oxford-blue); margin-bottom: var(--space-3); }
.dds-table-scroll { overflow-x: auto; }
.dds-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--jet); }
.dds-table thead th { text-align: left; font-weight: 700; color: var(--barn-red); background: var(--white); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--jet); vertical-align: bottom; }
.dds-table td, .dds-table tbody th { text-align: left; padding: var(--space-3) var(--space-4); vertical-align: top; }
.dds-table tbody th { font-weight: 700; color: var(--oxford-blue); }
.dds-table tbody tr:nth-child(even) { background: var(--seasalt); }
.dds-table tbody tr:nth-child(odd) { background: var(--white); }
.dds-table-source { margin-top: var(--space-2); font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--dim-gray); }