/* ============================================================
   COLORS — The Lightroom Studio
   A warm, paper-and-ink palette pulled straight from the studio
   site. Monochrome by default (ink on paper); amber and coral
   are reserved accents, used like a single hand-applied stroke.
   ============================================================ */

:root{
  /* ---- Base surfaces (warm paper whites) ---- */
  --paper:       #ffffff;  /* primary background */
  --paper-warm:  #fcfaf5;  /* warm card / band background */
  --cream:       #f6f2ea;  /* light text on dark, soft buttons */
  --paper-2:     #e8e2d6;  /* hover wash, raised warm surface */

  /* ---- Ink (near-black, warm) ---- */
  --ink:         #19160f;  /* darkest — dark sections, primary buttons */
  --ink-2:       #211d16;  /* footer / secondary dark */

  /* ---- Text ---- */
  --heading:     #19160f;  /* headlines, strong text */
  --body:        #3b352b;  /* paragraph body */
  --muted:       #857c6c;  /* captions, kickers, secondary */

  /* ---- Lines & hairlines ---- */
  --line:        rgba(25,22,15,.14);  /* standard rule */
  --line-soft:   rgba(25,22,15,.08);  /* faintest rule */
  --line-cream:  rgba(246,242,234,.16); /* rule on dark surfaces */

  /* ---- Accents (used sparingly) ---- */
  --amber:       #b07a36;  /* warm metallic accent */
  --amber-soft:  #d8b06a;  /* lighter amber, accent-on-dark */
  --coral:       #bb4f38;  /* clay/terracotta accent */
  --coral-soft:  #e08a6a;  /* lighter coral */

  /* ---- Semantic accent (monochrome by default) ----
     Flip --accent to a warm hue per surface/section, like the
     studio site does. Default keeps the system quiet. */
  --accent:      var(--heading);  /* ink on light surfaces */
  --accent-deep: var(--cream);    /* cream on dark surfaces */

  /* ---- Component aliases ---- */
  --surface:        var(--paper);
  --surface-warm:   var(--paper-warm);
  --surface-card:   #ffffff;
  --surface-dark:   var(--ink);
  --text-heading:   var(--heading);
  --text-body:      var(--body);
  --text-muted:     var(--muted);
  --border:         var(--line);
  --nav-solid:      rgba(255,255,255,.92);

  /* ---- Focus ---- */
  --focus-ring:     var(--accent);
}
      /* palette + semantic aliases  */
/* ============================================================
   TYPOGRAPHY — The Lightroom Studio
   Two voices: a large italic-capable display serif for the
   "art-brochure" headlines, and a quiet humanist sans for UI
   and body. Kickers are the connective tissue — small, wide,
   uppercase, often numbered.
   ============================================================ */

:root{
  /* ---- Display scale (serif, fluid) ----
     Headlines run tight: line-height ~1, negative tracking,
     weight 500. Italics are the emphasis device. */
  /* hero h1 */            --display-hero: clamp(46px, 8.2vw, 118px); /* @kind font */
  /* big statement */      --display-1:    clamp(40px, 6.6vw, 98px);  /* @kind font */
  /* section headline */   --display-2:    clamp(34px, 4.6vw, 68px);  /* @kind font */
  /* sub-section */        --display-3:    clamp(30px, 3.8vw, 54px);  /* @kind font */
  /* card / panel title */ --display-4:    clamp(28px, 3.0vw, 40px);  /* @kind font */
  /* pull-quote */         --serif-quote:  clamp(18px, 2.2vw, 32px);  /* @kind font */

  --display-leading:  0.98;   /* headline line-height @kind font */
  --display-tracking: -0.015em; /* @kind font */
  --display-weight:   500; /* @kind font */

  /* ---- Body scale (sans) ---- */
  --text-lead:   clamp(15px, 1.15vw, 17px);  /* intro lead paragraph @kind font */
  --text-base:   clamp(15px, 1.1vw, 16.5px); /* standard body @kind font */
  --text-sm:     13.5px;                     /* captions, list sub @kind font */
  --text-xs:     12px;                       /* fine print @kind font */
  --body-leading: 1.62; /* @kind font */

  /* ---- Fonts ----
     These were previously undefined, so every font-family:var(--sans|--serif)
     fell back to the browser's default serif (Times). That rendered look is
     the approved site look; freeze it explicitly for cross-browser parity. */
  --sans:  Times, 'Times New Roman', serif;
  --serif: Times, 'Times New Roman', serif;
  --amber-dark: #bb4f38;

  /* ---- Kicker / eyebrow (sans) ---- */
  --kicker-size:    12px;
  --kicker-weight:  600;
  --kicker-tracking:.22em;

  /* ---- UI label (buttons, nav) ---- */
  --label-size:     12.5px;
  --label-weight:   600;
  --label-tracking: .12em;

  /* ---- Weights ---- */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
}

/* ---- Optional display personalities (mirror the site's tweak modes) ----
   Set data-display on :root to swap the headline serif. */
:root[data-display="fashion"]  { --serif: var(--font-serif-fashion); }
:root[data-display="literary"] { --serif: var(--font-serif-literary); }
  /* type scale + weights        */
/* ============================================================
   SPACING, RADII, SHADOWS, MOTION — The Lightroom Studio
   Generous editorial air. Sharp corners on "print" elements
   (buttons, frames), soft rounding on interactive cards.
   ============================================================ */

:root{
  /* ---- Spacing scale (8pt-ish, warm) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;
  --space-6:  30px;
  --space-7:  46px;
  --space-8:  72px;
  --space-9:  110px;

  /* ---- Layout rhythm ---- */
  --maxw:      1320px;                     /* content max width */
  --maxw-text: 720px;                      /* reading column */
  --pad:       clamp(22px, 5vw, 72px);     /* page gutter */
  /* vertical section rhythm */ --section-y: clamp(72px, 11vh, 140px); /* @kind spacing */

  /* ---- Radii ----
     Editorial = mostly sharp. Print elements 2px, interactive
     cards 12–16px, pills 999px. */
  --radius-sharp:  2px;   /* buttons, frames, ribbons */
  --radius-input:  10px;  /* fields */
  --radius-card:   12px;  /* option cards */
  --radius-lg:     16px;  /* panels, modals */
  --radius-pill:   999px; /* pill buttons, dots */

  /* ---- Shadows (warm, low, never blue) ---- */
  --shadow-xs:  0 2px 20px rgba(25,22,15,.07), 0 1px 4px rgba(25,22,15,.04);
  --shadow-sm:  0 4px 18px rgba(25,22,15,.07);
  --shadow-md:  0 18px 52px rgba(25,22,15,.08);
  --shadow-lg:  0 24px 60px rgba(25,22,15,.08);
  --shadow-xl:  0 34px 90px rgba(25,22,15,.23);
  --shadow-btn: 0 8px 26px rgba(25,22,15,.18);

  /* ---- Motion ----
     One signature ease. Calm, decisive, slightly overshooting. */
  --ease:       cubic-bezier(.2,.7,.3,1);    /* @kind other */
  --ease-apple: cubic-bezier(.25,.46,.45,.94); /* @kind other */
  --dur-fast:   .25s; /* @kind other */
  --dur:        .35s; /* @kind other */
  --dur-slow:   .55s; /* @kind other */
  --dur-reveal: 1s;   /* @kind other */

  /* ---- Z ---- */
  --z-nav:    60;    /* @kind other */
  --z-modal:  110;   /* @kind other */
}
     /* spacing, radii, shadow, motion */
/* ============================================================
   BASE & UTILITIES — The Lightroom Studio
   Element resets, focus, and the small set of utility classes
   the studio site leans on (serif, kicker, btn, textlink,
   frame). Tokens come from the files imported before this.
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:4px;
}

/* ---------- type helpers ---------- */
.serif{
  font-family:var(--serif);
  font-weight:var(--display-weight);
  line-height:var(--display-leading);
  letter-spacing:var(--display-tracking);
  color:var(--heading);
}
.serif em{ font-style:italic; font-weight:500; }

.kicker{
  font-family:var(--sans);
  font-size:var(--kicker-size);
  font-weight:var(--kicker-weight);
  letter-spacing:var(--kicker-tracking);
  text-transform:uppercase;
  color:var(--muted);
}
.kicker .n{ color:var(--accent); margin-right:12px; font-weight:700; }

.lead{
  font-size:var(--text-lead);
  line-height:1.6;
  color:var(--body);
}
.small-cap{
  font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:var(--label-size); font-weight:var(--label-weight);
  letter-spacing:var(--label-tracking); text-transform:uppercase;
  padding:14px 26px; border-radius:var(--radius-sharp);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:all var(--dur) var(--ease);
}
.btn .arr{ transition:transform var(--dur) var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-light{ background:var(--cream); color:var(--ink); }
.btn-light:hover{ background:#fff; }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--cream); border-color:rgba(246,242,234,.45); }
.btn-ghost:hover{ border-color:var(--cream); background:rgba(246,242,234,.08); }
.btn-ink-ghost{ background:transparent; color:var(--heading); border-color:var(--line); }
.btn-ink-ghost:hover{ border-color:var(--heading); }

/* ---------- text link ---------- */
.textlink{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--label-size); font-weight:600; letter-spacing:var(--label-tracking);
  text-transform:uppercase; color:var(--heading);
  padding-bottom:6px; border-bottom:1px solid var(--accent); width:fit-content;
}
.textlink .arr{ color:var(--accent); transition:transform var(--dur) var(--ease); }
.textlink:hover .arr{ transform:translateX(5px); }

/* ---------- placeholder frame (warm hatch) ---------- */
.frame{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(25,22,15,.025) 0 14px, transparent 14px 28px),
    linear-gradient(150deg,#ded6c7,#d2c8b6);
  display:flex; align-items:center; justify-content:center;
}
.frame.dark{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 16px, transparent 16px 32px),
    radial-gradient(120% 90% at 72% 22%, #2c2720 0%, #18140e 60%, #100d08 100%);
}

/* ---------- reveal (scroll-in) ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}
        /* resets + utility classes    */

/* Mobile navigation added during the static-site migration. */
.mobile-menu { display: none; position: relative; }
.mobile-menu summary {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--heading);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  list-style: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(78vw, 300px);
  padding: 10px;
  display: grid;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.mobile-menu__panel a {
  min-height: 44px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  color: var(--heading);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-sm);
}
.mobile-menu__panel a:last-child { border-bottom: 0; }
.mobile-menu__panel a[aria-current="page"] { color: var(--amber-dark); }
@media (max-width: 880px) {
  .mobile-menu { display: block; margin-left: auto; }
  header > .btn { display: none !important; }
}

/* Fashion Styling testimonial carousel. */
.styling-reviews {
  padding: clamp(22px, 3vh, 34px) var(--pad) clamp(18px, 2.5vh, 28px);
  overflow: hidden;
  background: #000;
  color: var(--cream);
  border-bottom: 1px solid rgba(246,242,234,.2);
}
.styling-reviews__head {
  max-width: var(--maxw);
  margin: 0 auto 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.styling-reviews__head .kicker { color: rgba(246,242,234,.65); }
.styling-reviews__controls { display: flex; gap: 10px; }
.styling-reviews__controls button {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(246,242,234,.35);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font-size: 17px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.styling-reviews__controls button:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.styling-reviews__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.styling-reviews__track::-webkit-scrollbar { display: none; }
.styling-review {
  flex: 0 0 100%;
  min-height: 0;
  padding: clamp(16px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  scroll-snap-align: start;
}
.styling-review__byline {
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(246,242,234,.7);
}
.styling-review__byline::after {
  content: '';
  width: 34px;
  height: 1px;
  margin: 18px auto 0;
  display: block;
  background: rgba(246,242,234,.55);
}
.styling-review blockquote {
  max-width: 30ch;
  font-family: var(--serif);
  font-size: clamp(22px, 2.25vw, 31px);
  font-weight: var(--display-weight);
  line-height: 1.24;
  color: var(--cream);
  text-wrap: balance;
}
.styling-reviews__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.styling-reviews__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(246,242,234,.4);
  cursor: pointer;
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.styling-reviews__dots button.is-active { width: 26px; background: var(--cream); }
@media (max-width: 600px) {
  .styling-reviews__head { align-items: flex-end; }
  .styling-review { min-height: 300px; padding: 14px 20px 20px; }
  .styling-review blockquote { font-size: clamp(21px, 6.4vw, 28px); text-wrap: pretty; }
}