/* City of Leavenworth retheme — homepage concept mockups
   Tokens sourced from prompt.md §5 (design system) and the ordinance palette.
   Deliberately NOT Tailwind utility classes — see build notes for why. */

:root {
  --timber-900: #1A1614;
  --timber-800: #221D1B;
  --timber-700: #2E2725;
  --timber-line: #463A35;

  --plaster: #F2EDE6;
  --plaster-hi: #FBF8F4;
  --plaster-sunk: #E7E0D5;

  --ink: #19171C;
  --ink-2: #583D3F;
  --ink-3: #7C6660;
  --ink-inv: #F2EDE6;
  --ink-inv-2: #BCADA4;

  --action: #005F96;
  --action-hover: #0074A8;
  --bavarian: #208BBF;
  --alert: #AE2027;
  --caution: #EAA200;
  --seal: #8C282B;
  --success: #02461D;
  --divider: #A37D74;
  --gold: #F8D719;

  --lift-1: 0 1px 3px rgba(8, 5, 3, 0.45), 0 1px 2px rgba(8, 5, 3, 0.3);
  --lift-2: 0 8px 22px rgba(8, 5, 3, 0.5), 0 3px 8px rgba(8, 5, 3, 0.35);
  --lift-3: 0 20px 46px rgba(8, 5, 3, 0.6), 0 8px 20px rgba(8, 5, 3, 0.4);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--timber-800);
  color: var(--ink-inv);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ---------- Type ---------- */

.font-display { font-family: 'Vollkorn', serif; }
.font-mono { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; }

.t-xs   { font-size: 0.75rem; }
.t-sm   { font-size: 0.8125rem; }
.t-base { font-size: 1rem; }
.t-lg   { font-size: 1.125rem; }
.t-xl   { font-size: 1.375rem; }
.t-2xl  { font-size: 1.75rem; line-height: 1.25; }
.t-3xl  { font-size: 2.25rem; line-height: 1.2; letter-spacing: -0.01em; }
.t-4xl  { font-size: 3rem; line-height: 1.12; letter-spacing: -0.02em; }
.t-5xl  { font-size: 4.25rem; line-height: 1.05; letter-spacing: -0.03em; }

@media (max-width: 640px) {
  .t-4xl { font-size: 2.25rem; }
  .t-5xl { font-size: 2.5rem; }
}

.measure { max-width: 68ch; }

/* ---------- Surfaces ---------- */

.surface-timber-900 { background: var(--timber-900); }
.surface-timber-800 { background: var(--timber-800); }
.surface-timber-700 { background: var(--timber-700); }

.panel      { background: var(--plaster); color: var(--ink); border-radius: 6px; }
.panel-hi   { background: var(--plaster-hi); color: var(--ink); border-radius: 6px; }
.panel-sunk { background: var(--plaster-sunk); color: var(--ink); border-radius: 6px; }

.lift-1 { box-shadow: var(--lift-1); }
.lift-2 { box-shadow: var(--lift-2); }
.lift-3 { box-shadow: var(--lift-3); }

.ring-line { border: 1px solid var(--timber-line); }
.ring-divider { border: 1px solid var(--divider); }

/* ---------- Text roles ---------- */

.ink      { color: var(--ink); }
.ink-2    { color: var(--ink-2); }
.ink-3    { color: var(--ink-3); }
.ink-inv  { color: var(--ink-inv); }
.ink-inv-2{ color: var(--ink-inv-2); }
.text-action { color: var(--action); }
.text-seal    { color: var(--seal); }
.text-success { color: var(--success); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 3px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  white-space: normal;
  min-width: max-content;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 3px solid var(--bavarian); outline-offset: 2px; }

.btn-primary { background: var(--action); color: var(--plaster-hi); box-shadow: var(--lift-1); }
.btn-primary:hover { box-shadow: var(--lift-2); transform: translateY(-1px); }

.btn-secondary { background: transparent; color: var(--action); border-color: var(--action); }
.btn-secondary:hover { background: var(--plaster-sunk); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--plaster-sunk); }

.btn-on-dark { background: var(--plaster); color: var(--ink); }
.btn-on-dark:hover { background: var(--plaster-hi); box-shadow: var(--lift-2); transform: translateY(-1px); }

/* ---------- Chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 3px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: normal;
}
.chip-bavarian { background: var(--bavarian); color: var(--ink); }
.chip-alert { background: var(--alert); color: var(--ink-inv); }
.chip-muted { background: var(--plaster-sunk); color: var(--ink-2); }
a.chip-muted:hover, a.chip-muted:focus-visible { background: var(--plaster-hi); text-decoration: underline; text-underline-offset: 2px; }
a.chip-muted:focus-visible { outline: 2px solid var(--bavarian); outline-offset: 2px; }

/* ---------- Header ---------- */

.site-header {
  background: var(--timber-900);
  border-bottom: 1px solid var(--timber-line);
}

.crest { height: 96px; width: auto; } /* prompt.md §6: 96px is the legibility floor, 44px reads as a blob */

.nav-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-inv-2);
  padding: 0.5rem 0;
  position: relative;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--ink-inv); }
.nav-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--timber-line);
  border-radius: 3px;
  color: var(--ink-inv-2);
  font-size: 0.8125rem;
  background: var(--timber-800);
}
.lang-switch:hover { color: var(--ink-inv); border-color: var(--ink-inv-2); }

/* ---------- Link hover states ----------
   Not Tailwind hover: variants — "action"/"ink-inv" aren't Tailwind utilities,
   so hover:text-action / hover:ink-inv silently emit no CSS. Real rules here. */

.headline-link { color: inherit; }
.headline-link:hover, .headline-link:focus-visible {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.headline-link:focus-visible { outline: 2px solid var(--bavarian); outline-offset: 2px; border-radius: 2px; }

.footer-link { color: var(--ink-inv-2); }
.footer-link:hover, .footer-link:focus-visible {
  color: var(--ink-inv);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

.menu-item:hover, .menu-item:focus-visible { background: var(--plaster-sunk); }
.menu-item:focus-visible { outline: 2px solid var(--bavarian); outline-offset: -2px; }

/* ---------- Hero band ----------
   Authored alpine-skyline SVG, not a stock/placeholder photo — see the inline
   <svg> in each file's hero section. Scrim is a timber gradient, never pure
   black, so it stays a shade of this world rather than generic overlay chrome. */

.hero-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(26, 22, 20, 0.15) 0%, rgba(26, 22, 20, 0.55) 70%, rgba(26, 22, 20, 0.92) 100%);
}
.hero-content { position: relative; z-index: 2; }

.hero-band { min-height: 340px; }
@media (max-width: 640px) {
  .hero-band { min-height: 280px; }
}

/* ---------- Search field ---------- */

.search-field {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--plaster-hi);
  border-radius: 3px;
  overflow: hidden;
}
.search-field:focus-within { box-shadow: 0 0 0 3px var(--bavarian); }
.search-field input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  padding: 0.875rem 1rem;
  outline: none;
}
.search-field input[type="search"]::placeholder { color: var(--ink-3); }
.search-field button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: var(--action);
  color: var(--plaster-hi);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0 1.25rem;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.search-field button:hover { background: var(--action-hover); }

.search-field-compact { max-width: 280px; }
.search-field-compact input[type="search"] { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.search-field-compact button { padding: 0 0.875rem; }

.search-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  border: 1px solid var(--timber-line);
  color: var(--ink-inv-2);
  background: var(--timber-800);
  cursor: pointer;
  transition: color 160ms, border-color 160ms;
}
.search-icon-btn:hover, .search-icon-btn:focus-visible { color: var(--ink-inv); border-color: var(--ink-inv-2); }

/* ---------- Alert banner ---------- */

.alert-banner {
  background: var(--alert);
  color: var(--ink-inv);
  border-radius: 6px;
}
.alert-banner a { text-decoration: underline; text-underline-offset: 3px; }

/* Advisory/caution variant — lower severity than the red emergency default.
   Amber background + dark ink text (not color alone): 8.18:1, verified against
   the ordinance palette's Deep Yellow 124C. Never gold/light-yellow text on a
   light surface — this is the inverse, dark text on a mid-dark amber field. */
.alert-caution { background: var(--caution); color: var(--ink); }
.alert-caution a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--plaster-hi);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 6px 0;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Concept note flyout (tooling chrome, not site chrome) ----------
   A <details> whose content is position:fixed; closed = display:none (native
   <details> behavior), so this needs no JS. Lives at body level, never
   nested inside a transformed ancestor (transform creates a containing
   block that would break position:fixed). */

.concept-flyout {
  position: fixed;
  top: 96px;
  right: 0;
  z-index: 90;
}
.concept-flyout > summary {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: #0D0C0B;
  color: #B9B2AC;
  padding: 0.875rem 0.5rem;
  border-radius: 6px 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid #2A2522;
  border-right: none;
  box-shadow: var(--lift-1);
}
.concept-flyout > summary:hover, .concept-flyout > summary:focus-visible {
  color: #F2EDE6;
  background: #1E1A18;
}
.concept-flyout[open] > summary { color: #F2EDE6; }

.concept-flyout .flyout-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 12, 11, 0.55);
  z-index: 94;
}
.concept-flyout .flyout-panel {
  position: fixed;
  top: 96px;
  right: 0;
  height: auto;
  max-height: calc(100vh - 96px - 1.5rem);
  width: min(360px, 88vw);
  background: #0D0C0B;
  color: #D8D2CC;
  border-left: 1px solid #2A2522;
  border-bottom: 1px solid #2A2522;
  border-radius: 0 0 0 6px;
  box-shadow: var(--lift-3);
  z-index: 95;
  padding: 1.75rem;
  overflow-y: auto;
  cursor: pointer;
}
.concept-flyout .flyout-panel a { color: #F2EDE6; text-decoration: underline; text-underline-offset: 2px; }
.concept-flyout .flyout-backdrop { cursor: pointer; }

/* ---------- Mockup switcher bar (tooling chrome, not site chrome) ---------- */

.mock-switcher {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0D0C0B;
  color: #B9B2AC;
  font-size: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #2A2522;
}
.mock-switcher .label { opacity: 0.65; }
.mock-switcher a {
  padding: 0.25rem 0.625rem;
  border-radius: 3px;
  color: #B9B2AC;
}
.mock-switcher a:hover, .mock-switcher a:focus-visible { color: #F2EDE6; background: #1E1A18; }
.mock-switcher a[aria-current="page"] {
  background: #2E2725;
  color: #FBF8F4;
  font-weight: 600;
}

/* ---------- Pinned-note tilt (Concept 2: layered collage board) ----------
   Depth/overlap is the priority signal, not decoration — see prompt.md §5
   elevation system. Set --tilt inline per element; never add pushpin/tape
   art on top of this, the rotation + depth carries the metaphor. */

.pin {
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pin:hover, .pin:focus-visible { transform: rotate(0deg) translateY(-4px); }
.pin:focus-visible { outline: 3px solid var(--bavarian); outline-offset: 3px; }

/* ---------- Layout helpers ---------- */

.wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ---------- Disclosure widgets (lang switch, mobile menu) ---------- */

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary:focus-visible {
  outline: 3px solid var(--bavarian);
  outline-offset: 2px;
  border-radius: 3px;
}
details[open] > summary .chevron { transform: rotate(180deg); }
.chevron { transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Motion ---------- */

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