/* ============================================================
   Scapes Environmental Design — colors_and_type.css
   "Where Luxury Takes Root."
   Warm, immersive, ultra-luxury landscape brand.
   ============================================================ */

/* --- Web fonts (Google Fonts substitutions; see README) --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Manrope:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');

/* --- Begin-a-conversation consult control (puzzle icon + hand label) --- */
.consult-open{display:inline-flex;align-items:center;gap:14px;text-decoration:none;padding:14px 26px;border-radius:24px;transition:background .4s ease;}
.consult-open,.consult-open:hover{text-decoration:none;border:0;}
.consult-open img{width:164px;height:auto;filter:drop-shadow(0 3px 12px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(232,145,60,.30));transition:transform .3s ease,filter .4s ease;}
.consult-open:hover img,.consult-open:focus-visible img{transform:rotate(-3deg) scale(1.06);filter:drop-shadow(0 3px 12px rgba(0,0,0,.45)) drop-shadow(0 0 30px rgba(242,163,82,.72)) drop-shadow(0 0 60px rgba(232,145,60,.34));}
.consult-open:hover,.consult-open:focus-visible{background:radial-gradient(ellipse at center, rgba(58,34,10,.86) 0%, rgba(30,18,8,.60) 46%, rgba(0,0,0,0) 80%);}
.consult-open span{font-family:'Architects Daughter',cursive;font-size:30px;line-height:1.15;color:#ebe3d2;transition:color .35s ease,text-shadow .35s ease;}
.consult-open:hover span,.consult-open:focus-visible span{color:#fbf3e4;text-shadow:0 0 22px rgba(242,163,82,.55);}

/* grand variant — the CTA stands alone, bigger, pieces breathing (Jason 7/11) */
.consult-open--grand img{width:clamp(150px,16vw,200px);animation:consult-snap 5.5s ease-in-out infinite;transform-origin:52% 55%;}
.consult-open--grand span{font-size:clamp(28px,3vw,38px);}
@keyframes consult-snap{
  0%,100%{transform:rotate(0deg) scale(1);}
  42%{transform:rotate(-2.4deg) scale(1.015);}
  50%{transform:rotate(-2deg) scale(1.03);filter:drop-shadow(0 3px 12px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(224,162,104,.28));}
  58%{transform:rotate(1.6deg) scale(1.015);}
}
@media (prefers-reduced-motion:reduce){.consult-open--grand img{animation:none;}}
/* phones — keep the door inside the screen (was clipping the label off the right) */
@media (max-width:620px){
  /* phones have no hover — the door must read as a lit, tappable target at rest (Jason 8/2) */
  .consult-open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;max-width:380px;min-height:112px;margin:0 auto;padding:18px 16px;border-radius:20px;background:radial-gradient(ellipse at center, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 52%, rgba(0,0,0,0) 84%);}
  .consult-open img{width:clamp(84px,22vw,104px);}
  .consult-open span{font-size:clamp(22px,6.4vw,26px);text-align:center;}
  .consult-open--grand img{width:clamp(88px,24vw,112px);}
  .consult-open--grand span{font-size:clamp(24px,7vw,30px);}
}

:root {
  /* ============================================================
     COLOR SYSTEM
     Warm, earthen, cinematic. Dark surfaces are primary.
     ============================================================ */

  /* --- Brand core (drawn from the logo) --- */
  --scapes-olive:        #5b5d2e;  /* Logo wordmark olive */
  --scapes-olive-deep:   #3f4220;  /* Darker olive — dusk foliage */
  --scapes-olive-soft:   #7a7d4a;  /* Hover/lifted state */
  --scapes-sandstone:    #cab686;  /* Logo seedhead tan */
  --scapes-sandstone-dk: #9c8a5d;

  /* --- Earth + atmosphere --- */
  --ink:           #0a0807;   /* True black, warm-tinted */
  --char-warm:     #130f0b;   /* Warm intermediate — between ink and charcoal; alternating panel bg */
  --charcoal:      #16120e;   /* Primary dark surface — warm charcoal */
  --loam:          #221c16;   /* Rich brown-black, panels */
  --bark:          #3a312a;   /* Elevated dark surface */
  --stone:         #9c948a;   /* Warm mid-grey — tertiary text, AA on all dark surfaces */
  --mist:          #b0a89b;   /* Light stone, muted text */
  --linen:         #ebe3d2;   /* Warm cream — primary on-dark text */
  --paper:         #f6f0e1;   /* Lightest cream — page on light mode */
  --vellum:        #ddd2bd;   /* Slightly deeper cream divider on light */

  /* --- Accent: warmth + light --- */
  --bronze:        #8a6a3a;   /* Muted architectural bronze */
  --bronze-soft:   #a98654;   /* Hover state */
  --ember:         #c4773c;   /* Firelight glow */
  --firelight:     #e0a268;   /* Lantern warmth */
  --water:         #4a5c5e;   /* Cool slate — pool reflection */

  /* ============================================================
     SEMANTIC TOKENS
     (Dark theme — primary. Light variant in .theme-light below.)
     ============================================================ */
  --bg:               var(--charcoal);
  --bg-elevated:      var(--loam);
  --bg-raised:        var(--bark);
  --bg-inverse:       var(--paper);
  --surface-overlay:  rgba(10, 8, 7, 0.72);     /* image protection */
  --surface-veil:     rgba(10, 8, 7, 0.42);

  --fg:               var(--linen);             /* primary text on dark */
  --fg-muted:         var(--mist);              /* secondary text */
  --fg-subtle:        var(--stone);             /* tertiary / metadata */
  --fg-inverse:       var(--charcoal);

  --accent:           var(--scapes-sandstone);  /* primary accent on dark */
  --accent-deep:      var(--bronze);            /* hover / pressed */
  --accent-warm:      var(--ember);             /* glow / highlight */
  --brand:            var(--scapes-olive);      /* literal brand mark */

  --border:           rgba(235, 227, 210, 0.12);
  --border-strong:    rgba(235, 227, 210, 0.22);
  --divider:          rgba(235, 227, 210, 0.08);

  /* ============================================================
     LADDER COMPONENT TOKENS  —  Root · Compose · Elevate
     The offering's organizing system, born in the Programs puzzle
     (PROGRAMS-LADDER-MAP.md). Each tier is an identity token set:
     a surface color, a lifted "ink" for text/marks, a numeral, and
     an emblem. Wear them anywhere a service/program/project sits on
     the ladder via the .ladder-chip primitive (site.css). These
     SURFACE/INK values are the SAME hues the puzzle paints — keep
     the two in lockstep if either changes.
     ============================================================ */
  --root-surface:     #47512a;   /* moss — foundation */
  --root-ink:         #93a458;   /* lifted moss, AA on dark */
  --compose-surface:  #8f4f2a;   /* clay — the build layer */
  --compose-ink:      #cf7d49;   /* lifted clay */
  --elevate-surface:  #8a6e33;   /* bronze — the crown */
  --elevate-ink:      #cda75e;   /* lifted bronze */

  /* ============================================================
     TYPOGRAPHY
     Display: Cormorant Garamond (transitional serif, refined).
     Body / UI: Manrope (humanist sans, warm geometry).
     ============================================================ */
  --font-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif;
  --font-body:    "Manrope", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Reading text — Newsreader: warm editorial serif paired with the Cormorant display.
     Used for paragraphs, leads, essays. UI/labels/nav/buttons stay on --font-body. */
  --font-text:    "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — generous for hospitality / editorial feel */
  --t-hero:       clamp(56px, 7.4vw, 116px);   /* @kind font */ /* "Where Luxury Takes Root." */
  --t-display:    clamp(42px, 5vw, 78px);      /* @kind font */
  --t-h1:         clamp(36px, 4vw, 62px);      /* @kind font */
  --t-h2:         clamp(30px, 3.1vw, 46px);    /* @kind font */
  --t-h3:         clamp(24px, 2.2vw, 34px);    /* @kind font */
  --t-h4:         22px;
  --t-lead:       22px;     /* opening paragraph */
  --t-body:       17px;
  --t-small:      14px;
  --t-eyebrow:    12px;     /* uppercase labels */
  --t-micro:      11px;

  --lh-tight:     1.04;   /* @kind font */
  --lh-snug:      1.18;   /* @kind font */
  --lh-default:   1.55;   /* @kind font */
  --lh-prose:     1.7;    /* @kind font */

  --ls-display:   -0.018em;  /* @kind font */
  --ls-body:      0.005em;   /* @kind font */
  --ls-eyebrow:   0.22em;    /* @kind font */

  /* ============================================================
     ELEVATION + RADIUS + MOTION  (used across UI kit)
     ============================================================ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;          /* default; restrained */
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 12px 30px -12px rgba(0,0,0,0.55);
  --shadow-3: 0 30px 80px -30px rgba(0,0,0,0.7);
  --glow-ember: 0 0 60px -10px rgba(196,119,60,0.45);

  --ease-out:   cubic-bezier(0.16, 0.84, 0.30, 1.00);  /* @kind other */ /* cinematic ease */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1.00);  /* @kind other */
  --dur-fast:   220ms;      /* @kind other */
  --dur-base:   520ms;      /* @kind other */
  --dur-slow:   1100ms;     /* @kind other */ /* slow fades, glow transitions */

  /* Spacing — 4px base, generous luxury rhythm */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;
}

/* Light theme override (rare — for printable docs / quiet pages) */
.theme-light {
  --bg:           var(--paper);
  --bg-elevated:  #fbf6e9;
  --bg-raised:    #ffffff;
  --fg:           var(--charcoal);
  --fg-muted:     var(--stone);
  --fg-subtle:    #9c958a;
  --accent:       var(--bronze);
  --accent-deep:  var(--scapes-olive);
  --brand:        var(--scapes-olive);
  --border:       rgba(34, 28, 22, 0.10);
  --border-strong:rgba(34, 28, 22, 0.20);
  --divider:      rgba(34, 28, 22, 0.07);
}

/* ============================================================
   BASE  +  SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-default);
  letter-spacing: var(--ls-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* No slanted serif anywhere: neutralize the browser's default em/i italic so
   every emphasis renders upright in Manrope. Context rules still add the
   sandstone gold / weight where emphasis needs to read. */
em, i, cite, address { font-style: normal; }

/* HERO — the cinematic opener, e.g. "Where Luxury Takes Root." */
.t-hero,
h1.hero {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--linen);
  text-wrap: balance;
}
.t-hero em, h1.hero em {
  font-style: normal; 
  font-weight: 400;
  color: var(--scapes-sandstone);
}

/* DISPLAY — section openers */
.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

/* H1–H4 */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.006em;
}
h4, .t-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: 0;
}

/* Lead paragraph — opening statement under hero */
.t-lead {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--mist);
  max-width: 32ch;
}

/* Body prose */
p, .t-body {
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--fg);
  max-width: 62ch;
  text-wrap: pretty;
}
p + p { margin-top: 1em; }

/* Small / metadata */
.t-small  { font-size: var(--t-small);  color: var(--fg-muted); line-height: 1.55; }
.t-micro  { font-size: var(--t-micro);  color: var(--fg-subtle); line-height: 1.5; }

/* EYEBROW — section label, uppercase, tracked */
.t-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.t-eyebrow--muted { color: var(--fg-subtle); }

/* Tagline (logo subtitle echo): "Environmental Design, Inc." */
.t-tag {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--mist);
}

/* Inline rule used between display lines, e.g. ┄ */
.t-rule {
  display: inline-block;
  width: 48px;
  border-top: 1px solid var(--accent);
  vertical-align: middle;
  margin: 0 var(--space-4);
}

/* Link */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--firelight); border-bottom-color: currentColor; }

/* Selection */
::selection { background: var(--bronze); color: var(--paper); }