/* Ojai Citizens — dusk palette taken from the hero (indigo sky, pink bluffs, gold light).
   Tokens first; change them to restyle the whole site. */
:root {
  --bg: #16183e;
  --bg-raised: #1f2150;
  --ink: #fbf5ec;
  --muted: #c6bfd6;
  --accent: #ffcf7a;          /* pink-moment gold: buttons, links, the rallying cry */
  --accent-ink: #2a1a06;
  --pink: #ec8c8a;            /* the bluffs */
  --line: rgba(251, 245, 236, .14);
  --shadow-text: 0 2px 4px rgba(0, 0, 0, .55), 0 6px 40px rgba(0, 0, 0, .55);
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --max: 68rem;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.55; }
a { color: var(--accent); }
img { max-width: 100%; height: auto; }

.skip-link { position: absolute; left: -999px; top: .5rem; background: var(--accent); color: var(--accent-ink); padding: .5rem 1rem; border-radius: 6px; z-index: 20; }
.skip-link:focus { left: .5rem; }

/* ---- header ---- */
.site-header { display: flex; align-items: center; gap: 1.5rem; max-width: var(--max); margin: 0 auto; padding: 1rem 1.25rem; }
.brand { font-family: var(--display); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 1.15rem; color: var(--ink); text-decoration: none; text-shadow: var(--shadow-text); }
.site-nav { flex: 1; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; opacity: .9; text-shadow: var(--shadow-text); }
.site-nav a:hover, .site-nav .current-menu-item > a { color: var(--accent); opacity: 1; }
.site-nav .sub-menu { display: none; }
.cta, .button { display: inline-block; padding: .55rem 1.2rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
/* the header Donate button: big and unmissable */
.cta { padding: .9rem 2.2rem; font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 6px 26px rgba(0, 0, 0, .45), 0 0 0 3px rgba(255, 207, 122, .25); animation: cta-pulse 2.4s ease-in-out infinite; }
.cta:hover { animation: none; transform: scale(1.04); }
@keyframes cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.cta:hover, .button:hover { filter: brightness(1.06); }
.button--disabled { background: var(--bg-raised); color: var(--muted); border: 1px solid var(--line); box-shadow: none; cursor: not-allowed; }

/* ---- pages ---- */
.site-main { max-width: var(--max); margin: 0 auto; padding: 1rem 1.25rem 4rem; }
.page-head { margin: 1.5rem 0 2rem; }
.page-head h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; line-height: 1; font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0 0 .5rem; }
.page-head .subtitle { color: var(--muted); font-size: 1.15rem; margin: 0; max-width: 40rem; }
.site-main h2 { font-family: var(--display); font-weight: 800; letter-spacing: .01em; margin-top: 2rem; }
.prose { max-width: 42rem; font-size: 1.08rem; }
.notice { padding: 1rem 1.2rem; border-left: 4px solid var(--pink); background: var(--bg-raised); border-radius: 0 var(--radius) var(--radius) 0; }
.site-footer { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.site-footer a { color: var(--muted); }

/* ---- home: full-page hero ---- */
.page-index .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; max-width: none; }
.page-index .site-main { max-width: none; padding: 0; }
/* home: the hero is exactly one screen; the letter and the sign-on form follow below it */
.page-index .hero { height: 100vh; height: 100svh; min-height: 0; }
.page-index .site-footer { max-width: none; text-align: center; }
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: -2; }
.hero::after {           /* keeps the words readable over the bright part of the sky */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 10, 30, .5) 0, rgba(10, 10, 30, .15) 30%, rgba(10, 10, 30, .1) 50%, rgba(10, 10, 30, .6) 100%),
              radial-gradient(65% 50% at 50% 50%, rgba(20, 14, 40, .45), rgba(20, 14, 40, 0) 100%);
}
.page-index .hero__img { object-position: 50% 35%; }   /* keep the horizon and mountains in frame */
.hero__text { text-align: center; padding: 6rem 1.25rem 8rem; max-width: 100%; }
.hero__name { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; font-size: clamp(2.4rem, 8.6vw, 11rem); margin: 0; color: var(--ink); text-shadow: var(--shadow-text); }
.hero__cry { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.25rem, 4.6vw, 3.6rem); margin: .8rem 0 0; color: var(--accent); text-shadow: var(--shadow-text); }
.hero__qr { position: absolute; right: 1.5rem; bottom: 3.25rem; display: flex; flex-direction: column; align-items: center; padding: .5rem; background: #fff; color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); transition: transform .2s ease; }
.hero__qr:hover { transform: translateY(-2px); }
.hero__more { display: inline-block; margin-top: 2.4rem; padding-bottom: .2rem; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; text-shadow: var(--shadow-text); border-bottom: 2px solid var(--accent); }
.hero__more:hover { color: var(--accent); }

/* ---- home: the letter and the sign-on form ---- */
.home-section { max-width: var(--max); margin: 0 auto; padding: 4.5rem 1.25rem 1rem; scroll-margin-top: 1rem; }
.eyebrow { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; color: var(--accent); margin: 0 0 .5rem; }
.letter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem 3rem; align-items: start; }
.letter__intro { position: sticky; top: 2rem; }
.letter__intro h2 { margin: 0 0 .75rem; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.02; }
.letter__lede { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.5rem; }
.paper { background: #fbf7ee; color: #1d1a16; font-family: var(--serif); font-size: 1.06rem; line-height: 1.62; padding: clamp(1.5rem, 4.5vw, 3.25rem); border-radius: 6px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.paper p { margin: 0 0 1.15em; }
.paper p:last-child { margin-bottom: 0; }
.paper__from { color: #57503f; font-size: .95rem; }
.paper__head { font-weight: 700; letter-spacing: .02em; }
.paper .u { text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 2px; font-weight: 700; }
.paper__close { margin-top: 2em; }
.sign { max-width: 46rem; padding-bottom: 4rem; }
.sign h2 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.sign__lede { color: var(--muted); margin: 0 0 1.5rem; }
.sign .fom { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.sign .fom-head { display: none; }             /* the section above already says it */
.sign .fom-q { margin-bottom: 1.15rem; }
.sign .fom-label { display: block; font-weight: 700; margin: 0 0 .4rem; }
.sign .fom-req { color: var(--pink); }
.sign .fom input:not([type=checkbox]):not([type=radio]), .sign .fom textarea { width: 100%; font: inherit; color: var(--ink); background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-radius: 8px; padding: .75rem .9rem; }
.sign .fom input:focus, .sign .fom textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sign .fom-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sign .fom-submit { font: inherit; font-weight: 700; padding: .7rem 1.5rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.sign .fom-submit:hover { filter: brightness(1.06); }
.sign .fom-submit[disabled] { opacity: .6; cursor: progress; }
.sign .fom-status { color: var(--muted); }
.sign .fom-success { padding: 1.5rem 1.75rem; }
.sign .fom-success-title { margin: 0 0 .4rem; color: var(--accent); }
.sign .fom-success-text { margin: 0; }

/* ---- QR code (uploaded SVG, includes its own "scan to donate" caption) ---- */
.qr { display: block; width: 9.5rem; height: auto; border-radius: 6px; }
.qr--large { width: 18rem; margin: 0 auto; }

/* ---- donate ---- */
.donate { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; }
.donate__card { padding: 1.75rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.donate__card h2:first-of-type { margin-top: 1.5rem; }
.donate__aside h2 { margin-top: .5rem; }
.donate__aside li { margin-bottom: .5rem; }
.qr-wrap { margin: 1.5rem 0 0; }
.qr-url { text-align: center; margin: .75rem 0 0; color: var(--muted); }
.qr-url a { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; word-break: break-all; }

@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; gap: .75rem 1rem; }
  .brand { flex: 1 1 auto; font-size: 1rem; }
  .site-nav { flex: 1 1 100%; order: 3; }      /* the menu takes its own row under the brand */
  .site-nav ul { gap: .35rem .9rem; }
  .cta { padding: .75rem 1.6rem; font-size: 1.15rem; }
  .hero { grid-template-rows: 1fr auto; place-items: center; }
  .hero__text { padding: 5rem 1rem 1rem; }
  .hero__qr { position: static; margin: 0 auto 3.25rem; }
  .qr { width: 8rem; }
  .donate { grid-template-columns: 1fr; }
  .home-section { padding: 3rem 1rem .5rem; }
  .letter { grid-template-columns: 1fr; gap: 1.5rem; }
  .letter__intro { position: static; }
  .paper { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { animation: none; }
  .cta:hover { transform: none; }
  .hero__qr { transition: none; }
  .hero__qr:hover { transform: none; }
}

/* ---- settlement page ---- */
.facts { padding-left: 1.4rem; }
.facts li { margin-bottom: 1rem; padding-left: .3rem; }
.facts li::marker { color: var(--accent); font-weight: 800; }

/* ---- video clips ---- */
.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin: 0; }
.clip { margin: 0; }
.clip__frame { aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 50px rgba(0, 0, 0, .45); }
.clip__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.clip figcaption { margin-top: .7rem; color: var(--muted); font-size: .95rem; }
.clips__note { margin-top: 2.5rem; color: var(--muted); font-size: .9rem; }
.clips__note code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
@media (max-width: 720px) { .clips { grid-template-columns: 1fr; gap: 1.5rem; } }

/* sign-on: keep the anti-spam field out of copied text too */
.sign .fom-hp { display: none; }

/* ---- video clips: click-to-play posters (YouTube-style play button, whole poster is the click target) ---- */
.clip__poster { position: relative; display: block; width: 100%; height: 100%; color: inherit; cursor: pointer; }
.clip__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 14px; background: rgba(33, 33, 33, .8); color: #fff; transition: background .15s ease; }
.clip__play::before { content: ""; display: block; width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent currentColor; }
.clip__poster:hover .clip__play, .clip__poster:focus-visible .clip__play { background: #f00; }
.clip__poster:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .clip__play { transition: none; } }

/* ---- legal document excerpts: everything centered, pages shown as sheets ---- */
.docs { max-width: 60rem; margin: 0 auto; text-align: center; }
.doc { margin: 0 0 4.5rem; }
.doc h2 { margin: 0 0 .4rem; font-size: clamp(1.4rem, 2.8vw, 2rem); }
.doc__meta { color: var(--muted); margin: 0 0 1.25rem; font-size: .95rem; }
.doc__actions { margin: 0 0 1.5rem; }
.doc__page { display: block; width: min(100%, 58rem); margin: 0 auto 1.25rem; background: #fff; border-radius: 4px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); overflow: hidden; transition: transform .15s ease; }
.doc__page img { display: block; width: 100%; height: auto; }
.doc__page:hover { transform: translateY(-2px); }
.doc__page:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .doc__page { transition: none; } .doc__page:hover { transform: none; } }
.page-legal-excerpts .page-head { text-align: center; }
.page-legal-excerpts .page-head .subtitle { margin: 0 auto; }
/* unlinked menu entries: an item whose link is "#" shows as plain text until it is wired up */
.site-nav a[href="#"] { pointer-events: none; cursor: default; }
.doc__note { margin: -.5rem 0 1.25rem; font-size: 1rem; color: var(--ink); }
.doc__note::before { content: ""; display: inline-block; width: 1.1em; height: .8em; margin-right: .45em; vertical-align: -.05em; background: #ffe84a; border-radius: 3px; }