/* ==========================================================================
SD MEDIA — Design System
Dark editorial / broadcast studio
========================================================================== */
/* ---------- Tokens ---------- */
:root{
--ink:#0B0B0C;
--ink-2:#131316;
--ink-3:#1C1C21;
--line:rgba(237,234,228,.13);
--line-soft:rgba(237,234,228,.07);
--paper:#F4F1EB;
--paper-2:#E7E3DA;
--text:#EDEAE4;
--muted:#96938C;
/* Lifted from #6E6B66. At the ~10-11px this colour is used at (stat
labels, formats, episode codes) 3.71:1 failed WCAG AA; #8A8781 clears
4.5:1 while still reading as the quietest tier. */
--muted-2:#8A8781;
--brass:#DB631C; /* SD Media brand orange, sampled from the logo */
--brass-hi:#F0894A;
--live:#4ADE80;
--max:1280px;
--gut:clamp(20px,5vw,64px);
--f-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--f-serif:"Instrument Serif",Georgia,serif;
--ease:cubic-bezier(.22,1,.36,1);
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--ink);color:var(--text);
font-family:var(--f-body);font-size:17px;line-height:1.62;
font-weight:400;letter-spacing:-.005em;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img,svg,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:800;line-height:.98;letter-spacing:-.03em}
p{margin:0}
::selection{background:var(--brass);color:var(--ink)}
/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,10vw,140px)}
.section--tight{padding-block:clamp(52px,6vw,84px)}
.rule{height:1px;background:var(--line);border:0;margin:0}
/* ---------- Type scale ---------- */
.d1{font-size:clamp(2.9rem,7.2vw,6.6rem);text-transform:uppercase}
.d2{font-size:clamp(2.1rem,4.6vw,4rem);text-transform:uppercase}
.d3{font-size:clamp(1.5rem,2.6vw,2.35rem);text-transform:uppercase;letter-spacing:-.02em}
.d4{font-size:clamp(1.12rem,1.6vw,1.4rem);text-transform:uppercase;letter-spacing:-.01em;font-weight:700}
/* The brass label above every headline. At .7rem/600 it was losing badly to
the 4rem white capitals underneath — it read as a caption rather than as
the thing that tells you which chapter you are in. Bigger and heavier, and
it holds its own against the display type without competing with it. */
.eyebrow{
font-size:.84rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--brass);margin-bottom:1.15rem;display:block;
}
/* The channel section should look like the channel it pulls from. */
.eyebrow--yt{display:flex;align-items:center;gap:.6rem}
.ytmark{display:inline-flex;flex:none;line-height:0}
.ytmark svg{display:block;height:19px;width:auto}
.sechead .eyebrow--yt::before{display:none}
.lede{font-size:clamp(1.06rem,1.55vw,1.32rem);line-height:1.55;color:#CFCBC3;font-weight:350}
.body-muted{color:var(--muted);font-size:1rem;line-height:1.68}
.standfirst{font-family:var(--f-serif);font-style:italic;font-weight:400;
font-size:clamp(1.18rem,2vw,1.62rem);line-height:1.38;letter-spacing:-.01em;
color:#CFCBC3;max-width:44ch;margin-top:.9rem}
.small{font-size:.82rem;line-height:1.6;color:var(--muted)}
.mono{
font-family:var(--f-body);font-size:.71rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.serif-quote{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.7rem);line-height:1.22;letter-spacing:-.01em}
/* ---------- Header ---------- */
.hdr{
position:fixed;inset:0 0 auto 0;z-index:100;
transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(11,11,12,.88);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:2rem;height:78px;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.hdr__logo{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.hdr__logo img{height:42px;width:auto;display:block}
.brand{
font-family:var(--f-display);font-weight:800;font-size:1.16rem;text-transform:uppercase;
letter-spacing:.02em;color:var(--text);display:inline-flex;align-items:center;gap:.42rem;
}
.brand i{font-style:normal;color:var(--brass);font-weight:400;transform:translateY(-1px)}
.hdr__nav{display:flex;gap:2.1rem;margin-left:auto;align-items:center}
.hdr__nav a{
font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:#D6D2CA;position:relative;padding-block:6px;transition:color .25s;
}
.hdr__nav a::after{
content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brass);
transition:width .32s var(--ease);
}
.hdr__nav a:hover{color:#fff}
.hdr__nav a:hover::after,.hdr__nav a[aria-current="page"]::after{width:100%}
.hdr__nav a[aria-current="page"]{color:var(--brass)}
.hdr__cta{
border:1px solid var(--line);border-radius:2px;padding:.62rem 1.15rem;
font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
transition:background .25s,border-color .25s,color .25s;white-space:nowrap;
}
.hdr__cta:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.hdr__burger{display:none;margin-left:auto;width:40px;height:40px;position:relative}
.hdr__burger span{position:absolute;left:9px;width:22px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .2s}
.hdr__burger span:nth-child(1){top:16px}
.hdr__burger span:nth-child(2){top:23px}
.is-open .hdr__burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.is-open .hdr__burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
/* ---------- Hero (retired) ------------------------------------------------
The full-bleed hero with text laid over dimmed footage was replaced by the
reel below. .hero__video survives because the injector still uses the class
name; inside .reel it is sized and un-dimmed by the rules there. */
.hero__video{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
/* Background video for any framed media host (work card, section plate).
The still underneath stays as the poster: it shows while YouTube loads,
and it is all that renders for reduced-motion or no-JS visitors. */
.bgvid{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:100%;height:100%;border:0;pointer-events:none;
}
@supports (width:100cqw){
.has-bgvid{container-type:size}
.bgvid{width:max(100cqw,177.7778cqh);height:max(100cqh,56.25cqw)}
}
.wcard__fig .bgvid{opacity:1;filter:saturate(.92) brightness(.95)}
.masthead__sub{max-width:64ch;color:#D8D4CC;margin-bottom:0}
/* ---------- Reel — the work gets its own uncropped stage ------------------
A production company's reel should not be wallpaper behind a headline.
The media sits in a true 16:9 box at full opacity, capped so the whole
frame fits above the fold on a laptop, and every word sits below it. */
.reelwrap{padding-top:78px;background:#000;border-bottom:1px solid var(--line)}
.reel{position:relative;width:100%;max-width:calc(82svh * 16 / 9);
margin-inline:auto;aspect-ratio:16/9;background:#000;overflow:hidden}
.reel img,.reel iframe,.reel .bgvid,.reel .hero__video{
position:absolute;top:0;left:0;width:100%;height:100%;
min-width:0;min-height:0;transform:none;
object-fit:cover;opacity:1;filter:none;border:0;
}
.reel img{transition:opacity 1s ease}
/* A freshly-appended iframe paints its own document background — white —
for a beat before YouTube renders anything into it. The iframe is added
AFTER the poster in DOM order, so with no stacking rule it sits on top of
the still it was supposed to load behind, and the frame flashes white.
Two guards, because the timing differs by network and by browser:
1. the poster stays above the iframe until the player reports playing;
2. the iframe's own background is black, so nothing white can show
through at a fractional edge (the reel width is calc()-derived and
lands on sub-pixel boundaries at most viewport heights). */
.reel img{z-index:2}
.reel iframe,.reel .hero__video,.bgvid{background:#000}
/* Cross-fading still banner. Every frame is stacked; only .is-on is visible,
and the 1.4s fade is slow enough to read as a dissolve rather than a cut.
The first frame carries fetchpriority, the rest load lazily — nine 2000px
frames all at once would be a very expensive header. */
.reel--slides img{opacity:0;transition:opacity 1.4s var(--ease)}
.reel--slides img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){
.reel--slides img{transition:none}
}
/* Caption for the frame on screen. A solid brass block rather than a scrim —
it is the one piece of writing in the header and it should read as a caption
card, not as a subtitle. Revealed on hover on pointer devices; left visible
on touch, where there is no hover and the frames are otherwise unlabelled. */
.reel__cap{position:absolute;left:0;bottom:0;z-index:3;margin:0;
max-width:min(52ch,72%);
background:var(--brass);color:#12100E;
font-family:var(--f-display);font-weight:600;
font-size:clamp(.8rem,1.02vw,.94rem);line-height:1.45;letter-spacing:-.005em;
padding:clamp(.85rem,1.5vw,1.15rem) clamp(1rem,1.8vw,1.5rem);
border-top:3px solid #12100E;
opacity:0;transform:translateY(10px);
transition:opacity .3s var(--ease),transform .35s var(--ease);
pointer-events:none}
@media (hover:hover){.reel:hover .reel__cap{opacity:1;transform:none}}
@media (hover:none){.reel__cap{opacity:1;transform:none;max-width:100%;
font-size:.78rem;padding:.72rem .9rem .8rem}}
@media (prefers-reduced-motion:reduce){.reel__cap{transition:none}}
.reel__dots{position:absolute;left:50%;bottom:clamp(12px,1.8vw,22px);transform:translateX(-50%);
z-index:4;display:flex;gap:7px}
/* The visible mark is 3px tall; the button around it is 24px, so it can
actually be hit with a thumb. Padding does the work, not the bar. */
.reel__dots button{width:30px;height:24px;border:0;padding:0;cursor:pointer;
background:none;display:grid;align-items:center;-webkit-tap-highlight-color:transparent}
.reel__dots button::before{content:"";display:block;height:3px;width:100%;
background:rgba(255,255,255,.34);transition:background .3s}
.reel__dots button[aria-current="true"]::before{background:var(--brass)}
.reel__dots button:hover::before{background:rgba(255,255,255,.65)}
/* On touch the caption is permanent and full-width, so the dots move out
of its way rather than sitting on top of it. */
@media (hover:none){.reel__dots{left:auto;right:10px;top:10px;bottom:auto;transform:none}}
.reel.is-playing img{opacity:0}
/* Mute the badge-style slot marker so it never sits over the picture */
.reel.slot::after{bottom:auto;top:8px}
.masthead{padding-block:clamp(30px,4vw,56px) clamp(22px,3vw,38px)}
.masthead .eyebrow{margin-bottom:.85rem}
/* The display scale was tuned for type sitting over a full-bleed image.
On its own ground it needs to come down a step, or the headline eats
the whole screen the reel just handed it. */
.masthead h1{font-size:clamp(2.2rem,4.6vw,4.3rem);max-width:24ch;margin-bottom:1.1rem}
.masthead .d1{letter-spacing:-.035em}
.masthead h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;
text-transform:none;letter-spacing:-.02em;color:var(--brass-hi)}
.masthead .lede{max-width:68ch}
/* Route cards were designed to float over an image; on solid ground they
need a real surface rather than a translucent one. */
.masthead .routes{margin-top:clamp(1.8rem,3vw,2.6rem)}
.masthead .route{background:var(--ink-2);backdrop-filter:none}
.masthead .route:hover{background:rgba(219,99,28,.12)}
.reel__sound{
position:absolute;right:clamp(12px,1.6vw,20px);bottom:clamp(12px,1.6vw,20px);z-index:3;
display:inline-flex;align-items:center;gap:.5rem;
background:rgba(11,11,12,.66);backdrop-filter:blur(10px);
border:1px solid rgba(237,234,228,.28);color:var(--text);
padding:.5rem .8rem;font-family:var(--f-display);font-weight:700;
font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
cursor:pointer;transition:background .25s,border-color .25s,color .25s;
}
.reel__sound:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.reel__sound svg{width:14px;height:14px;flex:0 0 auto}
.reel__sound .on{display:none}
.reel__sound[aria-pressed="true"] .on{display:inline}
.reel__sound[aria-pressed="true"] .off{display:none}
/* ---------- Side-by-side: a claim and the film that proves it ---------- */
.claimband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding-block:clamp(56px,8vw,110px)}
.claimreel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.claimreel__t{position:relative;padding-right:clamp(0px,3vw,40px)}
.claimreel__t::after{content:"";position:absolute;right:0;top:6%;bottom:6%;width:1px;
background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.claimreel__v{position:relative;aspect-ratio:16/9;background:#000;
border:1px solid var(--line);overflow:hidden}
.claimreel__v img{width:100%;height:100%;object-fit:cover;transition:opacity 1s ease}
.claimreel__v.is-playing img{opacity:0}
.claimreel__v .reel__sound{right:10px;bottom:10px;padding:.42rem .65rem;font-size:.6rem}
@media (max-width:900px){
.claimreel{grid-template-columns:1fr}
.claimreel__t{padding-right:0}
.claimreel__t::after{display:none}
}
/* ---------- Owned-title strip ----------------------------------------
The homepage led with the shows in production. The archive is the bigger
asset — 68 hours of Road Less Traveled alone — so it gets named here
rather than left to be discovered on the catalogue page. */
/* ---------- Title strip — the four owned titles, as key art -------------
16:9, not portrait. The source material is landscape master frames and
burned-in title cards (Maximum Foodie's lockup runs the full width of the
frame), so a 2:3 or 3:4 crop clips the artwork it is meant to show. This is
also how a distribution catalogue actually presents a title. */
.titlestrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);margin-top:1.8rem}
.titlestrip a{background:var(--ink-2);display:flex;flex-direction:column;
transition:background .25s;overflow:hidden}
.titlestrip a:hover{background:rgba(219,99,28,.12)}
.titlestrip .ts__art{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.titlestrip .ts__art img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s var(--ease),opacity .3s;opacity:.94}
.titlestrip a:hover .ts__art img{transform:scale(1.045);opacity:1}
/* Sits under the image so a failed load leaves the title legible, not a hole. */
.titlestrip .ts__art::before{content:attr(data-t);position:absolute;inset:0;
display:grid;place-items:center;padding:1rem;text-align:center;
font-family:var(--f-display);font-weight:800;text-transform:uppercase;
font-size:.9rem;letter-spacing:.02em;color:var(--muted)}
.titlestrip .ts__txt{padding:.85rem 1.05rem 1rem;display:flex;flex-direction:column;gap:.28rem}
.titlestrip b{font-family:var(--f-display);font-weight:800;font-size:.98rem;
text-transform:uppercase;letter-spacing:-.015em;line-height:1.15}
.titlestrip span{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.titlestrip .ts__tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--brass);font-weight:600}
/* Delivery format, per title, straight from the master library. Road Less
Traveled is HD for S1–S3 and 4K from S4 — the site must not round that up. */
.titlestrip .ts__fmt{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted-2);font-weight:600;margin-top:.15rem}
@media (max-width:900px){.titlestrip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.titlestrip{grid-template-columns:1fr}}
/* ---------- Route cards (3 buyer paths) ---------- */
.routes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.route{
background:rgba(11,11,12,.55);backdrop-filter:blur(8px);
padding:1.5rem 1.5rem 1.35rem;display:flex;flex-direction:column;gap:.45rem;
transition:background .3s var(--ease);position:relative;min-height:132px;
}
.route:hover{background:rgba(219,99,28,.12)}
.route__no{font-size:.66rem;letter-spacing:.2em;color:var(--brass);font-weight:600}
.route__t{font-family:var(--f-display);font-weight:800;font-size:1.06rem;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.route__d{font-size:.83rem;color:var(--muted);line-height:1.5}
.route__arw{margin-top:auto;padding-top:.7rem;font-size:1.1rem;color:var(--brass);transition:transform .3s var(--ease)}
.route:hover .route__arw{transform:translateX(7px)}
/* ---------- Marquee trust rail ---------- */
.rail{border-block:1px solid var(--line);padding-block:1.5rem;overflow:hidden;background:var(--ink-2)}
.rail__track{display:flex;gap:3.4rem;width:max-content;animation:slide 46s linear infinite}
.rail:hover .rail__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.rail__item{
font-family:var(--f-display);font-weight:700;font-size:1.02rem;text-transform:uppercase;
letter-spacing:.02em;color:#8A8781;white-space:nowrap;transition:color .3s;
}
.rail__item:hover{color:var(--text)}
.rail__dot{color:var(--brass);opacity:.5}
/* ---------- Section header ---------- */
/* ---------- Section heads ------------------------------------------------
These were the same recipe every time — brass eyebrow, big uppercase H2 —
on a flat ground with nothing but padding between sections. Size was never
the problem: .d2 already runs to 4rem. What was missing was punctuation, so
nothing read as the start of a chapter. A hairline above the head and a
short brass rule leading the eyebrow give each section an opening edge. */
.sechead{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;
margin-bottom:clamp(2.2rem,4vw,3.6rem);
border-top:1px solid var(--line);padding-top:clamp(1.3rem,2.2vw,2rem)}
/* Opt-out for heads that already sit directly under a rule or a panel edge. */
.sechead--flush{border-top:0;padding-top:0}
/* A page hero already closes with its own bottom border. The first section
head after one would draw a second line a short gap below it, which reads
as a mistake rather than as structure. The hero's rule is the chapter edge;
this one stands down. Same for a head that follows an explicit
. */
.phero + .section > .sechead:first-child,
.rule + .section > .sechead:first-child{border-top:0;padding-top:0}
.sechead .eyebrow{display:flex;align-items:center;gap:.72rem;font-size:.84rem;
letter-spacing:.2em;margin-bottom:.9rem}
.sechead .eyebrow::before{content:"";width:32px;height:2px;background:var(--brass);flex:none}
.sechead p{max-width:52ch;margin-top:1rem}
.sechead__link{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);white-space:nowrap;border-bottom:1px solid rgba(219,99,28,.4);padding-bottom:3px;transition:border-color .25s}
.sechead__link:hover{border-color:var(--brass)}
/* ---------- Production cards ---------- */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.prod{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line-soft);transition:border-color .35s,transform .45s var(--ease)}
.prod:hover{border-color:rgba(219,99,28,.5);transform:translateY(-4px)}
.prod__fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.prod__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);filter:saturate(.92)}
.prod:hover .prod__fig img{transform:scale(1.055)}
.prod__badge{
position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:.45rem;
background:rgba(11,11,12,.82);backdrop-filter:blur(8px);border:1px solid var(--line);
padding:.32rem .62rem;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.prod__badge i{font-style:normal;color:var(--brass-hi);font-weight:700}
.prod__badge b{width:5px;height:5px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.prod__body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.65rem;flex:1}
.prod__meta{font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brass)}
.prod__cred{font-size:.85rem;color:var(--muted);line-height:1.5}
.prod__cred strong{color:#C9C5BD;font-weight:600}
.prod__link{margin-top:auto;padding-top:.9rem;font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text);display:inline-flex;gap:.5rem;align-items:center}
.prod__link i{font-style:normal;color:var(--brass);transition:transform .3s var(--ease)}
.prod:hover .prod__link i{transform:translateX(6px)}
/* ---------- 3-col value props ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.pillar{background:var(--ink);padding:clamp(1.8rem,3vw,2.8rem) clamp(1.4rem,2.2vw,2.2rem)}
.pillar__n{font-family:var(--f-display);font-size:2.6rem;font-weight:800;color:rgba(219,99,28,.26);line-height:1;margin-bottom:1.1rem}
.pillar h3{margin-bottom:.85rem}
.pillar p{color:var(--muted);font-size:.95rem;line-height:1.66}
/* ---------- Stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--ink-2);padding:1.7rem 1.2rem;text-align:center}
.stat__v{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.035em;line-height:1;color:var(--text)}
.stat__v span{color:var(--brass)}
.stat__l{margin-top:.6rem;font-size:.66rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:.7rem;padding:.95rem 1.7rem;border-radius:2px;
font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
transition:background .28s,color .28s,border-color .28s,transform .28s var(--ease);
}
.btn--primary{background:var(--brass);color:var(--ink)}
.btn--primary:hover{background:var(--brass-hi);transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn--paper{background:var(--ink);color:var(--paper)}
.btn--paper:hover{background:#000}
.btn i{font-style:normal}
.btnrow{display:flex;flex-wrap:wrap;gap:.9rem}
/* ---------- CTA band ---------- */
.cta{background:var(--paper);color:var(--ink);padding-block:clamp(64px,8vw,110px)}
.cta h2{color:var(--ink);max-width:16ch;margin-bottom:1.2rem}
.cta p{color:#4A4741;max-width:52ch;margin-bottom:2.1rem;font-size:1.05rem}
.cta .eyebrow{color:#9C4A15}
.cta__mail{font-family:var(--f-display);font-weight:700;font-size:clamp(1.1rem,2vw,1.5rem);text-transform:none;letter-spacing:-.02em;border-bottom:2px solid rgba(11,11,12,.2);padding-bottom:2px;transition:border-color .25s}
.cta__mail:hover{border-color:var(--ink)}
/* ---------- Page hero (interior) ---------- */
.phero{position:relative;padding-block:clamp(140px,17vh,210px) clamp(48px,7vw,86px);border-bottom:1px solid var(--line);overflow:hidden}
.phero__in{position:relative;z-index:2;width:100%}
.phero h1{max-width:18ch;margin-bottom:1.4rem}
/* Same emphasis treatment as the homepage headline: the word that carries the
claim drops into brass italic serif. */
.phero h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;
text-transform:none;letter-spacing:-.02em;color:var(--brass-hi)}
.phero .lede{max-width:62ch}
/* ---------- Case study ---------- */
.csmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.6rem}
.csmeta div{background:var(--ink-2);padding:1.15rem 1.2rem}
.csmeta dt{font-size:.63rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.42rem}
.csmeta dd{margin:0;font-size:.92rem;font-weight:500;color:var(--text);line-height:1.4}
.csblock{display:grid;grid-template-columns:220px 1fr;gap:clamp(1.6rem,4vw,4rem);padding-block:clamp(2.4rem,4vw,3.6rem);border-bottom:1px solid var(--line-soft)}
.csblock:last-child{border-bottom:0}
.csblock__k{font-family:var(--f-display);font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.02em;color:var(--brass);padding-top:.3rem}
.csblock__v p+p{margin-top:1.1rem}
.csblock__v p{color:#CBC7BF;font-size:1.03rem;line-height:1.7}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.6rem}
.specs div{background:var(--ink-2);padding:1rem 1.1rem}
.specs dt{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.35rem;font-weight:600}
.specs dd{margin:0;font-size:.9rem;color:var(--text)}
.eplist{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.eplist li{background:var(--ink-2);padding:1rem 1.2rem;display:grid;grid-template-columns:56px 1fr;gap:1rem;align-items:baseline}
.eplist b{font-family:var(--f-display);font-size:.8rem;color:var(--brass);letter-spacing:.1em}
.eplist span{font-size:.95rem}
.eplist em{font-style:normal;color:var(--muted);display:block;font-size:.85rem;margin-top:.2rem}
/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,18px)}
.gal figure{margin:0;overflow:hidden;background:var(--ink-3);position:relative}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gal figure:hover img{transform:scale(1.045)}
.gal .g-8{grid-column:span 8;aspect-ratio:16/9}
.gal .g-4{grid-column:span 4;aspect-ratio:4/5}
.gal .g-6{grid-column:span 6;aspect-ratio:16/10}
.gal .g-12{grid-column:span 12;aspect-ratio:21/9}
/* ---------- Work grid ---------- */
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,34px)}
.wcard{display:block;position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line-soft);transition:border-color .35s}
.wcard:hover{border-color:rgba(219,99,28,.5)}
.wcard__fig{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--ink-3)}
.wcard__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s;filter:saturate(.85) brightness(.86)}
.wcard:hover .wcard__fig img{transform:scale(1.05);filter:saturate(1) brightness(1)}
/* The tag names how the work was paid for — commissioned, brand-funded — which
is the single fact a buyer is scanning this grid for. It was set at .6rem in
a corner, smaller than the caption under it. Now it reads as a label. */
.wcard__tag{position:absolute;top:16px;left:16px;z-index:2;background:rgba(11,11,12,.88);
backdrop-filter:blur(8px);border:1px solid rgba(219,99,28,.42);padding:.46rem .85rem;
font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--brass)}
/* A card that should run the full width of the grid rather than sit in a column. */
.wcard--wide{grid-column:1/-1}
.wcard__body{padding:1.6rem 1.6rem 1.8rem}
.wcard__body h3{margin-bottom:.5rem}
.wcard__cred{font-size:.84rem;color:var(--muted);line-height:1.5}
/* The section is called "Proof, not a logo wall". This sentence IS the proof,
and it was the smallest, faintest text on the card. */
.wcard__proof{margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--line-soft);
font-size:.95rem;line-height:1.6;color:#D2CEC6}
.wcard__proof b{color:var(--brass);font-weight:700}
/* ---------- Services ---------- */
.svc{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.8rem,5vw,5rem);padding-block:clamp(2.8rem,5vw,4.6rem);border-bottom:1px solid var(--line)}
.svc:last-child{border-bottom:0}
.svc__l h2{margin-bottom:1rem}
.svc__r>p{margin-bottom:1.5rem}
.taglist{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.taglist span{border:1px solid var(--line);padding:.4rem .75rem;font-size:.73rem;letter-spacing:.04em;color:#B8B4AC}
.caplist{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.7rem}
/* The marker is positioned, not a grid column. As a two-column grid, every
inline element inside a bullet — a link, an — became a third grid item
and dropped onto its own row below the text. A positioned marker leaves the
list item as ordinary flowing text, so inline markup behaves. */
.caplist li{position:relative;padding-left:1.5rem;font-size:.96rem;color:#C4C0B8;line-height:1.55}
.caplist li::before{content:"";position:absolute;left:0;top:.55rem;
width:6px;height:6px;background:var(--brass)}
.caplist li a{color:var(--brass);border-bottom:1px solid rgba(219,99,28,.4);
padding-bottom:1px;transition:border-color .25s}
.caplist li a:hover{border-color:var(--brass)}
/* ---------- Contact routing ---------- */
.croutes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.croute{background:var(--ink-2);padding:1.7rem 1.6rem;transition:background .3s}
.croute:hover{background:var(--ink-3)}
.croute h3{font-size:1rem;margin-bottom:.5rem}
.croute p{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.croute a{font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--brass);letter-spacing:-.01em;border-bottom:1px solid rgba(219,99,28,.35);padding-bottom:2px;transition:border-color .25s}
.croute a:hover{border-color:var(--brass)}
/* ---------- Logo grid (light band) ---------- */
.logoband{background:var(--ink);padding-block:clamp(48px,6vw,80px);
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logoband .eyebrow{color:var(--brass)}
.logoband h2{color:var(--text)}
.logogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:clamp(14px,2vw,28px);align-items:center;margin-top:2.4rem}
/* Dark tiles, matching the licensee wall on the home, Originals and Work
pages. Every logo file on the site is authored light-on-transparent for
that wall; this grid used white tiles with mix-blend-mode:multiply, which
silently erased most of them. One tile treatment, one set of artwork.
max-height:100% also could not resolve inside the aspect-ratio box, so
tall marks pushed their tiles to 3x the height of the wordmarks — hence
the explicit height and object-fit here. */
.logogrid a,.logogrid div{
display:grid;place-items:center;background:var(--ink-2);border:1px solid var(--line);
aspect-ratio:16/9;padding:1.1rem;overflow:hidden;
transition:border-color .3s,transform .3s var(--ease),background .3s;
}
.logogrid a:hover{border-color:rgba(219,99,28,.5);transform:translateY(-3px)}
.logogrid img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;
opacity:.86;transition:opacity .3s}
.logogrid div:hover img{opacity:1}
.logogrid .wordmark{
font-family:var(--f-display);font-weight:800;font-size:.96rem;text-transform:uppercase;
letter-spacing:-.01em;color:#B8B4AC;text-align:center;line-height:1.15;
}
/* ---------- Episode strip ----------
One key-art frame per episode under a title card. Used on Food Unknown,
where five episodes is few enough to show the whole season at a glance. */
.epstrip{margin:1.6rem 0 1.4rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.epstrip__k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--brass);margin-bottom:.85rem}
.epstrip__g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,.8vw,10px)}
.epstrip__f{margin:0;min-width:0}
.epstrip__f img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
border:1px solid var(--line);background:var(--ink-3)}
.epstrip__f figcaption{padding-top:.45rem;display:grid;gap:.1rem}
.epstrip__f b{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--text)}
.epstrip__f span{font-size:.68rem;line-height:1.35;color:var(--muted-2)}
@media (max-width:820px){
.epstrip__g{grid-template-columns:repeat(3,minmax(0,1fr))}
.epstrip__f:nth-child(n+4) figcaption span{display:none}
}
@media (max-width:520px){.epstrip__g{grid-template-columns:repeat(2,minmax(0,1fr))}
.epstrip__f span{display:none}}
/* ---------- Facts table ---------- */
.facts{border:1px solid var(--line);border-bottom:0}
.facts__row{display:grid;grid-template-columns:minmax(160px,240px) 1fr;border-bottom:1px solid var(--line)}
.facts__row dt{padding:1rem 1.3rem;font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);background:var(--ink-2)}
.facts__row dd{margin:0;padding:1rem 1.3rem;font-size:.97rem;color:var(--text)}
/* ---------- Bio ---------- */
.bio{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.bio__fig{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-3);border:1px solid var(--line)}
.bio__fig img{width:100%;height:100%;object-fit:cover}
.bio__body p{color:#CBC7BF;font-size:1.04rem;line-height:1.72}
.bio__body p+p{margin-top:1.3rem}
/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--ink-2);padding-block:clamp(48px,6vw,76px) 2rem}
.ftr__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(1.8rem,4vw,3.4rem)}
.ftr__logo img{height:52px;width:auto;display:block;margin-bottom:1.2rem}
.ftr__blurb{font-size:.88rem;color:var(--muted);max-width:34ch;line-height:1.62}
.ftr__h{font-size:.66rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1rem}
.ftr__list{list-style:none;padding:0;margin:0;display:grid;gap:.62rem}
.ftr__list a{font-size:.88rem;color:#B8B4AC;transition:color .22s}
.ftr__list a:hover{color:var(--brass)}
.ftr__btm{margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:1.6rem;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.ftr__btm p{font-size:.76rem;color:var(--muted-2)}
.ftr__soc{display:flex;gap:1.3rem}
.ftr__soc a{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);transition:color .22s}
.ftr__soc a:hover{color:var(--brass)}
.ftr__legal{display:inline-flex;gap:.9rem;margin-left:.55rem}
.ftr__legal a{color:var(--muted-2);border-bottom:1px solid rgba(237,234,228,.16);transition:color .22s,border-color .22s}
.ftr__legal a:hover{color:var(--brass);border-color:var(--brass)}
/* ---------- Photo placeholder (waiting on real stills) ---------- */
.ph{position:relative;background:var(--ink-2);border:1px dashed var(--line);
display:flex;align-items:center;justify-content:center;margin:0}
.ph::after{content:attr(data-ph);font-family:var(--f-body);font-size:.66rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);text-align:center;padding:1rem}
/* ---------- Field production panel ---------- */
.field{background:var(--ink-2);border:1px solid var(--line);border-left:2px solid var(--brass);
padding:clamp(1.3rem,2.6vw,2rem);margin-top:clamp(2rem,3.5vw,3rem);
display:grid;grid-template-columns:minmax(200px,270px) 1fr;gap:clamp(16px,3vw,40px);align-items:center}
.field__k .eyebrow{margin-bottom:.5rem}
.field__k h3{font-family:var(--f-display);font-weight:800;font-size:clamp(1.15rem,2vw,1.6rem);
text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.field__k p{font-size:.82rem;color:var(--muted);margin-top:.6rem;line-height:1.5}
.field__list{display:flex;flex-wrap:wrap;gap:.55rem}
.field__list a{display:inline-flex;align-items:center;gap:.45rem;
font-family:var(--f-display);font-weight:700;font-size:.88rem;letter-spacing:.01em;
text-transform:uppercase;color:var(--text);
border:1px solid var(--line);padding:.55rem .85rem;
transition:background .25s,border-color .25s,color .25s}
.field__list a::after{content:"\2197";color:var(--brass);font-size:.9em;transition:transform .25s var(--ease)}
.field__list a:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.field__list a:hover::after{color:var(--ink);transform:translate(2px,-2px)}
@media (max-width:820px){.field{grid-template-columns:1fr;gap:1.1rem}}
/* ---------- Episode guide ---------- */
.destrip{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.destrip--sm{gap:.35rem;margin-top:.15rem}
/* A row of city names with no caption could be anything — territories sold,
offices, ambitions. The label says it is the running order. */
/* .destrip is already flex-wrap, so a full-width ::before puts the label on
its own line and the chips wrap underneath it. No extra markup. */
.destrip--lab{margin-top:1.1rem;gap:.5rem .35rem}
.destrip--lab::before{content:attr(data-lab);flex:0 0 100%;
font-size:.68rem;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted-2)}
.logline{font-family:var(--f-serif);font-style:italic;font-weight:400;
font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.4;color:#DCD8D0;
margin-bottom:.9rem}
.logline b{font-style:normal;font-family:var(--f-display);font-weight:800;
text-transform:uppercase;letter-spacing:-.01em;color:var(--brass-hi);font-size:.94em}
.destrip--sm span{font-size:.63rem;padding:.24rem .5rem;letter-spacing:.1em}
.destrip span{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--brass);border:1px solid rgba(219,99,28,.34);padding:.34rem .7rem}
.eps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ep{display:grid;grid-template-columns:88px 1fr;gap:clamp(14px,2.4vw,32px);
padding:clamp(1.5rem,3vw,2.3rem) 0;border-bottom:1px solid var(--line)}
.ep__n{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);
line-height:1;color:var(--brass);letter-spacing:-.03em}
.ep__t{font-size:clamp(1.25rem,2vw,1.75rem);margin-bottom:.9rem}
.ep p{font-size:.97rem;line-height:1.7;color:#B8B4AC;max-width:74ch}
@media (max-width:560px){
.ep{grid-template-columns:1fr;gap:.6rem}
.ep__n{font-size:1.1rem}
}
/* ---------- Season table (public show pages) ---------- */
.seasons{border-top:1px solid var(--line);margin-top:1.8rem}
.srow__m{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.srow__d{font-size:.92rem;color:#C4C0B8;line-height:1.55}
@media (max-width:700px){
.srow{grid-template-columns:52px 1fr;gap:.4rem 14px}
.srow__n{grid-row:span 2}
}
/* ---------- Screening room ---------- */
.prtl__bar{position:sticky;top:78px;z-index:40;background:rgba(11,11,12,.92);
backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line)}
/* padding-block only: a shorthand here would wipe .wrap-wide's gutter. */
.prtl__bar div{display:flex;gap:1.6rem;overflow-x:auto;padding-block:.85rem;scrollbar-width:none}
.prtl__bar div::-webkit-scrollbar{display:none}
.prtl__bar a{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);white-space:nowrap;transition:color .22s}
.prtl__bar a:hover{color:var(--brass)}
.ttl{border:1px solid var(--line);background:var(--ink-2);margin-bottom:clamp(22px,3vw,38px);scroll-margin-top:150px}
.ttl__top{display:grid;grid-template-columns:minmax(260px,420px) 1fr}
.ttl__fig{position:relative;overflow:hidden;background:var(--ink-3);min-height:230px}
.ttl__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ttl__body{padding:clamp(1.4rem,2.6vw,2.2rem)}
.ttl__body h2{margin-bottom:.55rem}
.ttl__body>p{color:#C4C0B8;font-size:.97rem;line-height:1.62;max-width:62ch;margin-bottom:1.1rem}
@media (max-width:820px){.ttl__top{grid-template-columns:1fr}.ttl__fig{aspect-ratio:16/9;min-height:0}}
.sacc{border-top:1px solid var(--line)}
.sacc summary{list-style:none;cursor:pointer;display:grid;
grid-template-columns:64px 1fr auto;gap:clamp(10px,2vw,22px);align-items:center;
padding:1.05rem clamp(1.4rem,2.6vw,2.2rem);transition:background .25s}
.sacc summary::-webkit-details-marker{display:none}
.sacc summary:hover{background:var(--ink-3)}
.sacc__n{font-family:var(--f-display);font-weight:800;font-size:1.1rem;color:var(--brass)}
.sacc__m{font-size:.83rem;color:var(--muted);line-height:1.5}
.sacc__m b{color:var(--text);font-weight:500}
.sacc__x{font-size:1.1rem;color:var(--muted-2);transition:transform .3s var(--ease)}
.sacc[open] .sacc__x{transform:rotate(45deg)}
.sacc__in{padding:0 clamp(1.4rem,2.6vw,2.2rem) 1.6rem}
.eprow{display:grid;grid-template-columns:74px 1fr 132px;gap:clamp(10px,2vw,22px);
padding:1rem 0;border-top:1px solid var(--line-soft);align-items:start}
.eprow__c{font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--muted-2);
font-variant-numeric:tabular-nums;padding-top:.15rem}
.eprow__t{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:.35rem;line-height:1.4}
.eprow__d{font-size:.87rem;line-height:1.62;color:#A8A49C;max-width:78ch}
.scr{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
border:1px solid rgba(219,99,28,.4);color:var(--brass);padding:.44rem .8rem;
font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
white-space:nowrap;transition:background .22s,color .22s,border-color .22s}
.scr:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.scr--off{border-color:var(--line);color:var(--muted-2);pointer-events:none}
@media (max-width:760px){
.eprow{grid-template-columns:1fr;gap:.5rem}
.eprow__c{padding-top:0}
.scr{justify-self:start}
.prtl__bar{top:0}
}
/* ---------- Legal / long-form prose ---------- */
.legal{max-width:74ch;margin-inline:auto}
.legal h2{font-size:clamp(1.15rem,1.7vw,1.45rem);text-transform:uppercase;letter-spacing:-.01em;
margin:3.1rem 0 .9rem;padding-top:1.5rem;border-top:1px solid var(--line-soft);color:var(--text)}
.legal h2:first-of-type{margin-top:1.4rem}
.legal h3{font-family:var(--f-body);font-size:.95rem;font-weight:600;letter-spacing:0;
text-transform:none;color:var(--text);margin:1.7rem 0 .5rem}
.legal p,.legal li{font-size:.95rem;line-height:1.72;color:#B8B4AC}
.legal p{margin-bottom:1rem}
.legal ul{margin:0 0 1.1rem;padding-left:1.15rem}
.legal li{margin-bottom:.45rem}
.legal li::marker{color:var(--brass)}
.legal a{color:var(--brass);border-bottom:1px solid rgba(219,99,28,.34)}
.legal a:hover{border-color:var(--brass)}
.legal strong{color:var(--text);font-weight:600}
.legal__meta{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);
margin-bottom:2.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line-soft)}
.legal__note{margin-top:3rem;padding:1.3rem 1.4rem;background:var(--ink-2);
border:1px solid var(--line-soft);border-left:2px solid var(--brass)}
.legal__note p{margin:0;font-size:.87rem;color:var(--muted)}
/* ---------- Reveal ---------- */
.rev{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rev.in{opacity:1;transform:none}
.rev[data-d="1"]{transition-delay:.09s}
.rev[data-d="2"]{transition-delay:.18s}
.rev[data-d="3"]{transition-delay:.27s}
.rev[data-d="4"]{transition-delay:.36s}
/* ---------- Slot marker (media to be replaced) ---------- */
/* NOTE: do NOT set position here — every slot host is already positioned,
and position:relative here overrode .phero__bg{position:absolute}. */
.slot::after{
content:attr(data-slot);position:absolute;left:8px;bottom:8px;z-index:3;
background:rgba(219,99,28,.94);color:#0B0B0C;font-size:.55rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;padding:.24rem .5rem;pointer-events:none;
opacity:0;transition:opacity .25s;
}
body.show-slots .slot::after{opacity:1}
/* ---------- Responsive ---------- */
@media (max-width:1240px){
.routes{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
.prods{grid-template-columns:1fr 1fr}
.prod:last-child{grid-column:span 2}
.stats{grid-template-columns:repeat(3,1fr)}
.csmeta{grid-template-columns:repeat(2,1fr)}
.bio{grid-template-columns:1fr;gap:2.2rem}
.bio__fig{max-width:380px}
}
@media (max-width:900px){
.hdr__nav{
position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
background:rgba(11,11,12,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
padding:1rem var(--gut) 1.8rem;transform:translateY(-115%);transition:transform .42s var(--ease);
margin-left:0;
}
.is-open .hdr__nav{transform:none}
.hdr__nav a{width:100%;padding-block:.85rem;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.hdr__nav .hdr__cta{margin-top:1.1rem;border-bottom:1px solid var(--line);width:auto}
.hdr__burger{display:block}
.hdr__logo img{height:34px}
.hdr{background:rgba(11,11,12,.9);backdrop-filter:blur(18px);border-bottom-color:var(--line)}
.routes{grid-template-columns:1fr 1fr}
.pillars{grid-template-columns:1fr}
.prods{grid-template-columns:1fr}
.prod:last-child{grid-column:auto}
.wgrid{grid-template-columns:1fr}
.svc{grid-template-columns:1fr;gap:1.4rem}
.csblock{grid-template-columns:1fr;gap:.9rem}
.croutes{grid-template-columns:1fr}
.sechead{grid-template-columns:1fr}
.ftr__grid{grid-template-columns:1fr 1fr}
.gal .g-8,.gal .g-4,.gal .g-6{grid-column:span 12}
.gal .g-4{aspect-ratio:16/10}
.facts__row{grid-template-columns:1fr}
.facts__row dt{border-bottom:1px solid var(--line-soft)}
.hero__scroll{display:none}
}
@media (max-width:560px){
body{font-size:16px}
.stats{grid-template-columns:repeat(2,1fr)}
.csmeta{grid-template-columns:1fr}
.ftr__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.rev{opacity:1;transform:none}
}
/* ---------- Catalogue ---------- */
.titlecard{position:relative;display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:0;background:var(--ink-2);border:1px solid var(--line);margin-bottom:clamp(14px,2vw,22px);transition:border-color .35s}
.titlecard:hover{border-color:rgba(219,99,28,.5)}
.titlecard__fig img{transition:transform 1s var(--ease),filter .5s}
.titlecard:hover .titlecard__fig img{transform:scale(1.04)}
/* Stretched link: the whole card is clickable, the arrow shows where it goes. */
.titlecard__more{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.35rem;
font-family:var(--f-display);font-weight:700;font-size:.86rem;letter-spacing:.04em;
text-transform:uppercase;color:var(--brass)}
.titlecard__more::after{content:"\2192";transition:transform .3s var(--ease)}
.titlecard:hover .titlecard__more::after{transform:translateX(6px)}
.titlecard__more::before{content:"";position:absolute;inset:0;z-index:2}
.titlecard__fig{position:relative;overflow:hidden;background:var(--ink-3);min-height:200px}
.titlecard__fig img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.titlecard__body{padding:clamp(1.3rem,2.4vw,2rem)}
.titlecard__body h3{margin-bottom:.5rem}
.titlecard__gen{font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);margin-bottom:.9rem}
.titlecard__body p{color:#C4C0B8;font-size:.97rem;line-height:1.62;max-width:60ch}
.tcspecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.3rem}
.tcspecs div{background:var(--ink);padding:.75rem .85rem}
.tcspecs dt{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.3rem;font-weight:600}
.tcspecs dd{margin:0;font-size:.86rem;color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:800px){.titlecard{grid-template-columns:1fr}.titlecard__fig{aspect-ratio:16/9;min-height:0}}
/* Licensee wall on dark */
/* ---------- Licensee wall ------------------------------------------------
A row of broadcaster logos with no caption is ambiguous: it reads as a
client list, a partner list, or worse, decoration. It has to say what it
actually means — these networks have licensed our programming — and it has
to say it as part of the bar, not as a paragraph floating above it.
.lwall wraps the grid and carries a brass tab clipped to its top edge. */
.lwall{position:relative;margin-top:2.4rem}
.lwall__tab{position:absolute;top:0;left:0;transform:translateY(-50%);z-index:2;
display:inline-flex;align-items:center;gap:.6rem;
background:var(--brass);color:#12100E;
padding:.5rem .95rem;font-size:.72rem;font-weight:800;
letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.lwall__tab::before{content:"";width:6px;height:6px;background:#12100E;flex:none;
transform:rotate(45deg)}
.lwall .licensees{border-top-color:var(--brass)}
.lwall__foot{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:baseline;
border:1px solid var(--line);border-top:0;background:var(--ink-2);
padding:.85rem 1.1rem;font-size:.82rem;color:var(--muted)}
.lwall__foot b{color:#D2CEC6;font-weight:600}
.lwall__foot--cta{justify-content:space-between;align-items:center}
.lwall__foot--cta b{color:var(--text);font-size:1.02em}
/* On a narrow screen the logo cells are only ~70px tall, so a tab straddling
the top edge sits on top of the first row of logos. Below this width the tab
stops floating and becomes a full-width header bar on the wall instead —
same reading, no collision. */
@media (max-width:820px){
.lwall{margin-top:0}
.lwall__tab{position:static;transform:none;display:flex;width:100%;
justify-content:center;white-space:normal;text-align:center;
font-size:.7rem;letter-spacing:.13em;padding:.6rem .8rem}
}
.licensees{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
/* Declared AFTER the base so it wins on source order, and WITHOUT !important
so the breakpoints below can still override it. It previously carried
!important, which pinned the homepage wall at five columns all the way down
to a phone — five cells across 390px is a 70px logo. */
.licensees--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.licensees--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1400px){.licensees{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1080px){.licensees,.licensees--5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.licensees,.licensees--4,.licensees--5{grid-template-columns:repeat(2,minmax(0,1fr))}
.licensees .lgo{padding:.7rem}
.licensees img{max-height:40px;max-width:88%}}
.licensees .lgo{background:var(--ink-2);display:grid;place-items:center;aspect-ratio:16/9;padding:1rem;text-align:center}
/* The wordmark is the fallback, not the default. The img's onerror removes it
when a logo file is missing, and with no img left the ~ selector stops
matching, so the wordmark appears. No JavaScript in the path. */
.licensees img ~ .wm{display:none}
.licensees .wm{font-family:var(--f-display);font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:-.01em;color:#B8B4AC;line-height:1.2}
/* Real logos, in their own colours. The old rule flattened everything to
white, which would have destroyed the Prime Video blue and the Samsung
marks. Optical sizing: wide wordmarks hit the width cap, square marks hit
the height cap, so the row reads as one weight rather than one measure. */
.licensees img{max-height:52px;max-width:82%;width:auto;height:auto;object-fit:contain;opacity:.86;transition:opacity .3s}
.licensees [data-logo="insight-tv"] img,
.licensees [data-logo="samsung-tv-plus"] img{max-height:58px}
.licensees [data-logo="discovery"] img{max-width:88%}
/* Optical sizing: a square mark reads smaller than a wide wordmark at the same
height, so WildBear's roundel gets more, Off the Fence's wordmark gets less. */
.licensees [data-logo="wildbear"] img{max-height:70px}
.licensees [data-logo="off-the-fence"] img{max-height:34px;max-width:86%}
.licensees div:hover img{opacity:1}
.licensees div:hover{background:var(--ink-3)}
/* ==========================================================================
Enquiry form — underline fields, floating labels, no boxes
========================================================================== */
.frm{display:grid;gap:clamp(1.6rem,3vw,2.4rem);max-width:760px}
.frm__row{display:grid;gap:clamp(1.6rem,3vw,2.4rem);grid-template-columns:1fr 1fr}
.fld{position:relative;padding-top:1.15rem}
.fld::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--brass);transform:scaleX(0);transform-origin:left;
transition:transform .42s var(--ease);
}
.fld:focus-within::after{transform:scaleX(1)}
.fld input,.fld select,.fld textarea{
width:100%;background:transparent;border:0;border-radius:0;
border-bottom:1px solid rgba(237,234,228,.19);
color:var(--text);font-family:var(--f-body);font-size:1.04rem;font-weight:400;
line-height:1.5;padding:.5rem 0 .78rem;transition:border-color .3s;
}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-bottom-color:rgba(237,234,228,.34)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none}
.fld textarea{min-height:132px;resize:vertical}
.fld label{
position:absolute;left:0;top:1.65rem;pointer-events:none;
font-family:var(--f-body);font-size:1.04rem;font-weight:400;color:var(--muted);
transition:transform .3s var(--ease),font-size .3s var(--ease),color .3s,letter-spacing .3s;
transform-origin:left top;
}
.fld input:focus ~ label,
.fld input:not(:placeholder-shown) ~ label,
.fld textarea:focus ~ label,
.fld textarea:not(:placeholder-shown) ~ label,
.fld--fixed label{
transform:translateY(-1.6rem);
font-size:.64rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
color:var(--muted-2);
}
.fld:focus-within label{color:var(--brass)}
/* select */
.fld select{
appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 11px) calc(50% + 2px),calc(100% - 6px) calc(50% + 2px);
background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.fld select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),
linear-gradient(135deg,var(--brass) 50%,transparent 50%)}
.fld select option{background:var(--ink-2);color:var(--text)}
.fld select:invalid{color:var(--muted-2)}
/* kill the browser autofill wash */
.fld input:-webkit-autofill,.fld input:-webkit-autofill:focus{
-webkit-text-fill-color:var(--text);
-webkit-box-shadow:0 0 0 1000px var(--ink) inset;
caret-color:var(--text);transition:background-color 9999s;
}
.frm__foot{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;align-items:center;justify-content:space-between;
padding-top:.6rem;border-top:1px solid var(--line-soft)}
.frm__note{font-size:.85rem;color:var(--muted);line-height:1.55;max-width:44ch}
.frm__note a{color:var(--brass);border-bottom:1px solid rgba(219,99,28,.35);padding-bottom:1px;white-space:nowrap}
.frm__note a:hover{border-bottom-color:var(--brass)}
.frm__send{
display:inline-flex;align-items:center;gap:.85rem;background:var(--brass);color:#0B0B0C;
font-family:var(--f-display);font-weight:700;font-size:.8rem;letter-spacing:.15em;
text-transform:uppercase;padding:1.05rem 2.2rem;border:0;border-radius:2px;cursor:pointer;
transition:background .28s,transform .28s var(--ease);
}
.frm__send:hover{background:var(--brass-hi);transform:translateY(-2px)}
.frm__send i{font-style:normal;transition:transform .28s var(--ease)}
.frm__send:hover i{transform:translateX(5px)}
.hp{position:absolute;left:-9999px}
@media (max-width:680px){.frm__row{grid-template-columns:1fr}.frm__foot{justify-content:flex-start}}
/* Validation — :user-invalid only flags a field after the user has touched it,
so nothing is red on page load. */
.fld input:user-invalid,.fld textarea:user-invalid,.fld select:user-invalid{
border-bottom-color:#C4553D;
}
.fld:has(:user-invalid) label{color:#C4553D}
.fld:has(:user-invalid)::after{background:#C4553D}
.frm__err{
width:100%;font-size:.82rem;color:#D9765E;margin-bottom:.4rem;
padding:.55rem .8rem;border-left:2px solid #C4553D;background:rgba(196,85,61,.09);
}
.frm__send:disabled{cursor:default;transform:none}
/* ==========================================================================
Watch gallery — facade thumbnails, YouTube only loads on click
========================================================================== */
.watch{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
.vid{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-3);
border:1px solid var(--line-soft);cursor:pointer;transition:border-color .35s}
.vid:hover{border-color:rgba(219,99,28,.5)}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .4s;
filter:saturate(.9) brightness(.8)}
.vid:hover img{transform:scale(1.04);filter:saturate(1) brightness(.95)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vid__play span{
width:62px;height:62px;border-radius:50%;background:rgba(11,11,12,.6);backdrop-filter:blur(6px);
border:1px solid rgba(237,234,228,.3);display:grid;place-items:center;
transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.vid:hover .vid__play span{background:var(--brass);border-color:var(--brass);transform:scale(1.08)}
.vid__play span::after{content:"";border-style:solid;border-width:9px 0 9px 15px;
border-color:transparent transparent transparent var(--text);margin-left:4px}
.vid:hover .vid__play span::after{border-left-color:#fff}
.vid__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1.2rem .95rem;
background:linear-gradient(to top,rgba(11,11,12,.92),transparent);pointer-events:none}
.vid__cap b{display:block;font-family:var(--f-display);font-weight:800;font-size:1rem;
text-transform:uppercase;letter-spacing:-.01em}
.vid__cap span{display:block;font-size:.74rem;color:var(--muted);margin-top:.2rem}
.vid.is-live .vid__play,.vid.is-live .vid__cap{display:none}
@media (max-width:760px){.watch{grid-template-columns:1fr}}
/* ==========================================================================
Instagram strip
========================================================================== */
/* Same chapter-opening treatment as .sechead, so "From the field" carries the
same weight as the sections above it rather than trailing off. */
.igbar{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between;margin-bottom:1.6rem}
.igbar .eyebrow{display:flex;align-items:center;gap:.72rem;font-size:.76rem;letter-spacing:.2em;margin-bottom:.9rem}
.igbar .eyebrow::before{content:"";width:32px;height:2px;background:var(--brass);flex:none}
.ighandle{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.9rem);
text-transform:lowercase;letter-spacing:-.02em}
.ighandle span{color:var(--brass)}
@media (max-width:760px){.iggrid{grid-template-columns:repeat(2,1fr)}}
/* ==========================================================================
Social carousel — scroll-snap strip, drag or swipe
========================================================================== */
.socstrip{position:relative}
.soc{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
gap:clamp(8px,1.2vw,14px);overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;cursor:grab}
.soc::-webkit-scrollbar{display:none}
.soc.is-drag{cursor:grabbing;scroll-snap-type:none}
.soc > a{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink-3);
border:1px solid var(--line-soft);scroll-snap-align:start;display:block}
.soc img{width:100%;height:100%;object-fit:cover;pointer-events:none;
transition:transform .8s var(--ease),filter .4s;filter:saturate(.92) brightness(.86)}
.soc > a:hover img{transform:scale(1.06);filter:saturate(1) brightness(1)}
.soc > a::after{content:"";position:absolute;inset:0;border:0 solid var(--brass);transition:border-width .25s}
.soc > a:hover::after{border-width:2px}
.socnav{display:flex;gap:.5rem}
.socnav button{width:38px;height:38px;border:1px solid var(--line);border-radius:2px;
display:grid;place-items:center;color:var(--text);transition:all .25s}
.socnav button:hover{border-color:var(--brass);color:var(--brass)}
.socnav button:disabled{opacity:.3;cursor:default;border-color:var(--line)}
/* mobile: two rows scrolling sideways */
.soc{grid-template-rows:repeat(2,1fr)}
/* Six tiles is the house count, so the desktop grid is six wide -- five left
an orphan on a second row. Three-up in between keeps it two clean rows. */
@media (min-width:900px){.soc{grid-auto-columns:minmax(0,1fr);grid-auto-flow:row;
grid-template-columns:repeat(3,1fr);grid-template-rows:auto;overflow:visible;cursor:default}
.socnav{display:none}}
@media (min-width:1160px){.soc{grid-template-columns:repeat(6,1fr)}}
/* compact watch strip */
.watch--sm{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.watch--sm{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.watch--sm{grid-template-columns:1fr}}
.watch--sm .vid__cap{padding:1.1rem .9rem .75rem}
.watch--sm .vid__cap b{font-size:.86rem}
.watch--sm .vid__play span{width:48px;height:48px}
.watch--sm .vid__play span::after{border-width:7px 0 7px 12px}
/* Latest uploads carousel — Work page */
.ytrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);
gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;padding-bottom:2px;cursor:grab}
.ytrow::-webkit-scrollbar{display:none}
.ytrow.is-drag{cursor:grabbing;scroll-snap-type:none}
.ytrow .vid{scroll-snap-align:start}
.ytrow .vid__cap b{font-size:.85rem}
@media (min-width:1100px){.ytrow{grid-template-columns:repeat(5,1fr);grid-auto-flow:row;overflow:visible;cursor:default}}
.ytmeta{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:.9rem}
/* ==========================================================================
Sub-navigation — where am I in the tree?
The top nav names five destinations but says nothing about depth. Once a
visitor is three levels down (Home > Work > Maximum Foodie) they have no
trail and no way to reach a sibling without going back up. This bar sits
directly under the fixed header on every sub-page: the trail on the left,
the siblings on the right.
========================================================================== */
/* The site header is fixed, so it sits out of flow at the top of the page.
The sub-nav clears it with a matching margin, then sticks directly beneath
it on scroll. Pages that carry a sub-nav no longer need their first section
to reserve that space themselves -- the two rules below take it back. */
.subnav{margin-top:78px;position:sticky;top:78px;z-index:90;
background:rgba(11,11,12,.92);backdrop-filter:blur(18px) saturate(1.4);
border-bottom:1px solid var(--line)}
.subnav__in{display:flex;align-items:center;gap:1.4rem;justify-content:space-between;
max-width:1560px;margin-inline:auto;padding:.7rem var(--gut);
font-size:.76rem;letter-spacing:.06em}
.crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.crumb a,.crumb span{white-space:nowrap}
.crumb a{color:var(--muted);transition:color .25s}
.crumb a:hover{color:var(--brass)}
.crumb__sep{color:var(--muted-2);opacity:.6}
.crumb__here{color:var(--text);font-weight:600}
/* Siblings scroll sideways on a phone rather than wrapping into a stack. */
.subnav__sib{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav__sib::-webkit-scrollbar{display:none}
.subnav__sib a{white-space:nowrap;padding:.35rem .7rem;color:var(--muted);
border:1px solid transparent;transition:color .25s,border-color .25s,background .25s;
font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.subnav__sib a:hover{color:var(--text);border-color:var(--line)}
.subnav__sib a[aria-current="page"]{color:var(--brass);border-color:rgba(219,99,28,.4);
background:rgba(219,99,28,.08)}
@media (max-width:900px){
.subnav__in{padding-block:.55rem;gap:.8rem}
.subnav__sib{display:none}
}
/* ==========================================================================
Season guide — an expandable episode guide per season
========================================================================== */
.sgd{border-top:1px solid var(--line);margin-top:1.8rem}
.sgd__s{border-bottom:1px solid var(--line)}
.sgd__h{list-style:none;cursor:pointer;display:grid;
grid-template-columns:64px 116px minmax(170px,1fr) 2fr 34px;
gap:clamp(12px,2vw,26px);align-items:center;
padding:clamp(1rem,2vw,1.5rem) 0;transition:background .25s}
.sgd__h::-webkit-details-marker{display:none}
.sgd__s:hover .sgd__h{background:rgba(219,99,28,.05)}
.sgd__n{font-family:var(--f-display);font-weight:800;
font-size:clamp(1.4rem,2.4vw,2rem);line-height:1;color:var(--brass);letter-spacing:-.03em}
.sgd__t b{display:block;font-family:var(--f-display);font-weight:800;font-size:1rem;
text-transform:uppercase;letter-spacing:-.01em}
.sgd__m{display:block;font-size:.76rem;color:var(--muted);margin-top:.25rem;
font-variant-numeric:tabular-nums}
.sgd__d{font-size:.82rem;color:var(--muted);line-height:1.5}
.sgd__x{justify-self:end;width:22px;height:22px;position:relative;flex:none}
.sgd__x::before,.sgd__x::after{content:"";position:absolute;background:var(--brass);
transition:transform .3s var(--ease),opacity .3s}
.sgd__x::before{left:0;top:10px;width:22px;height:2px}
.sgd__x::after{left:10px;top:0;width:2px;height:22px}
.sgd__s[open] .sgd__x::after{transform:rotate(90deg);opacity:0}
.sgd__b{display:grid;grid-template-columns:minmax(0,360px) 1fr;
gap:clamp(18px,3vw,40px);padding-bottom:clamp(1.6rem,3vw,2.4rem)}
/* The dashed placeholder label is the fallback, not the default: once a real
season still is dropped in, the label and the dashed border stand down. */
.sgd__fig{aspect-ratio:16/9;margin:0;align-self:start;overflow:hidden;background:var(--ink-3);
position:sticky;top:calc(var(--hdr,64px) + 76px)}
.sgd__fig:has(img){border-style:solid;border-color:var(--line)}
.sgd__fig:has(img)::after{display:none}
.sgd__fig img{width:100%;height:100%;object-fit:cover;display:block}
/* Key art in the collapsed row. Small, but it means six seasons read as six
places at a glance instead of six identical text rows. */
.sgd__thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink-3);
border:1px solid var(--line);align-self:center}
.sgd__thumb img{width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.82) brightness(.86);transition:filter .3s var(--ease)}
.sgd__s:hover .sgd__thumb img,.sgd__s[open] .sgd__thumb img{filter:none}
.sgd__thumb--none{border-style:dashed}
/* Empty media slots — a reserved frame, not a broken one.
Named .mslot: .slot is already taken by the brass badge marker above. */
.mslot{aspect-ratio:16/9;flex-direction:column;gap:.7rem;border-color:rgba(219,99,28,.28)}
.mslot::after{content:attr(data-ph);color:var(--muted-2);font-size:.62rem;padding:0 1rem}
.mslot__i{width:34px;height:34px;border:2px solid rgba(219,99,28,.5);border-radius:50%;
position:relative;flex:none}
.mslot__i::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
border-left:11px solid rgba(219,99,28,.65);border-top:7px solid transparent;
border-bottom:7px solid transparent}
.mslot__i--img{border-radius:2px}
.mslot__i--img::after{border:0;width:16px;height:12px;top:auto;left:auto;
transform:none;inset:8px 7px auto 7px;
background:linear-gradient(135deg,rgba(219,99,28,.6) 40%,transparent 40%),
radial-gradient(circle at 78% 26%,rgba(219,99,28,.75) 2.2px,transparent 2.4px)}
.sgd__eps{list-style:none;margin:0;padding:0;
border-top:1px solid var(--line-soft)}
.sgd__ep{display:grid;grid-template-columns:74px 1fr auto;gap:clamp(10px,1.6vw,20px);
align-items:start;padding:.95rem 0;border-bottom:1px solid var(--line-soft)}
.sgd__ec{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--muted-2);
font-variant-numeric:tabular-nums;padding-top:.15rem}
.sgd__ep b{display:block;font-size:.94rem;font-weight:600;color:var(--text);line-height:1.35}
.sgd__ep p{font-size:.83rem;color:var(--muted);line-height:1.55;margin-top:.3rem}
@media (max-width:900px){
/* The season key art stays in the collapsed row on a phone too — hiding it
here was undoing the whole reason it went into the summary. */
.sgd__h{grid-template-columns:46px 84px 1fr 26px;gap:12px}
.sgd__n{font-size:1.3rem}
.sgd__t b{font-size:.92rem}
.sgd__m{font-size:.72rem}
.sgd__d{display:none}
.sgd__b{grid-template-columns:1fr}
.sgd__fig{position:static}
.sgd__ep{grid-template-columns:1fr;gap:.4rem}
.sgd__w{justify-self:start}
}
/* ==========================================================================
Season video gallery — one tile per season, plays inline
========================================================================== */
/* Three across: six seasons land as two clean rows rather than five-plus-an-
orphan. A single-season show gets one tile at a sane width instead of a
third of the page. */
.vgal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.5vw,18px)}
.vgal:has(> :only-child){grid-template-columns:minmax(0,620px)}
@media (max-width:980px){.vgal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.vgal{grid-template-columns:1fr}}
.vgal .vid__cap span{display:block;font-size:.72rem;color:var(--muted);margin-top:.2rem}
.subnav + main .reelwrap{padding-top:0}
.subnav + main .phero{padding-block:clamp(56px,9vh,110px) clamp(48px,7vw,86px)}
/* ==========================================================================
Playlist embed / pending card
========================================================================== */
.plwrap{position:relative;aspect-ratio:16/9;background:#000;
border:1px solid var(--line);overflow:hidden}
.plwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Shown until a playlist id is wired up: an honest link out, not a dead frame. */
.plcard{display:flex;align-items:center;gap:clamp(14px,2vw,24px);
background:var(--ink-2);border:1px solid var(--line);border-left:2px solid #FF0000;
padding:clamp(1.2rem,2.4vw,1.8rem);transition:background .3s,border-color .3s}
.plcard:hover{background:var(--ink-3);border-color:rgba(255,0,0,.45)}
.plcard b{display:block;font-family:var(--f-display);font-weight:800;
font-size:clamp(1rem,1.7vw,1.25rem);text-transform:uppercase;letter-spacing:-.01em}
.plcard span span{display:block;font-size:.82rem;color:var(--muted);margin-top:.3rem}
.plcard__arw{margin-left:auto;color:var(--brass);font-size:1.2rem;transition:transform .3s var(--ease)}
.plcard:hover .plcard__arw{transform:translateX(6px)}
/* ==========================================================================
Social bar — the studio's channels, as destinations rather than footnotes
========================================================================== */
.socbar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);margin-top:1.8rem}
.socbar a{background:var(--ink-2);padding:1.3rem 1.4rem;display:flex;
align-items:center;gap:.9rem;transition:background .3s}
.socbar a:hover{background:rgba(219,99,28,.1)}
.socbar__i{flex:none;width:26px;height:26px;display:grid;place-items:center;line-height:0}
.socbar__i svg{width:100%;height:auto;display:block}
.socbar b{display:block;font-family:var(--f-display);font-weight:800;font-size:.92rem;
text-transform:uppercase;letter-spacing:-.01em}
.socbar span span{display:block;font-size:.78rem;color:var(--muted);margin-top:.2rem}
.socbar__arw{margin-left:auto;color:var(--brass);transition:transform .3s var(--ease)}
.socbar a:hover .socbar__arw{transform:translateX(5px)}
@media (max-width:760px){.socbar{grid-template-columns:1fr}}
/* ==========================================================================
Reach table — the view counts are the argument, so they get the type
========================================================================== */
.rch{border-top:1px solid var(--line);margin-top:1.6rem}
.rch__row{display:grid;grid-template-columns:52px 1fr auto 30px;
gap:clamp(12px,2.4vw,30px);align-items:center;
padding:clamp(1rem,2.2vw,1.6rem) 0;border-bottom:1px solid var(--line);
transition:background .25s}
a.rch__row:hover{background:rgba(219,99,28,.06)}
.rch__n{font-size:.76rem;font-weight:700;letter-spacing:.1em;color:var(--muted-2);
font-variant-numeric:tabular-nums}
.rch__t b{display:block;font-family:var(--f-display);font-weight:800;
font-size:clamp(1rem,1.8vw,1.35rem);text-transform:uppercase;letter-spacing:-.015em;
line-height:1.15}
.rch__t span{display:block;font-size:.8rem;color:var(--muted);margin-top:.25rem}
.rch__v{font-family:var(--f-display);font-weight:800;
font-size:clamp(1.7rem,4vw,3.2rem);line-height:.95;color:var(--brass);
letter-spacing:-.04em;text-align:right;font-variant-numeric:tabular-nums}
.rch__v span{display:block;font-family:var(--f-body);font-weight:600;font-size:.62rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
margin-top:.35rem;letter-spacing:.18em}
.rch__arw{justify-self:end;color:var(--brass);transition:transform .3s var(--ease)}
a.rch__row:hover .rch__arw{transform:translateX(5px)}
@media (max-width:640px){
.rch__row{grid-template-columns:38px 1fr auto;gap:12px}
.rch__arw{display:none}
}
/* ==========================================================================
Reach band — the headline number as a doorway
========================================================================== */
.reachband{display:grid;grid-template-columns:auto 1fr auto;
gap:clamp(18px,3vw,44px);align-items:center;
background:var(--ink-2);border:1px solid var(--line);border-left:2px solid var(--brass);
padding:clamp(1.4rem,3vw,2.4rem);transition:background .3s,border-color .3s}
.reachband:hover{background:var(--ink-3);border-color:rgba(219,99,28,.5)}
.reachband__v{font-family:var(--f-display);font-weight:800;
font-size:clamp(3rem,8vw,6rem);line-height:.85;color:var(--brass);letter-spacing:-.05em}
.reachband__t b{display:block;font-family:var(--f-display);font-weight:800;
font-size:clamp(1.05rem,2vw,1.6rem);text-transform:uppercase;letter-spacing:-.02em;
line-height:1.1}
.reachband__t span{display:block;font-size:.9rem;color:var(--muted);line-height:1.6;
margin-top:.6rem;max-width:60ch}
.reachband__arw{color:var(--brass);font-size:1.3rem;transition:transform .3s var(--ease)}
.reachband:hover .reachband__arw{transform:translateX(7px)}
@media (max-width:760px){
.reachband{grid-template-columns:1fr;gap:.8rem}
.reachband__arw{display:none}
}
/* ==========================================================================
Skip link — keyboard users should not have to tab the whole nav on every
page. Off-screen until focused, then it lands under the fixed header.
========================================================================== */
.skip{position:absolute;left:-9999px;top:0;z-index:200;
background:var(--brass);color:#0B0B0C;font-weight:700;font-size:.85rem;
letter-spacing:.06em;padding:.7rem 1.1rem}
.skip:focus{left:12px;top:12px}
/* ---------- Reach clip gallery ----------
The audience page asserts view counts; these cards are the evidence. The
count sits on the card itself so the claim and the clip cannot be read
apart. Facades only — the iframe is built on click by bindVideos(). */
.rclips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px)}
.rclip{margin:0}
.rclip .vid{border:1px solid var(--line)}
.rclip__v{position:absolute;left:0;bottom:0;z-index:2;background:var(--brass);color:#0B0B0C;
font-family:var(--f-display);font-weight:800;font-size:.74rem;letter-spacing:.06em;
text-transform:uppercase;padding:.4rem .7rem;pointer-events:none}
.rclip .vid.is-live .rclip__v,
.rclip .vid.is-live .vid__play{display:none}
.rclip figcaption{padding:.85rem .1rem 0;display:grid;gap:.3rem}
.rclip figcaption b{font-size:.98rem;line-height:1.3;color:var(--text)}
.rclip figcaption span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
@media (max-width:900px){.rclips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rclips{grid-template-columns:1fr}}
/* ---------- Footage library segment ----------
Rebuilt as a full-width band with its own rule and a tile wall. The
previous version was a quiet two-column block sitting directly above the
contact CTA, so it read as part of the CTA rather than a separate line of
business. A library is best shown as many frames, not one hero: eight
tiles across the categories the Services page claims does the arguing. */
.fband{background:var(--paper);color:var(--ink);
padding-block:clamp(3.4rem,7vw,5.6rem);
border-top:3px solid var(--brass);border-bottom:1px solid rgba(0,0,0,.12)}
.fband__in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.4rem);align-items:center}
.fband .eyebrow{color:#7A5E23}
.fband h2{color:var(--ink);margin:.55rem 0 .8rem}
.fband p{color:#4A463F;max-width:52ch;font-size:1.02rem}
.fband__r{display:grid;gap:1.5rem}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.fgrid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
filter:saturate(.92);transition:filter .35s,transform .35s var(--ease)}
.fgrid a{display:block;overflow:hidden;background:#1A1815}
.fgrid a:hover img{filter:saturate(1.05);transform:scale(1.06)}
.fnums{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
border:1px solid rgba(0,0,0,.16)}
.fnums div{padding:.8rem 1.15rem;border-right:1px solid rgba(0,0,0,.16)}
.fnums div:last-child{border-right:0}
.fnums b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.55rem;
letter-spacing:-.03em;color:var(--ink);line-height:1}
.fnums span{display:block;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
color:#6B665C;margin-top:.35rem}
.fband .btn--ink{background:var(--ink);color:var(--paper);border:0}
.fband .btn--ink:hover{background:#000;transform:translateY(-2px)}
.fband__foot{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
margin-top:1.5rem;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:#6B665C}
@media (max-width:900px){.fband__in{grid-template-columns:1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:repeat(2,1fr)}}
/* ---------- Field diary ----------
Each destination is a band with its own head, badge and rule, so six
shoots read as six shoots. Frames are buttons, not links: they open the
lightbox rather than navigating away from the diary. */
.fd{padding-block:clamp(2.4rem,5vw,4rem);border-top:1px solid var(--line)}
.fd:first-of-type{border-top:0}
.fd__head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;
justify-content:space-between;margin-bottom:clamp(1.2rem,2.4vw,1.9rem)}
.fd__head h2{margin:.4rem 0 0}
.fd__note{color:var(--muted);max-width:60ch;margin-top:.7rem;font-size:.97rem}
.fd__meta{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;text-align:right}
.fd__badge{font-family:var(--f-display);font-weight:800;font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;padding:.34rem .7rem;border:1px solid;white-space:nowrap}
.fd--done{color:#0B0B0C;background:var(--brass);border-color:var(--brass)}
.fd--live{color:var(--brass);border-color:rgba(219,99,28,.5);background:rgba(219,99,28,.08)}
.fd--soon{color:var(--muted-2);border-color:var(--line)}
.fd__dates{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2)}
.fd__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.fd__f{position:relative;padding:0;border:1px solid var(--line);background:var(--ink-2);
cursor:zoom-in;overflow:hidden;display:block;width:100%}
.fd__f img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
transition:transform .6s var(--ease),filter .35s;filter:saturate(.95)}
.fd__f:hover img{transform:scale(1.05);filter:saturate(1.05)}
.fd__f:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.fd__bts{position:absolute;left:0;bottom:0;background:rgba(11,11,12,.86);color:var(--brass);
font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
padding:.32rem .6rem;pointer-events:none}
.fd__empty{color:var(--muted-2);font-size:.95rem;border-left:2px solid var(--line);
padding-left:1rem;display:grid;gap:.3rem}
.fd__empty span{font-size:.85rem}
.fd__empty a{color:var(--brass)}
@media (max-width:1100px){.fd__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- Stock footage wall ----------
Full page width, its own brass rule, sitting between the last service block
and the process section. Two rows of three at 16:9 — the frames are the
argument for the library, so they get the room to make it. */
.libwall{padding-block:clamp(2.4rem,4.5vw,3.8rem);
border-top:2px solid var(--brass);border-bottom:1px solid var(--line)}
.libwall__head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:end;
justify-content:space-between;margin-bottom:clamp(1.2rem,2.4vw,1.8rem)}
.libwall__head h3{font-family:var(--f-display);font-weight:800;
font-size:clamp(1.3rem,2.6vw,2rem);text-transform:uppercase;letter-spacing:-.02em;
line-height:1.05;margin-top:.5rem}
.libwall__grid{grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(8px,1.1vw,14px)}
.libwall__grid .fd__f{aspect-ratio:16/9}
.libwall__grid .fd__f img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.libwall__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.libwall__grid{grid-template-columns:1fr}}
@media (max-width:640px){.fd__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fd__head{align-items:flex-start}.fd__meta{align-items:flex-start;text-align:left}}
/* Section bar: dim the destinations that have nothing to show yet. */
.prtl__bar a.is-empty{opacity:.45}
/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:300;background:rgba(6,6,7,.96);
display:grid;place-items:center;padding:clamp(12px,4vw,54px)}
/* display:grid beats the browser's own [hidden] rule, which left the closed
lightbox invisibly covering the page and swallowing every click on it. */
.lb[hidden]{display:none}
.lb__fig{margin:0;display:grid;gap:.9rem;justify-items:center;max-width:min(1500px,94vw)}
.lb__fig img{max-width:100%;max-height:78vh;object-fit:contain;display:block}
.lb__fig figcaption{display:flex;gap:1.2rem;align-items:baseline;flex-wrap:wrap;
justify-content:center;color:#C4C0B8;font-size:.9rem}
.lb__n{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.lb__x,.lb__nav{position:absolute;background:none;border:0;color:#E8E4DC;cursor:pointer;
line-height:1;padding:.4rem .8rem;transition:color .25s,transform .25s}
.lb__x{top:clamp(8px,2vw,22px);right:clamp(8px,2vw,26px);font-size:2.3rem}
.lb__nav{top:50%;transform:translateY(-50%);font-size:3.2rem}
.lb__prev{left:clamp(2px,1vw,18px)}
.lb__next{right:clamp(2px,1vw,18px)}
.lb__x:hover,.lb__nav:hover{color:var(--brass)}
.lb__nav:hover{transform:translateY(-50%) scale(1.12)}
@media (max-width:640px){.lb__nav{font-size:2.2rem}.lb__fig img{max-height:66vh}}
/* Which production a shoot belongs to, its season, and the genre — the diary
mixes two shows and the page previously implied everything was Max Foodie. */
.fd__show{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-top:.6rem}
.fd__show a{font-family:var(--f-display);font-weight:800;font-size:.9rem;letter-spacing:.01em;
color:var(--brass);border-bottom:1px solid rgba(219,99,28,.35);padding-bottom:1px}
.fd__show a:hover{color:var(--brass-hi);border-color:var(--brass-hi)}
.fd__season,.fd__genre{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.fd__season{border-left:1px solid var(--line);padding-left:.8rem}
.fd__genre{border-left:1px solid var(--line);padding-left:.8rem}
/* Title-card logline. The cards were stating format and episode counts and
nothing about what the show IS — the 48 Hours card on /work already did
this properly, so the strip now matches it. */
.ts__log{display:block;font-size:.82rem;line-height:1.4;color:#C4C0B8;margin:.45rem 0 .55rem;
max-width:34ch}
/* The spec line was the quietest thing on a card that exists to sell a show.
Lifted out of the footnote tier: bigger, brighter, letterspaced. */
.titlestrip .ts__txt > span:not(.ts__tag):not(.ts__log){font-size:.78rem;letter-spacing:.04em;color:#A8A49C}
.titlestrip .ts__fmt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--brass);font-weight:700}
/* The broadcaster badge over a playing card was too small to read at a glance. */
.wcard__tag{font-size:.78rem;padding:.5rem .9rem;letter-spacing:.1em;font-weight:800}
/* Slate loglines — one line that says what the show is, before the paragraph
that says how much of it there is. */
.titlecard__log{font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.35;
color:var(--text);margin:.5rem 0 .8rem;max-width:44ch}
/* ---------- Section box ----------
Same treatment as the licensee wall: 1px brass edge on the wrap-wide
measure, with a tab clipped to the top-left. Used to fence off the
commissioned work so it reads as a distinct body of work rather than
running into the Originals above it. */
/* The box lands on a fractional pixel at some viewport widths, which lets
anti-aliasing split the right border across two columns and wash it out
to grey on standard-DPI screens. The inset shadow paints on a whole
pixel inside the border, so the line is solid whatever the subpixel
position, without changing the 1px weight. */
.secbox{position:relative;border:2px solid var(--brass);
padding:clamp(1.6rem,3.2vw,2.6rem) clamp(1.1rem,2.4vw,2rem) clamp(1.4rem,2.8vw,2.2rem);
margin-top:2.4rem}
.secbox__tab{position:absolute;top:0;left:clamp(1.1rem,2.4vw,2rem);transform:translateY(-50%);
z-index:2;display:inline-flex;align-items:center;gap:.6rem;
background:var(--brass);color:#12100E;padding:.5rem .95rem;
font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.secbox__tab::before{content:"";width:6px;height:6px;background:#12100E;flex:none;transform:rotate(45deg)}
.secbox > .sechead{margin-top:.2rem}
@media (max-width:820px){
.secbox{margin-top:1.9rem;padding-left:1rem;padding-right:1rem}
.secbox__tab{left:0;right:0;justify-content:center;font-size:.66rem}
}
/* ---------- Mobile type floor ----------
A few label styles bottom out around 10px, which reads on a desktop and
does not on a phone held at arm's length. Nudge only the smallest. */
@media (max-width:640px){
.csmeta dt,.facts__row dt,.tcspecs dt{font-size:.72rem}
.sgd__ec{font-size:.74rem}
.fd__season,.fd__genre,.fd__badge{font-size:.72rem}
.scr{font-size:.72rem}
.ph::after,.mslot::after{font-size:.66rem}
.ftr__h,.stat__l,.route__no,.off,.on{font-size:.74rem}
.ts__tag,.titlecard__gen,.prod__meta,.wcard__tag{font-size:.74rem}
.fd__bts,.secbox__tab,.rclip figcaption span{font-size:.7rem}
.specs dt{font-size:.72rem}
.titlestrip .ts__tag{font-size:.74rem}
.rch__v span{font-size:.72rem}
.fld label{font-size:.76rem}
.prod__badge i{font-size:.74rem}
.fnums span{font-size:.72rem}
@media (max-width:380px){.fd__grid{grid-template-columns:1fr}}
/* Standalone links need a thumb-sized hit area. These are all discrete
controls — footer nav, section links, the field-diary jump bar — not
links sitting inside a sentence, so growing them costs nothing. */
.ftr__list a,.ftr__legal a,.ftr__soc a{display:inline-block;padding-block:.5rem}
.crumb a{display:inline-block;padding-block:.4rem}
.fd__show a{display:inline-block;padding-block:.35rem}
.ftr__soc{flex-wrap:wrap}
.sechead__link,.titlecard__more,.btn.eml,a.eml{display:inline-block;padding-block:.5rem}
.prtl__bar a{padding-block:.6rem}
}