/* ============================================================
   NAFTALI YECHILZUKE - INTERFERENCE
   Shared stylesheet. Every page loads this.
   ============================================================ */

:root{
  --paper:#f2f1ec;
  --black:#0a0a0a;
  --red:#ff5259;   /* his coral, from his old site; was #ff2b4d, an alarm red (2026-09-21) */
  --cyan:#00d4c8;
  --rule:1.5px solid var(--black);
  --wrap:1280px;
  --cut:var(--paper);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--black);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  position:relative;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- ambient signal: runs on every page ---------- */
.scan{
  position:fixed; inset:0; pointer-events:none; z-index:80;
  background:repeating-linear-gradient(0deg,
    rgba(10,10,10,.035) 0px, rgba(10,10,10,.035) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}
.field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at var(--mx,50%) var(--my,30%), var(--signal,rgba(255,82,89,.10)), transparent 34%),
    linear-gradient(rgba(10,10,10,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.05) 1px, transparent 1px);
  background-size:auto, 42px 42px, 42px 42px;
  opacity:.9;
}
/* text-heavy pages dial the field back for readability */
body.quiet .field{ opacity:.45; }
body.quiet .scan{ opacity:.6; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 clamp(18px,4vw,52px);
  position:relative; z-index:1;
}

/* ---------- typographic identity ---------- */
.glitch-heading{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  text-shadow:2px 0 rgba(255,82,89,.55), -2px 0 rgba(0,212,200,.45);
}
.mono{ font-family:'Space Mono',monospace; }

/* ---------- nav ---------- */
.site-nav{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; padding:22px 0; border-bottom:2px solid var(--black);
}
.mark{
  display:flex; flex-direction:column; gap:2px;
  text-decoration:none; color:var(--black); line-height:1.2;
}
/* The name stays in Archivo Black, the headlines' face, a size up so it
   can breathe. The title is his positioning, not metadata: Inter caps,
   tracked, near full strength - the footer's treatment - instead of
   11px Space Mono at 60%, which read like a system label (2026-09-21). */
.mark strong{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:18px; letter-spacing:-.01em;
}
.mark span{
  font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; opacity:.8;
}
.mark:hover span{ color:var(--red); opacity:1; }
.nav-links{
  display:flex; gap:26px; align-items:center;
  font-family:'Space Mono',monospace; font-size:12.5px;
}
.nav-links a{
  color:var(--black); text-decoration:none;
  display:inline-block; min-width:1ch; white-space:nowrap;
}
.nav-links a[aria-current="page"]{ color:var(--red); }
.nav-links a.contact{ border:1.5px solid var(--black); padding:6px 12px; }
.nav-links a.contact:hover{ background:var(--red); border-color:var(--red); color:var(--paper); }

/* ---------- page head ---------- */
.page-head{ padding:64px 0 22px; }
.eyebrow{
  font-family:'Space Mono',monospace; font-size:12.5px; color:var(--red);
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--red); padding:4px 10px; margin:0 0 22px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--red);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.page-head h1{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:clamp(40px,7.4vw,96px); line-height:.9; margin:0;
  letter-spacing:-.02em;
}
.page-head .standfirst{
  max-width:640px; margin:26px 0 0;
  font-size:17px; line-height:1.6;
}

/* decrypt-reveal headline pieces (injected by site.js) */
[data-decrypt] .row{ display:block; }
[data-decrypt] .row.tilt{ transform:rotate(-2.4deg) translateX(4px); transform-origin:left; }
[data-decrypt] .ch{ display:inline-block; }
[data-decrypt] .w{ display:inline-block; white-space:nowrap; }
[data-decrypt] .ch.unresolved{ text-shadow:3px 0 var(--red), -3px 0 var(--cyan); }

/* ============================================================
   HERO - the showreel as a signal you tune in by hand.
   One <video> plays clean underneath. The .interference layer
   sits on top and degrades everything it covers, but its mask
   has a hole at the cursor - so wherever you point, the real
   picture comes through.
   ============================================================ */
.hero{ position:relative; margin:34px 0 0; border:var(--rule); overflow:hidden; container-type:inline-size; }
.hero-media{ position:relative; aspect-ratio:16/9; background:var(--black); }
.hero-media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.interference{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  -webkit-backdrop-filter:grayscale(1) contrast(1.45) brightness(.82);
  backdrop-filter:grayscale(1) contrast(1.45) brightness(.82);
  background:
    repeating-linear-gradient(0deg,
      rgba(10,10,10,.30) 0px, rgba(10,10,10,.30) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(rgba(242,241,236,.10), rgba(242,241,236,.10));
  /* transparent at the cursor = overlay not painted = clean video */
  -webkit-mask-image:radial-gradient(circle at var(--tx,50%) var(--ty,50%),
    transparent 0, transparent 86px, #000 168px);
  mask-image:radial-gradient(circle at var(--tx,50%) var(--ty,50%),
    transparent 0, transparent 86px, #000 168px);
}
/* no cursor to follow, and no backdrop-filter support: stay legible */
.hero.no-tuner .interference{
  -webkit-mask-image:none; mask-image:none;
  -webkit-backdrop-filter:grayscale(.55) contrast(1.15);
  backdrop-filter:grayscale(.55) contrast(1.15);
}

.hero-overlay{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(20px,3.4vw,46px); pointer-events:none;
}
/* One step lighter than Archivo Black (his call, 2026-09-22): three long
   lines in Black sat too heavy on the eyes. Same family, so it still reads
   as the case headlines' voice. Falls back to Archivo Black. */
.hero-overlay h1{
  font-family:'Archivo','Archivo Black',sans-serif; font-weight:800;
  /* Sized to the hero box, not the window, so the longest line always
     fits on one line (it broke into four in Safari, 2026-09-22). 15.2 is
     that line's width in em (STRATEGY AND CREATIVE. = 14.4em) plus slack
     for the tilt; change the copy, re-measure. */
  font-size:clamp(20px, calc((100cqi - 2 * clamp(20px,3.4vw,46px)) / 15.2), 80px);
  line-height:.94; margin:0;
  letter-spacing:0; color:var(--paper);   /* Archivo is narrower than Black; -.02em closed the word gaps */
  text-shadow:0 2px 40px rgba(10,10,10,.55);
}
/* Same cut as the case headlines (2026-09-22): the tilted line is carved
   out of the line above by a hard 2px edge and lifted by a tight dark
   drop. The headline here is light on the film, so the edge is black,
   not the paper the rest of the home page sits on. */
.hero-overlay h1{ --cut:var(--black); }
/* Archivo's space is thin at this size; widen only the word gaps
   (a .ch directly in a .row is always a space: letters sit in .w). */
.hero-overlay h1 .row > .ch{ margin-right:.1em; }
.hero-overlay h1 .row.tilt .ch:not(.unresolved){
  text-shadow:0 -2px 0 var(--cut), 0 3px 6px rgba(0,0,0,.8);
}
/* The hint that used to sit on the left here is gone: no operating
   instructions. The visitor finds the tuner or does not, and the film
   is worth watching either way. */
.hero-foot{
  display:flex; justify-content:flex-end; align-items:flex-end;
  gap:16px; flex-wrap:wrap;
}
.reel-btn{
  pointer-events:auto; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.06em;
  background:var(--paper); color:var(--black);
  border:1.5px solid var(--paper); padding:12px 20px;
}
.reel-btn:hover{ background:var(--red); border-color:var(--red); color:var(--paper); }

/* ============================================================
   CASE STUDY MODE — the site in negative.
   Same palette, same type, same effects. Inverted ground.
   Clicking into a project should feel like going somewhere,
   not like scrolling further. The index catalogues; a case
   study projects.
   ============================================================ */
/* Four variables carry the whole theme. Negative is the default;
   a brand with a world of its own overrides them and nothing else.
   Structure, type, scanlines and the tuner never change. */
body.case{
  --ground:#0a0a0a;
  --ink:#f2f1ec;
  --accent:#ff5259;
  --accent-2:#00d4c8;
  --ink-soft:rgba(242,241,236,.22);
  /* rules, borders and buttons use --accent; words use --highlight */
  --highlight:var(--accent);
  background:var(--ground); color:var(--ink);
}

/* MAGNUM: chocolate and gold. No red anywhere on this page.
   Red channel stays well above green, or the brown turns olive. */
body.case-magnum{
  --ground:#2a1409;
  --ink:#f7ecd8;
  --accent:#efc04e;          /* proper gold, bright enough to read small */
  --accent-2:#8c5a20;        /* bronze, for the double-vision offset */
  --ink-soft:rgba(247,236,216,.22);
  --lift:#4e2814;            /* the warm top of the door gradient */
  /* stills rest warm here, not grey - grey on brown reads as archive footage */
  --field-a:rgba(255,214,150,.12);
  --field-b:rgba(212,160,54,.10);
}

/* scanlines stay, but light-on-dark; the background grid goes
   entirely, so you are inside the signal, not looking at the UI */
body.case .scan{
  mix-blend-mode:normal;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px,
    transparent 1px, transparent 3px);
}
body.case .field{
  background-image:radial-gradient(circle at var(--mx,50%) var(--my,30%),
    var(--accent), transparent 38%);
  background-size:auto; opacity:.16;
}
body.case .site-nav{ border-bottom-color:var(--ink); }
body.case .mark,
body.case .nav-links a{ color:var(--ink); }
body.case .nav-links a.contact{ border-color:var(--ink); }
body.case .nav-links a.contact:hover{ background:var(--accent); border-color:var(--accent); color:var(--ground); }
body.case .glitch-heading{ text-shadow:2px 0 var(--accent), -2px 0 var(--accent-2); }
/* stop the site's signal red leaking into a themed case */
body.case .mark:hover span,
body.case .nav-links a[aria-current="page"]{ color:var(--accent); }
body.case [data-decrypt] .ch.unresolved{ text-shadow:3px 0 var(--accent), -3px 0 var(--accent-2); }

body.case .film::after{
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px,
    transparent 1px, transparent 3px);
}
body.case .chapter-body p{ opacity:.94; }

/* the brand this case is about, stated once, at the top */
/* credit line and back-link: one font, one colour, one weight */
.case-top{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; flex-wrap:wrap;
}
.case-open .kicker{
  font-family:'Space Mono',monospace; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); opacity:.6; text-decoration:none;
}
/* the client credit is a statement of fact, not a UI label, so it
   sits in the body font rather than the monospace label font */
.case-client{
  font-family:'Inter',system-ui,sans-serif; font-weight:500;
  font-size:15px; letter-spacing:.01em;
  color:var(--ink); opacity:.65;
}
.case-open .kicker{ border-bottom:1.5px solid var(--accent); padding-bottom:3px; }

/* The name of the thing, for a project with no mark of its own. It sits
   UNDER the headline: above it, it was read first and answered a question
   the headline had not asked yet. Below, the headline lands and this
   names what landed. */
.case-wordmark{
  display:block; margin:clamp(18px,2.8vh,30px) 0 0;
  font-family:'Inter',system-ui,sans-serif; font-weight:500;
  font-size:clamp(17px,2vw,23px); line-height:1.25;
  letter-spacing:-.01em; color:var(--accent);
  /* was 40ch, which broke elections' 58-character subheading into two
     lines with one word left over. Every other subheading is under 42
     characters and measured unchanged at 1280 and 800. On a phone a long
     one still wraps, as it should. */
  max-width:64ch;
}

/* the mark itself carries the brand, at size */
/* logo and headline read as one block, so the slack goes above them */
.case-logo{
  /* Bound by HEIGHT, not width. These marks arrive in every shape,
     from Magnum's long wordmark to Yotvata's tall portrait, and only
     a height cap treats them alike. */
  height:auto; width:auto;
  max-height:clamp(74px,13vh,138px);
  max-width:min(300px,34vw);
  object-fit:contain; object-position:left center;
  margin:clamp(26px,5vh,54px) 0 0;
  /* an inlined currentColor mark takes the theme's ink */
  color:var(--ink);
}
/* An inline <svg> has no intrinsic pixel size, only a viewBox, so it
   needs the height stated rather than capped. Same cap, same result. */
svg.case-logo{
  height:clamp(74px,13vh,138px); width:auto; display:block;
}

/* ONE FIELD PER PAGE.
   The colour is painted once, across the whole document, and the opening
   section is left transparent so it sits in the same light as the film
   and the story below it. Painting the opening and the body separately
   put a hard seam between them and the page read as two unrelated pieces
   stacked up. Naftali caught it on Med in Israel and it applies to every
   case study.

   A theme sets --field-a and --field-b and nothing else changes. */
body.case{
  position:relative;
  --field-a:rgba(255,214,150,.10);
  --field-b:transparent;
}
body.case::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 85% 30% at 2% 2%, var(--field-a), transparent 62%),
    radial-gradient(ellipse 95% 34% at 100% 28%, var(--field-b), transparent 64%),
    linear-gradient(168deg, var(--lift,#2a2a2a) 0%, var(--ground) 46%);
}

/* The opening: no photograph. A film frame is someone else's composition
   and carries its own titles. The brand's own colour says more, faster. */
.case-open{
  position:relative; min-height:auto;
  display:flex; flex-direction:column;
  padding:clamp(24px,4vw,58px);
  padding-bottom:clamp(26px,4vh,52px);
  /* The door's content sits on the same line as the nav, the film and
     the copy, which all live in the 1280px .wrap. The box itself stays
     full width so a theme's door background (hls) still runs edge to
     edge; only the content is pushed in. Before 2026-09-19 the headline
     hugged the window edge on a wide screen, 300px left of everything
     under it. Found by Naftali in Safari on clalit. */
  padding-inline:max(clamp(18px,4vw,52px), calc((100% - var(--wrap)) / 2 + clamp(18px,4vw,52px)));
  overflow:hidden;
  background:none;
}
.case-open .kicker:hover{ opacity:1; color:var(--accent); }
.case-open h1{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  /* case headlines are sentences now, not two words - sized so the
     longest line still fits on one line at every width */
  font-size:clamp(28px,5.6vw,80px); line-height:.94; margin:24px 0 0;
  text-wrap:balance;
  letter-spacing:-.02em; color:var(--ink);
}
/* A case with no logo goes straight from the credit line to the headline,
   so the headline takes the slack the mark used to hold. A case WITH a
   logo keeps the tight 24px above, because the mark and the headline are
   meant to read as one block. */
.case-open .case-top + h1{ margin-top:clamp(34px,6vh,64px); }
.case-open h1 .ch.unresolved{ text-shadow:3px 0 var(--accent), -3px 0 var(--accent-2); }
/* The tilted line rides up over the line above it. A hard 2px edge cuts it
   out of that line and a tight dark drop lifts it off, so it reads as in
   front. Tuned with Naftali on clalit, 2026-09-19, then made the rule for
   every case headline. The edge takes --cut, which is the ground unless a
   theme's headline sits on a different colour (Elite's sits on black). */
body.case{ --cut:var(--ground); }
.case-open h1 .row.tilt .ch:not(.unresolved){
  text-shadow:0 -2px 0 var(--cut), 0 3px 6px rgba(0,0,0,.8);
}

.case-intro{ padding:clamp(40px,6vh,72px) 0 10px; max-width:64ch; }
.case-intro p{ font-size:clamp(17px,1.9vw,22px); line-height:1.6; margin:0 0 20px; }
/* the name of the thing should never break across two lines */
.case-intro strong{ color:var(--accent); font-weight:600; white-space:nowrap; }

/* ============================================================
   CASE STUDY TIMELINE (magnum.html)
   Years are structural here: they ARE the story. Everywhere else
   on the site there are no dates at all.
   ============================================================ */
.backlink{
  display:inline-block; margin:0 0 24px;
  font-size:12px; letter-spacing:.06em;
  color:var(--black); text-decoration:none;
  border-bottom:1.5px solid var(--red); padding-bottom:2px;
}
.backlink:hover{ color:var(--red); }
.page-head .standfirst + .standfirst{ margin-top:16px; }

.timeline{ padding:0 0 40px; }
.chapter{
  display:grid; grid-template-columns:250px 1fr;
  gap:clamp(18px,3vw,40px);
  padding:70px 0; border-bottom:1.5px solid var(--ink-soft);
  align-items:start;
}
/* media runs the full width of its column, never a fixed crop */
.chapter-media{ grid-column:2; margin-bottom:34px; }
.chapter-body{ grid-column:2; max-width:66ch; }

.chapter-head .year{
  display:block;
  font-family:'Archivo Black',sans-serif; font-size:clamp(34px,4.4vw,62px);
  line-height:.92; letter-spacing:-.02em;
  text-shadow:2px 0 var(--accent), -2px 0 var(--accent-2);
}
.chapter-head .year .to{
  display:block; font-family:'Space Mono',monospace;
  font-size:13px; text-shadow:none; opacity:.45; margin:2px 0;
}
.chapter-head h2{
  font-family:"Inter",system-ui,sans-serif; font-weight:600;
  font-size:17px; letter-spacing:0; line-height:1.3;
  margin:10px 0 0; opacity:.85;
}

.film{
  display:block; position:relative; width:100%; padding:0;
  border:none; background:#000; cursor:pointer;
  aspect-ratio:16/9; overflow:hidden;
}
/* the film swaps itself for the player, in the same box */
.film-playing{ cursor:default; }
.film-playing iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.film-playing::after{ display:none; }
.film img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .28s ease;
}
.film::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(10,10,10,.22) 0px, rgba(10,10,10,.22) 1px,
    transparent 1px, transparent 3px);
  transition:opacity .28s ease;
}
/* Films are in full colour, always, on every page and every device. The
   one thing a hover does is grow the frame a little (his call, 2026-09-22,
   after trying black and white, brand tints, and B&W-until-hover). */
.film:hover img, .film:focus-visible img{ transform:scale(1.04); }
.film .play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em;
  background:var(--ink); color:var(--ground); padding:9px 16px;
}
.film:hover .play{ background:var(--accent); color:var(--ground); }
.film .dur{
  position:absolute; right:8px; bottom:8px; z-index:2;
  font-family:'Space Mono',monospace; font-size:10.5px;
  background:rgba(0,0,0,.8); color:var(--ink); padding:3px 7px;
}

/* reading mode, not scanning mode: bigger type, narrower measure */
.chapter-body p{ font-size:17px; line-height:1.72; margin:0 0 18px; opacity:.88; }
.chapter-body p:first-child{
  font-size:clamp(20px,2.2vw,27px); line-height:1.4; opacity:1;
  font-family:'Archivo Black',sans-serif; font-weight:400; margin-bottom:22px;
}
/* The opening line of a chapter is the same thing as the opening line of
   a single-film case, so it has to weigh the same. It was landing at 94%
   here and 100% everywhere else, because `body.case .chapter-body p`
   outranked the rule above it. Same words, same weight, every case. */
body.case .chapter-body p:first-child{ opacity:1; }
.chapter-body strong{ color:var(--highlight); font-weight:600; }
/* a press quote is evidence, not an aside - it gets the accent, not grey */
.chapter-body em{ opacity:1; color:var(--highlight); font-style:italic; }

/* The conclusion of each chapter is the most important line in it:
   it is the only place the thinking shows. It was set at footnote
   size, which said the opposite. */
.chapter-body .lesson{
  margin:34px 0 0; padding:22px 0 0 22px;
  border-top:1.5px solid var(--ink-soft); border-left:3px solid var(--accent);
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(17px,1.5vw,20px); font-weight:500; line-height:1.5;
  letter-spacing:-.005em; opacity:1; color:var(--ink);
}

.closer{ padding:clamp(34px,5vh,58px) 0 clamp(46px,7vh,76px); text-align:center; }
.closer .big{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(26px,4.6vw,56px); line-height:1.04; margin:0 0 34px;
}
/* The base button rule lived in the deleted side-panel block, so this link
   rendered as bare underlined text on every case page. Restored in the
   shape of the site's other buttons (TALK TO ME, TUNE IN). */
.closer .p-more{
  display:inline-block; text-decoration:none;
  font-size:13px; letter-spacing:.06em;
  padding:12px 20px; border:1.5px solid var(--black); color:var(--black);
  transition:background .2s, color .2s, border-color .2s;
}
body.case .closer .p-more{ color:var(--ink); border-color:var(--ink); }
/* NEXT sits beside BACK TO ALL WORK; if they ever wrap, the gap holds */
body.case .closer{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
body.case .closer .p-more:hover{ background:var(--accent); border-color:var(--accent); color:var(--ground); }

/* The footer is black on every page, his call (2026-09-21). On case pages
   it used to flip to paper, a bright block that broke each theme at the
   very end. The hairline keeps an edge where a theme's ground is black too. */
body.case .site-footer{ border-top:1.5px solid var(--ink-soft); }

/* One breakpoint scale across the whole site: 1024 / 768 / 640, the
   standard tablet-landscape, tablet-portrait and phone widths. The
   numbers used to be picked per component (940, 860, 1040), which put
   four different reflow points inside one scroll. */
@media (max-width:1024px){
  .chapter{ grid-template-columns:1fr; gap:18px; padding:48px 0; }
  .chapter-media, .chapter-body{ grid-column:1; }
  .chapter-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
  .chapter-head h2{ margin:0; }
}

/* On a phone the door has no slack to distribute - a fixed viewport
   height just opens a hole between the headline and the fold line. */
@media (max-width:768px){
  .case-logo{ width:min(400px,58vw); }
}

/* ============================================================
   SHOWREAL PAGE
   One film and nothing else. No tuning here: with a single item
   there is nothing to tune between, and greyscale on black just
   killed the frame. It rests in full colour.
   ============================================================ */
.reel-stage{
  padding:clamp(26px,5vh,60px) 0 clamp(40px,7vh,84px);
}
.reel-film{
  position:relative; aspect-ratio:16/9;
  margin:0 auto; width:min(1600px, 94vw);
  background:#000; cursor:default;
}
.reel-film iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.reel-sound{
  margin:16px auto 0; width:min(1600px, 94vw);
  font-size:11px; letter-spacing:.1em; opacity:.4; color:var(--ink);
}

/* ---------- home: bio + brands ---------- */
.intro{ padding:58px 0 10px; }
.intro p{ font-size:clamp(17px,1.6vw,21px); line-height:1.55; margin:0 0 20px; max-width:56ch; }
.intro p.lead{ font-family:'Archivo Black',sans-serif; font-size:clamp(21px,2.3vw,30px); line-height:1.2; }
.brand-strip{
  align-self:start; padding-top:8px;
  border-top:1.5px dashed var(--black);
}
.brand-strip .label{
  font-family:'Space Mono',monospace; font-size:11px; color:var(--red);
  text-transform:uppercase; display:block; margin:12px 0 14px;
}
.brand-strip ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 18px;
  font-family:'Space Mono',monospace; font-size:12.5px; text-transform:uppercase;
}

/* ============================================================
   BRAND WALL
   Names, not logos. Fifty-odd marks in one palette, one weight,
   one size. The argument is the volume and the range, and names
   carry both at a size logos never could.
   ============================================================ */
.brands{ margin:10px 0 0; }
.brand-group{
  display:grid; grid-template-columns:230px 1fr;
  gap:clamp(16px,3vw,44px);
  padding:22px 0; border-top:1.5px solid var(--black);
  transition:background .15s ease;
}
.brand-group:hover{ background:rgba(10,10,10,.035); }
.brand-group:last-of-type{ border-bottom:1.5px solid var(--black); }
.brand-group h3{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:clamp(20px,2.3vw,30px); line-height:1; margin:0;
  text-shadow:2px 0 rgba(255,82,89,.5), -2px 0 rgba(0,212,200,.4);
  align-self:start;
}
.brand-group h3{ transition:color .15s ease; }
.brand-group ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:7px 0;
  font-family:'Space Mono',monospace; font-size:13px;
  text-transform:uppercase; letter-spacing:.02em;
  align-content:flex-start;
}
.brand-group li{ white-space:nowrap; }
.brand-group li:not(:last-child)::after{
  content:"·"; color:var(--red); margin:0 10px; opacity:.8;
}
.brand-group li:hover{ color:var(--red); }
.brand-group .also{
  margin:14px 0 0; font-size:13px; line-height:1.5; opacity:.62; max-width:62ch;
}
@media (max-width:768px){
  .brand-group{ grid-template-columns:1fr; gap:14px; }
}

/* ---------- home: section head + bridge ---------- */
.sec-head{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:12px; margin:72px 0 26px;
  padding-top:20px; border-top:1.5px dashed var(--black);
}
.sec-head h2{ font-size:clamp(26px,3.2vw,38px); margin:0; }
.sec-head a{
  font-family:'Space Mono',monospace; font-size:12.5px;
  color:var(--black); text-decoration:none;
  border-bottom:1.5px solid var(--red); padding-bottom:2px;
}
.sec-head a:hover{ color:var(--red); }

/* The StrayCo bridge that closed the home page was removed (his call,
   2026-09-22), so the brand wall is the last thing before the footer. */
.brands:last-child{ margin-bottom:90px; }

/* ---------- filters ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:40px 0 26px; padding-top:20px;
  border-top:1.5px dashed var(--black);
}
.filters .label{
  font-family:'Space Mono',monospace; font-size:11.5px;
  opacity:.5; margin-right:6px; text-transform:uppercase;
}
.chip{
  font-family:'Space Mono',monospace; font-size:12px;
  background:none; color:var(--black);
  border:1.5px solid var(--black); padding:7px 13px;
  cursor:pointer; text-transform:uppercase; letter-spacing:.02em;
  transition:background .12s ease, color .12s ease;
}
.chip:hover{ background:var(--black); color:var(--paper); }
.chip[aria-pressed="true"]{ background:var(--black); color:var(--paper); }
.chip[aria-pressed="true"]::before{ content:"▸ "; color:var(--red); }

/* ---------- the grid ---------- */
.grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-bottom:90px;
}
.cell{
  border:var(--rule); margin:0 0 -1.5px -1.5px;
  padding:24px 22px 20px; min-height:250px;
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:18px; position:relative; cursor:pointer;
  background:var(--paper); text-align:left; width:100%;
  font:inherit; color:inherit;
  transition:transform .16s ease, background .16s ease, color .16s ease;
  text-decoration:none;
}
a.cell, a.cell:visited{ color:var(--black); }
a.cell:hover{ color:var(--paper); }
/* deliberate misalignment - irregular, not patterned */
.cell:nth-child(3){ transform:translateY(13px); }
.cell:nth-child(6){ transform:translateY(-9px); }
.cell:nth-child(8){ transform:translateY(16px); }
.cell:nth-child(11){ transform:translateY(-7px); }
.cell:nth-child(14){ transform:translateY(11px); }

.cell:hover, .cell:focus-visible{
  background:var(--black); color:var(--paper); z-index:3;
  transform:translateY(0) rotate(-.6deg) scale(1.03);
  outline:none;
}
.cell:hover .idx, .cell:focus-visible .idx{ color:var(--red); }
.cell:hover .client, .cell:focus-visible .client{ opacity:.7; }
.cell:hover .read, .cell:focus-visible .read{ color:var(--red); }

.cell-top{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; font-family:'Space Mono',monospace; font-size:11.5px;
}

/* ---- card media: the work, tuned out until you touch it ----
   Same idea as the hero. Everything sits degraded; moving across
   the grid brings each frame back into colour, one at a time. */
.cell-media{
  position:relative; margin:18px -22px 0; aspect-ratio:16/9;
  overflow:hidden; background:var(--black);
}
.cell-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.3) brightness(.86);
  transform:scale(1.02);
  transition:filter .28s ease, transform .28s ease;
}
.cell:hover .cell-media img,
.cell:focus-visible .cell-media img{
  filter:none; transform:scale(1.06);
}
.cell-media::after{               /* scanlines, so stills feel native */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(10,10,10,.22) 0px, rgba(10,10,10,.22) 1px,
    transparent 1px, transparent 3px);
  opacity:1; transition:opacity .28s ease;
}
.cell:hover .cell-media::after{ opacity:.25; }

.cell-media .dur{
  position:absolute; right:8px; bottom:8px; z-index:2;
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  background:var(--black); color:var(--paper); padding:3px 7px;
}
.cell:hover .cell-media .dur{ background:var(--red); }
.cell-media.no-still{
  display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--red);
}
.cell-media.no-still .dur{ position:static; background:none; color:var(--red); }

/* first row of a flagship card is wider, so give its still more height */
.cell.flagship .cell-media{ aspect-ratio:21/9; }
.cell .idx{ letter-spacing:.04em; }
.cell .client{ opacity:.55; text-transform:uppercase; }
.cell .idx{ color:var(--red); letter-spacing:.08em; }
.cell h3{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:20px; line-height:1.12; margin:0 0 10px;
}
.cell .lede{ font-size:13.5px; line-height:1.5; margin:0; }
.cell .read{
  font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.08em; opacity:.75;
  margin-top:auto;
}

/* flagship cells span two columns and carry more weight */
.cell.flagship{ grid-column:span 2; min-height:290px; }
.cell.flagship h3{ font-size:clamp(26px,3vw,38px); }
.cell.flagship .lede{ font-size:15px; max-width:44ch; }
.cell.flagship .idx{ color:var(--red); }
.cell.flagship .read::after{ content:" ▸"; }

.cell[hidden]{ display:none; }
/* approved but not published (emergency-ed, 2026-09-21): the card stays as
   the copy source for build-cases.js and never shows, whatever the filter */
.cell[data-parked]{ display:none !important; }

/* full case copy lives in the card for indexing; JS lifts it into the panel */
.cell-full{ display:none; }

/* open editorial gaps, visible while the copy is still being written */
.rewrite-flag{
  border-left:3px solid var(--red); padding:10px 0 10px 14px;
  font-size:14px !important; line-height:1.5 !important; color:var(--red);
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--black); color:var(--paper);
  padding:64px 0 52px; position:relative; z-index:1;
}
.site-footer .big{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(30px,5.4vw,58px); line-height:.98; margin:0 0 34px;
  /* the quote's first line is long; where it has to wrap, wrap it evenly
     rather than leave GOING alone on a line */
  text-wrap:balance;
  text-shadow:2px 0 var(--red), -2px 0 var(--cyan);
}
.site-footer .big span{ color:var(--red); text-shadow:none; }
/* Hanging punctuation, his note: the opening quote sits outside the
   measure so ROADS and WE start on the same line. The mark is 0.5em wide
   in Archivo Black. It is not a red word, so it undoes the span colour. */
.site-footer .big .hang{
  color:inherit; text-shadow:inherit;
  margin-left:-.5em;
}
/* The closing line is his: the quote he opened his old site with, in
   full and in quotes, the source in brackets set tight under it, as on
   his old site. It replaced LET'S BREAK SOMETHING GOOD, which was never
   his (2026-09-21). */
.site-footer .cite{
  font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.02em;
  opacity:.55; margin:-26px 0 34px;
}
/* His layout (2026-09-21): the ways to reach him on the left, LinkedIn
   and the address together; the town alone on the right. */
.site-footer .foot-row{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:14px 40px;
}
/* LinkedIn, the address and the town: one treatment, his note - three
   colours and two fonts read as three unrelated things. Inter, because
   Space Mono draws @ as an "a" with a tail ("ynaftaliagmail"). Links go
   red on hover; that is the only difference between them and the town. */
.site-footer .social{ display:flex; gap:28px; flex-wrap:wrap; }
.site-footer .social a,
.site-footer .copy{
  font-family:'Inter',system-ui,sans-serif; font-size:13px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(242,241,236,.72); text-decoration:none;
}
.site-footer .social a:hover{ color:var(--red); }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .cell{ transform:none !important; }
  .cell.flagship{ grid-column:span 2; }
}
@media (max-width:640px){
  .grid{ grid-template-columns:1fr; }
  .cell, .cell.flagship{ grid-column:span 1; min-height:0; }
  .nav-links{ gap:16px; font-size:11.5px; }
  .nav-links a:not(.contact):not(.nav-work){ display:none; }
}

/* ============================================================
   SINGLE-FILM CASE STUDY
   Most projects are one idea and one film, not seven chapters.
   The film carries the page, so it gets the width; the copy sits
   under it in a reading measure.
   ============================================================ */
.case-single{ padding:clamp(20px,3vh,38px) 0 0; }
.case-film{
  width:100%; aspect-ratio:16/9;
  margin:0 0 clamp(28px,5vh,52px);
}
.case-body{ max-width:66ch; }
.case-body p{ font-size:17px; line-height:1.72; margin:0 0 18px; opacity:.94; }
.case-body p:first-child{
  font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:clamp(20px,2.2vw,27px); line-height:1.4;
  margin-bottom:22px; opacity:1;
}
.case-body strong{ color:var(--highlight); font-weight:600; }
.case-body em{ color:var(--highlight); font-style:italic; }

/* The turn. Every case opens with the situation and then arrives at
   him; this is the sentence where that happens. It takes the same
   shape as a Magnum lesson line, because it does the same job, but it
   carries --accent rather than --highlight so it reads as structure
   and never competes with an emphasised word inside the body. */
.case-body .pivot{
  margin:32px 0 28px; padding:4px 0 4px 22px;
  border-left:3px solid var(--accent);
  font-family:'Archivo Black',sans-serif; font-weight:400;
  font-size:clamp(20px,2.2vw,27px) !important;
  line-height:1.4 !important;
  opacity:1; color:var(--accent);
}
.case-body .rewrite-flag{
  border-left:3px solid var(--accent); padding:10px 0 10px 14px;
  font-size:14px !important; line-height:1.5 !important; color:var(--accent);
}

/* YOTVATA: the desert the dairy actually sits in. Navy from the base
   of the mark, the sun's orange as accent, the palms' green behind it.
   Flat green used one colour out of five and looked like a database. */
body.case-yotvata{
  --ground:#0b2440;
  --ink:#f6f0e2;
  --accent:#f08a1c;
  --accent-2:#1d7a3e;
  --ink-soft:rgba(246,240,226,.22);
  --lift:#15436f;
  --field-a:rgba(240,138,28,.18);
  --field-b:rgba(29,122,62,.14);
}

/* LIPTON: the shield's own red, with the sunburst that sits behind the
   wordmark as the accent. The ground keeps its red channel far clear of
   the green, per the Magnum lesson, or it slides to brick. */
body.case-lipton{
  --ground:#5e0d0e;
  --ink:#fff6e8;
  --accent:#f5a623;
  --accent-2:#e01b22;
  --highlight:#ffcf5c;
  --ink-soft:rgba(255,246,232,.24);
  --lift:#8e1614;
  --field-a:rgba(245,166,35,.24);
  --field-b:rgba(224,27,34,.20);
}
/* Vimeo's still is 960x767 with 32px of black across the top and the
   bottom. The frame takes the shape of the picture inside the bars
   (960x702) and the still covers it, so the bars fall outside. Width is
   set for the same 540px height every film gets. !important because
   site.js writes the still's own shape and width inline. */
body.case-lipton .case-film{
  aspect-ratio:960 / 702 !important;
  max-width:738px !important;
}

/* ELITE COFFEE: the Turkish coffee pack, from his packshot. Black at the
   top where the logo sits, the roasted brown of the beans through the
   middle, the pack's red below, and the gold of its lettering for
   structure and words. His order: black, then brown, then red. */
body.case-elite{
  --ground:#d21f1a;
  --lift:#0b0908;
  --roast:#4a2412;
  --cut:var(--lift);         /* the headline sits on the black, not the red */
  --ink:#fff8ef;
  --accent:#e2ad2b;
  --accent-2:#0b0908;
  --highlight:#f0c04a;
  --ink-soft:rgba(255,248,239,.30);
  --signal:rgba(240,192,74,.10);
  --field-a:rgba(0,0,0,.35);
  --field-b:rgba(226,173,43,.10);
}
body.case-elite::before{
  background:
    radial-gradient(ellipse 85% 30% at 2% 2%, var(--field-a), transparent 62%),
    radial-gradient(ellipse 95% 34% at 100% 28%, var(--field-b), transparent 64%),
    linear-gradient(176deg, var(--lift) 0%, var(--roast) 20%, var(--ground) 46%);
}
/* The pack sets its second line in gold under the big black word; the
   case sets its opening line in the same gold under the film. */
body.case-elite .case-body p:first-child{ color:var(--highlight); }

/* CLALIT: a deep navy taken from the blue half of the mark. The first
   version was the fund's green as a ground, and the green logo sank into
   it. On navy both halves of the mark hold their own colour: green
   carries structure, the blue carries words. */
body.case-clalit{
  --ground:#071a2e;
  --lift:#0f3457;
  --ink:#eef6fb;
  --accent:#1fb35c;
  --accent-2:#009fe3;
  --highlight:#4cc3f2;
  --ink-soft:rgba(238,246,251,.22);
  --signal:rgba(0,159,227,.10);
  --field-a:rgba(0,159,227,.20);
  --field-b:rgba(31,179,92,.14);
}
/* Vimeo's still for this film carries a light line along its top and
   bottom edge. Scaled up just past it; the hover zoom keeps its step. */
body.case-clalit .film img{ transform:scale(1.03); }
body.case-clalit .film:hover img,
body.case-clalit .film:focus-visible img{ transform:scale(1.07); }

/* NTA: the transit authority's mark, a navy line under an orange sun.
   The ground is the mark's navy taken deeper and bluer than Clalit's, so
   the two navy pages do not read as one. The sun carries structure and
   words; the mark itself sits with its navy turned white. */
body.case-nta{
  --ground:#0b1a3a;
  --lift:#1b3669;
  --ink:#f4f6fb;
  --accent:#fcb133;
  --accent-2:#e8702a;
  --highlight:#ffc75a;
  --ink-soft:rgba(244,246,251,.24);
  --signal:rgba(252,177,51,.10);
  --field-a:rgba(252,177,51,.18);
  --field-b:rgba(27,54,105,.55);
}

/* CANNES: the red carpet, all the way. The first version was a black
   ground with a red glow and read as neither; he called it unclear. The
   ground is now one velvet crimson, the gold of the Palme d'Or carries
   structure and words, and black is kept for the headline's split. The
   crimson is cool and bright where Lipton's red is brown, so the two red
   pages stay apart. */
body.case-cannes{
  --ground:#7a0716;
  --lift:#b5122f;
  --velvet:#4a030d;
  --ink:#fff7ea;
  --accent:#d9a650;
  --accent-2:#1a0306;
  --highlight:#f4d08c;
  --ink-soft:rgba(255,247,234,.28);
  --signal:rgba(243,210,122,.10);
  --field-a:rgba(255,60,80,.14);
  --field-b:rgba(0,0,0,.18);
}
/* "Richer", his word for the flat red. Velvet: a brighter, fuller crimson
   where the light falls at the top, sinking to a deep wine at the edges
   and the foot, the way a carpet reads under lights. */
body.case-cannes::before{
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, var(--lift), transparent 72%),
    radial-gradient(ellipse 60% 70% at 0% 60%, var(--velvet), transparent 70%),
    radial-gradient(ellipse 60% 70% at 100% 60%, var(--velvet), transparent 70%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground) 45%, var(--velvet) 100%);
}
/* The opening line in gold, so the emphasis is not the same white as the
   running copy. His ask. Black was the other option and is illegible on
   this red (about 1.6:1); the gold is about 8.8:1. */
/* the pavilion's slogan, named in the copy, never splits across lines */
body.case-cannes .case-body strong{ white-space:nowrap; }
body.case-cannes .case-body p:first-child{
  color:var(--highlight);
  /* flat gold read as mustard; foil reads as gold: light at the top of
     the letter, deep at the foot */
  background:linear-gradient(180deg,#fff3cf 0%,#f2cd7a 42%,#c8913a 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* MINISTRY OF HEALTH (emergency-ed): sombre, his word. A cold graphite
   ground, the ministry's blue drained to steel for structure, and one
   muted emergency red kept for the headline's split - the button. The
   mark sits with its navy turned white and its star in its own colours. */
body.case-moh{
  --ground:#101418;
  --lift:#1a2128;
  --ink:#e6eaed;
  --accent:#7d9fae;
  --accent-2:#9e2f35;
  --highlight:#b6c8d0;
  --ink-soft:rgba(230,234,237,.20);
  --signal:rgba(125,159,174,.08);
  --field-a:rgba(125,159,174,.10);
  --field-b:rgba(158,47,53,.08);
}

/* OPEN (open-a-door): the installation itself, from the film. A dark
   exhibition hall, seven doors each lit a different colour, blue seats
   facing them. The seats' blue carries structure, the magenta of the
   centre door carries words, and the doors' colours spill faintly across
   the dark the way their light does in the hall. The film keeps its colour.
   Named "opendoor", not "open": body.case-open would collide with the
   .case-open door section. */
body.case-opendoor{
  --ground:#07080f;
  --lift:#11142a;
  --ink:#f1f1f6;
  --accent:#3f74ff;
  --accent-2:#ff2f9a;
  --highlight:#ff5cb4;
  --ink-soft:rgba(241,241,246,.22);
  --signal:rgba(63,116,255,.12);
}
body.case-opendoor::before{
  background:
    /* the orange door was here and read as brown on the dark: faint warm
       light on near-black always does. Blue and violet stay light. */
    radial-gradient(ellipse 34% 22% at 8% 6%,   rgba(40,160,255,.20), transparent 70%),
    radial-gradient(ellipse 34% 24% at 92% 10%, rgba(150,70,255,.22), transparent 70%),
    radial-gradient(ellipse 40% 22% at 50% 44%, rgba(255,47,154,.14), transparent 70%),
    radial-gradient(ellipse 34% 22% at 6% 72%,  rgba(80,210,90,.14),  transparent 70%),
    radial-gradient(ellipse 36% 24% at 94% 86%, rgba(63,116,255,.20), transparent 70%),
    linear-gradient(180deg, var(--ground), var(--lift));
}

/* the three "Open..." phrases are a set: a line may break between them,
   never inside one (his note: "Open your / mind." read as cut) */
body.case-opendoor .case-body .nw{ white-space:nowrap; }
/* subheading in the violet of the purple door, sampled from the film
   frame where the light hits it. The seats' blue read weak there, and
   the softer lavender (#bc79ec) from the same door lost to this. */
body.case-opendoor .case-wordmark{ color:#d848ff; }

/* HLS & CYBER: the expo's own site. Its ground is #091551 and its ring
   motif sweeps royal blue to spring green, so the page splits the two
   the way the ring does - blue on the structure, green on the words,
   and the headline's glitch tears between them. */
body.case-hls{
  --ground:#0a1450;
  --ink:#eaeefb;
  --accent:#2fd08a;
  --accent-2:#5b8cff;
  --highlight:#7fb0ff;
  --ink-soft:rgba(234,238,251,.24);
  --lift:#17266f;
}
/* The ring on the expo's own site sweeps blue to green, so the door does
   the same thing: blue entering at the top left, green leaving at the
   bottom right, over their navy. This replaces the default door gradient
   rather than adding to it - the warm amber glow the other cases carry
   would sit between the two and turn the sweep muddy. */
body.case-hls .case-open{
  background:
    radial-gradient(ellipse 62% 55% at 2% 0%, rgba(91,140,255,.42), transparent 60%),
    radial-gradient(ellipse 90% 90% at 99% 100%, rgba(47,208,138,.38), transparent 66%),
    linear-gradient(148deg, #16256e 0%, #0a1450 44%, #0b4340 100%);
}
/* The film and the story carry the sweep on, the other way round: green
   enters at the top right where the opening section's green left off,
   blue carries it down and out.

   This hangs off the content, not off <body>. On <body> it was anchored
   to the viewport, so the green stayed pinned to the top edge of the
   screen and never reached the part of the page you were actually
   reading. The ::before is pulled out to the full window width, because
   .wrap is capped at 1280px and a gradient stopping at that cap reads as
   a band down the middle rather than as a ground. */
body.case-hls .case-open + .wrap{ position:relative; }
body.case-hls .case-open + .wrap::before{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  background:
    radial-gradient(ellipse 75% 55% at 2% 68%, rgba(47,208,138,.55), transparent 70%),
    radial-gradient(ellipse 85% 45% at 98% 0%, rgba(91,140,255,.34), transparent 64%),
    linear-gradient(200deg, #101f63 0%, #0a1450 55%, #0b3230 100%);
}

/* MED IN ISRAEL: straight off a frame of the film. The hall is lit blue,
   the chevron structure is blue, and the only other colour in the place
   is the magenta of the caption bars. Two colours, so the page sweeps
   between them the way hls-cyber sweeps blue to green. */
body.case-med{
  --ground:#0a1a3a;
  --ink:#f2f4fb;
  --accent:#ff2e93;
  --accent-2:#3f9de0;
  --highlight:#ff74b8;
  --ink-soft:rgba(242,244,251,.24);
  --lift:#16336e;
}
/* ONE field, painted once across the whole document, with the opening
   section left transparent so it sits in the same light as everything
   below it. Painting the opening and the story separately produced a
   hard seam where one ended and the other began, and the page read as
   two unrelated pieces stacked on top of each other. */
body.case-med{ position:relative; }
body.case-med::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 85% 34% at 0% 3%, rgba(63,157,224,.48), transparent 60%),
    radial-gradient(ellipse 95% 40% at 104% 26%, rgba(255,46,147,.44), transparent 64%),
    radial-gradient(ellipse 95% 34% at 0% 74%, rgba(255,46,147,.24), transparent 66%),
    linear-gradient(168deg, #16336e 0%, #0b1c40 40%, #2a1140 100%);
}
body.case-med .case-open{ background:none; }

/* ADIDAS: three white bars on black, and nothing else. The brand carries
   no colour, so neither does the page - the accent IS the ink, and the
   ambient glow that follows the cursor drops the site's red for a white
   one. The ground goes to near-black and the lift with it: the default
   dark grey read as washed out beside a mark this stark. */
body.case-adidas{
  --ground:#050505;
  --lift:#151515;
  --ink:#f2f1ec;
  --accent:#f2f1ec;
  --accent-2:#8f8f8f;
  --highlight:#ffffff;
  --ink-soft:rgba(242,241,236,.20);
  --field-a:rgba(255,255,255,.06);
  --field-b:transparent;
  --signal:rgba(255,255,255,.07);
}

/* ISRAEL 70: the flag's tchelet, never the flag. A deep blue ground with
   two lighter blues over it, one for structure and one for words, and the
   flag's own deep blue held back for the glitch split on the headline.
   No white-blue-white banding anywhere: quoting the flag directly would
   be a costume, and the brief was the colour, not the symbol. */
body.case-israel70{
  --ground:#0a3d80;
  --ink:#eef6ff;
  --accent:#4fb3e8;
  --accent-2:#0038b8;
  --highlight:#7fd6ff;
  --ink-soft:rgba(238,246,255,.24);
  --lift:#1560b4;
  --field-a:rgba(79,179,232,.24);
  --field-b:rgba(0,56,184,.20);
}
/* On a blue this bright, the usual 65% client line lets the blue through
   and the accent-blue subheading sinks into it. Both lifted (elections,
   2026-09-19): the credit near full ink, the subheading to the paler
   highlight blue. */
body.case-israel70 .case-client{ opacity:.92; }
body.case-israel70 .case-wordmark{ color:var(--highlight); }

/* OLIVE / VIDEO PROJECTION: army colours without the army. A deep olive
   ground, sand for structure, a paler wheat for words. No red anywhere, no
   camouflage, nothing that reads as uniform or combat: the palette of a
   field, not of a war. The cursor glow drops the site's red for sand. */
body.case-olive{
  --ground:#1c2014;
  --lift:#353b22;
  --ink:#f1eee2;
  --accent:#c9b98a;
  --accent-2:#6e7a48;
  --highlight:#e8dcae;
  --ink-soft:rgba(241,238,226,.22);
  --signal:rgba(201,185,138,.08);
  --field-a:rgba(201,185,138,.14);
  --field-b:rgba(110,122,72,.18);
}

/* SHEBA / COVID: the hospital's own indigo, teal and pink. Ground is
   the indigo; teal carries the rules and buttons; the pink is kept
   for words, where it reads as emphasis rather than decoration. */
body.case-sheba{
  --ground:#0c1338;
  --ink:#eef1f7;
  --accent:#00b394;
  --accent-2:#e5346e;
  --highlight:#ff4d86;
  --ink-soft:rgba(238,241,247,.22);
  --lift:#1b2a6b;
  --field-a:rgba(0,179,148,.16);
  --field-b:rgba(229,52,110,.14);
}