/*!
  Sahara Signal — stylesheet
  Sections: 1. Tokens  2. Reset/Base  3. Type  4. Layout  5. Header/Nav
  6. Hero  7. Components  8. Article  9. Forms  10. Footer  11. Utilities
  12. Motion & a11y
  Shipped as one file on purpose: one render-blocking request beats five.
*/

/* ============ 1. DESIGN TOKENS ============ */
:root{
  /* Morocco-inspired palette, kept to six named colors */
  --ink:        #14181D;   /* near-black, slight blue undertone — text, header */
  --ink-70:     #454C54;   /* secondary text */
  --ink-45:     #5E646C;   /* muted / meta text — darkened for 4.5:1+ contrast on white & paper */
  --paper:      #F4EEE2;   /* warm plaster sand — page background */
  --surface:    #FFFFFF;   /* card surface */
  --line:       #E1D9C8;   /* hairline borders on paper */
  --sienna:     #A83F22;   /* burnt sienna — primary accent, CTAs, links (AA on paper & white) */
  --sienna-dark:#7C2E19;
  --brass:      #E3A857;   /* brass / lantern — highlights, tags */
  --atlas:      #1F3A5F;   /* deep Atlantic blue — secondary accent, night sections */
  --atlas-light:#345680;
  --signal-ok:  #3F7D5C;   /* muted green — "yes/works" states */

  --font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(20,24,29,.06);
  --shadow-md: 0 8px 24px -8px rgba(20,24,29,.18);

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --header-h: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink: #F2EEE4;
    --ink-70: #C9C2B2;
    --ink-45: #99917E;
    --paper: #14181D;
    --surface: #1B2028;
    --line: #2B323C;
    --brass: #E9BC79;
  }
}
:root[data-theme="dark"]{
  --ink: #F2EEE4; --ink-70:#C9C2B2; --ink-45:#99917E;
  --paper:#14181D; --surface:#1B2028; --line:#2B323C; --brass:#E9BC79;
}

/* ============ 2. RESET / BASE ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 12px + env(safe-area-inset-top,0px));
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:var(--sienna); text-decoration-thickness:1.5px; text-underline-offset:2px; }
a:hover{ color:var(--sienna-dark); }
button{ font:inherit; }
ul,ol{ padding-left:1.15em; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:3px solid var(--atlas); outline-offset:2px; border-radius:2px; }
::selection{ background:var(--brass); color:var(--ink); }

.skip-link{
  position:absolute; left:1rem; top:-4rem;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; border-radius:var(--radius-sm);
  z-index:1000; transition:top .15s ease;
}
.skip-link:focus{ top:1rem; }

/* ============ 3. TYPE ============ */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); font-weight:600; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
h3{ font-size:clamp(1.2rem, 1.8vw, 1.5rem); }
h4{ font-size:1.05rem; }
p{ margin:0 0 1.1em; color:var(--ink-70); }
.lede{ font-size:1.2rem; color:var(--ink-70); }
small,.meta{ color:var(--ink-45); font-size:.875rem; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.8rem; color:var(--sienna); font-weight:600;
}
.eyebrow::before{
  content:""; width:16px; height:2px; background:var(--sienna); display:inline-block;
}

/* ============ 4. LAYOUT ============ */
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(2.5rem, 6vw, 5rem); }
.section-tight{ padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.section-alt{ background:var(--surface); border-block:1px solid var(--line); }
.section-night{ background:var(--atlas); color:#EFE9DC; }
.section-night h2, .section-night h3{ color:#fff; }
.section-night p, .section-night .meta{ color:#C7D2E0; }

.grid{ display:grid; gap:var(--gutter); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
@media(min-width:640px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:900px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
}

.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:1.75rem;
}
.section-head p{ margin:0; max-width:46ch; }
.section-head-text{ max-width:60ch; }

/* ============ 5. HEADER / NAV ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(244,238,226,.9);
  -webkit-backdrop-filter:saturate(1.2) blur(8px);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);
}
:root[data-theme="dark"] .site-header,
@media (prefers-color-scheme: dark){ .site-header{ background:rgba(20,24,29,.85); } }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; }

.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); flex-shrink:0; }
.brand:hover{ color:var(--ink); }
.brand-mark{ width:28px; height:28px; flex-shrink:0; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; }
.brand-name span{ color:var(--sienna); }

.nav-primary{ display:none; }
.nav-primary ul{ display:flex; align-items:center; gap:1.6rem; list-style:none; margin:0; padding:0; }
.nav-primary a{
  color:var(--ink-70); text-decoration:none; font-size:.95rem; font-weight:500;
  padding:.4rem 0; border-bottom:2px solid transparent;
}
.nav-primary a:hover, .nav-primary a[aria-current="page"]{ color:var(--ink); border-color:var(--sienna); }
@media(min-width:960px){ .nav-primary{ display:block; } }

.nav-actions{ display:flex; align-items:center; gap:.6rem; }
.nav-search-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer;
}
.nav-search-btn:hover{ border-color:var(--sienna); color:var(--sienna); }

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; padding:0;
}
.nav-toggle span{ width:16px; height:2px; background:var(--ink); margin-inline:auto; transition:transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(min-width:960px){ .nav-toggle{ display:none; } }

.nav-mobile{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:99;
  background:var(--paper); padding:1.5rem var(--gutter);
  overflow-y:auto; display:none;
}
.nav-mobile.is-open{ display:block; }
.nav-mobile ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.nav-mobile a{
  display:block; padding:1rem 0; font-size:1.2rem; font-family:var(--font-display);
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
}
@media(min-width:960px){ .nav-mobile{ display:none !important; } }

/* Search panel */
.search-panel{
  position:fixed; inset:0; z-index:200; background:rgba(20,24,29,.55);
  display:none; align-items:flex-start; justify-content:center; padding:8vh 1rem;
}
.search-panel.is-open{ display:flex; }
.search-box{
  width:100%; max-width:640px; background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); overflow:hidden;
}
.search-box form{ display:flex; align-items:center; border-bottom:1px solid var(--line); padding:.25rem .5rem; }
.search-box input[type="search"]{
  flex:1; border:0; background:transparent; padding:1rem .75rem; font-size:1.05rem; color:var(--ink);
}
.search-box input:focus{ outline:none; }
.search-close{ border:0; background:transparent; padding:.6rem; cursor:pointer; color:var(--ink-45); }
.search-results{ list-style:none; margin:0; padding:.5rem; max-height:50vh; overflow-y:auto; }
.search-results li a{
  display:block; padding:.75rem .75rem; border-radius:var(--radius-sm); text-decoration:none; color:var(--ink);
}
.search-results li a:hover, .search-results li a:focus-visible{ background:var(--paper); }
.search-results .r-kicker{ display:block; font-size:.75rem; color:var(--sienna); margin-bottom:.15rem; }
.search-empty{ padding:1.25rem .75rem; color:var(--ink-45); font-size:.9rem; }

/* ============ 6. HERO ============ */
.hero{ padding-block: clamp(2rem,5vw,3.5rem) clamp(2.5rem,6vw,4rem); }
.hero-grid{
  display:grid; gap:2.5rem; align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:960px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:3rem; } }
.hero h1{ margin-bottom:.55em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin:1.6rem 0; }
.hero-art{ width:100%; }
.hero-stat-row{
  display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line);
}
.hero-stat b{ display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--ink); }
.hero-stat span{ font-size:.82rem; color:var(--ink-45); }

/* Quick answers strip */
.quick-answers{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; grid-template-columns:1fr; }
@media(min-width:700px){ .quick-answers{ grid-template-columns:1fr 1fr; } }
.qa-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.1rem 1.2rem;
}
.qa-item p:last-child{ margin-bottom:0; }
.qa-q{ display:flex; align-items:baseline; gap:.5rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; font-size:.98rem; }
.qa-q .qa-mark{ color:var(--sienna); flex-shrink:0; }
.qa-a{ font-size:.95rem; margin:0; }

/* ============ 7. COMPONENTS ============ */

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.4rem; border-radius:999px; font-weight:600; font-size:.95rem;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer; line-height:1.1;
  min-height:44px;
}
.btn-primary{ background:var(--sienna); color:#fff; }
.btn-primary:hover{ background:var(--sienna-dark); color:#fff; }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--sienna); color:var(--sienna); }
.btn-block{ width:100%; }

/* Cards */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.5rem; height:100%; display:flex; flex-direction:column;
}
.card h3{ margin-bottom:.4rem; }
.card p{ margin-bottom:.9rem; font-size:.95rem; }
.card-link{
  margin-top:auto; font-weight:600; font-size:.9rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:.35rem;
}
.card-icon{ width:34px; height:34px; margin-bottom:1rem; color:var(--sienna); }

.card-guide{ position:relative; }
.card-guide .tag{ margin-bottom:.75rem; }

.tag{
  display:inline-flex; align-items:center; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; padding:.25rem .6rem; border-radius:999px;
  background:rgba(227,168,87,.22); color:#8A5F1D;
}
:root[data-theme="dark"] .tag{ background:rgba(233,188,121,.15); color:var(--brass); }

/* Destination card */
.dest-card{
  border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  background:var(--surface); display:flex; flex-direction:column; height:100%;
}
.dest-card .dest-art{ aspect-ratio:4/3; width:100%; background:var(--atlas); }
.dest-card-body{ padding:1.25rem 1.35rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.dest-signal{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-45); margin-top:.3rem; margin-bottom:.6rem; }
.signal-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.signal-bars i{ width:3px; background:var(--line); display:block; border-radius:1px; }
.signal-bars i:nth-child(1){ height:35%; } .signal-bars i:nth-child(2){ height:55%; }
.signal-bars i:nth-child(3){ height:75%; } .signal-bars i:nth-child(4){ height:100%; }
.signal-bars[data-level="4"] i{ background:var(--signal-ok); }
.signal-bars[data-level="3"] i:nth-child(-n+3){ background:var(--signal-ok); }
.signal-bars[data-level="2"] i:nth-child(-n+2){ background:var(--brass); }

/* Tools / calculator */
.tool-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.calc-row{ display:grid; gap:1rem; grid-template-columns:1fr; margin-bottom:1.25rem; }
@media(min-width:640px){ .calc-row{ grid-template-columns:1fr 1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--ink); }
.field select, .field input[type="range"]{ width:100%; }
select{
  padding:.7rem .8rem; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:.95rem; min-height:44px;
}
input[type="range"]{ accent-color:var(--sienna); height:44px; }
.calc-result{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--paper); border:1px dashed var(--line); border-radius:var(--radius-md);
  padding:1.1rem 1.3rem; margin-top:.5rem;
}
.calc-result b{ font-family:var(--font-display); font-size:1.6rem; }
.calc-result span{ font-size:.85rem; color:var(--ink-45); }

/* FAQ accordion */
.accordion{ border-top:1px solid var(--line); }
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 0; font-family:var(--font-display); font-size:1.05rem; color:var(--ink);
  min-height:44px;
}
.accordion-trigger .plus{ flex-shrink:0; width:22px; height:22px; position:relative; }
.accordion-trigger .plus::before,.accordion-trigger .plus::after{
  content:""; position:absolute; background:var(--sienna); top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.accordion-trigger .plus::before{ width:14px; height:2px; }
.accordion-trigger .plus::after{ width:2px; height:14px; transition:transform .2s; }
.accordion-trigger[aria-expanded="true"] .plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.accordion-panel{ overflow:hidden; max-height:0; transition:max-height .25s ease; }
.accordion-panel[data-open="true"]{ max-height:800px; }
.accordion-panel-inner{ padding-bottom:1.25rem; }
.accordion-panel-inner p:last-child{ margin-bottom:0; }

/* Comparison table */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); }
.compare-table{ min-width:640px; font-size:.92rem; }
.compare-table th,.compare-table td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.compare-table thead th{ background:var(--surface); font-family:var(--font-display); font-weight:600; color:var(--ink); }
.compare-table tbody tr:last-child td{ border-bottom:0; }
.compare-table td:first-child, .compare-table th:first-child{ font-weight:600; color:var(--ink); white-space:nowrap; }
.yes{ color:var(--signal-ok); font-weight:700; }
.no{ color:var(--ink-45); }

/* Callouts */
.callout{ border-left:3px solid var(--atlas); background:var(--surface); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:1.1rem 1.3rem; margin:1.75rem 0; }
.callout-tip{ border-color:var(--signal-ok); }
.callout-warn{ border-color:var(--sienna); }
.callout h4{ margin-bottom:.35rem; font-family:var(--font-body); font-size:.95rem; text-transform:none; }
.callout p:last-child{ margin-bottom:0; }
.callout-label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.03em; color:var(--ink-45); margin-bottom:.3rem; }

.key-takeaway{
  background:var(--atlas); color:#fff; border-radius:var(--radius-lg);
  padding:1.5rem 1.75rem; margin:2rem 0;
}
.key-takeaway .eyebrow{ color:var(--brass); }
.key-takeaway .eyebrow::before{ background:var(--brass); }
.key-takeaway p{ color:#EFE9DC; margin-bottom:0; }
.key-takeaway ul{ color:#EFE9DC; margin:.5rem 0 0; }

/* Breadcrumbs */
.breadcrumbs{ font-size:.85rem; color:var(--ink-45); margin-bottom:1.25rem; }
.breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; }
.breadcrumbs a{ color:var(--ink-45); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--sienna); }
.breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:.4rem; color:var(--line); }
.breadcrumbs li[aria-current]{ color:var(--ink); }

/* Table of contents */
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.25rem 1.4rem; }
.toc-title{ font-size:.78rem; font-weight:700; letter-spacing:.03em; color:var(--ink-45); margin-bottom:.7rem; }
.toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; counter-reset:toc; }
.toc a{ text-decoration:none; color:var(--ink-70); font-size:.92rem; display:block; }
.toc a[aria-current="true"]{ color:var(--sienna); font-weight:600; }

/* Author / trust card */
.author-card{ display:flex; gap:1rem; align-items:center; padding:1.25rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); }
.author-avatar{
  width:48px; height:48px; border-radius:50%; background:var(--atlas); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; flex-shrink:0;
}
.author-meta b{ display:block; color:var(--ink); }
.author-meta span{ font-size:.85rem; color:var(--ink-45); }

/* Updated date pill */
.updated-pill{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--ink-45);
  border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem;
}
.updated-pill b{ color:var(--ink); font-weight:600; }

/* Copy button (for APN / codes) */
.code-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--ink); color:#F4EEE2; border-radius:var(--radius-sm); padding:.7rem 1rem; font-family:var(--font-mono); font-size:.9rem; margin:.5rem 0; }
.copy-btn{ background:transparent; border:1px solid rgba(244,238,226,.35); color:inherit; border-radius:var(--radius-sm); padding:.35rem .7rem; cursor:pointer; font-size:.8rem; }
.copy-btn:hover{ border-color:#fff; }
.copy-btn[data-copied="true"]::after{ content:" ✓"; }

/* Related articles */
.related-list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.related-list a{
  display:block; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius-md);
  text-decoration:none; color:var(--ink); background:var(--surface);
}
.related-list a:hover{ border-color:var(--sienna); }
.related-list .r-eyebrow{ display:block; font-size:.75rem; color:var(--sienna); margin-bottom:.25rem; }

/* Scroll progress */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; background:var(--sienna); width:0%; z-index:150; }

/* ============ 8. ARTICLE LAYOUT ============ */
.article-header{ padding-block:2rem 1rem; }
.article-body-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media(min-width:960px){ .article-body-grid{ grid-template-columns:220px 1fr; } }
.article-toc-col{ order:2; }
@media(min-width:960px){ .article-toc-col{ order:1; position:sticky; top:calc(var(--header-h) + 24px); align-self:start; } }
.article-content{ order:1; max-width:70ch; }
@media(min-width:960px){ .article-content{ order:2; } }
.article-content h2{ margin-top:2em; scroll-margin-top:calc(var(--header-h) + 16px); }
.article-content h3{ margin-top:1.6em; scroll-margin-top:calc(var(--header-h) + 16px); }
.article-content>*:first-child{ margin-top:0; }
.article-content ul li, .article-content ol li{ margin-bottom:.4em; color:var(--ink-70); }

.pros-cons{ display:grid; gap:1rem; grid-template-columns:1fr; margin:1.5rem 0; }
@media(min-width:600px){ .pros-cons{ grid-template-columns:1fr 1fr; } }
.pros-cons > div{ border:1px solid var(--line); border-radius:var(--radius-md); padding:1.1rem 1.3rem; background:var(--surface); }
.pros-cons h4{ margin-bottom:.6rem; }
.pros-cons ul{ margin:0; padding-left:1.1em; font-size:.93rem; }

/* ============ 9. FORMS ============ */
.form-field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.form-field label{ font-weight:600; font-size:.9rem; }
.form-field input, .form-field textarea{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:.8rem .9rem;
  font-size:.98rem; font-family:inherit; background:var(--surface); color:var(--ink); width:100%;
}
.form-field textarea{ min-height:140px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus{ border-color:var(--atlas); }
.form-note{ font-size:.82rem; color:var(--ink-45); }

/* ============ 10. FOOTER ============ */
.site-footer{ background:var(--ink); color:#CFCABF; padding-block:3.5rem 2rem; }
.site-footer a{ color:#E7E2D5; text-decoration:none; }
.site-footer a:hover{ color:var(--brass); }
.footer-grid{ display:grid; gap:2.25rem; grid-template-columns:1fr; margin-bottom:2.5rem; }
@media(min-width:720px){ .footer-grid{ grid-template-columns:1.4fr repeat(3,1fr); } }
.footer-grid h4{ color:#fff; font-size:.82rem; letter-spacing:.03em; margin-bottom:1rem; font-family:var(--font-body); font-weight:700; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; font-size:.92rem; }
.footer-brand p{ color:#B4AEA0; font-size:.92rem; max-width:32ch; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.82rem; }
.footer-bottom, .footer-legal{ color:#9A9384; }
.footer-legal{ display:flex; gap:1.25rem; flex-wrap:wrap; list-style:none; padding:0; margin:0; }

/* ============ 11. UTILITIES ============ */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.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;
}
.no-js .js-only{ display:none; }
.container-cs{ contain: content; }

/* ============ 12. MOTION & ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}