/* site.css — shared chrome for sanmiguelmurals.com
   Variables + common header/nav/footer used on every page.
   Page-specific CSS stays inline in each file's <style> block. */

:root{
  /* --muted warmed #79746B -> #8f887a to sit with the cream #F3E9D2 ground
     (the old cool gray read colder than the new background). Global: nav,
     footer, counts, ledes, the artist/collection "N murals" line. */
  --bg:#F3E9D2; --card:#FFFFFF; --ink:#1F1B14; --muted:#8f887a;
  --accent:#9B3B1B; --rule:#D8D4CC; --teal:#0E7C7B;

  /* ---- pill/ribbon/map-pin color system (design_handoff_pill_color_system) ----
     Scoped to filter pills, the mural-detail pill stack, the H1 ribbon, map
     pins and the mural page's directions/admin buttons. Everything above
     this line is unscoped site chrome and stays as-is on purpose. */
  /* warmed to match the cream ground: pill fill --surface -> #fcf7ec, resting
     pill border --hairline -> #e3d9c2 (hover/selected pills stay near-black on
     purpose — that solid-ink selected state is the clearest "filter on" cue).
     --pill-ink is a dedicated warm pill-label color so pills warm WITHOUT
     touching the global near-black --ink used for all headings/body text.
     --ink-mute ("muted strong") nudged #6B6357 -> #6f685c. */
  --page:#ECEAE7; --surface:#fcf7ec; --surface-hi:#E4E0DA; --hairline:#e3d9c2;
  --ink-soft:#4A453C; --ink-mute:#6f685c; --pill-ink:#3f3b34;

  --terracotta:#CC583F; --terracotta-text:#AF4B35; --terracotta-deep:#823525;
  --terracotta-edge:#DFAFA4; --terracotta-tint:#F8EAE5;
  --amber:#E1943A; --amber-text:#925E22; --amber-deep:#6B4416;
  --amber-edge:#E4C293; --amber-tint:#FAF1E2;
  /* named --axis-teal (not --teal) so it never collides with the chrome
     --teal token above, which is a different hex serving unrelated chrome */
  --axis-teal:#398A95; --axis-teal-text:#2E737C; --axis-teal-deep:#20545B;
  --axis-teal-edge:#9EC6CB; --axis-teal-tint:#E6F1F2;
  --purple:#865BA2; --purple-text:#82589D; --purple-deep:#604075;
  --purple-edge:#C3AED0; --purple-tint:#F0EAF5;
  --gold:#C2922B; --gold-text:#925E22; --gold-deep:#6B4416;
  --gold-edge:#DDBE8A; --gold-tint:#FAF0DE;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased}

/* tighter top padding than before — less dead space above the nav (#2) */
/* 1220 (not 1180): the gallery grid uses a 380px column floor so three square
   ~376px image boxes fit 3-up here (content = 1220-48 = 1172 = 3*380+2*16). */
.wrap{max-width:1220px;margin:0 auto;padding:28px 24px 72px}
@media(max-width:480px){.wrap{padding-left:16px;padding-right:16px}}

.back{display:inline-flex;align-items:center;gap:8px;
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;margin-bottom:36px;transition:color .2s ease}
.back:hover{color:var(--accent)}
.back .ar{display:inline-block;transition:transform .2s ease}
.back:hover .ar{transform:translateX(-4px)}

.topbar{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:28px}
.topbar .back{margin-bottom:0}

.langtoggle{display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.04em}
.langtoggle a{color:var(--muted);text-decoration:none;padding:2px 6px;
  border-radius:5px;transition:color .15s ease,background .15s ease}
.langtoggle a:hover{color:var(--accent)}
.langtoggle a.active{color:var(--ink);font-weight:500}
.langtoggle .sep{color:var(--rule);padding:0 2px}

/* toprail is the mural-page variant of the nav (Murals · Artists) */
.toprail{display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.04em}
.toprail a{color:var(--muted);text-decoration:none;padding:2px 6px;
  border-radius:5px;transition:color .15s ease,background .15s ease}
.toprail a:hover{color:var(--accent)}
.toprail .sep{color:var(--rule);padding:0 2px}
.toprail .langtoggle a.active{color:var(--ink);font-weight:500}

/* inline links inside the lede (e.g. the "created by Adam Katz" credit):
   match surrounding text, underlined, accent on hover — not browser blue */
.lede a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--rule);transition:color .15s ease,text-decoration-color .15s ease}
.lede a:hover{color:var(--accent);text-decoration-color:var(--accent)}

.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}

footer{margin-top:60px;font-family:"IBM Plex Mono",monospace;font-size:12px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted)}
/* Sister-site link: stays muted so it never competes with the main site. */
footer a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--rule)}
footer a:hover{color:var(--accent);text-decoration-color:var(--accent)}

a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* normalized two-group nav: links left, tools (heart/search/lang) right.
   Separator between left links is spacing only — no glyph. */
.toprail-left{display:inline-flex;align-items:center;gap:18px;flex:1 1 auto;min-width:0}
.toprail-right{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto}
.toprail-left .back{margin-bottom:0}
.toprail-left a{color:var(--muted);text-decoration:none;transition:color .15s ease}
.toprail-left a:hover{color:var(--accent)}
.toprail-right .langtoggle{display:inline-flex;align-items:center}
/* Only the language you're NOT currently reading shows — it's a switch, not
   a toggle with two states on screen. On the English page it's just "ES";
   click it and the Spanish page shows just "EN". */
.langtoggle a.active,.langtoggle .sep{display:none}
@media(max-width:480px){
  .toprail-left{gap:10px}
  .toprail-left a{padding:2px 3px}
  .toprail-right{gap:8px}
}

/* nav search — collapsed magnifying glass that expands on click.
   Submits a Google site: query scoped to the domain. Shared by all pages. */
.navsearch{display:inline-flex;align-items:center;flex:0 0 auto;position:relative}
.navsearch-toggle{background:none;border:none;cursor:pointer;color:var(--muted);
  padding:2px 6px;display:inline-flex;align-items:center;transition:color .15s ease}
.navsearch-toggle:hover{color:var(--accent)}
.navsearch-toggle svg{display:block}
.navsearch-input{width:0;opacity:0;padding:0;border:none;
  border-bottom:1.5px solid var(--rule);background:none;
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink);
  transition:width .2s ease,opacity .15s ease,padding .2s ease;outline:none}
.navsearch.open .navsearch-input{width:160px;opacity:1;padding:3px 4px}
.navsearch.open .navsearch-input:focus{border-bottom-color:var(--accent)}
/* On phones the input drops to its own line below the whole nav row instead
   of expanding sideways. toprail-right (search + lang toggle) is flex:0 0
   auto — rigid, never shrinks — so an inline-expanding input there forces
   toprail-left's Murals/Collections/Artists text to overlap it, no matter
   how tight the resting-state spacing is. Taking the input out of flow
   (position:absolute, anchored to .topbar) keeps toprail-right's width
   constant whether search is open or not, so there's nothing left to
   collide with. Applied at all phone widths, even ones the inline version
   would technically still fit at, so the behavior is consistent.
   z-index matters here: .topbar has no z-index of its own, so without one
   the dropdown and the page's H1 (its wrapper, .titlewrap, is also
   position:relative) are both "positioned, z-index:auto" — same stacking
   priority — and paint order falls back to DOM order, which puts the H1
   (it comes after .topbar) on top, burying the search box under the title
   on every page. z-index:10 lifts it clear of that and of the one other
   thing on the site with an explicit z-index (.filterbar's sticky header,
   at 5). */
@media(max-width:480px){
  .topbar{position:relative}
  .navsearch.open{position:static}
  .navsearch.open .navsearch-input{
    position:absolute;top:100%;left:0;right:0;width:auto;margin-top:10px;
    padding:9px 12px;font-size:14px;z-index:10;
    background:var(--card);border:1px solid var(--rule);border-radius:8px;
    box-shadow:0 4px 14px rgba(30,25,15,.14);
  }
}

/* nav heart — appears in .topbar only once this browser loves >=1 mural.
   Links to the favorites view (?loved=true). Filled red to read as "you". */
.navheart{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  color:var(--accent);text-decoration:none;padding:2px 4px;
  transition:transform .12s ease,color .15s ease}
.navheart:hover{color:#7d2f15;transform:scale(1.08)}
.navheart[hidden]{display:none}
.navheart svg{display:block}
.navheart .navheart-n{font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.02em;line-height:1}

/* love button — icon-only toggle beside the mural title. Outline heart by
   default, fills red when loved. No border/box — it sits next to the H1. */
.lovebtn{display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;background:none;border:none;padding:4px;flex:0 0 auto;
  color:var(--muted);transition:color .15s ease,transform .1s ease}
.lovebtn:hover{color:var(--accent)}
.lovebtn:active{transform:scale(.9)}
.lovebtn svg{display:block;width:30px;height:30px}
.lovebtn .heart-outline{display:block}
.lovebtn .heart-solid{display:none}
.lovebtn.loved{color:var(--accent)}
.lovebtn.loved .heart-outline{display:none}
.lovebtn.loved .heart-solid{display:block}

/* title row: mural H1 on the left, love heart pinned to the right.
   Scoped to .info so it doesn't collide with the homepage's #titlerow. */
.info .titlerow{display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:10px}
.info .titlerow h1{margin-bottom:0}
.info .titlerow .titlespacer{flex:1 1 auto}
.info .titlerow .soon{flex:1 1 auto}
@media (prefers-reduced-motion:reduce){.navheart:hover,.lovebtn:active{transform:none}}

/* ===================================================================
   Pill / ribbon / map-pin color system
   "Color is data, ink is text": labels stay --ink in every state; hue
   lives only in fill, border, dot and the ribbon. See
   tmp/extracted/design_handoff_pill_color_system/README.md.
   =================================================================== */

/* ---- ribbon: 9px bar directly under an H1, nested inside .titlewrap so
   its width tracks the headline. Replaces the old static paint-stripe
   ::after gradient — the ribbon is now real markup (4 flex children) so
   each page can carry its own 4 hard-stop colors. */
.titlewrap .ribbon{position:absolute;left:0;right:0;bottom:-6px;height:9px;
  border-radius:999px;overflow:hidden;display:flex}
.titlewrap .ribbon span{flex:1;display:block}

/* ---- pill anatomy (Pill Color Spec §Pill Anatomy) ---- */
.pill{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;
  color:var(--pill-ink);line-height:1;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;
  border-radius:999px;border:1px solid var(--hairline);
  padding:8px 16px;background:var(--surface);
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.pill:has(.dot){padding-left:13px}
.pill .n{color:var(--ink-mute);font-weight:400}
.pill .dot{display:inline-block;border-radius:50%;flex:0 0 auto}
.pill .dot--axis{width:8px;height:8px}
/* Shrunk from 16px (Adam, 2026-08-11: a wall of ~50 large circles on the
   subject page read as "distracting" — a small dot of color, not a big
   circle). Every item-level axis (color/subject/style/colonia/palette/
   condition) shares this one class, so the fix is here, once. */
.pill .dot--item{width:8px;height:8px;box-shadow:inset 0 0 0 1px rgba(31,27,20,.22)}
.pill .chip3{width:26px;height:16px;border-radius:3px;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(31,27,20,.22)}

/* selected: one ink chip, cream label — never fill a pill with its own hue */
.pill.active{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.pill.active .n{color:#A8A29A}
.pill.active .dot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}

/* colonias — same neutral cream fill (--surface) as every other item-level
   axis now; they used to be a distinct #FFFFFF but Adam unified the pill fill
   to the warm cream when the palette shifted to match the new background.
   All of them are item-level: subjects/styles/colonias were
   one-shared-hue-per-axis in the original spec, but Adam asked (same day,
   after seeing it rendered) for each subject/style/colonia to carry its own
   color instead — "it's a better experience when the colors on the map
   change when you click to a new filter" — so the dot alone carries the
   per-value color now; fill/border are the same flat treatment for all six
   axes below. */
.pill--colonia{background:var(--surface);border-color:var(--hairline)}
.pill--colonia:hover{border-color:var(--ink)}

.pill--subject,.pill--style,.pill--swatch,.pill--palette,.pill--condition{
  background:var(--surface);border-color:var(--hairline)}
.pill--subject:hover,.pill--style:hover,.pill--swatch:hover,.pill--palette:hover,.pill--condition:hover{
  border-color:var(--ink);background:var(--surface-hi)}
/* unfinished: a state, not decay — dashed border, hollow dot, no ramp color */
.pill--condition.unfinished{border-style:dashed}
.pill--condition.unfinished .dot{background:var(--surface);
  box-shadow:inset 0 0 0 2px var(--ink-mute)}

/* ---- browse tabs (Colonia/Subject/Color/Palette/Style/Condition) — the
   category selector that sits above the value-pill bar. No dot (these name a
   whole axis, not one value in it); same neutral fill/hover/active language
   as every other pill so it reads as one family. ---- */
.pill--browse{background:var(--surface);border-color:var(--hairline)}
.pill--browse:hover{border-color:var(--ink);background:var(--surface-hi)}

/* ---- directions (mural page) — the one public action, kept small.
   Selector is ".meta a.directions" (2 classes + element), deliberately
   higher specificity than mural_tmpl.html's own ".meta a"/".meta a:hover" —
   this file's <link> loads before that page's inline <style>, so a tie
   would go to the page, not here. ---- */
.meta a.directions{height:32px;padding:0 14px;border-radius:999px;
  border:1px solid var(--axis-teal-edge);background:var(--surface);
  display:inline-flex;align-items:center;gap:7px;
  font-family:"IBM Plex Mono",monospace;font-size:13px;
  color:var(--axis-teal-deep);text-decoration:none;transition:all .15s ease}
.meta a.directions:hover{background:var(--axis-teal-tint);border-color:var(--axis-teal-text);
  color:var(--axis-teal-deep)}
.meta a.directions svg{display:block;width:15px;height:15px}
.meta a.directions .ext{opacity:.65}

/* admin-only actions — solid fill, square-ish radius, deliberately a
   different shape from the public outline pill above */
.meta .edit,.meta .move{color:#fff;text-decoration:none;font-weight:500;
  border-radius:8px;min-height:40px;padding:0 14px;
  display:inline-flex;align-items:center}
.meta .edit{background:var(--terracotta-deep)}
.meta .edit:hover{background:var(--terracotta)}
.meta .move{background:var(--axis-teal-deep)}
.meta .move:hover{background:var(--axis-teal)}