/* tokens.css */
/*
 * PROVISIONAL NEUTRAL GRAYSCALE TOKENS — TEMPORARY AND REPLACEABLE.
 *
 * These values are a deliberately neutral, contrast-tested placeholder set for
 * Phase 3A.3 framework fixtures only. They are NOT approved branding. No
 * palette (including Coastal Calm Version 2), typeface, wordmark, imagery, or
 * visual brand direction is selected here. A later authorized visual-design
 * phase replaces these values from this one token file without changing
 * structure. Token names describe purpose, not appearance.
 */

:root {
  /* Color roles (grayscale placeholders; text/background pairs meet >= 4.5:1). */
  --background-canvas: #ffffff;
  --background-surface: #f3f3f4;
  --background-subtle: #e7e7e9;
  --background-inverse: #1c1c1e;

  --text-primary: #1a1a1c;   /* ~15.8:1 on canvas */
  --text-muted: #46464a;     /* ~8.9:1 on canvas */
  --text-on-inverse: #f7f7f8;

  --border-default: #bdbdc2;
  --border-strong: #86868c;

  --accent-primary: #2b2b2e;
  --action-primary: #1f1f22;   /* link/button base, ~14:1 on canvas */
  --action-hover: #000000;
  --action-active: #000000;

  --focus-ring: #101012;

  /* Status roles never communicate meaning by color alone; components pair
     these with text labels and shape (borders). In this grayscale placeholder
     they are distinguished by border weight rather than hue. */
  --status-error: #1a1a1c;
  --status-success: #1a1a1c;
  --status-warning: #1a1a1c;

  /* Typography roles (system-font fallbacks only; no webfont is selected). */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-interface: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-monospace: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Fluid type roles. */
  --type-display: clamp(2rem, 1.4rem + 3vw, 3rem);
  --type-h1: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);
  --type-h2: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  --type-h3: clamp(1.175rem, 1.05rem + 0.6vw, 1.375rem);
  --type-h4: 1.0625rem;
  --type-body: 1rem;
  --type-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --type-small: 0.875rem;

  --line-height-body: 1.6;
  --line-height-heading: 1.25;
  --measure-default: 68ch;
  --measure-narrow: 60ch;

  /* Spacing scale (small consistent progression). */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* Containers and gutters. */
  --container-standard: 66rem;
  --container-wide: 78rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* Radii by role. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows by role (used sparingly). */
  --shadow-low: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.16);

  /* Borders and focus. */
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Motion roles (respect reduced motion; see base.css). */
  --motion-duration-fast: 120ms;
  --motion-duration-medium: 200ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0.2, 1);

  /* Layer/z-index roles. */
  --layer-header: 100;
  --layer-nav: 200;
  --layer-alert: 300;
}

/* base.css */
/* Reset / base — box sizing, sensible defaults, focus, media, reduced motion. */

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

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

body {
  margin: 0;
  background-color: var(--background-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--line-height-body);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote {
  margin: 0;
}

img, picture, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--action-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--action-hover);
}

a:active {
  color: var(--action-active);
}

/* Strong, always-visible keyboard focus that is not communicated by color alone. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Fallback focus for engines without :focus-visible. */
a:focus,
button:focus,
[tabindex]:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

button {
  font: inherit;
  cursor: pointer;
}

/* Honor reduced-motion: remove non-essential animation and smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* typography.css */
/* Typography — type roles, reading measure, lists, blockquotes, article body. */

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--type-h1);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--type-h2);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--type-h3);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

h4 {
  font-family: var(--font-heading);
  font-size: var(--type-h4);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

p,
li,
dd,
dt {
  font-size: var(--type-body);
}

.lead {
  font-size: var(--type-lead);
  color: var(--text-muted);
}

small,
.text-small {
  font-size: var(--type-small);
}

/* Readable measure for prose blocks. */
.article__body,
.section__inner > p,
.section__inner > ul,
.section__inner > ol,
.page-hero__context {
  max-width: var(--measure-default);
}

.page__body--narrow .article__body,
.page__body--narrow .section__inner > p,
.page__body--narrow .section__inner > ul,
.page__body--narrow .section__inner > ol {
  max-width: var(--measure-narrow);
}

/* Flow spacing inside prose. */
.article__body > * + *,
.section__inner > * + * {
  margin-top: var(--space-sm);
}

.article__body h2,
.article__body h3 {
  margin-top: var(--space-lg);
}

ul,
ol {
  padding-inline-start: 1.5em;
}

li + li {
  margin-top: var(--space-3xs);
}

.prose-quote {
  border-inline-start: var(--border-width-strong) solid var(--border-strong);
  padding-inline-start: var(--space-sm);
  color: var(--text-muted);
}

.prose-quote__cite {
  margin-top: var(--space-2xs);
  font-size: var(--type-small);
}

code,
kbd,
samp {
  font-family: var(--font-monospace);
  font-size: 0.9em;
}

/* layout.css */
/* Layout — containers, page scaffold, sections, grids. Mobile-first. */

.container {
  width: 100%;
  max-width: var(--container-standard);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page {
  padding-block: var(--space-lg);
}

.page__main:focus {
  outline: none; /* programmatic focus target; visible focus lives on interactive controls */
}

.page__body > * + * {
  margin-top: var(--space-lg);
}

.section__inner {
  max-width: var(--container-standard);
}

.section + .section {
  margin-top: var(--space-lg);
}

/* Content-driven card grid: one column, then as many as fit. */
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.article-card-list,
.resource-list,
.route-suggestions__list,
.book-detail__action-list,
.related__list,
.cluster-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-card-list {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 48rem) {
  .article-card-list {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }
}

/* Book detail: stack on small screens, two columns when there is room. */
.book-detail {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .book-detail {
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    align-items: start;
  }
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.site-footer__columns {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .site-footer__columns {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

/* components.css */
/* Components — header/nav, footer, breadcrumb, hero, cards, book, article,
   resources, cta, related, alerts, buttons, and fixture-only affordances. */

/* Skip link: visually hidden until focused. */
.skip-link {
  position: absolute;
  left: var(--space-2xs);
  top: -4rem;
  z-index: var(--layer-alert);
  background: var(--background-inverse);
  color: var(--text-on-inverse);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: top var(--motion-duration-fast) var(--motion-easing-standard);
}

.skip-link:focus {
  top: var(--space-2xs);
  color: var(--text-on-inverse);
}

/* Fixture banner — required, non-color, high-contrast identification. */
.fixture-banner {
  background: var(--background-inverse);
  color: var(--text-on-inverse);
  border-block-end: var(--border-width-strong) solid var(--border-strong);
}

.fixture-banner__text {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-2xs) var(--gutter);
  font-family: var(--font-monospace);
  font-size: var(--type-small);
  letter-spacing: 0.02em;
  text-align: center;
}

/* Buttons. */
.button {
  display: inline-block;
  padding: var(--space-2xs) var(--space-md);
  border: var(--border-width-strong) solid var(--action-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  line-height: 1.2;
}

.button--primary {
  background: var(--action-primary);
  color: var(--text-on-inverse);
}

.button--primary:hover {
  background: var(--action-hover);
  color: var(--text-on-inverse);
}

/* Header + primary navigation. */
.site-header {
  background: var(--background-surface);
  border-block-end: var(--border-width) solid var(--border-default);
}

.site-header__brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--text-primary);
  margin-inline-end: auto;
}

.site-nav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-3xs);
  background: var(--background-canvas);
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3xs) var(--space-2xs);
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  width: 100%;
}

.site-nav__link {
  display: inline-block;
  padding: var(--space-3xs) var(--space-2xs);
  text-decoration: none;
  border-inline-start: var(--border-width-strong) solid transparent;
}

.site-nav__link:hover {
  text-decoration: underline;
}

/* Current page: weight + underline + a shape marker (not color alone). */
.site-nav__link.is-current {
  font-weight: 700;
  text-decoration: underline;
  border-inline-start-color: var(--accent-primary);
}

@media (min-width: 48rem) {
  .site-nav,
  .site-nav__list {
    width: auto;
  }
  .site-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }
}

/* JS-enhanced mobile disclosure (progressive enhancement only). */
@media (max-width: 47.999rem) {
  .site-header[data-nav="enhanced"] .site-nav__toggle {
    display: inline-flex;
  }
  .site-header[data-nav="enhanced"] .site-nav__list {
    display: none;
  }
  .site-header[data-nav="enhanced"] .site-nav__list.is-open {
    display: flex;
  }
}

.site-header__action {
  margin-inline-start: auto;
}

/* Breadcrumb. */
.breadcrumb {
  margin-block-end: var(--space-md);
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  font-size: var(--type-small);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  margin-inline-end: var(--space-3xs);
  color: var(--text-muted);
}

/* Page hero. */
.page-hero {
  padding-block-end: var(--space-md);
  border-block-end: var(--border-width) solid var(--border-default);
}

.page-hero__title {
  font-size: var(--type-display);
}

.page-hero__context {
  margin-top: var(--space-sm);
}

.page-hero__action {
  margin-top: var(--space-md);
}

/* Cards. */
.card,
.article-card {
  background: var(--background-surface);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.card__title,
.article-card__title {
  font-size: var(--type-h3);
}

.card__meta,
.article-card__cluster,
.article-card__date {
  color: var(--text-muted);
  font-size: var(--type-small);
  margin-top: var(--space-3xs);
}

.card__body,
.article-card__excerpt {
  margin-top: var(--space-2xs);
}

.status-badge {
  display: inline-block;
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3xs);
  font-size: var(--type-small);
  font-weight: 700;
}

.article-card__status {
  margin-top: var(--space-2xs);
}

/* Article meta and body. */
.article-meta {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--background-subtle);
  border-radius: var(--radius-md);
  margin-block: var(--space-md);
}

.article-meta__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
}

.article-meta dt {
  font-weight: 700;
  min-width: 8rem;
}

.article-meta dd {
  margin: 0;
}

/* Book detail. */
.book-detail__cover {
  background: var(--background-subtle);
  border: var(--border-width-strong) dashed var(--border-strong);
  border-radius: var(--radius-md);
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-sm);
}

.book-detail__facts {
  margin-top: var(--space-md);
}

.book-detail__fact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  padding-block: var(--space-3xs);
  border-block-end: var(--border-width) solid var(--border-default);
}

.book-detail__fact dt {
  font-weight: 700;
  min-width: 10rem;
}

.book-detail__actions {
  margin-top: var(--space-md);
}

/* Resource list. */
.resource {
  padding-block: var(--space-2xs);
  border-block-end: var(--border-width) solid var(--border-default);
}

.resource__desc {
  color: var(--text-muted);
  margin-top: var(--space-3xs);
}

/* CTA. */
.cta {
  background: var(--background-subtle);
  border: var(--border-width) solid var(--border-default);
  border-inline-start: var(--focus-ring-width) solid var(--accent-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.cta__body {
  margin-top: var(--space-2xs);
}

.cta__action {
  margin-top: var(--space-md);
}

/* Related content. */
.related {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-block-start: var(--border-width) solid var(--border-default);
}

.related__list {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.related__kind {
  font-weight: 700;
  font-size: var(--type-small);
}

/* Alerts / notices — status conveyed by label + shape, never color alone. */
.alert {
  background: var(--background-surface);
  border: var(--border-width) solid var(--border-default);
  border-inline-start: var(--focus-ring-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.alert--caution {
  border-inline-start-style: double;
  border-inline-start-width: 6px;
}

.alert--info,
.alert--notice {
  border-inline-start-style: solid;
}

.alert__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--type-small);
}

.alert__heading {
  font-size: var(--type-h3);
  margin-top: var(--space-3xs);
}

.alert__body {
  margin-top: var(--space-2xs);
}

/* Cluster filter (no-JS complete list is always present). */
.cluster-filter {
  margin-block: var(--space-md);
  padding: var(--space-sm);
  background: var(--background-subtle);
  border-radius: var(--radius-md);
}

.cluster-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.cluster-filter__item {
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2xs);
  font-size: var(--type-small);
}

.pagination-note {
  margin-top: var(--space-md);
  color: var(--text-muted);
  font-size: var(--type-small);
}

/* Footer. */
.site-footer {
  margin-top: var(--space-2xl);
  background: var(--background-surface);
  border-block-start: var(--border-width) solid var(--border-default);
  padding-block: var(--space-lg);
}

.site-footer__list {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3xs);
}

.site-footer__note,
.site-footer__copyright {
  margin-top: var(--space-md);
  color: var(--text-muted);
  font-size: var(--type-small);
}

/* Fixture-only placeholder affordances (clearly not working links). */
.placeholder-tag {
  font-family: var(--font-monospace);
  font-size: var(--type-small);
  color: var(--text-muted);
}

.placeholder-action,
.placeholder-cover {
  display: inline-block;
  border: var(--border-width-strong) dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--text-muted);
}

/* Error / 404. */
.error-page__suggest-heading {
  margin-top: var(--space-lg);
}

.route-suggestions__list {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

/* utilities.css */
/* Utilities — a very small set. */

/* Visually hidden but available to assistive technology. */
.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;
}

/* Flow spacing utility (owl) for ad-hoc stacks. */
.flow > * + * {
  margin-top: var(--space-sm);
}

/* print.css */
/* Print fundamentals — hide navigation-only chrome, keep content readable. */

@media print {
  .skip-link,
  .site-nav__toggle,
  .site-header__action,
  .cta__action,
  .route-suggestions {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .fixture-banner {
    background: #fff;
    color: #000;
    border-block-end: 2px solid #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Reveal destination URLs for content links where helpful. */
  .article__body a[href]::after,
  .resource a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  .card,
  .article-card,
  .book-detail {
    break-inside: avoid;
  }
}

/* design-candidates/direction-b/tokens-override.css */
/*
 * DIRECTION B — "TIDEPOOL" TOKEN OVERRIDE (PHASE 3A.4).
 *
 * INTERNAL DESIGN PROPOSAL — NOT APPROVED, NOT PRODUCTION, NOT CLIENT-SELECTED.
 * Every value in this file is a new project proposal introduced in Phase 3A.4.
 * No client has selected or approved any value here. This layer overrides only
 * the semantic tokens of the committed neutral baseline; the semantic HTML and
 * template structure are unchanged. A later authorized design phase replaces or
 * discards this file without structural change.
 *
 * Character: a calm cream-and-sand foundation with selective expressive
 * moments — an expressive serif display voice, a sea-foam section wash, a deep
 * tidepool panel for the call to action and footer, and one warm accent used
 * sparingly and decoratively. Text/background pairings are contrast-tested
 * (see the Phase 3A.4 approval package and the automated contrast audit).
 */

:root {
  /* Color roles. */
  --background-canvas: #fcf8f1;
  --background-surface: #f4ecde;
  --background-subtle: #e4efe9;      /* sea-foam wash for quiet rhythm */
  --background-inverse: #1f3d43;     /* deep tidepool panel */

  --text-primary: #22333a;           /* 12.4:1 on canvas */
  --text-muted: #4f5e63;             /* 6.4:1 on canvas; 5.7:1 on subtle */
  --text-on-inverse: #f4f1e8;        /* 10.3:1 on inverse */
  --text-muted-on-inverse: #bfd2cd;  /* 7.4:1 on inverse */

  --border-default: #d6cdba;
  --border-strong: #63736f;          /* 4.7:1 vs canvas (non-text >= 3:1) */

  --accent-primary: #e9b48c;         /* warm tide-line accent — decorative only */
  --accent-strong: #9c5a2b;          /* 5.1:1 on canvas when a warm accent must be text */
  --action-primary: #1f6558;         /* 6.5:1 on canvas as link text */
  --action-hover: #164e44;           /* 9.0:1 on canvas */
  --action-active: #113e36;

  --focus-ring: #175046;             /* 8.7:1 vs canvas */
  --focus-ring-on-inverse: #bfe3d8;  /* 8.4:1 vs inverse */

  --status-error: #96352c;           /* 6.3:1 on surface */
  --status-success: #276b4d;         /* 5.4:1 on surface */
  --status-warning: #77571b;         /* 5.7:1 on surface */

  --selection-background: #f2dbc0;
  --selection-text: #3e2a14;         /* 10.1:1 on selection background */

  /* Typography roles — system/local stacks only in this comparison output.
     The proposed production families remain documentation-level proposals. */
  --font-display: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-heading: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-interface: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale — expressive display over a calm reading voice. */
  --type-display: clamp(2.25rem, 1.5rem + 3.4vw, 3.4rem);
  --type-h2: clamp(1.45rem, 1.2rem + 1.2vw, 1.85rem);
  --type-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  --type-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem);
  --line-height-body: 1.6;
  --line-height-heading: 1.18;

  /* Space — balanced; a touch more air than the neutral baseline. */
  --space-lg: 2.25rem;
  --space-xl: 3.25rem;

  /* Shape and elevation — rounded, gentle, one soft shadow role. */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-low: 0 1px 3px rgba(34, 51, 58, 0.08);
  --shadow-medium: 0 4px 14px rgba(34, 51, 58, 0.12);

  /* Motion — gentle ease. */
  --motion-duration-fast: 140ms;
  --motion-duration-medium: 200ms;
}

/* design-candidates/direction-b/expression.css */
/*
 * DIRECTION B — "TIDEPOOL" EXPRESSION LAYER (PHASE 3A.4).
 *
 * INTERNAL DESIGN PROPOSAL — NOT APPROVED, NOT PRODUCTION, NOT CLIENT-SELECTED.
 * Component-level expression for the Tidepool candidate: calm foundation with
 * selective expressive moments. Restyles the committed neutral components
 * through their existing class contract only; no markup, template, or
 * JavaScript change. Removable as one layer.
 */

/* Selection color pairing (contrast-tested warm wash). */
::selection {
  background: var(--selection-background);
  color: var(--selection-text);
}

/* Entry: the hero settles in gently — only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .page-hero {
    animation: tidepool-settle 420ms var(--motion-easing-standard) both;
  }

  @keyframes tidepool-settle {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Header: canvas, serif brand, links with a growing underline. */
.site-header {
  background: var(--background-canvas);
  border-block-end: var(--border-width) solid var(--border-default);
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.site-nav__link {
  text-decoration: none;
  border-inline-start: none;
  border-block-end: var(--border-width-strong) solid transparent;
  padding-block: var(--space-2xs);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.site-nav__link:hover {
  text-decoration: none;
  border-block-end-color: var(--accent-strong);
}

.site-nav__link.is-current {
  font-weight: 700;
  text-decoration: none;
  border-inline-start: none;
  border-block-end-color: var(--action-primary);
}

/* Hero: expressive serif with a warm tide-line mark beneath it. */
.page-hero {
  border-block-end: none;
  padding-block: var(--space-md) var(--space-lg);
  position: relative;
}

.page-hero::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 4px;
  border-radius: 999px;
  background: var(--accent-primary);
  margin-top: var(--space-md);
}

.page-hero__title {
  letter-spacing: -0.01em;
  max-width: 22ch;
}

/* Buttons: rounded pill, gentle hover rise. */
.button {
  border-radius: 999px;
  padding: var(--space-xs) var(--space-lg);
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.button--primary:hover {
  transform: translateY(-1px);
}

/* Cards: sand surfaces, soft corners, a low tide of shadow on hover. */
.card,
.article-card {
  background: var(--background-surface);
  border-color: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-low);
  transition: box-shadow var(--motion-duration-medium) var(--motion-easing-standard);
}

.card:hover,
.article-card:hover {
  box-shadow: var(--shadow-medium);
}

.card__title,
.article-card__title {
  font-family: var(--font-heading);
}

.card__title a,
.article-card__title a {
  text-decoration: none;
}

.card__title a:hover,
.article-card__title a:hover {
  text-decoration: underline;
}

/* Section rhythm: every second section rests on a sea-foam wash. */
.page__body > .section:nth-of-type(even) {
  background: var(--background-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* Quote: an expressive moment — larger serif italic on a warm thread. */
.prose-quote {
  border-inline-start: 4px solid var(--accent-primary);
  padding-inline-start: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-lead);
  color: var(--text-primary);
}

/* Article meta: sea-foam card. */
.article-meta {
  background: var(--background-subtle);
  border-radius: var(--radius-md);
}

/* CTA: the deep tidepool panel — the page's one strong color commitment. */
.cta {
  background: var(--background-inverse);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--text-on-inverse);
  --focus-ring: var(--focus-ring-on-inverse);
}

.cta__heading {
  color: var(--text-on-inverse);
  font-family: var(--font-display);
}

.cta__body {
  color: var(--text-muted-on-inverse);
}

.cta .button--primary {
  background: var(--text-on-inverse);
  color: var(--action-primary);
  border-color: var(--text-on-inverse);
}

.cta .button--primary:hover {
  background: var(--background-canvas);
  color: var(--action-hover);
}

/* Cluster filter: foam chips. */
.cluster-filter {
  background: var(--background-subtle);
  border-radius: var(--radius-md);
}

.cluster-filter__item {
  border-radius: 999px;
  border-width: var(--border-width);
  padding: 0 var(--space-xs);
  background: var(--background-canvas);
}

/* Book cover placeholder: rounded with a low shadow. */
.book-detail__cover {
  border-style: solid;
  border-color: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-low);
}

/* Footer: the tidepool again — dark, orderly, calm. */
.site-footer {
  background: var(--background-inverse);
  border-block-start: none;
  color: var(--text-on-inverse);
  --focus-ring: var(--focus-ring-on-inverse);
}

.site-footer a {
  color: var(--text-on-inverse);
}

.site-footer a:hover {
  color: var(--background-canvas);
}

.site-footer__heading {
  color: var(--text-on-inverse);
}

.site-footer__note,
.site-footer__copyright,
.site-footer .placeholder-tag {
  color: var(--text-muted-on-inverse);
}

/* brand-context/phase-3a8/fonts.css */
/*
 * PHASE 3A.8 WORKING FONT FACES — self-hosted WOFF2 (latin subset).
 *
 * PROVISIONAL working type direction, pending Ashley's approval (Q12 open).
 * NOT approved final typography. Removable as one overlay layer over the
 * accepted Tidepool staging foundation; it changes no template or component
 * structure. Self-hosted only: the page makes no external font request. Source
 * provenance, revisions, byte sizes, SHA-256, and SIL OFL 1.1 licenses are
 * recorded in src/assets/fonts/FONT-PROVENANCE.md and the working brand-identity
 * document. font-display: swap; no synthetic bold or italic is permitted.
 *
 * url() targets are relative to this stylesheet, which is served from assets/;
 * they resolve to assets/fonts/… on every page regardless of nesting depth.
 */

@font-face {
  font-family: "Vidaloka";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Vidaloka-Regular.latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMSans-Regular.latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/DMSans-Medium.latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/DMSans-SemiBold.latin.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Newsreader-Medium.latin.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Newsreader-Italic.latin.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Montserrat-Medium.latin.woff2") format("woff2");
}

/* brand-context/phase-3a8/coastal-calm.css */
/*
 * PHASE 3A.8 BRAND-CONTEXT OVERLAY — "COASTAL CALM VERSION 2" + working type.
 *
 * PROVISIONAL working staging direction, pending Ashley's final approval.
 * Q13 (palette) and Q12 (wordmark) remain OPEN. NOT approved final branding.
 *
 * This is a REMOVABLE overlay appended after the accepted Tidepool (Direction B)
 * layers. It overrides ONLY semantic color/type tokens and a few component
 * font/color bindings through their existing class contract; it changes no
 * template, component, or JavaScript structure, and it does not touch the
 * historical Direction B files. Discarding this one layer restores the accepted
 * Tidepool staging appearance with no structural change.
 *
 * Every text pairing below was independently verified with the WCAG relative-
 * luminance formula (see the working brand-identity document). Base Muted Sea
 * Glass (#6F9C98) and base Terracotta (#B66F52) are NEVER used for normal-size
 * text; where a Sea Glass interaction/text surface is required, the documented
 * provisional derivatives (#4F7C78 dark, #D3E6E3 tint) are used instead.
 */

:root {
  /* Coastal Calm V2 core brand colors (provisional; Q13 open). */
  --cc-deep-coastal-blue: #294A52;
  --cc-muted-sea-glass: #6F9C98;   /* base: decorative / large-only; never normal text */
  --cc-warm-sand: #E8DED0;
  --cc-soft-cream: #FBF8F3;
  --cc-terracotta-rust: #B66F52;   /* base: sparse decorative; never normal text */
  --cc-deep-charcoal: #303738;

  /* Provisional FUNCTIONAL derivatives — explicitly NOT core-color changes.
     Documented and contrast-verified for interaction surfaces only. */
  --cc-sea-glass-dark: #4F7C78;    /* white text 4.68:1; border/indicator 4.42:1 vs cream */
  --cc-sea-glass-tint: #D3E6E3;    /* Deep Blue text 7.38:1; Charcoal 9.37:1 — band surface */
  --cc-terracotta-dark: #9C5A2B;   /* accessible warm text 5.07:1 vs cream (reserved) */

  /* Map onto the accepted semantic token contract (overrides Direction B). */
  --background-canvas: var(--cc-soft-cream);
  --background-surface: var(--cc-warm-sand);
  --background-subtle: var(--cc-sea-glass-tint);   /* Sea Glass, accessibly, on section bands */
  --background-inverse: var(--cc-deep-coastal-blue);

  --text-primary: var(--cc-deep-charcoal);         /* body 11.46:1 on cream */
  --text-heading: var(--cc-deep-coastal-blue);     /* headings 9.03:1 on cream */
  --text-muted: var(--cc-deep-coastal-blue);       /* secondary text; accessible on cream/sand/tint */
  --text-on-inverse: var(--cc-soft-cream);         /* 9.03:1 on deep blue */
  --text-muted-on-inverse: var(--cc-sea-glass-tint); /* 7.38:1 on deep blue */

  --border-default: var(--cc-warm-sand);           /* soft, decorative card edges */
  --border-strong: var(--cc-sea-glass-dark);       /* 4.42:1 vs cream (non-text >= 3:1) */

  --accent-primary: var(--cc-muted-sea-glass);     /* DECORATIVE accents only (not meaning-bearing) */
  --accent-strong: var(--cc-sea-glass-dark);       /* accessible functional accent (nav-hover underline) */
  --action-primary: var(--cc-deep-coastal-blue);   /* link / interactive text 9.03:1 */
  --action-hover: #17323a;
  --action-active: #102830;

  --focus-ring: var(--cc-deep-coastal-blue);       /* 9.03:1 vs cream — always visible */
  --focus-ring-on-inverse: var(--cc-sea-glass-tint); /* 7.38:1 vs deep blue */

  /* Status tokens: accessible, NON-brand, kept separate (unused by these pages). */
  --status-error: #9a2f22;
  --status-success: #256b48;
  --status-warning: #7a5312;

  --selection-background: var(--cc-sea-glass-tint);
  --selection-text: var(--cc-deep-coastal-blue);

  /* Working type direction (provisional; Q12 open). Four separated roles. */
  --font-signature: "Vidaloka", "Bodoni 72", Didot, Georgia, "Times New Roman", serif;
  --font-credential: "Montserrat", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-editorial: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-functional: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Re-point the accepted font tokens onto the working families. */
  --font-display: var(--font-signature);
  --font-heading: var(--font-editorial);
  --font-body: var(--font-functional);
  --font-interface: var(--font-functional);
}

/* No synthetic bold/italic anywhere. */
body,
input,
button,
select,
textarea {
  font-synthesis: none;
}

/* ---- Type roles ------------------------------------------------------------ */

/* Signature display — Vidaloka Regular, one real style. H1 / hero only. */
h1,
.h1,
.page-hero__title,
.type-hero {
  font-family: var(--font-signature);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text-heading);
  text-wrap: balance;
}

/* Long-title exception: an H1 that truly exceeds three mobile lines in Vidaloka
   switches to Newsreader Medium (set per-page by the staging renderer), with a
   size ramp that eases the mobile end to reduce wrapping and avoid overflow. It
   does NOT guarantee three lines — the longest draft H1s still wrap further (e.g.
   the home hero H1 remains four lines at 375px; postpartum four lines at 320px).
   Title copy and styling are not changed merely to force a line-count target. */
.has-longtitle-h1 .page-hero__title {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.25rem);
}

/* Editorial voice — Newsreader Medium Roman for H2 / section headings. */
h2 {
  font-family: var(--font-editorial);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-heading);
  text-wrap: balance;
}

/* Functional — DM Sans for H3–H6 and all interface/body text. */
h3,
h4,
h5,
h6 {
  font-family: var(--font-functional);
  font-weight: 600;
  color: var(--text-heading);
  text-wrap: balance;
}

body,
p,
li,
dd,
dt,
figcaption,
.lead,
.breadcrumb,
.card__body,
.article-card__body {
  font-family: var(--font-functional);
}

p {
  text-wrap: pretty;
}

.site-nav__link,
.site-footer__note,
.site-footer__copyright,
.placeholder-tag,
.cta__note {
  font-family: var(--font-functional);
}

.site-nav__link {
  font-weight: 500;
}

.button {
  font-family: var(--font-functional);
  font-weight: 600;
}

/* Narrative quotes / Ashley voice — Newsreader Regular Italic. Not indicated by
   italic or color alone: the block keeps its quote markup, indent, and rule. */
.prose-quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  border-inline-start: 4px solid var(--cc-sea-glass-dark);
  color: var(--text-primary);
}

/* ---- Component color / font realignments ---------------------------------- */

/* Header brand: Vidaloka name + Montserrat credential specimen (provisional). */
.site-header__brand {
  font-family: var(--font-signature);
  font-weight: 400;
  color: var(--text-heading);
}

.brand-specimen {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.05;
}

.brand-specimen__name {
  font-family: var(--font-signature);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--text-heading);
}

.brand-specimen__credential {
  font-family: var(--font-credential);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-heading);
}

/* Cards: DM Sans titles on Warm Sand surfaces (headings still Deep Blue). */
.card__title,
.article-card__title {
  font-family: var(--font-functional);
  font-weight: 600;
  color: var(--text-heading);
}

/* CTA panel: the deep coastal-blue commitment. Heading uses Newsreader. */
.cta__heading {
  font-family: var(--font-editorial);
  font-weight: 500;
}

/* Keep the disabled secondary control visible on the dark panel. */
.cta .button--secondary {
  border-color: var(--text-on-inverse);
  color: var(--text-on-inverse);
}

/* Generic primary button (light-background context): the accessible Sea Glass
   CTA treatment — dark Sea Glass derivative with white text (4.68:1). Inside the
   dark CTA panel, Direction B's higher-specificity rule keeps a light button so
   it stays visible against the deep-blue panel. */
.button--primary {
  background: var(--cc-sea-glass-dark);
  color: #ffffff;
  border-color: var(--cc-sea-glass-dark);
}

.button--primary:hover {
  background: var(--action-hover);
  color: #ffffff;
}

/* Nav interaction: current = Deep Blue underline; hover = dark Sea Glass. The
   current page also carries weight and a visually-hidden label (not color alone). */
.site-nav__link.is-current {
  border-block-end-color: var(--action-primary);
}

.site-nav__link:hover {
  border-block-end-color: var(--accent-strong);
}

/* Hero tide-line: one sparse Terracotta decorative accent (non-text, >= 3:1). */
.page-hero::after {
  background: var(--cc-terracotta-rust);
}

/* ---- Provisional-context qualifier banner --------------------------------- */

.fixture-banner__note {
  margin-top: 0.35rem;
  font-family: var(--font-functional);
  font-weight: 500;
  font-size: 0.9rem;
  /* The staging marker banner is the deep-blue inverse surface, so the qualifier
     uses the light on-inverse token (9.03:1), never the dark heading token. */
  color: var(--text-on-inverse);
}