/* =============================================================================
   THE EDITORIAL PAGE, AND THE FORM ON IT — San Francisco Vintage
   Directive msg-2026-09-06-0019 phase 1: "consistent branding, responsive
   layouts".
   =============================================================================

   WHAT THIS IS. Contact Us, Treasure Requests and Estate Sales are the same
   kind of page: a dark hero, a contents list, a column of prose about sixty-six
   characters wide, and a form at the foot of it. They were about to be three
   copies of one stylesheet, which is three places for a colour to drift and one
   for anybody to notice.

   /angels-camp/events/ CARRIES ITS OWN COPY OF THESE RULES, INLINE, and that is
   recorded rather than tidied. It shipped that way, its tests read the
   declarations out of the page itself, and moving them here on the day of a
   launch would be a refactor with no user-visible benefit and a real chance of
   breaking a suite. Every value below is the same value that page uses. If they
   ever disagree, this file is the one that is right and that page is the one to
   change.

   SIZED IN ch AND rem, NOT IN PIXELS, so the layout grows with the reader's own
   text size rather than with the width of their phone. The breakpoints are
   about whether two fields still fit beside each other, which is a question
   about the text.
   ============================================================================= */

:root{
 --lime:#d2e113; --teal:#005c61; --teal-dark:#003c40; --cyan:#00cbd6;
 --cream:#fff5e5; --stone:#f3e8d4; --brass:#7c5c1d; --ink:#141210;
 --white:#fff; --black:#000; --paper:#faf3e6;
 --rule:rgba(20,18,16,.13);
 /* THE HEIGHT OF THE STICKY NAVIGATION, IN ONE PLACE. sfv-chrome.js sets
    .nav-in to 74px. Every anchor on these pages clears the header by consuming
    this through scroll-margin-top, so if the navigation ever changes height
    this is the single number that changes with it. */
 --nav-h:74px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--cream);color:var(--ink);font-family:'Rosario',sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%}
img{max-width:100%;display:block}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,3.4vw,52px)}

h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}
.nw{white-space:nowrap}
.btn,.nav a,.eyebrow,.chip,.pill{white-space:nowrap}
@media(max-width:900px){*{min-width:0}}

.eyebrow{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  display:inline-flex;align-items:center;gap:11px;margin-bottom:15px;white-space:normal}
.eyebrow::before{content:'';display:block;width:26px;height:1.5px;flex-shrink:0}
.eb-lime{color:var(--lime)}.eb-lime::before{background:var(--lime)}

.btn{display:inline-flex;align-items:center;gap:11px;font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:17px 34px;
  border:1.5px solid transparent;cursor:pointer;transition:.22s;line-height:1}
.btn-lg{padding:21px 44px;font-size:.72rem;letter-spacing:.2em}
.btn-lime{background:var(--lime);color:var(--black);border-color:var(--lime)}
.btn-lime:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn .arw{transition:transform .22s}
.btn:hover .arw{transform:translateX(4px)}

/* ── HERO ────────────────────────────────────────────────── */
.ehero{background:var(--ink);color:var(--cream);padding:clamp(64px,9vw,116px) 0 clamp(52px,7vw,92px);
  position:relative;overflow:hidden}
.ehero::after{content:'';position:absolute;right:-90px;top:-90px;width:420px;height:420px;
  border:1px solid rgba(210,225,19,.16);border-radius:50%;pointer-events:none}
.ehero h1{font-family:'Abril Fatface',serif;font-weight:400;line-height:1.02;
  font-size:clamp(2.3rem,6vw,4.6rem);letter-spacing:-.01em;max-width:17ch;margin-bottom:22px}
.ehero p{font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.8;max-width:60ch;color:rgba(255,245,229,.82)}

/* ── PAGE BODY ───────────────────────────────────────────── */
.epage{padding:clamp(44px,6vw,86px) 0 clamp(64px,9vw,120px)}
.ebody{max-width:940px}
.ebody h2{font-family:'Abril Fatface',serif;font-weight:400;line-height:1.06;
  font-size:clamp(1.5rem,2.9vw,2.5rem);letter-spacing:-.005em;margin:0 0 16px;max-width:24ch}
.ebody h3{font-family:'Lustria',serif;font-weight:400;font-size:clamp(1.06rem,1.7vw,1.3rem);
  margin:26px 0 10px;color:var(--teal-dark)}
.ebody p{font-size:1rem;line-height:1.82;max-width:66ch;color:#4b453d;margin-bottom:15px}
.ebody ul,.ebody ol{margin:0 0 18px 20px;max-width:66ch}
.ebody li{font-size:1rem;line-height:1.78;color:#4b453d;margin-bottom:8px}
.ebody a:not([class]){color:var(--teal);text-decoration-color:var(--lime);
  text-underline-offset:3px;text-decoration-thickness:2px}

/* EVERY SECTION CLEARS THE STICKY HEADER. One declaration, and it works for a
   JavaScript scroll, a plain anchor jump, a page loaded with a fragment already
   in the address, and Find-in-page. Measuring the header in script instead
   would fix only the first of those four. */
.ebody section{margin:0 0 clamp(38px,5vw,62px);scroll-margin-top:calc(var(--nav-h) + 20px)}
.ebody section:focus{outline:2px solid var(--ink);outline-offset:6px}
.ebody section:focus:not(:focus-visible){outline:none}

/* ── TABLE OF CONTENTS ───────────────────────────────────── */
.toc{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--lime);
  padding:24px clamp(20px,3vw,32px);margin:0 0 clamp(40px,5vw,64px);max-width:660px}
.toc-h{font-family:'Rosario',sans-serif!important;font-size:.6rem!important;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--brass);margin:0 0 14px!important;max-width:none!important}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;margin:0;border-bottom:1px solid var(--rule)}
.toc li:last-child{border-bottom:0}
.toc a{display:flex;gap:12px;align-items:baseline;padding:11px 2px;text-decoration:none;
  color:var(--ink);font-size:.95rem;line-height:1.4;transition:color .18s}
.toc a::before{content:counter(toc,decimal-leading-zero);font-size:.62rem;font-weight:700;
  letter-spacing:.1em;color:var(--brass);flex-shrink:0;min-width:2ch}
.toc a:hover{color:var(--teal)}

/* ── FACT PANEL ──────────────────────────────────────────── */
.terms{border:1px solid var(--rule);background:var(--white)}
.terms dl{margin:0}
.terms div{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:18px clamp(18px,2.6vw,26px);border-bottom:1px solid var(--rule)}
.terms div:last-child{border-bottom:0}
.terms dt{font-size:.92rem;color:#4b453d;line-height:1.5}
.terms dd{font-family:'Abril Fatface',serif;font-size:clamp(1.15rem,2.2vw,1.6rem);
  color:var(--teal-dark);text-align:right;line-height:1.1}
.terms dd.words{font-family:'Rosario',sans-serif;font-size:.9rem;font-weight:600;
  color:var(--brass);text-align:right;max-width:30ch;line-height:1.5}
@media(max-width:560px){
  .terms div{grid-template-columns:1fr;gap:6px}
  .terms dd,.terms dd.words{text-align:left}
}

/* ── STEP AND SCHEDULE STRIPS ────────────────────────────── */
.sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:0 0 18px}
.sched div{background:var(--white);padding:20px}
.sched dt{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--brass);margin-bottom:8px}
.sched dd{font-size:.95rem;line-height:1.6;color:#4b453d}

.note{background:var(--stone);border-left:3px solid var(--brass);padding:20px 24px;margin:0 0 18px;
  max-width:66ch}
.note p{margin:0;color:#3d382f}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--rule);max-width:66ch}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:1rem;line-height:1.5;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:'Abril Fatface',serif;color:var(--brass);flex-shrink:0}
.faq details[open] summary::after{content:'\2013'}
.faq details p{padding:0 0 18px;margin:0}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:8px}

/* ═══ THE FORM ═══════════════════════════════════════════════════════════
   Every rule below is shared by every public form on the site, so a fix to
   the way an error reads is one edit rather than four. */
.evf{max-width:66ch;margin:0 0 8px}
.evf fieldset{border:1px solid var(--rule);background:var(--white);
  padding:20px clamp(16px,2.4vw,24px);margin:0 0 22px}
.evf legend{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--brass);padding:0 8px}
.evf .kinds{display:grid;gap:10px}
.evf .kind{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:10px 12px;
  border:1px solid var(--rule);background:var(--paper);transition:border-color .18s,background .18s}
.evf .kind:hover{border-color:var(--teal)}
.evf .kind input{margin-top:4px;flex-shrink:0;accent-color:var(--teal);width:17px;height:17px}
.evf .kind b{display:block;font-weight:600;font-size:.96rem;line-height:1.45;color:var(--ink)}
.evf .kind span{display:block;font-size:.84rem;line-height:1.6;color:#5b554c;margin-top:2px}
.evf .kind:has(input:checked){border-color:var(--teal);background:var(--white);
  box-shadow:inset 3px 0 0 var(--lime)}

.evf .row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:620px){.evf .row{grid-template-columns:1fr}}
.evf .fg{margin:0 0 18px}
.evf label{display:block;font-size:.78rem;letter-spacing:.06em;font-weight:600;
  color:var(--teal-dark);margin:0 0 6px}
.evf .opt{font-weight:400;color:#7a736a;letter-spacing:0}
.evf .hint{font-size:.8rem;line-height:1.6;color:#5b554c;margin:0 0 6px}
.evf input[type=text],.evf input[type=email],.evf input[type=tel],
.evf input[type=url],.evf input[type=number],.evf textarea{
  width:100%;font:inherit;font-size:.95rem;line-height:1.6;color:var(--ink);
  background:var(--white);border:1.5px solid var(--rule);padding:11px 13px;
  border-radius:0;transition:border-color .18s}
.evf textarea{min-height:9.5em;resize:vertical}
.evf input[type=file]{font:inherit;font-size:.85rem;color:#4b453d;background:var(--white);
  border:1.5px dashed var(--rule);padding:14px;width:100%}
.evf input:hover,.evf textarea:hover{border-color:var(--brass)}
.evf .fg.bad input,.evf .fg.bad textarea{border-color:#a3231a}
.evf .fe{font-size:.82rem;line-height:1.55;color:#a3231a;font-weight:600;margin:6px 0 0}
.evf .fe::before{content:'\26A0\FE0E';margin-right:7px}

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   CSS skips a hidden field and fills an off-screen one. aria-hidden and
   tabindex keep it away from anybody using the page properly. */
.evf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ev-summary{background:#fdf3f2;border:1px solid #e2b6b1;border-left:3px solid #a3231a;
  padding:16px 20px;margin:0 0 22px;max-width:66ch}
.ev-summary:focus{outline:2px solid #a3231a;outline-offset:3px}
.ev-summary .ev-sh{font-weight:600;color:#7d1a13;margin:0 0 8px;font-size:.92rem}
.ev-summary ul{margin:0 0 0 18px}
.ev-summary li{font-size:.88rem;line-height:1.6;margin:0 0 4px;color:#7d1a13}
.ev-summary a{color:#7d1a13}

.ev-status{padding:14px 18px;margin:0 0 18px;max-width:66ch;font-size:.92rem;line-height:1.65}
.ev-status:focus{outline:2px solid var(--ink);outline-offset:3px}
.ev-info{background:var(--stone);border-left:3px solid var(--brass);color:#3d382f}
.ev-bad{background:#fdf3f2;border-left:3px solid #a3231a;color:#7d1a13;font-weight:500}

.ev-done{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--lime);
  padding:24px clamp(20px,3vw,30px);max-width:66ch}
.ev-done:focus{outline:2px solid var(--ink);outline-offset:4px}
.ev-done h3{margin:0 0 10px;color:var(--teal-dark)}
.ev-done p{margin:0 0 10px}
.ev-done p:last-child{margin:0}

.ev-else{font-size:.9rem;line-height:1.7;color:#5b554c;max-width:66ch;margin:18px 0 0;
  padding-top:16px;border-top:1px solid var(--rule)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto!important}
}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid #141210;outline-offset:2px;box-shadow:0 0 0 4px #d2e113}
:where(a,button,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible){outline:none}