/* ============================================================
   Chani Cutler Interiors — bundled theme
   (design tokens + base element styles, self-contained; no build step)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Jost:wght@400;500&family=Mulish:wght@400;600;700&display=swap");

:root{
  /* Base palette */
  --ink:#171717;
  --ink-soft:#2c2a28;
  --ivory:#F5F0E6;
  --ivory-light:#FBF7F0;
  --ivory-deep:#ECE4D6;
  --terracotta:#C14F2E;
  --terracotta-dark:#A33F22;
  --olive:#48452B;
  --olive-light:#5C5836;
  --line:#dcd2c2;
  --muted:#6f685e;

  /* Text on dark surfaces */
  --text-on-ink:#d8cfc1;
  --text-on-ink-dim:#cabfb0;
  --text-on-olive:#e7e2d2;
  --text-footer-dim:#8c8378;

  /* Semantic aliases */
  --text-heading:var(--ink);
  --text-body:var(--ink-soft);
  --text-muted:var(--muted);
  --surface-page:var(--ivory-light);
  --surface-section:var(--ivory);
  --surface-section-deep:var(--ivory-deep);
  --surface-card:var(--ivory-light);
  --surface-ink:var(--ink);
  --surface-olive:var(--olive);
  --accent:var(--terracotta);
  --accent-hover:var(--terracotta-dark);
  --border:var(--line);
  --focus-ring:rgba(193,79,46,.12);

  /* Type */
  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-accent:"Jost", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Mulish", "Helvetica Neue", Arial, sans-serif;
  --text-h1:clamp(2.6rem,6vw,4.5rem);
  --text-h2:clamp(2rem,4.4vw,3.1rem);
  --text-h3:clamp(1.4rem,2.6vw,1.9rem);
  --text-lead:clamp(1.1rem,1.6vw,1.32rem);
  --text-body-size:17px;
  --leading-body:1.7;
  --leading-heading:1.1;
  --eyebrow-size:.72rem;
  --eyebrow-tracking:.34em;
  --label-size:.72rem;
  --label-tracking:.16em;
  --btn-size:.82rem;
  --btn-tracking:.18em;
  --textlink-size:.78rem;
  --textlink-tracking:.16em;

  /* Layout / radius / shadow */
  --maxw:1200px;
  --radius:14px;
  --radius-input:10px;
  --radius-pill:50px;
  --radius-arch:50% 50% 8px 8px / 26% 26% 8px 8px;
  --shadow:0 18px 50px -24px rgba(23,23,23,.35);
}

/* Base element styles */
*{box-sizing:border-box}
body{
  font-family:var(--font-body);
  color:var(--text-heading);
  background:var(--surface-page);
  line-height:var(--leading-body);
  font-size:var(--text-body-size);
  -webkit-font-smoothing:antialiased;
  margin:0;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--leading-heading);
  letter-spacing:.2px;
  color:var(--text-heading);
  margin:0;
}
h1{font-size:var(--text-h1)}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3)}
p{margin:0 0 1.1rem;color:var(--text-body)}
a{color:inherit;text-decoration:none}
label{
  display:block;
  font-family:var(--font-accent);
  font-size:var(--label-size);
  letter-spacing:var(--label-tracking);
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:.45rem;
}
input,select,textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--text-heading);
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius-input);
  padding:.85rem 1rem;
  transition:.2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}
textarea{min-height:140px;resize:vertical}

/* Skip link (accessibility) */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ivory-light);padding:.7rem 1.2rem;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* About page: headshot follows scroll on desktop only — never pinned on mobile */
.about-photo{position:sticky;top:110px}
@media(max-width:820px){
  .about-photo{position:static;top:auto}
}

/* Scroll-reveal (progressive enhancement — hidden only once .rv is set by dc-lite.js) */
html{scroll-behavior:smooth}
.rv [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.rv [data-reveal].rv-in{opacity:1;transform:none}
