/* liminal — the work, the pillars, and the pages beyond the home page.

   Reference lock (Refero, 2026-09-18):
   - Primary: Caserne. Work is shown as large, sharp-edged, full-bleed media;
     the words sit beneath it, one bright line and one muted line. The accent is
     a marker, never a surface.
   - Borrowed from Studio HEED: one text-led card inside an image grid. NOX's
     card is a number set in type rather than a screenshot (POSITIONING §10).
   - Ours, unchanged: the teal-black field, acid yellow for actions and markers
     only, Inter 500 with tight tracking for anything large. */

/* ------------------------------------------------------------ the work index */
.work{position:relative; padding:120px var(--pad) 130px; background:#000a10}
.work-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; margin:0 0 64px;
}
.work-head h2,.pillars h2,.page-hero h1,.case-hero h1{
  margin:0; font-weight:500; color:#f2fbf8; text-wrap:balance;
}
.work-head h2{font-size:clamp(56px,5.65vw,106px); line-height:1.03; letter-spacing:-.06em}
.work-head>p{max-width:330px; color:#a9c0bc; font-size:15px; line-height:1.6; margin:0 0 9px}

.work-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px 28px}
.work-card{display:block; color:inherit}
.work-card.wide{grid-column:1 / -1}

.card-media{
  position:relative; overflow:hidden; background:#00171e;
  aspect-ratio:16 / 9;
}
.work-card.wide .card-media{aspect-ratio:21 / 9}
.card-media>video,.card-media>img:not(.card-logo):not(.brand):not(.phone){
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .card-media>video,
.work-card:hover .card-media>img:not(.card-logo):not(.brand):not(.phone){transform:scale(1.025)}

/* Evelyn Heights: one campaign, three materials, side by side */
.card-media.triptych{
  display:grid; grid-template-columns:26% 1fr; gap:10px; padding:10px;
  background:#061a1f;
}
.triptych>*:not(.card-logo):not(.live-pill){position:relative; overflow:hidden; background:#000}
.triptych video,.triptych img:not(.card-logo):not(.live-pill){position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.triptych .print img{object-position:left center}

/* NOX: the number is the picture */
.card-media.type{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:34px 36px; background:#012a30;
}
.type .figure{
  font-size:clamp(64px,7.2vw,138px); font-weight:500; letter-spacing:-.065em;
  line-height:.9; color:#f2fbf8;
}
.type .figure-label{font-size:15px; color:#b4d0cb; max-width:300px; line-height:1.5}
.type .grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(90deg,#d0eee70d 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,#d0eee70d 0 1px,transparent 1px 64px);
}
.type .tagline{
  position:relative; font-size:10px; letter-spacing:.2em; color:#9fc0bb;
  display:flex; align-items:center; gap:12px;
}
.type .tagline:before{content:''; width:6px; height:6px; background:var(--acid); border-radius:50%}

.card-body{padding-top:24px}
.tags{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 16px; padding:0;
  list-style:none; font-size:10px; letter-spacing:.18em; color:#8fa9a5;
}
.tags li+li:before{content:'·'; margin-right:16px; color:#4a6b68}
.card-line{
  margin:0; font-size:clamp(22px,1.9vw,32px); line-height:1.22;
  letter-spacing:-.035em; font-weight:500; color:#f2fbf8; max-width:30ch;
  text-wrap:balance;
}
.work-card.wide .card-line{max-width:34ch}
.card-meta{
  display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  margin-top:14px; font-size:13px; color:#8fa9a5;
}
.card-meta .go{color:var(--light); white-space:nowrap}
.work-card:hover .card-meta .go{color:var(--acid)}
.card-meta .go:after{content:' →'}

/* ---------------------------------------------------------------- pillars */
.pillars{padding:120px var(--pad) 110px; background:var(--void); border-top:1px solid var(--line)}
.pillars h2{font-size:clamp(50px,4.9vw,92px); line-height:1.04; letter-spacing:-.058em; max-width:14ch}
.pillar-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:70px; border-top:1px solid var(--line);
}
.pillar{padding:34px 34px 10px 0}
.pillar+.pillar{padding-left:34px; border-left:1px solid var(--line)}
.pillar h3{
  margin:0 0 20px; font-size:clamp(28px,2.4vw,40px); font-weight:500;
  letter-spacing:-.045em; color:#f2fbf8;
}
.pillar p{margin:0 0 14px; font-size:16px; line-height:1.6; color:#b4c8c4; max-width:38ch}
.pillar .kit{font-size:12px; letter-spacing:.02em; color:#7f9895; line-height:1.7}

.line-we-hold{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end;
  margin-top:110px; padding-top:44px; border-top:1px solid var(--line);
}
.line-we-hold h3{
  margin:0; font-size:clamp(46px,4.6vw,86px); font-weight:500;
  letter-spacing:-.058em; line-height:1.02; color:#f2fbf8;
}
.line-we-hold p{margin:0; font-size:17px; line-height:1.65; color:#b4c8c4; max-width:46ch}

/* ------------------------------------------------------------ inner pages */
.page{background:var(--void)}
/* style.css pins the header inside the hero; on inner pages it is ordinary flow */
header.page-header{position:relative; left:auto; right:auto; top:auto}
.page-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:30px var(--pad); position:relative; z-index:5;
}
.page-header nav a[aria-current=page]{color:var(--light)}
.page-header .pill{padding:13px 22px}

.case-hero{padding:90px var(--pad) 60px}
.case-hero h1{
  font-size:clamp(52px,5.6vw,108px); line-height:1.02; letter-spacing:-.06em;
  max-width:17ch; margin-top:6px;
}
.case-meta{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px;
  margin-top:70px; padding-top:26px; border-top:1px solid var(--line);
}
.case-meta dt{font-size:10px; letter-spacing:.2em; color:#7f9895; margin-bottom:10px}
.case-meta dd{margin:0; font-size:15px; line-height:1.5; color:#d0eee7}
.case-meta a{border-bottom:1px solid #d0eee740}
.case-meta a:hover{color:var(--acid); border-color:var(--acid)}

.bleed{position:relative; background:#00171e}
.bleed video,.bleed img{display:block; width:100%; height:auto}
.bleed.cinema{aspect-ratio:21 / 9; overflow:hidden}
.bleed.cinema video,.bleed.cinema img{height:100%; object-fit:cover}

.case-section{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:60px; align-items:start;
  padding:110px var(--pad) 0;
}
.case-section .chapter{margin-top:10px}
.case-section h2{
  margin:0 0 30px; font-size:clamp(34px,3.2vw,58px); font-weight:500;
  letter-spacing:-.05em; line-height:1.08; color:#f2fbf8; text-wrap:balance;
}
.case-section p{margin:0 0 20px; font-size:18px; line-height:1.7; color:#b4c8c4; max-width:62ch}
.case-section p strong{color:#f2fbf8; font-weight:500}

.feature-list{list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--line)}
.feature-list li{
  display:grid; grid-template-columns:52px 1fr; gap:10px;
  padding:24px 0; border-bottom:1px solid var(--line);
}
.feature-list .n{font-size:11px; letter-spacing:.14em; color:var(--acid); padding-top:6px}
.feature-list strong{display:block; font-size:20px; font-weight:500; letter-spacing:-.025em; color:#f2fbf8; margin-bottom:6px}
.feature-list span{font-size:16px; line-height:1.6; color:#a9c0bc}

.shots{padding:90px var(--pad) 0; display:grid; gap:28px}
.shot{margin:0}
.shot .frame-ui{
  background:#05080c; border:1px solid #d0eee71f; padding:0; overflow:hidden;
}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{
  display:flex; gap:14px; padding-top:14px; font-size:13px; line-height:1.55; color:#8fa9a5;
}
.shot figcaption b{font-weight:400; color:#d0eee7; white-space:nowrap}
.shot-pair{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.shot-pair.site-pair{grid-template-columns:2.6fr 1fr; align-items:end}
.shot-trio{display:grid; grid-template-columns:2.2fr 1fr 1fr; gap:28px; align-items:end}

.room{padding:110px var(--pad) 0}
.room-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:40px}
.room-grid img{display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover; object-position:center 20%; filter:saturate(.85)}
.room p{font-size:16px; color:#a9c0bc; max-width:60ch; line-height:1.65; margin:24px 0 0}

.numbers{
  display:grid; grid-template-columns:repeat(4,1fr); margin:110px var(--pad) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.numbers div{padding:40px 24px 40px 0}
.numbers div+div{padding-left:24px; border-left:1px solid var(--line)}
.numbers b{
  display:block; font-size:clamp(46px,4.4vw,80px); font-weight:500;
  letter-spacing:-.06em; line-height:1; color:#f2fbf8; margin-bottom:16px;
}
.numbers span{font-size:14px; line-height:1.55; color:#a9c0bc; display:block; max-width:26ch}

.honest{padding:28px var(--pad) 0; font-size:12px; color:#6d8b88; line-height:1.6}

.next{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  margin:130px var(--pad) 0; padding:44px 0 70px; border-top:1px solid var(--line);
}
.next small{display:block; font-size:10px; letter-spacing:.2em; color:#7f9895; margin-bottom:18px}
.next strong{
  display:block; font-size:clamp(34px,3.6vw,64px); font-weight:500;
  letter-spacing:-.055em; line-height:1.05; color:#f2fbf8; max-width:22ch;
}
.next:hover strong{color:var(--acid)}

/* Evelyn Heights: vertical film with its poster beside it */
.film-pair{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px;
  align-items:start;
}
/* a number-led banner spanning the page: its words keep the page margin */
.bleed .card-media.type{padding:40px var(--pad) 48px}
.film-pair video,.film-pair img{display:block; width:100%; height:auto; background:#000}

/* the practice and contact pages */
.page-hero{padding:90px var(--pad) 40px}
.page-hero h1{font-size:clamp(60px,6.6vw,124px); line-height:1; letter-spacing:-.065em; max-width:14ch}
.page-hero .deck{max-width:40ch; margin:34px 0 0}

.people{display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:60px var(--pad) 0}
.person{border-top:1px solid var(--line); padding-top:30px}
.person .portrait{display:block; width:min(340px,72%); height:auto; aspect-ratio:4 / 5; object-fit:cover; margin:0 0 34px; background:#02141a}
.person h2{margin:0 0 6px; font-size:clamp(34px,3.2vw,56px); font-weight:500; letter-spacing:-.05em; color:#f2fbf8}
.person .role{font-size:11px; letter-spacing:.2em; color:#7f9895; margin:0 0 28px}
.person p{font-size:17px; line-height:1.7; color:#b4c8c4; margin:0 0 18px; max-width:52ch}
.person .pull{font-size:clamp(22px,1.8vw,30px); line-height:1.3; letter-spacing:-.03em; color:#f2fbf8; margin-bottom:26px}

.form{display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; padding:30px var(--pad) 0; max-width:1100px}
.form label{display:block; font-size:10px; letter-spacing:.2em; color:#8fa9a5; margin-bottom:10px}
.form input,.form select,.form textarea{
  width:100%; background:#02141a; border:1px solid #d0eee72b; color:var(--light);
  font:inherit; font-size:16px; padding:16px 18px; border-radius:0;
}
.form select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,#8fa9a5 50%),linear-gradient(135deg,#8fa9a5 50%,transparent 50%); background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat}
.form textarea{min-height:170px; resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--acid); outline-offset:2px; border-color:transparent}
.form .full{grid-column:1 / -1}
.form .cta{border:0; cursor:pointer; justify-self:start}
.form-note{font-size:13px; color:#7f9895; line-height:1.6; margin:0}
.form-status{font-size:15px; color:var(--light); min-height:1.6em}

:focus-visible{outline:2px solid var(--acid); outline-offset:4px}


/* ------------------------------------------------------------- product marks
   Clients' own logos, used as they drew them: never recoloured, never boxed.
   The tight version (mark + name) is for small placements; the full lockup,
   tagline included, only where it has room to be read. */
.case-logo{display:block; width:auto; height:88px; margin:0 0 46px}
.case-logo.nox{height:120px}
.case-logo.dhp{height:104px}
.card-logo{position:absolute; z-index:2; width:auto; pointer-events:none}
.card-media .card-logo.armr{left:30px; bottom:26px; height:58px}
.card-media:has(.card-logo.armr):after{
  content:''; position:absolute; inset:auto 0 0 0; height:45%; z-index:1; pointer-events:none;
  background:linear-gradient(to top,#000a10cc,transparent);
}
.type .card-logo.nox{top:28px; right:30px; height:92px}
.card-media.triptych.dhp{grid-template-columns:22% 1fr; aspect-ratio:21 / 10}
.triptych.dhp>div:nth-child(2) img{object-position:center center}
.card-media .card-logo.dhp{right:26px; bottom:22px; height:64px; filter:drop-shadow(0 2px 12px #000a)}
.type .brand{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  width:clamp(170px,21vw,330px); height:auto;
}
.brand-plate{
  margin:110px var(--pad) 0; padding:120px 24px 110px;
  display:grid; justify-items:center; gap:46px;
  background:radial-gradient(ellipse at 50% 40%,#0d0f18 0%,#05070b 70%);
  border:1px solid #d0eee714;
}
.brand-plate img{width:min(460px,72%); height:auto}
.brand-plate p{margin:0; font-size:14px; color:#8fa9a5; text-align:center; max-width:52ch; line-height:1.6}


/* NOX: the staff */
.staff-title{margin:0 0 36px; font-size:clamp(34px,3.2vw,58px); font-weight:500; letter-spacing:-.05em; line-height:1.08; color:#f2fbf8; max-width:20ch}
.staff-grid{display:grid; grid-template-columns:repeat(9,1fr); gap:10px}
.staff-grid figure{margin:0}
.staff-grid img{display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover}
.staff-grid figcaption{padding-top:12px; font-size:11px; line-height:1.45; color:#8fa9a5}
.staff-grid figcaption b{display:block; font-weight:500; font-size:13px; color:#d0eee7}


/* Sites: smaller builds, shown lighter than the case studies */
.sites{margin-top:96px; padding-top:40px; border-top:1px solid var(--line)}
.sites-head{display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:34px}
.sites-head .chapter{margin:0}
.sites-head>p:last-child{margin:0; font-size:15px; color:#a9c0bc}
.sites-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.site-card{display:block; color:inherit}
.site-media{position:relative; aspect-ratio:16 / 11; overflow:hidden; background:#02141a}
.site-media .desk{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center}
.site-media .phone{
  position:absolute; right:14px; bottom:-18%; width:24%; height:auto;
  border:3px solid #0b1216; border-radius:14px; box-shadow:0 12px 32px #0009;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.site-card:hover .phone{transform:translateY(-8%)}
.site-line{margin:20px 0 0; font-size:17px; line-height:1.45; letter-spacing:-.015em; color:#e6f4f0; font-weight:500; max-width:40ch}
.card-meta .go.ext:after{content:' ↗'}


/* GHRL: their logo is drawn for light grounds, so it sits on their own cream */
.logo-plate{display:inline-block; background:#f5f2ea; padding:18px 24px; margin:0 0 46px}
.logo-plate img{display:block; height:62px; width:auto}
.brand-plate.light{background:#f5f2ea; border-color:transparent}
.brand-plate.light p{color:#4b5a66}
.card-media.ghrl .desk{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left}
.card-media.ghrl .phone{
  position:absolute; right:18px; bottom:-16%; width:22%; height:auto; z-index:2;
  border:3px solid #0b1216; border-radius:14px; box-shadow:0 12px 32px #0009;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .card-media.ghrl .phone{transform:translateY(-8%)}

/* the footer: who we are and how to reach us, on every page */
.bottom.site-footer{display:block; padding:64px 0 34px; margin-top:40px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1.2fr 1fr .9fr; gap:40px}
.foot-brand .wordmark{font-size:30px}
.foot-brand p{margin:18px 0 0; font-size:14px; line-height:1.6; color:#8fa9a5; max-width:32ch}
.foot-label{margin:6px 0 14px; font-size:10px; letter-spacing:.2em; color:#6d8b88}
.foot-grid p,.foot-grid address{margin:0; font-size:14px; line-height:1.9; color:#b4c8c4; font-style:normal}
.foot-grid a:hover,.foot-base a:hover{color:var(--acid)}
.foot-base{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:56px; padding-top:22px; border-top:1px solid var(--line); font-size:12px; color:#6d8b88}
.foot-base .legal{font-size:12px}
.foot-base .legal a{margin-left:14px; color:#8fa9a5; border-bottom:1px solid #8fa9a540}

/* the privacy policy: plain reading, visible links */
.policy .case-section{padding-top:70px}
.policy .case-section a{color:var(--light); border-bottom:1px solid #d0eee766}
.policy .case-section a:hover{color:var(--acid); border-color:var(--acid)}
.policy .page-hero h1{max-width:16ch}

/* --------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .work{padding:80px var(--pad) 90px}
  .work-head{display:block}
  .work-head h2{font-size:58px}
  .work-head>p{margin-top:24px; max-width:none}
  .work-grid{grid-template-columns:1fr; gap:56px}
  .work-card.wide .card-media{aspect-ratio:16 / 9}
  .pillars{padding:80px var(--pad)}
  .pillar-grid{grid-template-columns:1fr}
  .pillar,.pillar+.pillar{padding:30px 0 16px; border-left:0; border-top:1px solid var(--line)}
  .pillar:first-child{border-top:0}
  .line-we-hold{grid-template-columns:1fr; gap:26px; margin-top:70px}
  .case-meta{grid-template-columns:1fr 1fr}
  .case-section{grid-template-columns:1fr; gap:10px; padding-top:80px}
  .shot-pair,.shot-pair.site-pair,.people,.film-pair{grid-template-columns:1fr}
  .shot-trio{grid-template-columns:1fr 1fr}
  .shot-trio>:first-child{grid-column:1 / -1}
  .room-grid{grid-template-columns:repeat(3,1fr)}
  .staff-grid{grid-template-columns:repeat(3,1fr); gap:18px 10px}
  .sites-grid{grid-template-columns:1fr; gap:48px}
  .sites-head{display:block}
  .sites-head>p:last-child{margin-top:14px}
  .bleed.cinema{aspect-ratio:16 / 10}
  .bleed .card-media.type{aspect-ratio:auto!important; min-height:340px}
  .type .brand{position:relative; right:auto; top:auto; transform:none; width:150px; margin-top:26px}
  .case-logo{height:68px; margin-bottom:34px}
  .case-logo.nox{height:96px}
  .case-logo.dhp{height:80px}
  .logo-plate img{height:44px}
  .logo-plate{padding:12px 16px}
  .card-media.triptych.dhp{aspect-ratio:16 / 9; grid-template-columns:30% 1fr}
  .triptych.dhp>div:nth-child(2) img{object-position:0% 45%}
  .numbers{grid-template-columns:1fr 1fr}
  .numbers div:nth-child(3){padding-left:0; border-left:0}
  .numbers div:nth-child(n+3){border-top:1px solid var(--line)}
  .page-header nav{gap:22px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:34px 24px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:600px){
  .work-head h2{font-size:44px}
  .card-media.triptych{grid-template-columns:34% 1fr}
  .type .figure{font-size:64px}
  .type .card-logo.nox{height:64px; top:20px; right:20px}
  .card-media .card-logo.armr{height:40px; left:18px; bottom:16px}
  .card-media .card-logo.dhp{display:none}
  .card-media.type{padding:24px}
  .case-hero,.page-hero{padding-top:50px}
  .case-meta{grid-template-columns:1fr}
  .case-section p{font-size:16px}
  .form{grid-template-columns:1fr}
  .next{display:block}
  .next .cta{display:inline-flex; margin-top:32px}
  .person h2{margin-bottom:12px}
  .foot-base{flex-direction:column; gap:14px}
  .foot-base .legal a{display:table; margin:10px 0 0}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .card-media>video,.card-media>img:not(.card-logo):not(.brand):not(.phone){transition:none}
}

/* a pillar's link to a live demo (home, Systems) */
.pillar-link{display:inline-block; margin-top:14px; font-size:14px; color:var(--light); border-bottom:1px solid #d0eee740; padding-bottom:2px}
.pillar-link:after{content:' →'}
.pillar-link:hover{color:var(--acid); border-color:var(--acid)}

/* Pellbrook (studio piece): triptych card and the staff row on its case page */
.card-media.triptych.pellbrook{grid-template-columns:1.25fr 1fr; background:#1f2b3a}
.triptych.pellbrook img.top{object-position:top center}
.staff-grid.pellbrook-staff{grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; max-width:900px}
@media (max-width:600px){
  .staff-grid.pellbrook-staff{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* on a phone the two-panel card squeezes the sign; show the sign alone */
  .card-media.triptych.pellbrook{grid-template-columns:1fr}
  .card-media.triptych.pellbrook>div:last-of-type{display:none}
}

/* AI Staff: the live card in the work grid */
.card-media.aistaff{background:#1f2b3a}
/* the phone gets a 2x2 crop, so the image sits inside <picture> and needs its own fill rules */
.card-media.aistaff picture{position:absolute; inset:0; display:block}
.card-media.aistaff picture img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .card-media.aistaff picture img{transform:scale(1.025)}
.live-pill{
  position:absolute; z-index:3; left:26px; top:22px; display:flex; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.18em; color:#f2fbf8; background:#000208b3;
  border:1px solid #f5f40055; border-radius:99px; padding:7px 14px;
}
.live-pill:before{content:''; width:7px; height:7px; border-radius:50%; background:var(--acid)}
@media (max-width:600px){
  .live-pill{left:16px; top:14px}
  /* four faces in a row are too small on a phone: a 2x2 crop is served instead */
  .work-card.wide .card-media.aistaff{aspect-ratio:3 / 2}
}