/* EKA Forest v1 — tokens from Figma (file JCo7G7wq0O9nfjeMvbZR0s, frame 2024:3) + Notion brand guidelines */
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(fonts/oswald-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Sankofa Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sankofa-display-latin.woff2) format('woff2')}

:root{
  --paper:#c5b8a5;      /* Figma bg = brand secondary #C5B8A5 */
  --brown:#654330;      /* EKA brown (brand primary) */
  --green:#405e3d;      /* EKA green (brand primary, used for accents) */
  --black:#242524;      /* EKA black */
  --white:#e9edef;      /* EKA white */
  --text:#5c3c2b;       /* body copy: EKA brown nudged darker for WCAG AA (4.5:1 on paper) */
  --ph:rgba(101,67,48,.2); /* Figma image blocks: brown @ 20% */
  --radius:29px;
  --f-head:'Oswald',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-disp:'Sankofa Display','Oswald',serif;
  --pad-l:137px; --pad-r:136px; /* Figma content edges: 137 → 1304 on 1440 */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{
  margin:0;color:var(--brown);
  /* Figma effect "eka forest texture": GRAIN radius 1 → tiled noise layered on paper colour */
  background:url(img/grain.png) repeat 0 0/160px,var(--paper);
  font:400 19px/30px var(--f-body);
  -webkit-font-smoothing:antialiased;
}
p,li,address,summary{color:var(--text)}
.nav__group li{color:var(--brown)}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brown);outline-offset:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--brown);color:var(--paper);padding:8px 14px;z-index:200}
.skip:focus{left:8px}

.h2{font:300 40px/50px var(--f-head);text-transform:uppercase;margin:0 0 18px;letter-spacing:0}
.h3{font:400 24px/32px var(--f-head);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 8px}
.h4{font:400 18px/24px var(--f-head);text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px}

/* ---------- Header: logo centered, titles bottom-aligned ---------- */
.site-header{max-width:1440px;margin:0 auto;padding:88px 0 0}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:end}
.nav__group{margin-top:0;display:flex;align-items:flex-end;gap:0}
.nav__group a{font:300 24px/1 var(--f-head);letter-spacing:2.4px;text-transform:uppercase;text-decoration:none;
  /* cancel trailing letter-spacing so gaps measure from last ink */
  margin-inline-end:-2.4px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s}
.nav__group a:hover{background-size:100% 1px}
.nav__group--left{justify-content:flex-end}
.nav__group--left li:first-child{margin-right:83px}   /* legacy; zeroed in v2 */
.nav__group--left li:last-child{margin-right:180px}
.nav__group--right li:first-child{margin-left:119px}
.nav__group--right li:last-child{margin-left:81px}
.nav__logo{display:flex;align-items:flex-end;line-height:0}
.nav__logo img{width:88px;height:auto;display:block;transform:translateY(-8px)} /* optical: SVG bottom sits slightly below caps */

/* ---------- Buttons (Figma components 2024:71 / 2024:124) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0 30px;
  border:1.5px solid var(--brown);color:var(--brown);text-decoration:none;
  font:400 36px/60px var(--f-disp);letter-spacing:7.2px;text-transform:uppercase;
  transition:background-color .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--brown);color:var(--paper)}
.link{font:400 16px/24px var(--f-body);text-underline-offset:4px}

/* ---------- Placeholder image blocks ---------- */
.ph{position:relative;margin:0;background:var(--ph);border-radius:var(--radius);overflow:hidden}
.ph figcaption,.ph span{position:absolute;left:20px;bottom:16px;font:400 13px/18px var(--f-body);
  letter-spacing:.04em}

/* ---------- What is EKA Forest (Figma: img 105/357 606×571, text 836/360 w468) ---------- */
.about{max-width:1440px;margin:0 auto;padding:196px var(--pad-r) 0 105px;
  display:grid;grid-template-columns:606fr 468fr;column-gap:125px;align-items:start}
.ph--about{aspect-ratio:606/571}
.about__text{padding-top:3px}
.about__text .h2{margin-bottom:12px}
.about__text p{margin:0 0 14px}
.about__text p:last-of-type{margin-bottom:20px}
.about__text .btn{margin-top:0}

/* ---------- Stays ---------- */
.stays{max-width:1440px;margin:0 auto;padding:195px var(--pad-r) 0 var(--pad-l)}
.stays__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 48px;margin-top:48px}
.stays .card{padding:28px;background:rgba(233,237,239,.38);border:1px solid rgba(101,67,48,.22);border-radius:28px}
.stays .ph--card{aspect-ratio:4/3;border-radius:18px;min-height:260px}
.ph--card{aspect-ratio:4/5;border-radius:20px}
.card p{font-size:16px;line-height:26px;margin:0}
.stays .card .h3{margin-top:20px}
@media (max-width:719px){.stays__grid{grid-template-columns:1fr;gap:32px}.stays .card{padding:20px}.stays .ph--card{min-height:220px}}

/* ---------- Gallery strip ---------- */
.gallery{max-width:1440px;margin:0 auto;padding:178px 0 0 var(--pad-l)}
.gallery__head{display:flex;justify-content:space-between;align-items:baseline;padding-right:var(--pad-r);flex-wrap:wrap;gap:8px 24px}
.gallery__strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad-r) 18px 0;
  scrollbar-width:thin;scrollbar-color:var(--brown) transparent}
.ph--tile{flex:0 0 300px;height:340px;border-radius:20px;scroll-snap-align:start}
.ph--tall{height:340px;flex-basis:240px}

/* ---------- How to reach (Figma: text 137/1259 w526, img 758/1123 546×571) ---------- */
.reach{max-width:1440px;margin:0 auto;padding:178px var(--pad-r) 0 var(--pad-l);
  display:grid;grid-template-columns:526fr 546fr;column-gap:95px;align-items:center}
.reach__text .h2{margin-bottom:18px}
.reach__text p{margin:0 0 16px}
.reach__list{font-size:16px;line-height:26px;margin:0 0 28px}
.reach__list li{padding-left:18px;position:relative;margin-bottom:6px}
.reach__list li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1.5px;background:currentColor}
.reach__map{position:relative;aspect-ratio:546/571;border-radius:var(--radius);overflow:hidden;background:var(--ph)}
.map-facade{position:absolute;inset:0;display:block;color:var(--brown);text-decoration:none}
.map-facade__art{width:100%;height:100%}
.map-facade__cta{position:absolute;left:20px;top:18px;font:400 14px/20px var(--f-body);border-bottom:1px solid currentColor}
.map-facade:hover .map-facade__cta{opacity:.75}
.reach__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:sepia(.45) saturate(.8) contrast(.95)}

/* ---------- FAQ (Figma: heading 137/1872, boxes 577×70, 12px col gap, 10px row gap) ---------- */
.faq{max-width:1440px;margin:0 auto;padding:178px var(--pad-r) 0 var(--pad-l)}
.faq .h2{margin-bottom:20px}
.faq__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:start}
.faq__col{display:flex;flex-direction:column;gap:10px}
details{border:1px solid var(--brown)}
summary{list-style:none;cursor:pointer;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 20px;font:300 22px/30px var(--f-body)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:0 0 14px;height:14px;
  background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
summary:hover{background:rgba(101,67,48,.08)}
details p{margin:0;padding:0 20px 20px;font-size:17px;line-height:28px}

/* ---------- Footer (not designed in Figma; extended in same style) ---------- */
.site-footer{max-width:1440px;margin:200px auto 0;padding:0 var(--pad-r) 40px var(--pad-l)}
.footer__inner{border-top:1px solid var(--brown);padding-top:56px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
.footer__mark{width:120px;height:auto}
.site-footer ul li,.site-footer address{font:400 16px/28px var(--f-body);font-style:normal}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.footer__legal{margin:56px 0 0;font-size:13px;line-height:20px;opacity:.8}

.wa-float{position:fixed;right:20px;bottom:20px;z-index:50;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--brown);color:var(--paper);box-shadow:0 4px 14px rgba(36,37,36,.25);transition:transform .2s}
.wa-float:hover{transform:scale(1.06)}

/* nav marker */
/* ---------- Tablet ---------- */
@media (max-width:1280px){
  :root{--pad-l:6vw;--pad-r:6vw}
  .nav__group--left li:first-child,.nav__group--right li:last-child{margin:0 0 0 0}
  .nav__group{gap:4vw}
  .nav__group--left li:last-child{margin-right:8vw}
  .nav__group--right li:first-child{margin-left:8vw}
  .about{padding-left:var(--pad-l);column-gap:6vw}
  .reach{column-gap:6vw}
  .stays__grid{grid-template-columns:repeat(2,1fr)}
}
/* ---------- Mobile ---------- */
@media (max-width:760px){
  :root{--pad-l:22px;--pad-r:22px;--radius:20px}
  body{font-size:16px;line-height:26px}
  .h2{font-size:32px;line-height:40px}
  .site-header{padding:28px 14px 0}
  .nav{align-items:end}.nav__group{margin-top:0}
  .nav__group{gap:16px}
  .nav__group a{font-size:14px;line-height:1;letter-spacing:1.4px;margin-inline-end:-1.4px}
  .nav__group--left li:last-child{margin-right:16px}
  .nav__group--right li:first-child{margin-left:16px}
  .nav__logo img{width:44px}
  .about,.reach{grid-template-columns:1fr;row-gap:28px;padding-top:56px}
  .about__text .h2{margin-bottom:20px}
  .about__text p{margin-bottom:18px}
  .reach{padding-top:88px}
  .reach__map{order:-1;aspect-ratio:4/3}
  .stays,.gallery,.faq{padding-top:88px}
  .stays__grid{grid-template-columns:1fr;gap:32px}
  .card .h3{font-size:18px;line-height:24px;margin-top:12px}
  .card p{font-size:14px;line-height:22px}
  .ph--tile{flex-basis:240px;height:280px}.ph--tall{flex-basis:200px;height:280px}
  .btn{font-size:28px;line-height:52px;letter-spacing:5.6px;padding:0 22px}
  .faq__grid{grid-template-columns:1fr;row-gap:10px}
  summary{font-size:17px;line-height:24px;min-height:58px;padding:10px 16px}
  details p{padding:0 16px 16px;font-size:15px;line-height:24px}
  .site-footer{margin-top:110px}
  .footer__inner{grid-template-columns:1fr;gap:28px;padding-top:40px}
  .wa-float{width:46px;height:46px;right:14px;bottom:14px}
  .footer__mark{width:90px;grid-column:1/-1}
}
@media (max-width:360px){.nav__group{gap:10px}.nav__group a{font-size:12.5px;letter-spacing:1px}}

/* ---------- v2: 4-item nav; equal optical gaps + bottom-aligned logo ---------- */
.nav{align-items:end}
.nav__group{margin-top:0!important;align-items:flex-end}
.nav__group li{margin:0!important}
.nav__group{gap:52px}
.nav__group--left{padding-right:76px}
.nav__group--right{padding-left:76px}
.nav__logo{display:flex;align-items:flex-end;line-height:0}
@media (max-width:1280px){
  .nav__group{gap:3vw}
  .nav__group a{font-size:20px;letter-spacing:2px;margin-inline-end:-2px}
  .nav__group--left{padding-right:5vw}
  .nav__group--right{padding-left:5vw}
}
@media (max-width:760px){
  .nav{align-items:end}
  .nav__desk{display:none}
  .nav__group{gap:18px}
  .nav__group a{font-size:14px;line-height:1;letter-spacing:1.4px;margin-inline-end:-1.4px}
  .nav__group--left{padding-right:18px}
  .nav__group--right{padding-left:18px}
  .nav__logo img{width:44px}
}
@media (max-width:360px){
  .nav__group{gap:12px}
  .nav__group a{font-size:12.5px;letter-spacing:1px;margin-inline-end:-1px}
  .nav__group--left{padding-right:12px}
  .nav__group--right{padding-left:12px}
}

/* ---------- v2: inner pages (events, journal) ---------- */
.page{max-width:1440px;margin:0 auto;padding:120px var(--pad-r) 0 var(--pad-l)}
.h1{font:300 56px/64px var(--f-head);text-transform:uppercase;margin:0 0 18px}
.eyebrow,.event__meta,.post-card__date,.post__meta,.crumb{font:300 16px/24px var(--f-head);letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px;color:var(--brown)}
.crumb a{text-decoration:none}.crumb a::before{content:"← "}
.page__intro{max-width:60ch}
.page__note{margin-top:48px;font-size:16px}
.events__section{margin-top:56px}
.events__section + .events__section{margin-top:72px}
.events__section-title{font:400 24px/32px var(--f-head);text-transform:uppercase;letter-spacing:.06em;margin:0;color:var(--brown)}
.events__list{margin-top:24px;display:grid;gap:56px}
.events__empty{display:none;font-size:16px;line-height:26px;margin:0;font-style:italic}
.events__list:not(:has(.event)) .events__empty{display:block}
.event{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start;border-top:1px solid rgba(101,67,48,.35);padding-top:48px}
.ph--event{aspect-ratio:4/5}
.event .h2{margin-bottom:6px}
.event__host{font-style:italic;margin-bottom:20px}
.event__threads{margin:8px 0 22px;display:grid;gap:6px}
.event__threads li{font-size:17px;line-height:26px}
.event__threads strong{font:400 18px/26px var(--f-head);text-transform:uppercase;letter-spacing:.08em;color:var(--green);margin-right:8px}
.event__guides,.event__fee{font-size:16px;line-height:26px;margin-bottom:6px}
.event__fee{margin-bottom:28px;color:var(--brown);font-weight:500}
.posts{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.post-card .ph--card{aspect-ratio:4/3;margin-bottom:18px}
.post-card .h3 a{text-decoration:none}.post-card .h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.post-card p{font-size:16px;line-height:26px}
.post{max-width:780px;margin:0 auto}
.post .h1{font-size:48px;line-height:56px}
.ph--post{aspect-ratio:16/9;margin:28px 0 40px}
.prose h2{font:300 28px/36px var(--f-head);text-transform:uppercase;margin:44px 0 12px;color:var(--brown)}
.prose p,.prose li{font-size:18px;line-height:31px}
.prose ul{list-style:disc;padding-left:1.2em;margin:0 0 1em}
.prose a{text-underline-offset:4px}
.post__cta{margin-top:56px;padding:36px 0 0;border-top:1px solid rgba(101,67,48,.35)}
@media (max-width:1280px){.posts{grid-template-columns:repeat(2,1fr)}.event{gap:6vw}}
@media (max-width:760px){
  .page{padding-top:56px}
  .h1,.post .h1{font-size:36px;line-height:44px}
  .event{grid-template-columns:1fr;gap:24px;padding-top:28px}
  .ph--event{aspect-ratio:4/3}
  .posts{grid-template-columns:1fr;gap:40px}
  .prose p,.prose li{font-size:16px;line-height:27px}
  .prose h2{font-size:22px;line-height:30px;margin-top:32px}
}

/* ---------- Sample events ---------- */
.sample-tag{display:inline-block;border:1.5px solid var(--brown);padding:6px 14px;font:400 14px/20px var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:var(--brown);background:rgba(233,237,239,.55);border-radius:999px;margin:0 0 12px}
.btn--sample{display:inline-flex;align-items:center;justify-content:center;padding:0 30px;border:1.5px dashed var(--brown);color:var(--brown);font:400 36px/60px var(--f-disp);letter-spacing:7.2px;text-transform:uppercase;opacity:.75;cursor:not-allowed;line-height:1.3;padding-top:8px;padding-bottom:8px;font-size:18px;letter-spacing:4px}
.event__sample-cta{margin-top:20px}
@media (max-width:760px){.btn--sample{font-size:15px;letter-spacing:3px;padding:0 18px}}

/* nav optical nudge: lift logo so bottoms match link titles */
.nav__logo img{transform:translateY(-8px)}
@media (max-width:760px){.nav__logo img{transform:translateY(-6px)}}

/* ---------- Mobile nav v3: one balanced row ----------
   Equal outer margins (BOOK and CONTACT touch the same side padding)
   and equal gaps between all five items, so the row reads centered. */
@media (max-width:760px){
  .site-header{padding:28px 22px 0}
  .nav{display:flex;justify-content:space-between;align-items:flex-end}
  .nav__group{display:contents}
  .nav__group li{margin:0!important}
  .nav__group a{display:block;font-size:14px;line-height:1;letter-spacing:1.4px;margin-inline-end:-1.4px}
  .nav__logo img{width:44px;transform:translateY(0)}
}
@media (max-width:360px){
  .site-header{padding:24px 16px 0}
  .nav__group a{font-size:12.5px;letter-spacing:1px;margin-inline-end:-1px}
}

/* ---------- Mobile nav v4: logo at exact horizontal center ----------
   Two equal side columns; BOOK/CONTACT pinned to the outer margins,
   EVENTS/JOURNALS an equal distance from the logo. */
@media (max-width:760px){
  .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:end}
  .nav__group{display:flex;align-items:flex-end;justify-content:space-between;min-width:0}
  .nav__group--left{padding-right:18px}
  .nav__group--right{padding-left:18px}
}
@media (max-width:360px){
  .nav__group--left{padding-right:12px}
  .nav__group--right{padding-left:12px}
}

/* ---------- Mobile nav v5: middle titles centered between edge title and logo ----------
   A zero-width spacer next to the logo turns space-between into equal gaps
   (BOOK | gap | JOURNALS | gap | logo, logo | gap | EVENTS | gap | CONTACT). */
@media (max-width:760px){
  .nav__group--left,.nav__group--right{padding:0}
  .nav__group--left::after,.nav__group--right::before{content:"";width:0;flex:none}
}