/* ══════════════════════════════════════════════════════════
   Wrapping Up — direction prototype, v2

   Surface budget is taken from Katie's own colour diagram
   (measured from the .pptx shape geometry — circle area = weight):

     cream  #FFFEDE  100   ochre #C87D24   80   sand  #FAE7BD  48
     slate  #7C9BAC   14   terra #E86A3D    9   rust  #DC460D   2
     blue   #0000FF    1   ink   #1B2121    1

   So: ochre is a GROUND, not an accent — roughly a third of the
   page surface. Ink is type only. Blue is one hairline.
   ══════════════════════════════════════════════════════════ */

:root{
  /* — grounds, in order of weight — */
  --paper:      #FBF7EC;   /* cream, softened for long reading   */
  --cream:      #FFFEDE;   /* deck cream, full strength          */
  --ochre:      #C87D24;   /* Katie's colour. a ground.          */
  --ochre-deep: #A0641A;   /* for type on cream, and hovers      */
  --sand:       #FAE7BD;
  --slate:      #7C9BAC;
  --terracotta: #E86A3D;
  --rust:       #DC460D;
  --electric:   #0000FF;   /* the blue shoe. focus rings only.   */

  /* — ink ramp (type only) — */
  --ink:        #1B2121;
  --ink-soft:   #5B5C57;
  --ink-faint:  #74756C;   /* darkened from the deck for AA at small sizes */

  --rule:       #E2DCCB;
  --rule-ochre: #B99257;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max: 76rem;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  font-weight:350;
  line-height:1.62;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

:focus-visible{ outline:2px solid var(--electric); outline-offset:3px; border-radius:2px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper); padding:.75rem 1.25rem;
  font-family:var(--sans); font-size:.875rem;
}
.skip:focus{ left:1rem; top:1rem }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }

.label{
  font-family:var(--sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin:0;
}

/* ─────────────────────────── header ─────────────────────── */
.site-head{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.site-head.is-stuck{ border-bottom-color:var(--rule) }

.head-inner{ display:flex; align-items:center; gap:2rem; min-height:5.25rem }

.brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; flex:0 0 auto }
.brand img{ width:auto; height:44px }
.brand-txt{ display:flex; flex-direction:column; gap:.15rem }
.brand-name{ font-family:var(--sans); font-weight:500; font-size:.95rem; letter-spacing:.02em }
.brand .label{ font-size:.625rem; letter-spacing:.13em }

.nav{ margin-left:auto; display:flex; gap:1.9rem; font-family:var(--sans); font-size:.9375rem }
.nav a{
  text-decoration:none; color:var(--ink-soft); padding-block:.35rem;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--ochre) }

.call{
  flex:0 0 auto; text-decoration:none; display:flex; flex-direction:column; gap:.1rem;
  padding-left:1.9rem; border-left:1px solid var(--rule);
}
.call-lead{
  font-family:var(--sans); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.call-num{ font-family:var(--sans); font-size:1.0625rem; font-weight:500 }
.call:hover .call-num{ color:var(--rust) }

@media (max-width: 68rem){ .nav{ display:none } }
@media (max-width: 40rem){
  .head-inner{ min-height:4.25rem; gap:1rem }
  .brand img{ height:34px }
  .brand-txt .label{ display:none }
  .call{ margin-left:auto; padding-left:0; border-left:0; text-align:right }
  .call-lead{ display:none }
  .call-num{ font-size:1rem; color:var(--rust) }
}

/* ─────────────────────────── hero ───────────────────────── */
.hero{ background:var(--paper) }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  align-items:stretch; gap:0;
}
.hero-copy{
  padding:clamp(3rem,7vw,6.5rem) clamp(2rem,5vw,4.5rem) clamp(3rem,7vw,6rem) var(--gutter);
  max-width:calc(var(--max) * .62); margin-left:auto;
  align-self:center;
}
@media (max-width: 62rem){
  .hero-grid{ grid-template-columns:1fr }
  .hero-copy{ max-width:none; margin-left:0; padding-inline:var(--gutter);
              padding-top:clamp(2rem,6vw,3rem) }
}

.label-lead{ margin-bottom:1.75rem }

h1{
  font-family:var(--serif); font-weight:250;
  font-size:clamp(2.05rem, 1.1rem + 3.4vw, 3.75rem);
  line-height:1.1; letter-spacing:-.018em;
  margin:0 0 1.6rem; max-width:20ch; text-wrap:balance;
}
.br-lg{ display:none }
@media (min-width: 62rem){ .br-lg{ display:inline } h1{ max-width:none } }

.lede{ max-width:var(--measure); color:var(--ink-soft); font-size:1.0625em; margin:0 0 2.25rem }

.hero-talk{
  font-family:var(--sans); font-size:.9375rem; color:var(--ink-faint);
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; margin:0;
}
.hero-talk a{
  color:var(--ink); text-decoration:none;
  border-bottom:1.5px solid var(--terracotta); padding-bottom:1px;
}
.hero-talk a:hover{ color:var(--rust); border-bottom-color:var(--rust) }

/* image bleeds to the right edge; the bow is drawn over it */
.hero-fig{
  position:relative; margin:0; overflow:hidden;
  background:var(--ochre);
  min-height:clamp(20rem, 46vw, 40rem);
}
.hero-fig img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:52% 55%;
}
.bow-over{
  position:absolute; right:7%; bottom:9%;
  width:min(48%, 16rem); height:auto; aspect-ratio:1;
  color:var(--cream); opacity:.92;
  filter:drop-shadow(0 1px 6px rgba(60,32,0,.25));
}
.bow-line{ stroke-dasharray:var(--len,1400); stroke-dashoffset:var(--len,1400) }
.is-drawn .bow-line{ animation:draw 2.6s cubic-bezier(.32,.72,.28,1) .3s forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@media (prefers-reduced-motion: reduce){
  .bow-line{ stroke-dashoffset:0 !important; animation:none !important }
}
/* must come after the base .hero-fig rule to win on min-height */
@media (max-width: 62rem){
  .hero-fig{ order:-1; width:100%; aspect-ratio:16/10; min-height:0 }
}

/* ─────────────────────── doors (sand) ───────────────────── */
.doors{ background:var(--sand); padding-block:clamp(3rem, 6vw, 5.5rem) }

.h-section{
  font-family:var(--serif); font-weight:250;
  font-size:clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem);
  line-height:1.16; letter-spacing:-.015em;
  margin:0 0 .9rem; max-width:22ch; text-wrap:balance;
}
.section-note{ max-width:var(--measure); color:var(--ink-soft); margin:0 0 2.75rem }

/* three separate choices, not one segmented control */
.door-row{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(.75rem, 1.6vw, 1.25rem);
}
/* each pathway has its own colour. it appears on the roll-up, so the
   trio reads as a calm set at rest and the colour is the reward for
   reaching for one. ink type clears AA on all three grounds. */
.door[data-door="living"]  { --door-c:var(--ochre) }
.door[data-door="dying"]   { --door-c:var(--slate) }
.door[data-door="planning"]{ --door-c:var(--terracotta) }
@media (max-width: 56rem){ .door-row{ grid-template-columns:1fr } }

.door{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; gap:1.4rem;
  background:var(--paper); border:1px solid var(--rule-ochre); margin:0;
  padding:2.5rem 2rem 2.25rem;
  text-align:left; font:inherit; color:inherit; cursor:pointer;
  min-height:18.5rem;
}
.door::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--door-c);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s cubic-bezier(.32,.72,.28,1);
}
.door:hover::before, .door:focus-visible::before, .door[aria-pressed="true"]::before{
  transform:scaleY(1);
}
.door:hover .door-num, .door[aria-pressed="true"] .door-num,
.door:hover .door-go,  .door[aria-pressed="true"] .door-go{ color:var(--ink) }
.door[aria-pressed="true"]{ box-shadow:inset 0 -4px 0 var(--ink) }

.door-num{ font-family:var(--sans); font-size:.6875rem; letter-spacing:.16em; color:var(--ink-faint) }
.door-q{ font-size:1.3125rem; line-height:1.34; font-weight:350; letter-spacing:-.005em; flex:1 }
.door-go{
  font-family:var(--sans); font-size:.875rem; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:.55rem;
}
.door .arw{ transition:transform .3s cubic-bezier(.32,.72,.28,1) }
.door:hover .arw, .door:focus-visible .arw{ transform:translateX(5px); color:var(--electric) }

/* ─────────────── the strip band: mood + relief ──────────── */
/* the deck's own device — vertical panels of image and flat
   colour butted together, with the line drawn over the top   */
.band{
  position:relative; display:grid;
  grid-template-columns:1fr 1.1fr .85fr 1.75fr .6fr;
  height:clamp(13rem, 26vw, 22rem);
  background:var(--ochre);
}
.strip{ position:relative; overflow:hidden }
.strip img{ width:100%; height:100%; object-fit:cover }
.strip-ochre{ background:var(--ochre) }
.strip-slate{ background:var(--slate) }
/* pull the found imagery into one warm family */
.strip-img::after{
  content:""; position:absolute; inset:0;
  background:var(--ochre); mix-blend-mode:soft-light; opacity:.55;
}
.band-line{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:auto; height:78%; aspect-ratio:1;
  color:var(--cream); opacity:.9;
  filter:drop-shadow(0 1px 8px rgba(40,20,0,.3));
}
@media (max-width: 56rem){
  .band{ grid-template-columns:1.1fr .7fr 1.5fr .55fr; height:11rem }
  .band .strip:nth-child(3){ display:none }
}

/* ─────────────────────────── support ────────────────────── */
.support{ padding-block:clamp(3.5rem, 7vw, 6rem) }
.support-head{ margin-bottom:3rem }

.filter-state{ font-family:var(--sans); font-size:.9375rem; color:var(--ink-soft); margin:.75rem 0 0 }
.filter-state b{ font-weight:500; color:var(--ink) }
.linkish{
  background:none; border:0; padding:0; margin-left:.5rem;
  font:inherit; color:var(--ink); cursor:pointer;
  border-bottom:1.5px solid var(--terracotta);
}

.modules{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 56rem){ .modules{ grid-template-columns:1fr } }

.module{ border-top:1px solid var(--rule); padding-top:1.75rem }
.module.is-dim, .module-fig.is-dim{ display:none }

/* a texture panel sitting inside the reading grid, for relief */
.module-fig{
  margin:0; overflow:hidden; position:relative;
  min-height:16rem; border-top:1px solid var(--rule);
}
.module-fig img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0 }
.module-fig::after{
  content:""; position:absolute; inset:0;
  background:var(--ochre); mix-blend-mode:soft-light; opacity:.5;
}
@media (max-width: 56rem){ .module-fig{ min-height:11rem } }

.module h3{
  font-family:var(--serif); font-weight:400;
  font-size:1.35rem; letter-spacing:-.01em; line-height:1.25; margin:0 0 .7rem;
}
.module-lede{ color:var(--ink-soft); margin:0 0 1.35rem; max-width:44ch }

.ticks{ list-style:none; margin:0; padding:0 }
.ticks li{ position:relative; padding-left:1.5rem; margin-bottom:.6rem; line-height:1.5 }
.ticks li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:.55rem; height:1px; background:var(--accent, var(--ochre));
}
#modules[data-accent="living"]  { --accent:var(--ochre) }
#modules[data-accent="dying"]   { --accent:var(--slate) }
#modules[data-accent="planning"]{ --accent:var(--terracotta) }

.elsewhere{ margin-top:1.5rem; border-top:1px dashed var(--rule); padding-top:1.1rem }
.elsewhere summary{
  font-family:var(--sans); font-size:.875rem; color:var(--ink-soft);
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:.55rem;
}
.elsewhere summary::-webkit-details-marker{ display:none }
.elsewhere summary::before{ content:"+"; font-size:1rem; color:var(--ochre-deep); line-height:1 }
.elsewhere[open] summary::before{ content:"–" }
.elsewhere summary:hover{ color:var(--ink) }
.elsewhere p{ font-size:.9375rem; color:var(--ink-soft); margin:1rem 0 .75rem; max-width:44ch }
.signpost{ list-style:none; margin:.75rem 0 .25rem; padding:0; font-size:.9375rem; color:var(--ink-soft) }
.signpost li{ margin-bottom:.4rem }
.signpost b{ font-weight:500; color:var(--ink) }

.aside{
  margin-top:1.5rem; padding-left:1.25rem; border-left:2px solid var(--slate);
  font-style:italic; color:var(--ink-soft); font-size:.9875rem; max-width:44ch;
}

.catch{ margin:clamp(3rem, 6vw, 4.5rem) 0 0; max-width:46rem; font-size:1.125rem; color:var(--ink-soft) }
.catch a{ color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--terracotta) }

/* ──────────────────── belief (ochre ground) ─────────────── */
.belief{
  background:var(--ochre); color:var(--ink);
  display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
  align-items:center;
}
.belief-fig{ position:relative; align-self:stretch; min-height:clamp(16rem,32vw,30rem); overflow:hidden }
.belief-fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.belief-fig::after{
  content:""; position:absolute; inset:0;
  background:var(--ochre); mix-blend-mode:multiply; opacity:.28;
}
.belief-copy{
  padding:clamp(3rem,7vw,6rem) var(--gutter) clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4.5rem);
  max-width:52rem;
}
.belief .label{ color:#523415 }
@media (max-width: 62rem){
  .belief{ grid-template-columns:1fr }
  .belief-fig{ min-height:12rem }
}

.h-belief{
  font-family:var(--serif); font-weight:250;
  font-size:clamp(1.6rem, 1rem + 2.2vw, 2.9rem);
  line-height:1.16; letter-spacing:-.018em;
  margin:1rem 0 2.25rem; max-width:24ch; text-wrap:balance;
}
.belief-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,3rem); max-width:46rem;
}
@media (max-width:56rem){ .belief-cols{ grid-template-columns:1fr } }
.belief-cols p{ margin:0; color:#3C2708 }

/* ─────────────────────────── about ──────────────────────── */
.about{ padding-block:clamp(3.5rem, 7vw, 6.5rem) }
.about-inner{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
}
@media (max-width: 56rem){ .about-inner{ grid-template-columns:1fr } }

.about-media{ position:relative }
.about-portrait{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:52% 22%;
  filter:saturate(.85) contrast(1.02);
}
.about-texture{
  position:absolute; right:-1.5rem; bottom:-2rem;
  width:42%; aspect-ratio:3/4; object-fit:cover;
  border:6px solid var(--paper);
}
@media (max-width: 56rem){ .about-texture{ display:none } }

.about-copy .h-section{ margin-top:.6rem }
.about-copy p{ max-width:var(--measure) }
.creds{
  font-family:var(--sans); font-size:.8125rem; letter-spacing:.05em;
  color:var(--ink-faint); margin-top:1.5rem;
}

.quote{ margin:2.5rem 0 0; padding-top:2rem; border-top:1px solid var(--rule); max-width:var(--measure) }
.quote p{
  font-size:clamp(1.2rem,1rem + .7vw,1.5rem); font-weight:250; font-style:italic;
  line-height:1.35; letter-spacing:-.01em; margin:0 0 .9rem;
}
.quote cite{
  font-family:var(--sans); font-style:normal; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}

/* ─────────────────────── pricing (sand) ─────────────────── */
.pricing{ background:var(--sand); padding-block:clamp(3.5rem, 7vw, 6rem) }
.pricing-inner{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
@media (max-width:56rem){ .pricing-inner{ grid-template-columns:1fr } }
.pricing p{ max-width:var(--measure); color:#4E4A3C }

.rates{ margin:0; border-top:1px solid var(--ink) }
.rates > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:1.15rem 0; border-bottom:1px solid var(--rule-ochre);
}
.rates dt{ font-family:var(--sans); font-size:.9375rem; color:#5B5646 }
.rates dd{ margin:0; text-align:right; font-size:1.0625rem }
.rates > div:first-child dd{ font-size:1.9rem; font-weight:300; letter-spacing:-.02em }

/* ─────────────────────── contact (ochre) ────────────────── */
.contact{
  position:relative; overflow:hidden;
  background:var(--ochre); color:var(--ink);
  padding-block:clamp(3.5rem, 8vw, 7rem);
}
.contact-bow{
  position:absolute; right:-4%; top:50%; translate:0 -50%;
  width:min(38%, 26rem); height:auto; aspect-ratio:1;
  color:var(--cream); opacity:.22; pointer-events:none;
}
@media (max-width: 62rem){ .contact-bow{ opacity:.14; right:-14% } }

.h-contact{
  font-family:var(--serif); font-weight:250;
  font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  letter-spacing:-.02em; line-height:1.1; margin:0 0 .85rem;
}
.contact-note{ color:#4A2F0C; max-width:36rem; margin:0 0 3rem }

.contact-rows{ position:relative; border-top:1px solid rgba(27,33,33,.28); max-width:54rem }
.crow{
  display:flex; align-items:baseline; gap:2rem;
  padding:1.5rem 0; border-bottom:1px solid rgba(27,33,33,.28);
  text-decoration:none;
  transition:padding-left .3s cubic-bezier(.32,.72,.28,1);
}
.crow .label{ flex:0 0 9rem; color:#5B3A10 }
.cbig{ font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem); font-weight:300; letter-spacing:-.015em }
.crow:hover{ padding-left:1rem }
.crow:hover .cbig{ color:var(--cream) }
@media (max-width:40rem){
  .crow{ flex-direction:column; gap:.35rem }
  .crow .label{ flex:none }
}

.area{ position:relative; margin:2.5rem 0 0; color:#4A2F0C; max-width:36rem; font-size:.9875rem }

/* ─────────────────────────── footer ─────────────────────── */
.site-foot{
  background:var(--ink); color:#A9A79C;
  padding-block:1.75rem; font-family:var(--sans); font-size:.8125rem;
}
.foot-inner{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap }
.foot-links a{ text-decoration:none; margin-left:1.25rem }
.foot-links a:hover{ color:var(--cream) }