/* Lumen & Room — editorial design system. Original visual identity. */

/* ---------- Design tokens ---------- */
:root{
  --color-bg: #FBF9F4;
  --color-bg-alt: #F4F0E6;
  --color-surface: #FFFFFF;
  --color-petrol: #0F4C5C;
  --color-petrol-dark: #0A3540;
  --color-petrol-light: #E7EEF0;
  --color-amber: #E08A2C;
  --color-amber-dark: #B96B17;
  --color-glow: #FFD873;
  --color-glow-soft: #FFF3D6;
  --color-graphite: #2B2B2E;
  --color-graphite-soft: #5B5B60;
  --color-border: #E3DED2;
  --color-green: #3F7A5B;
  --color-green-bg: #E7F2EC;
  --color-red: #B3432D;
  --color-red-bg: #FBEAE5;
  --color-focus: #1D6E86;

  /* Fixed brand band for the footer: intentionally stays dark in both
     color schemes (its text colors below are hardcoded light), so it is
     NOT redefined inside the dark-mode media query like the other tokens. */
  --color-footer-bg: #0A3540;
  /* Same reasoning as --color-footer-bg: any element that pairs a solid
     petrol background with hardcoded white text (skip link, "next guide"
     banner, active toggle states, the planner's layer bar) needs a value
     that stays dark in both color schemes, not the --color-petrol token,
     which deliberately lightens in dark mode for use as foreground text. */
  --color-solid-petrol: #0F4C5C;

  --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(15, 76, 92, 0.06), 0 1px 1px rgba(15,76,92,0.04);
  --shadow-md: 0 6px 20px rgba(15, 76, 92, 0.08);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --container-max: 1180px;
  --container-prose: 740px;
}

@media (prefers-color-scheme: dark){
  :root{
    --color-bg: #15191B;
    --color-bg-alt: #1B2124;
    --color-surface: #1E2528;
    --color-petrol: #4FA8BE;
    --color-petrol-dark: #BFE6EF;
    --color-petrol-light: #223238;
    --color-amber: #F0A74A;
    --color-amber-dark: #FFC878;
    --color-glow: #FFD873;
    --color-glow-soft: #2B2718;
    --color-graphite: #ECE9E2;
    --color-graphite-soft: #B9B6AE;
    --color-border: #32393C;
    --color-green: #74C49A;
    --color-green-bg: #192A22;
    --color-red: #E08268;
    --color-red-bg: #2E1D18;
    --color-focus: #6FD0E8;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-graphite);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
svg{ max-width: 100%; }
/* Small inline icons (icons.js) ship with no width/height attributes, so
   without this they fall back to the browser's default replaced-element
   box (300x150) wherever a usage site doesn't set its own size. This is
   the sane default for all of them; specific contexts below override it. */
svg[aria-hidden="true"]{ width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }
a{ color: var(--color-petrol); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover{ color: var(--color-amber-dark); }
h1,h2,h3,h4{ font-family: var(--font-head); color: var(--color-graphite); line-height: 1.25; margin: 0 0 var(--space-3); font-weight: 600; }
h1{ font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem); }
h2{ font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); margin-top: var(--space-7); }
h3{ font-size: 1.25rem; margin-top: var(--space-5); }
p{ margin: 0 0 var(--space-4); }
ul,ol{ margin: 0 0 var(--space-4); padding-left: 1.4rem; }
li{ margin-bottom: var(--space-2); }
table{ border-collapse: collapse; width: 100%; }
hr{ border: none; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.container{ max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }
.prose-width{ max-width: var(--container-prose); margin: 0 auto; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute; left: var(--space-4); top: -60px;
  background: var(--color-solid-petrol); color: #fff; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); z-index: 1000; transition: top .15s ease;
}
.skip-link:focus{ top: var(--space-4); color: #fff; }

/* ---------- Header ---------- */
.site-header{
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) var(--space-5); max-width: var(--container-max); margin: 0 auto;
}
.brand{
  font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--color-petrol);
  text-decoration: none; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap;
}
.brand:hover{ color: var(--color-petrol); }
.brand__mark{ color: var(--color-amber); }

.main-nav{ display: none; }
.main-nav > ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); align-items: center; }
.main-nav a{ color: var(--color-graphite); text-decoration: none; font-weight: 600; font-size: 0.97rem; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a[aria-current="page"]{ color: var(--color-petrol); border-bottom-color: var(--color-amber); }

.nav-dropdown{ position: relative; }
.nav-dropdown__toggle{ background: none; border: none; font: inherit; font-weight: 600; color: var(--color-graphite); cursor: pointer; display: flex; align-items: center; gap: 4px; padding: var(--space-2) 0; }
.nav-dropdown__toggle svg{ width: 13px; height: 13px; vertical-align: middle; transition: transform .15s ease; }
.nav-dropdown.is-open .nav-dropdown__toggle svg{ transform: rotate(90deg); }
.nav-dropdown__toggle:hover{ color: var(--color-petrol); }
.nav-dropdown__menu{
  display: none; position: absolute; top: 100%; left: -0.5rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-2); width: 230px; list-style: none; margin: var(--space-2) 0 0; z-index: 50;
}
.nav-dropdown.is-open .nav-dropdown__menu{ display: flex; flex-direction: column; gap: 0; align-items: stretch; flex-wrap: nowrap; }
.nav-dropdown__menu li{ margin: 0; padding: 0; list-style: none; width: 100%; }
.nav-dropdown__menu a{ display: block; width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 500; border: none; white-space: normal; }
.nav-dropdown__menu a:hover{ background: var(--color-petrol-light); border: none; }

.header-actions{ display: flex; align-items: center; gap: var(--space-3); }
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; text-decoration: none;
  padding: 0.7rem 1.3rem; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--color-amber); color: #241a05; border-color: var(--color-amber); }
.btn-primary:hover{ background: var(--color-amber-dark); color: #241a05; }
.btn-outline{ background: transparent; color: var(--color-petrol); border-color: var(--color-petrol); }
.btn-outline:hover{ background: var(--color-petrol-light); color: var(--color-petrol); }
.btn-sm{ padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.btn-block{ width: 100%; }

.menu-toggle{
  display: inline-flex; background: none; border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem; cursor: pointer;
}
.menu-toggle svg{ width: 22px; height: 22px; }

.mobile-nav{ display: none; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.mobile-nav.is-open{ display: block; }
.mobile-nav ul{ list-style: none; margin: 0; padding: var(--space-3) var(--space-5); }
.mobile-nav a{ display: block; padding: var(--space-3) 0; color: var(--color-graphite); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--color-border); }
.mobile-nav details summary{ padding: var(--space-3) 0; font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--color-border); }
.mobile-nav details[open] summary{ border-bottom: none; }
.mobile-nav details ul{ padding: 0 0 var(--space-2) var(--space-4); }
.mobile-nav details ul li a{ border-bottom: none; font-weight: 500; padding: var(--space-2) 0; }
.mobile-nav .btn{ margin: var(--space-4) 0; }

@media (min-width: 960px){
  .main-nav{ display: block; }
  .menu-toggle{ display: none; }
  .mobile-nav{ display: none !important; }
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-footer-bg); color: #E7EEF0; margin-top: var(--space-8); }
.site-footer a{ color: #CFE3E8; }
.site-footer a:hover{ color: var(--color-glow); }
.footer-grid{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); padding: var(--space-8) var(--space-5) var(--space-6); max-width: var(--container-max); margin: 0 auto; }
.footer-grid h2{ font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: #9FC2CB; margin-bottom: var(--space-3); }
.footer-grid ul{ list-style: none; margin: 0; padding: 0; }
.footer-grid li{ margin-bottom: var(--space-2); }
.footer-brand p{ color: #BFD6DB; max-width: 32ch; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.12); padding: var(--space-4) var(--space-5); font-size: 0.85rem; color: #9FC2CB; }
.footer-bottom .container{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- Buttons & cards ---------- */
.card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.card-link{ text-decoration: none; color: inherit; display: block; height: 100%; transition: box-shadow .15s ease, transform .15s ease; }
.card-link:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-link:hover .card{ border-color: var(--color-amber); }

.tag{ display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-petrol); background: var(--color-petrol-light); padding: 0.3rem 0.65rem; border-radius: 999px; }
.tag-amber{ color: var(--color-amber-dark); background: var(--color-glow-soft); }

/* ---------- Hero ---------- */
.hero{ padding: var(--space-8) 0 var(--space-7); background: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg)); border-bottom: 1px solid var(--color-border); }
.hero__inner{ display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: center; }
.hero__eyebrow{ color: var(--color-amber-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 0.85rem; margin-bottom: var(--space-3); }
.hero__lede{ font-size: 1.15rem; color: var(--color-graphite-soft); max-width: 52ch; }
.hero__ctas{ display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }
.hero__art{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-md); }
.hero__art svg{ width: 100%; height: auto; display: block; }
@media (max-width: 880px){
  .hero__inner{ grid-template-columns: 1fr; }
}

/* ---------- Generic sections ---------- */
.section{ padding: var(--space-8) 0; }
.section-alt{ background: var(--color-bg-alt); }
.section__head{ max-width: 62ch; margin: 0 0 var(--space-6); }
.section__head p{ color: var(--color-graphite-soft); }
.grid{ display: grid; gap: var(--space-5); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px){ .grid-3{ grid-template-columns: 1fr; } .grid-2{ grid-template-columns: 1fr; } }
@media (max-width: 640px){ .grid-3,.grid-2{ grid-template-columns: 1fr; } }

.path-card{ text-align: left; }
.path-card .num{ display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius: 50%; background: var(--color-glow-soft); color: var(--color-amber-dark); font-weight: 800; margin-bottom: var(--space-3); }

.category-card .icon{ width: 42px; height: 42px; color: var(--color-petrol); margin-bottom: var(--space-3); }
.category-card .icon svg{ width: 100%; height: 100%; display: block; }
.category-card .count{ color: var(--color-graphite-soft); font-size: 0.9rem; }

.guide-card .meta{ display:flex; gap: var(--space-3); font-size: 0.82rem; color: var(--color-graphite-soft); margin: var(--space-2) 0 var(--space-3); }
.guide-card .meta svg, .meta-row svg{ width: 15px; height: 15px; vertical-align: -3px; }
.guide-card figure{ margin: 0 0 var(--space-3); border-radius: var(--radius-md); overflow: hidden; background: var(--color-petrol-light); aspect-ratio: 16/9; display:flex; align-items:center; justify-content:center; }
.guide-card figure svg{ width: 70%; height: 70%; }

.concept-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: var(--space-4); }
.concept-card{ padding: var(--space-4); }
.concept-card a{ font-weight: 700; text-decoration: none; }

.transparency-list{ display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px){ .transparency-list{ grid-template-columns: 1fr; } }
.transparency-list .card{ border-left: 4px solid var(--color-petrol); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ font-size: 0.85rem; color: var(--color-graphite-soft); padding: var(--space-4) 0; }
.breadcrumbs ol{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li:not(:last-child)::after{ content: "›"; margin-left: 6px; color: var(--color-border); }
.breadcrumbs a{ text-decoration: none; color: var(--color-graphite-soft); }
.breadcrumbs a:hover{ color: var(--color-petrol); }
.breadcrumbs li[aria-current]{ color: var(--color-graphite); font-weight: 600; }

/* ---------- Article ---------- */
.article-head{ padding: var(--space-6) 0 var(--space-4); }
.article-head .meta-row{ display:flex; flex-wrap: wrap; gap: var(--space-4); align-items:center; color: var(--color-graphite-soft); font-size: 0.9rem; margin: var(--space-3) 0; }
.article-head .meta-row strong{ color: var(--color-graphite); }
.byline{ font-size: 0.9rem; color: var(--color-graphite-soft); }

.takeaways{ background: var(--color-green-bg); border: 1px solid #CFE6D8; border-left: 5px solid var(--color-green); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-6) 0; }
.takeaways h2{ margin-top: 0; font-size: 1.05rem; color: var(--color-green); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .04em; }
.takeaways ul{ margin-bottom: 0; }

.toc{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-6) 0; }
.toc h2{ font-size: 0.95rem; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-sans); margin-top:0; color: var(--color-petrol); }
.toc ol{ margin-bottom:0; padding-left: 1.2rem; columns: 2; }
@media (max-width: 640px){ .toc ol{ columns:1; } }

.article-body table{ margin: var(--space-5) 0; font-size: 0.95rem; }
.article-body th,.article-body td{ border: 1px solid var(--color-border); padding: var(--space-3); text-align: left; }
.article-body thead th{ background: var(--color-petrol-light); color: var(--color-petrol-dark); }
.article-body figure{ margin: var(--space-5) 0; }
.article-body figcaption{ font-size: 0.85rem; color: var(--color-graphite-soft); margin-top: var(--space-2); }

.callout{ border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-6) 0; border: 1px solid var(--color-border); }
.callout-safety{ background: var(--color-red-bg); border-color: #E7C2B6; border-left: 5px solid var(--color-red); }
.callout-renters{ background: var(--color-glow-soft); border-left: 5px solid var(--color-amber); }
.callout-try{ background: var(--color-petrol-light); border-left: 5px solid var(--color-petrol); }
.callout h2,.callout h3{ margin-top: 0; }

.mistakes-list{ display:grid; gap: var(--space-4); }
.mistake{ border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); }
.mistake h3{ margin: 0 0 var(--space-2); font-size: 1.05rem; }

.faq-item{ border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; }
.faq-item h3{ margin: 0 0 var(--space-2); font-size: 1.05rem; }

.sources-list{ font-size: 0.92rem; }
.sources-list li{ margin-bottom: var(--space-2); }

.related-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 880px){ .related-grid{ grid-template-columns: 1fr; } }

.next-guide{ display:flex; align-items:center; justify-content: space-between; gap: var(--space-4); background: var(--color-solid-petrol); color: #fff; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin: var(--space-7) 0; flex-wrap: wrap; }
.next-guide a{ color: #fff; font-weight: 700; }
.next-guide__btn{ background: #fff; color: var(--color-solid-petrol) !important; border-color: #fff; }
.next-guide__btn:hover{ background: var(--color-glow-soft); color: var(--color-solid-petrol) !important; }
.next-guide .label{ font-size: 0.8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-glow); }

/* ---------- Forms / Planner ---------- */
.field{ margin-bottom: var(--space-5); }
.field label{ display:block; font-weight: 700; margin-bottom: var(--space-2); }
.field .hint{ color: var(--color-graphite-soft); font-size: 0.85rem; margin-top: var(--space-2); }
input[type="text"],input[type="number"],select,textarea{
  width: 100%; padding: 0.65rem 0.8rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font: inherit; background: var(--color-surface); color: var(--color-graphite);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{ border-color: var(--color-focus); }
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color: var(--color-red); background: var(--color-red-bg); }
fieldset{ border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); }
legend{ font-weight: 700; padding: 0 var(--space-2); color: var(--color-petrol); }
.radio-grid, .check-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--space-3); }
.radio-card{ border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); display:flex; align-items:center; gap: var(--space-2); cursor:pointer; }
.radio-card:has(input:checked){ border-color: var(--color-petrol); background: var(--color-petrol-light); }
.radio-card input{ width: auto; }
.unit-toggle{ display: inline-flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.unit-toggle button{ border: none; background: var(--color-surface); padding: 0.5rem 1rem; cursor: pointer; font-weight: 700; }
.unit-toggle button[aria-pressed="true"]{ background: var(--color-solid-petrol); color: #fff; }

.planner-layout{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
@media (max-width: 960px){ .planner-layout{ grid-template-columns: 1fr; } }
.planner-form{ position: sticky; top: 90px; }
@media (max-width: 960px){ .planner-form{ position: static; } }

.result-panel{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.result-stat{ display:flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.result-stat .value{ font-family: var(--font-head); font-size: 2.2rem; color: var(--color-petrol); font-weight: 700; }
.result-stat .unit{ color: var(--color-graphite-soft); }
.layer-bar{ display:flex; height: 28px; border-radius: 999px; overflow: hidden; border: 1px solid var(--color-border); margin: var(--space-3) 0 var(--space-4); }
.layer-bar span{ display:flex; align-items:center; justify-content:center; font-size: 0.75rem; font-weight: 700; color: #fff; }
.layer-ambient{ background: var(--color-solid-petrol); }
.layer-task{ background: var(--color-amber); color:#241a05 !important; }
.layer-accent{ background: var(--color-glow); color:#5c4400 !important; }
.layer-legend{ display:flex; gap: var(--space-4); flex-wrap: wrap; font-size: 0.85rem; margin-bottom: var(--space-5); }
.layer-legend span{ display:inline-flex; align-items:center; gap:6px; }
.swatch{ width: 12px; height: 12px; border-radius: 3px; display:inline-block; }

.result-actions{ display:flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.alert{ border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; font-size: 0.92rem; }
.alert-info{ background: var(--color-petrol-light); border: 1px solid #C9DBDF; }
.alert-warning{ background: var(--color-red-bg); border: 1px solid #E7C2B6; }

.compare-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 760px){ .compare-grid{ grid-template-columns: 1fr; } }

/* ---------- Explorer ---------- */
.explorer-layout{ display:grid; grid-template-columns: 280px 1fr; gap: var(--space-6); align-items:start; }
@media (max-width: 880px){ .explorer-layout{ grid-template-columns: 1fr; } }
.filters{ position: sticky; top: 90px; }
@media (max-width: 880px){ .filters{ position: static; } }
.filters .field{ margin-bottom: var(--space-4); }
.search-box{ position: relative; margin-bottom: var(--space-5); }
.search-box input{ padding-left: 2.6rem; }
.search-box svg{ position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); width: 18px; height:18px; color: var(--color-graphite-soft); }
.results-bar{ display:flex; justify-content: space-between; align-items:center; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.results-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
@media (max-width: 1000px){ .results-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .results-grid{ grid-template-columns: 1fr; } }
.empty-state{ text-align:center; padding: var(--space-8) var(--space-5); color: var(--color-graphite-soft); }
[hidden]{ display:none !important; }

/* ---------- Institutional / print ---------- */
.institutional h2{ margin-top: var(--space-6); }
.last-updated{ color: var(--color-graphite-soft); font-size: 0.9rem; }

@media print{
  .site-header,.site-footer,.skip-link,.result-actions,.mobile-nav,.toc,.related-grid,.next-guide{ display:none !important; }
  body{ background:#fff; color:#000; font-size: 12pt; }
  a{ color:#000; text-decoration: underline; }
  .container{ max-width: 100%; padding:0; }
}