/* ==========================================================================
   OCHRE SPITI — Design System
   Palette drawn from Spiti's cold desert: bleached stone, raw ochre cliff,
   indigo high-altitude night, and the five colours of prayer flags used
   only as small, literal accent dots — never as UI chrome.
   ========================================================================== */

:root{
  --stone-50:   #F6F3EC;   /* whitewashed wall — base background */
  --stone-100:  #EFEADD;
  --stone-200:  #E3DCC9;
  --stone-line: #D9CFB8;   /* hairline rule colour on light */
  --ink-900:    #211D17;   /* near-black warm ink for text */
  --ink-700:    #4A4437;
  --ink-500:    #8A806C;

  --ochre-700:  #8C4A1E;   /* raw cliff ochre — primary accent */
  --ochre-600:  #A6591E;
  --ochre-500:  #B96A2C;

  --dusk-900:   #14171F;   /* indigo night sky — dark sections */
  --dusk-800:   #1B2030;
  --dusk-600:   #2B3A4A;
  --dusk-100:   #DDE3EA;

  --flag-blue:  #4C6B8A;
  --flag-white: #F6F3EC;
  --flag-red:   #A23B3B;
  --flag-green: #5C7A52;
  --flag-yellow:#C9A227;

  --radius: 2px;
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Archivo", "Inter", -apple-system, sans-serif;
  --font-mono: "Archivo", monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--stone-50);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

::selection{ background:var(--ochre-600); color:var(--stone-50); }

:focus-visible{
  outline:2px solid var(--ochre-600);
  outline-offset:3px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0;
  color:var(--ink-900);
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); font-weight:500; }
h2{ font-size:clamp(1.9rem, 3.4vw, 3rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); }
h4{ font-size:1.05rem; }

p{ margin:0 0 1em; color:var(--ink-700); }
p:last-child{ margin-bottom:0; }
.lede{ font-size:1.18rem; line-height:1.65; color:var(--ink-700); font-family:var(--font-display); font-weight:400; font-style:italic; }

.eyebrow{
  display:flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ochre-700);
  margin:0 0 1em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--ochre-600);
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--flag-yellow); }
.eyebrow.on-dark::before{ background:var(--flag-yellow); }

/* ---------- Signature: signpost / elevation marker ---------- */
.marker{
  display:inline-flex;
  align-items:baseline;
  gap:.5em;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ink-500);
  border-left:1px solid var(--stone-line);
  padding-left:.75em;
}
.marker b{ color:var(--ink-900); font-weight:700; }
.marker.on-dark{ color:var(--dusk-100); border-color:rgba(255,255,255,.25); }
.marker.on-dark b{ color:#fff; }

.ridge{
  display:block;
  width:100%;
  height:auto;
  color:var(--stone-line);
}
.ridge path{ fill:none; stroke:currentColor; stroke-width:1; }
.ridge.on-dark{ color:rgba(255,255,255,.18); }
.section-divider{ margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.6em;
  border:1px solid var(--ink-900);
  border-radius:var(--radius);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:transparent;
  color:var(--ink-900);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{ background:var(--ink-900); color:var(--stone-50); }
.btn svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

.btn-solid{ background:var(--ochre-700); border-color:var(--ochre-700); color:#fff; }
.btn-solid:hover{ background:var(--ink-900); border-color:var(--ink-900); }

.btn-on-dark{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-on-dark:hover{ background:#fff; color:var(--dusk-900); }

.btn-ghost{ border-color:var(--stone-line); color:var(--ink-700); }
.btn-ghost:hover{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,243,236,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--stone-line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:78px; gap: 1rem; max-width:1440px;
}
.brand{ display:flex; align-items:center; gap:.7em; font-family:var(--font-display); font-size:1.35rem; font-weight:600; letter-spacing:.01em; white-space:nowrap; flex:none; }
.brand .dot{ width:7px; height:7px; background:var(--ochre-600); border-radius:50%; display:inline-block; flex:none; }
.brand small{ display:block; font-family:var(--font-body); font-size:.58rem; font-weight:600; letter-spacing:.1em; color:var(--ink-500); text-transform:uppercase; white-space:nowrap; }

.nav-desktop{ display:flex; align-items:center; gap:.9rem; min-width:0; }
.nav-desktop > ul{ display:flex; align-items:center; gap:.78rem; }
.nav-desktop > ul > li{ position:relative; }
.nav-desktop > ul > li > a{
  font-size:.64rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:1.7rem 0; display:inline-block; color:var(--ink-700); white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav-desktop > ul > li > a:hover,
.nav-desktop > ul > li.active > a{ color:var(--ochre-700); border-color:var(--ochre-600); }

.dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%,4px);
  background:#fff; border:1px solid var(--stone-line); min-width:230px;
  padding:.6rem; opacity:0; visibility:hidden; transition:opacity .18s var(--ease), transform .18s var(--ease);
  box-shadow:0 18px 40px -12px rgba(33,29,23,.18);
}
.nav-desktop > ul > li:hover .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.dropdown a{
  display:block; padding:.6rem .8rem; font-size:.86rem; color:var(--ink-700); border-radius:var(--radius);
}
.dropdown a:hover{ background:var(--stone-100); color:var(--ochre-700); }

.nav-cta{ display:flex; align-items:center; gap:.7rem; flex:none; }
.nav-cta .btn{ padding:.8em 1.15em; font-size:.66rem; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:.4rem; }
.nav-toggle span{ display:block; width:22px; height:1.5px; background:var(--ink-900); margin:5px 0; transition:transform .25s var(--ease), opacity .25s var(--ease); }

.mobile-nav{
  display:none; position:fixed; top:78px; left:0; right:0; bottom:0; height:calc(100vh - 78px);
  background:var(--stone-50); z-index:99;
  overflow-y:auto; padding:1rem var(--gutter) 3rem;
}
.mobile-nav.open{ display:block; }
.mobile-nav details{ border-bottom:1px solid var(--stone-line); }
.mobile-nav summary{ padding:1.1rem 0; font-family:var(--font-display); font-size:1.15rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.mobile-nav summary::-webkit-details-marker{ display:none; }
.mobile-nav summary::after{ content:"+"; font-size:1.3rem; color:var(--ochre-600); }
.mobile-nav details[open] summary::after{ content:"–"; }
.mobile-nav a.top-link{ display:block; padding:1.1rem 0; font-family:var(--font-display); font-size:1.15rem; border-bottom:1px solid var(--stone-line); }
.mobile-nav .sub{ padding:0 0 1rem 1rem; }
.mobile-nav .sub a{ display:block; padding:.55rem 0; font-size:.95rem; color:var(--ink-700); }
.mobile-nav .mobile-cta{ margin-top:1.6rem; display:flex; gap:.8rem; flex-wrap:wrap; }

@media (max-width: 1180px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta .btn{ display:none; }
  .nav-cta .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:9.5rem 0 5rem;
  background:linear-gradient(180deg, var(--stone-100), var(--stone-50) 78%);
  overflow:hidden;
}
.hero .container{ position:relative; z-index:2; }
.hero-inner{ max-width:600px; position:relative; z-index:2; }
.hero .marker{ margin-top:1.6rem; }
.hero-art{ position:absolute; right:-4%; bottom:0; width:42%; max-width:480px; opacity:.9; pointer-events:none; z-index:1; }
@media (max-width: 860px){ .hero-art{ display:none; } }
.breadcrumb{ display:flex; gap:.5em; align-items:center; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); margin-bottom:1.6rem; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--ochre-700); }
.breadcrumb span{ color:var(--stone-line); }

.hero-sub{
  padding:7.5rem 0 3.5rem;
  background:var(--stone-100);
}

.hero-dark{
  background:radial-gradient(120% 140% at 15% 0%, var(--dusk-600), var(--dusk-900) 60%);
  color:#fff;
}
.hero-dark h1{ color:#fff; }
.hero-dark p{ color:var(--dusk-100); }

/* ---------- Sections & grid ---------- */
.section{ padding:5.5rem 0; }
.section.tight{ padding:3.6rem 0; }
.section-stone{ background:var(--stone-100); }
.section-dark{ background:var(--dusk-900); color:#fff; }
.section-dark h2, .section-dark h3, .section-dark h4{ color:#fff; }
.section-dark p{ color:var(--dusk-100); }
.section-dark .marker{ color:var(--dusk-100); border-color:rgba(255,255,255,.25); }
.section-dark .marker b{ color:#fff; }

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

.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.split.reverse{ grid-template-columns:1.1fr 0.9fr; }
.split.reverse .split-art{ order:2; }
@media (max-width:860px){ .split, .split.reverse{ grid-template-columns:1fr; } .split.reverse .split-art{ order:0; } }

.art-frame{
  border:1px solid var(--stone-line);
  aspect-ratio:4/5;
  overflow:hidden;
  position:relative;
  background:var(--stone-200);
}
.art-frame.wide{ aspect-ratio:16/10; }
.art-frame.square{ aspect-ratio:1/1; }
.art-frame svg{ width:100%; height:100%; }
.art-frame .frame-tag{
  position:absolute; left:0; bottom:0; right:0;
  padding:.7rem 1rem;
  background:linear-gradient(0deg, rgba(20,23,31,.72), transparent);
  color:#fff; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
}

/* ---------- Cards ---------- */
.card{
  border:1px solid var(--stone-line);
  background:#fff;
  padding:2rem;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover{ border-color:var(--ochre-600); }
.card h3{ margin-bottom:.6rem; }
.card .marker{ margin-top:1.2rem; }

.place-card{ border:1px solid var(--stone-line); background:#fff; }
.place-card .art-frame{ border:none; border-bottom:1px solid var(--stone-line); }
.place-card .body{ padding:1.6rem 1.7rem 1.8rem; }
.place-card .body h3{ margin-bottom:.35rem; }
.place-card .body .marker{ margin-bottom:.9rem; }

.fact-list{ display:grid; gap:.9rem; }
.fact-list li{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--stone-line); font-size:.92rem; }
.fact-list li span:first-child{ color:var(--ink-500); }
.fact-list li span:last-child{ font-weight:700; text-align:right; }

.info-panel{ border:1px solid var(--stone-line); background:#fff; padding:2rem; }
.info-panel h4{ margin-bottom:1.2rem; }

.tag-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1.4rem 0; }
.tag{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:.4rem .7rem; border:1px solid var(--stone-line); color:var(--ink-700); }

.dots{ display:flex; gap:.35rem; margin:1.2rem 0; }
.dots span{ width:7px; height:7px; border-radius:50%; }

/* ---------- Numbered / process ---------- */
.step{ display:flex; gap:1.3rem; }
.step .num{ font-family:var(--font-display); font-size:1.6rem; color:var(--ochre-600); font-weight:600; flex-shrink:0; width:2.2rem; }
.step h4{ margin-bottom:.4rem; }

/* ---------- Quote / pull ---------- */
.pull{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.4; color:var(--ink-900);
  border-left:2px solid var(--ochre-600); padding-left:1.6rem; margin:2rem 0;
}
.pull cite{ display:block; font-style:normal; font-family:var(--font-body); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); margin-top:1rem; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ochre-700);
  color:#fff;
  padding:4.4rem 0;
  text-align:center;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:#F3E3D3; max-width:560px; margin:1rem auto 2rem; }
.cta-band .actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cta-band .btn{ border-color:#fff; color:#fff; }
.cta-band .btn:hover{ background:#fff; color:var(--ochre-700); }
.cta-band .btn-solid{ background:#fff; color:var(--ochre-700); border-color:#fff; }
.cta-band .btn-solid:hover{ background:var(--dusk-900); color:#fff; border-color:var(--dusk-900); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
label{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-700); margin-bottom:.5rem; }
input, select, textarea{
  width:100%; border:1px solid var(--stone-line); background:#fff; padding:.85em 1em; font-family:var(--font-body);
  font-size:.95rem; color:var(--ink-900); border-radius:var(--radius);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--ochre-600); outline-offset:1px; border-color:var(--ochre-600); }
textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.82rem; color:var(--ink-500); margin-top:1rem; }
.form-success{ display:none; border:1px solid var(--ochre-600); background:#fff; padding:1.4rem; margin-top:1.4rem; }
.form-success.show{ display:block; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--stone-line); }
table{ width:100%; border-collapse:collapse; min-width:560px; }
th,td{ text-align:left; padding:.9rem 1.1rem; font-size:.9rem; border-bottom:1px solid var(--stone-line); }
th{ font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-500); font-weight:700; }
tr:last-child td{ border-bottom:none; }

/* ---------- FAQ accordion ---------- */
.faq-item{ border-bottom:1px solid var(--stone-line); }
.faq-item summary{ cursor:pointer; list-style:none; padding:1.4rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--font-display); font-size:1.15rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.5rem; color:var(--ochre-600); flex-shrink:0; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item .faq-a{ padding:0 0 1.6rem; max-width:760px; }

/* ---------- Gallery ---------- */
.gal-filter{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.gal-filter button{ border:1px solid var(--stone-line); background:transparent; padding:.6em 1.1em; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-700); cursor:pointer; }
.gal-filter button.active, .gal-filter button:hover{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
.gal-grid{ column-count:3; column-gap:var(--gutter); }
.gal-grid figure{ break-inside:avoid; margin:0 0 var(--gutter); border:1px solid var(--stone-line); }
.gal-grid figcaption{ padding:.8rem 1rem; font-size:.78rem; letter-spacing:.05em; color:var(--ink-500); }
@media (max-width:860px){ .gal-grid{ column-count:2; } }
@media (max-width:560px){ .gal-grid{ column-count:1; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--dusk-900); color:var(--dusk-100); padding:5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3.4rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-grid h4{ color:#fff; font-family:var(--font-body); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.2rem; }
.footer-grid a{ display:block; padding:.4rem 0; font-size:.92rem; color:var(--dusk-100); }
.footer-grid a:hover{ color:var(--flag-yellow); }
.footer-brand .brand{ color:#fff; }
.footer-brand p{ color:var(--dusk-100); margin:1rem 0 1.6rem; max-width:280px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:2rem; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:rgba(221,227,234,.65); }
.footer-bottom .socials{ display:flex; gap:1.2rem; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0 !important; }
.center{ text-align:center; }
.max-60{ max-width:640px; }
.max-60.center{ margin-left:auto; margin-right:auto; }
.stack{ display:flex; flex-direction:column; gap:1.4rem; }
.between{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.6rem; }

/* Reveal-on-scroll (progressive enhancement) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }