/*
Theme Name: Essence of Image
Theme URI: https://www.essenceofimage.com
Author: Lite Work Designs
Author URI: https://liteworkdesigns.com
Description: An editorial, monochrome one-page theme for Essence of Image Inc. — a talent and entertainment agency in Augusta, Georgia. Rotating hero portrait, optional background video, a hairline comp-card roster, events with uncropped posters, workshops, and an inquiry form with a built-in Inbox — every word, photo and colour editable from one Essence Editor screen. No page builder required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: essence-of-image
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, full-width-template, translation-ready
*/

/* =====================================================================
   1. TOKENS
   Colour channel triplets (--*-rgb) exist so every rgba() in this file
   follows the five editable colours. functions.php re-injects --ink,
   --bone, --paper, --chalk, --accent and their -rgb triplets inline on
   enqueue, which is what makes the Design tab take effect.
   ===================================================================== */
:root{
  /* editable colour */
  --ink:#0C0C0C; --bone:#E9E4DB; --paper:#F4F1EA; --chalk:#FFFFFF;
  --accent:#0C0C0C;
  /* channel triplets — every rgba() below reads these */
  --ink-rgb:12,12,12; --bone-rgb:233,228,219; --chalk-rgb:255,255,255; --accent-rgb:12,12,12;
  /* derived accent pair (PHP overrides) */
  --accent-on:#E9E4DB;   /* readable text on top of an accent fill */
  --accent-inv:#E9E4DB;  /* the accent as used on the ink bands */
  /* fixed tones — deliberately not editable, they hold the contrast */
  --ink-2:#16140f;
  --ash:#8C867B;   /* muted text on dark only  — 5.4:1 on ink */
  --ash-d:#5b564d; /* muted text on light only — 6.4:1 on paper */
  /* derived hairlines */
  --line:rgba(var(--ink-rgb),.16);
  --line-d:rgba(var(--bone-rgb),.18);
  --line-field:rgba(var(--ink-rgb),.48); /* form controls only — 3.35:1, WCAG 1.4.11 */
  /* type */
  --display:"Bebas Neue", Impact, sans-serif;
  --serif:"Bodoni Moda", Georgia, serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --body:"Archivo", system-ui, sans-serif;
  /* geometry */
  --gut: clamp(18px, 4.5vw, 64px);
  --maxw:none;   /* deliberate: the design is edge to edge */
  --r:0;         /* every front-end corner is square */
  --sec-y: clamp(46px, 8vh, 96px);
  --sec-y-lg: clamp(56px, 10vh, 120px);
  --sec-y-sm: clamp(40px, 7vh, 90px);
  --gap-lg: clamp(28px, 6vw, 80px);
  --gap-md: clamp(24px, 5vw, 60px);
  --gap-sm: clamp(20px, 3vw, 40px);
  --gap-collab: clamp(24px, 4vw, 56px);
  --pad-card: clamp(22px, 3vw, 38px);
  --shadow-hdr:0 6px 24px rgba(var(--ink-rgb),.06); /* the only shadow in the theme */
  /* motion */
  --e-out: cubic-bezier(.7,0,.2,1);
  --e-soft: cubic-bezier(.2,.7,.2,1);
  --t-fast:.3s; --t-base:.35s; --t-panel:.55s; --t-slow:.9s;
  /* photo treatment — one variable drives all seven filters */
  --gs:1;
}
body:not(.eoi-bw){ --gs:0 }

*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x on BOTH html and body — iOS Safari ignores it on body alone and
   lets the page drag sideways. clip (not hidden) so it never becomes a
   scroll container of its own. */
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--accent-on)}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-d)}
.wrap{padding-inline:var(--gut)}

/* Skip link (accessibility addition — design-spec §12.6) */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:10px;top:10px;width:auto;height:auto;z-index:100;background:var(--chalk);color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--line)}

/* =====================================================================
   2. TOP BAR
   ===================================================================== */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px var(--gut);background:linear-gradient(to bottom,rgba(var(--ink-rgb),.55),rgba(var(--ink-rgb),0));color:#fff;transition:background var(--t-base) ease,color var(--t-base) ease,padding var(--t-fast) ease,box-shadow var(--t-base) ease}
header.scrolled{background:var(--paper);color:var(--ink);padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-hdr)}
header.scrolled .topright .meta{color:var(--ash-d)}
header.scrolled .scout-link{border-color:rgba(var(--accent-rgb),.16)}
header.scrolled .scout-link:hover{background:var(--accent);color:var(--accent-on)}
.brand{font-family:var(--display);font-size:26px;letter-spacing:.14em;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:2px}
.brand sup{font-size:10px;font-family:var(--mono);letter-spacing:.1em;vertical-align:super;opacity:.7}
.brand img{max-height:34px;width:auto}
nav.main{display:flex;gap:26px;justify-self:center}
nav.main a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;position:relative}
nav.main a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:currentColor;transition:width var(--t-base) ease}
nav.main a:hover::after,nav.main a:focus-visible::after{width:100%}
header.scrolled nav.main a::after{background:var(--accent)}
.topright{justify-self:end;display:flex;align-items:center;gap:20px}
.topright .meta{color:#fff;opacity:.85}
.scout-link{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(var(--chalk-rgb),.55);padding:8px 13px;transition:background var(--t-fast),color var(--t-fast)}
.scout-link:hover{background:#fff;color:#000;mix-blend-mode:normal}

/* The bar never uses mix-blend-mode: in WebKit a blend mode on a position:fixed
   element makes it scroll with the page instead of staying pinned (it strands
   mid-viewport on iOS). The scrim on `header` above replaces the old
   difference-blend inversion and behaves identically in every engine. */
/* WP admin bar offset */
body.admin-bar header{top:32px}
@media(max-width:782px){body.admin-bar header{top:46px}}

/* Mobile drawer (design-spec §12.5 — source hides the nav with no replacement) */
.nav-toggle{display:none;background:none;border:0;color:inherit;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:8px 0}
.nav-drawer{position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--bone);display:none;flex-direction:column;justify-content:center;gap:6px;padding:clamp(64px,14vh,120px) var(--gut) var(--gut)}
/* Scroll lock: position:fixed on body (not overflow:hidden) — iOS Safari ignores
   overflow:hidden on body and displaces fixed-position layers when it later
   scrolls; the JS stores the offset in --eoi-lock-y and restores it on close. */
body.nav-open{position:fixed;left:0;right:0;top:var(--eoi-lock-y,0);width:100%;overflow:hidden}
body.nav-open .nav-drawer{display:flex}
body.nav-open header{background:var(--paper);color:var(--ink);padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-hdr)}
body.nav-open header .topright .meta{color:var(--ash-d)}
body.nav-open header .scout-link{border-color:rgba(var(--accent-rgb),.16)}
.nav-drawer a.dl{font-family:var(--display);font-size:40px;letter-spacing:.06em;line-height:1.08;display:block;padding-block:8px;border-bottom:1px solid var(--line-d)}
.nav-drawer a.dl small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-top:2px}
.nav-drawer .dmeta{margin-top:22px;color:var(--ash)}

/* =====================================================================
   3. HERO
   ===================================================================== */
.hero{position:relative;min-height:100svh;background:var(--bone);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.spine{position:absolute;left:0;top:0;bottom:0;width:var(--gut);display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);z-index:4}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ash-d);white-space:nowrap}
.hero-portrait{position:absolute;right:clamp(8px,6vw,120px);bottom:0;top:0;width:clamp(280px,38vw,520px);
  background-size:cover;background-position:center 22%;filter:grayscale(var(--gs)) contrast(1.04);z-index:2;
  clip-path:inset(0 0 100% 0);animation:portraitReveal 1.2s .35s var(--e-out) forwards}
@keyframes portraitReveal{to{clip-path:inset(0 0 0 0)}}

/* Rotation layer — theme.js stacks the next portrait here and wipes it in,
   then promotes it onto .hero-portrait. Grayscale is inherited from the parent filter. */
.hero-portrait-layer{position:absolute;inset:0;background-size:cover;background-position:center 22%;z-index:1;clip-path:inset(0 0 100% 0)}
.hero-portrait-layer.is-in{animation:portraitReveal 1.2s var(--e-out) forwards}

/* Background video (off by default — the site ships pixel-identical to source) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:grayscale(var(--gs)) contrast(1.04);opacity:.55;pointer-events:none}
.hero-video-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to top, rgba(var(--bone-rgb),.94) 0%, rgba(var(--bone-rgb),.62) 34%, rgba(var(--bone-rgb),0) 68%),
  linear-gradient(to right, rgba(var(--bone-rgb),.90) 0%, rgba(var(--bone-rgb),.38) 44%, rgba(var(--bone-rgb),0) 78%)}

.hero-head{position:relative;z-index:3;padding:0 var(--gut) clamp(34px,7vh,80px) calc(var(--gut) + clamp(8px,3vw,40px));pointer-events:none}
.hero-eyebrow{display:flex;gap:16px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.hero-eyebrow .rule{height:1px;width:54px;background:var(--line)}
.hero-title{font-family:var(--display);font-weight:400;line-height:.84;letter-spacing:.005em;font-size:clamp(48px,11vw,176px);text-transform:uppercase}
.hero-title .ln{display:block;overflow:hidden}
.hero-title .ln i{display:block;transform:translateY(102%);animation:lineUp 1s forwards var(--e-out);font-style:normal}
.hero-title .ln:nth-child(1) i{animation-delay:.15s}
.hero-title .ln:nth-child(2) i{animation-delay:.27s}
.hero-title .ln:nth-child(3) i{animation-delay:.39s}
.hero-title em{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:-.01em}
@keyframes lineUp{to{transform:translateY(0)}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:24px;max-width:560px}
.hero-foot p{font-size:14px;max-width:360px;color:var(--ash-d);line-height:1.55}
.hero-blurb{max-width:360px}
.hero-blurb p + p{margin-top:10px}
.hero-index{font-family:var(--display);font-size:18px;letter-spacing:.1em;pointer-events:auto;white-space:nowrap}

/* =====================================================================
   4. SECTION HEAD
   ===================================================================== */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-block:var(--sec-y) 30px;border-bottom:1px solid var(--line)}
.sec-head h2{font-family:var(--display);font-size:clamp(40px,7.5vw,116px);line-height:.86;letter-spacing:.01em;text-transform:uppercase;font-weight:400}
.sec-head .idx{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ash-d);align-self:flex-start;padding-top:8px;white-space:nowrap}

/* =====================================================================
   5. OUR IMAGE (about)
   ===================================================================== */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:var(--gap-lg);align-items:center;padding-block:var(--sec-y)}
.about-grid .lead{font-family:var(--serif);font-size:clamp(22px,2.7vw,38px);line-height:1.28;letter-spacing:-.01em}
.about-grid .lead em{font-style:italic}
.about-grid .lead p + p{margin-top:14px}
.about-grid .body{margin-top:22px;max-width:520px;color:var(--ash-d);font-size:15px;line-height:1.7}
.about-grid .body p + p{margin-top:16px}
.about-fig{position:relative;border:1px solid var(--line);background:var(--bone);aspect-ratio:4/5;overflow:hidden}
.about-fig img{width:100%;height:100%;object-fit:contain;padding:34px;filter:grayscale(var(--gs))}
.about-fig .tag{position:absolute;left:14px;bottom:14px}
.founder{margin-top:8px;padding:clamp(30px,5vh,60px) 0 var(--sec-y);border-top:1px solid var(--line);display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap-md);align-items:center}
.founder-figs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.founder-figs.is-single{grid-template-columns:1fr}
.founder-figs img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--bone);filter:grayscale(var(--gs)) contrast(1.02)}
.founder .meta{color:var(--ash-d)}
.founder-q{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,3.2vw,46px);line-height:1.16;letter-spacing:-.01em;margin:16px 0 20px;max-width:22ch}
.founder-by{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.founder-body{margin-top:14px;max-width:580px;color:var(--ash-d);font-size:15px;line-height:1.7}
.founder-body p + p{margin-top:14px}
@media(max-width:780px){.founder{grid-template-columns:1fr}}

/* =====================================================================
   6. THE TALENT
   ===================================================================== */
.talent{background:var(--ink);color:var(--bone)}
.talent .sec-head{border-color:var(--line-d)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-block:30px 8px}
.card.join{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bone);color:var(--ink);padding:20px;text-decoration:none;transition:background var(--t-fast)}
.card.join:hover{background:var(--chalk)}
.card.join:hover .jt{color:var(--accent)}
.card.join .jt{font-family:var(--display);font-size:30px;letter-spacing:.05em;line-height:.9;display:block}
.card.join small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-d);margin-top:12px}
.card{position:relative;background:var(--ink);aspect-ratio:3/4;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover;filter:grayscale(var(--gs)) contrast(1.03);transition:transform var(--t-slow) var(--e-soft)}
.card:hover img{transform:scale(1.05)}
.card-label{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:flex;justify-content:space-between;align-items:flex-end;background:linear-gradient(to top,rgba(var(--ink-rgb),.82),transparent);z-index:2}
.card-name{font-family:var(--display);font-size:24px;letter-spacing:.08em;line-height:.9}
.card-cat{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ash);text-transform:uppercase}
.comp{position:absolute;inset:0;background:var(--bone);color:var(--ink);padding:20px 18px;display:flex;flex-direction:column;justify-content:space-between;transform:translateY(101%);transition:transform var(--t-panel) var(--e-out);z-index:3}
.card:hover .comp,.card:focus-within .comp{transform:translateY(0)}
.comp .cn{font-family:var(--display);font-size:30px;letter-spacing:.06em;line-height:.86}
.comp .cn small{display:block;font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:0;color:var(--ash-d);margin-top:6px;text-transform:none}
.specs{border-top:1px solid var(--line)}
.specs div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.specs span:first-child{color:var(--ash-d);letter-spacing:.12em}
.comp .view{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;align-self:flex-start;border-bottom:1px solid var(--accent);padding-bottom:2px}
.talent-note{padding-bottom:var(--sec-y-sm)}
/* States — missing photo, and the Join card standing alone */
.card--noimg{display:flex;align-items:flex-end;background:var(--ink-2)}
.grid--solo{grid-template-columns:1fr}
.grid--solo .card.join{aspect-ratio:auto;min-height:clamp(220px,34vh,340px)}

/* =====================================================================
   7. FULL-BLEED BAND
   ===================================================================== */
.band{width:100%;height:clamp(200px,34vh,400px);overflow:hidden;background:var(--ink)}
.band img{width:100%;height:100%;object-fit:cover;object-position:center 32%;filter:grayscale(var(--gs)) contrast(1.04);opacity:.92}

/* =====================================================================
   8. COLLABORATORS
   ===================================================================== */
.collabs{background:var(--paper)}
.collab-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-collab);padding-block:34px var(--sec-y)}
.collab{display:grid;grid-template-columns:.8fr 1fr;gap:22px;align-items:center}
.collab figure{overflow:hidden}
.collab img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(var(--gs)) contrast(1.03);transition:transform var(--t-slow) var(--e-soft)}
.collab:hover img{transform:scale(1.04)}
.collab h3{font-family:var(--display);font-size:clamp(26px,3.2vw,44px);letter-spacing:.04em;line-height:.92}
.collab .meta{color:var(--ash-d);display:block;margin:7px 0 12px}
.collab p{font-size:14px;line-height:1.66;color:var(--ash-d)}
.collab p + p{margin-top:12px}
@media(max-width:860px){.collab-grid{grid-template-columns:1fr}}
@media(max-width:520px){.collab{grid-template-columns:1fr}}

/* =====================================================================
   9. HAPPENINGS
   ===================================================================== */
.happenings{background:var(--ink);color:var(--bone)}
.happenings .sec-head{border-color:var(--line-d)}
.hap-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sm);padding-block:30px var(--sec-y-sm)}
.hap-card{border:1px solid var(--line-d);padding:var(--pad-card);display:flex;flex-direction:column;justify-content:space-between;min-height:300px}
.hap-card .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ash)}
.hap-card h3,.hap-feat .ov h3{font-family:var(--display);font-size:clamp(34px,4.5vw,64px);line-height:.9;letter-spacing:.02em;margin:18px 0 14px}
.hap-card h3 em,.hap-feat .ov h3 em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;display:block;font-size:.62em}
.hap-card p{color:var(--ash);font-size:14px;line-height:1.65;max-width:440px}
.hap-card .ev-meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;line-height:1.9;color:var(--bone);margin-top:16px}
.hap-card .cta,.hap-feat .ov .cta{margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;align-self:flex-start;border-bottom:1px solid var(--accent-inv);padding-bottom:3px}
.hap-feat{position:relative;overflow:hidden;border:1px solid var(--line-d);min-height:300px;margin-top:clamp(22px,3vw,44px)}
.hap-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(var(--gs)) contrast(1.05);opacity:.5}
/* Two-axis ink scrim so the copy column is always on solid ground while the
   photo stays visible on the right/top (legibility fix, Aug 2026 audit). */
.hap-feat .ov{position:relative;z-index:2;padding:var(--pad-card);height:100%;display:flex;flex-direction:column;justify-content:flex-end;background:
  linear-gradient(to top,rgba(var(--ink-rgb),.92) 0%,rgba(var(--ink-rgb),.72) 40%,rgba(var(--ink-rgb),.15) 78%,transparent 100%),
  linear-gradient(to right,rgba(var(--ink-rgb),.88) 0%,rgba(var(--ink-rgb),.62) 46%,rgba(var(--ink-rgb),.1) 78%,transparent 100%)}
/* The three rules below are the source's inline style="" attributes, moved into
   CSS per design-spec §5. The source scoped .hap-card h3 / .hap-card .cta so the
   workshops panel's <h3> and .cta fell back to base styling — a selector defect,
   corrected above by Director ruling (they now share the .hap-card styles). */
.hap-feat .ov .k{color:var(--bone)}
.hap-feat .ov h3{margin:14px 0 0}
.hap-feat .ov .wk-body{color:rgba(var(--bone-rgb),.92);max-width:560px;margin-top:12px;text-shadow:0 1px 2px rgba(var(--ink-rgb),.35)}
.hap-feat .ov .wk-body p + p{margin-top:12px}
@media(max-width:760px){.hap-grid{grid-template-columns:1fr}}
.event{display:grid;grid-template-columns:.7fr 1fr;gap:var(--gap-md);align-items:center;padding-block:30px 0}
.event-poster{background:var(--ink-2);border:1px solid var(--line-d);display:flex;justify-content:center;align-items:center;padding:14px}
.event-poster img{max-height:540px;width:auto;max-width:100%;object-fit:contain}
.event-info .k{color:var(--ash)}
.event-info h3{font-family:var(--display);font-size:clamp(34px,5vw,72px);line-height:.88;letter-spacing:.02em;margin:14px 0 16px}
.event-info h3 em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;display:block;font-size:.66em;color:var(--bone)}
/* The event subtitle is already the italic serif drop-line, and it also honours
   *asterisks* — so a fully-wrapped subtitle nests <em>. Collapse the inner one. */
.event-info h3 em em,.er-title em em{display:inline;font-size:1em;letter-spacing:inherit;color:inherit}
.event-info .ev-intro{color:var(--ash);font-size:14px;line-height:1.6;max-width:460px;margin:0 0 18px}
.event-info .ev-intro p + p{margin-top:12px}
.event-info .ev-meta{font-family:var(--mono);font-size:12px;letter-spacing:.05em;line-height:1.95;color:var(--bone)}
.event-info .ev-tickets{margin-top:16px;color:var(--ash);font-size:14px;line-height:1.6;max-width:460px}
.event-info .ev-tickets strong,.event-info .ev-tickets em{color:var(--bone);font-weight:400;font-style:normal}
.event-info .ev-tickets p + p{margin-top:12px}
.event-info .cta{margin-top:22px;display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--accent-inv);padding-bottom:3px}
.event--nopost{grid-template-columns:1fr}
@media(max-width:760px){.event{grid-template-columns:1fr}.event-poster img{max-height:none;width:100%}}

/* Additional events — compact list under the featured one (admin-spec §9) */
.event-list{list-style:none;margin-top:clamp(26px,4vw,44px);border-top:1px solid var(--line-d)}
.event-row{display:grid;grid-template-columns:.42fr 1fr auto;gap:clamp(14px,3vw,34px);align-items:baseline;padding-block:20px;border-bottom:1px solid var(--line-d)}
.event-row .er-date{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ash)}
.event-row .er-title{font-family:var(--display);font-size:clamp(22px,2.6vw,34px);line-height:.94;letter-spacing:.04em}
.event-row .er-title em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;display:block;font-size:.6em;color:var(--bone)}
.event-row .er-meta{font-family:var(--mono);font-size:11px;letter-spacing:.05em;line-height:1.9;color:var(--ash);margin-top:8px}
.event-row .cta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--accent-inv);padding-bottom:3px;white-space:nowrap}
@media(max-width:760px){.event-row{grid-template-columns:1fr;gap:6px}}

/* =====================================================================
   10. SPONSOR / CONTACT
   ===================================================================== */
.sponsor{background:var(--bone)}
.sponsor-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;padding-block:var(--sec-y-lg)}
.sponsor h2{font-family:var(--display);font-size:clamp(48px,8.5vw,140px);line-height:.84;letter-spacing:.01em;text-transform:uppercase;font-weight:400}
.sponsor h2 em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;display:block}
.sponsor-lead{margin-top:22px;max-width:440px;color:var(--ash-d);font-size:15px;line-height:1.65}
.sponsor-lead p + p{margin-top:14px}
.compform{border:1px solid var(--line);padding:clamp(20px,3vw,34px);background:var(--paper)}
.compform fieldset{border:0;padding:0;margin:0;min-width:0}
.compform .ch{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.compform .ch b{font-family:var(--display);font-size:20px;letter-spacing:.12em}
.ff{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.ff label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-d);margin:14px 0 5px}
.ff input,.ff select,.ff textarea{width:100%;background:none;border:none;border-bottom:1px solid var(--line-field);color:var(--ink);font-family:var(--serif);font-size:17px;padding:6px 0;outline:none;transition:border-color var(--t-fast)}
.ff textarea{resize:vertical;line-height:1.45}
.ff input::placeholder,.ff textarea::placeholder{color:var(--ash-d);font-style:italic}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--accent)}
.ff .full{grid-column:1/3}
.ff .has-err input,.ff .has-err textarea,.ff .has-err select{border-color:var(--ink)}
.fld-err{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:6px}
.fld-err:empty{display:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.submit{margin-top:26px;width:100%;background:var(--accent);color:var(--accent-on);border:none;padding:16px;font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:opacity var(--t-fast)}
.submit:hover{opacity:.85}
.submit[disabled]{cursor:default;opacity:.85}
.form-msg{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1.7}
.form-msg:empty{display:none}
.form-msg a{border-bottom:1px solid var(--line-field)}
/* Success is announced to screen readers; the visible confirmation is the
   swapped submit button, exactly as in the source. */
.form-msg.is-ok{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:860px){.sponsor-grid,.about-grid{grid-template-columns:1fr}.about-fig{max-width:420px}}

/* =====================================================================
   11. FOOTER
   ===================================================================== */
footer{background:var(--ink);color:var(--bone);padding-top:clamp(50px,8vh,90px)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;padding-bottom:42px;border-bottom:1px solid var(--line-d)}
.foot-contact .meta{color:var(--ash);line-height:2.1}
.foot-contact a.big{font-family:var(--serif);font-style:italic;font-size:20px;letter-spacing:0;text-transform:none}
.foot-contact .rows{margin-top:8px}
.foot-contact .phone{margin-top:12px}
.foot-social{margin-top:8px}
.soc-ico{display:inline-flex;width:12px;height:12px;margin-right:8px;vertical-align:-1px}
.soc-ico svg{width:100%;height:100%;fill:currentColor}
.newsletter{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding-block:38px;border-bottom:1px solid var(--line-d)}
.newsletter .nl-lead{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,32px);margin-top:8px;max-width:430px}
.nl-form{display:flex;align-items:center;border-bottom:1px solid var(--bone);min-width:min(360px,90vw)}
.nl-form input{flex:1;background:none;border:none;color:var(--bone);font-family:var(--serif);font-size:18px;padding:8px 0;outline:none}
.nl-form input::placeholder{color:var(--ash)}
.nl-form button{background:none;border:none;color:var(--bone);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:8px 0 8px 18px;white-space:nowrap;transition:opacity var(--t-fast),color var(--t-fast)}
.nl-form button:hover{opacity:.7;color:var(--accent-inv)}
.nl-form button[disabled]{cursor:default;opacity:.7}
.nl-msg{width:100%;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-top:10px}
.nl-msg:empty{display:none}
.foot-brand{font-family:var(--display);font-size:clamp(56px,15vw,210px);line-height:.78;letter-spacing:.02em;padding-block:40px;border-bottom:1px solid var(--line-d)}
.foot-brand span{display:block}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-block:24px 36px}
.foot-bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom .meta{color:var(--ash)}
.foot-legal{display:flex;align-items:center;gap:0 14px;flex-wrap:wrap}
.foot-legal .credit{position:relative;transition:color var(--t-fast)}
.foot-legal .credit::before{content:"·";margin-right:14px;color:var(--ash)}
.foot-legal a.credit:hover,.foot-legal a.credit:focus-visible{color:var(--bone)}
@media(max-width:520px){.foot-legal{flex-direction:column;align-items:flex-start;gap:6px}.foot-legal .credit::before{content:none}}

/* =====================================================================
   12. GENERIC PAGE / INDEX FALLBACKS
   ===================================================================== */
.page-shell{background:var(--paper);padding-top:clamp(96px,16vh,160px)}
.page-shell .sec-head{padding-block:0 30px}
.page-body{padding-block:34px var(--sec-y);max-width:760px;color:var(--ash-d);font-size:15px;line-height:1.7}
.page-body p + p,.page-body ul,.page-body ol,.page-body blockquote,.page-body figure{margin-top:16px}
.page-body ul,.page-body ol{padding-left:1.2em}
.page-body h2,.page-body h3{font-family:var(--display);letter-spacing:.02em;line-height:.95;color:var(--ink);margin-top:26px;text-transform:uppercase;font-weight:400}
.page-body h2{font-size:clamp(28px,4vw,48px)}
.page-body h3{font-size:clamp(22px,3vw,34px)}
.page-body a{border-bottom:1px solid var(--line-field)}
.post-row{padding-block:26px;border-bottom:1px solid var(--line)}
.post-row h2{font-family:var(--display);font-size:clamp(26px,3.4vw,44px);letter-spacing:.03em;line-height:.94;text-transform:uppercase;font-weight:400}
.post-row .meta{margin-top:8px}
.post-row .excerpt{margin-top:10px;color:var(--ash-d);font-size:15px;line-height:1.7;max-width:640px}
.page-nav{padding-block:26px var(--sec-y)}
.page-nav .nav-links,.page-nav a,.page-nav span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-d)}
.page-nav .page-numbers.current{color:var(--ink)}

/* =====================================================================
   13. REVEAL
   ===================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--t-slow) ease,transform var(--t-slow) var(--e-soft)}
.reveal.in{opacity:1;transform:none}

/* =====================================================================
   14. FOCUS VISIBILITY (source had none — 13 cards carry tabindex="0")
   --accent-inv resolves to bone whenever the accent is ink, so the ring
   is always visible on the dark bands.
   ===================================================================== */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.talent :focus-visible,.happenings :focus-visible,footer :focus-visible,.nav-drawer :focus-visible{outline-color:var(--accent-inv)}
.card.join:focus-visible,.comp :focus-visible{outline-color:var(--accent)}
header :focus-visible{outline-color:currentColor}
.card:focus-visible{outline-offset:-3px}

/* =====================================================================
   15. BREAKPOINTS — verbatim from source (cascade order is load-bearing)
   ===================================================================== */
@media(max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){
  nav.main,.topright .meta{display:none}
  header{grid-template-columns:1fr auto}
  .nav-toggle{display:inline-block;justify-self:end}
  /* Header must never exceed the viewport (it was 490px on a 393px phone and
     dragged the whole page sideways): brand shrinks, CTA is compact, gaps tighten. */
  header{padding-inline:clamp(14px,4vw,24px);gap:10px;min-width:0}
  .brand{font-size:20px;letter-spacing:.1em;min-width:0}
  .brand img{max-height:34px}
  .topright{gap:12px;min-width:0}
  .scout-link{padding:7px 9px;font-size:10px;letter-spacing:.1em;white-space:nowrap}
  /* Section-number labels wrap under the title instead of pushing past the edge */
  .sec-head{flex-wrap:wrap;gap:10px 16px}
  .sec-head .idx{white-space:normal;padding-top:0;align-self:flex-end}
  /* Mobile hero — the portrait rotates, so text can never sit ON a photo:
     the face is a full-strength backdrop in the upper screen, and the whole
     text stack rests on an opaque bone panel that rises from the bottom with
     a feathered top edge. Every rotating face lands identically. */
  .hero{min-height:100svh}
  .hero-portrait{opacity:1;left:0;right:0;width:auto;top:0;bottom:auto;height:62svh;
    background-position:center 18%}
  .hero-portrait-layer{background-position:center 18%}
  .hero-head{margin-top:auto;padding:clamp(28px,7vh,56px) var(--gut) clamp(28px,6vh,48px) calc(var(--gut) + 14px);
    background:linear-gradient(to bottom, rgba(var(--bone-rgb),0) 0%, rgba(var(--bone-rgb),.86) 22%, var(--bone) 42%);
    padding-top:clamp(56px,12vh,96px)}
  .hero-eyebrow{gap:10px 12px}
  .hero-eyebrow .rule{display:none}
  .hero-eyebrow .meta:last-child{width:100%}
  .hero-title{font-size:clamp(46px,13.5vw,88px)}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:16px;margin-top:18px}
  .hero-foot p{max-width:100%}
  .spine{width:calc(var(--gut) - 4px)}
}
@media(min-width:881px){.nav-drawer{display:none!important}}
@media(max-width:520px){.grid{grid-template-columns:1fr 1fr}.ff{grid-template-columns:1fr}.ff .full{grid-column:1}.card-name{font-size:19px}}

/* =====================================================================
   16. MOTION OFF SWITCHES
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .hero-portrait{clip-path:none}
  .hero-portrait-layer{display:none}
  .hero-video,.hero-video-scrim{display:none}
  .hero-title .ln i{transform:none}
  .reveal{opacity:1;transform:none}
}
body.eoi-no-hero-anim .hero-portrait{clip-path:none;animation:none}
body.eoi-no-hero-anim .hero-portrait-layer{display:none}
body.eoi-no-hero-anim .hero-video,body.eoi-no-hero-anim .hero-video-scrim{display:none}
body.eoi-no-hero-anim .hero-title .ln i{transform:none;animation:none}
body.eoi-no-reveal .reveal{opacity:1;transform:none;transition:none}

/* =====================================================================
   17. TALENT PAGE — /talent/{slug}   (M7 · single-talent.php)
   The page is the roster's flip panel at full size, so it stays on the
   ink band the grid lives on: same photo treatment (--gs), same hairline
   (--line-d), same mono/display pairing. Nothing here is hardcoded except
   the print sheet in §17.4, which is deliberately true black on white.
   ===================================================================== */

/* --- 17.0 the roster card gains a second action --------------------
   The flip panel keeps "Inquire →" and gains "Full profile →" beside it.
   Two real links, no overlay: the panel is what a keyboard reaches, and a
   hover-only stretched link would be unclickable on a mouse the moment
   the panel slid up. (front-page.php snippet in the M7 report.) */
.comp-actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.comp-actions .view{align-self:auto}

/* --- 17.1 shell ---------------------------------------------------- */
.talentpage{background:var(--ink);color:var(--bone);padding-top:clamp(96px,16vh,160px)}
.tp-crumb{padding-block:0 20px}
.tp-crumb a{color:var(--ash);transition:color var(--t-fast)}
.tp-crumb a:hover{color:var(--bone)}
.tp{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--gap-lg);
  align-items:start;padding-block:clamp(20px,3vw,34px) var(--sec-y);border-top:1px solid var(--line-d)}
.tp--nophoto{grid-template-columns:minmax(0,1fr);max-width:900px}

/* The page is an ink band, so the focus ring follows §14's rule for dark
   surfaces: --accent-inv is bone whenever the accent equals ink, which is
   the shipped setting. Without this every ring here would be invisible. */
.talentpage :focus-visible{outline-color:var(--accent-inv)}

/* --- 17.2 portrait -------------------------------------------------- */
.tp-figure{border:1px solid var(--line-d);background:var(--ink-2);overflow:hidden}
.tp-figure img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(var(--gs)) contrast(1.03)}

/* --- 17.3 the card side --------------------------------------------- */
.tp-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.tp-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tp-eyebrow .meta{color:var(--ash)}
.tp-eyebrow .rule{display:block;height:1px;width:34px;background:var(--line-d)}
.tp-name{font-family:var(--display);font-weight:400;font-size:clamp(46px,8vw,120px);line-height:.86;
  letter-spacing:.02em;text-transform:uppercase;margin-top:14px;overflow-wrap:break-word;max-width:100%}
.tp-tag{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.4vw,30px);line-height:1.3;
  letter-spacing:-.01em;color:rgba(var(--bone-rgb),.92);margin-top:16px;max-width:32ch}
.tp-tag em{font-style:normal}
/* .specs is the roster's rule set; on the ink band it needs the light hairline. */
.tp-specs{width:100%;max-width:520px;margin-top:clamp(24px,3vw,34px);border-top-color:var(--line-d)}
.tp-specs div{border-bottom-color:var(--line-d);padding:11px 0;font-size:12px}
.tp-specs span:first-child{color:var(--ash)}
.tp-cta{margin-top:clamp(26px,3vw,36px);background:var(--bone);color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding:15px 26px;transition:background var(--t-fast),color var(--t-fast)}
.tp-cta:hover{background:var(--chalk);color:var(--accent)}
.tp-share{width:100%;margin-top:clamp(26px,3vw,36px);padding-top:16px;border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.tp-share .meta{color:var(--ash)}
.tp-share a{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(var(--bone-rgb),.9);
  border-bottom:1px solid var(--line-d);word-break:break-all;transition:color var(--t-fast)}
.tp-share a:hover{color:var(--bone)}

/* prev / roster / next */
.tp-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:16px 24px;
  padding-block:24px;border-top:1px solid var(--line-d);margin-bottom:var(--sec-y)}
.tp-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);transition:color var(--t-fast)}
.tp-nav a:hover{color:var(--bone)}
.tp-nav a:hover .nm{color:var(--bone)}
.tp-nav .nm{display:block;font-family:var(--display);font-size:22px;letter-spacing:.06em;
  text-transform:none;color:rgba(var(--bone-rgb),.86);margin-top:5px;transition:color var(--t-fast)}
.tp-prev{justify-self:start}
.tp-all{justify-self:center;align-self:center}
.tp-next{justify-self:end;text-align:right}
@media(max-width:900px){.tp{grid-template-columns:minmax(0,1fr);gap:var(--gap-sm)}.tp-figure{max-width:460px}}
@media(max-width:560px){
  .tp-nav{grid-template-columns:1fr 1fr;gap:14px}
  .tp-all{grid-column:1/-1;justify-self:start;order:-1}
  .tp-cta{width:100%;text-align:center}
}

/* letterhead: print only (see §17.4) */
.tp-print-head{display:none}

/* --- 17.4 PRINT — "Save as PDF" gives a usable comp card ------------
   M9 (the comp-card sheet) extends this block; keep new print rules here
   so there is exactly one place that describes the printed page. Real
   black on real white: an editable ink colour must not cost her toner. */
@media print{
  @page{margin:14mm}
  html,body{background:#fff!important;color:#000!important;overflow:visible!important}
  header,footer,.nav-drawer,.skip,#wpadminbar{display:none!important}
  .talentpage{background:#fff!important;color:#000!important;padding-top:0!important}
  .talentpage .wrap{padding-inline:0}
  .talentpage .reveal{opacity:1!important;transform:none!important}
  .tp-crumb,.tp-nav,.tp-cta{display:none!important}
  .tp{display:grid;grid-template-columns:44% 1fr;gap:10mm;border-top:0;padding:0;
    break-inside:avoid;page-break-inside:avoid}
  .tp--nophoto{grid-template-columns:1fr;max-width:none}
  .tp-print-head{display:flex!important;grid-column:1/-1;justify-content:space-between;
    align-items:baseline;gap:8mm;flex-wrap:wrap;
    border-bottom:1pt solid #000;padding-bottom:3mm;margin-bottom:6mm}
  .tp-print-brand{font-family:var(--display);font-size:20pt;letter-spacing:.12em;color:#000}
  .tp-print-meta{font-family:var(--mono);font-size:8pt;letter-spacing:.08em;color:#333}
  .tp-figure{border:.5pt solid #000;background:#fff;max-width:none}
  .tp-figure img{filter:grayscale(1) contrast(1.05);aspect-ratio:3/4}
  .tp-name{color:#000;font-size:34pt;margin-top:0}
  .tp-eyebrow .meta{color:#333}
  .tp-eyebrow .rule{background:#999}
  .tp-tag{color:#222;font-size:13pt;max-width:none}
  .tp-specs{max-width:none;border-top-color:#000;margin-top:6mm}
  .tp-specs div{border-bottom-color:#bbb;font-size:9pt;padding:2mm 0}
  .tp-specs span:first-child{color:#444}
  .tp-share{border-top-color:#bbb;margin-top:6mm}
  .tp-share .meta{color:#666}
  .tp-share a{color:#000;border-bottom:0;font-size:8pt}
  a[href]::after{content:none!important}
}

/* =====================================================================
   18. NEWS / UPDATES   (M10 · front-page band + /news archive)
   Paper band: it sits between the two ink sections, so the roster and
   the happenings bands keep their weight.
   ===================================================================== */
.news{background:var(--paper)}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,48px) clamp(20px,3vw,44px);padding-block:34px clamp(18px,3vw,28px)}
.na{display:flex;flex-direction:column;min-width:0}
.na-fig{overflow:hidden;background:var(--bone);border:1px solid var(--line);margin-bottom:16px}
.na-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(var(--gs)) contrast(1.03);
  transition:transform var(--t-slow) var(--e-soft)}
.na:hover .na-fig img{transform:scale(1.04)}
.na-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.na-date{display:block;color:var(--ash-d)}
.na h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,36px);line-height:.94;
  letter-spacing:.03em;text-transform:uppercase;margin-top:9px;overflow-wrap:break-word}
.na h3 a{border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.na h3 a:hover{border-bottom-color:var(--accent)}
.na-body{margin-top:11px;color:var(--ash-d);font-size:14.5px;line-height:1.7;max-width:52ch}
.na-body p + p{margin-top:12px}
.na-more{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--accent);padding-bottom:2px}
/* No "All updates" link (archive off) → the grid carries the band's foot. */
.news-grid:last-child{padding-bottom:var(--sec-y)}
.news-foot{padding-bottom:var(--sec-y-sm)}
.news-all{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--accent);padding-bottom:3px}
/* Link text that only screen readers need (each "Read more" names its story). */
.scr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* archive: the same story, given room */
.newspage .news-list{padding-block:34px var(--sec-y);display:grid;gap:clamp(30px,5vw,58px)}
.nl-item{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);
  align-items:start;padding-bottom:clamp(26px,4vw,46px);border-bottom:1px solid var(--line);scroll-margin-top:120px}
.nl-item:last-child{border-bottom:0;padding-bottom:0}
.nl-item--noimg{grid-template-columns:minmax(0,1fr);max-width:760px}
.nl-item .na-fig{margin-bottom:0}
.nl-item .na-body{max-width:62ch}
.news-back{padding-bottom:var(--sec-y-sm)}
.news-back a{color:var(--ash-d);transition:color var(--t-fast)}
.news-back a:hover{color:var(--ink)}
@media(max-width:900px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.nl-item{grid-template-columns:minmax(0,1fr)}.nl-item .na-fig{max-width:460px}}
@media(max-width:560px){.news-grid{grid-template-columns:minmax(0,1fr)}}

/* Comp card link (M9) — talent page. */
.eoi-cc-link{display:inline-flex;flex-direction:column;gap:4px;border:1px solid var(--line);padding:12px 18px;margin-top:14px;transition:background var(--t-fast),color var(--t-fast)}
.eoi-cc-link:hover{background:var(--ink);color:var(--bone)}
.eoi-cc-link__label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.eoi-cc-link__note{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ash-d)}
.eoi-cc-link:hover .eoi-cc-link__note{color:var(--ash)}
@media print{.eoi-cc-link{display:none}}

/* Talent page — bio + photo gallery (client-editable extras). */
.tp-bio{margin-top:18px;max-width:60ch;color:var(--ash);font-size:15px;line-height:1.75}
.tp-bio p + p{margin-top:12px}
.tp-gallery{padding-block:clamp(28px,5vh,56px) 0}
.tp-gallery__h{display:block;margin-bottom:14px;color:var(--ash)}
.tp-gallery__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.tp-gallery__grid img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(var(--gs)) contrast(1.03);background:var(--ink);transition:transform var(--t-slow) var(--e-soft)}
.tp-gallery__grid picture{display:contents}
.tp-gallery__grid img:hover{transform:scale(1.03)}
@media(max-width:520px){.tp-gallery__grid{grid-template-columns:1fr 1fr}}
@media print{.tp-gallery{display:none}}

/* <picture> carries display:contents so the <img> inherits the layout the
   design expects (grid cell, object-fit, aspect-ratio). That ALSO promotes
   the <source> into the layout, where it takes a grid cell of its own and
   leaves a hole beside every photo. Hiding it changes nothing about which
   file the browser picks — resource selection reads the DOM, not CSS. */
picture > source{display:none}


/* ---------------------------------------------------------------
   Keyboard focus on form fields.
   .ff inputs carried outline:none, which beat the global
   :focus-visible rule on specificity — so tabbing through the
   inquiry, newsletter and application forms showed nothing at all.
   These give the fields their own visible ring. (WCAG 2.4.7)
   --------------------------------------------------------------- */
.ff input:focus-visible,.ff select:focus-visible,.ff textarea:focus-visible,
.nl-form input:focus-visible,.eoi-apply input:focus-visible,
.eoi-apply select:focus-visible,.eoi-apply textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-color:var(--accent)}
.talent .ff input:focus-visible,.happenings .ff input:focus-visible,
footer .nl-form input:focus-visible{outline-color:var(--accent-inv)}
/* Mouse users keep the quiet underline treatment. */
.ff input:focus,.ff select:focus,.ff textarea:focus{border-bottom-color:var(--ink)}

/* Muted labels on the DARK bands must use --ash (5.4:1), not --ash-d
   (2.69:1 on ink). --ash-d is the light-background token. */
.talent .sec-head .idx,.happenings .sec-head .idx,.talent-note,
footer .newsletter .meta{color:var(--ash)}