/* ============================================================
   SACRED CIRCLE — design system
   Elegant / modern with Lakota-inspired ornament
   ============================================================ */

:root{
  /* brand core — pulled from the existing Sacred Circle mark */
  --ink:        #2b1710;
  --wine:       #4a1a15;
  --terracotta: #c1440e;
  --ember:      #e0631f;
  --ochre:      #c98a2b;
  --bone:       #f6efe3;
  --bone-dim:   #efe4d1;
  --paper:      #fbf7ef;
  --line:       rgba(43,23,16,.12);
  --ink-soft:   rgba(43,23,16,.68);

  --serif: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --container: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.68,.18,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
p{margin:0 0 1em;}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:600;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--terracotta);
}
.lede{
  font-size:19px;
  color:var(--ink-soft);
  max-width:640px;
}

/* ---------- medicine-wheel motif (used everywhere as brand glyph) ---------- */
.wheel{
  display:inline-block;
  width:1em;height:1em;
  vertical-align:-.12em;
}

/* ---------- language toggle ---------- */
[data-i18n]{}
html[lang="pt"] [data-lang="en"]{display:none !important;}
html[lang="en"] [data-lang="pt"]{display:none !important;}

/* ============================================================
   TOP NAV — floats & compresses on scroll
   ============================================================ */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:900;
  padding:26px 0;
  transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-header.is-stuck{
  padding:14px 0;
  background:rgba(251,247,239,.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), 0 18px 40px -30px rgba(43,23,16,.4);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--serif);
  font-weight:500;
  font-size:19px;
  letter-spacing:.03em;
  color:var(--wine);
}
.brand svg{width:36px;height:36px;flex:none;transition:transform .35s var(--ease);}
.site-header.is-stuck .brand svg{width:30px;height:30px;}

.nav{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav a{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
  position:relative;
  padding:4px 0;
}
.nav a::after{
  content:"";
  position:absolute;left:0;bottom:-2px;
  width:0;height:1px;
  background:var(--terracotta);
  transition:width .3s var(--ease);
}
.nav a:hover::after,
.nav a.is-active::after{width:100%;}
.nav a.is-active{color:var(--terracotta);}

.lang-toggle{
  display:flex;
  border:1px solid var(--line);
  border-radius:100px;
  overflow:hidden;
  font-size:11px;
  letter-spacing:.06em;
  font-weight:600;
}
.lang-toggle button{
  border:0;background:none;
  padding:7px 13px;
  cursor:pointer;
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.06em;
  font-weight:600;
}
.lang-toggle button.is-active{
  background:var(--wine);
  color:var(--bone);
}

.nav-toggle{
  display:none;
  border:0;background:none;
  width:30px;height:22px;
  position:relative;
  cursor:pointer;
  z-index:902;
}
.nav-toggle span{
  position:absolute;left:0;right:0;height:1px;background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1){top:0;}
.nav-toggle span:nth-child(2){top:50%;margin-top:-.5px;}
.nav-toggle span:nth-child(3){bottom:0;}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(10.5px) rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-10.5px) rotate(-45deg);}

body.nav-open{overflow:hidden;}

@media (max-width:860px){
  .nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(320px,80vw);
    background:var(--bone);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:26px;
    padding:110px 40px 40px;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.3);
    z-index:901;
  }
  .nav-open .nav{transform:translateX(0);}
  .nav a{font-size:16px;}
  .lang-toggle{order:-1;margin-bottom:10px;}
  .nav-toggle{display:block;}
}

/* ============================================================
   REVEAL-ON-SCROLL
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in{opacity:1;transform:translateY(0);}
[data-reveal="fade"]{transform:none;}
[data-reveal="left"]{transform:translateX(-34px);}
[data-reveal="left"].is-in{transform:translateX(0);}
[data-reveal="right"]{transform:translateX(34px);}
[data-reveal="right"].is-in{transform:translateX(0);}
[data-reveal="scale"]{transform:scale(.92);}
[data-reveal="scale"].is-in{transform:scale(1);}
[data-reveal-group] [data-reveal]:nth-child(1){transition-delay:.05s;}
[data-reveal-group] [data-reveal]:nth-child(2){transition-delay:.16s;}
[data-reveal-group] [data-reveal]:nth-child(3){transition-delay:.27s;}
[data-reveal-group] [data-reveal]:nth-child(4){transition-delay:.38s;}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   THE RED ROAD — one winding path down the whole top stretch
   (hero → about → facilitators → rituals → statement). Flat
   colors, one continuous dawn-to-dusk gradient, no photography.
   The path draws itself in on scroll; a traveler moves along it;
   five waypoints (medicine wheel, feather, sun, four directions,
   mountain) light up as the walk of life passes them.
   ============================================================ */
.journey-wrap{
  position:relative;
  background:linear-gradient(180deg,
    #f6efe3 0%, #efe0c8 50%, #cf8a5e 61%, #8a3a28 72%, #4a1a15 85%, #3a1410 100%);
}
.journey-wrap > *:not(.road-rail){position:relative;z-index:1;}

.road-rail{
  position:absolute;
  top:0;left:14px;
  width:44px;height:100%;
  pointer-events:none;
  z-index:0;
}
.road-svg{width:100%;height:100%;display:block;overflow:visible;}
.road-path{
  fill:none;
  stroke:var(--terracotta);
  stroke-width:3;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:.8;
}
.road-traveler{
  position:absolute;
  top:0;left:50%;
  width:12px;height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  background:var(--ochre);
  box-shadow:0 0 0 5px rgba(201,138,43,.22);
  z-index:2;
}
.road-marker{
  position:absolute;
  top:0;left:50%;
  width:40px;height:40px;
  margin:-20px 0 0 -20px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--terracotta);
  display:flex;align-items:center;justify-content:center;
  color:var(--terracotta);
  box-shadow:0 10px 24px -14px rgba(43,23,16,.4);
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
  z-index:2;
}
.road-marker svg{width:20px;height:20px;position:relative;z-index:1;}
.road-marker.is-passed{
  background:var(--terracotta);
  color:var(--bone);
  transform:scale(1.1);
  box-shadow:0 0 0 6px rgba(193,68,14,.16), 0 0 18px 2px rgba(201,138,43,.55), 0 10px 24px -14px rgba(43,23,16,.4);
}
.road-marker-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--ochre);
  opacity:0;
  pointer-events:none;
  transform:scale(1);
}

.journey-wrap .container{padding-left:96px;}

@media (min-width:640px){
  .road-rail{left:30px;width:56px;}
  .road-marker{width:48px;height:48px;margin:-24px 0 0 -24px;}
  .road-marker svg{width:24px;height:24px;}
}
@media (max-width:639px){
  .journey-wrap .container{padding-left:64px;}
}
@media (max-width:420px){
  .road-rail{left:8px;width:34px;}
  .road-marker{width:30px;height:30px;margin:-15px 0 0 -15px;border-width:1.5px;}
  .road-marker svg{width:15px;height:15px;}
  .journey-wrap .container{padding-left:52px;}
}

/* ============================================================
   HERO (home) — flat, over the Red Road, scroll cue
   ============================================================ */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-inner{
  padding-top:120px;
  padding-bottom:80px;
}
.hero h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(42px,7vw,84px);
  line-height:1.05;
  letter-spacing:.01em;
  color:var(--wine);
  max-width:840px;
}
.hero h1 em{
  font-style:normal;
  color:var(--terracotta);
}
.hero .lede{font-size:20px;margin-top:22px;}
.hero-actions{
  display:flex;
  gap:18px;
  margin-top:38px;
  flex-wrap:wrap;
}
.scroll-cue{
  position:absolute;
  left:32px;bottom:34px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.scroll-cue .stick{
  width:1px;height:46px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.scroll-cue .stick::after{
  content:"";
  position:absolute;left:0;top:0;
  width:100%;height:40%;
  background:var(--terracotta);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{
  0%{transform:translateY(-100%);}
  60%{transform:translateY(150%);}
  100%{transform:translateY(150%);}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  border-radius:100px;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{
  background:var(--terracotta);
  color:var(--bone);
}
.btn-primary:hover{background:var(--wine);transform:translateY(-2px);}
.btn-ghost{
  border-color:var(--ink);
  color:var(--ink);
  background:transparent;
}
.btn-ghost:hover{border-color:var(--terracotta);color:var(--terracotta);transform:translateY(-2px);}
.btn svg{width:15px;height:15px;}

/* ============================================================
   SECTIONS — general rhythm
   ============================================================ */
section{padding:120px 0;position:relative;}
.section-head{
  max-width:680px;
  margin-bottom:64px;
}
.facilitators-band{padding-bottom:60px;}

.band-dark{color:var(--bone);}
.band-dark .eyebrow{color:var(--ochre);}
.band-dark .eyebrow::before{background:var(--ochre);}
.band-dark .lede{color:rgba(246,239,227,.78);}

.rule{
  border:0;
  border-top:1px solid var(--line);
  margin:0;
}
.band-dark .rule{border-top-color:rgba(246,239,227,.18);}

/* ---------- pattern strip: subtle beadwork-inspired border ---------- */
.pattern-strip{
  height:14px;
  background-image:
    linear-gradient(135deg, var(--terracotta) 25%, transparent 25%),
    linear-gradient(-135deg, var(--terracotta) 25%, transparent 25%),
    linear-gradient(45deg, var(--ochre) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ochre) 25%, transparent 25%);
  background-size:14px 14px;
  background-position:0 0, 0 0, 7px 0, 7px 0;
  opacity:.55;
}

/* ============================================================
   ABOUT / WHO WE ARE (home)
   ============================================================ */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.about-quote-card{
  background:var(--bone);
  border:1px solid var(--line);
  box-shadow:0 24px 50px -36px rgba(43,23,16,.28);
  padding:46px 40px;
  border-radius:4px;
}
.about-quote-card > .wheel{font-size:30px;color:var(--terracotta);}
.about-quote{
  margin-top:18px;
  padding-left:22px;
  border-left:2px solid var(--terracotta);
  font-family:var(--serif);
  font-size:18px;
  color:var(--ink-soft);
  font-style:italic;
}
.about-copy h2{font-size:clamp(28px,3.6vw,40px);}

.about-gallery-label{
  display:block;
  margin-top:30px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--terracotta);
}
.about-gallery{
  margin-top:14px;
  columns:3;
  column-gap:8px;
}
.about-gallery img{
  width:100%;
  display:block;
  margin-bottom:8px;
  border-radius:3px;
  cursor:zoom-in;
  position:relative;
  filter:sepia(.18) saturate(1.05) contrast(1.02);
  transition:filter .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.about-gallery img:hover{
  filter:sepia(0) saturate(1.08);
  transform:scale(2.5);
  z-index:20;
  box-shadow:0 30px 70px -20px rgba(43,23,16,.55);
}
@media (max-width:480px){.about-gallery{columns:2;}}
@media (max-width:640px){.about-gallery img:hover{transform:scale(1.8);}}

/* ============================================================
   PHOTO PLACEHOLDER — used wherever a real photo belongs later
   ============================================================ */
.photo-placeholder{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;height:100%;
  background:
    repeating-linear-gradient(135deg, rgba(43,23,16,.05) 0 12px, transparent 12px 24px);
  border:1px dashed var(--line);
  color:var(--ink-soft);
  text-align:center;
  padding:18px;
}
.photo-placeholder svg{width:30px;height:30px;opacity:.55;}
.photo-placeholder span{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
}

/* ============================================================
   FACILITATORS
   ============================================================ */
.facilitators{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  margin-top:56px;
}
.facilitator-card{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:22px;
  background:var(--bone);
  border:1px solid var(--line);
  box-shadow:0 24px 50px -36px rgba(43,23,16,.25);
  padding:26px;
  border-radius:6px;
}
.facilitator-photo{
  width:120px;height:120px;
  border-radius:50%;
  overflow:hidden;
  flex:none;
}
.facilitator-photo .photo-placeholder{border-radius:50%;}
.facilitator-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.facilitator-card h4{
  font-family:var(--serif);
  font-size:19px;
  color:var(--wine);
  margin-bottom:4px;
}
.facilitator-card .role{
  display:block;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:600;
  margin-bottom:10px;
}
.facilitator-card p{font-size:14.5px;color:var(--ink-soft);margin:0;}
@media (max-width:640px){
  .facilitators{grid-template-columns:1fr;}
  .facilitator-card{grid-template-columns:80px 1fr;}
  .facilitator-photo{width:80px;height:80px;}
}

/* ============================================================
   WHAT WE DO — ritual cards
   ============================================================ */
.rituals{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.ritual-card{
  background:var(--paper);
  padding:38px 30px 34px;
  position:relative;
  transition:background .4s var(--ease);
}
.ritual-card:hover{background:var(--bone);}
.ritual-card .num{
  font-family:var(--serif);
  font-size:13px;
  color:var(--terracotta);
  letter-spacing:.1em;
}
.ritual-card svg{
  width:38px;height:38px;
  margin:20px 0 18px;
  color:var(--wine);
}
.ritual-card h3{font-size:19px;margin-bottom:10px;color:var(--ink);}
.ritual-card p{font-size:14.5px;color:var(--ink-soft);margin:0;}

@media (max-width:980px){
  .rituals{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:1fr;gap:48px;}
}
@media (max-width:640px){
  .rituals{grid-template-columns:1fr;}
}

/* ============================================================
   MITAKUYE OYASIN — full-bleed statement band
   ============================================================ */
.statement{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--bone);
  overflow:hidden;
}
.statement-inner{max-width:820px;padding:0 32px;}
.statement h2{
  font-size:clamp(30px,5vw,54px);
  color:var(--bone);
}
.statement p{color:rgba(246,239,227,.72);font-size:18px;}
.statement .signature{
  margin-top:26px;
  font-family:var(--serif);
  font-style:italic;
  color:var(--ochre);
  letter-spacing:.04em;
}

/* ============================================================
   CTA / instagram teaser (home)
   ============================================================ */
.ig-teaser{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:64px;
  align-items:center;
}
.ig-teaser-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.ig-teaser-grid a{
  display:block;
  aspect-ratio:1;
  overflow:hidden;
  position:relative;
}
.ig-teaser-grid img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.ig-teaser-grid a:hover img{transform:scale(1.08);}
@media (max-width:860px){
  .ig-teaser{grid-template-columns:1fr;gap:36px;}
}

/* ============================================================
   PAGE HEADER (sub-pages)
   ============================================================ */
.page-hero{
  padding:180px 0 90px;
  background:
    radial-gradient(ellipse 700px 500px at 90% -10%, rgba(193,68,14,.14), transparent 60%),
    var(--bone);
  border-bottom:1px solid var(--line);
}
.page-hero h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(36px,5.4vw,58px);
  line-height:1.05;
  letter-spacing:.01em;
  color:var(--wine);
}
.crumb{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.crumb .wheel{color:var(--terracotta);}

/* ============================================================
   EVENTS PAGE — instagram wrapper
   ============================================================ */
.ig-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:46px;
}
.ig-handle{
  display:flex;align-items:center;gap:14px;
  font-family:var(--serif);
  font-size:20px;
  color:var(--wine);
}
.ig-handle .avatar{
  width:52px;height:52px;border-radius:50%;
  background:var(--wine);
  display:flex;align-items:center;justify-content:center;
  color:var(--ochre);
  flex:none;
}
.ig-handle .avatar svg{width:26px;height:26px;}
.ig-handle span{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-soft);font-weight:500;}

.ig-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.ig-post{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--bone-dim);
  border-radius:4px;
}
.ig-post img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.ig-post:hover img{transform:scale(1.06);}
.ig-post-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(43,23,16,.82));
  opacity:0;
  transition:opacity .3s var(--ease);
  display:flex;
  align-items:flex-end;
  padding:20px;
  color:var(--bone);
  font-size:13.5px;
}
.ig-post:hover .ig-post-overlay{opacity:1;}
.ig-post-overlay svg{width:16px;height:16px;margin-right:6px;flex:none;}

.ig-footer{
  margin-top:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-direction:column;
  text-align:center;
}
.ig-note{
  font-size:13px;
  color:var(--ink-soft);
  max-width:520px;
  margin:0 auto 8px;
}

@media (max-width:640px){.ig-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}

/* ============================================================
   O.I.C PAGE
   ============================================================ */
.oic-layout{
  display:grid;
  grid-template-columns:.9fr 1.4fr;
  gap:72px;
}
.oic-side{position:sticky;top:140px;align-self:start;}
.oic-side .wheel-figure{width:100%;max-width:220px;margin-bottom:26px;}
.oic-side blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  color:var(--wine);
  border-left:2px solid var(--terracotta);
  padding-left:20px;
  margin:0 0 24px;
}
.oic-side cite{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:8px;
}
.prose{max-width:640px;}
.prose p{color:var(--ink-soft);font-size:16.5px;}
.prose p:first-of-type{
  font-family:var(--serif);
  font-size:20px;
  color:var(--ink);
}
.oic-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:48px 0;
  padding:32px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.oic-facts .fact b{
  display:block;
  font-family:var(--serif);
  font-size:30px;
  color:var(--terracotta);
}
.oic-facts .fact span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.oic-source{
  font-size:12.5px;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:40px;
}
@media (max-width:940px){
  .oic-layout{grid-template-columns:1fr;gap:40px;}
  .oic-side{position:static;}
  .oic-facts{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   ARTICLES PAGE
   ============================================================ */
.articles-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}
.article-card{
  border:1px solid var(--line);
  background:var(--bone);
  overflow:hidden;
  scroll-margin-top:110px;
}
.article-figure{aspect-ratio:16/9;overflow:hidden;background:var(--wine);}
.article-figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.article-card:hover .article-figure img{transform:scale(1.05);}
.article-body{padding:30px 30px 8px;}
.article-tag{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terracotta);font-weight:600;margin-bottom:10px;display:block;
}
.article-body h3{font-size:23px;margin-bottom:10px;}
.article-body p{color:var(--ink-soft);font-size:15px;}
.article-toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--wine);
  background:none;border:0;cursor:pointer;
  padding:14px 30px 26px;
  width:100%;
  justify-content:flex-start;
}
.article-toggle svg{width:13px;height:13px;transition:transform .3s var(--ease);}
.article-card.is-open .article-toggle svg{transform:rotate(180deg);}
.article-full{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s var(--ease);
  padding:0 30px;
}
.article-card.is-open .article-full{padding-bottom:30px;}
.article-full p{color:var(--ink-soft);font-size:15.5px;}
.article-full p:first-child{margin-top:0;}

@media (max-width:860px){
  .articles-grid{grid-template-columns:1fr;}
}

/* ============================================================
   FOOTER — contacts live here on every page
   ============================================================ */
.site-footer{
  background:var(--ink);
  color:rgba(246,239,227,.82);
  padding:90px 0 34px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:56px;
}
.footer-brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--serif);
  color:var(--bone);
  font-size:19px;
  margin-bottom:18px;
}
.footer-brand svg{width:34px;height:34px;}
.footer-col h5{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:18px;
  font-weight:600;
}
.footer-col p, .footer-col a{
  display:block;
  font-size:14.5px;
  color:rgba(246,239,227,.68);
  margin-bottom:12px;
  transition:color .25s var(--ease);
}
.footer-col a:hover{color:var(--bone);}
.footer-col .muted{max-width:280px;color:rgba(246,239,227,.55);}
.footer-social{
  display:flex;gap:12px;margin-top:6px;
}
.footer-social a{
  width:38px;height:38px;
  border:1px solid rgba(246,239,227,.22);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0;
}
.footer-social svg{width:16px;height:16px;}
.footer-social a:hover{border-color:var(--terracotta);color:var(--terracotta);}
.footer-bottom{
  border-top:1px solid rgba(246,239,227,.14);
  padding-top:26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:rgba(246,239,227,.48);
}
.footer-bottom .wheel{color:var(--terracotta);}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  section{padding:80px 0;}
  .hero-inner{padding-top:140px;}
}