/* ============================================================================
   Learn with Laura — Design System  ·  "Refined nature"
   Drop-in tokens + component primitives for the SSR marketing site.
   Load Fraunces + Public Sans (+ JetBrains Mono) before this file.
   Full rationale: docs/design-system.md
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --ink:        #1B211E;   /* body text on light */
  --spruce:     #24463C;   /* primary brand, headings, dark sections */
  --spruce-deep:#182F28;   /* darker spruce, gradients/footers */
  --moss:       #4F7464;   /* muted text, eyebrows, meta */
  --gold:       #A26118;   /* accessible interactive accent, CTAs, links; logo SVGs use decorative #B4711F */
  --gold-soft:  #E7C77E;   /* accent on dark, highlights */
  --paper:      #FAFAF6;   /* default page background (warm white) */
  --cloud:      #EEEFE7;   /* alt section band */
  --sand:       #F3E9D4;   /* warm accent band / callouts */
  --hair:       #D8DBD1;   /* hairlines, borders */
  --white:      #FFFFFF;

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Fluid type scale (clamp: min / preferred / max) */
  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.25rem);  /* hero H1 */
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.6vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
  --fs-h3:      1.3rem;
  --fs-lead:    clamp(1.075rem, 1rem + .4vw, 1.3rem);    /* intro paragraphs */
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-eyebrow: 0.75rem;

  /* Letter-spacing (tracking) */
  --tr-display: -0.02em;   /* tight for large serif */
  --tr-h2:      -0.01em;
  --tr-body:     0;
  --tr-eyebrow:  0.22em;   /* airy uppercase label */
  --tr-button:   0.01em;

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.65;

  /* ---- Space (8pt-ish) ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem; --sp-section:clamp(3.5rem,8vw,6.5rem);

  /* ---- Radius / shadow / layout ---- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(24,47,40,.06),0 2px 8px rgba(24,47,40,.06);
  --shadow-md:0 6px 24px rgba(24,47,40,.10);
  --container:1120px; --measure:68ch;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---- Base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font-display);color:var(--spruce);line-height:var(--lh-head);margin:0 0 .5em;font-weight:600}
h1{font-size:var(--fs-h1);letter-spacing:var(--tr-h2)}
h2{font-size:var(--fs-h2);letter-spacing:var(--tr-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 1em;max-width:var(--measure)}
a{color:var(--gold);text-underline-offset:.15em;text-decoration-thickness:1px}
a:hover{color:var(--spruce)}
img{max-width:100%;display:block}

/* ---- Layout helpers ---- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem)}
.section{padding-block:var(--sp-section)}
.section--cloud{background:var(--cloud)}
.section--sand{background:var(--sand)}
.section--spruce{background:var(--spruce);color:#DDE5DF}
.section--spruce h1,.section--spruce h2,.section--spruce h3{color:var(--paper)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;color:var(--moss);margin:0 0 .75rem}
.lead{font-size:var(--fs-lead);color:#33413a}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--font-sans);font-weight:600;font-size:1rem;letter-spacing:var(--tr-button);
  padding:.8rem 1.5rem;border-radius:var(--r-sm);border:1.5px solid transparent;
  text-decoration:none;transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--gold);color:#fff}
.btn--primary:hover{background:#9d6015;color:#fff;box-shadow:var(--shadow-md)}
.btn--secondary{background:transparent;color:var(--spruce);border-color:var(--spruce)}
.btn--secondary:hover{background:var(--spruce);color:var(--paper)}
.btn--ghost{background:transparent;color:var(--gold);padding-inline:.25rem}
.btn--onspruce{background:var(--gold-soft);color:var(--spruce-deep)}
.btn--onspruce:hover{background:#f0d698}

/* ---- Card ---- */
.card{background:#fff;border:1px solid var(--hair);border-radius:var(--r-md);
  padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card__icon{width:40px;height:40px;color:var(--gold);margin-bottom:.75rem}
.card h3{margin-bottom:.25rem}

/* ---- Hero (full-bleed image + spruce gradient scrim) ---- */
.hero{position:relative;min-height:clamp(460px,72vh,680px);display:flex;align-items:center;color:var(--paper)}
.hero__bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,47,40,.82) 0%,rgba(24,47,40,.62) 45%,rgba(24,47,40,.25) 100%)}
.hero__inner{position:relative;max-width:640px}
.hero h1{color:var(--paper);font-size:var(--fs-display);letter-spacing:var(--tr-display);line-height:var(--lh-tight)}
.hero .lead{color:#E4ECE6}

/* ---- Forms ---- */
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:var(--fs-small);color:var(--spruce);margin-bottom:.35rem}
.field input,.field textarea{width:100%;font:inherit;color:var(--ink);background:#fff;
  border:1.5px solid var(--hair);border-radius:var(--r-sm);padding:.7rem .85rem;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--spruce);box-shadow:0 0 0 3px rgba(36,70,60,.15)}
.field--error input,.field--error textarea{border-color:#b23b3b;box-shadow:0 0 0 3px rgba(178,59,59,.14)}
.field__help{font-size:var(--fs-small);color:var(--moss);margin-top:.3rem}
.bio-grid,.contact-grid{display:grid;grid-template-columns:minmax(240px,380px) minmax(0,1fr);gap:clamp(2rem,6vw,4rem);align-items:start}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.detail-card{background:rgba(255,255,255,.64);border:1px solid var(--hair);border-radius:var(--r-md);padding:var(--sp-6)}
.detail-card ul,.service-details,.contact-list,.next-list{margin:0;padding-left:1.1rem}
.detail-card li,.service-details li,.contact-list li,.next-list li{margin:.35rem 0}
.service-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.service-menu .service-card{display:flex;flex-direction:column;min-height:100%;scroll-margin-top:90px}
.service-card__meta{margin-top:auto;padding-top:var(--sp-4);color:var(--moss);font-size:var(--fs-small);font-weight:700}
.contact-panel{background:#fff;border:1px solid var(--hair);border-radius:var(--r-md);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow-sm)}
.contact-sidebar{background:var(--sand);border:1px solid rgba(36,70,60,.14);border-radius:var(--r-md);padding:clamp(1.25rem,3vw,2rem)}
.contact-sidebar h2{font-size:1.45rem}
.form-status{margin-top:var(--sp-4);padding:var(--sp-4);border-radius:var(--r-sm);border:1px solid transparent;background:var(--cloud)}
.form-status:empty{display:none}
.form-status--success{border-color:rgba(79,116,100,.35);background:#edf4ee;color:var(--spruce)}
.form-status--error{border-color:rgba(178,59,59,.35);background:#fff0ed;color:#7a2c2c}
.hp-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- Focus + motion accessibility ---- */
:focus-visible{outline:3px solid var(--gold-soft);outline-offset:2px;border-radius:2px}
@media (max-width:900px){.bio-grid,.contact-grid,.detail-grid,.service-menu{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}