/*
 * Cosmic Sol Glo — styles.css
 * Built per design-direction.md (Stage 16). Warm cream "day" descending through a
 * lavender band into deep-navy "night" bands — the brand name enacted spatially.
 * Signature: the "solar rule" — a gold sunburst-derived hairline beneath every headline.
 */

/* ============================================================
   @font-face — self-hosted brand fonts
   (Asterina binary is auth-locked at source; Georgia is the brand-guide-
    sanctioned serif fallback until the operator drops fonts/asterina.woff(2).)
   ============================================================ */
@font-face { font-family:'Asterina'; src:url('../fonts/asterina.woff2') format('woff2'), url('../fonts/asterina.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Rhode White'; src:url('../fonts/Rhode-White.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-Light-Itl.woff2') format('woff2'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-Med.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-Med-Itl.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-SemiBold-Itl.woff2') format('woff2'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Ofelia'; src:url('../fonts/Ofelia-Bold_Itl.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  /* semantic */
  --color-primary:#0A2750;        /* Cosmos navy */
  --color-primary-dark:#061B38;   /* Midnight deep — footer */
  --color-secondary:#8F66D8;      /* Cosmic violet */
  --color-accent:#BE8900;         /* Solar gold */
  --color-bg:#FFFBF1;             /* Cloud cream */
  --color-surface:#FBF4E3;        /* Vanilla surface */
  --color-text:#0A2750;
  --color-text-secondary:#00416D; /* Midnight */
  --color-on-dark:#FFFBF1;
  --color-border:#E5DBCB;

  /* full brand-guide palette */
  --color-cosmos:#0A2750; --color-midnight:#00416D; --color-violet:#8F66D8;
  --color-lavender:#EBDAF8; --color-cloud:#FFFBF1; --color-blush:#FFC1FF;
  --color-peach:#FFA445; --color-sunshine:#FFCF30; --color-moon:#F9E664; --color-gold:#BE8900;

  /* per-scrub keyline hues (drawn from the brand palette to match each product) */
  --scrub-solar:#BE8900;
  --scrub-cosmic:#FFC1FF;
  --scrub-tropical:#FFA445;
  --scrub-honey:#FFCF30;
  --scrub-twilight:#8F66D8;

  /* fonts */
  --font-display:'Asterina', Georgia, 'Times New Roman', serif;
  --font-body:'Ofelia', Georgia, 'Times New Roman', serif;
  --font-script:'Rhode White', 'Snell Roundhand', cursive;

  --font-size-base:16px;

  /* spacing */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:80px; --space-8:104px; --space-9:136px;

  --maxw:1200px;
  --measure:64ch;

  --nav-h:80px;

  /* motion */
  --motion-duration:300ms;
  --motion-duration-slow:480ms;
  --motion-ease:cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   Base Reset
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html { font-size:var(--font-size-base); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:var(--font-body);
  font-weight:400;
  background-color:var(--color-bg);
  color:var(--color-text);
  line-height:1.7;
  padding-bottom:42px; /* required */
  overflow-x:hidden;   /* page-level only; never on text containers */
  -webkit-font-smoothing:antialiased;
}

img, video { max-width:100%; height:auto; display:block; }

a { color:var(--color-accent); text-decoration:none; }

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

::selection { background:var(--color-lavender); color:var(--color-primary); }

/* ============================================================
   Typography
   ============================================================ */
.display { font-family:var(--font-display); font-weight:400; font-size:clamp(2.75rem, 6vw, 4.75rem); line-height:1.04; letter-spacing:-0.01em; }
h1, .h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(2.25rem, 4.5vw, 3.5rem); line-height:1.08; letter-spacing:-0.005em; }
h2, .h2 { font-family:var(--font-display); font-weight:400; font-size:clamp(1.75rem, 3.4vw, 2.5rem); line-height:1.15; }
h3, .h3 { font-family:var(--font-body); font-weight:600; font-size:clamp(1.25rem, 2vw, 1.6rem); line-height:1.25; }
h4, .h4 { font-family:var(--font-body); font-weight:700; font-size:1.125rem; line-height:1.3; letter-spacing:0.01em; }

.eyebrow {
  font-family:var(--font-body); font-weight:500; font-size:0.8125rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--color-text-secondary);
  margin:0;
}
.eyebrow--gold { color:var(--color-accent); }
.eyebrow--on-dark { color:var(--color-accent); }

.lead { font-family:var(--font-body); font-weight:300; font-size:clamp(1.125rem, 1.6vw, 1.375rem); line-height:1.6; }
.body { font-size:1.0625rem; line-height:1.7; max-width:var(--measure); }
.small { font-size:0.9375rem; line-height:1.6; }
.script { font-family:var(--font-script); font-weight:400; }

p { max-width:var(--measure); }
strong { font-weight:600; }

/* ============================================================
   Solar rule — the site-wide signature (gold sunburst hairline)
   ============================================================ */
.solar-rule {
  position:relative; width:64px; height:14px; margin:var(--space-2) 0 var(--space-3);
}
.solar-rule::before {
  content:''; position:absolute; left:0; bottom:0; width:64px; height:0;
  border-top:2px solid var(--color-accent);
}
/* diverging fine rays drawn with stacked conic-free pure borders */
.solar-rule span, .solar-rule i { display:none; }
.solar-rule::after {
  content:''; position:absolute; left:14px; bottom:1px; width:36px; height:13px;
  /* three fans via repeating linear ticks */
  background:
    linear-gradient(28deg, transparent 47%, var(--color-accent) 47%, var(--color-accent) 53%, transparent 53%) no-repeat left bottom / 12px 13px,
    linear-gradient(0deg,  transparent 47%, var(--color-accent) 47%, var(--color-accent) 53%, transparent 53%) no-repeat center bottom / 2px 13px,
    linear-gradient(-28deg, transparent 47%, var(--color-accent) 47%, var(--color-accent) 53%, transparent 53%) no-repeat right bottom / 12px 13px;
  opacity:0.95;
}
.solar-rule--center { margin-left:auto; margin-right:auto; }
.solar-rule--on-dark::before { border-top-color:var(--color-accent); }

/* ============================================================
   Layout helpers
   ============================================================ */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space-3); }
.section { padding-block:var(--space-8); }
.section--tight { padding-block:var(--space-7); }
.band-cream { background:var(--color-bg); }
.band-surface { background:var(--color-surface); }
.band-lavender { background:var(--color-lavender); color:var(--color-primary); }
.band-navy { background:var(--color-primary); color:var(--color-on-dark); }
.eyebrow + .solar-rule { margin-top:var(--space-1); }

/* ============================================================
   Buttons
   ============================================================ */
.btn { display:inline-block; font-family:var(--font-body); font-weight:600; font-size:0.9375rem;
  letter-spacing:0.04em; text-transform:uppercase; padding:14px 30px; border-radius:2px;
  border:1px solid transparent; cursor:pointer; transition:background var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease); }
.btn-ghost { color:var(--color-accent); border-color:var(--color-accent); background:transparent; }
.btn-ghost:hover, .btn-ghost:focus-visible { background:var(--color-accent); color:var(--color-primary); } /* navy on gold ≈ 4.9:1 */
.btn-gold { background:var(--color-accent); color:var(--color-primary); border-color:var(--color-accent); }
.btn-gold:hover, .btn-gold:focus-visible { background:var(--color-primary); border-color:var(--color-accent); color:var(--color-accent); } /* gold on navy — approved combo, ~4.9:1 */
.btn-pill { background:var(--color-bg); color:var(--color-text); border-radius:999px; padding:13px 28px; }
.btn-pill:hover, .btn-pill:focus-visible { background:var(--color-lavender); }
.btn-ghost-light { color:var(--color-on-dark); border-color:rgba(255,251,241,0.5); background:transparent; }
.btn-ghost-light:hover, .btn-ghost-light:focus-visible { border-color:var(--color-accent); color:var(--color-accent); }

/* text link with gold underline grow */
.tlink { color:var(--color-accent); font-weight:600; position:relative; display:inline-block; }
.tlink::after { content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px; background:currentColor; transition:right var(--motion-duration) var(--motion-ease); }
.tlink:hover::after, .tlink:focus-visible::after { right:0; }

/* ============================================================
   Skip link (accessibility)
   ============================================================ */
.skip-link {
  position:absolute; left:8px; top:8px; z-index:300;
  transform:translateY(-150%); transition:transform var(--motion-duration) var(--motion-ease);
  background:var(--color-primary); color:var(--color-on-dark);
  font-family:var(--font-body); font-size:0.9375rem; letter-spacing:0.02em;
  padding:10px 16px; border-radius:6px; text-decoration:none;
}
.skip-link:focus { transform:translateY(0); outline:2px solid var(--color-accent); outline-offset:2px; }

/* ============================================================
   Navigation — centered logo, split menu, scroll-away
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-height:var(--nav-h); padding:8px clamp(16px, 4vw, 40px);
  background:color-mix(in srgb, var(--color-bg) 84%, transparent);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  transition:transform var(--motion-duration) var(--motion-ease);
}
.nav.is-hidden { transform:translateY(calc(-100% - 80px)); }
.nav__side { display:flex; align-items:center; min-width:0; }
.nav__side--left { justify-content:flex-end; }
.nav__side--right { justify-content:flex-start; }
.nav__links { display:flex; gap:clamp(16px, 2.5vw, 36px); list-style:none; align-items:center; }
/* Hanging celestial seal — slim nav line holds; the intact stacked logo is enlarged
   and overhangs below the hairline, backed by a soft cream "glo" halo for legibility. */
.nav__logo { position:relative; justify-self:center; align-self:center; height:var(--nav-h); width:clamp(150px, 17vw, 188px); display:flex; justify-content:center; }
.nav__logo::before { content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:144px; height:144px; border-radius:50%; background:var(--color-bg); border:1px solid color-mix(in srgb, var(--color-primary) 32%, transparent); pointer-events:none; z-index:0; }
.nav__seal { position:absolute; top:8px; left:50%; transform:translateX(-50%); height:clamp(100px, 11vw, 118px); width:auto; display:block; z-index:1; filter:drop-shadow(0 6px 14px color-mix(in srgb, var(--color-primary) 20%, transparent)); }
.nav__link {
  font-family:var(--font-body); font-weight:500; font-size:0.9375rem; /* 15px legibility floor */
  letter-spacing:0.02em; color:var(--color-text-secondary); position:relative; padding:6px 2px;
  transition:color var(--motion-duration) var(--motion-ease);
}
.nav__link::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--color-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--motion-duration) var(--motion-ease); }
.nav__link:hover { color:var(--color-secondary); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform:scaleX(1); }
.nav__link[aria-current="page"] { color:var(--color-primary); }

.nav__toggle { display:none; background:none; border:0; cursor:pointer; color:var(--color-primary); padding:8px; font-size:1.6rem; line-height:1; }
.nav__toggle i { display:block; }

/* mobile drawer */
.nav__drawer { display:none; }

@media (max-width:860px) {
  .nav { grid-template-columns:1fr auto 1fr; }
  .nav__links { display:none; }
  .nav__side--left { justify-content:flex-start; }
  .nav__toggle { display:block; }
  .nav__logo { justify-self:center; height:var(--nav-h); width:clamp(112px, 32vw, 148px); }
  .nav__logo::before { top:6px; width:112px; height:112px; }
  .nav__seal { top:8px; height:clamp(80px, 22vw, 98px); }
  .nav__drawer {
    display:block; position:fixed; inset:0; z-index:200;
    background:var(--color-bg);
    transform:translateY(-100%); transition:transform var(--motion-duration-slow) var(--motion-ease);
    padding:84px var(--space-4) var(--space-5);
  }
  .nav__drawer.is-open { transform:translateY(0); }
  .nav__drawer-close { position:absolute; top:20px; right:20px; background:none; border:0; font-size:1.8rem; color:var(--color-primary); cursor:pointer; }
  .nav__drawer ul { list-style:none; display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-4); }
  .nav__drawer a { font-family:var(--font-display); font-size:2rem; color:var(--color-primary); }
  .nav__drawer a[aria-current="page"] { color:var(--color-accent); }
  body.drawer-open { overflow:hidden; }
}

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity var(--motion-duration-slow) var(--motion-ease), transform var(--motion-duration-slow) var(--motion-ease); }
.reveal.is-in { opacity:1; transform:none; }
.reveal[data-delay="1"] { transition-delay:90ms; }
.reveal[data-delay="2"] { transition-delay:180ms; }
.reveal[data-delay="3"] { transition-delay:270ms; }
.reveal[data-delay="4"] { transition-delay:360ms; }

/* Respect users who prefer reduced motion: kill animation/transition,
   and make reveal content visible immediately so nothing stays hidden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* ============================================================
   HERO (index)
   ============================================================ */
.hero { position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; }
.hero__media { position:absolute; inset:0; overflow:hidden; }
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:30% 38%; }
.hero__glow { position:absolute; left:0; right:0; bottom:0; height:48%; width:100%; object-fit:cover;
  opacity:0.16; mix-blend-mode:screen; pointer-events:none; }
.hero::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 30%, color-mix(in srgb, var(--color-primary) 30%, transparent) 66%, color-mix(in srgb, var(--color-primary) 80%, black) 100%),
             linear-gradient(to right, color-mix(in srgb, var(--color-primary) 50%, transparent) 0%, transparent 64%); }
.hero__content { position:relative; z-index:2; align-self:flex-start; width:100%; max-width:39rem; min-width:0;
  padding:clamp(32px,6vw,64px) clamp(20px,5vw,72px) clamp(48px,7vw,88px); }
.hero__tagline { font-family:var(--font-script); color:var(--color-on-dark); font-size:clamp(1.5rem, 3.2vw, 2.2rem); line-height:1.1; margin-bottom:0.2em; text-shadow:0 1px 18px rgba(6,27,56,0.5); }
.hero__headline { font-family:var(--font-display); color:var(--color-on-dark); font-size:clamp(2.4rem, 4.6vw, 3.6rem); line-height:1.07; margin-bottom:var(--space-2); text-shadow:0 2px 26px rgba(6,27,56,0.5); }
.hero__sub { color:color-mix(in srgb, var(--color-on-dark) 90%, transparent); font-weight:300; font-size:clamp(1.05rem,1.7vw,1.3rem); max-width:42ch; margin-bottom:var(--space-4); line-height:1.6; }
.hero .solar-rule::before { box-shadow:0 0 14px rgba(190,137,0,0.7); }

/* ============================================================
   THE PROMISE (asymmetric + plumeria clip)
   ============================================================ */
.promise { position:relative; overflow:visible; }
.promise__grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); align-items:center; gap:var(--space-5); }
.promise__text { min-width:0; max-width:54ch; }
.promise__media { position:relative; min-width:0; align-self:stretch; }
.promise__media img { width:60%; min-width:280px; margin-left:auto; margin-right:calc(-1 * clamp(16px,5vw,72px)); border-radius:2px 0 0 2px; aspect-ratio:4/5; object-fit:cover; object-position:center; }
@media (max-width:820px) {
  .promise__grid { grid-template-columns:1fr; gap:var(--space-4); }
  .promise__media img { width:78%; margin-right:calc(-1 * var(--space-3)); }
}

/* ============================================================
   CATEGORY RAIL (scrubs preview + gifting ideas)
   ============================================================ */
.rail__head { max-width:60ch; margin-bottom:var(--space-4); }
.rail__track {
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(220px, calc((100% - (var(--space-3) * 3.5)) / 4.5));
  gap:var(--space-3); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:var(--space-2);
  margin-inline:calc(-1 * var(--space-3)); padding-inline:var(--space-3);
}
.rail__track::-webkit-scrollbar { display:none; }
.rail__item { scroll-snap-align:start; display:block; min-width:0; }
.rail__media { overflow:hidden; aspect-ratio:4/5; border-radius:2px; background:var(--color-surface); }
.rail__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--motion-duration-slow) var(--motion-ease); }
.rail__item:hover .rail__media img, .rail__item:focus-visible .rail__media img { transform:scale(1.05); }
.rail__name { font-family:var(--font-display); font-size:1.4rem; color:var(--color-text); margin-top:var(--space-2); transition:color var(--motion-duration) var(--motion-ease); }
.rail__item:hover .rail__name, .rail__item:focus-visible .rail__name { color:var(--color-secondary); }
.rail__size { font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-text-secondary); margin-top:2px; }
.rail__line { font-size:0.95rem; color:var(--color-text-secondary); margin-top:6px; max-width:30ch; }
@media (max-width:768px) { .rail__track { grid-auto-columns:78%; -webkit-overflow-scrolling:touch; } }

/* ============================================================
   THE RITUAL (lavender split band)
   ============================================================ */
.ritual { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:540px; }
.ritual__media { position:relative; min-width:0; overflow:hidden; }
.ritual__media img { width:100%; height:100%; object-fit:cover; object-position:center; min-height:360px; }
.ritual__body { min-width:0; align-self:center; padding:clamp(40px,6vw,90px) clamp(24px,5vw,72px); max-width:60ch; }
.ritual__steps { list-style:none; display:grid; gap:var(--space-4); margin-top:var(--space-4); }
.ritual__step { display:grid; grid-template-columns:auto 1fr; gap:var(--space-3); align-items:baseline; }
.ritual__num { font-family:var(--font-display); font-size:2.4rem; line-height:1; color:var(--color-accent); }
.ritual__step h3 { font-family:var(--font-body); font-weight:500; }
.ritual__step p { margin-top:4px; color:var(--color-text-secondary); max-width:40ch; }
@media (max-width:820px) {
  .ritual { grid-template-columns:1fr; }
  .ritual__media img { min-height:300px; }
}

/* ============================================================
   FOUNDER SPOTLIGHT (navy night band, circular portrait)
   ============================================================ */
.founder { position:relative; overflow-x:clip; display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:var(--space-6); padding:clamp(64px,10vw,136px) clamp(24px,6vw,80px); }
.founder__story { min-width:0; max-width:46ch; display:grid; gap:var(--space-3); justify-items:start; position:relative; z-index:2; }
.founder__voice { font-family:var(--font-body); font-weight:300; font-style:italic; font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.5; color:var(--color-on-dark); max-width:none; }
.founder__sign { font-family:var(--font-body); opacity:0.85; letter-spacing:0.02em; }
.founder__portrait { position:relative; z-index:2; justify-self:center; width:clamp(15rem,26vw,21rem); aspect-ratio:1; }
.founder__portrait img { width:100%; height:100%; object-fit:cover; border-radius:50%;
  box-shadow:0 0 0 12px var(--color-bg), 0 24px 60px rgba(0,0,0,0.35); }
.starfield { position:absolute; inset:0; z-index:1; pointer-events:none; }
.starfield i { position:absolute; width:3px; height:3px; border-radius:50%; background:var(--color-accent); opacity:0.6; }
.starfield i.v { background:var(--color-secondary); }
.starfield i.lg { width:5px; height:5px; }
@media (max-width:820px) {
  .founder { grid-template-columns:1fr; justify-items:center; text-align:center; gap:var(--space-4); }
  .founder__story { justify-items:center; max-width:52ch; }
  .founder__portrait { order:-1; width:clamp(12rem,60vw,17rem); }
}

/* ============================================================
   CELESTIAL CTA (milky way closing band)
   ============================================================ */
.celestial { position:relative; min-height:70vh; display:flex; align-items:flex-end; justify-content:center; overflow-x:clip; text-align:center; }
.celestial__media { position:absolute; inset:0; }
.celestial__media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.celestial::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, color-mix(in srgb, #1a0d20 30%, transparent) 0%, transparent 35%, color-mix(in srgb, var(--color-primary) 55%, black) 100%); }
.celestial__content { position:relative; z-index:2; padding:clamp(48px,8vw,104px) var(--space-3); max-width:40ch; }
.celestial__tagline { font-family:var(--font-script); color:var(--color-on-dark); font-size:clamp(1.4rem,3vw,2rem); line-height:1.1; margin-bottom:0.15em; }
.celestial__headline { font-family:var(--font-display); color:var(--color-on-dark); font-size:clamp(2.25rem,5vw,3.75rem); line-height:1.08; margin-bottom:var(--space-4); text-shadow:0 2px 30px rgba(0,0,0,0.5); }

/* generic centered-low navy CTA band (interior pages) */
.nightcta { position:relative; overflow-x:clip; background:var(--color-primary); color:var(--color-on-dark); text-align:center; padding:clamp(64px,9vw,120px) var(--space-3); }
.nightcta__inner { position:relative; z-index:2; max-width:42ch; margin-inline:auto; }
.nightcta h2 { color:var(--color-on-dark); margin-bottom:var(--space-4); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--color-primary-dark); color:var(--color-on-dark); padding-block:var(--space-7) var(--space-4); }
.footer__grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--space-5); }
.footer__col { min-width:0; position:relative; }
.footer__col + .footer__col { padding-left:var(--space-4); }
/* hairline gold column dividers terminating in a 3-ray solar tick */
.footer__col + .footer__col::before { content:''; position:absolute; left:0; top:0; bottom:18px; width:1px; background:color-mix(in srgb, var(--color-accent) 70%, transparent); }
.footer__col + .footer__col::after { content:''; position:absolute; left:-5px; bottom:0; width:11px; height:8px;
  background:
    linear-gradient(28deg, transparent 46%, var(--color-accent) 46%, var(--color-accent) 54%, transparent 54%) no-repeat left bottom / 4px 8px,
    linear-gradient(0deg, transparent 46%, var(--color-accent) 46%, var(--color-accent) 54%, transparent 54%) no-repeat center bottom / 1px 8px,
    linear-gradient(-28deg, transparent 46%, var(--color-accent) 46%, var(--color-accent) 54%, transparent 54%) no-repeat right bottom / 4px 8px; }
.footer__wordmark { font-family:var(--font-display); font-size:1.9rem; color:var(--color-on-dark); letter-spacing:0.01em; line-height:1; }
.footer__tagline { font-family:var(--font-script); color:var(--color-moon); font-size:1.25rem; line-height:1.2; margin-top:6px; }
.footer__about { color:color-mix(in srgb, var(--color-on-dark) 80%, transparent); font-size:0.95rem; margin-top:var(--space-2); max-width:34ch; }
.footer__h { font-family:var(--font-body); font-weight:600; font-size:0.8125rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--space-2); }
.footer__list { list-style:none; display:grid; gap:10px; }
.footer__list a, .footer__contact a { color:color-mix(in srgb, var(--color-on-dark) 88%, transparent); font-size:0.9375rem; position:relative; }
.footer__list a::after { content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--color-accent); transition:right var(--motion-duration) var(--motion-ease); }
.footer__list a:hover::after { right:0; }
.footer__list a:hover, .footer__contact a:hover { color:var(--color-on-dark); }
.footer__contact { display:grid; gap:12px; color:color-mix(in srgb, var(--color-on-dark) 82%, transparent); font-size:0.9375rem; }
.footer__contact li { list-style:none; display:flex; gap:10px; align-items:flex-start; }
.footer__contact i { color:var(--color-accent); margin-top:2px; }
.footer__muted { color:color-mix(in srgb, var(--color-on-dark) 60%, transparent); }
.footer__bottom { margin-top:var(--space-6); padding-top:var(--space-3); border-top:1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); display:flex; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; font-size:0.8125rem; color:color-mix(in srgb, var(--color-on-dark) 70%, transparent); }
@media (max-width:820px) {
  .footer__grid { grid-template-columns:1fr 1fr; gap:var(--space-4); }
  .footer__col + .footer__col { padding-left:0; }
  .footer__col + .footer__col::before, .footer__col + .footer__col::after { display:none; }
  .footer__col:first-child { grid-column:1 / -1; }
}
@media (max-width:480px) { .footer__grid { grid-template-columns:1fr; } }

/* ============================================================
   PAGE HEADER (interior pages — asymmetric anchored title)
   ============================================================ */
.pagehead { position:relative; padding-block:calc(var(--nav-h) + var(--space-7)) var(--space-7); overflow-x:clip; }
.pagehead__grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:var(--space-5); align-items:center; }
.pagehead__text { min-width:0; max-width:52ch; }
.pagehead__media { position:relative; min-width:0; }
.pagehead__media img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; margin-right:calc(-1 * clamp(16px,5vw,72px)); }
.pagehead--bare { padding-block:calc(var(--nav-h) + var(--space-8)) var(--space-7); }
.pagehead--bare .pagehead__text { max-width:20ch; }
@media (max-width:820px) {
  .pagehead__grid { grid-template-columns:1fr; }
  .pagehead__media { display:none; } /* keep the editorial title room; image is supporting only */
}

/* ============================================================
   SCRUBS — alternating product rows
   ============================================================ */
.shared-panel { background:var(--color-surface); border-radius:2px; padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4); align-items:start; }
.shared-panel .item { min-width:0; }
.shared-panel .item h3 { font-family:var(--font-body); font-weight:600; font-size:1.05rem; margin-bottom:6px; }
.shared-panel .item p { font-size:0.95rem; color:var(--color-text-secondary); max-width:36ch; }
.shared-panel i { color:var(--color-accent); font-size:1.3rem; }
@media (max-width:760px) { .shared-panel { grid-template-columns:1fr; gap:var(--space-3); } }

.prow { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; padding-block:var(--space-7); position:relative; }
.prow + .prow { border-top:1px solid var(--color-border); }
.prow__media { position:relative; min-width:0; }
.prow__media .frame { overflow:hidden; border-radius:2px; aspect-ratio:5/4; background:var(--color-surface); }
.prow__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--motion-duration-slow) var(--motion-ease); }
.prow:hover .prow__media img { transform:scale(1.04); }
.prow__media--surface .frame { background:var(--color-surface); padding:0; }
.prow__body { min-width:0; max-width:46ch; border-left:2px solid var(--keyline, var(--color-accent)); padding-left:var(--space-3); }
.prow__name { font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.1rem); line-height:1.1; }
.prow__size { font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--color-text-secondary); margin:6px 0 var(--space-2); }
.prow__desc { font-weight:300; font-size:1.1rem; line-height:1.55; margin-bottom:var(--space-3); }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-3); }
.tag { font-family:var(--font-body); font-weight:500; font-size:0.8rem; letter-spacing:0.02em; background:color-mix(in srgb, var(--keyline, var(--color-accent)) 16%, var(--color-bg)); color:var(--color-text); border:1px solid color-mix(in srgb, var(--keyline, var(--color-accent)) 45%, transparent); padding:5px 12px; border-radius:999px; }
.prow details { margin-bottom:var(--space-3); border-top:1px solid var(--color-border); padding-top:var(--space-2); }
.prow summary { cursor:pointer; font-size:0.8125rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-text-secondary); list-style:none; display:flex; align-items:center; gap:8px; }
.prow summary::-webkit-details-marker { display:none; }
.prow summary i { transition:transform var(--motion-duration) var(--motion-ease); color:var(--color-accent); }
.prow details[open] summary i { transform:rotate(180deg); }
.prow details p { font-size:0.875rem; color:var(--color-text-secondary); margin-top:10px; max-width:48ch; }
.prow:nth-child(even of .prow) .prow__media { order:2; }
/* alternate: flip via explicit modifier for robustness */
.prow--flip .prow__media { order:2; }
.prow--flip .prow__body { order:1; }
.whats-inside { margin-top:var(--space-4); display:flex; gap:var(--space-3); align-items:center; background:var(--color-surface); border-radius:2px; padding:var(--space-3); }
.whats-inside img { width:120px; height:120px; object-fit:cover; border-radius:2px; flex:0 0 auto; }
.whats-inside p { font-size:0.95rem; color:var(--color-text-secondary); }
@media (max-width:820px) {
  .prow { grid-template-columns:1fr; gap:var(--space-3); }
  .prow--flip .prow__media { order:0; } .prow--flip .prow__body { order:0; }
  .prow:nth-child(even of .prow) .prow__media { order:0; }
  .whats-inside { flex-direction:column; align-items:flex-start; }
  .whats-inside img { width:100%; height:auto; aspect-ratio:16/9; }
}

/* care note — intimate handwritten-feel aside, not a warning box */
.care-note { font-family:var(--font-body); font-style:italic; font-weight:300; color:var(--color-text-secondary); font-size:1rem; max-width:46ch; margin-top:var(--space-3); padding-left:var(--space-2); border-left:2px solid color-mix(in srgb, var(--color-accent) 50%, transparent); }

/* ============================================================
   STORY — founder narrative w/ margin pull-quote
   ============================================================ */
.narrative { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,6vw,80px); align-items:start; }
.narrative__text { min-width:0; max-width:60ch; }
.narrative__text p { margin-bottom:var(--space-3); }
.narrative__text .voice { font-style:italic; font-weight:300; color:var(--color-text-secondary); }
.narrative__media { min-width:0; position:sticky; top:96px; }
.narrative__media img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center; border-radius:2px; }
.pullquote { font-family:var(--font-script); color:var(--color-accent); font-size:clamp(2rem,4vw,3rem); line-height:1.1;
  margin:var(--space-4) 0; padding-left:var(--space-3); border-left:2px solid var(--color-accent);
  /* the broadsheet move: break into the right margin on wide screens */ }
@media (min-width:1000px) {
  .pullquote { margin-right:-22%; border-left:0; border-right:2px solid var(--color-accent); border-left:0; padding-left:0; padding-right:var(--space-3); text-align:right; }
}
@media (max-width:900px) {
  .narrative { grid-template-columns:1fr; }
  .narrative__media { position:static; order:-1; max-width:420px; }
}

/* Script moment — one meaningful Rhode White pull-quote per view, layered over a
   photo so the artistic script reads as a graphic flourish that bleeds across the
   image edge (the same broadsheet move as the story pull-quote).
   Brand rule: Rhode White = the tagline + a single pull-quote per view. */
.scriptlayer { overflow-x:clip; padding-block:clamp(40px, 6vw, 88px); }
.scriptlayer__inner {
  position:relative; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--space-3); min-height:clamp(300px, 40vw, 460px);
}
.scriptlayer__media { position:absolute; top:0; bottom:0; right:var(--space-3); width:min(56%, 620px); }
.scriptlayer--flip .scriptlayer__media { right:auto; left:var(--space-3); }
.scriptlayer__media img { width:100%; height:100%; object-fit:cover; border-radius:2px; display:block;
  box-shadow:0 18px 50px -24px rgba(6,27,56,0.45); }

.scriptquote { font-family:var(--font-script); color:var(--color-accent); }
/* layered variant: oversized, vertically centred, straddling the photo's near edge */
.scriptquote--over {
  position:absolute; z-index:2; top:50%; transform:translateY(-50%);
  left:var(--space-3); right:36%; text-align:right; line-height:1.04;
  font-size:clamp(2.6rem, 7vw, 5rem);
  text-shadow:0 1px 2px var(--color-bg), 0 2px 22px color-mix(in srgb, var(--color-bg) 75%, transparent);
}
.scriptlayer--flip .scriptquote--over { left:36%; right:var(--space-3); text-align:left; }

@media (max-width:760px) {
  .scriptlayer__inner { min-height:clamp(320px, 72vw, 440px); }
  .scriptlayer__media,
  .scriptlayer--flip .scriptlayer__media { left:var(--space-3); right:var(--space-3); width:auto; }
  /* on small screens the script sits fully over the photo — add a soft scrim for legibility */
  .scriptlayer__media::after { content:''; position:absolute; inset:0; border-radius:2px;
    background:linear-gradient(105deg, color-mix(in srgb, var(--color-primary) 52%, transparent), color-mix(in srgb, var(--color-primary) 22%, transparent)); }
  .scriptquote--over,
  .scriptlayer--flip .scriptquote--over {
    left:var(--space-3); right:var(--space-3); text-align:center;
    font-size:clamp(2.2rem, 11vw, 3.4rem); color:var(--color-moon);
    text-shadow:0 1px 4px rgba(6,27,56,0.6), 0 2px 20px rgba(6,27,56,0.45);
  }
}

/* immersive band (story grounding ritual) */
.immersive { position:relative; min-height:78vh; display:flex; align-items:flex-end; justify-content:center; overflow-x:clip; text-align:center; }
.immersive__media { position:absolute; inset:0; }
.immersive__media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.immersive::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--color-primary) 78%, black) 100%); }
.immersive__content { position:relative; z-index:2; padding:clamp(48px,8vw,104px) var(--space-3); max-width:32ch; }
.immersive__content h2 { color:var(--color-on-dark); font-size:clamp(2rem,4.5vw,3.25rem); text-shadow:0 2px 26px rgba(0,0,0,0.5); }

/* on your vanity (split) */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,72px); align-items:center; }
.split__media { min-width:0; overflow:hidden; border-radius:2px; }
.split__media img { width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform var(--motion-duration-slow) var(--motion-ease); }
.split__media:hover img { transform:scale(1.04); }
.split__body { min-width:0; max-width:48ch; }
@media (max-width:820px) { .split { grid-template-columns:1fr; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { position:relative; overflow-x:clip; }
.contact__glow { position:absolute; right:-6%; top:10%; width:42%; max-width:520px; opacity:0.12; pointer-events:none; z-index:0; }
.contact__grid { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,6vw,80px); align-items:start; }
.contact__col { min-width:0; }
.contact-form { display:grid; gap:var(--space-3); max-width:44ch; }
.field { display:grid; gap:6px; }
.field label { font-family:var(--font-body); font-weight:500; font-size:0.8125rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-text-secondary); }
.field input, .field textarea {
  font-family:var(--font-body); font-size:1.0625rem; color:var(--color-text); background:transparent;
  border:0; border-bottom:1px solid var(--color-border); padding:10px 2px; width:100%;
  transition:border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
}
.field textarea { resize:vertical; min-height:120px; }
/* the field blooms to a gold solar-rule underline on focus — a tiny sunrise */
.field input:focus, .field textarea:focus { outline:none; border-bottom-color:var(--color-accent); box-shadow:0 2px 0 0 var(--color-accent), 0 8px 18px -12px rgba(190,137,0,0.8); }
.form-status { font-size:0.95rem; color:var(--color-accent); min-height:1.2em; font-style:italic; }
.findus { display:grid; gap:var(--space-3); }
.findus__item { display:flex; gap:12px; align-items:flex-start; }
.findus__item i { color:var(--color-accent); font-size:1.3rem; margin-top:2px; }
.findus__item h3 { font-family:var(--font-body); font-weight:600; font-size:1.05rem; }
.findus__item p, .findus__item .pending { color:var(--color-text-secondary); font-size:0.95rem; }
.pending-tag { display:inline-block; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent); border:1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); border-radius:999px; padding:2px 9px; margin-left:6px; }
@media (max-width:820px) { .contact__grid { grid-template-columns:1fr; } }

/* ============================================================
   404
   ============================================================ */
.nf { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:calc(var(--nav-h) + var(--space-6)) var(--space-3) var(--space-7); }
.nf .display { color:var(--color-primary); }
.nf p { margin:var(--space-2) auto var(--space-4); color:var(--color-text-secondary); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  .reveal { opacity:1; transform:none; }
  .nav { transition:none; }
}