/* =========================================================
   STHITI LIMITED — EARTHY BIOPHILIC PALETTE
   cream · sand · deep forest green · terracotta · warm taupe
   ========================================================= */

:root{
  --cream: #F4EFE6;
  --sand: #E8DFCD;
  --paper: #FBF8F1;
  --white: #FFFFFF;
  --forest: #1F5F3A;
  --forest-d: #154428;
  --forest-bright: #2A7A4D;
  --olive: #6B7F3D;
  --sage: #9DA88B;
  --sage-l: #C5CEB9;
  --terracotta: #B85C38;
  --terracotta-d: #9A4A2C;
  --clay: #D89171;
  --charcoal: #2A2520;
  --taupe: #7A6F5E;
  --taupe-l: #A89B86;
  --rule: #D4CDB8;
  --black: var(--charcoal);
  --mid: var(--taupe);
  --light: var(--sand);
  --accent: var(--forest);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;line-height:1.65;color:var(--charcoal);background:var(--cream);font-weight:400;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--forest);color:var(--cream);}

/* NAV — logo without border, larger, brighter */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 56px;background:rgba(244,239,230,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(212,205,184,.55);transition:padding .3s ease,background .3s ease;}
nav#nav.scrolled{padding:12px 56px;background:rgba(244,239,230,.98);}
.nav-logo{display:inline-flex;align-items:center;gap:18px;text-decoration:none;line-height:1;}
.nav-logo img{
  height:72px;width:auto;display:block;
  background:transparent;border:none;border-radius:0;padding:0;
  transition:height .3s ease;
  filter:saturate(1.15) brightness(1.05);
}
nav.scrolled .nav-logo img{height:58px;}
.nav-logo-text{
  font-family:'Playfair Display',serif;
  font-size:1.85rem;font-weight:700;
  color:var(--forest-bright);
  letter-spacing:.005em;line-height:1;white-space:nowrap;
  transition:font-size .3s ease;
  text-shadow:0 0 1px rgba(31,95,58,.05);
}
nav.scrolled .nav-logo-text{font-size:1.5rem;}
.nav-links{display:flex;gap:34px;list-style:none;align-items:center;}
.nav-links a{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal);font-weight:500;padding:6px 0;border-bottom:1px solid transparent;transition:all .25s ease;}
.nav-links a:hover{border-bottom-color:var(--terracotta);color:var(--terracotta);}
.nav-cta{padding:10px 22px!important;border:1.5px solid var(--terracotta)!important;color:var(--terracotta)!important;border-radius:2px;}
.nav-cta:hover{background:var(--terracotta)!important;color:var(--cream)!important;border-bottom-color:var(--terracotta)!important;}
.nav-hamburger{display:none;flex-direction:column;gap:5px;width:26px;height:22px;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;}
.nav-hamburger span{height:2px;background:var(--charcoal);width:100%;transition:.3s;display:block;border-radius:1px;}

.mobile-nav{display:none;position:fixed;top:0;left:0;right:0;background:var(--paper);padding:90px 32px 36px;flex-direction:column;gap:22px;z-index:90;border-bottom:1px solid var(--rule);transform:translateY(-100%);transition:transform .35s ease;}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal);padding-bottom:14px;border-bottom:1px solid var(--rule);}

@media(max-width:900px){
  nav#nav,nav#nav.scrolled{padding:14px 20px;}
  .nav-links{display:none;}
  .nav-hamburger{display:flex;}
  .mobile-nav{display:flex;}
  .nav-logo img{height:54px;}
  .nav-logo-text{font-size:1.35rem;}
}

h1,h2,h3,h4{font-family:'Playfair Display',serif;font-weight:300;color:var(--charcoal);line-height:1.15;letter-spacing:-.012em;}
h1 em,h2 em,h3 em,h4 em{font-style:italic;color:var(--terracotta);}
p{color:var(--taupe);line-height:1.85;}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;font-weight:500;border:1.5px solid var(--forest);color:var(--forest);background:transparent;transition:all .3s;border-radius:2px;}
.btn:hover{background:var(--forest);color:var(--cream);}
.btn-fill{background:var(--terracotta);color:var(--cream);border-color:var(--terracotta);}
.btn-fill:hover{background:var(--terracotta-d);border-color:var(--terracotta-d);color:var(--cream);}
.btn-ghost{border:1px solid var(--rule);color:var(--charcoal);}
.btn-ghost:hover{border-color:var(--forest);color:var(--forest);background:transparent;}

section{padding:96px 56px;}
section.alt{background:var(--sand);}
section.dark{background:var(--forest);color:var(--cream);}
section.dark h1,section.dark h2,section.dark h3{color:var(--cream);}
section.dark p{color:rgba(244,239,230,.78);}
section.dark em{color:var(--clay);}

.eyebrow{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--olive);font-weight:500;margin-bottom:20px;}
.eyebrow::before{content:'';display:inline-block;width:36px;height:1px;background:var(--olive);vertical-align:middle;margin-right:14px;}

footer{background:var(--sand);padding:60px 56px 36px;border-top:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;}
.footer-logo{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--forest);display:flex;align-items:center;gap:10px;}
.footer-copy{font-size:.72rem;color:var(--taupe);letter-spacing:.04em;line-height:1.7;max-width:640px;}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.footer-links a{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal);padding:6px 0;border-bottom:1px solid transparent;transition:.25s;}
.footer-links a:hover{color:var(--terracotta);border-bottom-color:var(--terracotta);}
.footer-socials{display:flex;gap:14px;margin-top:6px;}
.footer-socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);display:inline-flex;align-items:center;justify-content:center;color:var(--forest);transition:.25s;}
.footer-socials a:hover{background:var(--forest);color:var(--cream);border-color:var(--forest);}
.footer-socials a[aria-disabled="true"]{opacity:.4;cursor:not-allowed;}
.footer-socials svg{width:16px;height:16px;fill:currentColor;}

.page-hero{padding:200px 56px 80px;background:var(--paper);border-bottom:1px solid var(--rule);}
.page-hero h1{font-size:clamp(2.2rem,5vw,4.2rem);max-width:900px;margin-bottom:24px;}
.page-hero p{font-size:1.05rem;max-width:680px;color:var(--taupe);}

.container{max-width:1280px;margin:0 auto;}
.divider{width:60px;height:1px;background:var(--rule);margin:32px 0;}

.admin-fab{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:50%;background:var(--charcoal);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:.65rem;letter-spacing:.1em;opacity:0;pointer-events:none;transition:opacity .3s;z-index:200;border:1px solid var(--forest);}
.admin-fab.visible{opacity:.85;pointer-events:auto;}
.admin-fab:hover{opacity:1;background:var(--forest);}

/* SOCIAL SHARE BAR (project pages, journal entries) */
.share-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.share-bar .share-label{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--taupe);font-weight:500;margin-right:6px;}
.share-bar a, .share-bar button{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--rule);background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--forest);transition:.25s;cursor:pointer;
}
.share-bar a:hover, .share-bar button:hover{background:var(--forest);color:var(--cream);border-color:var(--forest);}
.share-bar svg{width:14px;height:14px;fill:currentColor;}
.share-bar .copy-feedback{font-size:.7rem;color:var(--forest);margin-left:6px;opacity:0;transition:opacity .25s;}
.share-bar .copy-feedback.visible{opacity:1;}

@media(max-width:900px){
  section{padding:64px 24px;}
  .page-hero{padding:140px 24px 56px;}
  footer{padding:48px 24px 28px;}
}