/*
  theme.css — Sky's Art · custom build (informed by T7-C, built from scratch)
  Variant contract: T7-C editorial — paper-white gallery ground, light display
  with black uppercase emphasis spans, Courier Prime price tags, 0px edges,
  dark only as bands. Loaded AFTER fonts.css → foundation-base.css →
  module-system.css, so tokens here win.
*/

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* ground */
  --color-bg:          #FDFCFA;
  --color-surface:     #F6F4F1;
  --color-surface-2:   #EFECE7;
  --color-surface-3:   #E8E4DE;
  --color-text:        #191419;
  --color-text-muted:  #6E6772;
  --color-text-dim:    #A9A3AD;
  --color-border:      #E5E1DB;
  --color-border-hi:   #CFC9C1;

  /* brand — every color has one job:
     primary  = the single accent thread on light ground (rules, hovers,
                inquire links, focus)
     secondary = gradient partner on the dusk band only
     on-dark  = the intake's white accent, reserved for ink on dark bands */
  --color-primary:    #ab00c2;
  --color-secondary:  #cc00c5;
  --color-on-dark:    #ffffff;
  --color-accent:     var(--color-primary);
  --color-accent-hi:  var(--color-secondary);
  --color-accent-dim: rgba(171, 0, 194, 0.09);
  --color-accent-2:   var(--color-secondary);
  --color-accent-2-dim: rgba(204, 0, 197, 0.10);

  /* dusk band (contact) — the twilight hero, condensed to a surface.
     Softened from near-black to a deep plum per the critique pass. */
  --band-bg:   #241832;
  --band-bg-2: #2F1D3E;
  --band-bg-3: #3B2549;
  --band-text: #F3EFF5;
  --band-muted: #B9ADC2;
  --band-border: rgba(255, 255, 255, 0.16);

  /* type */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-price:   'Courier Prime', 'Courier New', monospace;

  /* edges — variant C: hard */
  --radius-xs: 0px; --radius-sm: 0px; --radius: 0px;
  --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px;

  --shadow-sm: 0 2px 10px rgba(25, 20, 25, 0.05);
  --shadow:    0 10px 34px rgba(25, 20, 25, 0.09);
  --shadow-lg: 0 18px 60px rgba(25, 20, 25, 0.13);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.22s;

  --container: 1200px;
  --v-maxw: 1200px;

  /* L1 form tokens — derived from site palette, no standalone hex */
  --sl-accent:     var(--color-primary);
  --sl-accent-2:   var(--color-secondary);
  --sl-bg:         var(--color-bg);
  --sl-surface:    #ffffff;
  --sl-text:       var(--color-text);
  --sl-text-muted: var(--color-text-muted);
  --sl-border:     var(--color-border);
  --sl-radius:     0px;
  --sl-font:       var(--font-body);
}

/* keep the editorial page light regardless of OS preference */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #FDFCFA; --color-surface: #F6F4F1; --color-surface-2: #EFECE7;
    --color-text: #191419; --color-text-muted: #6E6772; --color-border: #E5E1DB;
  }
}

body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); }
a { color: var(--color-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-primary); }
/* Foundation's `a:hover, a:focus-visible` rule draws a 2px accent outline
   box on plain mouse hover — on this palette that's a floating magenta
   rectangle around every link-shaped control. Kill it for hover only;
   keyboard users keep the :focus-visible ring. Hover feedback is authored
   per control below (fill shift, underline sweep, border shift). */
a:hover:not(:focus-visible) { outline: none; }

.wrap { width: 100%; max-width: var(--v-maxw); margin-inline: auto; padding-inline: var(--container-padding, 1rem); }

/* ── Section rhythm — ruled, airy ───────────────────────────── */
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section + .section { border-top: 1px solid var(--color-border); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section h2, .display {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: 0.005em;
}
.section h2 strong, .display strong {
  font-family: var(--font-body); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; font-size: 0.92em;
}
.section__head { margin-bottom: clamp(2rem, 4.5vw, 3.5rem); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; }
.section__sub { color: var(--color-text-muted); max-width: 46ch; font-size: 0.98rem; }

/* ── Buttons (override Foundation) ──────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.82rem;
  padding: 0.95rem 1.9rem; border-radius: 0; border: 1px solid transparent;
  background: var(--color-text); color: var(--color-bg);
  text-decoration: none; min-height: 50px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.1s;
}
.btn:hover { filter: none; background: var(--color-primary); color: var(--color-on-dark); }
.btn:active { transform: scale(0.98); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-hi); }
.btn--ghost:hover { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn--on-dark { background: var(--color-on-dark); color: var(--band-bg); }
.btn--on-dark:hover { background: var(--color-secondary); color: var(--color-on-dark); }
.btn--ghost-dark { background: transparent; color: var(--color-on-dark); border-color: rgba(255,255,255,0.4); }
/* real color shift on hover — the dusk-band accent outline; text stays
   white (on-dark ink) for contrast against the photo */
.btn--ghost-dark:hover { background: transparent; border-color: var(--color-secondary); color: var(--color-on-dark); }

/* ── Nav ────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav { display: flex; align-items: center; gap: 1rem; min-height: 74px; max-width: var(--v-maxw); margin-inline: auto; padding: 0.5rem var(--container-padding, 1rem); justify-content: flex-start; }
.nav__brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--color-text); }
.nav__brand img { height: 42px; width: 42px; object-fit: cover; border-radius: 0; border: 1px solid var(--color-border); }
.nav__brand span { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.01em; }
.nav__links { display: none; list-style: none; gap: 1.9rem; margin-left: auto; }
.nav__links a { color: var(--color-text-muted); text-decoration: none; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; }
.nav__links a:hover { color: var(--color-primary); }
.nav__cta { margin-left: auto; min-height: 44px; padding: 0.55rem 1.35rem; font-size: 0.74rem; }
@media (min-width: 900px) { .nav__links { display: flex; } .nav__cta { margin-left: 2rem; } }

/* mobile disclosure menu — the section links stay reachable (critique) */
.nav__burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  background: transparent; border: 1px solid var(--color-border); border-radius: 0;
  cursor: pointer;
}
.nav__burger:hover { filter: none; border-color: var(--color-primary); }
.nav__burger span { display: block; width: 18px; height: 2px; background: var(--color-text); margin-inline: auto; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) { .nav__burger { display: none; } }
@media (max-width: 899.98px) {
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    padding: 0.5rem var(--container-padding, 1rem) 1rem;
    box-shadow: var(--shadow-sm);
  }
  .nav__links.open { display: flex; }
  .nav__links a { display: block; padding-block: 0.8rem; font-size: 0.85rem; }
}

/* ── Hero — full-bleed twilight photo, type bottom-left ─────── */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(86vh, 760px); padding-block: clamp(3rem, 8vw, 5.5rem);
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; background: var(--band-bg); }
.hero__bg-img { position: absolute; inset: -30% 0 0 0; background: center / cover no-repeat; background-position: bottom center; will-change: translate, scale; }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 8, 18, calc(var(--hero-overlay, 0.5) + 0.25)) 0%, rgba(13, 8, 18, calc(var(--hero-overlay, 0.5) - 0.15)) 55%, rgba(13, 8, 18, 0.12) 100%); }
.hero__content { position: relative; z-index: 1; color: var(--color-on-dark); max-width: 44rem; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.9rem, 8.5vw, 5.6rem); line-height: 0.98; letter-spacing: 0.01em;
  margin-bottom: 1.3rem;
}
.hero h1 strong { font-family: var(--font-body); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 0.9em; display: inline-block; }
.hero__sub { color: #E9E2EE; font-size: clamp(1rem, 1.5vw, 1.14rem); max-width: 44ch; margin-bottom: 2.3rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ── The collection — salon-hang wall ───────────────────────── */
.works { display: grid; gap: 2.25rem 1.5rem; }
@media (min-width: 900px) {
  .works { grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem); }
  .work--featured { grid-column: 1 / span 7; grid-row: span 2; }
  .work:not(.work--featured):nth-of-type(2) { grid-column: 9 / span 4; margin-top: clamp(1.5rem, 4vw, 3.5rem); }
  .work:not(.work--featured):nth-of-type(3) { grid-column: 8 / span 4; }
  .work:not(.work--featured):nth-of-type(4) { grid-column: 2 / span 6; }
  .work:not(.work--featured):nth-of-type(4) .work__media { aspect-ratio: 3 / 2; }
  .work-teaser { grid-column: 8 / span 4; align-self: center; }
  .work:not(.work--featured):nth-of-type(5) { grid-column: 7 / span 4; }
  .work:not(.work--featured):nth-of-type(6) { grid-column: 2 / span 4; }
  .work:not(.work--featured):nth-of-type(7) { grid-column: 8 / span 4; }
  .work:not(.work--featured):nth-of-type(8) { grid-column: 3 / span 4; }
}
.work { position: relative; display: flex; flex-direction: column; }
/* mobile: the featured piece keeps its hero status in the stacked column
   (taller 4/5 crop stays; a soft brand wash reinforces it — critique) */
@media (max-width: 899.98px) {
  .work--featured .work__mat {
    background: linear-gradient(180deg, #FFFFFF 55%, var(--color-accent-dim) 100%);
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  }
}
.work__mat {
  position: relative; background: #FFFFFF; border: 1px solid var(--color-border);
  padding: clamp(0.9rem, 2vw, 1.5rem); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.work:hover .work__mat { box-shadow: var(--shadow); border-color: var(--color-border-hi); }
.work__media { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.work--featured .work__media { aspect-ratio: 4 / 5; }
.work__badge {
  position: absolute; top: 1.4rem; left: 1.4rem;
  font-family: var(--font-price); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.64rem;
  background: var(--color-bg); color: var(--color-primary);
  border: 1px solid var(--color-primary); padding: 0.25rem 0.55rem;
}
.work__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 0.9rem; }
.work__name { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.work--featured .work__name { font-size: clamp(1.5rem, 2.5vw, 1.9rem); }
/* Courier stays — it's the T7-C price-tag token — but the price now outranks
   the provenance line (critique: price is a decision point). */
.work__price { font-family: var(--font-price); font-weight: 700; font-size: 1.2rem; white-space: nowrap; }
.work--featured .work__price { font-size: 1.35rem; }
.work__price s { color: var(--color-text-dim); margin-left: 0.45rem; font-size: 0.75em; }
.work__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.35rem; }
.work__note { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.work__note--sold { color: var(--color-primary); }
.work__inquire {
  font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-text); text-decoration: none;
  padding-bottom: 0.2rem; min-height: 0;
  background: linear-gradient(var(--color-border-hi), var(--color-border-hi)) left bottom / 100% 1px no-repeat,
              linear-gradient(var(--color-primary), var(--color-primary)) left bottom / 0% 2px no-repeat;
  transition: color var(--dur) var(--ease), background-size 0.3s var(--ease);
}
.work__inquire:hover { color: var(--color-primary); background-size: 100% 1px, 100% 2px; }

/* teaser card — makes the four-piece lower row deliberate (critique) */
.work-teaser {
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.work-teaser__line { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; max-width: 22ch; }
.work-teaser .work__inquire { align-self: flex-start; }

/* ── About — split with logo plate ──────────────────────────── */
.about__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .about__grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 5.5rem); } }
/* borderless plate (critique): the logo's own cream sheet floats on the
   paper ground like a physical print, carried by a soft shadow */
.about__plate { padding: clamp(0.5rem, 2vw, 1.5rem); }
.about__plate img { width: 100%; height: auto; box-shadow: var(--shadow); }
.about__body p { color: var(--color-text-muted); max-width: 56ch; margin-bottom: 1.1rem; font-size: 1.02rem; }
.about__body p.about__lede {
  font-family: var(--font-display); font-weight: 400; color: var(--color-text);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; max-width: 30ch;
  border-left: 3px solid var(--color-primary); padding-left: 1.1rem;
}
.about__sign { font-family: var(--font-price); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-top: 1.5rem; }

/* ── Gallery band (C2 mount) ────────────────────────────────── */
.gallery-band { background: var(--color-surface); }
#sovran-c2 .mod-section { padding: 0; }
#sovran-c2 .mod-wrap { max-width: none; }
#sovran-c2 .mod-eyebrow, #sovran-c2 .mod-h, #sovran-c2 .mod-sub { display: none; } /* section head is page-authored */
#sovran-c2 .mod-filters button:only-child { display: none; } /* single "All" chip is noise */
#sovran-c2 .c2-cat-pill { display: none; } /* one artist, one category — the pill adds nothing */
#sovran-c2 .c2-item { border: 1px solid var(--color-border); background: #fff; }

/* ── Contact — dusk band, split ─────────────────────────────── */
.contact-band {
  background: linear-gradient(160deg, var(--band-bg) 0%, var(--band-bg-2) 78%, var(--band-bg-3) 100%);
  color: var(--band-text);
}
/* bridge from the light gallery into the band (critique): a slim brand rule */
.section.contact-band { border-top: 3px solid var(--color-secondary); }
.contact-band h2 { color: var(--band-text); }
.contact-band .section__sub { color: var(--band-muted); }
.contact__grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 6vw, 5.5rem); } }
.contact__how { display: flex; flex-direction: column; gap: 1.4rem; }
.contact__how p { color: var(--band-muted); max-width: 48ch; }
.contact__how .contact__lede { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.25; color: var(--band-text); max-width: 30ch; }
.contact__line { display: flex; gap: 0.9rem; align-items: baseline; border-top: 1px solid var(--band-border); padding-top: 1.1rem; }
.contact__line-label { font-family: var(--font-price); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--band-muted); flex: 0 0 6.5rem; }
.contact__line a { color: var(--band-text); }
.contact__line a:hover { color: var(--color-secondary); }
.contact__line span { color: var(--band-text); }

/* the embedded L1 card sits on the dark band as a white plate */
.contact-band .sl-card { max-width: none; box-shadow: var(--shadow-lg); }

/* L1 submit speaks the site's button language: a confident fill shift to
   the gradient partner — not the module default's washed opacity fade
   (which Foundation's button:hover brightness makes look bleached) */
.contact-band .sl-btn { transition: background var(--dur) var(--ease), transform 0.1s; }
.contact-band .sl-btn:hover:not(:disabled) { opacity: 1; filter: none; background: var(--sl-accent-2); }

/* collapsed-footer L1 shell, re-tokenized to this build (white plate on
   the dusk band; display serif heading; toggle speaks .btn--ghost) */
.contact-band .l1-band { border: 1px solid var(--sl-border); box-shadow: var(--shadow-lg); }
/* the band-wide near-white h2 rule must not bleach this h2 — it sits on
   the white plate, not the dusk ground */
.contact-band .l1-band h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--sl-text); }
.contact-band .l1-toggle {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.78rem;
  padding: 0.85rem 1.5rem; min-height: 48px;
  border: 1px solid var(--color-border-hi); color: var(--color-text);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.contact-band .l1-toggle:hover,
.contact-band .l1-toggle[aria-expanded="true"] {
  filter: none; background: var(--color-accent-dim);
  border-color: var(--color-primary); color: var(--color-primary);
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; justify-content: space-between; align-items: flex-start; padding-block: 2.75rem 1rem; color: var(--color-text-muted); font-size: 0.88rem; }
.footer__brand { font-family: var(--font-display); font-weight: 400; color: var(--color-text); font-size: 1.3rem; }
.footer__tag { font-family: var(--font-price); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.3rem; }
.footer a { color: var(--color-text-muted); }
.footer a:hover { color: var(--color-primary); }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; }
.footer__links a { text-decoration: none; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; }
.footer__base { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; border-top: 1px solid var(--color-border); padding-block: 1.1rem 1.6rem; font-size: 0.78rem; color: var(--color-text-dim); }
.footer__credit a { color: var(--color-text-dim); text-decoration: none; }
.footer__credit a:hover { color: var(--color-text-muted); text-decoration: underline; }

/* ── Scroll reveal (respects reduced motion via Foundation) ─── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* hidden empty sections leave no band */
[data-section][hidden] { display: none; }

/* ── Hero split reveal + scroll parallax ─────────────────────
   Split/mask reveal (replaces the Ken Burns zoom): two paper panels part
   from the center seam once the hero image is ready (.hero--in, added by
   hydration with a failsafe so the hero can never stay covered), and the
   image settles from 1.05 scale as it is uncovered — the Step 3
   "a sketchbook came alive" reveal moment. The settle uses the individual
   `scale` property and the JS scroll parallax uses `translate`, so the
   two compose without fighting over `transform`. `overflow: clip` guards
   adjacent sections from animated hero media painting outside the band. */
.hero { overflow: clip; }
.hero::before, .hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50.5%; /* 1% center overlap — no seam flash */
  background: var(--color-bg); z-index: 2; pointer-events: none;
}
.hero::before { left: 0; }
.hero::after { right: 0; }
.hero--in::before { animation: hero-panel-l 1s var(--ease) 0.1s forwards; }
.hero--in::after  { animation: hero-panel-r 1s var(--ease) 0.18s forwards; }
@keyframes hero-panel-l { to { transform: translateX(-102%); } }
@keyframes hero-panel-r { to { transform: translateX(102%); } }
.hero__bg-img { transform-origin: center; }
.hero--in .hero__bg-img { animation: hero-settle 1.7s var(--ease) forwards; }
@keyframes hero-settle { from { scale: 1.05; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { display: none; } /* no cover: clean static hero */
  .hero__bg-img, .hero--in .hero__bg-img { animation: none; scale: none; translate: none; }
}