/* ============================================================
   Alameda Estate Sales — shared chrome
   Loaded by every page. Brand tokens live HERE and nowhere else;
   a second :root block is how the palette drifts out of sync.
   Page-specific rules: home.css, gallery.css
   ============================================================ */

:root{
  --pine:#37492E; --pine-deep:#232F1D;
  --paper:#F5F5EF; --sage:#E2EAE0;
  --brass:#A9853C; --brass-soft:#C7A45B;
  --ink:#24211B; --ink-soft:#5B5E57;
  --display:'Lora', Georgia, serif;
  --body:'Libre Franklin', -apple-system, sans-serif;
  --maxw:1100px;

  /* Text-safe brass. The brand brass fails WCAG AA as small text:
     #A9853C on white is only 3.44:1. These two are the SAME hue pushed
     until they clear 4.5:1 — use them for TEXT, and keep --brass /
     --brass-soft for borders, fills, rules and large display type,
     where the brand value must not drift.
       --brass-ink   solved against --sage, the darkest light ground we
                     use, so it also clears paper (5.08) and white (5.56).
       --brass-lift  solved against --pine for text on the dark sections. */
  --brass-ink:#866219;
  --brass-lift:#CFAC63;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- Keyboard focus ----
   Nothing here sets outline:none, so the UA ring was already showing —
   but it is not tuned for brass-on-cream or cream-on-green and washes out
   on the dark sections. These give the ring a brand value on every ground.
   :focus-visible (not :focus) so a mouse click does not draw a ring. */
:focus-visible{outline:2px solid var(--brass-ink);outline-offset:2px}
.hero-b :focus-visible,
.contact :focus-visible,
footer :focus-visible{outline-color:var(--brass-lift)}

/* ---- Skip link ----
   First focusable element in the document, visually hidden until focused.
   Pairs with <main id="main"> on every page: without it a keyboard or
   screen-reader visitor tabs the whole nav before reaching content. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--pine-deep);color:var(--paper);
  padding:12px 20px;font-size:14px;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:8px;top:8px}

/* ---- Section tag pill ---- */
.tag{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--brass);padding:6px 14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--paper);border:1.5px solid var(--brass);flex-shrink:0}

/* ---- Nav ---- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(245,245,239,.93);backdrop-filter:blur(8px);border-bottom:1px solid rgba(55,73,46,.14)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.brand-logo{height:42px;width:auto;display:block}
nav.links{display:flex;gap:24px;align-items:center}
nav.links a{text-decoration:none;font-size:13.5px;font-weight:500;color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent;transition:.2s}
nav.links a:hover{color:var(--pine);border-bottom-color:var(--brass)}
nav.links a.nav-cta{text-decoration:none;background:var(--brass);color:var(--pine-deep) !important;padding:10px 26px;font-size:13.5px;font-weight:600;border-bottom:none !important;transition:.2s}
nav.links a.nav-cta:hover{background:var(--brass-soft)}
.menu-btn{display:none;background:none;border:1px solid var(--pine);padding:11px 14px;min-height:44px;font-size:13px;font-weight:600;color:var(--pine);cursor:pointer}

/* ---- Buttons ---- */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15px;padding:13px 26px;transition:.2s}
/* #232F1D on --brass measured 4.08:1 — just under AA. Eight steps darker
   clears it at 4.53 and is indistinguishable at this size. */
.btn-brass{background:var(--brass);color:#1B2715}
.btn-brass:hover{background:var(--brass-soft)}
.btn-ghost{border:1px solid rgba(245,245,239,.5);color:var(--paper)}
.btn-ghost:hover{border-color:var(--brass-soft);color:var(--brass-soft)}
.btn-line{border:1px solid var(--pine);color:var(--pine)}
.btn-line:hover{background:var(--pine);color:var(--paper)}

/* ---- Footer ---- */
footer{background:var(--pine-deep);color:rgba(245,245,239,.55);font-size:13px}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:36px 24px 26px;display:flex;flex-direction:column;align-items:center;gap:18px}
/* inline-block + padding takes these from 21px to 25px tall, over the WCAG 2.2
   AA floor of 24. They sit in a flex row rather than a sentence, so the
   "inline target" exemption is not safe to lean on. */
footer a{color:rgba(245,245,239,.7);text-decoration:none;display:inline-block;padding:2px 0}
footer a:hover{color:var(--brass-soft)}

/* ---- Mobile nav ----
   Raised 720 -> 860. At 768 the desktop nav was already live and "What We Do"
   wrapped to two lines (43x53 against 31-tall siblings), leaving the bar ragged
   on tablets. The burger now holds until there is room for one clean line.
   Deliberately NOT matched to home.css's 720px content breakpoint — this is a
   nav-capacity question, not a layout one. */
@media(max-width:860px){
  nav.links{display:none}
  nav.links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper);padding:20px 24px;gap:16px;border-bottom:1px solid rgba(55,73,46,.15)}
  .menu-btn{display:block}
}

/* Audience skews older and often grieving — restrained motion is a
   requirement here, not a nicety. Page-level motion opts out in its own file. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---- Print ----
   Same reasoning as the motion rule: this audience is more likely than most to
   print a page and carry it, or hand it to a family member. Shared file, so
   both pages inherit it.
   Drops the chrome and anything that cannot work on paper (sticky nav, burger,
   the Instagram embed, hero photo, hover-only affordances), forces readable
   dark-on-white, and spells out link targets so a printed page still carries
   the phone number and email. */
@media print{
  *{background:transparent !important;color:#000 !important;box-shadow:none !important}
  html{scroll-behavior:auto}
  body{font-size:12pt;line-height:1.45}
  header.nav,.menu-btn,.skip-link,.insta,.t-nav,.arrows,.t-dots,
  .g-tile,.gallery-grid,.lb,.back,.hero-b .actions,.services-cta .btn{display:none !important}
  /* The hero photo is a background image and will not print usefully; keep the
     wordmark and headline, drop the image and its overlay tint. */
  .hero-b{background:none !important;color:#000 !important}
  .hero-b .overlay{background:none !important}
  .hero-b .inner{padding:0 0 18pt}
  main{display:block}
  section{padding:14pt 0 !important;break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  .t-card{break-inside:avoid;border:1px solid #999 !important}
  /* Show the full review text on paper — the toggle cannot be operated. */
  .t-quote .t-preview{display:none !important}
  .t-quote .t-full{display:inline !important}
  .t-more{display:none !important}
  /* A printed page loses href targets, so print the ones that matter. */
  a[href^="tel:"]::after,a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:10pt}
  a[href^="tel:"]::after{content:" (" attr(href) ")"}
  .contact-card{border:1px solid #999 !important;padding:12pt !important}
  footer{border-top:1px solid #999;padding-top:10pt}
}