/* ===== Agetha Child — "simple." brand layer =====
   Emily's own brand skin, layered on top of the kit's css/design.css.
   Everything is scoped to the .simple wrapper that the page content carries,
   so the kit's gold palette stays intact for client sites on this theme.

   Rule of the house: no CSS in page content — this file is the design layer,
   the page holds clean markup only. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500;600&display=swap');

.simple{
  --ink:#141310; --ink-soft:#4a4740; --cream:#f8f5ef; --cream-2:#f1ece2;
  --rule:#ddd6c8; --accent:#1f4d3a;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--cream); color:var(--ink);
  font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased;
  padding-bottom:6px;
}
.simple *{box-sizing:border-box}
.simple .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- type ---------- */
.simple h1,.simple h2,.simple h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px}
.simple h1{font-size:clamp(32px,6vw,56px);line-height:1.05}
.simple h2{font-size:clamp(24px,3.4vw,34px);line-height:1.15}
.simple h3{font-size:19px;line-height:1.3}
.simple p{margin:0 0 14px;color:var(--ink-soft)}
.simple .lead{font-size:clamp(17px,2.1vw,20px);color:var(--ink-soft);max-width:56ch}
.simple .kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 18px;font-weight:500}
.simple a{color:inherit}
.simple .num{font-family:var(--serif);font-size:13px;color:var(--ink-soft);display:block;margin-bottom:8px}

/* ---------- buttons (ink, square — the brand's own, not the kit's gold) ---------- */
.simple .btn,.simple .btn.ghost{
  display:inline-block;padding:11px 18px;border-radius:2px;text-decoration:none;
  font-size:14.5px;font-weight:500;border:1px solid var(--ink);background:var(--ink);color:var(--cream);
}
.simple .btn:hover{background:#000;border-color:#000;color:var(--cream)}
.simple .btn.ghost{background:transparent;color:var(--ink)}
.simple .btn.ghost:hover{background:var(--ink);color:var(--cream)}
.simple .btn-row{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 0}

/* ---------- hero ---------- */
.simple .hero{padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,68px);background:var(--cream);min-height:0;display:block;position:static}
.simple .hero::before{content:none}
.simple .hero .lead{margin-top:20px}
.simple .sig{margin:34px 0 0;font-size:14.5px;color:var(--ink-soft);display:flex;align-items:center;gap:10px}
.simple .sig .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}

/* ---------- sections ---------- */
.simple .block{padding:clamp(44px,6.5vw,76px) 0;border-top:1px solid var(--rule);background:transparent}
.simple .grid{display:grid;gap:26px;grid-template-columns:repeat(3,1fr);margin-top:34px}
.simple .card{background:transparent;border:0;border-top:2px solid var(--ink);border-radius:0;padding:18px 0 0;box-shadow:none;height:auto;display:block}
.simple .card:hover{transform:none;box-shadow:none}
.simple .card p{color:var(--ink-soft);font-size:15.5px}

/* ---------- how it works ---------- */
.simple .steps{margin-top:30px;display:grid;gap:0}
.simple .step{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--rule)}
.simple .step:first-child{border-top:1px solid var(--rule)}
.simple .step .n{font-family:var(--serif);font-size:26px;line-height:1;color:var(--accent);padding-top:2px}
.simple .step p{color:var(--ink-soft);margin:4px 0 0}

/* ---------- quiet band ---------- */
.simple .band{background:var(--cream-2);border-top:1px solid var(--rule);padding:clamp(40px,5.5vw,62px) 0}
.simple .band p{font-family:var(--serif);font-size:clamp(20px,2.6vw,27px);line-height:1.35;max-width:24ch;margin:0;color:var(--ink)}

/* ---------- contact ---------- */
.simple .contact-list{list-style:none;padding:0;margin:22px 0 0;font-size:16px}
.simple .contact-list li{padding:12px 0;border-top:1px solid var(--rule);display:flex;gap:14px;flex-wrap:wrap}
.simple .contact-list b{font-weight:600;min-width:110px;color:var(--ink)}

/* ---------- page head (inner pages carry their own title, so Astra's is hidden) ---------- */
.simple .page-head{background:var(--cream-2);border-bottom:1px solid var(--rule);padding:clamp(38px,5.5vw,68px) 0}
.simple .page-head h1{font-size:clamp(30px,5vw,48px);line-height:1.08;margin:0 0 12px}
.simple .page-head p{margin:0;max-width:62ch;color:var(--ink-soft)}
.simple .card h3 a{text-decoration:none}
.simple .card h3 a:hover{text-decoration:underline}
.simple .contact-list a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.simple .contact-list a:hover{border-bottom-color:var(--ink)}

/* Astra underlines content links (accessibility default). Our buttons are links but
   must not read as underlined text, so take the underline off the whole layer. */
.entry-content .simple a{text-decoration:none}
.entry-content .simple a:hover{text-decoration:none}
.entry-content .simple .contact-list a{border-bottom:1px solid var(--rule)}

/* full bleed ----------
   Astra boxes page content into a container, so heroes and bands stopped short of
   the edges. Rather than pull the layer out with 100vw (which fights the scrollbar),
   let Astra's container go fluid on any page that carries our layer, and keep the
   insetting on Astra's own pages. */
.ast-container:has(.simple){max-width:none!important;padding-left:0!important;padding-right:0!important}
/* Astra's primary column is 70% wide when there is no sidebar; on our pages the
   layer IS the page, so let it take the full width. */
.site-content .content-area:has(.simple){width:100%!important;max-width:none!important}
/* Astra pads the article itself; our sections carry their own padding. */
.ast-article-single:has(.simple){padding-left:0!important;padding-right:0!important}
.simple{margin-left:0;margin-right:0;max-width:none}

/* Astra prints the page title above the content. Every page we build carries its
   own heading in the hero or the page head, so drop the duplicate — but only on
   pages that actually carry this layer, and only where :has() is supported. */
.entry-header:has(~ .entry-content .simple){display:none}

/* ===== site chrome (Astra) — everything outside the page layer =====
   This block is site-wide on purpose: on this site the brand owns the header and
   the footer too, so Astra's default blue accents and its "Powered by" credit go. */
:root{
  --ink:#141310; --ink-soft:#4a4740; --cream:#f8f5ef; --cream-2:#f1ece2; --rule:#ddd6c8;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ast-global-color-0:#141310; --ast-global-color-1:#141310;
  --ast-global-color-2:#141310; --ast-global-color-3:#4a4740;
  --ast-global-color-4:#f8f5ef; --ast-global-color-5:#f8f5ef;
}
body{background:var(--cream)}
.main-header-bar,.ast-primary-header-bar{background:var(--cream);border-bottom:1px solid var(--rule)}
.site-title a{font-family:var(--serif);font-size:1.32rem;color:var(--ink);text-decoration:none}
.site-title a::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--ink);margin-right:9px;vertical-align:middle;transform:translateY(-1px)}
.main-header-menu .menu-link,.ast-header-navigation-arrow{color:var(--ink-soft);font-family:var(--sans);font-size:.94rem}
.main-header-menu .menu-link:hover,.main-header-menu .current-menu-item > .menu-link{color:var(--ink)}
[data-section="section-header-mobile-trigger"] .ast-mobile-menu-trigger-minimal{color:var(--ink)}
[data-section="section-header-mobile-trigger"] svg{fill:var(--ink)}
/* Astra's credit bar is replaced by the theme's own footer (functions.php).
   !important + id specificity: Astra prints its own inline CSS after this file. */
#colophon .site-below-footer-wrap,.ast-small-footer{display:none!important}
.site-footer a{color:var(--ink-soft)}
.simple-foot{background:var(--cream-2);border-top:1px solid var(--rule);padding:32px 24px;font-size:14px;color:var(--ink-soft)}
.simple-foot .wrap{max-width:1080px;margin:0 auto;display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.simple-foot .fbrand{display:flex;align-items:baseline;gap:9px;font-family:var(--serif);font-size:19px;color:var(--ink);text-decoration:none}
.simple-foot .dot{width:11px;height:11px;border-radius:50%;background:var(--ink);display:inline-block}
.simple-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.simple-foot a{color:var(--ink-soft);text-decoration:none}
.simple-foot a:hover{color:var(--ink)}

/* ---------- mobile ---------- */
@media(max-width:820px){
  .simple .grid{grid-template-columns:1fr;gap:20px}
  .simple .step{grid-template-columns:44px 1fr;gap:14px}
  .simple h1{font-size:clamp(30px,9vw,40px)}
  .simple .page-head h1{font-size:clamp(28px,8vw,36px)}
}