/* =========================================================
   TureSar — Design System
   Palette: Ink #1B2E28, Moss #3F5A48, Sage #8FA98B,
            Honey #D4A24C, Sand #F6F2E9, Line #E4DDC9
   Display: Fraunces | Body: Karla | Utility: JetBrains Mono
   ========================================================= */

:root{
  --ink:#1B2E28;
  --moss:#3F5A48;
  --moss-dark:#2C4136;
  --sage:#8FA98B;
  --sage-light:#DCE7DA;
  --honey:#D4A24C;
  --honey-dark:#B9853A;
  --sand:#F6F2E9;
  --card:#FFFFFF;
  --line:#E4DDC9;
  --text-soft:#5B6A5F;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:8px;
  --shadow-soft:0 12px 30px -14px rgba(27,46,40,0.18);
  --shadow-lift:0 20px 45px -16px rgba(27,46,40,0.28);
  --max:1180px;
}

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

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:'Karla',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  color:var(--ink);
  line-height:1.12;
  margin:0 0 0.5em;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5vw,3.8rem); font-weight:500;}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);}
h3{font-size:clamp(1.25rem,2.2vw,1.55rem);}
p{margin:0 0 1.1em; color:var(--ink);}
a{color:var(--moss); text-decoration:none;}
img{max-width:100%; display:block;}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
  color:var(--honey-dark);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px; background:var(--honey-dark);
  display:inline-block;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em;
  font-weight:600;
  padding:14px 26px;
  border-radius:100px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{background:var(--moss); color:#fff; box-shadow:var(--shadow-soft);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); background:var(--moss-dark);}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:#fff;}
.btn-honey{background:var(--honey); color:var(--ink);}
.btn-honey:hover{background:var(--honey-dark); transform:translateY(-2px);}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,242,233,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  max-width:var(--max); margin:0 auto;
}
.brand{
  font-family:'Fraunces',serif; font-size:1.5rem; font-weight:600;
  color:var(--ink); display:flex; align-items:center; gap:10px;
}
.brand .mark{
  width:34px; height:34px; border-radius:50%;
  background:conic-gradient(from 140deg, var(--moss), var(--sage), var(--honey), var(--moss));
  display:inline-block;
}
.nav-links{display:flex; gap:34px; align-items:center; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-family:'JetBrains Mono',monospace; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--ink);
  font-weight:600; position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--honey); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:all .3s ease;}

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:70px 0 0 0; background:var(--sand);
    flex-direction:column; padding:40px 28px; gap:26px;
    transform:translateX(100%); transition:transform .35s ease;
    border-top:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
}

/* ---------- Wave divider (signature element) ---------- */
.wave-divider{width:100%; height:46px; display:block; margin:-1px 0;}
.wave-divider path{fill:var(--sand);}
.wave-divider.flip path{fill:var(--moss-dark);}

/* ---------- Hero ---------- */
.hero{
  padding:70px 0 60px;
  background:var(--sand);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.hero h1{margin-bottom:0.4em;}
.hero-lede{font-size:1.15rem; color:var(--text-soft); max-width:46ch; margin-bottom:1.6em;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-art{position:relative;}
.hero-art svg{width:100%; height:auto; filter:drop-shadow(var(--shadow-lift));}
.hero-stats{display:flex; gap:34px; margin-top:44px; flex-wrap:wrap;}
.hero-stats div{font-family:'JetBrains Mono',monospace;}
.hero-stats strong{display:block; font-family:'Fraunces',serif; font-size:1.9rem; color:var(--moss-dark);}
.hero-stats span{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-soft);}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1;}
}

/* ---------- Section shell ---------- */
.section{padding:76px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.section-head p{color:var(--text-soft); max-width:52ch; margin:10px 0 0;}
.section-dark{background:var(--moss-dark); color:#fff;}
.section-dark h2, .section-dark .eyebrow{color:#fff;}
.section-dark .eyebrow{color:var(--honey);}
.section-dark p{color:#DCE6DF;}

/* ---------- Article Cards ---------- */
.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.card{
  background:var(--card); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-soft);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift);}
.card-media{aspect-ratio:4/3; background:var(--sage-light); overflow:hidden;}
.card-media svg, .card-media img{width:100%; height:100%; object-fit:cover;}
.card-body{padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.tag{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:0.68rem;
  text-transform:uppercase; letter-spacing:0.06em; font-weight:700;
  background:var(--sage-light); color:var(--moss-dark);
  padding:5px 12px; border-radius:100px; width:fit-content;
}
.card-body h3 a{color:var(--ink);}
.card-body h3 a:hover{color:var(--moss);}
.card-meta{font-family:'JetBrains Mono',monospace; font-size:0.74rem; color:var(--text-soft); display:flex; gap:14px; margin-top:auto; padding-top:10px;}
.card-excerpt{color:var(--text-soft); font-size:0.96rem;}

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

/* ---------- Ad slots ---------- */
.ad-slot{
  background:var(--card); border:1.5px dashed var(--line);
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  min-height:120px; margin:44px 0; color:var(--text-soft);
  font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.08em;
}
.ad-slot.ad-banner{min-height:100px;}
.ad-slot.ad-square{min-height:250px; max-width:300px; margin-left:auto; margin-right:auto;}
.ad-slot.ad-inline{min-height:90px;}

/* ---------- Article Layout ---------- */
.article-hero{padding:56px 0 20px;}
.article-hero .eyebrow{margin-bottom:16px;}
.article-hero h1{max-width:20ch;}
.article-meta{display:flex; gap:22px; flex-wrap:wrap; margin:22px 0 30px; font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--text-soft);}
.article-meta strong{color:var(--ink);}
.article-cover{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lift); margin-bottom:10px;}
.article-cover svg{width:100%; height:auto; display:block;}

.article-layout{display:grid; grid-template-columns:1fr 300px; gap:60px; align-items:start;}
.article-body h2{margin-top:1.6em; font-size:1.7rem;}
.article-body h3{margin-top:1.3em;}
.article-body ul, .article-body ol{padding-left:1.3em; margin-bottom:1.3em;}
.article-body li{margin-bottom:0.5em;}
.article-body p{font-size:1.05rem; color:#33453a;}
.pullquote{
  font-family:'Fraunces',serif; font-size:1.4rem; font-style:italic; color:var(--moss-dark);
  border-left:3px solid var(--honey); padding:6px 0 6px 24px; margin:36px 0;
}
.sidebar{position:sticky; top:100px; display:flex; flex-direction:column; gap:34px;}
.sidebar-box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px;}
.sidebar-box h4{font-size:1rem; margin-bottom:14px;}
.sidebar-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.sidebar-list a{color:var(--ink); font-size:0.92rem; font-weight:600;}
.sidebar-list a:hover{color:var(--moss);}
.author-box{display:flex; gap:14px; align-items:center; background:var(--sage-light); border-radius:var(--radius-md); padding:20px;}
.author-box .avatar{width:52px; height:52px; border-radius:50%; background:var(--moss); flex-shrink:0;}
.author-box strong{display:block; font-family:'Fraunces',serif; font-size:1.05rem;}
.author-box span{font-size:0.82rem; color:var(--text-soft);}

@media (max-width:940px){
  .article-layout{grid-template-columns:1fr;}
  .sidebar{position:static; flex-direction:row; overflow-x:auto;}
  .sidebar-box{min-width:260px;}
}

/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--moss-dark); border-radius:var(--radius-lg);
  padding:56px; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
  color:#fff;
}
.newsletter h3{color:#fff; margin-bottom:6px;}
.newsletter p{color:#DCE6DF; margin:0;}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter-form input{
  padding:14px 18px; border-radius:100px; border:none; width:260px; max-width:100%;
  font-family:'Karla',sans-serif; font-size:0.95rem;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:#CBD6CF; padding:70px 0 30px; margin-top:80px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px;}
.footer-grid h5{font-family:'JetBrains Mono',monospace; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em; color:#8FA98B; margin-bottom:18px;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.footer-grid a{color:#CBD6CF; font-size:0.93rem;}
.footer-grid a:hover{color:var(--honey);}
.footer-brand p{color:#8B978E; max-width:32ch; font-size:0.92rem;}
.footer-bottom{border-top:1px solid #33453A; padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:#8B978E; font-family:'JetBrains Mono',monospace;}

@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Static pages (about/contact/policy) ---------- */
.page-hero{padding:64px 0 40px; border-bottom:1px solid var(--line);}
.prose{max-width:74ch;}
.prose h2{margin-top:1.7em;}
.prose ul{padding-left:1.3em;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.form-field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.form-field label{font-family:'JetBrains Mono',monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-soft);}
.form-field input, .form-field textarea{
  padding:14px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  font-family:'Karla',sans-serif; font-size:0.98rem; background:var(--card);
}
.form-field input:focus, .form-field textarea:focus{outline:2px solid var(--honey); outline-offset:1px; border-color:var(--honey);}
.info-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:20px;}
.info-list li{display:flex; gap:14px; align-items:flex-start;}
.info-list .dot{width:8px; height:8px; border-radius:50%; background:var(--honey); margin-top:8px; flex-shrink:0;}

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

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--honey); outline-offset:2px;
}

/* fade-in on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}