/* ============================================================
   AROUND AROMAS — SITE.CSS
   Shared design-system foundation, "Coastal Fog" identity.
   Extracted from the homepage (site/index.html) so every page can
   consume one token system + shared shell/header/nav/footer rules
   instead of repeating them inline. Page-specific rules stay in
   each page's own <style> block.

   Identity: "the bay under morning fog" — soft fog grey + sandstone
   surfaces, a deep slate-navy ink, sea-glass teal/green accents, a
   small warm-sand counter-accent.
   ============================================================ */

/* ---- self-hosted webfonts: Bricolage Grotesque (display) + Inter Tight (text) ----
   Variable, latin-subset woff2, downloaded from the Google Fonts CSS API.
   font-weight ranges below are exactly what the API's latin @font-face declared. */
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/assets/fonts/bricolage-grotesque-var.woff2") format("woff2");
}
@font-face{
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/inter-tight-var.woff2") format("woff2");
}
@font-face{
  font-family:"Inter Tight";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/inter-tight-var-italic.woff2") format("woff2");
}

:root{
  /* ---- palette: coastal fog hub ---- */
  --paper:#e9edec;        /* soft fog grey — the shell */
  --paper-2:#dde3e2;      /* deeper fog (body behind shell) */
  --card:#f5f6f3;         /* pale sandstone card surface */
  --card-2:#eceeea;       /* card inset / hover */
  --ink:#16252c;          /* deep slate-navy near-black */
  --ink-soft:#42565e;     /* AA on card/paper for body */
  --ink-faint:#4c5e66;    /* slightly lifted; AA for small faint text */
  --accent:#1f7a6b;       /* sea-glass teal (UI accent fills) */
  --accent-deep:#125b50;  /* AA-readable teal for text/links on light */
  --seaglass:#2f9c89;     /* brighter sea-glass highlight */
  --sand:#c98a52;         /* warm sand counter-accent (sparingly) */
  --sand-deep:#9a6334;    /* AA-readable sand for small text */
  --navy:#16323f;         /* slate-navy for the deep panels */
  --navy-2:#1d4150;
  --line:rgba(22,37,44,.14);
  --line-soft:rgba(22,37,44,.07);
  --rule:#b7c2c1;

  /* ---- per-guide accents (the six moods, cooled into the scheme) ---- */
  --c-date:#c06b86;        /* date — dusty rose, muted toward the fog */
  --c-date-bg:rgba(192,107,134,.16);
  --c-date-deep:#9c4763;   /* AA-readable text variant */
  --c-concert:#6f6bc4;     /* concert — twilight indigo (after-dark) */
  --c-concert-bg:rgba(111,107,196,.18);
  --c-concert-deep:#514da3;/* AA-readable text variant */
  --c-hidden:#1f7a6b;      /* hidden — sea-glass teal (the house accent) */
  --c-hidden-bg:rgba(31,122,107,.16);
  --c-hidden-deep:#125b50; /* AA-readable text variant */
  --c-fairs:#cf7b3c;       /* fairs — warm sand/amber, the warm spark */
  --c-fairs-bg:rgba(207,123,60,.16);
  --c-fairs-deep:#8a4f1d;  /* AA-readable text variant — clears 4.5:1 on tinted gcard-in bg */
  --c-todo:#2f7d9c;        /* things to do — coastal bay blue (the live "right now" guide) */
  --c-todo-bg:rgba(47,125,156,.16);
  --c-todo-deep:#1d5f79;   /* AA-readable text variant */
  --c-service:#2f7a52;     /* volunteer — field-station moss green (matches the service planner) */
  --c-service-bg:rgba(47,122,82,.16);
  --c-service-deep:#1f5d3c;/* AA-readable text variant */
  --c-market:#b03348;      /* farmers markets — strawberry crimson, the produce spark */
  --c-market-bg:rgba(176,51,72,.15);
  --c-market-deep:#7f2337; /* AA-readable text variant */

  /* ---- shadows: cool, soft, low ---- */
  --shadow-s:0 1px 2px rgba(22,37,44,.06),0 4px 14px rgba(22,37,44,.09);
  --shadow-m:0 2px 6px rgba(22,37,44,.08),0 14px 34px rgba(22,37,44,.15);
  --shadow-l:0 -2px 10px rgba(22,37,44,.05),0 24px 60px rgba(22,37,44,.30);

  /* ---- type (NEW trio) ---- */
  --disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;

  /* ---- metrics (shared with the planners) ---- */
  --app:500px; --bar:54px; --r:22px; --r-s:16px;
  --safe-l:max(20px,env(safe-area-inset-left));
  --safe-r:max(20px,env(safe-area-inset-right));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
button{font-family:inherit}
::selection{background:rgba(47,156,137,.28)}

/* ============================================================
   SHARED "DOC" SHELL — privacy.html, about/, credits/
   Narrower single-column reading layout: <div class="app"> wraps
   a <header> (back link), <main>, and <footer>.
   Markup pattern:
     <div class="app">
       <header><a class="back" href="/">&larr; Around Aromas</a></header>
       <main>...</main>
       <footer>...</footer>
     </div>
   ============================================================ */
.doc-shell{
  --app:680px;
  margin:0;background:var(--paper-2);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 520px at 88% -8%,rgba(47,156,137,.16),transparent 58%),
    radial-gradient(760px 500px at -12% 4%,rgba(29,65,80,.12),transparent 56%);
  background-attachment:fixed;
}
.doc-shell .app{max-width:var(--app);margin:0 auto;background:var(--paper);min-height:100vh;
  box-shadow:0 0 0 1px var(--line-soft),0 24px 70px rgba(22,37,44,.16)}
.doc-shell header{padding:22px 26px 18px;border-bottom:1px solid var(--line-soft)}
.doc-shell .back{display:inline-flex;align-items:center;gap:6px;color:var(--accent-deep);
  text-decoration:none;font-weight:600;font-size:.92rem}
.doc-shell .back:hover{text-decoration:underline}
.doc-shell h1{font-family:var(--disp);font-weight:700;font-size:1.95rem;letter-spacing:-.018em;margin:6px 0 4px}
.doc-shell strong{color:var(--ink);font-weight:600}
.doc-shell footer{border-top:1px solid var(--line-soft);color:var(--ink-faint)}
.doc-shell footer a{color:var(--accent-deep)}

/* ============================================================
   APP SHELL — the homepage "app" pattern (index.html)
   Markup pattern:
     <div class="app" id="app">
       <header class="appbar">
         <div class="brand">
           <span class="mk" aria-hidden="true"><img ...></span>
           <span class="name"><b>Around Aromas</b><small>...</small></span>
         </div>
         <span class="home-tab" aria-current="page">...</span>
       </header>
       ...
       <footer>...</footer>
     </div>
   ============================================================ */
.app-shell{
  margin:0;background:var(--paper-2);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1000px 560px at 88% -6%,rgba(47,156,137,.18),transparent 58%),
    radial-gradient(820px 540px at -12% 4%,rgba(29,65,80,.14),transparent 56%),
    radial-gradient(900px 720px at 50% 116%,rgba(22,50,63,.12),transparent 60%);
  background-attachment:fixed;
}
.app-shell a{color:var(--accent-deep)}
.app-shell h1,.app-shell h2,.app-shell h3{margin:0;font-family:var(--disp);font-weight:700;line-height:1.05;letter-spacing:-.015em}

.app-shell .app{
  max-width:var(--app);margin:0 auto;min-height:100vh;
  background:var(--paper);position:relative;overflow-x:clip;
  box-shadow:0 0 0 1px var(--line-soft),0 30px 90px rgba(22,37,44,.20);
}
/* thin sea-band across the very top — the guide moods, cool first to warm spark */
.app-shell .app::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:45;
  background:linear-gradient(90deg,var(--c-todo),var(--c-concert) 28%,var(--c-hidden) 52%,var(--seaglass) 72%,var(--c-fairs));
}
/* faint paper grain — rewards a second look, never noisy */
.app-shell .app::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.app-shell .app > *{position:relative;z-index:1}

/* ---- APP BAR — brand mark ---- */
.appbar{
  position:sticky;top:0;z-index:40;min-height:var(--bar);
  display:flex;align-items:center;justify-content:space-between;
  padding:env(safe-area-inset-top) var(--safe-r) 0 var(--safe-l);
  background:rgba(233,237,236,.84);
  backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .mk{
  flex:none;width:32px;height:32px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-s);
}
.brand .mk img{width:100%;height:100%;display:block}
.brand .name{min-width:0}
.brand b{font-family:var(--disp);font-weight:700;font-size:1.1rem;color:var(--ink);letter-spacing:-.01em;line-height:1;display:block}
.brand small{
  display:block;font-family:var(--sans);font-size:.58rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appbar .home-tab{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);
  background:var(--card);border:1px solid var(--line);border-radius:30px;padding:5px 12px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.appbar .home-tab svg{width:12px;height:12px}

/* ---- FOOTER (app shell variant) — credit + verification ---- */
.app-shell footer{
  margin-top:6px;padding:18px var(--safe-r) calc(28px + env(safe-area-inset-bottom)) var(--safe-l);
  border-top:1px solid var(--line-soft);color:var(--ink-faint);font-size:.74rem;line-height:1.5;
}
.app-shell footer .foot-mark{font-family:var(--disp);font-weight:700;font-size:1.08rem;color:var(--ink-soft);letter-spacing:-.01em}
.app-shell footer p{margin:8px 0 0}
.app-shell footer b{color:var(--ink-soft);font-weight:600}
.app-shell footer a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.app-shell footer .credit{margin-top:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.01em;color:var(--ink-faint)}

/* ---- DIGEST SIGNUP (footer capture form, every guide) ----
   Posts straight to Buttondown (no JS, no credential on the page); picks up the
   host guide's accent via --ac/--ac-deep so it reads as part of that guide. */
.app-shell footer .subscribe{
  margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);
}
.app-shell footer .subscribe .sub-title{
  margin:0;font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--ink);letter-spacing:-.01em;
}
.app-shell footer .subscribe .sub-sub{margin:5px 0 0;font-size:.75rem;color:var(--ink-faint);line-height:1.45}
.app-shell footer .sub-row{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.app-shell footer .sub-row input[type=email]{
  flex:1 1 200px;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:.86rem;
}
.app-shell footer .sub-row input[type=email]:focus-visible{
  outline:2px solid var(--ac,var(--accent));outline-offset:1px;border-color:transparent;
}
.app-shell footer .sub-row button{
  flex:none;padding:11px 18px;border:1px solid transparent;border-radius:10px;cursor:pointer;
  background:var(--ac-deep,var(--accent-deep));color:#fff;font:inherit;font-size:.86rem;font-weight:700;
  transition:filter .14s;
}
.app-shell footer .sub-row button:hover{filter:brightness(1.09)}
@media (max-width:420px){.app-shell footer .sub-row button{width:100%}}
@media (prefers-reduced-motion:reduce){.app-shell footer .sub-row button{transition:none}}

/* ============================================================
   GUIDE VARIANT — converged guide pages (things-to-do first)
   Markup pattern: <body class="app-shell guide"> with an appbar
   carrying a back button + page-title brand. Each guide sets its
   own accent via body{--ac:...;--ac-bg:...;--ac-deep:...} from the
   per-guide tokens above; shared chrome reads those with fallbacks.
   ============================================================ */
.app-shell .ab-left{display:flex;align-items:center;gap:10px;min-width:0}
.app-shell .backbtn{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--card);color:var(--ac-deep,var(--accent-deep));text-decoration:none;transition:background .14s,border-color .14s}
.app-shell .backbtn svg{width:18px;height:18px}
.app-shell .backbtn:hover{background:var(--card-2);border-color:var(--ac,var(--accent))}
.app-shell .backbtn:active{transform:translateY(1px)}
.app-shell .backbtn:focus-visible{outline:2px solid var(--sand-deep);outline-offset:2px}
.app-shell.guide .brand{flex-direction:column;align-items:flex-start;gap:0}
.app-shell.guide .brand h1{font-family:var(--disp);font-weight:700;font-size:1.04rem;color:var(--ink);line-height:1.05;letter-spacing:-.01em}
.app-shell.guide .brand h1 a{color:inherit;text-decoration:none}

/* solid accent sea-band on guide pages (overrides the homepage gradient) */
.app-shell.guide .app::before{background:var(--ac,var(--accent))}

/* ---- guard: sheet CTA links must keep their white text even though
       .app-shell a sets a teal link color (0,1,1) that would otherwise
       beat a page-local .d-go rule at equal or lower specificity ---- */
.app-shell .sheet a.d-go{color:#fff}

/* ---- MORE-GUIDES cross-links (shared) ---- */
.app-shell .moreguides{margin:26px 18px 8px;padding-top:18px;border-top:1px solid var(--line-soft)}
.app-shell .moreguides h2{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px}
.app-shell .moreguides a{display:block;padding:7px 0;color:var(--ink-soft);text-decoration:none;font-size:.95rem}
.app-shell .moreguides a b{color:var(--accent-deep);font-weight:600}
.app-shell .moreguides a:hover b,.app-shell .moreguides a:focus-visible b{text-decoration:underline}

/* ---- in-card editorial note (converged guides; the overlooked guide
       keeps its inline copy until it converges in a later increment) ---- */
.ev .note{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);font-size:.8rem;line-height:1.5;color:var(--ink-soft);max-width:52ch;text-align:left}

/* ---- desktop layer (additive; the 390px mobile styles are the base) ---- */
@media (min-width:880px){
  .app-shell.guide{--app:960px}
  .app-shell.guide .evlist{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .app-shell.guide .grnlist{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  /* date-ideas' card list container is named .cards (photo-thumb layout differs from .evlist) */
  .app-shell.guide .cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .app-shell.guide .cond .blurb{max-width:56ch}
  /* volunteer's compact opportunity-row list (sec-anytime/sec-stretch); sec-month's anchors have
     no list wrapper in the markup (JS rebuilds them unwrapped too) and read fine single-col at
     only ~6 items, so they're left out of this grid on purpose */
  .app-shell.guide .rowlist{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
}

/* ---- RESPONSIVE (app shell) ---- */
@media (max-width:380px){
  :root{--app:100%;--safe-l:max(16px,env(safe-area-inset-left));--safe-r:max(16px,env(safe-area-inset-right))}
  .brand small{display:none}
}
@media (min-width:560px){
  .app-shell{padding:0}
}

@media print{
  .app-shell{background:#fff}
  .app-shell,.app-shell .app{box-shadow:none;background:#fff}
  .app-shell .app::before,.app-shell .app::after{display:none}
  .appbar{position:static;background:#fff}
}