/* ==========================================================================
   About / Reviews / Blog — shared component layer for editorial and
   long-form pages (About, Reviews, Blog index, individual blog posts).
   Draws entirely from css/tokens.css — same navy + gold palette, same
   Archivo Black / Work Sans / IBM Plex Mono type roster, same card and
   button grammar as the rest of the site. This file only adds the
   page-specific layout (photo hero, asymmetric rows, marquee strip,
   filterable card grids) on top of it — no separate palette or shadow
   language of its own.
   ========================================================================== */

.about-page {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: var(--leading-body);
}

.a-wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 900px) {
  .a-wrap { padding-inline: var(--space-7); }
}

.a-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.a-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent-strong);
}

/* ---- Hero: full-bleed photograph, headline bottom-aligned, navy overlay
   to match the ink-950 tint used on every other dark band sitewide ---- */
.a-hero {
  position: relative;
  min-height: min(86vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--paper-050);
}
.a-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.a-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(20% 0.07 264 / 0.1) 0%, oklch(20% 0.07 264 / 0.3) 45%, oklch(20% 0.07 264 / 0.92) 100%);
}
.a-hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-8) var(--space-7);
  width: 100%;
}
.a-hero .a-eyebrow { color: var(--gold-500); margin-bottom: var(--space-4); }
.a-hero .a-eyebrow::before { background: var(--gold-500); }
.a-hero h1 {
  font-size: var(--text-3xl);
  max-width: 16ch;
  color: #fff;
}
.a-hero p {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--text-md);
  color: oklch(98% 0.004 95 / 0.82);
}

/* ---- Intro statement band ---- */
.a-intro { padding-block: var(--space-9); }
.a-intro p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 26ch;
  color: var(--color-ink);
}
.a-intro p + p {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: normal;
  max-width: 62ch;
  color: var(--color-ink-soft);
}

/* ---- Asymmetric image + text rows ---- */
.a-row {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .a-row { grid-template-columns: 1.1fr 0.9fr; }
  .a-row--reverse { grid-template-columns: 0.9fr 1.1fr; }
  .a-row--reverse .a-row__media { order: 2; }
}
.a-row__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--ink-950);
  aspect-ratio: 4 / 5;
}
.a-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-row__text .a-eyebrow { margin-bottom: var(--space-3); }
.a-row__text h2 { font-size: var(--text-xl); max-width: 14ch; margin-bottom: var(--space-4); }
.a-row__text p { color: var(--color-ink-soft); max-width: 42ch; font-size: var(--text-base); }
.a-row__text p + p { margin-top: var(--space-3); }

/* ---- Full-bleed divider band with a photo and a big overlaid statement ---- */
.a-divider {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-block: var(--space-4);
}
.a-divider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) brightness(0.5);
}
.a-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(20% 0.07 264 / 0.35);
}
.a-divider__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-inline: var(--space-5);
}
.a-divider .a-eyebrow { color: var(--gold-500); justify-content: center; margin-bottom: var(--space-4); }
.a-divider .a-eyebrow::before { background: var(--gold-500); }
.a-divider p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #fff;
  max-width: 22ch;
  margin-inline: auto;
}

/* ---- Stats: bordered card, same grammar as .stats-card sitewide ---- */
.a-stats { padding-block: var(--space-9); }
.a-stats__grid {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1.5px solid var(--ink-950);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .a-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.a-stats__cell {
  background: var(--color-surface);
  padding: var(--space-6) var(--space-5);
}
.a-stats__cell dd {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}
.a-stats__cell dt {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
.a-stats__creds {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---- Values: bordered cards, same grammar as .note-card sitewide ---- */
.a-values { padding-block: var(--space-9); }
.a-values__intro { max-width: 56ch; margin-bottom: var(--space-7); }
.a-values__intro h2 { font-size: var(--text-xl); margin-top: var(--space-3); margin-bottom: var(--space-4); max-width: 14ch; }
.a-values__intro p { color: var(--color-ink-soft); font-size: var(--text-base); }
.a-values__grid { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .a-values__grid { grid-template-columns: repeat(3, 1fr); } }
.a-value-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.a-value-card .a-eyebrow { margin-bottom: var(--space-4); }
.a-value-card h3 { font-size: var(--text-md); margin-bottom: var(--space-3); max-width: 18ch; }
.a-value-card p { color: var(--color-ink-soft); font-size: var(--text-sm); }

/* ---- Shifting photo strip: the one moving element on this page.
   Two duplicate groups animate to -50%, looping seamlessly; pauses on
   hover/focus; falls back to a static wrapped row with no motion. ---- */
.a-strip { padding-block: var(--space-8); overflow: hidden; }
.a-strip__head { margin-bottom: var(--space-5); }
.a-strip__head h2 { font-size: var(--text-xl); max-width: 18ch; }
.a-marquee { position: relative; width: 100%; }
.a-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-5);
  animation: a-marquee-scroll 48s linear infinite;
}
.a-marquee:hover .a-marquee__track,
.a-marquee:focus-within .a-marquee__track {
  animation-play-state: paused;
}
.a-marquee__group { display: flex; flex: none; gap: var(--space-5); }
.a-marquee figure {
  flex: none;
  width: min(20rem, 68vw);
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid var(--color-border);
  margin: 0;
}
.a-marquee img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes a-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .a-marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
  .a-marquee__group[aria-hidden="true"] { display: none; }
  .a-marquee__group:not([aria-hidden="true"]) { flex-wrap: wrap; width: 100%; justify-content: center; }
  .a-marquee figure { width: min(20rem, 100%); }
}

/* ---- Closing CTA — buttons match .btn-dark / .btn-outline exactly ---- */
.a-cta { padding-block: var(--space-9); text-align: center; }
.a-cta h2 { font-size: var(--text-2xl); max-width: 16ch; margin-inline: auto; margin-top: var(--space-3); }
.a-cta p { max-width: 46ch; margin-inline: auto; margin-top: var(--space-4); color: var(--color-ink-soft); font-size: var(--text-base); }
.a-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.a-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-dial), background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.a-btn:active { transform: translateY(1px) scale(0.99); }
.a-btn--solid, .a-btn--solid:visited { background: var(--ink-950); color: var(--paper-050); border-color: var(--ink-950); }
.a-btn--solid:hover { background: var(--ink-800); }
.a-btn--outline, .a-btn--outline:visited { background: transparent; color: var(--color-ink); border-color: var(--ink-950); }
.a-btn--outline:hover { background: var(--ink-950); color: var(--paper-050); }

.a-credits {
  padding-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: center;
}
.a-credits a, .a-credits a:visited { color: inherit; }

/* ==========================================================================
   Article pages (blog posts): same design system, reused for long-form
   prose instead of the marketing sections above.
   ========================================================================== */
.a-article-head { padding-block: var(--space-8) var(--space-6); }
.a-article-head__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-muted);
}
.a-article-head h1 { font-size: var(--text-2xl); max-width: 20ch; margin-top: var(--space-3); }
.a-article-head p { margin-top: var(--space-4); max-width: 52ch; font-size: var(--text-md); color: var(--color-ink-soft); }

.a-article-hero {
  margin-block: 0 var(--space-7);
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--ink-950);
}
.a-article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.a-article {
  max-width: 42rem;
  margin-inline: auto;
  padding-bottom: var(--space-8);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}
.a-article p { margin-bottom: var(--space-5); }
.a-article p:first-of-type {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.a-article h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  color: var(--color-ink);
}
.a-article ul { margin: 0 0 var(--space-5); padding-left: 1.25rem; }
.a-article li { margin-bottom: var(--space-2); }
.a-article strong { color: var(--color-ink); font-weight: 600; }
.a-article a, .a-article a:visited { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 0.15em; }

.a-article-cta {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-bg-dim);
  border: 1.5px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.a-article-cta p { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); color: var(--color-ink); max-width: 28ch; }

/* ---- Article hero, graphic variant: for posts without a location photo —
   an icon on a soft gold wash instead of a stretched or fabricated image. ---- */
.a-article-hero--graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-300), var(--color-bg-dim));
  border: 1.5px solid var(--color-border);
}
.a-article-hero--graphic svg { width: clamp(3.25rem, 7vw, 5rem); height: auto; color: var(--color-accent-text); }

/* ==========================================================================
   Blog index — filterable grid of post cards, same tag+card idiom as
   .blog-card / .note-card sitewide. Reused by blog.html.
   ========================================================================== */
.a-blog-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.a-blog-pill {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.a-blog-pill:hover { border-color: var(--ink-950); }
.a-blog-pill.is-active { background: var(--ink-950); color: var(--paper-050); border-color: var(--ink-950); }

.a-blog-grid { display: grid; gap: var(--space-5); padding-bottom: var(--space-8); }
@media (min-width: 700px) { .a-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .a-blog-grid { grid-template-columns: repeat(3, 1fr); } }

.a-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.a-blog-card:hover { border-color: var(--ink-950); background: var(--color-bg-dim); }
.a-blog-card[hidden] { display: none; }
.a-blog-card .a-eyebrow { margin-bottom: var(--space-4); }
.a-blog-card h3 { font-size: var(--text-md); margin-bottom: var(--space-3); line-height: 1.3; }
.a-blog-card p { color: var(--color-ink-soft); font-size: var(--text-sm); margin-bottom: var(--space-4); flex-grow: 1; }
.a-blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ==========================================================================
   Reviews page — trust stats strip, one featured pull-quote, and a
   filterable wall of shorter cards. Reused by reviews.html.
   ========================================================================== */
.a-review-feature {
  background: var(--color-surface);
  border: 1.5px solid var(--ink-950);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-bottom: var(--space-7);
}
.a-review-feature__stars { color: var(--gold-600); letter-spacing: 0.2em; font-size: var(--text-base); margin-bottom: var(--space-5); }
.a-review-feature p { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1.4; letter-spacing: var(--tracking-tight); color: var(--color-ink); max-width: 42ch; }
.a-review-feature__author { margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.a-review-feature__author strong { color: var(--color-ink); font-family: var(--font-body); font-weight: 600; }

.a-review-grid { display: grid; gap: var(--space-5); padding-bottom: var(--space-8); }
@media (min-width: 700px) { .a-review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .a-review-grid { grid-template-columns: repeat(3, 1fr); } }

.a-review-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.a-review-card[hidden] { display: none; }
.a-review-card__stars { color: var(--gold-600); letter-spacing: 0.15em; font-size: var(--text-sm); margin-bottom: var(--space-4); display: block; }
.a-review-card p { font-size: var(--text-sm); color: var(--color-ink); margin-bottom: var(--space-4); }
.a-review-card__author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}
.a-review-card__author strong { color: var(--color-ink); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); }