/* ============================================================
   ROOTS TO RUBIES — REBRAND
   base.css : reset · tokens (3 art directions) · type · buttons · layout · chrome
   ============================================================ */

/* ---- Tokens : APOTHECARY (default / quiet-luxury editorial) ---- */
:root{
  --paper:        #F4F0E8;
  --paper-deep:   #ECE6DA;
  --surface:      #FBF8F2;
  --ink:          #1C1A17;
  --ink-soft:     #5A534A;
  --ruby:         #7B1E2B;
  --ruby-deep:    #4A121B;
  --gold:         #9C7C3C;
  --gold-text:    #836A33;
  --sage:         #6F7A64;
  --sage-soft:    #AEB39E;
  --on-accent:    #F6F1E7;

  /* feature ("invert") sections — dark on light pages */
  --feat-bg:      #1B2418;
  --feat-bg-2:    #131A11;
  --feat-ink:     #F1ECDF;
  --feat-soft:    #A7B097;
  --feat-gold:    #C9A45A;
  --feat-ruby:    #B6404F;

  /* hairlines / strokes */
  --rule:         color-mix(in oklab, var(--ink) 16%, transparent);
  --rule-strong:  color-mix(in oklab, var(--ink) 30%, transparent);
  --grain-opacity: .045;
  --grain-blend:  multiply;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Newsreader", Georgia, serif;
  --font-ui:      "Karla", -apple-system, sans-serif;
  --font-hand:    "Fraunces", Georgia, serif;
  --hand-style:   italic;
  --hand-weight:  340;

  --ease-soft:    cubic-bezier(.33,.02,.18,1);
  --measure:      60ch;
  --gutter:       clamp(1.25rem, 5vw, 4.5rem);
  --section-pad:  clamp(6.5rem, 15vw, 12rem);
  --radius-arch:  clamp(140px, 24vw, 280px);
  --radius-card:  4px;

  --display-tight: -.025em;
  --accent: var(--ruby);
}

/* ---- Tokens : LETTER (warm, intimate, hand-crafted) ---- */
[data-theme="letter"]{
  --paper:        #F3E7D2;
  --paper-deep:   #EAD8B9;
  --surface:      #FBF3E2;
  --ink:          #3A2A20;
  --ink-soft:     #6E5B4A;
  --ruby:         #8A2435;
  --ruby-deep:    #571320;
  --gold:         #B8964F;
  --gold-text:    #876327;
  --sage:         #7C8B72;
  --sage-soft:    #A9B49C;
  --on-accent:    #F8F1E3;

  --feat-bg:      #22301F;
  --feat-bg-2:    #18230F;
  --feat-ink:     #F6EEDD;
  --feat-soft:    #AEB89B;
  --feat-gold:    #D2A85A;
  --feat-ruby:    #C0495A;

  --grain-opacity: .08;
  --grain-blend:  multiply;

  --font-hand:    "Caveat", "Segoe Script", cursive;
  --hand-style:   normal;
  --hand-weight:  500;
  --radius-card:  14px;
  --display-tight: -.012em;
}

/* ---- Tokens : NOIR (moody atmospheric gallery) ---- */
[data-theme="noir"]{
  --paper:        #14180F;
  --paper-deep:   #0E120A;
  --surface:      #1C2317;
  --ink:          #EFE8D7;
  --ink-soft:     #A9B097;
  --ruby:         #C24454;
  --ruby-deep:    #7E2230;
  --gold:         #CDA85C;
  --gold-text:    #C8A258;
  --sage:         #8E9C7E;
  --sage-soft:    #7E8A6E;
  --on-accent:    #F6F1E7;

  --feat-bg:      #0B0E08;
  --feat-bg-2:    #05070300;
  --feat-ink:     #F1ECDF;
  --feat-soft:    #9AA388;
  --feat-gold:    #D6B264;
  --feat-ruby:    #CD4D5D;

  --rule:         color-mix(in oklab, var(--ink) 18%, transparent);
  --rule-strong:  color-mix(in oklab, var(--ink) 34%, transparent);
  --grain-opacity: .06;
  --grain-blend:  screen;
  --radius-card:  4px;
  --display-tight: -.028em;
}

/* ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  transition:background-color .8s var(--ease-soft), color .8s var(--ease-soft);
}

/* film grain — one fixed overlay, very quiet */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:6;
  opacity:calc(var(--grain-opacity) * var(--grain-mul, 1));
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzInIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9JzEnLz48L3N2Zz4=");
  mix-blend-mode:var(--grain-blend);
  transition:opacity .8s var(--ease-soft);
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
::selection{ background:var(--ruby); color:var(--on-accent); }

:focus-visible{ outline:2px solid var(--ruby); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:1rem; top:-4rem;
  background:var(--ruby); color:var(--on-accent);
  font-family:var(--font-ui); font-size:.875rem;
  padding:.6rem 1rem; border-radius:4px;
  z-index:100; transition:top .25s var(--ease-soft);
}
.skip-link:focus{ top:1rem; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============================================================
   Type system
   ============================================================ */
.eyebrow{
  font-family:var(--font-ui);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-text);
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{
  content:""; flex:none;
  width:2.4rem; height:1px; background:var(--gold);
}
.eyebrow--center{ justify-content:center; max-width:none; margin-inline:auto; }
.eyebrow--center::after{
  content:""; flex:none;
  width:2.4rem; height:1px; background:var(--gold);
}
.eyebrow--light{ color:var(--feat-soft); }
.eyebrow--light::before, .eyebrow--light::after{ background:var(--feat-gold); opacity:.7; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:320;
  line-height:1.04;
  letter-spacing:var(--display-tight);
  color:var(--ink);
  text-wrap:balance;
}
h1{
  font-size:calc(clamp(3rem, 1.7rem + 6.4vw, 7rem) * var(--display-scale, 1));
  font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 0;
  line-height:.98;
  font-weight:320;
}
h2{
  font-size:clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
  font-variation-settings:"opsz" 110;
  line-height:1.02;
}
h3{ font-size:clamp(1.375rem, 1.2rem + .85vw, 1.85rem); font-variation-settings:"opsz" 40; font-weight:320; }

em, .it{ font-style:italic; font-weight:inherit; }
h1 em, h2 em{ color:var(--ruby); font-weight:300; font-variation-settings:"opsz" 144, "SOFT" 60; }

.lede{
  font-size:clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:var(--measure);
  font-weight:380;
}
p{ max-width:var(--measure); }

.hand{
  font-family:var(--font-hand);
  font-style:var(--hand-style);
  font-weight:var(--hand-weight);
  font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
  color:var(--gold-text);
  line-height:1.4;
  letter-spacing:.005em;
  display:inline-block;
}

/* ============================================================
   Buttons & links
   ============================================================ */
.btn{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:.875rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 1.9rem;
  white-space:nowrap;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .35s var(--ease-soft), color .35s var(--ease-soft),
             border-color .35s var(--ease-soft), transform .35s var(--ease-soft),
             box-shadow .35s var(--ease-soft);
}
.btn svg{ flex:none; transition:transform .35s var(--ease-soft); }
.btn:hover svg{ transform:translateX(4px); }

.btn--primary{
  background:var(--ruby); color:var(--on-accent);
  box-shadow:0 1px 2px color-mix(in oklab, var(--ruby-deep) 30%, transparent),
             0 12px 30px -16px color-mix(in oklab, var(--ruby-deep) 70%, transparent);
}
.btn--primary:hover{ background:var(--ruby-deep); transform:translateY(-2px); }
.btn--primary:active{ transform:translateY(0); }

.btn--ghost{ background:transparent; color:var(--ruby); border-color:var(--rule-strong); }
.btn--ghost:hover{ border-color:var(--ruby); background:color-mix(in oklab, var(--ruby) 6%, transparent); transform:translateY(-2px); }

.btn--paper{ background:var(--on-accent); color:var(--ruby); }
.btn--paper:hover{ background:#fff; transform:translateY(-2px); }

.btn--ghost-light{ background:transparent; color:var(--on-accent); border-color:color-mix(in oklab, var(--on-accent) 40%, transparent); }
.btn--ghost-light:hover{ border-color:var(--on-accent); background:color-mix(in oklab, var(--on-accent) 9%, transparent); transform:translateY(-2px); }

.link-quiet{
  font-family:var(--font-ui); font-size:.9375rem; font-weight:600;
  color:var(--ruby); text-decoration:none;
  background-image:linear-gradient(var(--gold), var(--gold));
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:3px; transition:background-size .35s var(--ease-soft);
}
.link-quiet:hover{ background-size:30% 1px; }

/* ============================================================
   Layout helpers + editorial grid
   ============================================================ */
.container{ width:min(1240px, 100% - 2*var(--gutter)); margin-inline:auto; }
.container--wide{ width:min(1480px, 100% - 2*var(--gutter)); }
.section{ padding-block:var(--section-pad); position:relative; }

/* a hairline section rule with index, for editorial rhythm */
.rule-top{ border-top:1px solid var(--rule); }

.divider-botanical{ display:flex; justify-content:center; color:var(--sage); padding-block:.5rem; }
.divider-botanical svg{ width:min(220px, 40vw); height:auto; overflow:visible; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft), transform .45s var(--ease-soft);
}
.site-header.is-scrolled{
  background:color-mix(in oklab, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--rule);
}
.site-header.is-hidden{ transform:translateY(-100%); }

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.95rem; }
.header-progress{
  position:absolute; left:0; right:0; bottom:0; height:2px; display:block; pointer-events:none;
  background:linear-gradient(90deg, var(--ruby), var(--gold));
  transform:scaleX(0); transform-origin:0 50%;
  opacity:0; transition:opacity .4s var(--ease-soft);
}
.site-header.is-scrolled .header-progress{ opacity:1; }
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink); }
.brand-mark{ width:40px; height:40px; color:var(--ruby); flex:none; }
.brand-lockup{ flex:none; }
.brand-lockup .lg-gem{ fill:var(--ruby); }
.brand-lockup .lg-tag{ fill:var(--gold-text); font-family:var(--font-ui); }
.site-header--overlay:not(.is-scrolled) .brand-lockup .lg-gem,
.site-header--overlay:not(.is-scrolled) .brand-lockup .lg-tag,
.footer-brand .brand-lockup .lg-gem,
.footer-brand .brand-lockup .lg-tag{ fill:currentColor; }
.footer-brand .brand-lockup{ color:var(--feat-ink); }
.brand-name{ font-family:var(--font-display); font-size:1.25rem; font-weight:480; letter-spacing:.005em; line-height:1; font-variation-settings:"opsz" 40; }
.brand-name small{
  display:block; font-family:var(--font-ui); font-size:.58rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-text); margin-top:.35rem;
}

.nav-desktop{ display:flex; align-items:center; gap:clamp(1.4rem, 2vw, 2.25rem); }
.nav-desktop a:not(.btn){
  font-family:var(--font-ui); font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  background-image:linear-gradient(var(--ruby), var(--ruby));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:4px; transition:background-size .35s var(--ease-soft), color .35s var(--ease-soft);
}
.nav-desktop a:not(.btn):hover{ background-size:100% 1px; color:var(--ruby); }
.nav-desktop a:not(.btn).is-active{ color:var(--ruby); background-size:100% 1px; }
.nav-desktop .btn{ padding:.7rem 1.4rem; }

.menu-toggle{
  display:none; background:none; border:1px solid var(--rule-strong); border-radius:999px;
  width:48px; height:48px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.menu-toggle svg{ width:20px; height:20px; }
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-open{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

.nav-mobile{
  display:none; position:fixed; inset:0; z-index:49; background:var(--paper);
  padding:7rem var(--gutter) 3rem; flex-direction:column; gap:1.5rem;
}
.nav-mobile.is-open{ display:flex; }
.nav-mobile a:not(.btn){ font-family:var(--font-display); font-size:2.1rem; color:var(--ink); text-decoration:none; }
.nav-mobile .btn{ margin-top:1rem; align-self:flex-start; }

@media (max-width: 860px){
  .nav-desktop{ display:none; }
  .menu-toggle{ display:inline-flex; }
}
/* long button labels must never overflow small screens */
@media (max-width: 400px){
  .btn{ white-space:normal; text-align:center; justify-content:center; padding-inline:1.5rem; }
}

/* header over a dark hero: light chrome until scrolled */
.site-header--overlay:not(.is-scrolled) .brand{ color:var(--feat-ink); }
.site-header--overlay:not(.is-scrolled) .brand-mark{ color:var(--feat-gold); }
.site-header--overlay:not(.is-scrolled) .brand-name small{ color:var(--feat-gold); }
.site-header--overlay:not(.is-scrolled) .nav-desktop a:not(.btn){
  color:var(--feat-ink);
  background-image:linear-gradient(var(--feat-gold), var(--feat-gold));
}
.site-header--overlay:not(.is-scrolled) .nav-desktop a:not(.btn):hover,
.site-header--overlay:not(.is-scrolled) .nav-desktop a:not(.btn).is-active{ color:var(--feat-gold); }
.site-header--overlay:not(.is-scrolled) .menu-toggle{ color:var(--feat-ink); border-color:color-mix(in oklab, var(--feat-ink) 40%, transparent); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--feat-bg); color:var(--feat-soft); position:relative; overflow:hidden; }
.footer-roots{ display:flex; justify-content:center; color:color-mix(in oklab, var(--feat-gold) 60%, transparent); padding-top:clamp(3rem, 6vw, 4.5rem); }
.footer-roots svg{ width:min(420px, 70vw); height:auto; overflow:visible; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(2rem, 5vw, 4rem); padding-block:clamp(2.5rem, 5vw, 4rem); }
.footer-brand .brand-name{ color:var(--feat-ink); }
.footer-brand .brand-mark{ color:var(--feat-gold); }
.footer-brand p{ margin-top:1.25rem; font-size:.9688rem; line-height:1.6; max-width:34ch; color:var(--feat-soft); }
.footer-col h4{ font-family:var(--font-ui); font-size:.6875rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--feat-gold); margin-bottom:1.25rem; }
.footer-col ul{ list-style:none; display:grid; gap:.7rem; }
.footer-col a{ font-family:var(--font-ui); font-size:.9375rem; color:var(--feat-soft); text-decoration:none; transition:color .3s var(--ease-soft); }
.footer-col a:hover{ color:var(--feat-ink); }
.footer-base{
  border-top:1px solid color-mix(in oklab, var(--feat-soft) 22%, transparent);
  padding-block:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  font-family:var(--font-ui); font-size:.8125rem; color:color-mix(in oklab, var(--feat-soft) 75%, transparent);
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; } }

/* reveal defaults — content is visible by default; only when JS is present
   do we hold elements hidden, then transition them in (so a stalled frame
   loop can never strand content offscreen). */
[data-reveal]{ opacity:1; }
html.js [data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
  will-change:opacity, transform;
}
html.js [data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}