/* =========================================================
   Sacred Dearmoring — A Guide
   Design tokens. Everything below this block is structure
   and should rarely need editing per _client-profile.md.
   ========================================================= */
:root{
  /* base surfaces */
  --bg:        #F6F4F2;   /* alabaster warm-white */
  --bg-alt:    #EFEAE6;   /* stone, for section shifts */
  --bg-deep:   #E6DFDA;   /* deeper stone, for cards/quote surface */

  /* ink */
  --ink:       #2B2436;   /* deep aubergine-charcoal, never pure black */
  --ink-soft:  #5B5468;   /* muted plum-grey, secondary text */
  --ink-faint: #8A8394;   /* tertiary text, captions */

  /* accents */
  --rose:      #A8677A;   /* opening / heart */
  --rose-deep: #8C4F60;   /* rose, pressed/hover state */
  --sage:      #7C8F87;   /* breath / water */
  --sage-deep: #63756D;

  /* geometry linework only, used sparingly and at low opacity */
  --geo:       #C9A66B;

  --line:      rgba(43,36,54,0.12);
  --line-soft: rgba(43,36,54,0.07);

  --shadow: 0 1px 2px rgba(43,36,54,0.06), 0 8px 24px rgba(43,36,54,0.06);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif;

  --measure: 40rem;      /* ~680px reading column */
  --measure-wide: 60rem;

  --radius: 3px;
  --speed: 220ms;
}

/* =========================================================
   Reset
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%;display:block}
a{color:inherit}
ul{margin:0;padding:0}
h1,h2,h3,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

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

/* =========================================================
   Base
   ========================================================= */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  width:100%;
  max-width:72rem;
  margin-inline:auto;
  padding-inline:1.5rem;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--ink);
}

h1{font-size:clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem); font-weight:500}
h2{font-size:clamp(1.5rem, 1.3rem + 1vw, 2.1rem)}
h3{font-size:1.2rem}

p{color:var(--ink-soft)}
p + p{margin-top:1.1em}

.lede{
  font-size:clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color:var(--ink-soft);
  max-width:38rem;
}

a.inline-link{
  color:var(--rose-deep);
  text-decoration:underline;
  text-decoration-color:rgba(140,79,96,0.35);
  text-underline-offset:0.2em;
}
a.inline-link:hover{text-decoration-color:currentColor}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:var(--bg);
  padding:0.75rem 1.25rem; z-index:200;
}
.skip-link:focus{
  left:1rem; top:1rem;
}

:focus-visible{
  outline:2px solid var(--rose-deep);
  outline-offset:3px;
}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  padding-block:1.1rem;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
  position:relative;
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.brand{
  text-decoration:none;
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:600;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.brand-sub{
  font-family:var(--font-body);
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.03em;
  color:var(--ink-faint);
}
.nav-toggle{
  display:none;
  font-size:0.95rem;
  font-weight:500;
  padding:0.5rem 0.75rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem 1.3rem;
  list-style:none;
}
.site-nav a{
  text-decoration:none;
  font-size:0.94rem;
  font-weight:500;
  color:var(--ink-soft);
  padding-block:0.3rem;
  border-bottom:1px solid transparent;
  transition:color var(--speed), border-color var(--speed);
}
.site-nav a:hover{color:var(--rose-deep); border-color:var(--rose-deep)}
.site-nav a[aria-current="page"]{color:var(--ink); border-color:var(--geo)}

@media (max-width:820px){
  .nav-toggle{display:inline-block}
  .site-nav ul{
    display:none;
    position:absolute;
    left:0; right:0; top:100%;
    background:var(--bg);
    border-bottom:1px solid var(--line-soft);
    flex-direction:column;
    padding:1rem 1.5rem 1.4rem;
    gap:0.7rem;
    box-shadow:var(--shadow);
  }
  .site-nav.open ul{display:flex}
}

/* =========================================================
   Sections
   ========================================================= */
section{padding-block:clamp(3rem, 2.4rem + 3vw, 5.5rem)}
.shift{background:var(--bg-alt)}

.hero{
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.hero .wrap{max-width:52rem}
.hero h1{max-width:22ch}
.hero .lede{margin-top:1.1rem}
.hero-wide .wrap{max-width:64rem}
.hero-wide h1{max-width:34ch}
.hero-wide .lede{max-width:40rem}

.hero-arc{
  position:absolute;
  right:-8%;
  top:50%;
  transform:translateY(-50%);
  width:min(46vw, 34rem);
  opacity:0.55;
  pointer-events:none;
  z-index:0;
}
.hero .wrap{position:relative; z-index:1}

/* generic content column (service pages, hub, guide index) */
.col{
  max-width:var(--measure);
}
.col-wide{max-width:var(--measure-wide)}

/* article body, and any generic content column (service pages, hub,
   guide index) sharing the same rhythm via .col */
.article{max-width:var(--measure)}
.article h2, .col h2{margin-top:2.4em}
.article h2:first-child, .col h2:first-child{margin-top:0}
.article h3, .col h3{margin-top:1.8em; font-size:1.05rem}
.article p, .col p{margin-top:1.1em; max-width:none}
.article ul, .col ul{margin-top:1.1em; padding-left:1.3em}
.article li, .col li{color:var(--ink-soft); margin-top:0.5em}
.article li::marker, .col li::marker{color:var(--geo)}
.article strong, .col strong{color:var(--ink); font-weight:600}
.article em, .col em{font-style:italic}
.col h3:first-child{margin-top:0}

/* opening-arc divider: the signature element, used only at
   turn-points in the copy (problem -> release) and behind
   quotes/CTAs. Not decoration on every section. */
.arc-divider{
  display:flex;
  justify-content:center;
  margin-block:clamp(2.4rem, 2rem + 2vw, 4rem);
  opacity:0.7;
}
.arc-divider svg{width:5.5rem; height:auto}

/* pull quote */
.quote{position:relative; overflow:hidden}
.quote .wrap{max-width:44rem; position:relative; z-index:1}
.quote-arc{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(80vw, 46rem);
  opacity:0.16;
  pointer-events:none;
}
blockquote{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  line-height:1.4;
  color:var(--ink);
  text-align:center;
}
blockquote .q::before{content:"\201C"}
blockquote .q::after{content:"\201D"}
blockquote cite{
  display:block;
  margin-top:1rem;
  font-family:var(--font-body);
  font-style:normal;
  font-weight:500;
  font-size:0.85rem;
  color:var(--ink-faint);
}

/* closing / CTA */
.closing{position:relative; overflow:hidden}
.closing .wrap{max-width:36rem; text-align:center; position:relative; z-index:1}
.closing-arc{
  position:absolute; left:50%; bottom:-30%;
  transform:translateX(-50%);
  width:min(90vw, 50rem);
  opacity:0.12;
  pointer-events:none;
}
.closing p{margin-inline:auto}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
  justify-content:center;
  margin-top:1.8rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.85rem 1.5rem;
  border-radius:var(--radius);
  background:var(--rose-deep);
  color:var(--bg);
  text-decoration:none;
  font-weight:500;
  font-size:0.98rem;
  transition:background var(--speed), transform var(--speed);
}
.btn:hover{background:var(--ink)}
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn.ghost:hover{border-color:var(--rose-deep); color:var(--rose-deep)}

/* honest-limitation / trust callout */
.callout{
  background:var(--bg-deep);
  border-left:3px solid var(--sage-deep);
  padding:1.4rem 1.6rem;
  border-radius:var(--radius);
  margin-top:1.6em;
}
.callout p{color:var(--ink-soft)}
.callout p:first-child{margin-top:0}

/* card grid, used sparingly (e.g. explainer summaries, guide index) */
.grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
  margin-top:2rem;
}
.card{
  padding:1.6rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.card h3{margin-bottom:0.5rem}
.card p{font-size:0.95rem}
.card a.card-link{
  text-decoration:none;
  display:inline-block;
  margin-top:0.9rem;
  font-size:0.92rem;
  font-weight:500;
  color:var(--rose-deep);
}

/* guide index list */
.guide-cluster{margin-top:2.6rem}
.guide-cluster h2{margin-bottom:0.4rem}
.guide-cluster .cluster-note{color:var(--ink-faint); font-size:0.92rem; max-width:34rem}
.guide-list{list-style:none; margin-top:1.4rem; display:flex; flex-direction:column; gap:0.9rem}
.guide-list li{
  border-top:1px solid var(--line-soft);
  padding-top:0.9rem;
}
.guide-list a{
  text-decoration:none;
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--ink);
}
.guide-list a:hover{color:var(--rose-deep)}
.guide-list .excerpt{color:var(--ink-faint); font-size:0.92rem; margin-top:0.25rem}

/* FAQ */
.faq-item{border-top:1px solid var(--line-soft); padding-block:1.4rem}
.faq-item h3{font-size:1.05rem; margin-bottom:0.5rem}

/* footer */
.site-footer{
  border-top:1px solid var(--line-soft);
  padding-block:2.6rem;
  background:var(--bg-alt);
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1.5rem;
}
.footer-brand{font-family:var(--font-display); font-size:1.05rem}
.footer-tag{color:var(--ink-faint); font-size:0.88rem; margin-top:0.4rem; max-width:26rem}
.footer-nav ul{list-style:none; display:flex; flex-wrap:wrap; gap:0.6rem 1.2rem}
.footer-nav a{text-decoration:none; color:var(--ink-soft); font-size:0.9rem}
.footer-nav a:hover{color:var(--rose-deep)}
.footer-note{
  margin-top:2rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line-soft);
  color:var(--ink-faint);
  font-size:0.82rem;
}

/* =========================================================
   Single orchestrated load reveal (per frontend-design guidance:
   one page-load sequence, not scattered per-section effects)
   ========================================================= */
.rise{
  opacity:0;
  transform:translateY(14px);
}
.js-ready .rise{
  animation:rise 700ms cubic-bezier(.2,.7,.3,1) forwards;
}
.js-ready .rise.d1{animation-delay:90ms}
.js-ready .rise.d2{animation-delay:170ms}
@keyframes rise{
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .rise{opacity:1; transform:none}
}

/* =========================================================
   Not found page
   ========================================================= */
.notfound{
  min-height:70svh;
  display:flex;
  align-items:center;
  text-align:center;
}
.notfound .wrap{max-width:32rem; margin-inline:auto}