/* ==========================================================================
   Monique Bettes — portfolio
   Visual identity ported from "Design Like a Philosopher" (The Outlook 2026)
   Tokens, then layout, then components. Nothing here is Tailwind or a kit.
   ========================================================================== */

/* --- 0. Fonts (self-hosted) --------------------------------------------
   Served from this origin, not Google's. Faster first paint, no third-party
   request on a page that talks about accountability. SIL Open Font Licence
   copies sit alongside the files.

   Staatliches ships as a single static weight (400) with no variable axes —
   unlike the other two, it takes no font-weight/font-variation-settings.
   ----------------------------------------------------------------------- */

@font-face {
  font-family: "Staatliches";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/staatliches-latin-400-normal.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: "Staatliches";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/staatliches-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  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: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Stack Sans Text";
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url("../fonts/stack-sans-text-latin-wght-normal.woff2") format("woff2-variations");
  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: "Stack Sans Text";
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url("../fonts/stack-sans-text-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Colour. Sampled from the workshop deck.
     Contrast notes are the reason each one exists — see the ratios inline below. */
  --teal:        #1B475C;   /* 9.4:1 on cream — body text + dark grounds     */
  --teal-deep:   #123543;   /* recessed panels inside teal bands             */
  --teal-line:   #2E5E73;   /* hairlines on teal                             */
  --cream:       #FCF7E9;   /* page ground                                   */
  --cream-warm:  #F5EDD8;   /* alternate band, cards                         */
  --cream-line:  #E3D9BE;   /* hairlines on cream                            */
  --mint:        #47C8B1;   /* 4.9:1 on teal — display + eyebrows on dark    */
  --mint-pale:   #D9F2EC;   /* the Bearing's centre point                    */
  --coral:       #FF593E;   /* 3.3:1 on teal — GRAPHIC ONLY, never body text */
  --coral-deep:  #C43A1F;   /* 4.8:1 on cream — small labels on light        */
  --coral-bright:#FF925C;   /* 4.5:1 on teal — the one place coral carries a small label as TEXT on a dark ground. Lightening straight coral (#FF593E, hue ~8°) to pass contrast reads as washed-out pink; nudging the hue warmer toward ~20° first lets it stay more saturated at the lightness contrast requires. coral-deep is darker still and coral itself fails AA here. */

  /* The Bearing changes clothes depending on what it's standing on.
     Form A (mint) is constant; Form B is teal on light grounds and cream on
     dark ones, because a teal shape on a teal band is an invisible shape. */
  --bearing-a: var(--mint);
  --bearing-b: var(--teal);
  --bearing-a-ink: var(--teal);
  --bearing-b-ink: var(--mint);

  /* Type */
  --display:           "Staatliches", "Arial Narrow", sans-serif;
  --display-secondary: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:              "Stack Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --step-4:  clamp(2.8rem, 1.9rem + 4.4vw, 5.6rem);
  --step-5:  clamp(3.4rem, 2rem + 6.4vw, 7.5rem);

  /* Space */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --band-y:  clamp(3.5rem, 9vw, 8rem);
  --measure: 62ch;
}

/* --- 2. Reset ----------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--teal);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

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

ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

/* Focus: coral on light, mint on dark. Always visible, never removed. */
:focus-visible {
  outline: 3px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--teal :focus-visible,
.site-footer :focus-visible { outline-color: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- 3. Type primitives ------------------------------------------------- */

/* The workshop's signature: condensed, uppercase Staatliches, set tight.
   Static font, one weight — no font-variation-settings to reach for. */
.display {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.004em;
  margin: 0;
  text-wrap: balance;
}
.display--xl { font-size: var(--step-5); }
.display--l  { font-size: var(--step-4); }
.display--m  { font-size: var(--step-3); }
.display--s  { font-size: var(--step-2); }

/* Eyebrows carry section identity, so they are never decorative filler. */
.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 1.4rem;
}
/* Every dark ground, not just .band--teal. Missing .hero and .page-head here
   dropped the eyebrow to 1.6:1 — caught by axe, not by eye. */
.band--teal .eyebrow,
.hero .eyebrow,
.page-head .eyebrow,
.site-footer .eyebrow { color: var(--mint); }

/* Was a visible coral bar under every headline; kept as an invisible
   spacer (same margin) so removing the line doesn't collapse the gap
   it created between the headline and what follows it. */
.rule {
  width: 92px;
  height: 0;
  background: transparent;
  border: 0;
  margin: 1.6rem 0 2rem;
}
.rule--tight { margin: 1.1rem 0 1.4rem; }

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: none;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.meta {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.note {
  font-size: var(--step--1);
  font-style: italic;
  opacity: 0.75;
  max-width: 70ch;
}

/* --- 4. Layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); }
.band--cream { background: var(--cream); color: var(--teal); }
.band--warm  { background: var(--cream-warm); color: var(--teal); }
.band--teal  { background: var(--teal); color: var(--cream); }
.band--teal .display, .site-footer .display { color: var(--mint); }
.band--tight { padding-block: clamp(1.125rem, 2.5vw, 2rem); }
.band--compact { --band-y: clamp(1.75rem, 4.5vw, 4rem); }
.band--top-compact { padding-top: clamp(0.875rem, 2.25vw, 2rem); }
/* A .band used as a nested card inside another section, rather than its
   own full-bleed section — needs its own horizontal gutter, since it no
   longer sits directly inside a .wrap that would otherwise provide one. */
.framework-panel { margin-top: clamp(2.5rem, 6vw, 4rem); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .split--wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .split--portrait  { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); align-items: start; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: var(--cream);
  padding: 0.85rem 1.25rem;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- 5. Site chrome ----------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-line);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
  padding-block: 0.5rem;
}
.site-nav__home {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.site-nav__mark { width: 30px; height: 30px; flex: none; }
.site-nav__links { display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 2rem); }
.site-nav__links a {
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.7rem 0.15rem;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.site-nav__links a:hover { border-bottom-color: var(--coral); }
.site-nav__links a[aria-current="page"] { border-bottom-color: var(--coral); }

/* Below ~660px the four links no longer fit beside the wordmark, and an
   unwrapped row silently widens the whole document. Wrap to a second row. */
@media (max-width: 660px) {
  .site-nav__inner { flex-wrap: wrap; justify-content: flex-start; row-gap: 0; padding-bottom: 0.25rem; }
  .site-nav__home { flex: 1 0 100%; min-height: 48px; }
  .site-nav__links { flex-wrap: wrap; gap: 0.25rem 1.15rem; }
  .site-nav__links a { font-size: 0.7rem; letter-spacing: 0.07em; padding: 0.45rem 0 0.6rem; }
}

.site-footer { background: var(--teal); color: var(--cream); padding-block: var(--band-y) 3rem; }
.site-footer a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr; } }
.footer-grid h2 { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; color: var(--mint); }
.footer-grid li + li { margin-top: 0.55rem; }

.footer-chat { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.footer-chat__portrait {
  width: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-left: auto;
}
.colophon {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--teal-line);
  font-size: var(--step--1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  opacity: 0.85;
}

/* --- 6. Hero ------------------------------------------------------------ */

.hero { background: var(--teal); color: var(--cream); padding-block: clamp(3.5rem, 10vw, 8.5rem); position: relative; overflow: hidden; }
.hero .display { color: var(--mint); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.hero__portrait {
  width: min(320px, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
}
.hero__bearing { width: min(360px, 82%); margin-inline: auto; }

/* Case-study page header */
.page-head { background: var(--teal); color: var(--cream); padding-block: clamp(3rem, 7vw, 6rem); }
.page-head--compact { padding-block: clamp(1.5rem, 3.5vw, 3rem); }
.page-head--bottom-compact { padding-bottom: clamp(1.75rem, 4.5vw, 4rem); }
.page-head .display { color: var(--mint); }
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.8rem;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mint);
}
.page-head__meta li { display: flex; align-items: center; gap: 1.4rem; }
.page-head__meta li + li::before { content: ""; width: 6px; height: 6px; background: var(--coral); flex: none; }

/* --- 7. Logo strip ------------------------------------------------------ */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.4rem);
  margin-top: 2rem;
}
.logo-strip img {
  height: auto;
  width: auto;
  max-height: clamp(34px, 4.6vw, 52px);
  max-width: clamp(120px, 16vw, 178px);
  object-fit: contain;
}
.logo-strip .logo-strip__word {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: -0.01em;
}
.logo-strip--dark img { filter: brightness(0) invert(1); opacity: 0.92; }

/* --- 8. Stats ----------------------------------------------------------- */

.stats {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 700px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat__value {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.1rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  display: block;
}
.band--cream .stat__value, .band--warm .stat__value { color: var(--teal); }
.band--teal .stat__value { color: var(--mint); }
.stat__label {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin-top: 0.6rem;
  display: block;
}
.stat__detail { font-size: var(--step-0); line-height: 1.5; margin-top: 0.6rem; opacity: 0.9; max-width: 34ch; }

/* --- 9. Numbered steps -------------------------------------------------- */
/* Numbered because the approach really is sequential: research precedes
   direction precedes delivery. Not decoration. */

.steps { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); margin-top: 2.5rem; counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--coral-deep);
  min-width: 1.6ch;
}
.band--teal .step::before { color: var(--mint); }
.step h3 {
  font-family: var(--display-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--step-1);
  letter-spacing: 0.005em;
  margin-bottom: 0.5rem;
}
.step p { max-width: none; }

/* --- 11. Timeline (experience) ------------------------------------------ */

.timeline { margin-top: 2.5rem; border-top: 1px solid var(--cream-line); }
.timeline__item {
  display: grid;
  gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-bottom: 1px solid var(--cream-line);
}
@media (min-width: 780px) { .timeline__item { grid-template-columns: 8rem 1fr; } }
.timeline__when { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-deep); padding-top: 0.35rem; }
.timeline__role {
  font-family: var(--display-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--step-1);
}
.timeline__org { font-weight: 600; margin-top: 0.15rem; }
.timeline__detail { margin-top: 0.75rem; max-width: 68ch; }

/* --- 12. Figures -------------------------------------------------------- */

.figure { margin-top: clamp(2rem, 5vw, 3.5rem); }
.figure img { width: 100%; border: 1px solid var(--cream-line); background: var(--cream-warm); }
.band--teal .figure img { border-color: var(--teal-line); }
.figure figcaption { font-size: var(--step--1); margin-top: 0.9rem; opacity: 0.85; max-width: 70ch; }
.figure--pair { display: grid; gap: clamp(1rem, 3vw, 2rem); }
@media (min-width: 780px) { .figure--pair .figure__images { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; } }

/* Photo carousel — one slide at a time, so a tall run of photos doesn't
   stack into a huge scroll of vertical space. Arrows sit in a control bar
   below the image, never over it: an arrow overlaid on a photo can't
   guarantee the non-text contrast WCAG asks for against arbitrary image
   content, so — same as everywhere else on this site — controls live on
   the plain band background instead. Dots reveal a date/event label on
   hover or focus. */
.carousel { margin-top: 2.5rem; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; transition: transform 420ms ease; }
.carousel__slide { flex: 0 0 100%; min-width: 0; display: flex; justify-content: center; }
/* Fixed height, flexible width — the photo keeps its own aspect ratio and
   is never cropped or stretched to fill the slide. Narrower (portrait)
   photos just show more of the band ground on either side. */
.carousel__slide img { display: block; height: clamp(240px, 42vw, 560px); width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
.carousel__slide figcaption { padding: 0.9rem 1.1rem; font-size: var(--step--1); opacity: 0.85; text-align: center; }

.carousel__controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.4rem; }

/* Bare chevron, no border/box — matches the dropdown chevron's style,
   just bigger since these are standalone controls, not an inline hint. */
.carousel__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: color 160ms ease;
}
.carousel__arrow:hover { color: var(--coral-deep); }
.band--teal .carousel__arrow:hover, .site-footer .carousel__arrow:hover { color: var(--coral-bright); }
.carousel__arrow svg { width: 32px; height: 32px; }

.carousel__dots { display: flex; align-items: center; gap: 0.8rem; }
.carousel__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--cream-line);
  cursor: pointer;
}
.carousel__dot[aria-selected="true"] { background: var(--coral); }
.carousel__dot-label {
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--teal);
  color: var(--cream);
  font-size: var(--step--1);
  padding: 0.3rem 0.6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.carousel__dot:hover .carousel__dot-label,
.carousel__dot:focus-visible .carousel__dot-label { opacity: 1; }

/* --- 13. Pull panel ----------------------------------------------------- */

.panel {
  background: var(--teal-deep);
  color: var(--cream);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-left: 4px solid var(--coral);
}
.band--cream .panel, .band--warm .panel { background: var(--teal); }
/* .band--cream/.band--warm are ancestor selectors, so they also reach a
   .panel nested inside a .band--teal "card" sitting on a light page section
   (e.g. the accordion's quick-questions box inside .framework-panel) —
   restore teal-deep there since that panel is genuinely on a teal ground. */
.band--teal .panel { background: var(--teal-deep); }
.panel h3, .panel h4 { font-family: var(--display-secondary); font-weight: 600; text-transform: uppercase; font-size: var(--step-1); margin-bottom: 0.7rem; color: var(--mint); }

/* --- 14. The Bearing (signature) ---------------------------------------- */

.bearing { width: 100%; height: auto; }
/* Hover spin lives in JS (main.js) — decelerating back to rest on mouse-out
   needs to read the in-flight rotation angle, which a CSS animation can't. */
.bearing__form-a { fill: var(--bearing-a); }
.bearing__form-b { fill: var(--bearing-b); }
.bearing__ink-a  { fill: var(--bearing-a-ink); }
.bearing__ink-b  { fill: var(--bearing-b-ink); }
.bearing__pip    { fill: var(--mint-pale); }

.band--teal, .hero, .page-head, .site-footer {
  --bearing-b: var(--cream);
  --bearing-b-ink: var(--teal);
}

.bearing__label {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.bearing__arm { transition: opacity 200ms ease; }

/* The four principles, as an accordion — one open at a time. Left border
   and heading colour mirror the old static tiles; the trigger/panel split
   and :has() highlight are the only real additions. */
.accordion { display: grid; gap: 0.85rem; }
.accordion__item { border: 1px solid var(--teal-line); border-left-width: 4px; transition: border-color 160ms ease; }
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) { border-left-color: var(--mint); }
.accordion__heading { margin: 0; font-weight: inherit; }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.accordion__trigger:hover,
.accordion__trigger[aria-expanded="true"] { background: var(--teal-deep); }
.accordion__name {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: var(--step-1);
  color: var(--mint);
  margin-bottom: 0.35rem;
}
.accordion__summary { display: block; font-size: var(--step-0); }
.accordion__chevron {
  flex: none;
  width: 32px;
  height: 32px;
  transition: transform 200ms ease;
}
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }

.accordion__panel { padding: 0 1.3rem 1.3rem; display: grid; gap: 0.9rem; }
.accordion__panel[hidden] { display: none; }
/* Double the base 0.9rem gap (to 1.8rem total) everywhere a text block
   ends right before the next header-style label — .accordion__meta's
   italic example line, and both body paragraphs. */
.accordion__panel p + h4,
.accordion__panel p + .accordion__examples {
  margin-top: 0.9rem;
}
/* Labels (eyebrow, meta, examples, quick-questions heading) all sit at the
   same size — smaller than the principle name above, bigger than the body
   copy below, so the hierarchy reads name > label > body. */
.accordion__panel .eyebrow, .accordion__panel h4 { font-size: var(--step-0); margin-bottom: 0.3rem; }
.accordion__panel p { font-size: var(--step-0); }
/* .eyebrow.accordion__warning (not .accordion__warning alone) to match the
   specificity of .band--teal .eyebrow, which would otherwise win instead. */
.eyebrow.accordion__warning { color: var(--coral-bright); }
.accordion__meta {
  padding-top: 0.9rem;
  border-top: 1px solid var(--teal-line);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.accordion__meta em { display: block; margin-top: 0.3rem; font-size: var(--step--1); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: normal; }
.accordion__examples { font-size: var(--step-0); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.accordion__examples strong { color: var(--mint); }
.accordion__quick { margin-top: 0.3rem; }

/* Contact form — plain inputs, same border/focus language as everything else. */
.form { display: grid; gap: 1.5rem; margin-top: 2.5rem; max-width: 900px; }
.form-field { display: grid; gap: 0.5rem; }
.form-field label { font-weight: 700; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  color: var(--teal);
  background: var(--cream);
  border: 2px solid var(--teal);
  padding: 0.8rem 1rem;
  border-radius: 0;
  appearance: none;
}
.form-field textarea { resize: vertical; }
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231B475C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 24px 24px;
  padding-right: 2.6rem;
}
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: var(--coral-deep); }
.form-error { font-size: var(--step--1); font-weight: 600; color: var(--coral-deep); }
/* coral-deep is tuned for light backgrounds only (4.8:1 on cream); on the
   teal contact-form band it drops to ~1.9:1, so swap to coral-bright there. */
.band--teal .form-error { color: var(--coral-bright); }

/* Honeypot: off-screen and out of the accessibility tree so screen-reader
   and keyboard users never encounter it, but still present in the DOM for
   simple bots that fill in every field. */
.form-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: var(--step--1); font-weight: 600; }
.form-status[data-state="error"] { color: var(--coral-deep); }
.band--teal .form-status[data-state="error"] { color: var(--coral-bright); }
.form-status[data-state="success"] { color: var(--teal); }
.band--teal .form-status[data-state="success"] { color: var(--mint); }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; color: inherit; }
.band--teal .btn[disabled]:hover, .site-footer .btn[disabled]:hover { background: transparent; color: inherit; }

/* --- 16. Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  font-family: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid currentColor;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--teal); color: var(--cream); }
.band--teal .btn:hover, .site-footer .btn:hover { background: var(--mint); color: var(--teal); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* --- 17. Prev / next ---------------------------------------------------- */

.pager { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pager { grid-template-columns: repeat(2, 1fr); } }
.pager a {
  display: block;
  text-decoration: none;
  border: 1px solid var(--teal-line);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  transition: background-color 160ms ease;
}
.pager a:hover { background: var(--teal-deep); }
.pager__dir { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.pager__title { font-family: var(--display); text-transform: uppercase; font-size: var(--step-1); margin-top: 0.5rem; }

/* --- 18. Scroll reveal (opt-in, motion-safe) ---------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms ease, transform 520ms ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* --- 19. Utilities ------------------------------------------------------ */

.stack > * + * { margin-top: 1.1rem; }
.mt-l { margin-top: clamp(2.5rem, 6vw, 4rem); }
.mt-m { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 20. Print ---------------------------------------------------------- */

@media print {
  .site-nav, .pager, .btn-row { display: none; }
  .band--teal, .hero, .page-head { background: #fff !important; color: #000 !important; }
  .hero .display, .page-head .display, .band--teal .display, .site-footer .display, .band--teal .eyebrow { color: #000 !important; }
  body { background: #fff; color: #000; }
}