/* =========================================================================
   Di Lecce Studio, home page: "Chaptered editorial" (v3).
   Premium-minimal in the site's own colours. Each chapter is a hard cut onto its
   own ground (#141418 "paper" or #0b0b0d "ink"); a folio in the margin carries the
   chapter numeral and title; media always sits in its own column with a caption.
   Behaviour: assets/editorial/editorial.js. Hero, splash and showreel player keep the
   original rules (assets/editorial/legacy-hero.css, extracted verbatim).
   ========================================================================= */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-200-800-w80-100-latin.woff2") format("woff2");   /* 44 KB subset: every weight/width/glyph the site uses */
  font-weight: 200 800;
  font-stretch: 80% 100%;
  font-display: swap;
}

:root {
  --ink: #0b0b0d;            /* ground */
  --paper: #141418;          /* card colour, used as the alternate chapter ground */
  --text: #f2f2f2;
  --soft: #a0a0a0;           /* 7.5:1 on ink, 7.0:1 on paper */
  --accent: #ffb54c;
  --accent-ink: #0b0b0d;
  --blue: #78c8ff;           /* used once: the "Graded" state of the film */
  --hair: rgba(255, 255, 255, 0.12);
  --hair-soft: rgba(255, 255, 255, 0.07);

  --f-display: "Archivo", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-text: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;

  /* 4px spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;

  --rail: 0px;
  --g: clamp(20px, 4vw, 56px);
  --colgap: clamp(16px, 1.7vw, 24px);
  --chap: clamp(88px, 13vh, 160px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --r-media: 3px;
}
@media (min-width: 901px) {
  :root { --rail: 72px; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 1px; }
input, textarea { caret-color: var(--accent); }

.edSkip {
  position: fixed; left: var(--s4); top: var(--s4); z-index: 10001;
  padding: var(--s2) var(--s4); background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 600; transform: translateY(-200%);
}
.edSkip:focus-visible { transform: none; }

.dOnly { display: inline; }
.mOnly { display: none; }
@media (max-width: 640px) {
  .dOnly { display: none; }
  .mOnly { display: inline; }
}

/* ------------------------------------------------------------------ type */
.edH1, .edH2, .edH3, .edQuote, .edRv__q, .edMark, .edPlate__t, .edIndex__t, .edBen__h {
  font-family: var(--f-display);
  font-stretch: 92%;
}
.edH1 {
  margin: 0;
  font-size: clamp(2.5rem, 5.6vw, 6rem);
  font-weight: 480;
  line-height: 0.98;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.edH2 {
  margin: 0;
  font-size: clamp(2.1rem, 4.1vw, 4.25rem);
  font-weight: 460;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.edH3 {
  margin: 0;
  font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.edSmall {
  margin: 0;
  font-family: var(--f-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}
.edLead {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1.06rem, 1.2vw, 1.2rem);
  line-height: 1.62;
  color: var(--soft);
  text-wrap: pretty;
}
.edQuote {
  margin: 0;
  font-size: clamp(1.7rem, 2.75vw, 2.85rem);
  font-weight: 330;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* links: running-text calls to action, never button islands */
.edLink {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}
.edLink--cta {
  font-family: var(--f-display);
  font-stretch: 92%;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.edLink--cta::after {
  content: "";
  display: inline-block;
  width: 0.55em; height: 0.55em;
  margin-left: 0.45em;
  border-top: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
  transform: translateY(-0.06em) rotate(45deg);
  transition: transform 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .edLink:hover { color: var(--accent); }
  .edLink--cta:hover::after { transform: translate(0.18em, -0.06em) rotate(45deg); }
}
.edLink:active { transform: translateY(1px); }

.edBtnText {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer;
  font-family: var(--f-text);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hair);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.42em;
  transition: text-decoration-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .edBtnText:hover { text-decoration-color: var(--accent); }
}
.edBtnText:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ chapters */
.edMain { position: relative; z-index: 4; }   /* the title page slides over the fixed hero film */
.edCh {
  position: relative;
  padding-block: var(--chap);
}
.edCh--paper { background: var(--paper); }
.edCh--ink { background: var(--ink); }
.edColophon { position: relative; z-index: 4; }

.edWrap {
  max-width: calc(1320px + var(--rail) + 2 * var(--g));
  margin: 0 auto;
  padding-inline: calc(var(--rail) + var(--g)) var(--g);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
}
.edWrap > * { grid-column: 1 / -1; min-width: 0; }

/* the intertitle: numeral + a hairline drawn across the page at the cut */
.edInter {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: clamp(48px, 8vh, 96px);
}
.edInter__n {
  font-family: var(--f-display);
  font-stretch: 100%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
}
.edInter__rule {
  flex: 1;
  height: 1px;
  background: var(--hair);
  transform-origin: 0 50%;
}
html.edm .edInter__rule, html.edp .edInter__rule {
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}
html.edm .edInter.is-in .edInter__rule, html.edp .edInter.is-in .edInter__rule { transform: none; }

/* entrances: rise 14px + fade, once, in reading order */
html.edm [data-in], html.edp [data-in] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.edm [data-in].is-in, html.edp [data-in].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ masthead (inside the frontispiece) */
.edMast {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px var(--g) 0;
  pointer-events: none;
}
.edMast::before {   /* scrim only under the masthead band, never the whole frame */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 132px;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.62), rgba(8, 8, 10, 0));
  pointer-events: none;
  z-index: -1;
}
.edMast > * { pointer-events: auto; }
.edMark {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.edMark small {
  display: block;
  margin-top: 3px;
  font-family: var(--f-text);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(242, 242, 242, 0.78);
}
.edMast__nav { display: flex; gap: clamp(18px, 2.2vw, 34px); padding-top: 3px; }
.edMast__nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  padding: 6px 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.6em;
  transition: text-decoration-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .edMast__nav a:hover { text-decoration-color: var(--text); }
}
.edMast__nav .edMast__contact { color: var(--accent); margin-left: clamp(4px, 1vw, 16px); }
@media (max-width: 900px) {
  .edMast { padding-top: 18px; }
  .edMast__nav .edMast__contact { padding: 6px 10px; margin: -6px -10px 0 0; border-radius: 2px; background: rgba(11, 11, 13, 0.86); text-shadow: none; }
  .edMast__nav a:not(.edMast__contact) { display: none; }
}

/* ------------------------------------------------------------------ folio (margin) */
.edFolio {
  position: fixed;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms;
}
.edFolio.is-on { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-out), visibility 0s; }
.edFolio__btn {
  appearance: none; background: none; border: 0; margin: 0; cursor: pointer;
  color: var(--soft);
}
.edFolio__n {
  font-family: var(--f-display);
  font-size: 12px; font-weight: 650; letter-spacing: 0.12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.edFolio__t, .edFolio__idx, .edFolio__contact {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.edFolio__contact { color: var(--accent); }
.edFolio__idx { color: var(--text); }

@media (min-width: 901px) {
  .edFolio {
    inset: 0 auto 0 0;
    width: var(--rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 0 28px;
    border-right: 1px solid var(--hair-soft);
  }
  .edFolio__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 4px 10px 22px;
    width: 100%;
  }
  .edFolio__t, .edFolio__idx, .edFolio__contact {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }
  .edFolio__t { transition: color 160ms var(--ease-out); }
  .edFolio__idx { margin-top: auto; padding: 6px 0; border-left: 0; }
  .edFolio__contact { padding: 10px 6px; }
  @media (hover: hover) and (pointer: fine) {
    .edFolio__btn:hover .edFolio__t { color: var(--text); }
    .edFolio__btn:hover .edFolio__idx { color: var(--accent); }
    .edFolio__contact:hover { color: var(--text); }
  }
  .edIndex {
    position: fixed;
    inset: 0 auto 0 var(--rail);
    width: min(440px, 80vw);
    padding: 22vh 48px 48px;
    background: var(--paper);
    border-right: 1px solid var(--hair);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
  }
}
@media (max-width: 900px) {
  .edFolio {
    inset: auto 0 0 0;
    height: calc(52px + env(safe-area-inset-bottom, 0px));
    padding: 0 var(--s4) env(safe-area-inset-bottom, 0px);
    display: flex;
    align-items: center;
    gap: var(--s4);
    background: var(--ink);
    border-top: 1px solid var(--hair);
  }
  .edFolio__btn {
    flex: 1;
    min-width: 0;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    text-align: left;
  }
  .edFolio__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
  .edFolio__idx { padding: 5px 9px; border: 1px solid var(--hair); border-radius: 2px; }
  .edFolio__contact { display: flex; align-items: center; height: 52px; padding-left: var(--s4); border-left: 1px solid var(--hair); }
  .edIndex {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    max-height: 72vh;
    overflow: auto;
    padding: var(--s5) var(--g) var(--s6);
    background: var(--paper);
    border-top: 1px solid var(--hair);
  }
  .edColophon { padding-bottom: calc(var(--chap) * 0.6 + 52px + env(safe-area-inset-bottom, 0px)); }
}
.edIndex[hidden] { display: none; }
.edIndex.is-open { animation: edIndexIn 220ms var(--ease-out); }
@keyframes edIndexIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  @keyframes edIndexIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.edIndex__list { list-style: none; margin: 0; padding: 0; }
.edIndex__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: 10px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.edIndex__n {
  min-width: 3em;
  font-family: var(--f-display);
  font-size: 12px; font-weight: 650; letter-spacing: 0.12em;
  color: var(--soft);
}
.edIndex__t { font-size: clamp(1.25rem, 1.8vw, 1.7rem); font-weight: 420; letter-spacing: -0.015em; line-height: 1.2; }
.edIndex__list a[aria-current="true"] .edIndex__n { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .edIndex__list a:hover .edIndex__t { color: var(--accent); }
}

/* ------------------------------------------------------------------ hero (client exception B) */
/* The original before/after film stays at the top, fixed, untouched. Only the nav bar is gone. */
.heroWrap { z-index: 2; }

/* ------------------------------------------------------------------ I. title page */
#introTopSentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.edTitle { min-height: 100vh; min-height: 100svh; padding-top: clamp(72px, 11vh, 128px); box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.35); }
.edTitle__head { grid-column: 1 / span 12; }
.edTitle__eyebrow { margin-bottom: var(--s5); }
.edLine { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.edLine > span { display: inline-block; }
html.edm .edLine > span, html.edp .edLine > span {
  transform: translateY(104%);
  transition: transform 1s var(--ease-out);
}
html.edm .edLine:nth-of-type(2) > span, html.edp .edLine:nth-of-type(2) > span { transition-delay: 90ms; }
html.edm .edTitle.is-in .edLine > span, html.edp .edTitle.is-in .edLine > span { transform: none; }

.edTitle__reel { grid-column: 3 / span 8; grid-row: 3; margin: clamp(40px, 6vh, 72px) 0 0; }
.edTitle__cta { grid-column: 3 / span 8; grid-row: 4; justify-self: center; margin: clamp(28px, 4vh, 44px) 0 0; }
.edCap {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--soft);
}
.edCap strong { font-weight: 600; color: var(--text); }
.edCap__bar { width: 28px; height: 2px; background: var(--accent); }
.edTitle .playerShell {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-media);
  border: 1px solid var(--hair);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  margin-top: 0;
}
@media (max-width: 900px) {
  .edTitle { min-height: 0; }
  .edTitle__reel { grid-column: 1 / -1; grid-row: auto; }
  .edTitle__cta { grid-column: 1 / -1; grid-row: auto; margin-top: var(--s6); }
}

/* ------------------------------------------------------------------ II. selected work */
.edWork__h { margin-bottom: clamp(36px, 6vh, 64px); }
.edWorkClamp { position: relative; }
.edPlates {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
  row-gap: clamp(32px, 4.5vh, 48px);
}
.edPlate { grid-column: span 3; }
.edPlate--mid { grid-column: span 4; }
.edPlate--big { grid-column: span 6; }
.edPlate__a { display: block; }
.edPlate__img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-media);
  background: #18181d;
}
.edPlate__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out), opacity 300ms var(--ease-out);
}
.edPlate__t {
  display: block;
  margin-top: var(--s3);
  font-size: 15px;
  font-weight: 520;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--text);
}
.edPlate--big .edPlate__t { font-size: clamp(1.05rem, 1.3vw, 1.25rem); }
.edPlate--mid .edPlate__t { font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .edPlate__a:hover .edPlate__img img { transform: scale(1.035); }
  .edPlate__a:hover .edPlate__t { color: var(--accent); }
}
/* collapsed at first paint (CSS only, so nothing below moves when the script arrives):
   desktop 9 works + the top of the next row, phones 6 + the top of the next row */
html.edjs .edWorkClamp:not(.is-open) .edPlates {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 130px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 130px), transparent 100%);
}
html.edjs .edWorkClamp:not(.is-open) .edPlate:nth-child(n+10) { max-height: 104px; overflow: hidden; }
html.edjs .edWorkClamp:not(.is-open) .edPlate:nth-child(n+14) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; }   /* out of layout, still in the page (inert) */
.edWorkMore { margin-top: var(--s6); }
html:not(.edjs) .edWorkMore, .edWorkClamp.is-open .edWorkMore { display: none; }
@media (max-width: 900px) {
  html.edjs .edWorkClamp:not(.is-open) .edPlate:nth-child(n+7) { max-height: 76px; overflow: hidden; }
  html.edjs .edWorkClamp:not(.is-open) .edPlate:nth-child(n+9) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; }
  .edPlate, .edPlate--mid { grid-column: span 6; }
  .edPlate--big { grid-column: span 12; }
  .edPlate--mid .edPlate__t { font-size: 15px; }
}
@media (max-width: 520px) {
  .edPlates { row-gap: 28px; }
  .edPlate__t, .edPlate--mid .edPlate__t { font-size: 14px; }
}

/* ------------------------------------------------------------------ III. case study */
.edCase__copy { grid-column: 1 / span 5; align-self: center; padding-right: var(--s5); }
.edCase__who { margin-bottom: var(--s5); }
.edCase__q { min-height: var(--qH, auto); }
.edCase__cta { margin: var(--s6) 0 0; }
.edCase__media { grid-column: 6 / -1; margin: 0; }
.edCase__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-media);
  background: #101013;
}
.edSlide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-out); }
.edSlide.is-active { opacity: 1; }
.edSlide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.08);
}
.edCase__sel { display: flex; gap: var(--s2); margin-top: var(--s4); }
.edSel {
  appearance: none; background: none; border: 0; cursor: pointer;
  min-width: 36px; height: 36px;
  padding: 0 4px;
  display: flex; align-items: flex-end;
  color: var(--soft);
  font-family: var(--f-display);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.edSel span { display: block; width: 100%; padding-top: 10px; border-top: 1px solid var(--hair); text-align: left; transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.edSel[aria-pressed="true"] { color: var(--text); }
.edSel[aria-pressed="true"] span { border-top-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .edSel:hover { color: var(--text); }
}
@media (max-width: 900px) {
  .edCase__copy { grid-column: 1 / -1; padding-right: 0; order: 2; margin-top: var(--s6); }
  .edCase__media { grid-column: 1 / -1; order: 1; }
}

/* ------------------------------------------------------------------ IV. results and reviews */
.edReviews__h { margin-bottom: clamp(40px, 7vh, 80px); }
.edRvClamp__inner { display: block; }
.edRv { break-inside: avoid; }
.edRv__q { margin: 0; }
.edRv__q p {
  margin: 0;
  font-family: var(--f-display);
  font-stretch: 92%;
  font-size: clamp(1.2rem, 1.42vw, 1.42rem);
  font-weight: 380;
  line-height: 1.32;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.edRv__q strong { color: var(--accent); font-weight: 520; }
.edRv__by { margin: var(--s4) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.edRv__name { color: var(--text); font-weight: 650; }
.edRv__role::before, .edRv__sub::before { content: "·"; margin: 0 0.45em 0 0.2em; color: rgba(160, 160, 160, 0.6); }
.edRv__sub { display: block; }
.edRv__sub::before { content: none; }
.edRv__acts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; margin: var(--s4) 0 0; }
.edRv__link {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--soft);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.42em;
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .edRv__link:hover { color: var(--text); text-decoration-color: var(--hair); }
}
.edRv__full[hidden] { display: none; }

.edRv--lead {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
  padding-bottom: clamp(48px, 8vh, 88px);
  margin-bottom: clamp(48px, 8vh, 88px);
  border-bottom: 1px solid var(--hair);
}
.edRv--lead .edRv__q { grid-column: 1 / span 10; }
.edRv--lead .edRv__q p {
  font-size: clamp(1.75rem, 3.15vw, 3.2rem);
  font-weight: 320;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.edRv--lead .edRv__by, .edRv--lead .edRv__acts { grid-column: 1 / span 8; }
.edRv--lead .edRv__by { margin-top: var(--s6); }

.edRvCols {
  columns: 2;
  column-gap: clamp(32px, 3.4vw, 56px);
  column-rule: 1px solid var(--hair-soft);
}
.edRvCols .edRv { padding-bottom: clamp(40px, 5.5vh, 56px); }
.edRvMore { display: none; }
.edReviews__cta { margin: clamp(32px, 5vh, 56px) 0 0; }
@media (max-width: 1180px) { .edRvCols { columns: 2; } }
@media (max-width: 900px) {
  .edRv--lead .edRv__q, .edRv--lead .edRv__by, .edRv--lead .edRv__acts { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* the client's phone edit, kept: name + quote + Read full review only */
  .edRv__link, .edRv__role, .edRv__sub, .edReviews__cta { display: none; }
  .edDialog .edRv__link, .edDialog .edRv__role { display: inline; }
  .edDialog .edRv__sub { display: block; }
  .edRvCols { columns: 1; column-rule: 0; }
  .edRvCols .edRv { padding-top: var(--s6); border-top: 1px solid var(--hair-soft); }
  .edRvCols .edRv:first-child { border-top: 0; padding-top: 0; }
  .edRvMore { display: block; margin-top: var(--s5); }
  html:not(.edjs) .edRvMore { display: none; }
  html.edjs .edRvClamp:not(.is-open) .edRvClamp__inner {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 110px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 calc(100% - 110px), transparent 100%);
  }
  html.edjs .edRvClamp:not(.is-open) .edRvCols .edRv:nth-child(2) { max-height: 120px; overflow: hidden; padding-bottom: 0; }
  html.edjs .edRvClamp:not(.is-open) .edRvCols .edRv:nth-child(n+3) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; }
}

/* review dialog */
.edDialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: var(--r-media);
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.edDialog[open] { display: flex; flex-direction: column; animation: edDlgIn 220ms var(--ease-out); }
@keyframes edDlgIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.edDialog::backdrop { background: rgba(5, 5, 7, 0.82); }
.edDialog__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5);
  padding: var(--s6) clamp(20px, 4vw, 48px) var(--s5);
  border-bottom: 1px solid var(--hair-soft);
}
.edDialog__who .edRv__by { margin: 0; font-size: 14px; }
.edDialog__who .edRv__name { display: block; font-family: var(--f-display); font-stretch: 92%; font-size: 1.6rem; font-weight: 480; letter-spacing: -0.02em; margin-bottom: var(--s1); }
.edDialog__who .edRv__role::before { content: none; }
.edDialog__close { flex: none; padding: 8px 0; }
.edDialog__body {
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--s5) clamp(20px, 4vw, 48px) var(--s7);
  font-size: 17px; line-height: 1.7;
}
.edDialog__body p { margin: 0 0 1em; max-width: 66ch; }
.edDialog__body em { color: var(--soft); }
.edDialog__body .edRv__link { color: var(--accent); }
html.edDialogOpen { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .edDialog[open] { animation: none; } }

/* ------------------------------------------------------------------ V. process */
.edHow__head { grid-column: 1 / span 8; margin-bottom: clamp(48px, 8vh, 96px); }
.edHow__head .edKicker { margin-bottom: var(--s5); }
.edHow__head .edLead { margin-top: var(--s5); }
.edPhases { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.edPhase {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
  padding: clamp(32px, 5vh, 48px) 0;
  border-top: 1px solid var(--hair);
}
.edPhase:last-child { border-bottom: 1px solid var(--hair); }
.edPhase__num { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.edPhase__num span {
  display: inline-block;
  font-family: var(--f-display);
  font-stretch: 80%;
  font-size: clamp(4.5rem, 7vw, 7.5rem);
  font-weight: 200;
  line-height: 1;
  padding: 0.06em 0.04em 0.1em;
  margin-top: -0.12em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
html.edm .edPhase__num span, html.edp .edPhase__num span {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 900ms var(--ease-out) 120ms;
}
html.edm .edPhase.is-in .edPhase__num span, html.edp .edPhase.is-in .edPhase__num span { clip-path: inset(0 0 0 0); }
.edPhase__head { grid-column: 3 / span 4; }
.edPhase__k { margin-bottom: var(--s3); }
.edPhase__sub { margin: var(--s2) 0 0; color: var(--soft); font-size: 15px; }
.edPhase__list { grid-column: 7 / -1; margin: 0; padding: 0; list-style: none; }
.edPhase__list li {
  position: relative;
  padding: 0 0 var(--s3) 22px;
  color: var(--text);
  line-height: 1.55;
}
.edPhase__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.78em;
  width: 10px; height: 1px;
  background: var(--soft);
}
.edPhase__more { grid-column: 7 / -1; margin-top: var(--s3); }
.edPhase__details {
  grid-column: 3 / -1;
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px dashed var(--hair);
  columns: 2;
  column-gap: clamp(32px, 3.4vw, 56px);
  color: var(--soft);
  font-size: 16px;
  line-height: 1.68;
}
.edPhase__details[hidden] { display: none; }
.edPhase__details p { margin: 0 0 1em; }
.edPhase__details h4 { margin: 1.2em 0 0.4em; color: var(--text); font-family: var(--f-display); font-stretch: 92%; font-size: 1.05rem; font-weight: 560; break-after: avoid; }
.edPhase__details h4:first-child { margin-top: 0; }
.edPhase__details ul { margin: 0 0 1em; padding-left: 1.1em; }
.edPhase__details li { margin-bottom: 0.3em; }
@media (max-width: 1100px) { .edPhase__details { columns: 1; } }
@media (max-width: 900px) {
  .edHow__head { grid-column: 1 / -1; }
  .edPhase__num { grid-column: 1 / -1; grid-row: auto; margin-bottom: var(--s3); }
  .edPhase__num span { font-size: 4rem; }
  .edPhase__head, .edPhase__list, .edPhase__more, .edPhase__details { grid-column: 1 / -1; }
  .edPhase__list { margin-top: var(--s5); }
}

/* ------------------------------------------------------------------ VI. impact (the peak) */
.edImp__media { grid-column: 1 / span 6; grid-row: 2; }
.edImp__text { grid-column: 8 / -1; grid-row: 2; padding-bottom: 40vh; }   /* the graded hold: the film rests fully graded before the chapter ends */
.edImp__head .edKicker { margin-bottom: var(--s5); }
.edImp__head .edLead { margin-top: var(--s5); }

.edFilm { margin: 0; position: sticky; top: max(48px, 11vh); }
.edFilm__frame {
  position: relative;
  height: min(72vh, 760px);
  min-height: 380px;
  border-radius: var(--r-media);
  background: #101013;
  --gy: 0px;
}
.edFilm__poster, .edFilm__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: var(--r-media);
}
.edFilm__poster { object-fit: cover; object-position: var(--fx, 40%) 50%; }
.edFilm__poster--graded { clip-path: inset(0 0 calc(100% - var(--gy)) 0); }
.edFilm__poster--log { clip-path: inset(var(--gy) 0 0 0); }
.edFilm__canvas { opacity: 0; transition: opacity 400ms var(--ease-out); }
.edFilm.is-live .edFilm__canvas { opacity: 1; }
.edFilmVideo { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; left: 0; top: 0; }

.edFilm__line {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--accent);
  transform: translateY(var(--gy));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: opacity 200ms var(--ease-out);
}
.edFilm__line.is-end { opacity: 0; }
.edFilm__tag {
  position: absolute; left: var(--s4);
  font-size: 11px; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  background: rgba(11, 11, 13, 0.9);
}
.edFilm__tag--up { bottom: 8px; color: var(--blue); }
.edFilm__tag--down { top: 8px; color: var(--text); }
.edFilm__tag { transition: opacity 160ms var(--ease-out); }
.edFilm__line.no-up .edFilm__tag--up, .edFilm__line.no-down .edFilm__tag--down { opacity: 0; }

.edFilm__ruler {   /* in the margin beside the film, one station per benefit */
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: 0; bottom: 0; right: -52px;
  width: 44px;
  pointer-events: none;
}
.edFilm__tick {
  position: absolute;
  left: 0;
  flex-direction: row-reverse;
  top: calc((var(--i) + 0.5) / 6 * 100%);
  display: flex; align-items: center; gap: 6px;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--soft);
}
.edFilm__tick::after { content: ""; width: 14px; height: 1px; background: currentColor; }
.edFilm__tick.is-lit { color: var(--accent); }

.edFilm__cap { justify-content: space-between; margin: var(--s4) 0 0; }
.edFilm__title { color: var(--text); }
.edFilm__state { display: inline-flex; align-items: center; gap: var(--s2); }
.edFilm__state i { width: 7px; height: 7px; border-radius: 50%; background: var(--soft); transition: background-color 300ms var(--ease-out); }
.edFilm.is-graded .edFilm__state i { background: var(--blue); }
.edFilm.is-graded .edFilm__stateT { color: var(--blue); }

.edBens { list-style: none; margin: clamp(40px, 7vh, 72px) 0 0; padding: 0; }
.edBen {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  column-gap: var(--s3);
  padding: clamp(56px, 11vh, 120px) 0;
  border-top: 1px solid var(--hair-soft);
}
.edBen__n {
  grid-row: 1 / span 2;
  font-family: var(--f-display);
  font-size: 12px; font-weight: 650; letter-spacing: 0.08em;
  color: var(--soft);
  padding-top: 0.55em;
  transition: color 300ms var(--ease-out);
}
.edBen__n::before { content: attr(data-n); }
.edBen.is-read .edBen__n { color: var(--accent); }
.edBen__h {
  display: block;
  font-size: clamp(1.4rem, 1.9vw, 1.95rem);
  font-weight: 480;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.edBen__d { display: block; margin-top: var(--s3); color: var(--soft); max-width: 46ch; line-height: 1.62; }
.edBenMore { display: none; }

@media (max-width: 900px) {
  .edImp__text { display: contents; padding-bottom: 0; }
  .edImp__head { grid-column: 1 / -1; order: 1; }
  .edImp__media { grid-column: 1 / -1; grid-row: auto; order: 2; margin-top: var(--s7); }
  .edBenClamp { grid-column: 1 / -1; order: 3; }
  .edFilm { position: relative; top: auto; margin-inline: calc(-1 * var(--g)); }
  .edFilm__frame { height: auto; min-height: 0; aspect-ratio: 4 / 3; border-radius: 0; }
  .edFilm__poster, .edFilm__canvas { border-radius: 0; }
  .edFilm__cap { padding-inline: var(--g); }
  .edFilm__ruler { display: none; }
  .edBens { margin-top: var(--s5); }
  .edBen { padding: var(--s7) 0; }
}
@media (max-width: 640px) {
  /* the client's phone edit, kept: no lead on phones, four benefits until "Show all benefits" */
  .edImp__head .edLead { display: none; }
  .edBenMore { display: block; margin-top: var(--s4); }
  html:not(.edjs) .edBenMore { display: none; }
  html.edjs .edBenClamp:not(.is-open) .edBen:nth-child(n+5) { display: none; }
  .edFilm__frame { aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------------------------ VII. about */
.edAbout__media { grid-column: 1 / span 5; margin: 0; align-self: start; }
.edAbout__frame { overflow: hidden; border-radius: var(--r-media); aspect-ratio: 4 / 5; background: #18181d; }
.edAbout__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); }
.edAbout__copy { grid-column: 7 / -1; }
.edAbout__copy .edKicker { margin-bottom: var(--s5); }
.edAbout__copy .edLead { margin-top: var(--s5); }
.edHigh { list-style: none; margin: var(--s7) 0 0; padding: 0; }
.edHigh li {
  display: grid;
  grid-template-columns: minmax(7.5em, 0.32fr) 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--hair);
}
.edHigh li:last-child { border-bottom: 1px solid var(--hair); }
.edHigh__k { font-family: var(--f-display); font-stretch: 92%; font-weight: 520; font-size: 1.08rem; letter-spacing: -0.005em; }
.edHigh__v { color: var(--soft); }
.edAbout__proof { margin: var(--s6) 0 0; color: var(--soft); max-width: 60ch; }
.edAbout__cta { margin: var(--s7) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5); }
.aboutCTANote { color: var(--soft); font-size: 15px; max-width: 46ch; }
@media (max-width: 900px) {
  .edAbout__media { grid-column: 1 / span 9; }
  .edAbout__copy { grid-column: 1 / -1; margin-top: var(--s7); }
}
@media (max-width: 640px) {
  .edHigh li { grid-template-columns: 1fr; gap: var(--s1); }
  .edHigh .mOnly, .aboutCTANote .mOnly { display: block; }
}

/* ------------------------------------------------------------------ colophon (#contact + footer) */
.edColophon { padding-block: clamp(72px, 11vh, 128px) clamp(40px, 6vh, 64px); }
.edCol__mast { grid-column: 1 / span 5; }
.edMark--col { font-size: 13px; }
.edCol__claim { margin: var(--s4) 0 0; color: var(--soft); font-size: 15px; max-width: 34ch; }
.edCol__col { grid-column: span 3; }
.edCol__col--contact { grid-column: 7 / span 3; }
.edCol__h { margin-bottom: var(--s4); font-size: 11px; }
.edCol__mail { margin: 0 0 var(--s3); }
.edCol__mail .edLink--cta { font-size: clamp(1.05rem, 1.25vw, 1.2rem); word-break: break-word; }
.edCol__list { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.edCol__list li { padding: 3px 0; }
.edCol__list a { color: var(--soft); transition: color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .edCol__list a:hover { color: var(--text); }
}
.edCol__legal {
  margin: clamp(56px, 9vh, 96px) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--hair-soft);
  font-size: 12.5px;
  color: var(--soft);
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .edCol__mast { grid-column: 1 / -1; margin-bottom: var(--s7); }
  .edCol__col, .edCol__col--contact { grid-column: span 6; }
}
@media (max-width: 520px) {
  .edCol__col, .edCol__col--contact { grid-column: 1 / -1; margin-bottom: var(--s6); }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 900px) {
  .edWrap { padding-inline: var(--g); }
  .edH1 { font-size: clamp(2.2rem, 9.2vw, 3.6rem); line-height: 1.02; }
  .edH2 { font-size: clamp(1.95rem, 7.6vw, 3rem); }
  .edInter { margin-bottom: var(--s7); }
  .edTitle { padding-top: var(--s9); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
}

/* ------------------------------------------------------------------ reduced motion: static and complete */
@media (prefers-reduced-motion: reduce) {
  .edSlide { transition: none; }
  .edPlate__img img, .edLink--cta::after { transition: none; }
  .edSlide img, .edAbout__img { transform: none; }
}


/* =========================================================================
   MOBILE PASS (2026-11-07). Findings by perf-a (performance) and ux-b (mobile UX), decided and
   applied by the lead. Everything here is scoped to phones, coarse pointers, short landscape or
   no-hover, or has no effect on desktop (safe-area insets are 0 there). No text changes.
   ========================================================================= */

/* <picture> wrappers (WebP covers, slides, portrait) must not change the boxes they sit in */
.edPlate__img picture, .edSlide picture, .edAbout__frame picture { display: contents; }

/* collapsed work plates do not fetch their cover until "See full section" */
html.edjs .edWorkClamp:not(.is-open) .edPlate:nth-child(n+14) img { display: none; }
@media (max-width: 900px) {
  html.edjs .edWorkClamp:not(.is-open) .edPlate:nth-child(n+9) img { display: none; }
}

/* the phone hero's scroll runway is reserved before the script measures it: no layout shift (was 0.128) */
@media (max-width: 768px) {
  .heroWrap { --mobileHeroExtra: 87.5svh; }
  /* pinch-zoom stays available on the hero (pan-y alone blocked it) */
  .ba, .ba video, .ba .after, .ba .before, .ba .handle { touch-action: pan-y pinch-zoom; }
}

@media (max-width: 900px) {
  /* the colophon clears the bottom folio bar and the home indicator (the earlier rule was overridden) */
  .edColophon { padding-bottom: calc(clamp(40px, 6vh, 64px) + 52px + env(safe-area-inset-bottom, 0px)); }
  /* keyboard focus and in-page jumps never land under the bar */
  html { scroll-padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  /* chapter sheet: dynamic viewport height, its own scroll, and the page behind dimmed */
  .edIndex { max-height: 72dvh; overscroll-behavior: contain; box-shadow: 0 -50vh 0 50vh rgba(5, 5, 7, 0.62); }
  /* iPhone notch (landscape) and home indicator: viewport-fit=cover + safe-area padding */
  .edWrap { padding-left: max(var(--g), env(safe-area-inset-left, 0px)); padding-right: max(var(--g), env(safe-area-inset-right, 0px)); }
  .edMast { padding-left: max(var(--g), env(safe-area-inset-left, 0px)); padding-right: max(var(--g), env(safe-area-inset-right, 0px)); padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .edIndex { padding-left: max(var(--g), env(safe-area-inset-left, 0px)); padding-right: max(var(--g), env(safe-area-inset-right, 0px)); }
  .edFolio { padding-left: max(var(--s4), env(safe-area-inset-left, 0px)); padding-right: max(var(--s4), env(safe-area-inset-right, 0px)); }
  .edFilm { margin-left: calc(-1 * max(var(--g), env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(var(--g), env(safe-area-inset-right, 0px))); }
}
@media (min-width: 901px) {
  :root { --rail: calc(72px + env(safe-area-inset-left, 0px)); }
  .edFolio { padding-left: env(safe-area-inset-left, 0px); }
}
.edDialog { max-height: min(86dvh, 900px); }

/* touch targets: 44px hit areas on coarse pointers, nothing moves visually */
@media (pointer: coarse) {
  .edBtnText, .edLink--cta, .edRv__link, .edMast__nav a { position: relative; }
  .edBtnText::before, .edLink--cta::before, .edRv__link::before, .edMast__nav a::before {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .edCol__list li { padding: 0; }
  .edCol__list a { display: inline-block; padding: 10px 0; }
  .edSel { min-width: 44px; height: 44px; }
  .edDialog__close { min-width: 44px; min-height: 44px; padding: 0; margin: -4px -8px 0 0; text-align: right; }
  #videoModal .modalClose::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
  #videoModal .cpBtn { min-width: 44px; min-height: 44px; }
  #videoModal .cpProgress { align-self: stretch; }
  .edFolio__contact { min-width: 44px; justify-content: center; }
}

/* narrow phones: the folio title takes two lines instead of an ellipsis */
@media (max-width: 420px) {
  .edFolio__t { white-space: normal; line-height: 1.3; letter-spacing: 0.14em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .edFolio__idx { padding: 5px 7px; letter-spacing: 0.16em; }
  .edFolio { gap: var(--s3); }
  .edFolio__contact { padding-left: var(--s3); }
}

/* short landscape phones (844x390, 800x360, 568x320): every picture fits the screen */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 540px) {
  .edTitle__reel { justify-self: center; width: min(100%, calc((100svh - 52px - 88px) * 16 / 9)); }
  .edPlate--big { grid-column: span 6; }
  .edCase__copy { grid-column: 1 / span 6; order: 0; margin-top: 0; padding-right: var(--s5); align-self: center; }
  .edCase__media { grid-column: 7 / -1; order: 0; }
  .edFilm { margin-inline: auto; width: min(100%, calc((100svh - 52px - 72px) * 4 / 3)); }
  .edFilm__frame { aspect-ratio: 4 / 3; }
  .edFilm__cap { padding-inline: 0; }
  .edAbout__media { grid-column: 1 / span 4; }
  .edDialog { max-height: calc(100dvh - 24px); }
  .edDialog__head { padding-block: var(--s4) var(--s3); }
  .edDialog__who .edRv__name { font-size: 1.25rem; }
}

/* review dialog on small phones: more room for the review itself */
@media (max-width: 640px) {
  .edDialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .edDialog__head { padding: var(--s5) var(--s5) var(--s4); }
  .edDialog__who .edRv__name { font-size: 1.35rem; }
}

/* no sticky hover after a tap (the original player rules are not gated to hover devices) */
@media (hover: none) {
  .cpPlayOverlay:hover { transform: none; background: rgba(0, 0, 0, .55); }
  .cpBtn:hover { background: rgba(0, 0, 0, .35); }
}

/* phones: the hero now shows its poster at once, so the masthead scrim carries a little more density */
@media (max-width: 900px) {
  .edMast::before { height: 124px; background: linear-gradient(180deg, rgba(8, 8, 10, 0.8), rgba(8, 8, 10, 0)); }
}

/* no one-word last lines on sub-headings (secondary pages) */
.edH3 { text-wrap: balance; }