:root {
  --int-bg: #06070a;
  --int-raised: #0d0f14;
  --int-paper: #f4f1eb;
  --int-muted: #aaa9a5;
  --int-line: rgba(244, 241, 235, 0.18);
  --int-warm: #d6cab7;
  /* r89: Opus-orange accent — the same value the home universe carries. */
  --kls-accent: #fb5607;
  --kls-accent-rgb: 251 86 7;
  --int-display: "Playfair Display", Georgia, serif;
  --int-body: Helvetica, Arial, sans-serif;
  --int-pad: clamp(1.5rem, 4vw, 4.5rem);
  --int-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.definitive-interior {
  background: var(--int-bg);
  color: var(--int-paper);
  font-family: var(--int-body);
}

body.definitive-interior::before {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0.035;
  pointer-events: none;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.definitive-interior h1,
.definitive-interior h2,
.definitive-interior h3 {
  font-family: var(--int-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.definitive-interior .def-interior-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
  align-items: center;
  min-height: 5rem;
  padding: 0 var(--int-pad);
  border-bottom: 1px solid rgba(244, 241, 235, 0.08);
  background: rgba(6, 7, 10, 0.88);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

/* The course pages ship this static brand instead of the floating mark. It
   sits dead-centre like the docked mark on every other route - and it must
   NOT share column 1 with the links, which now live there. */
.definitive-interior .nav-brand {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 9.25rem;
}

.definitive-interior .nav-brand img { width: 100%; height: auto; }

/* The original mockup's header, same as the homepage now carries: links LEFT,
   the docked mark dead-CENTRE, CTA right. These links were living in column 2
   - exactly where the logo docks - so the mark sat invisible behind them. */
.definitive-interior .desktop-nav {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  gap: clamp(1.4rem, 2.8vw, 2.8rem);
}

.definitive-interior .desktop-nav > a,
.definitive-interior .nav-group > a,
.definitive-interior .nav-cta,
.definitive-interior .menu-toggle {
  position: relative;
  padding: 0.8rem 0;
  color: var(--int-paper);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.definitive-interior .desktop-nav a[aria-current="page"]::after,
.definitive-interior .nav-cta[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: 0.35rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
}

.definitive-interior .nav-group { position: relative; }

.definitive-interior .nav-submenu {
  position: absolute;
  top: calc(100% - 0.1rem);
  left: -1rem;
  width: 12.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--int-line);
  background: rgba(8, 9, 13, 0.98);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.4rem);
  transition: opacity 180ms ease, transform 280ms var(--int-ease);
}

.definitive-interior .nav-group:hover .nav-submenu,
.definitive-interior .nav-group:focus-within .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.definitive-interior .nav-submenu a {
  display: block;
  padding: 0.6rem 0;
  color: var(--int-muted);
  font-size: 0.77rem;
}

.definitive-interior .nav-submenu a:hover,
.definitive-interior .nav-submenu a:focus-visible { color: var(--int-paper); }

.definitive-interior .nav-cta {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  border-bottom: 1px solid var(--int-line);
}

.definitive-interior .menu-toggle { display: none; }

body.definitive-interior.project-open .site-nav.site-nav {
  border-bottom-color: transparent;
  background: transparent;
  pointer-events: none;
}

/* Round 28: the header is present on every interior page - a project is
   its own page and the nav is its chrome, phone included. */
body.definitive-interior.project-open .menu-toggle {
  opacity: 1;
}
.definitive-interior .site-nav {
  position: sticky;
  top: 0;
  z-index: 260;
  background: rgba(6, 7, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.definitive-interior.project-open .project-close {
  right: var(--int-pad);
  font-family: var(--int-body);
}

.definitive-interior .mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.55rem;
  padding: 7rem var(--int-pad) 3rem;
  background: rgba(6, 7, 10, 0.99);
}

.definitive-interior .mobile-menu[hidden] { display: none; }
.definitive-interior .mobile-menu a { font-family: var(--int-display); font-size: clamp(2.5rem, 9vw, 4.5rem); }

/* Round 14 item 2: the two-column `.photo-page-hero` fold that films.html and
   photo.html carried is retired. Both routes now open on the same centred
   `.lrn-` fold the Learn pages use, so there is one fold composition on the
   site instead of two. */

/* Round 18 item 13. The rail is sticky, and it was fully transparent with a
   single hairline under it - so once it lifted off the fold its chips floated
   loose over whatever card art was passing beneath, which is what read as a
   broken sliver. It now carries the ground with it and dissolves at its lower
   edge instead of ruling a line across the page. */
.archive-filter {
  position: sticky;
  z-index: 10;
  display: flex;
  gap: 0.55rem;
  padding: 1.2rem var(--int-pad) 1.35rem;
  overflow-x: auto;
  border-bottom: 0;
  background: linear-gradient(to bottom, #06070a 0%, #06070a 62%, rgba(6, 7, 10, 0) 100%);
  scrollbar-width: none;
}

.archive-filter::-webkit-scrollbar { display: none; }

/* Round 15: this rail is now the ONLY route to a category - the page no
   longer navigates - so a chip that sits off-screen behind a hidden
   scrollbar is a category the visitor never learns exists. Narrow screens
   wrap and centre instead of scrolling. */
@media (max-width: 700px) {
  .archive-filter {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    row-gap: 0.5rem;
  }
}

.archive-filter a {
  flex: 0 0 auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--int-line);
  border-radius: 100vw;
  color: var(--int-muted);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}

.archive-filter a:hover,
.archive-filter a:focus-visible,
.archive-filter a.is-active {
  background: var(--int-paper);
  color: var(--int-bg);
}

.definitive-interior .work-section,
.definitive-interior .photo-archive {
  padding-right: var(--int-pad);
  padding-left: var(--int-pad);
}

.definitive-interior .films-archive { padding-top: clamp(5rem, 9vw, 9rem); padding-bottom: 0; }
.definitive-interior .films-archive:last-child { padding-bottom: clamp(7rem, 11vw, 11rem); }

/* Round 18 items 14+15. The archive sat on its own opaque black and the footer
   field began right underneath it, so the two met on a hard horizontal edge -
   the "strong black line above the footer". It was only ever invisible on the
   All view because a full grid pushed the seam past where anyone looked. The
   section is transparent now, the page ground carries straight through, and
   the closing air scales with however many cards the filter left behind. */
.definitive-interior .films-archive,
.definitive-interior .work-section {
  position: relative;
  background: transparent;
}
/* r78: this second seam-gradient outranked the archive scrim removal by
   specificity and kept fading the LAST ROW of films on category pages.
   Gone for the same reason: the r78 bottom runway (own-black padding)
   carries the seam without painting over content. */
body.films-page .films-archive::after { content: none; }

.definitive-interior .work-intro {
  margin-bottom: 2.8rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--int-line);
}

.definitive-interior .work-intro h2 { font-size: clamp(3rem, 7vw, 7rem); font-weight: 400; }

.definitive-interior .campaign-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.8rem, 6vw, 7rem) clamp(0.8rem, 1.5vw, 1.5rem);
}

.definitive-interior .campaign-card {
  grid-column: span 6;
  color: var(--int-paper);
  text-align: left;
}

.definitive-interior .campaign-card:nth-child(5n + 1) { grid-column: span 8; }
.definitive-interior .campaign-card:nth-child(5n + 2) { grid-column: span 4; align-self: end; }

.definitive-interior .campaign-media { aspect-ratio: 16 / 9; background: var(--int-raised); }
.definitive-interior .campaign-still { filter: saturate(0.92); transition: transform 900ms var(--int-ease), filter 500ms ease; }
.definitive-interior .campaign-card:hover .campaign-still { transform: scale(1.035); filter: saturate(1.06); }

.definitive-interior .campaign-credit { padding-top: 0.85rem; }
.definitive-interior .campaign-title { font-family: var(--int-display); font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 400; }
.definitive-interior .campaign-client,
.definitive-interior .campaign-meta { color: var(--int-muted); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; }

.definitive-interior .archive-empty {
  max-width: 22ch;
  padding-bottom: clamp(5rem, 9vw, 9rem);
  color: var(--int-muted);
  font-family: var(--int-display);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1.05;
}

.definitive-interior .photo-archive {
  gap: clamp(0.55rem, 1vw, 1rem);
  padding-top: var(--int-pad);
  padding-bottom: clamp(7rem, 11vw, 11rem);
}

.definitive-interior .photo-archive-item { background: var(--int-raised); }

body.definitive-interior.contact-page .contact-compact {
  min-height: 100vh;
  padding: 11rem var(--int-pad) clamp(6rem, 10vw, 10rem);
}

body.definitive-interior.contact-page .contact-compact-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
  gap: clamp(4rem, 10vw, 12rem);
  width: 100%;
  max-width: none;
  margin: 0;
}

body.definitive-interior.contact-page .contact-compact .contact-intro {
  position: sticky;
  top: 10rem;
  display: block;
  align-self: start;
  justify-items: initial;
  max-width: none;
  margin: 0;
  text-align: left;
}
.definitive-interior .contact-kicker,
.definitive-interior .course-eyebrow { color: var(--int-muted); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }

body.definitive-interior.contact-page .contact-compact .contact-intro h1 {
  max-width: 11ch;
  margin: 1rem 0 2rem;
  font-family: var(--int-display);
  font-size: clamp(4rem, 7vw, 7.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: none;
}

body.definitive-interior.contact-page .contact-compact .contact-intro-lede {
  max-width: 31rem;
  margin: 0;
  color: var(--int-muted);
  font-size: 1.12rem;
  line-height: 1.55;
  text-wrap: initial;
}
body.definitive-interior.contact-page .contact-intro > .button { margin-top: 2rem; }

body.definitive-interior.contact-page .contact-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  padding: 0;
  border: 0;
  background: transparent;
}
body.definitive-interior.contact-page .contact-block .contact-form { gap: 0; padding: 0; border: 0; background: transparent; }
.definitive-interior .contact-field { padding: 1.2rem 0; border-bottom: 1px solid var(--int-line); }
.definitive-interior .contact-field label { color: var(--int-muted); font-size: 0.65rem; letter-spacing: 0.13em; text-transform: uppercase; }
.definitive-interior .contact-field input,
.definitive-interior .contact-field select,
.definitive-interior .contact-field textarea {
  padding: 0.8rem 0 0;
  border: 0;
  background: transparent;
  color: var(--int-paper);
  font-family: var(--int-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
}
.definitive-interior .contact-field select option { color: #111; }
.definitive-interior .contact-form button { margin-top: 2rem; }
.definitive-interior .contact-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--int-line); }
.definitive-interior .contact-route { min-height: 8rem; padding: 1.25rem; border-right: 1px solid var(--int-line); border-bottom: 1px solid var(--int-line); }

.definitive-interior .def-interior-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  padding: clamp(4rem, 8vw, 8rem) var(--int-pad) 2rem;
  border-top: 1px solid var(--int-line);
  background: var(--int-bg);
}
.definitive-interior .footer-logo { width: min(25rem, 55vw); }
.definitive-interior .footer-email { align-self: start; border-bottom: 1px solid var(--int-line); font-family: var(--int-display); font-size: clamp(1.3rem, 2vw, 2.1rem); }
.definitive-interior .footer-nav,
.definitive-interior .footer-social { display: flex; flex-wrap: wrap; gap: 1rem 2rem; color: var(--int-muted); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; }
.definitive-interior .footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 2rem; border-top: 1px solid var(--int-line); color: var(--int-muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1024px) {
  .definitive-interior .def-interior-nav { grid-template-columns: 1fr auto; }
  /* QA round 25: centred at 9.25rem the wordmark collided with MENU on
     phones. Left-set and smaller in the two-column mobile grid. */
  .definitive-interior .nav-brand {
    grid-column: 1;
    justify-self: start;
    width: 7rem;
  }
  .definitive-interior .desktop-nav,
  .definitive-interior .nav-cta { display: none; }
  .definitive-interior .menu-toggle { display: block; grid-column: 2; grid-row: 1; justify-self: end; border: 0; background: transparent; }
  body.definitive-interior.contact-page .contact-compact-inner { grid-template-columns: minmax(0, 1fr); }
  body.definitive-interior.contact-page .contact-compact .contact-intro { position: static; }
}

@media (max-width: 720px) {
  :root { --int-pad: 1.25rem; }
  .definitive-interior .campaign-grid { grid-template-columns: 1fr; gap: 3rem; }
  .definitive-interior .campaign-card:nth-child(n) { grid-column: 1; }
  body.definitive-interior.contact-page .contact-compact-inner { gap: 4rem; }
  body.definitive-interior.contact-page .contact-compact .contact-intro h1 { font-size: clamp(3.5rem, 17vw, 5.7rem); }
  .definitive-interior .contact-routes { grid-template-columns: 1fr; }
  .definitive-interior .def-interior-footer { grid-template-columns: 1fr; }
  .definitive-interior .footer-bottom { align-items: flex-start; flex-direction: column; gap: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .definitive-interior *, .definitive-interior *::before, .definitive-interior *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* August review pass 03: simplified work archive and centered inquiry flow. */
/* Split on purpose: an unsupported :has() in a selector LIST drops the
   whole rule in older Safari - taking the body fallback down with it. */
html:has(body.definitive-interior) { background: #06070a; color-scheme: dark; }
body.definitive-interior { background: #06070a; color-scheme: dark; }
body.definitive-interior::before { display: none; }
.definitive-interior .nav-cta { padding: 0.85rem 1.15rem; border: 1px solid var(--int-line); }

body.films-page .archive-filter {
  position: sticky;
  z-index: 10;
  top: 5rem;
  justify-content: center;
  padding: 1rem var(--int-pad);
  border: 0;
  background: rgba(6,7,10,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.films-page .archive-filter a { padding: .7rem .9rem; border: 0; }
body.films-page .archive-filter a.is-active { background: var(--int-paper); }
body.films-page .work-section { padding: 0; }
body.films-page .films-archive { padding-top: clamp(4rem, 7vw, 7rem); }
body.films-page .work-intro {
  margin: 0;
  padding: 0 var(--int-pad) 1.5rem;
  border: 0;
}
body.films-page .work-intro h2 { font-size: clamp(2.5rem, 5vw, 5rem); }
body.films-page .campaign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* r89 (Kyle at 30:27): "just creating a little more negative space
     between them" - the 2px seam becomes a real gutter, and the wall
     pulls in from the edges. */
  gap: clamp(10px, 1.1vw, 18px);
  padding: 0 clamp(10px, 2vw, 26px);
}
body.films-page .campaign-card:nth-child(n) { grid-column: auto; align-self: auto; }
body.films-page .campaign-media { aspect-ratio: 16 / 9; }
body.films-page .campaign-credit {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 1rem;
  left: 1.25rem;
  padding: 0;
  color: #fff;
  text-shadow: 0 2px 18px #000;
}
body.films-page .campaign-media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(5,6,9,.8), transparent 52%);
  pointer-events: none;
}
body.films-page .campaign-title { font-size: clamp(1.3rem, 2vw, 2.1rem); }

body.contact-page .contact-compact {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 10rem var(--int-pad) clamp(6rem, 9vw, 9rem);
}
body.definitive-interior.contact-page .contact-compact-inner {
  display: block;
  width: min(100%, 60rem);
  margin: 0 auto;
}
body.definitive-interior.contact-page .contact-compact .contact-intro {
  position: static;
  max-width: 44rem;
  margin: 0 auto clamp(4rem, 8vw, 7rem);
  text-align: center;
}
body.definitive-interior.contact-page .contact-compact .contact-intro h1 { max-width: none; }
body.definitive-interior.contact-page .contact-compact .contact-intro-lede { margin-inline: auto; }
body.definitive-interior.contact-page .contact-block { width: min(100%, 48rem); margin: 0 auto; gap: 4rem; }
body.definitive-interior.contact-page .contact-block .contact-form { width: 100%; }
.definitive-interior .contact-field { padding: 1.45rem 0; }
.definitive-interior .contact-field input,
.definitive-interior .contact-field select,
.definitive-interior .contact-field textarea { border-radius: 0; outline-offset: .35rem; }
.definitive-interior .contact-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; border: 0; }
.definitive-interior .contact-route { min-height: 0; padding: 0 0 1.2rem; border: 0; border-bottom: 1px solid var(--int-line); }

.definitive-interior .site-footer {
  display: grid;
  min-height: 24rem;
  grid-template-columns: 1.2fr .9fr 1fr .6fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(5rem, 8vw, 7rem) var(--int-pad) 1.5rem;
  border: 0;
  background:
    radial-gradient(circle at 15% 28%, rgba(224,232,255,.5) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 66%, rgba(247,234,210,.4) 0 1px, transparent 1.5px),
    radial-gradient(ellipse 60% 70% at 50% 40%, rgba(48,66,106,0), transparent 70%),
    #06070a;
  background-size: 210px 210px, 290px 290px, auto, auto;
}
.definitive-interior .site-footer .footer-logo { width: clamp(9rem, 14vw, 13rem); }
.definitive-interior .site-footer .footer-email { font-family: var(--int-body); font-size: .72rem; overflow-wrap: anywhere; }
.definitive-interior .site-footer .footer-nav { flex-direction: column; }
.definitive-interior .site-footer .footer-social { align-items: flex-start; flex-direction: column; }
.definitive-interior .site-footer .footer-bottom { grid-column: 1 / -1; align-self: end; }

@media (max-width: 720px) {
  body.films-page .archive-filter { justify-content: flex-start; }
  body.films-page .campaign-grid { grid-template-columns: 1fr; }
  .definitive-interior .contact-routes { grid-template-columns: 1fr; }
  .definitive-interior .site-footer { min-height: 30rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .definitive-interior .site-footer .footer-logo,
  .definitive-interior .site-footer .footer-bottom { grid-column: 1 / -1; }
  .definitive-interior .site-footer .footer-social { display: none; }
}

/* August site-wide release review: one shared, deliberate closing composition. */
body.definitive-interior.contact-page .contact-compact .contact-intro h1 {
  max-width: 100%;
  font-size: clamp(3.8rem, 6.2vw, 6.6rem);
  line-height: .94;
  text-wrap: balance;
}

.definitive-interior .site-footer,
.definitive-interior .def-interior-footer {
  display: flex;
  min-height: 28rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: clamp(4rem, 7vw, 5.5rem) var(--int-pad) 1.4rem;
  text-align: center;
}
.definitive-interior .site-footer .footer-logo {
  width: clamp(10rem, 14vw, 12.5rem);
  align-self: center;
  margin-bottom: .45rem;
}
.definitive-interior .site-footer .footer-email {
  align-self: center;
  border-bottom: 0;
  font-family: var(--int-body);
  font-size: .78rem;
  overflow-wrap: normal;
}
.definitive-interior .site-footer .footer-nav,
.definitive-interior .site-footer .footer-social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .7rem 1.3rem;
  text-align: center;
}
.definitive-interior .site-footer .footer-nav a,
.definitive-interior .site-footer .footer-social a {
  transition: opacity 180ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.definitive-interior .site-footer .footer-social a {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
}
.definitive-interior .site-footer .footer-nav a:hover,
.definitive-interior .site-footer .footer-social a:hover {
  opacity: .65;
  transform: translateY(-.15rem);
}
.definitive-interior .site-footer .footer-bottom {
  width: 100%;
  grid-column: auto;
  align-self: auto;
  margin-top: auto;
}

@media (max-width: 720px) {
  body.definitive-interior.contact-page .contact-compact .contact-intro h1 {
    font-size: clamp(3.35rem, 16vw, 5.5rem);
  }
}

@media (max-width: 620px) {
  .definitive-interior .site-footer,
  .definitive-interior .def-interior-footer {
    min-height: 32rem;
    gap: 1.25rem;
    padding-top: 3.75rem;
  }
  .definitive-interior .site-footer .footer-logo { width: min(12rem, 58vw); }
  .definitive-interior .site-footer .footer-nav { max-width: 18rem; }
  .definitive-interior .site-footer .footer-email {
    font-size: .82rem;
    white-space: nowrap;
  }
  .definitive-interior .site-footer .footer-bottom {
    align-items: center;
    flex-direction: column;
    gap: .45rem;
  }
}

/* Round 11 item 6: shared footer social marks are icons, not words. */
.definitive-interior .site-footer .footer-social {
  gap: 1.4rem;
}
.definitive-interior .site-footer .footer-social a {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: var(--int-muted, rgba(244, 241, 235, 0.62));
  transition: color 200ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.definitive-interior .site-footer .footer-social a svg {
  width: 100%;
  height: 100%;
}
.definitive-interior .site-footer .footer-social a:hover,
.definitive-interior .site-footer .footer-social a:focus-visible {
  color: #f4f1eb;
  opacity: 1;
  transform: translateY(-0.15rem);
}
/* styles.css sets `.footer-social svg { fill: currentColor }` for the old
   sprite icons, which filled these outlined marks solid. Scope the fill back
   to the shapes that are meant to carry it. */
.definitive-interior .site-footer .footer-social a svg { fill: none; }
.definitive-interior .site-footer .footer-social a svg [stroke] { fill: none; }
.definitive-interior .site-footer .footer-social a svg [fill="currentColor"] { fill: currentColor; }

/* ============================================================
   Round 12 - item 7: nav/header uniformity across all 7 routes.
   ============================================================ */

/* The clip. styles.css gives `.site-nav` overflow:hidden, which cropped every
   dropdown to the header's own 5rem box - only the first item was ever visible
   on an interior route. The homepage never showed the bug because the
   definitive sheet resets overflow there. */
.definitive-interior .site-nav,
.definitive-interior .def-interior-nav {
  overflow: visible;
}

/* The header must out-rank every route's content. Nothing on an interior page
   may open a stacking context above it. */
.definitive-interior .def-interior-nav { z-index: 80; }
.definitive-interior .nav-submenu { z-index: 2; }

/* The dock target sits in the centre column explicitly. With the links forced
   into column 1 above, leaving the slot to auto-placement would depend on grid
   placement order - stated, not inherited. */
.definitive-interior .nav-logo-slot {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

/* Above the glass. styles.css leaves the floating logo at z 21, which was fine
   against its own z-20 nav - but this sheet raised the interior nav to z 80
   with a solid backdrop-blurred fill, so the docked mark rendered BEHIND the
   glass: invisible, with only a blurred smear bleeding through. Same bug the
   homepage already fixed in definitive.css, same number here. */
.definitive-interior .floating-logo {
  z-index: 90;
  /* First-paint layout: BORN docked. styles.css leaves the anchor at the
     viewport's top-left corner until script.js positions it, which flashed the
     mark in the wrong place on every interior load. 2.8rem approximates the
     nav-row centre plus the dock's optical shift, so the JS arrival is a
     sub-pixel settle, not a jump. */
  top: 2.8rem;
  left: 50%;
  width: 9.25rem;
  transform: translate(-50%, -50%);
}

/* Below 1024 the header grid is `1fr auto` and the menu button owns column 2,
   so the slot returns to column 1. The JS docks the mark at the viewport's
   horizontal centre regardless - the slot only supplies the row and the size. */
@media (max-width: 1024px) {
  .definitive-interior .nav-logo-slot {
    grid-column: 1;
    justify-self: start;
  }
}

/* One typeface set. styles.css put the interior nav in IBM Plex Mono - a third
   family the brief does not allow, and the reason photo.html and films.html
   read as a different site from the homepage. Helvetica, at the homepage's
   exact size and tracking. */
.definitive-interior .desktop-nav,
.definitive-interior .desktop-nav a,
.definitive-interior .nav-cta,
.definitive-interior .menu-toggle,
.definitive-interior .nav-submenu a,
.definitive-interior .site-footer .footer-nav,
.definitive-interior .site-footer .footer-bottom {
  font-family: var(--int-body);
}
.definitive-interior .desktop-nav > a,
.definitive-interior .nav-group > a,
.definitive-interior .nav-cta,
.definitive-interior .menu-toggle {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
}

/* Same hover underline the homepage nav uses, so the interaction matches too. */
.definitive-interior .desktop-nav > a::after,
.definitive-interior .nav-group > a::after {
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--int-ease);
}
.definitive-interior .desktop-nav > a:hover::after,
.definitive-interior .desktop-nav > a:focus-visible::after,
.definitive-interior .nav-group:hover > a::after,
.definitive-interior .nav-group:focus-within > a::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* The current-page rule already draws a static line; don't animate it away. */
.definitive-interior .desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
/* The CTA already carries a border-bottom, so the current-page underline was
   drawing a second rule beneath it on contact.html. Brighten the border
   instead of stacking two lines. */
.definitive-interior .nav-cta[aria-current="page"]::after { content: none; }
.definitive-interior .nav-cta[aria-current="page"] {
  border-bottom-color: var(--int-paper);
}

/* The mobile sheet was set in caps here and sentence case on the homepage, off
   the same markup. One treatment, matching the homepage exactly. */
.definitive-interior .mobile-menu a {
  font-family: var(--int-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-transform: none;
}

/* A dropdown opened over a bright frame has to be a surface, not a tint. */
.definitive-interior .nav-submenu {
  top: calc(100% - 0.2rem);
  left: -1.15rem;
  padding: 0.75rem 1.15rem;
  background: rgba(8, 9, 13, 0.985);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.55);
}

/* ============================================================
   Round 13 - Workstream C: the three Learn routes.

   coaching.html / blueprint.html / cinematography.html shared a
   composition system in name only before this pass. The fold hung
   off the left edge, half of every page sat on a cream slab that
   exists nowhere else on the site, and every label, price and
   button ran in IBM Plex Mono off styles.css - the third typeface
   the brief does not allow.

   Everything below is the whole system for those three routes.
   One centred fold, one dark ground, one type scale lifted
   straight from the homepage's Round-11 tokens, Playfair Display
   and Helvetica only. The pages use `lrn-` markup, so none of
   styles.css's `.course-*` cascade reaches them any more.
   ============================================================ */

/* Round 14 item 2: the scale is declared for every interior route, not just
   the three Learn ones, so films/photo/contact can be built on this same
   composition system instead of a second one. The type resets underneath stay
   scoped to the course pages - those routes shed styles.css entirely; the
   archive routes still sit on it. */
body.definitive-interior {
  /* Same numbers as .definitive-site's Round-11 scale. */
  --lrn-display: clamp(3.4rem, 7vw, 7rem);
  --lrn-h2: clamp(2.6rem, 5.4vw, 5.4rem);
  --lrn-h2-sm: clamp(1.9rem, 3.7vw, 3.7rem);
  --lrn-h3: clamp(1.35rem, 2.1vw, 2.1rem);
  --lrn-lead: clamp(1.02rem, 1.35vw, 1.3rem);
  --lrn-kicker: 0.69rem;
  --lrn-track: 0.18em;
  --lrn-leading: 0.98;
  --lrn-pad-y: clamp(5.5rem, 9vw, 9rem);
  --lrn-measure: 78rem;
  /* One vertical step for the fold: the gap under the headline block and the
     gap under the action row are the same measure. Round 14 item 3. */
  --lrn-gap: clamp(1.9rem, 3vw, 2.6rem);
}

body.definitive-interior.course-page {
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.definitive-interior.course-page *,
body.definitive-interior.course-page *::before,
body.definitive-interior.course-page *::after { box-sizing: border-box; }

body.definitive-interior.course-page img { display: block; max-width: 100%; }
body.definitive-interior.course-page p { margin: 0; }
body.definitive-interior.course-page :focus-visible { outline: 1px solid var(--int-paper); outline-offset: 5px; }

/* --- Shared atoms -------------------------------------------------------- */

.definitive-interior .lrn-kicker {
  margin: 0 0 0.9rem;
  color: var(--int-muted);
  font-family: var(--int-body);
  font-size: var(--lrn-kicker);
  font-weight: 400;
  letter-spacing: var(--lrn-track);
  line-height: 1.4;
  text-transform: uppercase;
}

.definitive-interior .lrn-lede {
  max-width: 46ch;
  color: rgba(244, 241, 235, 0.72);
  font-size: var(--lrn-lead);
  line-height: 1.6;
}

.definitive-interior .lrn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3.1rem;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  background: var(--int-paper);
  color: #08090d;
  font-family: var(--int-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  transition: background 220ms var(--int-ease), color 220ms var(--int-ease),
    border-color 220ms var(--int-ease), transform 280ms var(--int-ease);
}

.definitive-interior .lrn-btn:hover,
.definitive-interior .lrn-btn:focus-visible {
  border-color: var(--int-paper);
  background: transparent;
  color: var(--int-paper);
  transform: translateY(-0.15rem);
}

.definitive-interior .lrn-btn.is-ghost {
  border-color: var(--int-line);
  background: transparent;
  color: var(--int-paper);
}

.definitive-interior .lrn-btn.is-ghost:hover,
.definitive-interior .lrn-btn.is-ghost:focus-visible {
  border-color: var(--int-paper);
  background: var(--int-paper);
  color: #08090d;
}

.definitive-interior .lrn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
  margin-top: var(--lrn-gap);
}

.definitive-interior .lrn-meta {
  margin-top: 1.15rem;
  color: var(--int-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.definitive-interior .lrn-meta strong {
  font-family: var(--int-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--int-paper);
}

/* --- The fold: one centred composition on every Learn route -------------- */

.definitive-interior .lrn-hero {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: 100dvh;
  place-items: center;
  padding: 8.5rem var(--int-pad) clamp(4rem, 8vh, 6.5rem);
  overflow: hidden;
  text-align: center;
}

.definitive-interior .lrn-hero-img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.definitive-interior .lrn-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse 80% 68% at 50% 46%, rgba(6, 7, 10, 0.42), rgba(6, 7, 10, 0.8) 76%),
    linear-gradient(180deg, rgba(6, 7, 10, 0.6), rgba(6, 7, 10, 0.2) 42%, rgba(6, 7, 10, 0.94));
}

.definitive-interior .lrn-hero-inner {
  display: flex;
  width: min(100%, 52rem);
  flex-direction: column;
  align-items: center;
}

.definitive-interior .lrn-hero h1 {
  margin: 0;
  font-family: var(--int-display);
  font-size: var(--lrn-display);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: var(--lrn-leading);
  text-transform: none;
  text-wrap: balance;
}

/* A long headline set at the same size as a two-word one is not the same
   headline. "Selected work" at 7rem reads as a title; a full question at 7rem
   stacks three lines and swallows the fold. Long folds step down and get a
   wider measure so they resolve in two lines. */
.definitive-interior .lrn-hero h1.is-long {
  max-width: 20ch;
  font-size: clamp(2.3rem, 4.4vw, 4.05rem);
  letter-spacing: -0.022em;
}

.definitive-interior .lrn-hero .lrn-lede {
  max-width: 44ch;
  margin-top: clamp(1.3rem, 2.2vw, 1.9rem);
}

.definitive-interior .lrn-hero .lrn-actions { justify-content: center; }

/* --- Contained sections on the dark ground ------------------------------- */

.definitive-interior .lrn-section { padding-block: var(--lrn-pad-y); }

.definitive-interior .lrn-inner {
  width: min(var(--lrn-measure), 100%);
  margin-inline: auto;
  padding-inline: var(--int-pad);
}

.definitive-interior .lrn-head {
  margin-bottom: clamp(2.6rem, 5vw, 4.5rem);
  text-align: center;
}

.definitive-interior .lrn-head h2 {
  margin: 0;
  font-family: var(--int-display);
  font-size: var(--lrn-h2);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: var(--lrn-leading);
  text-transform: none;
}

.definitive-interior .lrn-head .lrn-lede { margin: 1.4rem auto 0; }
.definitive-interior .lrn-head.is-quiet { margin-bottom: clamp(2rem, 3.4vw, 3rem); }
.definitive-interior .lrn-head.is-quiet .lrn-kicker { margin-bottom: 0; }

/* --- Text / image split, alternating ------------------------------------- */

.definitive-interior .lrn-split .lrn-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2.6rem, 6vw, 6rem);
}

.definitive-interior .lrn-split.is-reverse .lrn-split-media { order: -1; }
.definitive-interior .lrn-split-text { min-width: 0; }

.definitive-interior .lrn-split-text h2 {
  margin: 0 0 1.4rem;
  font-family: var(--int-display);
  font-size: var(--lrn-h2-sm);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.02;
  text-transform: none;
}

.definitive-interior .lrn-split-media { margin: 0; }

.definitive-interior .lrn-split-media img {
  width: 100%;
  height: 100%;
  max-height: 38rem;
  object-fit: cover;
  filter: saturate(0.94);
}

/* --- Full-bleed plate: his own frame carrying his own line ---------------- */

.definitive-interior .lrn-plate {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: clamp(26rem, 52vw, 40rem);
  place-items: center;
  padding: clamp(5rem, 8vw, 8rem) var(--int-pad);
  overflow: hidden;
  text-align: center;
}

.definitive-interior .lrn-plate-bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.definitive-interior .lrn-plate::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse 82% 72% at 50% 50%, rgba(6, 7, 10, 0.46), rgba(6, 7, 10, 0.82) 76%),
    linear-gradient(180deg, rgba(6, 7, 10, 0.9), rgba(6, 7, 10, 0.28) 42%, rgba(6, 7, 10, 0.92));
}

.definitive-interior .lrn-plate-inner {
  display: flex;
  width: min(100%, 50rem);
  flex-direction: column;
  align-items: center;
}

.definitive-interior .lrn-plate h2 {
  margin: 0;
  font-family: var(--int-display);
  font-size: var(--lrn-h2-sm);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-transform: none;
  text-wrap: balance;
}

.definitive-interior .lrn-plate .lrn-lede { margin-top: 1.4rem; }
.definitive-interior .lrn-plate .lrn-actions { justify-content: center; }
.definitive-interior .lrn-plate .lrn-list { margin-top: 2.4rem; text-align: left; }

/* --- Lists: hairline rows, no bullet glyphs, no number stamps ------------- */

.definitive-interior .lrn-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  list-style: none;
}

.definitive-interior .lrn-list li {
  padding: 1.05rem 0;
  border-top: 1px solid var(--int-line);
  color: rgba(244, 241, 235, 0.82);
  font-size: 0.98rem;
  line-height: 1.5;
}

.definitive-interior .lrn-list.is-single { grid-template-columns: minmax(0, 1fr); }

/* --- Curriculum rows ----------------------------------------------------- */

.definitive-interior .lrn-modules { display: grid; }

.definitive-interior .lrn-module {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  align-items: start;
  gap: clamp(1.4rem, 4vw, 4rem);
  padding: clamp(1.7rem, 3vw, 2.6rem) 0;
  border-top: 1px solid var(--int-line);
}

.definitive-interior .lrn-module:last-child { border-bottom: 1px solid var(--int-line); }

.definitive-interior .lrn-module h3 {
  margin: 0;
  font-family: var(--int-display);
  font-size: var(--lrn-h3);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.06;
}

.definitive-interior .lrn-module p {
  color: rgba(244, 241, 235, 0.68);
  font-size: 0.98rem;
  line-height: 1.62;
}

/* --- Proof: his screenshots framed and captioned, never loose art -------- */

.definitive-interior .lrn-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.definitive-interior .lrn-proof.is-solo {
  width: min(100%, 43rem);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
}

.definitive-interior .lrn-proof-card {
  margin: 0;
  padding: 0.65rem 0.65rem 0;
  border: 1px solid var(--int-line);
  background: var(--int-raised);
}

.definitive-interior .lrn-proof-card img {
  width: 100%;
  height: auto;
  background: #101218;
}

/* Uneven natural crops (a 16:10 ledger next to a 4:5 phone frame) left the
   cards ragged. One ratio per proof row; the solo card keeps its own. */
.definitive-interior .lrn-proof:not(.is-chats):not(.is-solo) img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

.definitive-interior .lrn-proof-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.95rem 0.25rem 1rem;
}

.definitive-interior .lrn-proof-cap .label {
  color: var(--int-muted);
  font-size: 0.63rem;
  letter-spacing: var(--lrn-track);
  text-transform: uppercase;
}

.definitive-interior .lrn-proof-cap .fig {
  font-family: var(--int-display);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.definitive-interior .lrn-proof.is-chats { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.definitive-interior .lrn-proof.is-chats img {
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 27rem;
  object-fit: cover;
  object-position: top;
}

/* --- Membership tiers ---------------------------------------------------- */

.definitive-interior .lrn-tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.definitive-interior .lrn-tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.8rem, 3.2vw, 2.9rem);
  border: 1px solid var(--int-line);
  background: rgba(244, 241, 235, 0.02);
}

.definitive-interior .lrn-tier.is-feature {
  border-color: rgba(244, 241, 235, 0.34);
  background: rgba(244, 241, 235, 0.055);
}

.definitive-interior .lrn-tier h3 {
  margin: 0;
  font-family: var(--int-display);
  font-size: var(--lrn-h3);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.definitive-interior .lrn-price {
  margin: 0.7rem 0 1.4rem;
  color: var(--int-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.definitive-interior .lrn-price strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--int-paper);
  font-family: var(--int-display);
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.14;
}

.definitive-interior .lrn-tier p {
  margin-bottom: 1.35rem;
  color: rgba(244, 241, 235, 0.68);
  font-size: 0.96rem;
  line-height: 1.6;
}

.definitive-interior .lrn-tier .lrn-list { width: 100%; }
.definitive-interior .lrn-tier .lrn-list li:first-child { border-top: 1px solid var(--int-line); }
.definitive-interior .lrn-tier .lrn-btn { margin-top: 1.9rem; }

/* --- Course vs. film school --------------------------------------------- */

.definitive-interior .lrn-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.definitive-interior .lrn-compare-col {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--int-line);
}

.definitive-interior .lrn-compare-col.is-featured {
  border-color: rgba(244, 241, 235, 0.34);
  background: rgba(244, 241, 235, 0.05);
}

.definitive-interior .lrn-compare-col h3 {
  margin: 0 0 0.6rem;
  font-family: var(--int-display);
  font-size: var(--lrn-h3);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.definitive-interior .lrn-compare-col dl { margin: 0; }

.definitive-interior .lrn-compare-col dl > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--int-line);
}

.definitive-interior .lrn-compare-col dt {
  margin: 0;
  color: var(--int-muted);
  font-size: 0.63rem;
  letter-spacing: var(--lrn-track);
  text-transform: uppercase;
}

.definitive-interior .lrn-compare-col dd {
  margin: 0;
  color: rgba(244, 241, 235, 0.82);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --- Testimonial facades. The button is swapped for the YouTube iframe by
       script.js, so both states have to size identically. ------------------ */

.definitive-interior .lrn-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.definitive-interior .lrn-video {
  margin: 0;
  border: 1px solid var(--int-line);
  background: var(--int-raised);
}

.definitive-interior .lrn-video .course-video-play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.definitive-interior .lrn-video .course-video-play img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity 260ms var(--int-ease);
}

.definitive-interior .lrn-video .course-video-play:hover img,
.definitive-interior .lrn-video .course-video-play:focus-visible img { opacity: 0.82; }

.definitive-interior .lrn-video .course-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid rgba(244, 241, 235, 0.5);
  border-radius: 50%;
  background: rgba(6, 7, 10, 0.5);
  color: var(--int-paper);
  place-items: center;
  transform: translate(-50%, -50%);
  transition: background 260ms var(--int-ease), border-color 260ms var(--int-ease);
}

.definitive-interior .lrn-video .course-video-play:hover .course-video-icon,
.definitive-interior .lrn-video .course-video-play:focus-visible .course-video-icon {
  border-color: var(--int-paper);
  background: rgba(6, 7, 10, 0.78);
}

.definitive-interior .lrn-video .course-video-icon svg { width: 0.95rem; height: auto; }

.definitive-interior .lrn-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.definitive-interior .lrn-video figcaption {
  display: grid;
  gap: 0.35rem;
  padding: 1.05rem 1.15rem 1.25rem;
}

.definitive-interior .lrn-video strong {
  font-family: var(--int-display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.definitive-interior .lrn-video span {
  color: rgba(244, 241, 235, 0.66);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .definitive-interior .lrn-split .lrn-inner { grid-template-columns: minmax(0, 1fr); }
  .definitive-interior .lrn-split.is-reverse .lrn-split-media { order: 0; }
  .definitive-interior .lrn-module { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .definitive-interior .lrn-tiers { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  body.definitive-interior.course-page { --lrn-display: clamp(2.7rem, 11.5vw, 4.4rem); }
  .definitive-interior .lrn-hero { min-height: 100dvh; padding-top: 7.5rem; }
  /* Round 66, Giovani's law: NO button is ever full-width. The stack
     stays a column on phones but every action keeps its own size. */
  .definitive-interior .lrn-hero .lrn-actions { width: 100%; flex-direction: column; align-items: center; }
  .definitive-interior .lrn-list { grid-template-columns: minmax(0, 1fr); }
  .definitive-interior .lrn-compare { grid-template-columns: minmax(0, 1fr); }
  .definitive-interior .lrn-compare-col dl > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .definitive-interior .lrn-proof,
  .definitive-interior .lrn-videos { grid-template-columns: minmax(0, 1fr); }
  .definitive-interior .lrn-proof.is-chats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .definitive-interior .lrn-plate .lrn-actions,
  .definitive-interior .lrn-plate .lrn-list { width: 100%; }
  .definitive-interior .lrn-plate .lrn-actions { flex-direction: column; align-items: stretch; }
  .definitive-interior .lrn-split-media img { max-height: 22rem; }
}

/* Video wall and chat wall are one proof block, so they close up together. */
.definitive-interior .lrn-videos + .lrn-proof { margin-top: clamp(1rem, 2vw, 1.6rem); }

/* A left-set list inside a centred plate still needs a measure. */
.definitive-interior .lrn-plate .lrn-list { width: min(100%, 36rem); }
.definitive-interior .lrn-plate .lrn-list li:first-child { border-top: 0; }
.definitive-interior .lrn-plate .lrn-meta { margin-top: 1.6rem; }

/* ============================================================
   ROUND 14 - Workstream C. Interior routes + the global footer.

   Governing principle: no section breakers. No hard horizontal
   line, no hue step, anywhere on any interior route.
   ============================================================ */

/* ---- Item 1: one footer, and it is the homepage's -------------------------

   Root cause of the drift: the interior footer is a FORK of the homepage
   footer, frozen at an older revision, living in a stylesheet the homepage
   never loads (interior routes load styles.css + this sheet; the homepage
   loads definitive.css). Every homepage footer pass since - the Round-11
   lockup resize, the location-line-over-email rhythm, the label type scale,
   and Round 12's shared drifting sky - landed in definitive.css and could not
   reach the other six routes. Measured at 1440x900 before this pass:

     property         homepage        interior         
     logo width       144px           200px            
     email            13.76px / HN    12.48px / H      
     nav label        10.08px         11.04px, upper   
     bottom row       10.08 / .18em   10.88 / .1em     
     field            drifting, 3     static, 2 stars  
                      stars + 2 tints  + 1 tint, opaque
     composition      logo/nav/       logo/email/nav/  
                      contact/social   social/bottom   

   Everything below is the homepage's own footer, value for value, restated
   against the interior class names. The one thing that cannot be copied is
   the shared `.def-sky` element - definitive.js builds it across the closing
   wall AND the footer, and neither exists here - so the same field is painted
   by the footer itself, rising above its own top edge and fading out into
   whatever section precedes it. Same stars, same tile sizes, same tints, same
   76s counter-drift, no boundary. */

.definitive-interior .site-footer,
.definitive-interior .def-interior-footer {
  /* The homepage's own inline padding, not the interior one: the bottom row's
     width is the only thing that reads it, and it has to line up. */
  --int-foot-pad: clamp(1.25rem, 4.45vw, 4rem);
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 28rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  padding: clamp(4rem, 7vw, 5.5rem) var(--int-foot-pad) 1.4rem;
  overflow: visible;
  /* The field is the pseudo-element below; the element itself carries nothing
     so there is no second background to meet the first at an edge. */
  background: none;
  /* The homepage's leading, so the column lands on the same pixels whether the
     route inherits styles.css's body leading or the course pages' own. */
  line-height: 1.55;
  text-align: center;
}

/* Everything the visitor reads sits above both painted layers. */
.definitive-interior .site-footer > * { position: relative; z-index: 1; }

/* The field. Round 12 item 6's stack, tile for tile, minus its opaque base -
   the document is already #06070a, so leaving the base out is what lets the
   whole thing fade into the section above instead of covering it. */
.definitive-interior .site-footer::before {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: calc(-1 * var(--int-sky-rise, 22rem));
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 22%, rgba(199, 218, 255, 0.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 34%, rgba(247, 234, 210, 0.4) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 75%, rgba(199, 218, 255, 0.32) 0 1px, transparent 1.7px),
    radial-gradient(ellipse 74% 46% at 50% 34%, rgba(46, 62, 100, 0), transparent 76%),
    radial-gradient(ellipse 60% 40% at 50% 88%, rgba(38, 52, 86, 0), transparent 74%);
  background-size: 170px 170px, 230px 230px, 290px 290px, auto, auto;
  animation: int-sky-drift 76s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--int-sky-rise, 22rem));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--int-sky-rise, 22rem));
}

/* The floor under the type, so the lockup stays legible over the stars.
   Same three stops as the homepage's. */
.definitive-interior .site-footer::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 7, 10, 0) 0%, rgba(6, 7, 10, 0.45) 26%, rgba(6, 7, 10, 0.72) 100%);
}

/* Whole tiles only - a fractional offset would show the loop restart. Runs
   against the galaxy, same as the homepage's closing field. */
@keyframes int-sky-drift {
  to { background-position: -170px -340px, 230px -230px, -290px 290px, 0 0, 0 0; }
}

.definitive-interior .site-footer .footer-logo {
  width: clamp(7.5rem, 10vw, 9.5rem);
  align-self: center;
  margin-bottom: 0;
}
.definitive-interior .site-footer .footer-logo img { width: 100%; height: auto; }

.definitive-interior .site-footer .footer-nav,
.definitive-interior .site-footer .footer-contact,
.definitive-interior .site-footer .footer-social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem 1.35rem;
  text-align: center;
}

.definitive-interior .site-footer .footer-nav {
  margin-top: 0.55rem;
  color: var(--int-paper);
  font-family: var(--int-body);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: none;
}
.definitive-interior .site-footer .footer-nav a { color: var(--int-paper); }

/* Location line and email share one centred axis and one rhythm. */
.definitive-interior .site-footer .footer-contact {
  flex-direction: column;
  gap: 0.4rem;
}
.definitive-interior .site-footer .footer-contact span,
.definitive-interior .site-footer .footer-email {
  display: block;
  width: 100%;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--int-body);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  overflow-wrap: normal;
  text-align: center;
}
.definitive-interior .site-footer .footer-contact span { color: var(--int-muted); }
.definitive-interior .site-footer .footer-email { color: var(--int-paper); }

/* Social marks, not words. The old interior sheet dropped them entirely under
   720px; the homepage keeps them at every width, so these do too. */
.definitive-interior .site-footer .footer-social {
  display: flex;
  gap: 1.4rem;
  margin-top: 0.35rem;
}
.definitive-interior .site-footer .footer-social a {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  place-items: center;
  color: var(--int-muted);
  opacity: 0.75;
  transition: color 200ms ease, opacity 200ms ease, transform 280ms var(--int-ease);
}
.definitive-interior .site-footer .footer-social a svg { width: 100%; height: 100%; }
.definitive-interior .site-footer .footer-social a:hover,
.definitive-interior .site-footer .footer-social a:focus-visible {
  color: var(--int-paper);
  opacity: 1;
  transform: translateY(-0.15rem);
}

/* Stated in full rather than inherited: the copyright line and the back-to-top
   link stack on one centred axis under the rule, which is what the homepage
   renders (its legacy sheet stacks them and definitive.css never unstacks
   them). Left to inheritance the two sheets disagree, which is how the two
   footers came apart to begin with. */
.definitive-interior .site-footer .footer-bottom {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  gap: 1.875rem;
  padding-top: 1.4rem;
  /* No rule across the bottom of the page. It is the last hard horizontal
     line on an interior route, the homepage no longer draws one, and this
     round's principle is that nothing does. The 30px axis carries it. */
  border-top: 0;
  color: rgba(255, 255, 255, 0.64);
  font-family: var(--int-body);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.definitive-interior .site-footer .footer-bottom a { color: inherit; }
.definitive-interior .site-footer .footer-bottom a:hover { color: var(--int-paper); }

@media (max-width: 620px) {
  /* The homepage's own 390 sweep: the column closes up and the bottom row
     stacks on the same centred axis instead of dropping left-aligned. */
  .definitive-interior .site-footer,
  .definitive-interior .def-interior-footer {
    min-height: 0;
    gap: 1.25rem;
    padding-top: 3.75rem;
    padding-bottom: 2rem;
  }
  .definitive-interior .site-footer { --int-sky-rise: 14rem; }
  .definitive-interior .site-footer .footer-logo { width: min(12rem, 58vw); }
  .definitive-interior .site-footer .footer-nav { max-width: 18rem; }
  .definitive-interior .site-footer .footer-contact { gap: 0.35rem; }
  .definitive-interior .site-footer .footer-contact span,
  .definitive-interior .site-footer .footer-email { font-size: 0.8rem; }
  .definitive-interior .site-footer .footer-social { display: flex; }
  .definitive-interior .site-footer .footer-bottom {
    align-items: center;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    text-align: center;
  }
}

/* ---- Items 4 + 5: the ambient field, and no edges anywhere ----------------

   `int-sky` is the same field as the footer's, painted behind a section that
   would otherwise be flat black. It is applied sparingly and by hand - two or
   three per route, never a whole page of it - and it is always masked at both
   ends, so it can only ever fade in and fade out. There is no version of this
   that draws a line. */

/* `isolation` is load-bearing, not decoration: `html` carries its own opaque
   background on these routes, so `body`'s background is not propagated to the
   canvas and paints as an ordinary in-flow box - over anything on a negative
   z-index. Without a stacking context of its own the field is painted and then
   immediately covered by the page's own black. */
.definitive-interior .int-sky {
  position: relative;
  isolation: isolate;
}
/* Only where the field sits at z-index 0. A fold or a plate isolates itself
   and keeps its picture on a negative layer, so lifting its children here
   would take that picture out of position. */
.definitive-interior .int-sky:not(.lrn-hero):not(.lrn-plate) > * {
  position: relative;
  z-index: 1;
}

.definitive-interior .int-sky::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 22%, rgba(199, 218, 255, 0.42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 34%, rgba(247, 234, 210, 0.34) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 75%, rgba(199, 218, 255, 0.27) 0 1px, transparent 1.7px),
    radial-gradient(ellipse 74% 52% at 50% 46%, rgba(46, 62, 100, 0), transparent 76%);
  background-size: 170px 170px, 230px 230px, 290px 290px, auto;
  animation: int-sky-section 96s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}

/* A fold opens under the fixed header, so it holds full strength from the top
   and only fades out at the bottom. */
.definitive-interior .int-sky.is-fold::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 64%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 64%, transparent 100%);
}

@keyframes int-sky-section {
  to { background-position: -170px -340px, 230px -230px, -290px 290px, 0 0; }
}

/* `.lrn-hero` and `.lrn-plate` already own ::before for their vignette and
   isolate themselves, so the field rides at the same depth, painted after. */
.definitive-interior .lrn-hero.int-sky::after,
.definitive-interior .lrn-plate.int-sky::after { z-index: -1; }

/* Cards on the field keep a ground of their own. The raised surfaces are 2%
   white, which a starfield reads straight through - and a star landing on a
   line of type is the whole reason to do this by hand. The field belongs in
   the gutters and the margins, not under the copy. */
.definitive-interior .int-sky .lrn-tier,
.definitive-interior .int-sky .lrn-compare-col,
.definitive-interior .int-sky .lrn-proof-card,
.definitive-interior .int-sky .lrn-video {
  background-color: #08090d;
  background-image: linear-gradient(rgba(244, 241, 235, 0.02), rgba(244, 241, 235, 0.02));
}
.definitive-interior .int-sky .lrn-tier.is-feature,
.definitive-interior .int-sky .lrn-compare-col.is-featured {
  background-image: linear-gradient(rgba(244, 241, 235, 0.055), rgba(244, 241, 235, 0.055));
}

@media (prefers-reduced-motion: reduce) {
  .definitive-interior .site-footer::before,
  .definitive-interior .int-sky::after { animation-name: none; }
}

/* The image folds and plates faded to rgba(6,7,10,.92) and then met a section
   that is #06070a - a residual step at the seam. Both now reach the ground
   colour exactly, so the picture dissolves into the section under it. */
.definitive-interior .lrn-hero::before {
  background:
    radial-gradient(ellipse 80% 68% at 50% 46%, rgba(6, 7, 10, 0.42), rgba(6, 7, 10, 0.8) 76%),
    linear-gradient(180deg, rgba(6, 7, 10, 0.72) 0%, rgba(6, 7, 10, 0.2) 42%, rgba(6, 7, 10, 0.94) 88%, #06070a 100%);
}

.definitive-interior .lrn-plate::before {
  background:
    radial-gradient(ellipse 82% 72% at 50% 50%, rgba(6, 7, 10, 0.46), rgba(6, 7, 10, 0.82) 76%),
    linear-gradient(180deg, #06070a 0%, rgba(6, 7, 10, 0.86) 9%, rgba(6, 7, 10, 0.28) 42%, rgba(6, 7, 10, 0.9) 91%, #06070a 100%);
}

/* The split image blocks butt straight against the ground on both sides; a
   hairline of the picture's own edge is the only line left in the page. */
.definitive-interior .lrn-split-media img { border: 0; }

/* ---- Round 15 item 1: the archive filters in place ------------------------

   The rail used to be six links to six URLs, and a category view was built by
   hiding one of the two sections. There is one section now (item 2) and one
   grid inside it, so choosing a category is a change of state, not of page.

   A card outside the chosen category is taken out of the grid outright. The
   `hidden` property could not do that on its own: `.campaign-card` carries an
   author `display: block`, and an author declaration beats the user agent's
   `[hidden] { display: none }` no matter how specific. Nineteen of the
   twenty-two film cards were being marked hidden on a category view and all
   twenty-two stayed on screen. */
body.films-page .campaign-card[data-work-hidden] { display: none; }

/* The swap: the view dips out, the set and the copy change on the dark frame,
   the view comes back. Short enough to read as the same page answering. The
   fold's headline and subline are in it too - item 4 asks them to move in step
   with the grid, and a hard cut over a fading wall is not in step. The rail
   itself is not: it lights the moment it is tapped. */
body.films-page .campaign-grid,
body.films-page .archive-empty,
body.films-page [data-archive-title],
body.films-page [data-archive-summary] {
  transition: opacity 190ms var(--int-ease);
}

body.films-page .campaign-grid.is-swapping,
body.films-page .archive-empty.is-swapping,
body.films-page [data-archive-title].is-swapping,
body.films-page [data-archive-summary].is-swapping { opacity: 0; }

/* The empty state is the only thing on the page when it shows, so it takes
   the closing air the grid would have taken. */
body.films-page .archive-empty { padding-top: clamp(2rem, 4vw, 4rem); }

/* The sticky filter bar was a solid slab with a hard bottom edge that cut
   across the work as it scrolled under. It fades out instead. */
body.films-page .archive-filter {
  background: linear-gradient(to bottom, rgba(6, 7, 10, 0.94) 0%, rgba(6, 7, 10, 0.9) 58%, rgba(6, 7, 10, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
}

/* ---- Item 2: the centred fold on the remaining three routes ---------------

   films.html, photo.html and contact.html open on `.lrn-hero` now - the same
   kicker / headline / subline / action stack, centred at every width, that
   the Learn routes have carried since Round 13. `is-plain` is that fold with
   no photograph behind it: the ambient field carries it instead. */

.definitive-interior .lrn-hero.is-plain {
  min-height: min(78dvh, 46rem);
  padding-top: 9.5rem;
}
.definitive-interior .lrn-hero.is-plain::before { background: none; }

/* The archive folds sit above a filter rail and a wall of work, so they are
   shorter than a Learn fold - the first row of films has to be in reach. */
.definitive-interior .lrn-hero.is-archive {
  min-height: min(76dvh, 44rem);
  padding-top: 9.5rem;
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

body.films-page .lrn-hero h1 { font-size: clamp(3.6rem, 8.6vw, 8.2rem); }
body.photo-page .lrn-hero h1 { font-size: clamp(3.6rem, 8.6vw, 8.2rem); }

/* Item 3: the SIGN UP button was sitting on the price line. One step of air,
   the same step the action row already takes from the copy above it. */
.definitive-interior .lrn-actions + .lrn-meta { margin-top: var(--lrn-gap); }

/* ---- contact.html on the shared composition ------------------------------ */

body.definitive-interior.contact-page .contact-compact {
  display: block;
  min-height: 0;
  padding: 0 0 clamp(6rem, 9vw, 9rem);
}
body.definitive-interior.contact-page .contact-compact-inner {
  width: min(var(--lrn-measure), 100%);
  margin-inline: auto;
  padding-inline: var(--int-pad);
}
body.definitive-interior.contact-page .contact-block {
  width: min(100%, 48rem);
  margin: 0 auto;
  padding: 0;
  gap: 4rem;
}

@media (max-width: 720px) {
  .definitive-interior .lrn-hero.is-plain,
  .definitive-interior .lrn-hero.is-archive { padding-top: 8rem; }
  .definitive-interior .lrn-hero.is-archive .lrn-actions,
  .definitive-interior .lrn-hero.is-plain .lrn-actions { width: 100%; flex-direction: column; align-items: stretch; }
}

/* ============================================================
   ROUND 16 - Workstream B. The interior routes on a phone.

   Everything below either only applies at <= 720px or fixes a
   value that was wrong at every width. The `lrn-` vocabulary is
   the one from Round 13; this extends it, it does not fork it.

   The round asks for <= 700px; the breakpoint is 720px because
   that is where this sheet already collapses every grid to one
   column, and a 20px band where the layout is stacked but the
   headers are still left-set is a seam nobody asked for.
   ============================================================ */

/* ---- Item 2, part one: the family bug, at every width ---------------------

   `.campaign-client` and `.campaign-meta` are the subline under a work card's
   title. definitive-interior.css restated their size, tracking and case but
   never their family, so styles.css's `font-family: "IBM Plex Mono"` was still
   the winning declaration and every card on films.html read its title in
   Playfair and its subline in a monospace that appears nowhere else in the
   system. Measured at 390px before this pass: title 20.8px Playfair Display,
   subline 10.2px IBM Plex Mono. Helvetica, like every other subline. */
.definitive-interior .campaign-client,
.definitive-interior .campaign-meta {
  font-family: var(--int-body);
}

/* ---- Item 2, part two: one rule for a display line and its subline --------

   The rule, stated once and consumed everywhere below:

     display line  Playfair Display, --int-paper, negative tracking
     subline       Helvetica, one clear step down, 60% paper, no tracking
     kicker        Helvetica, uppercase, --lrn-track, --int-muted  (unchanged)

   "One clear step" is at least 2x for a section-level pair (fold, section
   head, plate) and at least 1.5x for a card-level one (a film caption, a work
   card's credit). At 390px before this pass the plate pair ran 30.4 / 16.3px
   (1.87x) and the testimonial caption 17.6 / 14.4px (1.22x) - close enough in
   size that only the family separated them, which is what "not really
   differentiated" describes. No new scale: the two display steps below are the
   existing --lrn-h2-sm and --lrn-h3 tokens re-clamped for a narrow screen, and
   the subline sizes are set on the subline selectors themselves. */
@media (max-width: 720px) {
  body.definitive-interior {
    /* 30.4px -> 33.5px at 390, 29.6px at 320. */
    --lrn-h2-sm: clamp(1.85rem, 8.6vw, 3.7rem);
    /* 21.6px -> 23.4px at 390. */
    --lrn-h3: clamp(1.45rem, 6vw, 2.1rem);
  }

  /* The subline under a fold, a section head or a plate. 16.3px -> 15.2px,
     and 72% paper -> 60%, so the step is size AND weight of colour, not one
     of them. Body copy is not a subline and is left alone: the lede inside a
     `.lrn-split-text` is a paragraph, and it keeps its reading size below. */
  .definitive-interior .lrn-hero > .lrn-hero-inner > .lrn-lede,
  .definitive-interior .lrn-head .lrn-lede,
  .definitive-interior .lrn-plate .lrn-lede {
    font-size: 0.95rem;
    color: rgba(244, 241, 235, 0.6);
    line-height: 1.62;
  }

  /* A testimonial card: the name is the display line, the quote is the
     subline. 17.6 / 14.4px -> 20.8 / 13.1px, and the quote drops to 58%. */
  .definitive-interior .lrn-video strong { font-size: 1.3rem; }
  .definitive-interior .lrn-video figcaption span {
    font-size: 0.82rem;
    color: rgba(244, 241, 235, 0.58);
  }

  /* A work card: title Playfair, credit Helvetica, already 2x apart in size
     once the family above is corrected. Only the colour step was missing. */
  .definitive-interior .campaign-client,
  .definitive-interior .campaign-meta { color: rgba(244, 241, 235, 0.66); }
}

/* ---- Item 1: nothing left-ragged at 700px except body copy and lists ------

   The folds, the section heads and the plates have been centred since Round
   13. What was still hanging off the left margin on a phone: the header of
   every text/image split, the membership and comparison cards, the caption
   under every proof card and testimonial, the credit over every work card,
   the contact routes, and the archive's empty state. All of them are headers
   or captions, so all of them centre. The things that stay left are the
   things a centred rag makes harder to read: paragraphs, feature lists,
   curriculum rows, form labels and their fields. */
@media (max-width: 720px) {
  /* The split's header centres over its own copy; the copy and the list under
     it do not. Two blocks, one axis, and the paragraph still starts where the
     eye expects a paragraph to start. */
  /* Round 18 item 18: the lede belongs to the same block as the kicker and
     the headline above it. Centring two of the three left the paragraph
     hanging off to one side under a centred heading. */
  .definitive-interior .lrn-split-text > .lrn-kicker,
  .definitive-interior .lrn-split-text > .lrn-lede,
  .definitive-interior .lrn-split-text > p,
  .definitive-interior .lrn-split-text > h2 {
    text-align: center;
    text-wrap: balance;
  }

  /* Membership tiers read as one centred stack: title, price, then the list
     left-set under it and the action across the full width of the card. */
  .definitive-interior .lrn-tier { align-items: center; }
  .definitive-interior .lrn-tier > h3,
  .definitive-interior .lrn-tier > .lrn-price { text-align: center; }
  .definitive-interior .lrn-tier > .lrn-btn { align-self: center; min-width: 14rem; text-align: center; }

  /* The comparison columns stack at this width, so each column title is a
     section header of its own. The definition rows under it stay left. */
  .definitive-interior .lrn-compare-col > h3 { text-align: center; }

  /* Proof and testimonial captions. `.lrn-proof-cap` is a two-item flex row
     that space-betweens a label against a figure - at 390 that reads as two
     unrelated things pinned to opposite margins. One centred stack. */
  .definitive-interior .lrn-proof-cap {
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
  }
  .definitive-interior .lrn-video figcaption { justify-items: center; text-align: center; }

  /* The credit over a work card was a two-column grid: title left, meta right.
     Both edges ragged, on a 390px card. One centred column. */
  body.films-page .campaign-credit {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  body.films-page .campaign-meta { justify-self: center; text-align: center; }

  /* Contact routes sit under a centred fold and a centred form action. */
  .definitive-interior .contact-route { text-align: center; }

  /* The empty state is a Playfair line on its own; it is a headline. */
  .definitive-interior .archive-empty {
    max-width: 18ch;
    margin-inline: auto;
    text-align: center;
  }
}

/* ---- Item 3: what the phone is actually paying for -----------------------

   Measured on a 6x-throttled 390x844 emulation, one scripted top-to-bottom
   scroll per route, DevTools timeline trace (numbers in the round's notes):

     route      main-thread   paint    raster
     photo         2826 ms    605 ms   7257 ms
     films         2239 ms    106 ms    199 ms
     blueprint     1401 ms    359 ms    376 ms
     coaching      1192 ms    353 ms    410 ms
     contact        575 ms    134 ms   1714 ms   <- over a 979 ms scroll

   contact.html is the tell. It is 2341px tall and holds a form; it has no
   business rastering for nearly twice the wall-clock time of the scroll. What
   it has is two continuously animating fields - the `int-sky` fold and the
   footer's own - each animating `background-position` on a masked, five-layer
   gradient across a full-width box. That is a full repaint every frame, on the
   main thread, forever, whether or not the field is on screen. The drift is
   170px over 76 seconds; nobody has ever seen it move. It stops on a phone. */
@media (max-width: 720px) {
  .definitive-interior .site-footer::before,
  .definitive-interior .int-sky::after { animation-name: none; }
}

/* Three blurred compositing passes ran on every interior route. A phone GPU
   pays for each one on every scrolled frame, and none of the three is doing
   work a flat surface cannot do here: the nav is already 88% opaque over a
   dark page, the films rail is a gradient that fades out rather than a pane of
   glass, and the submenu is a hover affordance that never opens on a phone at
   all. Backdrop blur is a desktop detail on this build now. */
@media (max-width: 720px) {
  .definitive-interior .def-interior-nav,
  .definitive-interior .site-nav.is-solid {
    background: rgba(6, 7, 10, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .definitive-interior .nav-submenu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* The films rail is the same band as the nav on a phone, so it is painted
     like one: opaque, unblurred, and faded only across its last twelfth.
     Round 15 gave it a 38% fade so it would dissolve into the work scrolling
     under it rather than cut across it - which is right at 1440, where the
     rail is one row. At 320 it wraps to three, and 38% of that is more than a
     whole row: MUSIC VIDEO and EVENT were rendered half-transparent over the
     first film. A category the visitor cannot read is a category that does
     not exist, which is the reason the rail wraps in the first place. The
     closing padding is deeper than the fade, so the fade lands under the last
     row of chips and never on it. */
  body.films-page .archive-filter {
    /* QA round 25: at 390px the chips WRAP to two rows and the 88% mask stop
       landed on the second row, letting card titles bleed through the labels.
       Opaque through 92% with deeper closing padding, so the fade tail lands
       in padding, never on a chip. */
    padding-bottom: 2rem;
    background: rgba(6, 7, 10, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 92%, transparent 100%);
  }
}

/* Offscreen work is skipped rather than laid out and painted - but only where
   the box is a known aspect ratio, so the remembered intrinsic size is right
   the first time and the page height does not move under the scroll thumb.

   The work grid qualifies: every card is 16:9 at the full column width, and
   measured over a full scroll the document ended 9315px against 9322px
   without - a 7px drift, i.e. the estimate was exact.

   The proof cards and testimonial facades on the Learn routes do NOT qualify,
   and were tried and removed rather than assumed. Their heights vary with the
   caption, so the estimate was 470px out over a page, and the batch that
   became relevant mid-scroll cost one 66.5ms task where the same scroll
   without them peaked at 10.6ms. A single dropped frame is exactly the
   complaint; skipping their layout was not worth buying one. */
@media (max-width: 720px) {
  body.films-page .campaign-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 13.7rem;
  }
}

/* ---- Item B5: an image resolves to black before the field begins ----------

   The field used to cross-dissolve over whatever was above it. The footer's
   own field rises 22rem above the footer's top edge, and on five of the six
   routes what sits in that 22rem is a photograph - the closing plate on the
   three Learn routes, the last row of work on films.html, the last column of
   the archive on photo.html. Stars landed on still-legible imagery and the two
   read as one muddled layer.

   One transition language, three stages, used everywhere an image hands off to
   the ground:

     1. the picture darkens over its own last third and reaches exactly
        #06070a - the ground colour, not an approximation of it - before its
        bottom edge, so it resolves on its own terms;
     2. a beat of real black, where there is neither legible image nor visible
        star. This is the part that makes it read as a transition rather than
        a blend;
     3. the field rises out of that black, below where the picture ended.

   Gradients and one mask stop. No new layer, no blur, nothing that undoes the
   item 3 work above. */

/* Stage 1 + 2, on the picture. The old ramp was still 6% short of the ground
   colour at 88% of the height and only closed it in the last 12%; these hold
   pure #06070a across the bottom eighth, which is the black beat. */
.definitive-interior .lrn-hero::before {
  background:
    radial-gradient(ellipse 80% 68% at 50% 46%, rgba(6, 7, 10, 0.42), rgba(6, 7, 10, 0.8) 76%),
    linear-gradient(
      180deg,
      rgba(6, 7, 10, 0.72) 0%,
      rgba(6, 7, 10, 0.2) 40%,
      rgba(6, 7, 10, 0.62) 68%,
      rgba(6, 7, 10, 0.94) 84%,
      #06070a 90%,
      #06070a 100%
    );
}

/* The plate's beat is the deepest of the three because a plate is the last
   thing on three of the six routes, so its black has to be tall enough to
   cover everything the footer's field can reach. Measured: the field starts
   102px above the footer's top edge at 1440 and 58px at 390; a plate is 640px
   tall at 1440 and 531px at 390, so pure ground from 82% of its height leaves
   115px and 96px of black respectively - the field lands inside it with room
   at both widths. */
.definitive-interior .lrn-plate::before {
  background:
    radial-gradient(ellipse 82% 72% at 50% 50%, rgba(6, 7, 10, 0.46), rgba(6, 7, 10, 0.82) 76%),
    linear-gradient(
      180deg,
      #06070a 0%,
      rgba(6, 7, 10, 0.86) 9%,
      rgba(6, 7, 10, 0.28) 40%,
      rgba(6, 7, 10, 0.62) 64%,
      rgba(6, 7, 10, 0.92) 76%,
      #06070a 82%,
      #06070a 100%
    );
}

/* Stage 1, on the two routes whose last section is a wall of photographs
   rather than a single plate. A grid has no vignette of its own, so without
   this the last row of work simply stopped at its own hard edge and the ground
   began - the pictures were cut off rather than resolved.

   The scrim is taller than the section's closing air by design: the overlap
   (128px at 390, 159px at 1440) is the last row darkening on its own terms,
   and the gradient reaches the ground colour just below where the pictures
   end, so everything under them is already exactly #06070a before the
   footer's field has any say. */
.definitive-interior .films-archive,
.definitive-interior .photo-archive {
  position: relative;
}

/* r78, Giovani: the old ::after gradient here PAINTED OVER the last rows
   of photos and films - "a weird shade at the bottom that blurs the
   image", on every archive page. The seam into the footer field stays
   seamless a cleaner way: the section simply ends with a runway of its
   own #06070a before the footer rises, and no pixel of content is ever
   under the fade. */
.definitive-interior .films-archive,
.definitive-interior .photo-archive {
  padding-bottom: clamp(11rem, 17vw, 17rem);
}
.definitive-interior .films-archive::after,
.definitive-interior .photo-archive::after { content: none; }

/* Stage 3. The field's mask used to ramp from nothing at the top of its rise
   straight to full at the footer's edge, which put its faintest stars over the
   picture above and its brightest over the seam. It holds at nothing for the
   first 60% of the rise now - that is the black beat - and only then comes up.

   The rise itself comes in with it: 22rem of it at 1440 reached 4px past the
   closing air under the last row of work on films.html, so the stars and the
   photographs were within rounding of each other. 16rem starts the field 102px
   above the footer's own top edge, inside 158px of ground; the mobile value
   drops to 9rem, which starts it 58px above, inside 112px. Fewer pixels of
   fade, the same fade - and it can no longer reach a picture. */
.definitive-interior .site-footer {
  --int-sky-rise: 16rem;
}

.definitive-interior .site-footer::before {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 60%,
    rgba(0, 0, 0, 0.42) 79%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 60%,
    rgba(0, 0, 0, 0.42) 79%,
    #000 100%
  );
}

@media (max-width: 720px) {
  .definitive-interior .site-footer { --int-sky-rise: 9rem; }
}

/* A fold that carries a photograph must never carry the field at full
   strength from its own top edge - `is-fold` exists for the plain folds, which
   have no picture under the stars. Stated so the pairing cannot be introduced
   by accident later. */
.definitive-interior .lrn-hero.int-sky:not(.is-plain)::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 62%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 62%, #000 100%);
}

/* Round 35: one header across every page - the homepage's arrangement.
   Wordmark left, pages centred, the CTA right. */
.definitive-interior .site-nav .nav-brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.definitive-interior .site-nav .desktop-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

/* Round 37: the video submenu is a solid glass panel - it used to drop
   transparent over the fold's headline. */
.definitive-interior .nav-submenu,
.definitive-site .nav-submenu {
  background: rgb(6 7 10 / 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(244 241 235 / 0.08);
  border-radius: 0.5rem;
  padding: 0.7rem 1rem;
}
/* And every page swap crossfades. */
@view-transition { navigation: auto; }

/* Round 39: the kicker gets a breath before the headline on every
   learn-family fold. */
.definitive-interior .lrn-kicker { margin-bottom: 0.95rem; }

/* Round 40: the phone menu speaks the same voice on every page. */
@media (max-width: 1024px) {
  .definitive-interior .mobile-menu {
    /* Round 62: centred + scrollable, the lead block's twin. */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    /* Round 72: the top item must CLEAR the fixed nav (z 80, over the
       menu's 70) - the r62 clamp maxed at 5rem = exactly the bar's height,
       so "Video" started life underneath it and no scroll could surface
       it. Clearance = the nav's own height expression + air. */
    padding: calc(clamp(4.5rem, 3.9rem + 1.6vw, 5rem) + 2.2rem) 1.5rem clamp(2rem, 6vh, 3rem);
    /* r90-call-20, Giovani's in-app screenshot: a link opened from Messages /
       Instagram runs in SFSafariViewController, whose bottom toolbar is a
       translucent overlay ON the page - the menu's last item ("Work With
       Us") scrolled to its end and sat under that bar. The inset is the
       toolbar's height there and 0 everywhere else; the home indicator's
       air comes with it, plus 2.75rem of fixed air because the in-app
       inset cannot be verified on the Simulator - the last item clears the
       bar either way. */
    padding-bottom: calc(clamp(2rem, 6vh, 3rem) + 2.75rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    background: rgb(4 5 8 / 0.98);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 320ms ease, transform 400ms cubic-bezier(0.22, 0.61, 0.21, 1);
  }
  .definitive-interior .mobile-menu:not([hidden]) {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .definitive-interior .mobile-menu::before,
  .definitive-interior .mobile-menu::after {
    content: "";
    margin: auto;
    flex: 0 0 0px;
  }
  .definitive-interior .mobile-menu > a,
  .definitive-interior .mm-video-toggle {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.7rem, 6.4vw, 2.1rem);
    font-weight: 500;
    line-height: 1.2;
    color: rgb(244 241 235);
    cursor: pointer;
  }
  .definitive-interior .mm-video { width: 100%; text-align: center; }
  .definitive-interior .mm-video-toggle span {
    display: inline-block;
    font-size: 0.55em;
    vertical-align: 0.28em;
    transition: transform 260ms ease;
  }
  .definitive-interior .mm-video-toggle.is-open span { transform: rotate(180deg); }
  .definitive-interior .mm-sub { display: grid; gap: 0.55rem; margin-top: 0.8rem; justify-items: center; }
  .definitive-interior .mm-sub[hidden] { display: none; }
  .definitive-interior .mm-sub a {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    color: rgb(244 241 235 / 0.72);
  }
}

/* Round 49: the interior dropdown drops BELOW the header line, exactly like
   the homepage - it used to open at calc(100% - 0.1rem) and its panel cut
   across the nav label itself. The ::after bridge keeps hover alive across
   the clearance gap (the same pair definitive.css ships at 3417/3425). */
.definitive-interior .nav-group::after {
  position: absolute;
  top: 100%;
  right: -1rem;
  left: -1rem;
  height: 0.8rem;
  content: "";
}
.definitive-interior .nav-submenu { top: calc(100% + 0.68rem); }

/* ============================================================
   Round 63: the course pages take the site's interior voice.
   Giovani: "optimize all the course pages - typography, headline
   sizing, section headers... the shell is a little different."
   What was wrong, measured: section heads ran the HERO scale
   (--lrn-h2 5.4rem - blueprint's "Built From Real Campaigns"
   filled five viewport lines), the splits kept hairline list
   rows, and 9rem section pads left half-viewport voids. The
   tokens are re-declared for the course routes only - films/
   photo/contact keep their own scale.
   ============================================================ */
body.definitive-interior.course-page {
  --lrn-display: clamp(2.5rem, 4.6vw, 4.2rem);
  --lrn-h2: clamp(1.9rem, 3vw, 2.9rem);
  --lrn-h2-sm: clamp(1.6rem, 2.3vw, 2.2rem);
  --lrn-h3: clamp(1.2rem, 1.7vw, 1.7rem);
  --lrn-lead: clamp(1rem, 1.2vw, 1.15rem);
  --lrn-pad-y: clamp(3.8rem, 6.5vw, 6.5rem);
}
/* The kicker speaks the system's muted caps - one voice over every head
   (gold stays reserved for the review stars and accents). */
body.definitive-interior.course-page .lrn-kicker,
body.definitive-interior.course-page .course-eyebrow {
  color: var(--int-muted);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* Heads breathe a fixed step, not a void. */
body.definitive-interior.course-page .lrn-head { margin-bottom: clamp(2rem, 3.6vw, 3.2rem); }
/* The list rows lose their hairlines (the standing no-lines taste) -
   rhythm carries the separation. */
body.definitive-interior.course-page .lrn-list li {
  border-top: 0;
  padding: 0.7rem 0;
  color: rgba(244, 241, 235, 0.85);
}
body.definitive-interior.course-page .lrn-list { gap: 0.15rem clamp(1.5rem, 4vw, 3.5rem); }
/* Split heads carry the same 1.4rem under-margin as the plates. */
body.definitive-interior.course-page .lrn-split-text h2 { margin-bottom: 1.2rem; }
/* The hero lede holds a reading measure. */
body.definitive-interior.course-page .lrn-hero .lrn-lede { max-width: 38rem; }


/* ============================================================ */
/* ROUND 89 — the interior universe's share of the 8/14 call.    */
/* The home universe carries the same decisions in lead.css,     */
/* written the same round per the registry's two-universe law.   */
/* ============================================================ */

/* ---- r89: the dropdown loses its box (Kyle at 03:04), r89c
   (Giovani): near-solid clean panel — glass read as unshippable. ---- */
.definitive-interior .nav-submenu {
  border: 0;
  border-radius: 0.9rem;
  background: rgb(10 11 15 / 0.98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 0.6), 0 0 0 1px rgb(244 241 235 / 0.06);
  padding: 1rem 1.35rem;
}

/* ---- r89: the work banner is gone (Kyle at 29:18 — "they've
   already clicked on video... this banner stuff up here is
   unnecessary"). The fold elements stay in the DOM (archive.js
   still writes the category into them for the document title);
   they simply never render. The wall starts under the header
   with its own breathing room. ---- */
body.films-page .lrn-hero.is-archive { display: none; }
body.films-page .films-archive { padding-top: clamp(7rem, 12vh, 9.5rem); }

/* ---- r89: the Content Partners wall (Kyle at 31:05 — "all work
   should be renamed content partners... a box with the brand
   name, and already immediately playing a video") ---- */
body.films-page .kls-partners {
  display: none;
  padding: clamp(7rem, 12vh, 9.5rem) clamp(10px, 2vw, 26px) 0;
}
body.films-page.is-partners .kls-partners { display: block; }
body.films-page.is-partners .films-archive,
body.films-page.is-partners .archive-pager { display: none; }
.kls-partners-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
}
@media (max-width: 980px) { .kls-partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kls-partners-grid { grid-template-columns: 1fr; } }
.kls-partner-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.35rem;
  background: #0b0c0f;
  text-decoration: none;
  transition: opacity 420ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kls-partner-card img,
.kls-partner-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kls-partner-card video {
  opacity: 0;
  transition: opacity 500ms ease;
}
.kls-partner-card:hover video.is-ready,
.kls-partner-card.is-touch video.is-ready { opacity: 1; }
.kls-partner-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(4 5 7 / 0.72), transparent 46%);
  pointer-events: none;
}
/* r96e (Giovani 8/26): no lockup asset yet -> the brand NAME stands where
   the logo would - centred on the cover, like his live tiles. First users:
   the 8 partners harvested from his Squarespace. */
.kls-partner-name {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  text-align: center;
  color: rgb(244 241 235 / 0.96);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  filter: drop-shadow(0 2px 14px rgb(0 0 0 / 0.55));
}
/* r89c: the brand's own lockup, centred on the cover (Kyle at 31:17 —
   "a box with the company brand name or logo"). */
/* 8/31: the lazy hover embed for wall brands without a cut local loop -
   same fade discipline as the <video> loops. */
.kls-partner-card .kls-partner-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 360ms ease; pointer-events: none; }
.kls-partner-card.is-embed-on .kls-partner-embed.is-ready { opacity: 1; }

.kls-partner-logo {
  position: absolute !important;
  z-index: 2;
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  max-width: 52% !important;
  max-height: 38% !important;
  transform: translate(-50%, -50%);
  object-fit: contain !important;
  inset: auto !important;
  filter: drop-shadow(0 2px 14px rgb(0 0 0 / 0.55));
  pointer-events: none;
}
.kls-partner-card::after {
  background: radial-gradient(ellipse 90% 80% at 50% 50%, rgb(4 5 7 / 0.38), rgb(4 5 7 / 0.12) 70%);
}
/* the lights dim around the hovered partner (Kyle at 30:50) */
.kls-partners-grid:hover .kls-partner-card:not(:hover) { opacity: 0.45; }
.kls-partners-grid .kls-partner-card:hover { transform: scale(1.02); }

/* ---- r89: shop cards brighten and come forward (Kyle at 35:52) ---- */
.definitive-interior .kls-shop-card {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.definitive-interior .kls-shop-card:hover { transform: scale(1.045); }
.definitive-interior .kls-shop-card:hover strong { color: rgb(244 241 235); }

/* ---- r89c (Giovani): the split footer is REVERTED — the centred
   composition stands. Orlando line stays gone; the credit stays. ---- */
.definitive-interior .footer-credit {
  color: rgb(244 241 235 / 0.38);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  transition: color 200ms ease;
}
.definitive-interior .footer-credit:hover { color: var(--kls-accent); }

/* ---- r89c: the dropdown's items arrive (staggered rise + accent
   arrow) — the interior universe's copy of the lead.css block,
   written the same round per the two-universe law. ---- */
.definitive-interior .nav-submenu a {
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 240ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease;
}
.definitive-interior .nav-group:hover .nav-submenu a,
.definitive-interior .nav-group:focus-within .nav-submenu a {
  opacity: 1;
  transform: none;
}
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(2) { transition-delay: 30ms; }
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(3) { transition-delay: 60ms; }
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(4) { transition-delay: 90ms; }
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(5) { transition-delay: 120ms; }
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(6) { transition-delay: 150ms; }
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(7) { transition-delay: 180ms; }
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(8) { transition-delay: 210ms; }
.definitive-interior .nav-submenu a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.45rem;
  opacity: 0;
  transform: translateX(-0.3rem);
  color: var(--kls-accent);
  transition: opacity 200ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.definitive-interior .nav-submenu a:hover::after,
.definitive-interior .nav-submenu a:focus-visible::after {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .definitive-interior .nav-submenu a { opacity: 1; transform: none; transition: none; }
}

/* r89c7: the Work menu carries nine doors now (Photo joined). */
.definitive-interior .nav-group:hover .nav-submenu a:nth-child(9) { transition-delay: 240ms; }

/* ---- r89c8: interior header fixes ---- */
/* The CTA hover was paper-on-paper (styles.css's old --ink hover). */
.definitive-interior .nav-cta:hover,
.definitive-interior .nav-cta:focus-visible {
  background: var(--int-paper);
  color: var(--int-bg);
}
/* No menu item may wrap — "Content Partners" broke to two lines and
   read as a phantom gap. The panel sizes to its longest door. */
.definitive-interior .nav-submenu {
  width: max-content;
  min-width: 12.5rem;
  max-width: 18rem;
}
.definitive-interior .nav-submenu a { white-space: nowrap; }
/* The premium glass (Giovani): deep blur + saturation lift + a top
   sheen; solid enough to read, alive enough to feel like material. */
.definitive-interior .nav-submenu {
  background:
    linear-gradient(rgb(244 241 235 / 0.05), rgb(244 241 235 / 0) 42%),
    rgb(12 13 18 / 0.84);
  -webkit-backdrop-filter: blur(30px) saturate(1.6) brightness(1.08);
  backdrop-filter: blur(30px) saturate(1.6) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgb(244 241 235 / 0.08),
    0 0 0 1px rgb(244 241 235 / 0.05),
    0 1.5rem 4rem rgb(0 0 0 / 0.55);
}

/* ---- r89c8: the lightbox — the wall blurs behind the frame; the
   number/headline meta is gone (it still updates for screen readers). ---- */
.photo-dialog::backdrop {
  background: rgb(4 5 8 / 0.42);
  -webkit-backdrop-filter: blur(26px) saturate(1.05);
  backdrop-filter: blur(26px) saturate(1.05);
}
.photo-dialog .photo-dialog-meta { display: none; }
.photo-dialog .photo-dialog-shell { will-change: transform; touch-action: pan-y; }

/* ============================================================ */
/* r90a — the Learn pages join the system (Giovani, 2026-08-18). */
/* ============================================================ */

/* Membership tiers, refined: quiet raise instead of a hard box, the
   accent carries the checks, the featured tier wears an accent ring.
   The li hairlines are gone — spacing does the separating. */
.definitive-interior .lrn-tier {
  border: 0;
  border-radius: 0.55rem;
  background: rgb(244 241 235 / 0.035);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.07);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease;
}
.definitive-interior .lrn-tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.12), 0 1.5rem 3.5rem rgb(0 0 0 / 0.4);
}
.definitive-interior .lrn-tier.is-feature {
  border: 0;
  background: rgb(244 241 235 / 0.05);
  box-shadow: 0 0 0 1px rgb(var(--kls-accent-rgb) / 0.45);
}
.definitive-interior .lrn-tier.is-feature:hover {
  box-shadow: 0 0 0 1px rgb(var(--kls-accent-rgb) / 0.65), 0 1.5rem 3.5rem rgb(0 0 0 / 0.4);
}
.definitive-interior .lrn-tier .lrn-list li,
.definitive-interior .lrn-tier .lrn-list li:first-child { border: 0; }
.definitive-interior .lrn-tier .lrn-list li {
  position: relative;
  padding: 0.42rem 0 0.42rem 1.5rem;
}
.definitive-interior .lrn-tier .lrn-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: rgb(var(--kls-accent-rgb) / 0.95);
  font-weight: 600;
}

/* The offer inventory: one quiet two-column checklist. */
.definitive-interior .lrn-inventory {
  columns: 2;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 700px) { .definitive-interior .lrn-inventory { columns: 1; } }
.definitive-interior .lrn-inventory li {
  position: relative;
  break-inside: avoid;
  padding: 0.42rem 0 0.42rem 1.5rem;
  color: rgb(244 241 235 / 0.78);
  font-size: 0.96rem;
  line-height: 1.55;
}
.definitive-interior .lrn-inventory li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: rgb(var(--kls-accent-rgb) / 0.95);
  font-weight: 600;
}

/* r90a: the offer's sub-heads — one size, the display voice, quiet. */
.definitive-interior .lrn-sub {
  margin: 1.9rem 0 0.5rem;
  font-family: var(--int-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.definitive-interior .lrn-split-text .lrn-sub:first-child { margin-top: 0; }

/* ---- r90b3: REAL glass — same decision as lead.css, same round.
   visibility gates the panel (animated opacity kills backdrop-filter
   in Chromium); the items carry the fade. ---- */
.definitive-interior .nav-submenu {
  opacity: 1;
  visibility: hidden;
  background:
    linear-gradient(rgb(244 241 235 / 0.05), rgb(244 241 235 / 0) 42%),
    rgb(11 12 17 / 0.58);
  -webkit-backdrop-filter: blur(44px) saturate(1.7) brightness(1.1);
  backdrop-filter: blur(44px) saturate(1.7) brightness(1.1);
  transition: visibility 0s linear 220ms, transform 320ms var(--int-ease);
}
.definitive-interior .nav-group:hover .nav-submenu,
.definitive-interior .nav-group:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s, transform 320ms var(--int-ease);
}

/* r90f: legibility is law — near-solid panel ground, blur stays as
   enhancement (same decision as lead.css, same round). */
/* r91: fully opaque ground — 0.96 still leaked bright type through
   the panel (same fix as lead.css, same round). */
.definitive-interior .nav-submenu {
  background:
    linear-gradient(rgb(244 241 235 / 0.06), rgb(244 241 235 / 0) 45%),
    rgb(10 11 15);
}

/* r90g: the accent's bloom on interiors — same decision, same round. */
.definitive-interior .lrn-hero h1 em,
.definitive-interior .lrn-head h2 em,
.definitive-interior h1[data-archive-title] em,
.definitive-interior .archive-pager-kicker,
.kls-partner-name {
  text-shadow: 0 0 20px rgb(var(--kls-accent-rgb) / 0.4);
}

/* ---- r90n: the partner lockup renders at a REAL size. The auto-sizing
   collapsed to 0x0 on dimensionless SVGs, and the earlier rule's
   inset/top declaration order self-conflicted. Explicit box + contain. ---- */
.kls-partner-logo {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  width: 52% !important;
  height: 38% !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%);
  object-fit: contain !important;
  filter: drop-shadow(0 2px 14px rgb(0 0 0 / 0.55));
  pointer-events: none;
}

/* r93 (Giovani, pre-call): the condensed interior fold — the Irvin-contact
   register. Title and lede up top, the page's content arrives without a
   full-viewport hold. Shop and Contact wear it. */
.definitive-interior .lrn-hero.is-snug {
  min-height: 0;
  padding-top: clamp(6.4rem, 11vh, 8rem);
  padding-bottom: clamp(2.2rem, 4.5vh, 3.2rem);
}
.definitive-interior .lrn-hero.is-snug .lrn-hero-inner { gap: 0.8rem; }


/* ---- r90-call-19 (2026-08-22): the field is drawn by sky.js now -----------

   Giovani: "the galaxies across the whole website look more like floating
   orbs rather than a nebula galaxy." The interior field was three
   radial-gradient dots tiled on a 170/230/290px grid - a repeating pattern
   of discs. sky.js mounts a canvas (.int-sky-canvas) as the first child of
   every .int-sky section and of the footer; the rules below give those
   canvases the EXACT position, depth and masks the ::after / ::before tiles
   had, and switch the tiles off. The masks are the law that no field ever
   draws an edge: every canvas can only fade in and fade out. */
.definitive-interior .int-sky::after,
.definitive-interior .site-footer::before {
  background: none;
  animation: none;
}
.definitive-interior .int-sky > .int-sky-canvas,
.definitive-interior .int-sky:not(.lrn-hero):not(.lrn-plate) > .int-sky-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.definitive-interior .int-sky.is-fold > .int-sky-canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 64%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 64%, transparent 100%);
}
/* a fold or a plate keeps its picture on a negative layer; the field rides
   at the same depth, painted after */
.definitive-interior .lrn-hero.int-sky > .int-sky-canvas,
.definitive-interior .lrn-plate.int-sky > .int-sky-canvas { z-index: -1; }
/* a fold with a photograph never carries the field at full strength from
   its own top edge */
.definitive-interior .lrn-hero.int-sky:not(.is-plain) > .int-sky-canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 62%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 62%, #000 100%);
}
/* the footer's field rises --int-sky-rise above the footer into the section
   over it, and only arrives through the bottom of that rise (the measured
   mask from the r37 pass, unchanged) */
.definitive-interior .site-footer > .int-sky-canvas.is-footer {
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--int-sky-rise, 16rem));
  left: 0;
  width: 100%;
  height: calc(100% + var(--int-sky-rise, 16rem));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 60%, rgba(0, 0, 0, 0.42) 79%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 60%, rgba(0, 0, 0, 0.42) 79%, #000 100%);
}

/* 9/1 (Giovani): the legal pages' headline band no longer holds a full
   fold - the copy follows the headline instead of a screen of sky. */
body.privacy-page .lrn-hero.is-fold,
body.terms-page .lrn-hero.is-fold,
body.discounts-page .lrn-hero.is-fold {
  min-height: 0;
  padding: clamp(6.5rem, 13vh, 8.5rem) var(--int-pad) clamp(1.4rem, 3vh, 2rem);
}
/* 9/1 call (Kyle): "negative space before the content starts - bring that
   up". The headline sits a header's height under the header and the copy
   follows it at once; the sky stays as the ground, not as a fold. */
body.privacy-page .lrn-hero.is-fold .lrn-lede,
body.terms-page .lrn-hero.is-fold .lrn-lede,
body.discounts-page .lrn-hero.is-fold .lrn-lede { margin-bottom: 0; }