/* ==========================================================================
   briskiocuriousvalt.com — "Costa Retro" restyle
   Aesthetic: 1970s travel-poster editorial — burnt orange, mustard, avocado,
   teal and cream, chunky rounded frames, hard offset shadows, sunburst hero.
   Structure, class names and behaviour hooks are unchanged.
   ========================================================================== */

:root{
  /* ---- retro palette ---- */
  --cream:#FDF2DC;          /* page paper */
  --sand:#F6E1B8;           /* band fill */
  --sand-deep:#E6C68C;      /* rules, frames */
  --paper:#FFF8E8;

  --burnt:#C9542F;          /* primary accent (was coral) */
  --burnt-ink:#A03A1C;
  --mustard:#E3A21A;
  --mustard-ink:#8C5A05;
  --avocado:#7A8C3A;
  --olive:#4E5E22;
  --sage:#AFC98A;
  --teal:#1E6F69;
  --teal-deep:#12504C;

  --brown:#2C2118;          /* ink-dark (was charcoal) */
  --ink:#3B2C20;
  --muted:#6E5B48;

  /* legacy aliases kept so nothing breaks */
  --coral:var(--burnt);
  --coral-ink:var(--burnt-ink);
  --orange:var(--mustard);
  --orange-ink:var(--mustard-ink);
  --palm:var(--teal);
  --palm-deep:var(--teal-deep);
  --palm-light:var(--sage);
  --charcoal:var(--brown);

  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:40px; --s-6:64px;

  --serif:"Cooper Black","Bookman Old Style",Bookman,"Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Century Gothic",Futura,"Avenir Next","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1160px;
  --header-h:60px;
  --radius:20px;
  --radius-sm:12px;
  --pop:6px 6px 0 var(--brown);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background-color:var(--cream);
  background-image:
    repeating-linear-gradient(0deg, rgba(201,84,47,.035) 0 2px, transparent 2px 7px);
  color:var(--ink);
  font:400 17px/1.65 var(--sans);
}

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

h1,h2,h3,h4,p,ul,ol,dl,figure,table,blockquote{overflow-wrap:anywhere}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.1;
  letter-spacing:0.005em;
  color:var(--brown);
  margin:0;
}

h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.5rem,3vw,2.15rem)}
h3{font-size:clamp(1.12rem,2vw,1.35rem)}

p{margin:0}

a{color:var(--burnt-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--teal-deep)}

:focus-visible{
  outline:3px solid var(--teal-deep);
  outline-offset:3px;
  border-radius:4px;
}

[hidden]{display:none !important}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--s-4);
  min-width:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--brown);
  color:var(--cream);
  padding:var(--s-2) var(--s-3);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  z-index:200;
}
.skip-link:focus{left:var(--s-3);top:0}

/* ------------------------------------------------ inline SVG colour remap
   The page illustrations carry hard-coded presentation attributes; these
   rules recolour every one of them to the retro palette.                   */

[fill="#221F1D"]{fill:var(--brown)}
[stroke="#221F1D"]{stroke:var(--brown)}
[fill="#2E2A27"]{fill:var(--ink)}
[fill="#5C544D"]{fill:var(--muted)}
[fill="#FFFBF5"]{fill:var(--cream)}

[fill="#D8483A"]{fill:var(--burnt)}
[stroke="#D8483A"]{stroke:var(--burnt)}
[fill="#B3372B"]{fill:var(--burnt-ink)}
[stroke="#B3372B"]{stroke:var(--burnt-ink)}

[fill="#E8821B"]{fill:var(--mustard)}
[stroke="#E8821B"]{stroke:var(--mustard)}
[fill="#C46C12"]{fill:var(--mustard-ink)}

[fill="#2E6B4F"]{fill:var(--avocado)}
[stroke="#2E6B4F"]{stroke:var(--avocado)}
[fill="#1F4A37"]{fill:var(--olive)}
[stroke="#1F4A37"]{stroke:var(--olive)}
[fill="#7FBE9B"]{fill:var(--sage)}
[stroke="#7FBE9B"]{stroke:var(--sage)}

[fill="#EBD9C2"]{fill:var(--sand-deep)}
[stroke="#EBD9C2"]{stroke:var(--sand-deep)}
[fill="#F6EADA"]{fill:var(--sand)}

stop[stop-color="#FFE6C4"]{stop-color:#F7C873}
stop[stop-color="#FFF9EF"]{stop-color:var(--paper)}
stop[stop-color="#2E6B4F"]{stop-color:var(--teal)}
stop[stop-color="#3E8F6A"]{stop-color:#2F857A}

/* ---------------------------------------------------------------- header */

.site-header{
  background:
    repeating-linear-gradient(90deg, var(--paper) 0 22px, #FFF3DC 22px 44px);
  border-bottom:5px double var(--brown);
  position:relative;
}

.header-inner{
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:var(--s-3);
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  text-decoration:none;
  color:var(--brown);
  min-width:0;
  flex:0 1 auto;
}
.brand-mark{width:30px;height:30px;flex:0 0 auto}
.brand-name{
  font-family:var(--serif);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.brand:hover .brand-name{color:var(--burnt-ink)}

.site-nav{min-width:0}
.site-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin:0;
  padding:0;
}
.site-nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:0.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  padding:var(--s-1) 2px;
  border-bottom:3px solid transparent;
  overflow-wrap:anywhere;
}
.site-nav a:hover{color:var(--burnt-ink);border-bottom-color:var(--mustard)}
.site-nav a[aria-current="page"]{color:var(--teal-deep);border-bottom-color:var(--avocado)}

.nav-toggle{
  display:none;
  background:var(--mustard);
  color:var(--brown);
  border:3px solid var(--brown);
  border-radius:999px;
  width:46px;
  height:38px;
  padding:6px 9px;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow:3px 3px 0 var(--brown);
}
.nav-toggle-bar{
  display:block;
  height:3px;
  border-radius:2px;
  background:var(--brown);
  margin:3px 0;
}
.nav-toggle.is-active{background:var(--burnt);box-shadow:none;transform:translate(3px,3px)}
.nav-toggle.is-active .nav-toggle-bar{background:var(--cream)}

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-block;
  background:var(--burnt);
  color:var(--cream);
  border:3px solid var(--brown);
  border-radius:999px;
  padding:11px 24px;
  font:700 0.85rem/1.2 var(--sans);
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--brown);
  transition:background .2s ease,color .2s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--mustard);color:var(--brown);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--brown)}
.btn:active{transform:translate(4px,4px);box-shadow:none}

.btn-sm{padding:8px 16px;font-size:0.74rem;box-shadow:3px 3px 0 var(--brown)}

.btn-ghost{
  background:var(--paper);
  color:var(--brown);
}
.btn-ghost:hover{background:var(--sage);color:var(--brown)}

.btn-link{
  background:transparent;
  color:var(--brown);
  border-color:transparent;
  box-shadow:none;
  text-decoration:underline;
  text-underline-offset:3px;
}
.btn-link:hover{background:transparent;color:var(--burnt-ink);box-shadow:none;transform:none}

.header-cta{flex:0 0 auto}

/* ---------------------------------------------------------------- hero */

.eyebrow{
  display:inline-block;
  font:700 0.72rem/1.3 var(--sans);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brown);
  background:var(--mustard);
  border:2px solid var(--brown);
  border-radius:999px;
  padding:5px 14px;
  margin-bottom:var(--s-3);
}

.hero{
  position:relative;
  overflow:hidden;
  background:
    repeating-conic-gradient(from 0deg at 84% 6%,
      rgba(227,162,26,.20) 0deg 7deg, rgba(227,162,26,0) 7deg 14deg),
    radial-gradient(circle at 84% 6%, rgba(201,84,47,.28), transparent 52%),
    linear-gradient(180deg,var(--sand) 0%, var(--cream) 100%);
  border-bottom:5px double var(--brown);
  padding:var(--s-6) 0;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:var(--s-5);
  align-items:center;
}
.hero-copy{min-width:0}
.hero-copy h1{margin-bottom:var(--s-4)}

.lede{
  font-size:1.1rem;
  color:var(--muted);
  max-width:62ch;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin-top:var(--s-5);
}

.hero-note{
  margin-top:var(--s-4);
  font-size:0.86rem;
  color:var(--muted);
  border-left:5px solid var(--avocado);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(255,248,232,.7);
  padding:var(--s-2) var(--s-3);
}

.hero-scene{min-width:0}
.city-scene{
  width:100%;
  height:auto;
  border:4px solid var(--brown);
  border-radius:var(--radius);
  background:var(--paper);
  box-shadow:var(--pop);
}

.page-hero{
  padding:var(--s-5) 0 var(--s-6);
  border-bottom:5px double var(--brown);
  background:
    repeating-linear-gradient(90deg, rgba(122,140,58,.10) 0 14px, transparent 14px 28px),
    linear-gradient(180deg,var(--sand) 0%, var(--cream) 100%);
}
.page-hero h1{margin-bottom:var(--s-4);max-width:24ch}

/* ---------------------------------------------------------------- sections */

.section{padding:var(--s-6) 0}
.section-band{
  background:
    repeating-linear-gradient(135deg, rgba(201,84,47,.06) 0 10px, transparent 10px 20px),
    var(--sand);
  border-top:3px solid var(--brown);
  border-bottom:3px solid var(--brown);
}
.section-alt{
  background:
    repeating-linear-gradient(45deg, rgba(30,111,105,.06) 0 10px, transparent 10px 20px),
    var(--sand);
  border-top:3px solid var(--brown);
}

.section-title{
  padding-top:var(--s-3);
  border-top:7px double var(--brown);
  margin-bottom:var(--s-4);
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.section-intro{max-width:70ch;color:var(--muted);margin-bottom:var(--s-5)}

.stat-row{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s-4);
}
.stat{
  min-width:0;
  background:var(--paper);
  border:3px solid var(--brown);
  border-radius:var(--radius);
  box-shadow:5px 5px 0 var(--mustard);
  padding:var(--s-4);
  display:flex;
  flex-direction:column;
}
.stat-value{
  font-family:var(--serif);
  font-size:2.6rem;
  line-height:1;
  color:var(--burnt);
  margin-bottom:12px;
}
.stat-label{font-size:0.9rem;color:var(--muted)}

/* ------------------------------------------------- cards: framed canvas */

.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s-5);
}

.card-frame{
  position:relative;
  min-width:0;
  margin:12px 0 0 12px;
  background:
    repeating-linear-gradient(180deg,
      var(--mustard) 0 14px,
      var(--burnt) 14px 28px,
      var(--avocado) 28px 42px,
      var(--teal) 42px 56px);
  border:3px solid var(--brown);
  border-radius:var(--radius);
}

.card{
  position:relative;
  min-width:0;
  background:var(--paper);
  border:3px solid var(--brown);
  border-radius:var(--radius);
  transform:translate(-12px,-12px);
  transition:transform .25s ease,box-shadow .25s ease;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.card-frame:hover .card,
.card:focus-within{
  transform:translate(-18px,-18px);
  box-shadow:10px 10px 0 rgba(44,33,24,.22);
}

.card-media{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-bottom:3px solid var(--brown);
  filter:saturate(1.08) contrast(1.03) sepia(.08);
}

.card-body{
  padding:var(--s-4);
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  flex:1 1 auto;
}

.card-eyebrow{
  font:700 0.7rem/1.3 var(--sans);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mustard-ink);
}
.card-title{font-size:1.3rem}
.card-title a{color:var(--brown);text-decoration:none}
.card-title a:hover{color:var(--burnt-ink);text-decoration:underline}
.card-body p{color:var(--muted);font-size:0.96rem}

.tag-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin:0;
  padding:0;
}
.tag{
  background:var(--sand);
  color:var(--brown);
  border:2px solid var(--brown);
  border-radius:999px;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:4px 11px;
}

.card-cta{
  margin-top:auto;
  font-weight:700;
  font-size:0.82rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--burnt-ink);
  text-decoration:none;
  border-bottom:3px solid var(--mustard);
  align-self:flex-start;
}
.card-cta:hover{color:var(--teal-deep);border-bottom-color:var(--avocado)}

/* ---------------------------------------------------------------- layout */

.two-col{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:var(--s-5);
  align-items:start;
}

.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:var(--s-5);
  align-items:start;
  padding-top:var(--s-6);
  padding-bottom:var(--s-6);
}

.article{min-width:0}
.article-wide{max-width:80ch}

.article h2{
  margin-top:var(--s-6);
  margin-bottom:var(--s-4);
  padding-top:var(--s-3);
  border-top:5px double var(--sand-deep);
}
.article h2:first-child{margin-top:0}
.article h3{margin:var(--s-4) 0 var(--s-2);color:var(--burnt-ink)}
.article p{margin-bottom:var(--s-4);max-width:74ch}
.article ul,.article ol{margin:0 0 var(--s-4) var(--s-4);padding:0}
.article li{margin-bottom:var(--s-2);max-width:72ch}
.article li::marker{color:var(--burnt)}
.article code{
  font-family:var(--mono);
  background:var(--sand);
  color:var(--brown);
  border:1px solid var(--sand-deep);
  border-radius:6px;
  padding:2px 6px;
  font-size:0.9em;
}

.step-list{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:step;
}
.step-list > li{
  counter-increment:step;
  position:relative;
  padding:var(--s-4) 0 var(--s-4) 56px;
  border-top:3px solid var(--sand-deep);
  max-width:74ch;
}
.step-list > li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:var(--s-4);
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:3px solid var(--brown);
  border-radius:999px;
  background:var(--mustard);
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--brown);
}
.step-list h3{margin:0 0 var(--s-2)}
.step-list p{margin:0;color:var(--muted)}

.panel{
  min-width:0;
  background:var(--paper);
  border:3px solid var(--brown);
  border-top:12px solid var(--avocado);
  border-radius:var(--radius);
  box-shadow:var(--pop);
  padding:var(--s-4);
}
.panel-title{font-size:1.2rem;margin-bottom:var(--s-4);text-transform:uppercase}
.panel-list{margin:0 0 var(--s-4)}
.panel-list dt{
  font:700 0.74rem/1.3 var(--sans);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-deep);
  margin-top:var(--s-4);
}
.panel-list dt:first-child{margin-top:0}
.panel-list dd{margin:var(--s-2) 0 0;font-size:0.95rem;color:var(--muted)}
.panel-note{
  font-size:0.84rem;
  color:var(--muted);
  background:var(--sand);
  border:2px dashed var(--sand-deep);
  border-radius:var(--radius-sm);
  padding:var(--s-3);
  margin-bottom:var(--s-4);
}

/* ---------------------------------------------------------------- routes */

.route{
  margin:var(--s-5) 0;
  border:3px solid var(--brown);
  border-radius:var(--radius);
  background:
    repeating-linear-gradient(90deg, rgba(227,162,26,.12) 0 12px, transparent 12px 24px),
    var(--sand);
  box-shadow:var(--pop);
  padding:var(--s-4);
}
.route svg{width:100%;height:auto}
.route-label text{font:700 12px var(--sans);letter-spacing:0.06em;text-transform:uppercase}
.route figcaption{
  margin-top:var(--s-3);
  font-size:0.86rem;
  color:var(--muted);
}
.route-line{stroke-dasharray:100;stroke-dashoffset:100}
.route-line.is-drawn{animation:route-draw 2.2s ease forwards}
@keyframes route-draw{to{stroke-dashoffset:0}}

/* ---------------------------------------------------------------- tables */

.table-wrap{
  overflow-x:auto;
  border:3px solid var(--brown);
  border-radius:var(--radius-sm);
  box-shadow:5px 5px 0 var(--sage);
  margin-bottom:var(--s-4);
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:min(100%,560px);
  background:var(--paper);
  font-size:0.93rem;
}
caption{
  text-align:left;
  padding:var(--s-3);
  background:var(--mustard);
  color:var(--brown);
  font:700 0.8rem/1.4 var(--sans);
  letter-spacing:0.12em;
  text-transform:uppercase;
  border-bottom:3px solid var(--brown);
}
th,td{
  padding:var(--s-3);
  text-align:left;
  vertical-align:top;
  border-bottom:2px solid var(--sand-deep);
}
thead th{
  background:var(--brown);
  color:var(--cream);
  font-size:0.76rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
tbody tr:nth-child(even) td{background:rgba(246,225,184,.45)}
tbody tr:last-child td{border-bottom:none}

/* ---------------------------------------------------------------- pros/cons */

.pros-cons{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s-4);
  margin-bottom:var(--s-4);
}
.pc-block{
  min-width:0;
  background:var(--sand);
  border:3px solid var(--brown);
  border-left:10px solid var(--avocado);
  border-radius:var(--radius-sm);
  padding:var(--s-4);
}
.pc-block:last-child{border-left-color:var(--burnt)}
.pc-block h3{margin:0 0 var(--s-3);text-transform:uppercase;font-size:1.05rem}
.pc-block ul{margin:0 0 0 var(--s-4)}
.pc-block li{font-size:0.94rem;color:var(--ink)}

/* ---------------------------------------------------------------- breadcrumb */

.breadcrumb{padding:var(--s-4) 0 0}
.breadcrumb ol{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin:0;
  padding:0;
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.breadcrumb li+li::before{content:"\2022";margin-right:var(--s-2);color:var(--burnt)}
.breadcrumb a{color:var(--muted);text-decoration-thickness:1px}
.breadcrumb a:hover{color:var(--burnt-ink)}

/* ---------------------------------------------------------------- forms */

.form{
  border:3px solid var(--brown);
  border-radius:var(--radius);
  background:var(--sand);
  box-shadow:var(--pop);
  padding:var(--s-4);
  margin-bottom:var(--s-5);
}
.field{margin-bottom:var(--s-4)}
.field label{
  display:block;
  font:700 0.82rem/1.4 var(--sans);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brown);
  margin-bottom:var(--s-2);
}
input[type="text"],input[type="email"],input[type="number"],select,textarea{
  width:100%;
  min-width:0;
  font:400 1rem/1.5 var(--sans);
  color:var(--ink);
  background:var(--paper);
  border:3px solid var(--brown);
  border-radius:var(--radius-sm);
  padding:10px 13px;
}
input:hover,select:hover,textarea:hover{background:#FFFDF4}
textarea{resize:vertical}
input.is-invalid,select.is-invalid,textarea.is-invalid{
  border-color:var(--burnt);
  background:#FCEBE2;
  color:var(--ink);
}
.field-hint{font-size:0.82rem;color:var(--muted);margin-top:var(--s-2)}
.field-error{
  font-size:0.85rem;
  font-weight:700;
  color:var(--burnt-ink);
  margin-top:var(--s-2);
}
.field-check .check-label{
  display:flex;
  gap:var(--s-2);
  align-items:flex-start;
  font-weight:400;
  font-size:0.92rem;
  letter-spacing:0;
  text-transform:none;
}
.check-label input{flex:0 0 auto;margin-top:4px;width:18px;height:18px;accent-color:var(--burnt)}
input[type="checkbox"].is-invalid{outline:3px solid var(--burnt-ink);outline-offset:2px}

.form-status{
  padding:var(--s-3);
  margin-bottom:var(--s-4);
  font-size:0.94rem;
  border:3px solid var(--brown);
  border-left-width:10px;
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
}
.form-status.is-success{border-left-color:var(--avocado);background:#EEF4DF;color:var(--olive)}
.form-status.is-error{border-left-color:var(--burnt);background:#FCEBE2;color:var(--burnt-ink)}

.map-block{
  margin:0 0 var(--s-4);
  border:3px solid var(--brown);
  border-radius:var(--radius);
  background:var(--sand);
  box-shadow:var(--pop);
  overflow:hidden;
}
.map-block svg{width:100%;height:auto;display:block;border-bottom:3px solid var(--brown)}
.map-block figcaption{padding:var(--s-3);font-size:0.85rem;color:var(--muted)}

/* ---------------------------------------------------------------- footer */

.site-footer{
  position:relative;
  background:var(--brown);
  color:var(--sand);
  border-top:3px solid var(--brown);
  margin-top:var(--s-6);
}
.site-footer::before{
  content:"";
  display:block;
  height:14px;
  background:repeating-linear-gradient(90deg,
    var(--burnt) 0 40px,
    var(--mustard) 40px 80px,
    var(--avocado) 80px 120px,
    var(--teal) 120px 160px);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-5);
  padding-top:var(--s-6);
  padding-bottom:var(--s-5);
}
.footer-block{min-width:0;display:flex;flex-direction:column;gap:var(--s-3)}
.footer-block p{font-size:0.9rem;color:#F0DCB8}
.footer-brand{
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--mustard);
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.footer-title{
  font:700 0.74rem/1.3 var(--sans);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--sage);
}
.footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.footer-list a,.footer-block a{color:#F7CF8A;font-size:0.9rem;text-decoration:underline;text-underline-offset:3px}
.footer-list a:hover,.footer-block a:hover{color:var(--cream)}
.site-footer :focus-visible{outline:3px solid var(--mustard);outline-offset:2px}

.footer-base{
  border-top:2px dashed rgba(246,225,184,.35);
  padding-top:var(--s-4);
  padding-bottom:var(--s-4);
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-4);
  justify-content:space-between;
}
.footer-base p{font-size:0.8rem;letter-spacing:0.04em;color:#DCC7A2;margin:0}

/* ---------------------------------------------------------------- cookies */

.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:120;
  background:var(--paper);
  color:var(--ink);
  border-top:5px double var(--brown);
  box-shadow:0 -6px 0 rgba(201,84,47,.35);
}
.cookie-inner{
  padding-top:var(--s-4);
  padding-bottom:var(--s-4);
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:var(--s-4);
  align-items:start;
}
.cookie-copy h2{font-size:1.05rem;margin-bottom:var(--s-2);text-transform:uppercase}
.cookie-copy p{font-size:0.88rem;color:var(--muted)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:flex-start}
.cookie-prefs{
  grid-column:1 / -1;
  border-top:2px dashed var(--sand-deep);
  padding-top:var(--s-4);
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.cookie-prefs-title{
  font:700 0.8rem/1.4 var(--sans);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--brown);
}
.cookie-opt{
  display:flex;
  gap:var(--s-2);
  align-items:flex-start;
  font-size:0.88rem;
  color:var(--ink);
}
.cookie-opt input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--avocado)}
.cookie-prefs .btn{align-self:flex-start}

/* ---------------------------------------------------------------- reveal */

.has-js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.has-js [data-reveal].is-visible{opacity:1;transform:none}

/* ---------------------------------------------------------------- responsive */

@media (max-width:960px){
  .hero-grid,.two-col,.article-layout{grid-template-columns:minmax(0,1fr)}
  .hero-scene{order:-1}
}

@media (max-width:768px){
  :root{--header-h:50px}

  .brand-name{font-size:0.9rem}
  .header-cta{display:none}
  .nav-toggle{display:block}

  .site-nav{
    position:fixed;
    inset:var(--header-h) 0 0 0;
    background:var(--sand);
    border-top:3px solid var(--brown);
    padding:var(--s-4);
    overflow-y:auto;
    display:none;
    z-index:110;
  }
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav li{border-bottom:2px solid var(--sand-deep)}
  .site-nav a{display:block;padding:var(--s-3) 0;font-size:0.98rem}
  body.nav-open{overflow:hidden}

  .card-frame{margin:0}
  .card{transform:none}
  .card-frame:hover .card,.card:focus-within{transform:none;box-shadow:none}

  .cards-grid{gap:var(--s-4)}
  .section{padding:var(--s-5) 0}
  .article-layout{padding-top:var(--s-5);padding-bottom:var(--s-5)}
  .cookie-inner{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:400px){
  body{font-size:16px}
  .wrap{padding:0 var(--s-3)}
  .hero{padding:var(--s-5) 0}
  .hero-actions .btn{width:100%;text-align:center}
  .stat-value{font-size:2.1rem}
  .card-body{padding:var(--s-3);gap:var(--s-4)}
  .panel,.form,.route{padding:var(--s-3)}
  .footer-base{flex-direction:column}
  .cookie-actions .btn{width:100%;text-align:center}
  table{min-width:280px}
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .route-line{stroke-dashoffset:0}
  .has-js [data-reveal]{opacity:1;transform:none}
}