/*
Theme Name: Jessica Shilling Stage1
Theme URI: https://stage1smarter21st.com
Author: S2C Web / Smarter 21st Century LLC
Author URI: https://smarter21st.com
Description: Staging theme for S2C-001 Shilling Designs (Jessica Shilling). Locked homepage concept 2026-11-05. Dramatic peacock Stage1 v0.3.0 — FULL subpages (Shop, Works, Catrinas, Murals & Commissions, Performance, About, CV, Contact) with all 180 catalogued artworks — exact IG @jessica_shilling_ HIRES 447 brand/icon + LIVE About cv-bio pack (Brad REVERSE) — stars, eye mark, real art, zero TBD (mobile ≤640 / tablet 641–1024 / desktop ≥1025). HOLD — do not cut over to jessicashilling.com.
Version: 0.3.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jessica-shilling-stage1
Tags: custom-menu, custom-logo, featured-images, full-width-template, theme-options
*/

/* ==========================================================================
   Design tokens — locked palette & type
   Breakpoints (mobile-first tokens; media queries document each band):
     - mobile  ≤640px
     - tablet  641px–1024px
     - desktop ≥1025px
   Nav hamburger remains at max-width 860px (between tablet/desktop).
   ========================================================================== */
:root {
  --js-navy: #080b16;
  --js-navy-2: #0e1324;
  --js-navy-3: #151a2e;
  --js-teal: #3fc9b0;
  --js-coral: #ec7a4e;
  --js-gold: #e8c169;
  --js-cream: #f4efe6;
  --js-muted: #a8b0c4;
  --js-hairline: linear-gradient(90deg, transparent, var(--js-gold), var(--js-teal), transparent);
  --js-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --js-ui: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --js-max: 1120px;
  --js-pad: clamp(1rem, 4vw, 2.5rem);
  --js-radius: 4px;
  --js-touch: 44px;
  --js-bp-mobile: 640px;
  --js-bp-tablet: 1024px;
  --js-bp-nav: 860px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--js-navy);
  color: var(--js-cream);
  font-family: var(--js-ui);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

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

img {
  object-fit: cover;
}

a {
  color: var(--js-teal);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--js-gold);
}

h1, h2, h3, h4 {
  font-family: var(--js-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--js-cream);
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: 0.01em; max-width: 100%; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p { margin: 0 0 1em; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.js-wrap {
  width: min(100% - (var(--js-pad) * 2), var(--js-max));
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

.js-section {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  position: relative;
  max-width: 100%;
}

.js-section + .js-section {
  border-top: 1px solid transparent;
  border-image: var(--js-hairline) 1;
}

.js-section__eyebrow {
  font-family: var(--js-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--js-gold);
  margin-bottom: 0.75rem;
}

.js-section__lede {
  color: var(--js-muted);
  max-width: 42rem;
  font-size: 1.05rem;
}

.js-hairline {
  height: 1px;
  width: 100%;
  max-width: 100%;
  background: var(--js-hairline);
  border: 0;
  margin: 0;
}

/* ==========================================================================
   Sticky nav
   ========================================================================== */
.js-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 11, 22, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232, 193, 105, 0.18);
  max-width: 100%;
}

.js-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 0.65rem;
  position: relative;
  max-width: 100%;
}

.js-wordmark {
  font-family: var(--js-display);
  font-size: clamp(1.1rem, 3.5vw, 1.35rem);
  font-weight: 500;
  color: var(--js-cream);
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-height: var(--js-touch);
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 5.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.js-wordmark:hover {
  color: var(--js-gold);
}

.js-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.js-nav a {
  font-family: var(--js-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--js-muted);
}

.js-nav a:hover,
.js-nav a:focus-visible,
.js-nav .current-menu-item > a,
.js-nav a[aria-current="page"] {
  color: var(--js-teal);
}

.js-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(63, 201, 176, 0.45);
  color: var(--js-teal);
  font-family: var(--js-ui);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  min-height: var(--js-touch);
  min-width: var(--js-touch);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--js-radius);
  flex-shrink: 0;
}

/* Hamburger / collapsible nav — kept at 860px (between tablet & desktop) */
@media (max-width: 860px) {
  .js-nav-toggle { display: inline-flex; }
  .js-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    max-width: 100vw;
    flex-direction: column;
    align-items: stretch;
    background: var(--js-navy-2);
    border-bottom: 1px solid rgba(232, 193, 105, 0.2);
    padding: 0.75rem var(--js-pad) 1rem;
    gap: 0;
    z-index: 101;
    box-sizing: border-box;
  }
  .js-nav.is-open { display: flex; }
  .js-nav li { border-top: 1px solid rgba(168, 176, 196, 0.12); }
  .js-nav a {
    display: flex;
    align-items: center;
    min-height: var(--js-touch);
    padding: 0.85rem 0;
  }
}

/* ==========================================================================
   Buttons / CTAs
   ========================================================================== */
.js-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--js-ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 1.4rem;
  min-height: var(--js-touch);
  border-radius: var(--js-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  box-sizing: border-box;
}

.js-btn--coral {
  background: var(--js-coral);
  color: var(--js-navy);
  border-color: var(--js-coral);
}

.js-btn--coral:hover,
.js-btn--coral:focus-visible {
  background: #f08d67;
  color: var(--js-navy);
  border-color: #f08d67;
}

.js-btn--teal-outline {
  background: transparent;
  color: var(--js-teal);
  border-color: var(--js-teal);
}

.js-btn--teal-outline:hover,
.js-btn--teal-outline:focus-visible {
  background: rgba(63, 201, 176, 0.12);
  color: var(--js-gold);
  border-color: var(--js-gold);
}

.js-btn--ghost {
  background: transparent;
  color: var(--js-gold);
  border-color: transparent;
  padding-inline: 0;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  min-height: var(--js-touch);
}

.js-btn--ghost:hover { color: var(--js-teal); }

.js-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
  max-width: 100%;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.js-hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  padding: clamp(3rem, 10vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(ellipse 80% 60% at 70% 30%, rgba(63, 201, 176, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(236, 122, 78, 0.1), transparent 50%),
    linear-gradient(180deg, var(--js-navy) 0%, var(--js-navy-2) 100%);
  overflow: hidden;
  max-width: 100%;
}

.js-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--js-hairline);
}

.js-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--js-hairline);
}

.js-hero__placeholder {
  position: absolute;
  inset: 12% 8% 28% 48%;
  border: 1px solid rgba(232, 193, 105, 0.22);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(14, 19, 36, 0.9), rgba(21, 26, 46, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  pointer-events: none;
  max-width: 100%;
  box-sizing: border-box;
}

.js-hero__placeholder span {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--js-muted);
  max-width: 14rem;
  line-height: 1.5;
}

.js-hero__content {
  position: relative;
  z-index: 1;
  max-width: min(36rem, 100%);
  width: 100%;
}

.js-hero__content h1 {
  max-width: 100%;
}

.js-hero__sub {
  font-family: var(--js-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-style: italic;
  color: var(--js-muted);
  margin: 0.75rem 0 0;
  line-height: 1.4;
  max-width: 100%;
}

.js-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(168, 176, 196, 0.18);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--js-muted);
  max-width: 100%;
}

.js-proof__label {
  color: var(--js-gold);
  letter-spacing: 0.16em;
  margin-right: 0.25rem;
}

.js-proof__item {
  color: var(--js-cream);
  opacity: 0.85;
}

.js-proof__sep {
  color: rgba(168, 176, 196, 0.35);
}

/* ==========================================================================
   Featured / Latest grid — desktop default 3-col (≥1025)
   ========================================================================== */
.js-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
  max-width: 100%;
}

.js-tile {
  background: var(--js-navy-2);
  border: 1px solid rgba(168, 176, 196, 0.12);
  border-radius: var(--js-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  min-width: 0;
}

.js-tile__media {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(160deg, var(--js-navy-3), var(--js-navy)),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(63, 201, 176, 0.04) 8px,
      rgba(63, 201, 176, 0.04) 9px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--js-muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  overflow: hidden;
}

.js-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.js-tile__body {
  padding: 1rem 1.1rem 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.js-tile__title {
  font-family: var(--js-display);
  font-size: 1.2rem;
  margin: 0;
}

.js-tile__meta {
  font-size: 0.8rem;
  color: var(--js-muted);
  margin: 0;
}

.js-tile__price {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--js-gold);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Spotlight / strip cards
   ========================================================================== */
.js-spotlight {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 1.5rem;
  max-width: 100%;
}

.js-spotlight__stills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  min-width: 0;
}

.js-still {
  aspect-ratio: 3 / 4;
  background: var(--js-navy-3);
  border: 1px solid rgba(232, 193, 105, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--js-muted);
  text-align: center;
  padding: 0.5rem;
  overflow: hidden;
  min-width: 0;
}

.js-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.js-case-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.75rem;
  max-width: 100%;
}

.js-case {
  background: var(--js-navy-2);
  border-left: 2px solid var(--js-teal);
  padding: 1.25rem 1.35rem;
  min-width: 0;
}

.js-case h3 { margin-bottom: 0.35rem; }
.js-case p { color: var(--js-muted); font-size: 0.92rem; margin: 0; }

/* ==========================================================================
   UV day/night placeholder
   ========================================================================== */
.js-uv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.75rem;
  max-width: 100%;
}

.js-uv__panel {
  min-height: 220px;
  border: 1px solid rgba(168, 176, 196, 0.15);
  border-radius: var(--js-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem;
  min-width: 0;
  overflow: hidden;
}

.js-uv__panel--day {
  background: linear-gradient(160deg, #1a2038, #2a3148);
}

.js-uv__panel--night {
  background: linear-gradient(160deg, #05070f, #0a1630);
  box-shadow: inset 0 0 40px rgba(63, 201, 176, 0.15);
}

.js-uv__label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--js-gold);
}

.js-uv__note {
  font-size: 0.85rem;
  color: var(--js-muted);
  max-width: 16rem;
}

/* ==========================================================================
   Performance teasers
   ========================================================================== */
.js-teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.75rem;
  max-width: 100%;
}

.js-teaser {
  background: var(--js-navy-2);
  border: 1px solid rgba(168, 176, 196, 0.1);
  padding: 1.35rem;
  min-width: 0;
}

.js-teaser h3 { margin-bottom: 0.4rem; }
.js-teaser p { color: var(--js-muted); font-size: 0.9rem; margin: 0; }

/* ==========================================================================
   Works prestige strip
   ========================================================================== */
.js-works-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 0.5rem;
  margin-top: 1.75rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.js-works-strip .js-tile {
  flex: 0 0 min(240px, 70vw);
  scroll-snap-align: start;
}

/* ==========================================================================
   Bio
   ========================================================================== */
.js-bio {
  max-width: 40rem;
}

.js-bio blockquote {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  font-family: var(--js-display);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--js-cream);
}

.js-bio__aside {
  color: var(--js-muted);
  font-size: 0.95rem;
}

/* ==========================================================================
   Newsletter / forms
   ========================================================================== */
.js-newsletter {
  background: var(--js-navy-2);
  border: 1px solid rgba(232, 193, 105, 0.2);
  border-radius: var(--js-radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 100%;
  box-sizing: border-box;
}

.js-newsletter form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 100%;
  width: 100%;
}

.js-newsletter input[type="email"],
.js-newsletter input[type="text"],
.js-newsletter input[type="search"],
.js-page-content input[type="email"],
.js-page-content input[type="text"],
.js-page-content input[type="search"],
.js-page-content textarea {
  flex: 1 1 12rem;
  width: 100%;
  max-width: 100%;
  background: var(--js-navy);
  border: 1px solid rgba(168, 176, 196, 0.3);
  color: var(--js-cream);
  font-family: var(--js-ui);
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  min-height: var(--js-touch);
  border-radius: var(--js-radius);
  box-sizing: border-box;
}

.js-newsletter input:focus,
.js-page-content input:focus,
.js-page-content textarea:focus {
  outline: 1px solid var(--js-teal);
  border-color: var(--js-teal);
}

.js-newsletter__note {
  font-size: 0.75rem;
  color: var(--js-muted);
  margin-top: 0.5rem;
}

/* ==========================================================================
   Page templates
   ========================================================================== */
.js-page-hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
  border-bottom: 1px solid transparent;
  border-image: var(--js-hairline) 1;
}

.js-page-content {
  padding: 2.5rem 0 4rem;
  max-width: 42rem;
}

.js-page-content--wide {
  max-width: var(--js-max);
}


/* ==========================================================================
   Footer
   ========================================================================== */
.js-footer {
  border-top: 1px solid transparent;
  border-image: var(--js-hairline) 1;
  padding: 2.5rem 0 2rem;
  background: var(--js-navy);
  max-width: 100%;
}

.js-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

.js-footer__brand {
  font-family: var(--js-display);
  font-size: 1.25rem;
  color: var(--js-cream);
  margin-bottom: 0.35rem;
}

.js-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.js-footer__links a {
  color: var(--js-muted);
  min-height: var(--js-touch);
  display: inline-flex;
  align-items: center;
}
.js-footer__links a:hover { color: var(--js-teal); }

.js-footer__meta {
  margin-top: 1.75rem;
  font-size: 0.75rem;
  color: rgba(168, 176, 196, 0.55);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.js-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

/* ==========================================================================
   TABLET — 641px–1024px (and down from desktop max)
   2-col where desktop is 3-col; spotlight stacks earlier within band
   ========================================================================== */
@media (max-width: 1024px) {
  .js-grid { grid-template-columns: repeat(2, 1fr); }
  .js-case-strip { grid-template-columns: repeat(2, 1fr); }
  .js-teasers { grid-template-columns: repeat(2, 1fr); }
  .js-spotlight { grid-template-columns: 1fr; gap: 1.5rem; }
  .js-newsletter { grid-template-columns: 1fr; }
}

/* Mid-tablet / narrow desktop: case + teasers go single when 2-col cramped */
@media (max-width: 800px) {
  .js-case-strip { grid-template-columns: 1fr; }
  .js-spotlight__stills { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   MOBILE — ≤640px
   Full-width CTAs, 1-col grids, hero stack, form inputs 100%, no overflow
   ========================================================================== */
@media (max-width: 640px) {
  .js-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .js-cta-row .js-btn {
    width: 100%;
    min-height: var(--js-touch);
  }

  .js-grid,
  .js-case-strip,
  .js-teasers,
  .js-uv,
  .js-spotlight__stills {
    grid-template-columns: 1fr;
  }

  .js-hero {
    min-height: auto;
    padding-top: 11rem;
    align-items: flex-end;
  }

  .js-hero__placeholder {
    inset: 8% 6% auto 6%;
    height: 28%;
    min-height: 7rem;
  }

  .js-hero__content h1 {
    font-size: clamp(1.85rem, 8.5vw, 2.5rem);
  }

  .js-proof {
    gap: 0.4rem 0.65rem;
  }

  .js-proof__sep {
    display: none;
  }

  .js-newsletter form {
    flex-direction: column;
    align-items: stretch;
  }

  .js-newsletter input[type="email"],
  .js-newsletter input[type="text"],
  .js-newsletter .js-btn {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .js-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .js-works-strip .js-tile {
    flex-basis: min(220px, 78vw);
  }
}

/* ==========================================================================
   DESKTOP — ≥1025px
   Keep current max-width 1120px layouts (defaults above already 3-col)
   ========================================================================== */
@media (min-width: 1025px) {
  .js-wrap {
    width: min(100% - (var(--js-pad) * 2), var(--js-max));
  }

  .js-grid { grid-template-columns: repeat(3, 1fr); }
  .js-case-strip { grid-template-columns: repeat(3, 1fr); }
  .js-teasers { grid-template-columns: repeat(3, 1fr); }
  .js-spotlight { grid-template-columns: 1.1fr 1fr; }
  .js-newsletter { grid-template-columns: 1.2fr 1fr; }
  .js-uv { grid-template-columns: 1fr 1fr; }
}


/* ===== v0.2.0 dramatic peacock presentation ===== */
.js-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.js-brand-eye {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(63,201,176,0.55), 0 0 18px rgba(232,193,105,0.55);
  animation: js-eye-pulse 3.6s ease-in-out infinite;
}
@keyframes js-eye-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(63,201,176,0.45), 0 0 12px rgba(232,193,105,0.35); transform: scale(1); }
  50% { box-shadow: 0 0 0 3px rgba(236,122,78,0.55), 0 0 28px rgba(63,201,176,0.7); transform: scale(1.06); }
}
.js-hero {
  position: relative;
  min-height: min(92vh, 920px);
  display: flex;
  align-items: flex-end;
  padding: clamp(4rem, 12vh, 7rem) 0 clamp(3rem, 8vh, 5rem);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 70% 30%, rgba(63,201,176,0.22), transparent 55%),
              radial-gradient(ellipse at 20% 80%, rgba(236,122,78,0.18), transparent 50%),
              var(--js-navy);
}
.js-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.js-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.25) contrast(1.05);
}
.js-hero__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,11,22,0.35) 0%, rgba(8,11,22,0.55) 40%, rgba(8,11,22,0.92) 100%),
    linear-gradient(90deg, rgba(8,11,22,0.75) 0%, rgba(8,11,22,0.25) 55%, rgba(8,11,22,0.55) 100%);
}
.js-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.js-hero__eye {
  position: absolute;
  top: clamp(5.5rem, 12vh, 7rem);
  right: clamp(1rem, 4vw, 3rem);
  width: clamp(72px, 12vw, 120px);
  height: auto;
  z-index: 2;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(232,193,105,0.5), 0 0 40px rgba(63,201,176,0.55);
  animation: js-eye-pulse 4s ease-in-out infinite;
  opacity: 0.95;
}
.js-hero__content {
  position: relative;
  z-index: 3;
  max-width: 40rem;
}
.js-hero__content h1 {
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  background: linear-gradient(120deg, var(--js-cream) 0%, var(--js-gold) 45%, var(--js-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 18px rgba(8,11,22,0.8));
}
.js-hero__placeholder { display: none !important; }
.js-section--glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(63,201,176,0.12), transparent 60%);
}
.js-tile {
  border: 1px solid rgba(232,193,105,0.18);
  background: linear-gradient(180deg, rgba(21,26,46,0.95), rgba(8,11,22,0.98));
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.js-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(63,201,176,0.55);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 24px rgba(63,201,176,0.15);
}
.js-tile__media {
  aspect-ratio: 4/5;
  background: #0a0e1c;
  overflow: hidden;
}
.js-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.js-tile:hover .js-tile__media img { transform: scale(1.05); }
.js-still {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(63,201,176,0.25);
  min-height: 0;
  aspect-ratio: 1;
}
.js-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.js-uv__panel {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 280px;
  border: 1px solid rgba(232,193,105,0.25);
}
.js-uv__panel img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}
.js-uv__panel--night img { filter: saturate(1.35) hue-rotate(-10deg) brightness(0.9); }
.js-uv__label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(8,11,22,0.75);
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(232,193,105,0.4);
}
.js-uv__note { display: none; }
.js-case--visual, .js-teaser--visual {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(63,201,176,0.22);
  background: var(--js-navy-2);
}
.js-case--visual img, .js-teaser--visual img {
  width: 100%;
  aspect-ratio: 16/11;
  object-fit: cover;
}
.js-case--visual h3, .js-teaser--visual h3,
.js-case--visual p, .js-teaser--visual p {
  padding-left: 1rem;
  padding-right: 1rem;
}
.js-case--visual h3, .js-teaser--visual h3 { margin-top: 0.85rem; }
.js-case--visual p, .js-teaser--visual p { padding-bottom: 1rem; }
.js-bio--visual {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.js-bio__portrait {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(232,193,105,0.35);
  box-shadow: 0 0 40px rgba(63,201,176,0.2);
}
.js-bio__portrait img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3/4;
}
@media (max-width: 860px) {
  .js-bio--visual { grid-template-columns: 1fr; }
  .js-bio__portrait { max-width: 320px; }
  .js-hero__eye { width: 64px; top: 4.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js-brand-eye, .js-hero__eye { animation: none; }
  .js-tile:hover, .js-tile:hover .js-tile__media img { transform: none; }
}

/* ===== v0.3.0 full subpages ===== */
.js-page-hero--art{position:relative;overflow:hidden;min-height:clamp(320px,52vh,560px);display:flex;align-items:flex-end;padding:clamp(5rem,12vw,8rem) 0 clamp(2rem,5vw,3.5rem);border-bottom:1px solid transparent;border-image:var(--js-hairline) 1}
.js-page-hero__bg{position:absolute;inset:0;z-index:0}
.js-page-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(1.2)}
.js-page-hero__wash{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 100%,rgba(236,122,78,.28),transparent 55%),radial-gradient(ellipse at 85% 10%,rgba(63,201,176,.3),transparent 50%),linear-gradient(180deg,rgba(8,11,22,.35) 0%,rgba(8,11,22,.72) 55%,var(--js-navy) 100%)}
.js-page-hero__inner{position:relative;z-index:2}
.js-page-hero__inner h1{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.02;margin:.2rem 0 .8rem;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.js-page-hero__lede{max-width:40rem;font-size:clamp(1rem,2.2vw,1.2rem);color:var(--js-cream);opacity:.9}
.js-page-hero__eye{width:64px;height:64px;border-radius:50%;margin-bottom:1rem;box-shadow:0 0 0 2px rgba(63,201,176,.6),0 0 30px rgba(232,193,105,.6);animation:js-eye-pulse 3.6s ease-in-out infinite}
.js-masonry{columns:3 280px;column-gap:1rem}
.js-masonry__item{break-inside:avoid;margin:0 0 1rem;background:var(--js-navy-2);border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid rgba(232,193,105,.12);transition:transform .35s,box-shadow .35s}
.js-masonry__item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(63,201,176,.22)}
.js-masonry__item img{display:block;width:100%;height:auto}
.js-masonry__item figcaption{padding:.65rem .85rem .8rem;font-family:var(--js-display);font-size:1.05rem;color:var(--js-cream)}
.js-masonry__item figcaption span{display:block;font-family:var(--js-ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--js-gold);margin-top:.2rem}
.js-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.js-split--rev{grid-template-columns:.85fr 1.15fr}
.js-split__media img{width:100%;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(232,193,105,.25)}
.js-split p{color:var(--js-muted);font-size:1.05rem;line-height:1.75}
.js-split blockquote{font-family:var(--js-display);font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;color:var(--js-cream);border-left:3px solid var(--js-coral);padding-left:1.2rem;margin:0 0 1.5rem}
.js-cases{display:grid;gap:clamp(2rem,5vw,4rem)}
.js-case-row{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
.js-case-row:nth-child(even){grid-template-columns:1fr 1.2fr}
.js-case-row:nth-child(even) .js-case-row__media{order:2}
.js-case-row__media{display:grid;grid-template-columns:2fr 1fr;gap:.5rem}
.js-case-row__media img{width:100%;height:100%;object-fit:cover;border-radius:5px;min-height:140px}
.js-case-row__media img:first-child{grid-row:span 2;min-height:320px}
.js-case-row__tag{color:var(--js-gold);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
.js-case-row h3{font-size:clamp(1.6rem,3.5vw,2.3rem);margin:.3rem 0 .6rem}
.js-case-row p{color:var(--js-muted);line-height:1.7}
.js-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.js-facts li{border:1px solid rgba(63,201,176,.4);border-radius:999px;padding:.3rem .8rem;font-size:.8rem;color:var(--js-teal)}
.js-cv{display:grid;gap:2.5rem}
.js-cv__block h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:1rem}
.js-cv__year{display:grid;grid-template-columns:6rem 1fr;gap:1rem;padding:1.1rem 0;border-top:1px solid rgba(232,193,105,.18)}
.js-cv__year>strong{font-family:var(--js-display);font-size:1.8rem;color:var(--js-gold);line-height:1}
.js-cv__year ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.js-cv__year li b{display:block;color:var(--js-cream);font-weight:500}
.js-cv__year li i{display:block;font-style:normal;color:var(--js-teal);font-size:.85rem;margin:.1rem 0}
.js-cv__year li span{color:var(--js-muted);font-size:.92rem;line-height:1.6}
.js-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.js-chips span{background:rgba(236,122,78,.12);border:1px solid rgba(236,122,78,.4);padding:.35rem .8rem;border-radius:999px;font-size:.85rem}
.js-path{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.js-path__card{background:linear-gradient(160deg,var(--js-navy-3),var(--js-navy-2));border:1px solid rgba(232,193,105,.2);border-radius:8px;padding:1.6rem;display:flex;flex-direction:column;gap:.7rem}
.js-path__card h3{font-size:1.6rem;margin:0}
.js-path__card p{color:var(--js-muted);flex:1;margin:0}
.js-path__card--hot{border-color:var(--js-coral);box-shadow:0 0 40px rgba(236,122,78,.18)}
.js-path__num{font-family:var(--js-display);font-size:2.4rem;color:var(--js-gold);line-height:1}
.js-filterbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem}
.js-filterbar a{padding:.45rem 1rem;border-radius:999px;border:1px solid rgba(63,201,176,.45);color:var(--js-cream);text-decoration:none;font-size:.85rem}
.js-filterbar a:hover{background:rgba(63,201,176,.15)}
.js-contact-card{background:var(--js-navy-2);border:1px solid rgba(232,193,105,.25);border-radius:8px;padding:clamp(1.25rem,3vw,2rem)}
.js-contact-card dl{display:grid;grid-template-columns:9rem 1fr;gap:.6rem 1rem;margin:1rem 0}
.js-contact-card dt{color:var(--js-gold);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.js-contact-card dd{margin:0;color:var(--js-muted)}
.js-cta-band{text-align:center}
.js-cta-band .js-cta-row{justify-content:center}
.js-cta-band .js-section__lede{margin-left:auto;margin-right:auto}
.js-cta-band__eye{width:72px;height:72px;margin:0 auto 1rem;display:block}
@media (max-width:1024px){.js-path{grid-template-columns:1fr 1fr}.js-split,.js-split--rev,.js-case-row,.js-case-row:nth-child(even){grid-template-columns:1fr}.js-case-row:nth-child(even) .js-case-row__media{order:0}}
@media (max-width:640px){.js-masonry{columns:2 140px;column-gap:.6rem}.js-masonry__item{margin-bottom:.6rem}.js-masonry__item figcaption{font-size:.9rem;padding:.5rem}.js-path{grid-template-columns:1fr}.js-cv__year{grid-template-columns:1fr;gap:.5rem}.js-contact-card dl{grid-template-columns:1fr}.js-case-row__media img:first-child{min-height:220px}}