/* Sandra Kirsch — production stylesheet (vanilla, self-hosted, same-origin)
   Zero dependencies. Fluid scaling, no hardcoded breakpoints.
   To activate brand fonts, drop woff2 files in /fonts and uncomment @font-face. */

/* ---- Self-hosted brand fonts (OFL, from Google Fonts). Local TTF — no CDN, CSP-clean.
   Optional later optimization: convert to .woff2 (~60-70% smaller) and update the src URLs. ---- */
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Work Sans";src:url("fonts/WorkSans-var.ttf") format("truetype");font-weight:400 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Mono";src:url("fonts/SpaceMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Mono";src:url("fonts/SpaceMono-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Caveat";src:url("fonts/Caveat-var.ttf") format("truetype");font-weight:500 700;font-style:normal;font-display:swap;}

:root{
  --bg:#F7F1E6; --ink:#241C1A; --body:#3B342F; --muted:#6F6459; --faint:#8A7C6E; --faint2:#A2937F;
  --accent:#C15F3C; --plum:#7C3B54; --peach:#E4915F; --line:#E3D7C3; --dark:#241C1A;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Work Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,"JetBrains Mono","Fira Code",monospace;
  --hand:"Caveat","Segoe Script","Bradley Hand",cursive;
  --maxw:75rem; --pad:clamp(1.25rem,5vw,4rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;
  font-size:clamp(1rem,0.94rem + 0.3vw,1.125rem);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;overflow-x:hidden;}
img{max-width:100%;display:block;}
.display,.h2,.a-title,.a-dek,.feature__h,.post__h,.value__h,.voice__line{overflow-wrap:break-word;text-wrap:balance;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--plum);}
::selection{background:rgba(193,95,60,.24);}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.wrap.section{max-width:62.5rem;}
.prose-wrap{max-width:min(70ch,92vw);margin-inline:auto;padding-inline:var(--pad);}
.mono{font-family:var(--mono);}
.eyebrow{font-family:var(--mono);font-size:clamp(.7rem,.66rem + .2vw,.75rem);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.rule{border-top:1px solid var(--line);}
.section{padding-block:clamp(3rem,7vw,6.5rem);}

/* header */
.site-header{position:relative;z-index:5;}
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;padding-block:clamp(1.3rem,3vw,1.9rem);flex-wrap:wrap;}
.brand{font-family:var(--serif);font-size:clamp(1.35rem,1.2rem + .7vw,1.65rem);color:var(--ink);letter-spacing:.01em;}
.brand.sm{font-size:1.4rem;}
.nav-cta{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:.45rem;align-items:center;min-height:44px;}
.nav-cta:hover{color:var(--accent);}

/* hero */
.hero{display:flex;flex-wrap:wrap;gap:clamp(1.75rem,5vw,4.5rem);align-items:center;padding-top:clamp(1rem,3vw,3rem);padding-bottom:clamp(3rem,7vw,6rem);}
.hero__text{flex:1 1 26rem;}
.hero__media{flex:1 1 15rem;max-width:24rem;margin-inline:auto;position:relative;}
.display{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:.003em;
  font-size:clamp(2.35rem,1.6rem + 3.4vw,4.9rem);}
.hero .display{margin-bottom:0;}
.mark{position:relative;white-space:nowrap;color:var(--ink);}
.mark__ul{position:absolute;left:-2%;bottom:-.24em;width:104%;height:.42em;overflow:visible;}
.mark__ul path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:handDraw 1s ease .55s forwards;}
@keyframes handDraw{to{stroke-dashoffset:0;}}
.lede{font-family:var(--serif);font-style:italic;color:var(--plum);line-height:1.15;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.75rem);margin-top:1.4rem;padding-left:clamp(0rem,3vw,2.75rem);}
.sig{font-family:var(--hand);color:var(--accent);font-size:clamp(1.7rem,1.3rem + 1vw,2.4rem);margin-top:1rem;padding-left:clamp(0rem,3vw,2.75rem);}
.hero__sub{color:var(--muted);max-width:50ch;margin-top:2rem;font-size:clamp(1rem,.94rem + .25vw,1.125rem);}
.eyebrow--hero{display:block;margin-bottom:1.7rem;}

/* arch portrait */
.portrait{position:relative;aspect-ratio:3/4;border-radius:12.5rem 12.5rem 1rem 1rem;overflow:hidden;
  box-shadow:0 1.8rem 4rem -1.9rem rgba(43,35,32,.55);}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  filter:grayscale(.82) sepia(.12) contrast(1.06) saturate(.9);}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(124,59,84,.05),rgba(193,95,60,.1));mix-blend-mode:multiply;}
.portrait-glow{position:absolute;inset:-9% -12% -5% -10%;z-index:-1;filter:blur(10px);
  background:radial-gradient(circle at 48% 38%,rgba(224,150,110,.4),rgba(124,59,84,.1) 55%,transparent 72%);}
.cap{position:absolute;right:-.4rem;bottom:1.2rem;z-index:2;background:var(--bg);font-family:var(--hand);
  font-size:1.2rem;color:var(--ink);padding:.3rem .8rem;border-radius:.35rem;transform:rotate(-2deg);
  box-shadow:0 .5rem 1.25rem -.6rem rgba(43,35,32,.5);}

/* generic heads */
.h2{font-family:var(--serif);font-weight:400;line-height:1.05;font-size:clamp(1.9rem,1.3rem + 2.4vw,3.6rem);max-width:18ch;}
.h2--wide{max-width:none;}
.lead{color:var(--muted);max-width:60ch;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);margin-top:1.4rem;}
.eyebrow--block{display:block;margin-bottom:1.35rem;}

/* voices */
.voices{display:flex;flex-direction:column;margin-top:clamp(2.25rem,4vw,3.5rem);}
.voice{display:grid;grid-template-columns:minmax(7rem,11rem) 1fr;gap:clamp(.9rem,3vw,2.25rem);
  align-items:baseline;padding-block:clamp(1.5rem,2.6vw,2.4rem);}
.voice + .voice{border-top:1px solid var(--line);}
.voice__who{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint2);}
.voice__who.is-me{color:var(--accent);font-weight:700;}
.voice__line{font-family:var(--serif);font-style:italic;line-height:1.24;color:#6B6259;font-size:clamp(1.35rem,1.05rem + 1.1vw,2rem);}
.voice__line.is-partner{color:#3B342F;}
.voice__line.is-me{font-style:normal;color:var(--accent);font-size:clamp(1.55rem,1.15rem + 1.5vw,2.5rem);}
.kicker{font-family:var(--serif);font-style:italic;color:var(--ink);line-height:1.3;max-width:28ch;
  font-size:clamp(1.25rem,1rem + 1vw,1.9rem);margin-top:clamp(2.5rem,4vw,4rem);}
.kicker .hand{font-family:var(--hand);font-style:normal;color:var(--accent);font-size:1.24em;}

/* values */
.values{display:flex;flex-direction:column;margin-top:clamp(2.25rem,4vw,3.5rem);}
.value{display:grid;grid-template-columns:minmax(3rem,6.5rem) 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:start;padding-block:clamp(1.6rem,3vw,2.7rem);}
.value + .value{border-top:1px solid var(--line);}
.value__num{font-family:var(--serif);color:var(--accent);line-height:.8;font-size:clamp(2.75rem,1.8rem + 3.5vw,5.5rem);}
.value__h{font-family:var(--serif);font-weight:400;line-height:1.1;font-size:clamp(1.4rem,1.1rem + 1.1vw,2.35rem);margin-bottom:.7rem;}
.value__p{color:var(--muted);max-width:54ch;}

/* about */
.about{display:flex;flex-wrap:wrap;gap:clamp(1.75rem,4vw,3.5rem);align-items:flex-start;margin-top:clamp(2.25rem,4vw,3.5rem);}
.about__media{flex:0 1 20rem;max-width:21rem;position:relative;}
.about__media .portrait{border-radius:1rem;}
.about__body{flex:1 1 22rem;display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.4rem);}
.about__body p{color:var(--body);}
.about__body .lede{font-size:clamp(1.25rem,1rem + 1vw,1.7rem);padding-left:0;margin-top:.5rem;}
.about__body .sig{padding-left:0;}
.about__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint2);border-top:1px solid var(--line);padding-top:1rem;margin-top:.9rem;}

/* insights */
.feature{display:block;border-top:2px solid var(--ink);margin-top:clamp(2rem,4vw,3.25rem);padding-top:clamp(1.5rem,3vw,2.2rem);transition:transform .2s ease;color:inherit;}
.feature:hover{transform:translateY(-3px);color:inherit;}
.feature__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem;}
.feature__meta span:not(:first-child){color:var(--faint2);}
.feature__h{font-family:var(--serif);font-weight:400;line-height:1.06;font-size:clamp(1.6rem,1.2rem + 2vw,2.9rem);max-width:22ch;margin-bottom:1rem;}
.feature__dek{color:var(--muted);max-width:58ch;margin-bottom:1.25rem;}
.feature__read{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.post{border-top:1px solid var(--line);margin-top:clamp(1.4rem,2.6vw,2rem);padding-top:clamp(1.4rem,2.6vw,2rem);opacity:.6;}
.post__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint2);display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:.75rem;}
.post__h{font-family:var(--serif);font-weight:400;line-height:1.1;font-size:clamp(1.25rem,1rem + 1vw,1.9rem);max-width:24ch;margin-bottom:.5rem;color:var(--ink);}
.post__dek{color:var(--faint);font-size:.95rem;max-width:54ch;}

/* close */
.close{background:var(--dark);color:var(--bg);}
.close .h2{max-width:none;}
.close__em{font-style:italic;color:var(--peach);}
.close__row{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 1.9rem;margin-top:clamp(2.25rem,4vw,3.5rem);}
.close__note{font-size:.95rem;color:#C0B3A4;}
.close .sig{margin-top:clamp(2.25rem,4vw,3.25rem);color:var(--peach);padding-left:0;font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem);}
.eyebrow--peach{color:var(--peach);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7rem;background:var(--accent);color:var(--bg);
  font-family:var(--sans);font-weight:600;font-size:1rem;padding:1rem 1.8rem;border:1px solid var(--accent);
  border-radius:999px;cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;}
.btn:hover{transform:translateY(-3px);background:var(--peach);border-color:var(--peach);color:var(--bg);box-shadow:0 1rem 2.1rem -1rem rgba(193,95,60,.9);}
.btn--ghost-dark{background:none;border:1px solid #5A4E46;color:var(--bg);}
.btn--ghost-dark:hover{background:none;border-color:var(--bg);transform:none;box-shadow:none;color:var(--bg);}

/* article / prose */
.article{padding-block:clamp(2rem,4vw,3.5rem) clamp(3.5rem,8vw,7rem);}
.back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:.55rem .95rem;margin-bottom:clamp(1.6rem,3vw,2.5rem);}
.back:hover{border-color:var(--accent);color:var(--accent);}
.a-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint2);display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:1.25rem;}
.a-meta span:first-child{color:var(--accent);}
.a-title{font-family:var(--serif);font-weight:400;line-height:1.05;font-size:clamp(2rem,1.4rem + 2.8vw,3.6rem);margin-bottom:1.1rem;}
.a-dek{font-family:var(--serif);font-style:italic;color:var(--plum);line-height:1.32;font-size:clamp(1.2rem,1rem + .9vw,1.65rem);margin-bottom:clamp(2rem,3.5vw,3rem);}
.tldr{background:var(--dark);color:var(--bg);border-left:4px solid var(--accent);padding:clamp(1.4rem,3vw,2.1rem);margin-bottom:clamp(2.25rem,4vw,3.4rem);}
.tldr h2{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--peach);margin-bottom:.85rem;font-weight:400;}
.tldr p{font-size:1rem;line-height:1.64;color:#EDE3D4;}
.prose > * + *{margin-top:clamp(1.1rem,2vw,1.5rem);}
.prose p{font-size:clamp(1.05rem,1rem + .35vw,1.19rem);line-height:1.78;color:var(--body);}
.prose h2,.prose h3{font-family:var(--serif);font-weight:400;line-height:1.14;color:var(--ink);
  font-size:clamp(1.5rem,1.15rem + 1.4vw,2.15rem);margin-top:clamp(1.4rem,2.6vw,2.2rem);}
.prose blockquote{font-family:var(--serif);font-style:italic;color:var(--accent);line-height:1.24;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.35rem);border-left:3px solid var(--accent);padding-left:1.4rem;}
.a-end{border-top:1px solid var(--line);margin-top:clamp(2.75rem,5vw,4.5rem);padding-top:clamp(1.8rem,3vw,2.7rem);}
.a-end .sig{padding-left:0;margin-top:0;margin-bottom:.6rem;font-size:2rem;}
.a-end p{color:var(--faint);font-size:.95rem;max-width:52ch;margin-bottom:1.6rem;}
.a-end .row{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center;}
.a-end .mono{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;}
.prose ul{padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem;}
.prose li{font-size:clamp(1.05rem,1rem + .35vw,1.19rem);line-height:1.6;color:var(--body);}
.prose strong{color:var(--ink);}
.legal-intro{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint2);margin-bottom:1.6rem;}

/* footer */
.site-footer{border-top:1px solid var(--line);}
.foot{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;justify-content:space-between;align-items:flex-start;padding-top:clamp(2rem,4vw,3.25rem);}
.foot .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint2);margin-top:.5rem;}
.foot-loc{font-size:.82rem;color:var(--faint);margin-top:.75rem;max-width:34ch;}
.foot-links{display:flex;flex-wrap:wrap;gap:.75rem 1.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;}
.foot-links a{color:var(--ink);display:inline-flex;align-items:center;min-height:2.75rem;}
.foot-links a:hover{color:var(--accent);}
.foot-copy{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#B2A695;padding-top:1.5rem;padding-bottom:clamp(1.5rem,3vw,2.5rem);}

/* consent banner */
.banner{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:clamp(.75rem,2vw,1.4rem);display:flex;justify-content:center;}
.banner[hidden]{display:none;}
.banner__inner{max-width:48rem;width:100%;background:var(--dark);color:var(--bg);border-radius:1rem;
  box-shadow:0 1.4rem 3.4rem -1.1rem rgba(0,0,0,.55);padding:clamp(1.1rem,2.4vw,1.6rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;}
.banner__inner p{flex:1 1 18rem;font-size:.88rem;line-height:1.55;color:#D9CFC2;}
.banner__inner a{color:var(--peach);text-decoration:underline;}
.banner__btns{display:flex;flex-wrap:wrap;gap:.6rem;flex:1 1 auto;}
.banner__btns .btn{font-size:.82rem;padding:.7rem 1.1rem;}

.skip{position:absolute;left:-999px;}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:99;border-radius:.4rem;}

/* ---- Defensive polish for very small phones (<=360px). Not layout breakpoints — the
   site is fluid everywhere else; this only prevents cramping on the narrowest handsets. ---- */
@media (max-width:22.5em){
  :root{--pad:1.15rem;}
  .voice{grid-template-columns:1fr;gap:.55rem;}
  .voice__who{padding-top:0;}
  .value{grid-template-columns:1fr;gap:.65rem;}
  .value__num{font-size:3.1rem;line-height:1;}
  .bar{gap:.5rem 1rem;}
  .banner__inner{gap:.9rem 1rem;}
  .banner__btns .btn{flex:1 1 auto;justify-content:center;}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
}