/* ============================================================
   Elder Trey Fowers — California Arcadia Spanish-Speaking Mission

   DESIGN DIRECTION
   The family asked for "colors that kind of match the California
   flag" and a "simple clean look" in tans. So: a warm tan paper, the
   flag's red as the one accent, its grizzly-bear brown for type and
   dark panels, and a touch of its grass green for scripture. One
   motif only, taken from the flag: the bold red band along its
   bottom edge (under the hero, atop the dark sections and footer,
   and as the hover bar on cards), plus its single red star as the
   brand mark. Slab headings echo the flag's lettering; crisp,
   modest corners and generous whitespace keep it clean.

   Mobile first. Everything here is written for a phone; the
   min-width blocks add back the room a desktop has.
   ============================================================ */

:root {
  --ink:        #2a2119;   /* bear-brown black */
  --ink-soft:   #57493b;
  --ink-faint:  #6e5f52;
  --paper:      #f8f3ea;   /* warm tan paper */
  --paper-2:    #fffdf9;
  --line:       #e4d8c4;
  --line-soft:  #efe6d6;

  --navy:       #5a3a22;   /* grizzly brown (the "primary") */
  --navy-deep:  #3a2516;
  --gold:       #c8202f;   /* flag red (the accent) */
  --gold-text:  #a01b28;   /* darker red for small text */
  --gold-soft:  #f6dcd8;
  --clay:       #8a5a2b;   /* saddle tan */
  --sea:        #3f6b35;   /* the grass under the bear */
  --sea-soft:   #e5ede0;

  --tan:        #ead9bf;   /* hero and alt sections */
  --tan-light:  #e8c99a;   /* tan that reads on the dark brown */

  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  14px;

  --shadow:     0 1px 2px rgba(58,37,22,.05), 0 8px 20px -14px rgba(58,37,22,.24);
  --shadow-lg:  0 2px 4px rgba(58,37,22,.06), 0 22px 44px -22px rgba(58,37,22,.32);

  --serif: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --gutter: 20px;
  --header-h: 62px;

  /* One easing for everything, so the whole site moves the same way */
  --ease: cubic-bezier(.25,.7,.3,1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.64;
  color: var(--ink);
  background: var(--paper);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--navy-deep);
}
h1 { font-size: clamp(2.5rem, 10.5vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 6vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.05em; }
a { color: var(--navy); text-decoration-color: rgba(200,32,47,.4); text-underline-offset: 3px; }
a:hover { color: var(--gold-text); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 760px; }

.eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text);
  margin: 0 0 .7rem;
}
.eyebrow--muted { color: var(--ink-faint); }

.lede { font-size: 1.08rem; color: var(--ink-soft); }
.muted { color: var(--ink-faint); }
.center { text-align: center; }

/* ============================================================
   Motion — one reveal pattern used everywhere. Calm and short.
   ============================================================ */

/* Content is only ever hidden when motion is confirmed working. The <head>
   snippet adds .js-motion and strips it again if motion.js never boots, so a
   failed script can never leave the page blank. */
.reveal {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js-motion .reveal {
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}
.js-motion .reveal.is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(248,243,234,.94);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
/* Over the homepage's tan hero it starts clear */
body.has-hero .site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.has-hero .site-header.is-stuck,
.site-header.is-stuck {
  background: rgba(248,243,234,.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 16px;
  height: var(--header-h);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: var(--navy-deep); text-decoration: none; white-space: nowrap;
  min-width: 0;
}
.brand:hover { color: var(--navy-deep); }
.brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brand__sun { width: 24px; height: 24px; flex: none; }
.brand small {
  display: block; font-family: var(--sans); font-weight: 600;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav-toggle {
  margin-left: auto; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  width: 46px; height: 44px; cursor: pointer; color: var(--navy-deep);
  display: grid; place-items: center;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.nav-toggle:hover { border-color: var(--navy); }
.nav-toggle:active { transform: scale(.95); }

/* The mobile sheet */
.nav {
  position: fixed; inset: var(--header-h) 0 auto 0;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--paper-2);
  border-bottom: 4px solid var(--gold);
  padding: 14px var(--gutter) 22px;
  box-shadow: var(--shadow-lg);
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 70;
}
.nav.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.nav a {
  padding: 13px 16px; border-radius: var(--radius-sm); text-decoration: none;
  font-size: 1.04rem; font-weight: 500; color: var(--ink-soft);
  transition: background .16s var(--ease), color .16s var(--ease), transform .3s var(--ease),
              opacity .3s var(--ease);
  opacity: 0; transform: translateY(-6px);
}
.nav.open a { opacity: 1; transform: none; }
.nav.open a:nth-child(1) { transition-delay: 40ms; }
.nav.open a:nth-child(2) { transition-delay: 72ms; }
.nav.open a:nth-child(3) { transition-delay: 104ms; }
.nav.open a:nth-child(4) { transition-delay: 136ms; }
.nav.open a:nth-child(5) { transition-delay: 168ms; }
.nav.open a:nth-child(6) { transition-delay: 200ms; }
.nav.open a:nth-child(7) { transition-delay: 232ms; }
.nav a:active { background: var(--line-soft); }
.nav a[aria-current="page"] { background: var(--navy); color: #fff; }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 69;
  background: rgba(42,33,25,.4);
  opacity: 0; visibility: hidden;
  transition: opacity .26s var(--ease), visibility .26s;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }

/* ============================================================
   Hero — tan paper, his photo framed like a print, and the
   flag's red band along the bottom edge.
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, #f3e9d8 0%, var(--tan) 100%);
  color: var(--ink);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + 14px);
  padding-bottom: 14px;   /* room for the red band */
  overflow: hidden;
}
/* The flag's red band */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--gold);
}
/* The flag's lone star — shown on larger screens */
.hero__rays { display: none; }

/* His photo, matted in white like a print */
.portrait {
  position: relative; z-index: 1;
  margin: 0 var(--gutter);
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.portrait img {
  width: 100%; height: auto;
  border-radius: 2px;
}
.portrait__ph {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  min-height: 220px;
  color: var(--ink-faint); font-size: .86rem; padding: 24px;
  background: var(--line-soft);
}
.portrait__ph strong { color: var(--ink-soft); }
.portrait__ph svg { width: 40px; height: 40px; opacity: .6; }

.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 46px;
}
.hero h1 { color: var(--navy-deep); margin-bottom: .3em; text-wrap: balance; }
.hero .eyebrow { color: var(--gold-text); }
.hero__sub {
  font-size: 1.06rem; color: var(--ink-soft);
  max-width: 42ch; margin-bottom: 1.4em;
}

.hero__facts {
  display: grid; gap: 11px;
  padding-top: 18px; margin-bottom: 26px;
  border-top: 1px solid rgba(90,58,34,.2);
}
.fact {
  display: flex; align-items: center; gap: 10px;
  font-size: .95rem; line-height: 1.3;
  color: var(--ink-soft);
}
.fact svg { width: 17px; height: 17px; flex: none; color: var(--gold); }
.fact b { font-weight: 600; color: var(--ink); }

.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
/* On the light hero the "light" buttons become solid brown and outlined brown */
.hero .btn--light { background: var(--navy); border-color: var(--navy); color: #fff; }
.hero .btn--light:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.hero .btn--outline-light { background: transparent; border-color: var(--navy); color: var(--navy-deep); }
.hero .btn--outline-light:hover { background: var(--paper-2); border-color: var(--navy-deep); color: var(--navy-deep); }

.scroll-hint { display: none; }

/* ============================================================
   Sections
   ============================================================ */

.section { padding: 58px 0; }
.section--tight { padding: 36px 0; }
.section--alt {
  background: linear-gradient(180deg, #f3e9d8, var(--paper));
  border-block: 1px solid var(--line);
}
.section--dark {
  position: relative;
  background: var(--navy-deep);
  color: rgba(255,255,255,.8);
  border-top: 6px solid var(--gold);   /* the flag's band again */
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--tan-light); }
.section--dark .muted { color: rgba(255,255,255,.62); }

.section-head { margin-bottom: 26px; }
.section-head h2 { margin-bottom: 0; }
.section-head__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.grid { display: grid; gap: 18px; }
.grid-2, .grid-3 { grid-template-columns: 1fr; }

.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.card--flush { padding: 0; overflow: hidden; }
.card h3 { margin-bottom: .4em; }
.section--dark .card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}

/* ============================================================
   Buttons — squared off like a flag, not pill-shaped
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-sm); border: 1.5px solid var(--navy);
  background: var(--navy); color: #fff; font: inherit; font-size: .95rem; font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none; cursor: pointer; min-height: 46px;
  transition: transform .18s var(--ease), background .18s var(--ease),
              box-shadow .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; box-shadow: inset 0 -3px 0 var(--gold); }
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: var(--navy-deep); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--light { background: #fff; border-color: #fff; color: var(--navy-deep); }
.btn--light:hover { background: var(--tan); border-color: var(--tan); color: var(--navy-deep); }
.btn--outline-light { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.55); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.btn--sm { padding: 9px 16px; font-size: .88rem; min-height: 40px; }
.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.section--dark .btn--ghost:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }

/* ============================================================
   Progress
   ============================================================ */

.progress-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 22px 22px; box-shadow: var(--shadow);
}
.progress-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.progress-big {
  font-family: var(--serif); font-size: 3.2rem; font-weight: 700;
  line-height: .95; color: var(--navy-deep); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.progress-big small {
  display: block; font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: 9px;
}
.progress-pct {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700;
  color: var(--gold-text); line-height: 1; text-align: right;
  font-variant-numeric: tabular-nums;
}
.progress-pct small {
  display: block; font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 7px;
}

.bar {
  position: relative; height: 12px; border-radius: 3px;
  background: var(--line-soft); border: 1px solid var(--line);
  overflow: hidden;
}
.bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #b78a55, var(--gold));
  transition: width 1.5s var(--ease);
}
.bar-labels {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: .76rem; color: var(--ink-faint); margin-top: 11px;
}
.bar-labels span:last-child { text-align: right; }

.progress-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 22px;
  border-top: 1px solid var(--line-soft); padding-top: 18px;
}
.stat { min-width: 0; }
.stat__num {
  font-family: var(--serif); font-size: 1.36rem; font-weight: 700;
  line-height: 1.1; color: var(--navy-deep);
  font-variant-numeric: tabular-nums;
}
.stat__num span { font-size: .8rem; font-weight: 500; color: var(--ink-faint); margin-left: 1px; }
.stat__label {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-top: 6px; line-height: 1.3;
}

/* ============================================================
   Letters
   ============================================================ */

.letter-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: inset 0 -3px 0 transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
/* Hover: the flag's red band slides in along the bottom */
.letter-card:hover {
  transform: translateY(-2px); border-color: #d6c4a6; color: inherit;
  box-shadow: inset 0 -3px 0 var(--gold), var(--shadow-lg);
}
.letter-card:active { transform: scale(.99); }
.letter-card__meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: .78rem; color: var(--ink-faint); margin-bottom: 11px;
}
.letter-card h3 { font-size: 1.38rem; margin-bottom: .35em; }
.letter-card__excerpt { color: var(--ink-soft); font-size: .97rem; margin: 0; }

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  background: var(--sea-soft); color: var(--sea);
}
.pill--gold { background: var(--gold-soft); color: var(--gold-text); }
.pill--clay { background: #f1e2cc; color: var(--clay); }

.letter-full { border-bottom: 1px solid var(--line); padding: 34px 0; }
.letter-full:last-child { border-bottom: 0; }
.letter-full__body { font-size: 1.04rem; line-height: 1.74; }
.letter-full__body p { margin-bottom: 1.2em; }

/* Scripture: grass green, set in the slab */
blockquote.scripture {
  margin: 1.5em 0; padding: 20px 20px;
  background: var(--sea-soft); border-left: 3px solid var(--sea);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; color: #2c4a25;
}
blockquote.scripture p { margin-bottom: .8em; }
blockquote.scripture p:last-child { margin-bottom: 0; }
blockquote.scripture cite {
  display: block; margin-top: 12px; font-family: var(--sans); font-style: normal;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sea);
}

.thought-card {
  background: linear-gradient(155deg, #fff, var(--sea-soft));
  border: 1px solid #d5e2cd; border-radius: var(--radius-lg);
  padding: 26px 22px; box-shadow: var(--shadow);
}
.thought-card__quote {
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.5;
  color: #263f20; margin: 0 0 1em;
}
.thought-card__ref {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sea); margin: 0;
}
/* On the dark section the green card would fight the brown */
.section--dark .thought-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.section--dark .thought-card h3 { color: #fff; }
.section--dark .thought-card__quote { color: #f6efe4; }
.section--dark .thought-card__ref { color: #b5d3a6; }
.section--dark .thought-card p { color: rgba(255,255,255,.76); }

/* ============================================================
   From the family — shared through Mission Control.
   Always visibly distinct from his own words: a soft red-blush
   panel with a red rule (his scripture is green, his text plain).
   ============================================================ */

.family-note {
  margin: 1.5em 0; padding: 18px 20px;
  background: var(--gold-soft); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--sans);
}
.family-note p { margin-bottom: .8em; }
.family-note p:last-child { margin-bottom: 0; }
.family-note .family-note__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: .7em;
}
.pill--family { background: var(--gold-soft); color: var(--gold-text); }
.photo__shared {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  padding: 3px 9px; border-radius: 3px;
  background: rgba(246,220,216,.96); color: #8a1722;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.lightbox__cap .lightbox__shared { color: #f6dcd8; display: block; font-size: .8rem; margin-top: 4px; }

/* ============================================================
   Spanish words (class names kept from the template)
   ============================================================ */

.word-list { display: grid; gap: 0; }
.word {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 2px; background: none;
  border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0;
}
.word:first-child { padding-top: 2px; }
.word:last-child { border-bottom: 0; padding-bottom: 2px; }
/* Standing on their own (the glossary page) they get their box back */
.word-list--boxed .word {
  padding: 13px 16px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.word-list--boxed { gap: 9px; }
.word__term { font-family: var(--serif); font-size: 1.12rem; color: var(--navy-deep); font-weight: 600; }
.word__def { color: var(--ink-soft); font-size: .93rem; }
.section--dark .word { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.section--dark .word__term { color: #fff; }
.section--dark .word__def { color: rgba(255,255,255,.7); }

/* ============================================================
   Photos — a white mat around each, like a print
   ============================================================ */

.photo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.photo {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--line-soft); border: 4px solid #fff;
  outline: 1px solid var(--line);
  aspect-ratio: 1 / 1; cursor: pointer; padding: 0; display: block; width: 100%;
  box-shadow: var(--shadow);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.photo:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.photo:active { transform: scale(.975); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 12px 11px; text-align: left;
  background: linear-gradient(transparent, rgba(42,27,16,.88));
  color: #fff; font-size: .78rem; line-height: 1.34;
}
.photo__ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 16px; color: var(--ink-faint);
  background: repeating-linear-gradient(45deg, #f4ecdf, #f4ecdf 12px, #efe4d3 12px, #efe4d3 24px);
}
.photo__ph strong { color: var(--ink-soft); font-size: .85rem; font-weight: 600; font-family: var(--serif); }
.photo__ph code { font-size: .68rem; background: rgba(58,37,22,.06); padding: 2px 6px; border-radius: 3px; }

/* A swipeable, edge-to-edge rail — the homepage version */
.photo-rail {
  margin-inline: calc(var(--gutter) * -1);
}
.photo-rail .photo-grid {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px var(--gutter) 14px;
  scrollbar-width: none;
}
.photo-rail .photo-grid::-webkit-scrollbar { display: none; }
.photo-rail .photo {
  flex: 0 0 72%;
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
}
.photo-rail .photo__cap { font-size: .86rem; padding: 34px 14px 13px; }

/* ============================================================
   Lightbox
   ============================================================ */

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(30,20,12,.96);
  align-items: center; justify-content: center;
  padding: 72px 14px 88px;
}
.lightbox.open { display: flex; animation: lbIn .24s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__figure { margin: 0; animation: lbFig .32s var(--ease); }
@keyframes lbFig { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.lightbox img {
  max-width: min(1000px, 94vw); max-height: 66vh;
  object-fit: contain; border-radius: 4px; margin: 0 auto;
}
.lightbox__cap { color: #fff; text-align: center; margin-top: 16px; font-size: .95rem; }
.lightbox__cap span { display: block; color: rgba(255,255,255,.62); font-size: .8rem; margin-top: 4px; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,.14); border: 0; color: #fff;
  width: 50px; height: 50px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.35rem;
  display: grid; place-items: center;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--gold); }
.lightbox__close:active, .lightbox__nav:active { transform: scale(.92); }
.lightbox__close { top: 16px; right: 16px; }
/* On a phone the arrows sit under the picture, not on it */
.lightbox__nav { bottom: 20px; top: auto; }
.lightbox__nav--prev { left: 26%; }
.lightbox__nav--next { right: 26%; }

/* ============================================================
   Map / areas
   ============================================================ */

.map-shell { display: grid; grid-template-columns: 1fr; gap: 14px; }
.map-pane {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: #e9e2d4;
}
.map-pane__label {
  position: absolute; z-index: 3; top: 12px; left: 12px;
  background: rgba(58,37,22,.86); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 3px; pointer-events: none;
}
#map, #pano { height: 340px; width: 100%; }

.pano-note {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 6px;
  padding: 28px; background: var(--paper-2); color: var(--ink-soft); font-size: .92rem; line-height: 1.55;
}
.pano-note[hidden] { display: none; }
.pano-note strong { color: var(--navy-deep); font-family: var(--serif); font-size: 1.08rem; }

.map-hint { font-size: .87rem; margin: 12px 0 0; }
.map-hint[hidden] { display: none; }

.area-tabs {
  display: flex; gap: 8px; margin-bottom: 14px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.area-tabs::-webkit-scrollbar { display: none; }
.area-tabs[hidden] { display: none; }
.area-tab {
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radius-sm); white-space: nowrap; flex: none;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-soft);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.area-tab:hover { border-color: var(--navy); color: var(--navy-deep); }
.area-tab:active { transform: scale(.97); }
.area-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.area-tab__now {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
  background: var(--gold); color: #fff; font-size: .64rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}
.area-tab--ghost { border-style: dashed; }

.map-setup {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; min-height: 280px; padding: 36px 22px;
  border: 1px dashed #d6c4a6; border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink-soft);
}
.map-setup svg { color: var(--gold); }
.map-setup h3 { margin: 0; }
.map-setup p { max-width: 52ch; margin: 0; font-size: .95rem; }
.map-setup code {
  background: var(--line-soft); padding: 2px 6px; border-radius: 3px;
  font-size: .88em; color: var(--navy-deep);
}
.gm-style .gm-style-iw-c { border-radius: var(--radius-sm); padding: 14px 16px; }
.gm-style .gm-style-iw-d { overflow: hidden !important; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--gold), var(--line));
}
.timeline__item { position: relative; padding-bottom: 26px; }
.timeline__item::before {
  content: ""; position: absolute; left: -26px; top: 6px;
  width: 15px; height: 15px; border-radius: 3px;
  background: var(--paper); border: 3px solid var(--line);
}
.timeline__item--current::before { background: var(--gold); border-color: var(--gold-soft); }
.timeline__item--done::before { background: var(--navy); border-color: var(--tan); }
.timeline__date { font-size: .74rem; color: var(--ink-faint); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.timeline__item h3 { margin: 4px 0 .3em; font-size: 1.18rem; }
.timeline__item p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ============================================================
   Search / filters
   ============================================================ */

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.input, .select, .textarea {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  padding: 12px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper-2); color: var(--ink); width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(90,58,34,.14);
}
.textarea { min-height: 220px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.6; resize: vertical; }
.search-wrap { flex: 1 1 100%; }

/* ============================================================
   Footer — bear brown, with the red band across the top
   ============================================================ */

.site-footer {
  background: var(--navy-deep); color: rgba(255,255,255,.74);
  border-top: 8px solid var(--gold);
  padding: 44px 0 34px; font-size: .94rem;
}
.site-footer h4 { color: var(--tan-light); font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 13px; }
.site-footer a { color: rgba(255,255,255,.88); text-decoration-color: rgba(232,201,154,.45); }
.site-footer a:hover { color: var(--tan-light); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-bottom {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; color: rgba(255,255,255,.6);
  display: flex; flex-direction: column; gap: 6px;
}

/* ============================================================
   Admin
   ============================================================ */

.admin-body { counter-reset: step; }
.admin-step { counter-increment: step; margin-bottom: 30px; }
.admin-step h2::before {
  content: counter(step); display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-right: 12px; border-radius: var(--radius-sm);
  background: var(--gold); color: #fff; font-family: var(--sans);
  font-size: .92rem; font-weight: 700; vertical-align: 3px;
}
.para-pick {
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper-2); margin-bottom: 8px; cursor: pointer; font-size: .93rem;
  display: flex; gap: 12px; align-items: flex-start; transition: border-color .16s, background .16s;
}
.para-pick:hover { border-color: var(--sea); }
.para-pick.picked { border-color: var(--sea); background: var(--sea-soft); }
.para-pick input { margin-top: 5px; flex: none; }
.code-out {
  background: var(--navy-deep); color: #efe3d0; border-radius: var(--radius);
  padding: 18px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.6; overflow-x: auto; white-space: pre;
  max-height: 420px; overflow-y: auto;
}
.note {
  background: #f3e6d1; border: 1px solid #e2cba6; color: #5e3f1f;
  border-radius: var(--radius-sm); padding: 14px 17px; font-size: .9rem;
}
.note strong { color: #3f2814; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 13px; margin-bottom: 13px; }
.field label { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }

/* ============================================================
   ≥ 600px — small tablets
   ============================================================ */

@media (min-width: 600px) {
  :root { --gutter: 28px; }
  .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .photo-rail .photo { flex-basis: 46%; }
  .field-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .search-wrap { flex: 1 1 260px; max-width: 380px; }
  .progress-card { padding: 30px 30px 26px; }
  .card { padding: 26px 28px; }
  .thought-card { padding: 32px 34px; }
  .letter-card { padding: 26px 28px; }
  .word { flex-direction: row; align-items: baseline; gap: 12px; }
  .word__def { margin-left: auto; text-align: right; }
  .portrait { max-width: 560px; margin-inline: auto; }
}

/* ============================================================
   ≥ 900px — desktop. The hero becomes a spread: words left,
   the framed photo right, the star above the name.
   ============================================================ */

@media (min-width: 900px) {
  :root { --header-h: 68px; }

  .section { padding: 86px 0; }
  .section--tight { padding: 52px 0; }
  .section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 34px; flex-wrap: wrap;
  }
  .section-head__actions { margin-top: 0; }

  .grid { gap: 24px; }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

  /* Header: always solid, inline nav, no sheet */
  body.has-hero .site-header {
    background: rgba(248,243,234,.92);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: var(--line);
  }
  .brand { font-size: 1.12rem; }
  .brand__sun { width: 26px; height: 26px; }
  .brand small { font-size: .66rem; }
  .nav-toggle { display: none; }
  .nav-backdrop { display: none; }
  .nav {
    position: static; inset: auto;
    flex-direction: row; align-items: center; gap: 2px;
    margin-left: auto; padding: 0;
    background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .nav a {
    position: relative;
    padding: 8px 12px; border-radius: var(--radius-sm); font-size: .93rem;
    white-space: nowrap;
    opacity: 1; transform: none; transition-delay: 0ms !important;
  }
  .nav a:hover { background: var(--line-soft); color: var(--navy-deep); }
  /* Current page: brown text with the red band under it */
  .nav a[aria-current="page"] { background: none; color: var(--navy-deep); font-weight: 600; }
  .nav a[aria-current="page"]::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
    height: 3px; background: var(--gold);
  }

  /* Hero: two columns inside the page width */
  .hero {
    display: grid;
    grid-template-columns: 1fr minmax(0, calc(var(--wrap) / 2)) minmax(0, calc(var(--wrap) / 2)) 1fr;
    align-items: center;
    margin-top: 0;
    padding: 84px 0 104px;
  }
  .hero::after { height: 16px; }
  .hero__rays {
    display: block;
    position: absolute; top: 40px;
    left: max(var(--gutter), calc(50% - var(--wrap) / 2 + var(--gutter)));
    width: 30px; height: 30px; pointer-events: none; z-index: 1;
  }
  .hero__inner {
    grid-column: 2; grid-row: 1;
    max-width: none; margin: 0;
    padding: 0 48px 0 var(--gutter);
  }
  .hero__inner > * { min-width: 0; }
  .portrait {
    grid-column: 3; grid-row: 1;
    margin: 0 var(--gutter) 0 0; max-width: none;
    padding: 10px;
  }
  .hero__sub { font-size: 1.14rem; }
  .hero__facts {
    display: flex; flex-wrap: wrap; gap: 12px 26px;
  }
  .fact { font-size: .9rem; }

  /* Progress */
  .progress-big { font-size: 3.7rem; }
  .progress-stats { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .stat__num { font-size: 1.55rem; }

  /* Photos back to a grid everywhere */
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
  .photo-rail { margin-inline: 0; }
  .photo-rail .photo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    overflow: visible; padding: 0;
  }
  .photo-rail .photo { flex: initial; aspect-ratio: 1 / 1; }
  .photo-rail .photo__cap { font-size: .85rem; padding: 26px 14px 12px; }

  /* Lightbox arrows return to the sides */
  .lightbox { padding: 40px 24px; }
  .lightbox img { max-height: 78vh; }
  .lightbox__nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__nav--prev { left: 20px; }
  .lightbox__nav--next { right: 20px; }
  .lightbox__close { top: 20px; right: 22px; }

  /* Map side by side */
  .map-shell { grid-template-columns: 1fr 1fr; gap: 16px; }
  #map, #pano { height: 460px; }
  .area-tabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }

  .letter-full { padding: 44px 0; }
  .letter-full__body { font-size: 1.05rem; }
  .timeline { padding-left: 30px; }
  .timeline__item::before { left: -30px; }
  .site-footer { padding: 52px 0 40px; }
}

/* Small laptops: seven nav links need tighter spacing to leave room for his name */
@media (min-width: 900px) and (max-width: 1099px) {
  .nav a { padding: 8px 5px; font-size: .83rem; }
  .nav a[aria-current="page"]::after { left: 5px; right: 5px; }
  .brand small { display: none; }
}

@media print {
  .site-header, .site-footer, .toolbar, .btn, .scroll-hint, .nav-backdrop { display: none !important; }
  body { background: #fff; }
  .hero::after { display: none; }
  .js-motion .reveal { opacity: 1 !important; transform: none !important; }
}

/* Under the maps: the pins are only somewhere in the area. */
.map-note { font-size: .87rem; margin: 14px 0 0; color: var(--ink-soft); }
.map-note strong { color: var(--ink); }

/* Mission president (About page) and mission boundary picture (map page). */
.president { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: start; margin-top: 1.2em; }
.president--nophoto { grid-template-columns: 1fr; }
.president__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
.president h3 { margin: 0 0 .25em; }
.president__since { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1.1em; }
.president__source { color: var(--ink-soft); font-size: .86rem; }
@media (max-width: 640px) {
  .president { grid-template-columns: 1fr; }
  .president__photo { max-width: 220px; }
}
.boundary-map { margin: 1.4em 0 0; }
.boundary-map img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.boundary-map figcaption { color: var(--ink-soft); font-size: .87rem; margin-top: 10px; }

/* A photo nobody captioned shows no caption bar. */
.photo__cap:empty, .photo__ph strong:empty { display: none; }