/* ==========================================================================
   Theme layer, loaded after styles.css on every page. Restyles only:
   1. the light header (tiny two-line wordmark and nav) and the near-white page tone;
   2. font consistency (Jost for headings and small labels, Inter for paragraphs).
   Retune with the variables below.
   ========================================================================== */
:root {
  --paper: #fcfcfa;                                   /* page: light, near-white */
  --line: #e7e3dd;                                    /* hairlines */
  --header-font: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', Arial, sans-serif;
  color-scheme: light;
}
header.site { border-bottom: 0; padding: 26px 0 8px; }
.brand { gap: 6px; }
.brand-name { font: 700 12px/1.15 var(--header-font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.brand-mark { font: 500 10px/1 var(--header-font); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.brand:hover .brand-name { color: var(--accent); }
.site-nav { font: 600 11.5px/1 var(--header-font); letter-spacing: .16em; gap: 28px; }
.site-nav a { color: var(--ink); }
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.on,
.nav-dropdown summary:hover,
.nav-dropdown summary:focus-visible { color: var(--accent); }
/* Navigation: a single generous row on desktop, a compact disclosure on mobile. */
header.site{padding:16px 0}
.head-row{width:min(1440px,calc(100% - var(--gutter)));align-items:flex-start;flex-wrap:nowrap;gap:clamp(20px,3vw,48px)}
.brand{flex:none}
.nav-panel{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex:1;min-width:0}
.site-nav{align-items:center;gap:clamp(16px,2vw,32px);font:500 clamp(13px,1.05vw,16px)/1.2 var(--body);letter-spacing:0;text-transform:none;white-space:nowrap;transform:translateY(-8px)}
.site-nav a{padding:8px 0;color:var(--ink)}
.site-nav a::after{bottom:2px;background:currentColor}
.nav-dropdown{position:relative}
.nav-dropdown summary{display:flex;align-items:center;gap:6px;padding:8px 0;cursor:pointer;list-style:none}
.nav-dropdown summary::-webkit-details-marker{display:none}
.nav-dropdown summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav-dropdown[open] summary span{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;z-index:30;top:100%;left:-16px;display:flex;flex-direction:column;align-items:stretch;min-width:150px;padding:8px 16px;background:var(--paper);box-shadow:0 8px 24px #1c1a161a}
.site-nav .nav-dropdown-menu a{display:block;width:100%;padding:10px 0}
.nav-actions,.nav-social{display:flex;align-items:center}
.nav-actions{gap:clamp(18px,2vw,30px)}
.nav-social{gap:clamp(12px,1.3vw,20px)}
.nav-social a{display:grid;place-items:center;width:32px;height:40px;color:var(--ink)}
.nav-social svg{display:block;width:20px;height:20px;fill:currentColor}
.nav-social a:hover{color:var(--accent)}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);border-radius:9px;padding:15px 20px;font:500 13px/1 var(--body);text-transform:uppercase;white-space:nowrap}
.nav-cta:hover{background:var(--accent)}
.nav-toggle{display:none}
@media(max-width:1100px){
  .head-row{align-items:center;flex-wrap:wrap;justify-content:space-between}
  .js-ready .nav-toggle{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;padding:12px 0}
  .nav-panel{display:flex;flex-basis:100%;flex-direction:column;align-items:stretch;gap:18px;padding:10px 0 6px}
  .js-ready .nav-panel{display:none}
  .js-ready .nav-panel.is-open{display:flex}
  .site-nav{align-items:stretch;flex-direction:column;gap:0;font-size:16px;letter-spacing:0;transform:none}
  .site-nav a{padding:11px 0}
  .site-nav a::after{display:none}
  .site-nav a.on{color:var(--accent)}
  .nav-dropdown summary{padding:11px 0}
  .nav-dropdown-menu{position:static;box-shadow:none;padding:0 0 4px 16px}
  .nav-dropdown-menu a{padding:10px 0}
  .nav-actions{justify-content:space-between}
}

/* ---- font consistency: Jost for headings and every small label, Inter for paragraph text ---- */
:root { --display: var(--header-font); }
.about-cv,
.ao-rows small,
.article-foot,
.article-meta,
.back-link,
.case-facts dt,
.coming-soon,
.contact-links,
.deck-count,
.foot-row,
.gallery-head::before,
.hero-figure figcaption,
.hero-teasers a,
.intro-skip,
.journal-date,
.journal-soon,
.journal-tag,
.kicker,
.lightbox-caption a.button-link,
.lightbox-close,
.lightbox-meta,
.lightbox-nav,
.link-cta,
.meta-row span { font-family: var(--header-font); }
.hero-title em { font-style: normal; }
.gallery-tagline { font-style: normal; font-weight: 500; }
.article-body blockquote { font-style: normal; }
.case-hero figcaption { font-family: var(--body); font-style: normal; }

/* Automatic system dark mode: preserve the warm editorial palette instead of
   applying a mechanical inversion. */
@media (prefers-color-scheme: dark) {
  html:root {
    --paper: #11110f;
    --ink: #f7f3eb;
    --muted: #b9b1a5;
    --line: #3c3831;
    --accent: #c47a48;
    --ao-paper: #11110f;
    --ao-panel: #1d1a16;
    --ao-ghost: #625d54;
    color-scheme: dark;
  }
  body, header.site, footer.site { background: var(--paper); }
  .home-cta { background: var(--ao-panel); }
  .brand-name, .interior-hero h1 { color: #fffdf8; }
  .nav-cta { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px #5b5449; }
  .nav-cta:hover { background: var(--accent); color: #11110f; box-shadow: none; }
  .nav-dropdown-menu { box-shadow: 0 8px 24px #0008; }
  .journal-thumb, .article-body code { background: #24211d; }
  .article-body { color: #ddd7cd; }
  .tile-veil { background: #0007; }
  .tile, .feature-card img { background: #0b0b0a; }
  .hero-figure img, .feature-card img { outline-color: #ffffff1f; }
  .deck-stage .tile { box-shadow: 0 22px 44px -24px #000c, 0 0 0 1px #ffffff1f; }
  .lightbox { --paper: #f3efe7; --ink: #11110f; background: #080807; color: #f3efe7; }
  .studio-signature { background: #11110f; border-top: 0; padding: 32px; }
}

/* all-films and all-photography pages: as many columns as the screen can hold (4 on desktop), 2 on phones */
.all-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 22vw, 260px), 1fr)); gap: 12px; }
.back-link-row { margin: 0 0 18px; }