/* lnx.css — LAB layer (kls-lab, lab/loom-round): the sections and tunings
   born from Kyle's 8/26 Loom. Values that survive his review graduate into
   lead.css / learn.css and the constitution. Accent still --kls-accent;
   swaps sitewide the moment Kyle's KLS-Colors hex lands. */

/* The services marquee (Loom 06:37, hoang est-strip) lived here until 8/30 —
   removed with its markup (Giovani: Squarespace-generic; Tuesday approval
   item since Kyle asked for it). */

/* ---- stat ticker (Loom 02:22; count-up 5-6s + reverse on exit, 8/25 call) ---- */
.lnx-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2.8rem, 6vh, 4.5rem) clamp(1.2rem, 4vw, 3rem);
  text-align: center;
}
.lnx-stat strong {
  display: block;
  font-family: var(--def-display, "Playfair Display", serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.04;
  color: rgb(244 241 235);
  font-variant-numeric: tabular-nums;
}
.lnx-stat span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgb(244 241 235 / 0.48);
}
.lnx-stat { padding: 0.4rem 0.8rem; }
.lnx-stat + .lnx-stat { border-left: 1px solid rgb(244 241 235 / 0.1); }
@media (max-width: 760px) {
  .lnx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .lnx-stat + .lnx-stat { border-left: 0; }
  .lnx-stat:nth-child(even) { border-left: 1px solid rgb(244 241 235 / 0.1); }
}

/* ---- learn rows (Loom 02:55, hoang list) ---- */
/* 9/1 (Kyle: the video sat on the subline): the rows open at the page's
   own head-to-content rhythm - definitive.css's .def-section-head
   margin-bottom, the measure Expertise and Behind The Scenes already keep. */
.lnx-learn-rows { display: grid; gap: clamp(4rem, 9vh, 6.5rem); max-width: 82rem; margin: clamp(2.8rem, 5vw, 5rem) auto 0; padding: 0 clamp(1.2rem, 4vw, 3rem); }
.lnx-lrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
.lnx-lrow.is-flip .lnx-lcopy { order: 2; }
.lnx-lrow.is-flip .lnx-lmedia { order: 1; }
/* 9/1 (Kyle): the 01 / 02 numerals and their hairlines are OFF the
   homepage rows (no other section carries them - "it breaks the shell").
   These three rules stay only because connected.html still holds a copy of
   that markup; delete them with it. */
.lnx-index { display: flex; align-items: center; gap: 1.1rem; }
.lnx-index i { flex: 1; height: 1px; background: rgb(244 241 235 / 0.16); }
.lnx-no {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--kls-accent, #fb5607);
}
/* 9/1 (Kyle: "uniformity is the bigger thing"): the card title takes the
   Expertise rail's discipline-name measure (lead.css .kls-disc-card h3) -
   one token per role. Same selector weight as that rule, so uniform.css's
   generic section-h3 size cannot outrank it; the top margin that once
   spaced the title off the numeral goes with the numeral. */
.definitive-site.is-lead .lnx-lcopy h3 {
  margin: 0 0 0.9rem;
  font-family: var(--def-display);
  font-size: clamp(1.55rem, 2.85vw, 2.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (max-width: 899px) {
  .definitive-site.is-lead .lnx-lcopy h3 { font-size: clamp(1.5rem, 6.6vw, 2.1rem); }
}
.lnx-lcopy p { margin: 0 0 1.4rem; color: rgb(244 241 235 / 0.68); line-height: 1.65; max-width: 34rem; }
.lnx-lmedia { margin: 0; position: relative; border-radius: 0.4rem; overflow: hidden; background: #0d0f14; box-shadow: 0 0 0 1px rgb(244 241 235 / 0.08); }
.lnx-lmedia button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.lnx-lmedia img, .lnx-lmedia video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 860px) {
  .lnx-lrow, .lnx-lrow.is-flip { grid-template-columns: 1fr; }
  .lnx-lrow.is-flip .lnx-lcopy { order: 1; }
  .lnx-lrow.is-flip .lnx-lmedia { order: 2; }
}

/* ---- craft / process (Loom 05:58 + Canva pp.5-6) ---- */
/* 9/1 (Kyle: "why is the background a different color?"): no ground of its
   own - the section sits on the shell like its neighbours. */
.lnx-craft { padding: clamp(3.4rem, 8vh, 6rem) clamp(1.2rem, 4vw, 3rem); }
.lnx-craft .def-section-head { justify-content: center; text-align: center; }
.lnx-craft .def-section-head .def-section-sub { margin-left: auto; margin-right: auto; }
.lnx-craft-inner { max-width: 82rem; margin: 0 auto; }
/* craft-grid + 3-step row retired 8/31 - the flow spine below is the one model */

/* ---- behind the scenes (Loom 45:51; 9/1 Kyle): two full-bleed rows of
   stills drifting opposite ways - the reviews rail's counter-drift carried
   into photography. The drift is written per frame by the section's own
   script (the More Work rail's hand: 26 / 22 px/s, hover eases it to a
   quarter, never a stop); the keyframes here are the no-JS fallback, and
   the rail marks itself is-driven the moment the script takes over.
   Reduced motion: static, scrollable rows. Every still opens the site's
   photo viewer. ---- */
.lnx-bts { padding: clamp(3.4rem, 8vh, 6rem) 0; }
.lnx-bts .def-section-head { padding: 0 clamp(1.2rem, 4vw, 3rem); justify-content: center; text-align: center; }
.lnx-bts .def-section-head .def-section-sub { margin-left: auto; margin-right: auto; }
.lnx-bts-rail { overflow: hidden; margin: clamp(1.8rem, 4vh, 2.8rem) 0 0; }
.lnx-bts-track { display: flex; gap: 10px; width: max-content; animation: lnx-bts-pan 52s linear infinite; }
.lnx-bts-track + .lnx-bts-track { margin-top: 10px; }
.lnx-bts-track.is-reverse { animation-name: lnx-bts-pan-r; }
.lnx-bts-rail.is-driven .lnx-bts-track { animation: none; will-change: transform; }
.lnx-bts-track figure { margin: 0; flex: 0 0 auto; }
.lnx-bts-track img { display: block; height: clamp(230px, 32vh, 340px); width: auto; border-radius: 0.4rem; }
/* a frame is a door (the galleries' law, case-study.css .is-photo): the
   pointer, a breath of lift, and the focus ring keyboard visitors get on
   the studio frame */
.lnx-bts-track figure.is-photo { overflow: hidden; border-radius: 0.4rem; cursor: pointer; }
.lnx-bts-track figure.is-photo img { transition: transform 700ms cubic-bezier(0.22, 0.61, 0.21, 1), filter 360ms ease; }
.lnx-bts-track figure.is-photo:hover img,
.lnx-bts-track figure.is-photo:focus-visible img { transform: scale(1.035); filter: brightness(1.06); }
.lnx-bts-track figure.is-photo:focus-visible { outline: 1px solid rgb(244 241 235 / 0.6); outline-offset: 3px; }
@keyframes lnx-bts-pan { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lnx-bts-pan-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .lnx-bts-rail { overflow-x: auto; }
  .lnx-bts-track, .lnx-bts-track.is-reverse { animation: none; }
  .lnx-bts-track figure.is-photo img { transition: none; }
}
/* the button under the rows is gone from the homepage (9/1 Kyle); this
   rule stays only for connected.html's copy of the old strip. */
.lnx-bts-cta { display: flex; justify-content: center; padding: 0.6rem clamp(1.2rem, 4vw, 3rem) 0; }

/* ---- ticker marks (Pepsi / Timberland name-flexes ride the same lane) ---- */
.lnx-mark { display: inline-flex; }

/* ---- the sky, dialed (Loom 01:57, 04:47, 20:06): gradient OFF by default
   on the lab; the pill flips 10% for Kyle's comparison ---- */
body.lnx-g0 .galaxy-vignette { opacity: 0 !important; }
body.lnx-g10 .galaxy-vignette { opacity: 0.1 !important; }


/* ---- money cards read LOUD (Loom 17:48): figure + client above, larger ---- */
.kls-learn .ln-proof figcaption.lnx-loud { display: flex; flex-direction: column-reverse; gap: 0.2rem; }
.kls-learn .ln-proof figcaption.lnx-loud .fig { font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: rgb(244 241 235); }

/* ---- clean pages: shop + acting lose the stars (Loom 07:15, 16:26) ---- */
body.shop-page .kls-sky-canvas,
body.shop-page .int-sky::before,
body.acting-page .kls-sky-canvas,
body.acting-page .int-sky::before { display: none !important; opacity: 0 !important; }

/* ---- course-page vignettes, lighter (Loom 16:57, 29:08) ---- */
.kls-learn .ln-hero::after {
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgb(6 7 10 / 0.04), rgb(6 7 10 / 0.34) 82%),
    linear-gradient(to bottom, rgb(6 7 10 / 0.42), transparent 32%, transparent 66%, rgb(6 7 10 / 0.94)) !important;
}
.kls-learn .ln-plate::after { background: rgb(4 5 7 / 0.42) !important; }


/* ---- Meet Your Coach reads BIG (Loom 22:54: video too small) ---- */
.kls-learn .ln-split.is-coach { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.kls-learn .ln-split.is-coach .ln-vcard img { aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- coach proof band (Loom 23:12 stats + 24:10 client marks) ---- */
.lnx-coach-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; margin-bottom: clamp(2rem, 4vh, 3rem); }
.lnx-coach-stats > div { padding: 0.4rem 0.8rem; }
.lnx-coach-stats > div + div { border-left: 1px solid rgb(244 241 235 / 0.1); }
.lnx-coach-stats strong { display: block; font-family: var(--int-display, "Playfair Display", serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: rgb(244 241 235); font-variant-numeric: tabular-nums; }
.lnx-coach-stats span { display: block; margin-top: 0.35rem; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(244 241 235 / 0.55); }
.lnx-coach-marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.4rem, 3.5vw, 3rem); opacity: 0.85; }
.lnx-coach-marks img { height: 1.4rem; width: auto; }
.lnx-coach-marks img[alt="Pepsi"] { height: 1.85rem; }
.lnx-coach-marks img[alt="Gatorade"] { height: 1.7rem; }
.lnx-coach-marks img[alt="Barilla"] { height: 2.1rem; }
.lnx-coach-marks img[alt="Timberland"] { height: 1.6rem; }
.lnx-coach-marks img[alt="Puma"] { height: 1.25rem; }
.lnx-coach-marks img[alt="Hume Health"] { height: 1.15rem; }
@media (max-width: 720px) {
  .lnx-coach-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .lnx-coach-stats > div + div { border-left: 0; }
  .lnx-coach-stats > div:nth-child(even) { border-left: 1px solid rgb(244 241 235 / 0.1); }
}

/* ---- photo wall drift, a touch more alive (Loom 14:26) ---- */
@keyframes photo-runway-shift {
  from { transform: translateX(4.5vw) rotate(-2deg) scale(1.05); }
  to { transform: translateX(-7vw) rotate(-2deg) scale(1.05); }
}

/* ---- first-load loader: colored, builds with the opening (Loom 00:36) ---- */
.lnx-loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 2000;
  background: transparent;
  pointer-events: none;
}
.lnx-loader i {
  display: block; height: 100%;
  background: var(--kls-accent, #fb5607);
  transform-origin: left;
  transform: scaleX(0);
  animation: lnx-load 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes lnx-load { to { transform: scaleX(1); } }
/* The fade must not depend on a timer: iOS Low Power Mode throttles
   setTimeout until first interaction, so the built bar sat FULL across the
   top until the visitor touched the screen (Giovani, 8/30, 18% battery).
   The bar now retires itself in pure CSS - build 1s, hold a beat, gone -
   and the JS timers merely remove the dead node whenever they wake. */
.lnx-loader { animation: lnx-loader-hide 400ms ease 2.1s forwards; }
@keyframes lnx-loader-hide { to { opacity: 0; } }
.lnx-loader.is-done { opacity: 0; transition: opacity 500ms ease 250ms; }
@media (prefers-reduced-motion: reduce) { .lnx-loader { display: none; } }

/* ---- the Automation Station, uncaged (Giovani 8/27): the bundle cover
   anchors an open split; the inventory is a reading column, not a form. ---- */


/* ---- the studio story w/ receipts (8/31, Giovani's client-results
   reference): claim left, proof numbers under it, the reel in a frame at
   right, the proposal-deck crew roster across the bottom. Reuses .lnx-stat
   for the numbers so the count-up engine binds unchanged; alignment and
   the third context line are scoped here. ---- */
.kls-studio {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(3.4rem, 8vh, 6rem) clamp(1.2rem, 4vw, 3rem) clamp(2.6rem, 6vh, 4.2rem);
}
.kls-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.6rem, 5vw, 5.5rem);
  align-items: center; /* the reference's frame rides taller than the copy
                          and centres against it - top-aligning left it
                          hanging (Giovani: "spaced out funny") */
}
.kls-studio .def-section-head { margin: 0 0 clamp(1.6rem, 3.5vh, 2.4rem); text-align: left; }
/* The headline's size lives with the OTHER section heads: lead.css's
   is-lead role rule (#studio-story-title joined the id list there) - one
   measure per role, no local value. Only the alignment is scoped here. */
.kls-studio .def-section-head h2 { text-align: left; }
.kls-studio .def-section-sub { margin-left: 0; max-width: 30rem; text-align: left; }
.kls-studio-stats {
  /* 2x2 on the subheadline's measure (Giovani 8/31, final): four across
     strangled the register - the reference's calm comes from two chunky
     columns hugging the left edge, numbers with real weight. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 13rem));
  gap: clamp(1.4rem, 2.8vh, 2rem) clamp(1.6rem, 3vw, 2.6rem);
  margin-top: clamp(1.8rem, 3.6vh, 2.6rem);
}
.kls-studio-stats .lnx-stat strong { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }
/* Reference-pure (Giovani 8/31 final): NO rules on the proof block - the
   viral-sma stats are naked typographic columns and every hairline we
   added read as table chrome. Kill the inherited band borders too. */
.kls-studio-stats .lnx-stat { text-align: left; padding: 0; border: 0 !important; }
.kls-studio-stats .lnx-stat small {
  display: block;
  margin-top: 0.3rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(244 241 235 / 0.32);
}
.kls-studio-frame {
  margin: 0;
  position: relative;
  justify-self: end;
  width: 100%;
  border: 1px solid rgb(244 241 235 / 0.12);
  aspect-ratio: 16 / 9; /* horizontal, playable (Giovani 8/31) */
  overflow: hidden;
  background: #08090d;
}
.kls-studio-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .kls-studio-grid { grid-template-columns: 1fr; gap: 2rem; }
  .kls-studio-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kls-studio-frame { justify-self: stretch; aspect-ratio: 16 / 9; }
}

/* The frame is the play control: the site cursor carries the PLAY disc
   over it (data-cursor="play"); a keyboard visitor gets the focus ring. */
.kls-studio-frame:focus-visible { outline: 1px solid rgb(244 241 235 / 0.6); outline-offset: 3px; }

/* ---- introducing your director, in cutouts (8/31 v2, Giovani's mockup):
   three slanted cuts - one large, two stacked beside it - Kyle in every
   frame. The collage holds a window (~34rem), never the viewport. ---- */
.kls-dir-cut {
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  max-width: 34rem;
}
.kls-dir-cut img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kls-dir-cut-a {
  grid-row: 1 / 3;
  min-height: clamp(300px, 40vh, 430px);
  object-position: 50% 18%; /* the portrait is taller than the slot - keep
                               the face and shoulders, crop the knees */
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}
.kls-dir-cut-b { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.kls-dir-cut-c { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }



/* ---- the flow (8/31, sevora reference translated; 9/1 Kyle's shell
   clean-up): sticky claim left, the 01-04 stages right as hairline LEDGER
   ROWS - a 1px rule in the site's rule ink, the index in the uniform
   label voice (the film-roll counter's), the title on the section-name
   token Expertise and Learn share. No ground, no panels, no filled nodes,
   no accent, no drawn spine, no sliding acquisition: the states lnx.js
   still toggles (is-past one-way, is-live with the scroll) read as ink
   weight only - upcoming muted, past the row's normal ink, live full ink.
   A fuller redesign is scoped separately; this is the tonight version. ---- */
.kls-flow {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.4rem, 5vw, 6rem);
  max-width: 72rem;
  margin: 0 auto;
}
.kls-flow-head { align-self: start; position: sticky; top: clamp(5rem, 12vh, 7.5rem); }
.kls-flow .def-section-head { margin: 0 0 1.4rem; text-align: left; }
.kls-flow .def-section-head h2 { text-align: left; }
.kls-flow .def-section-sub { margin-left: 0; text-align: left; max-width: 26rem; }
.kls-flow-close { margin: 0; font-family: var(--def-display, "Playfair Display", serif); font-size: 1.08rem; line-height: 1.55; color: rgb(244 241 235 / 0.82); max-width: 24rem; }
.kls-flow-close em { font-style: italic; } /* 9/1 (Kyle): no orange in paragraphs - italic only */
.kls-flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0; /* the rules are the rhythm */
}
/* the row: index label and stage on one grid, baseline-aligned, the
   rule above; row padding is the Learn index rows' measure (lead.css
   .dlx-row) */
.kls-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: baseline;
  padding: clamp(1.3rem, 2.6vh, 2rem) 0;
  border-top: 1px solid rgb(244 241 235 / 0.16);
}
/* the index: the uniform label voice, exactly the film-roll counter's
   ("01 / 07" - .def-film-controls small in uniform.css): body family,
   --u-label / --u-track, --u-ink-3 when upcoming */
.kls-flow-node {
  font-size: var(--u-label);
  letter-spacing: var(--u-track);
  color: var(--u-ink-3);
  transition: color 400ms ease;
}
.kls-flow-card { padding: 0; }
/* the stage title on the section-name token (lead.css .kls-disc-card h3,
   lnx.css .lnx-lcopy h3) - the three agree; same selector weight so
   uniform.css's generic section-h3 size cannot outrank it */
.definitive-site.is-lead .kls-flow-card h3 {
  margin: 0 0 0.55rem;
  font-family: var(--def-display);
  font-size: clamp(1.55rem, 2.85vw, 2.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--u-ink-3);
  transition: color 400ms ease;
}
.kls-flow-card p { margin: 0; color: var(--u-ink-3); font-size: 0.92rem; line-height: 1.65; transition: color 400ms ease; }
/* past: the row's normal ink */
.kls-flow-step.is-past .kls-flow-node { color: var(--u-ink-2); }
.definitive-site.is-lead .kls-flow-step.is-past .kls-flow-card h3 { color: rgb(244 241 235 / 0.94); }
.kls-flow-step.is-past .kls-flow-card p { color: rgb(244 241 235 / 0.62); }
/* live: full ink, the paragraph a breath brighter */
.kls-flow-step.is-live .kls-flow-node { color: var(--u-ink); }
.definitive-site.is-lead .kls-flow-step.is-live .kls-flow-card h3 { color: var(--u-ink); }
.kls-flow-step.is-live .kls-flow-card p { color: var(--u-ink-2); }
@media (prefers-reduced-motion: reduce) {
  .kls-flow-node, .kls-flow-card h3, .kls-flow-card p { transition: none; }
}
/* kls-lowpower: lnx.js marks every step is-past up front; the rows simply
   sit in their rested ink - nothing further to gate here. */
@media (max-width: 899px) {
  .definitive-site.is-lead .kls-flow-card h3 { font-size: clamp(1.5rem, 6.6vw, 2.1rem); }
}
@media (max-width: 900px) {
  .kls-flow { grid-template-columns: 1fr; }
  .kls-flow-head { position: static; }
}

/* ---- from the blog (Giovani, Orionix reference — STRUCTURE only) ----------
   The reference gave us the shape: one head row with the headline left and
   "View All Articles" right, three post cards beneath. The look is ours —
   night ground, hairline, Playfair with the italic accent word, IBM Plex
   Mono furniture, square corners, no cards-as-panels.

   The card presentation is NOT invented here: it is blog/index.html's own
   `.blg-card` rules carried over under scoped names so the homepage preview
   and the archive read as one system. Values copied as-is (16/10 media,
   0.35rem radius, the 0.58rem mono meta with the accent date, the 1.08rem
   Playfair title, the 0.82rem two-line sub) — no drift.

   Reveal: the section head and sub carry data-def-reveal; the cards' h3/p
   are picked up by the site-wide engine (.kls-r) on their own, so nothing
   here sets opacity and nothing fights it. */
.kls-blogprev {
  padding: var(--sec-pad-y) clamp(1.2rem, 4vw, 3rem);
}
.kls-blogprev-inner {
  max-width: var(--sec-measure);
  margin: 0 auto;
}

/* The head. `.def-section-head` is already flex/space-between — this trades
   its flex-end for a true shared baseline (the link's text sits ON the
   headline's baseline, not under its descenders), lets the row wrap, and
   drops the bottom margin because the grid states its own top.
   The subline is a full-width third child, so it takes the second line while
   headline and link share the first: DOM order stays headline → subline →
   link, which is also the phone order. */
.definitive-site .kls-blogprev-head {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 0;
  text-align: left;
}
.definitive-site .kls-blogprev-head h2 {
  order: 1;
  margin: 0;
  font-size: var(--t-h2-sm);
  letter-spacing: -0.02em;
  line-height: var(--leading-display);
  text-align: left;
}
/* The italic accent word is NOT restated here: `.is-lead h2 em` already
   carries the site's italic + accent + bloom. One rule, one convention. */
.definitive-site .kls-blogprev-head > .def-arrow-link {
  order: 2;
  flex: none;
  white-space: nowrap;
}
.definitive-site .kls-blogprev-sub {
  order: 3;
  flex: none;
  width: 100%;
  margin: clamp(0.8rem, 1.4vw, 1.1rem) 0 0;
  max-width: 40rem;
}

.kls-blogprev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.2vw, 2rem);
  margin-top: clamp(2.2rem, 4.5vh, 3.4rem);
}

/* ---- the card (from blog/index.html `.blg-card`) ---- */
.kls-blogprev-card { display: block; text-decoration: none; color: inherit; min-width: 0; }
.kls-blogprev-media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0.35rem; background: #0d0f14; box-shadow: 0 0 0 1px rgb(244 241 235 / 0.06); }
.kls-blogprev-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82) saturate(0.96); transition: filter 360ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.21, 1); }
.kls-blogprev-card:hover .kls-blogprev-media img { filter: brightness(1) saturate(1); transform: scale(1.03); }
.kls-blogprev-meta { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0.35rem; font-family: "IBM Plex Mono", monospace; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(244 241 235 / 0.5); }
.kls-blogprev-meta time { color: var(--kls-accent, #fb5607); }
.kls-blogprev-meta i { font-style: normal; opacity: 0.45; }
.kls-blogprev-meta b { font-weight: 400; color: rgb(244 241 235 / 0.72); }
.definitive-site .kls-blogprev-card h3 { display: block; margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 1.08rem; letter-spacing: normal; line-height: 1.32; color: rgb(244 241 235 / 0.94); transition: color 240ms ease; }
.definitive-site .kls-blogprev-card:hover h3 { color: var(--kls-accent, #fb5607); }
.definitive-site .kls-blogprev-cardsub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: none; margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.55; color: rgb(244 241 235 / 0.55); }

@media (max-width: 1020px) {
  .kls-blogprev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* At 700 the site's own law turns every section head into a centred column,
   so the button drops under the headline on its own — this only carries the
   headline and sub with it and drops the grid to one column. */
@media (max-width: 700px) {
  .definitive-site .kls-blogprev-head { align-items: center; text-align: center; }
  .definitive-site .kls-blogprev-head h2 { text-align: center; }
  /* The column reorders to reading order: headline, subline, then the link
     under both — the site's own gap carries the rhythm, so the subline's
     desktop top margin comes off. */
  .definitive-site .kls-blogprev-sub { order: 2; margin: 0 auto; text-align: center; }
  .definitive-site .kls-blogprev-head > .def-arrow-link { order: 3; }
  .kls-blogprev-grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.6rem); }
}


/* ============================================================ */
/* 9/1 PM mobile pass (Giovani, 390) - homepage sections.        */
/* ============================================================ */
.lnx-bts-rail { touch-action: pan-y; } /* the rows scrub sideways under a finger; the page still scrolls */
@media (max-width: 720px) {
  /* 1. The Studio Behind The Stories: the headline sits on the sub's axis; the four stats centre */
  .kls-studio .def-section-head h2 { text-align: center; }
  .kls-studio-stats { justify-items: center; }
  .kls-studio-stats .lnx-stat { text-align: center; }
  /* 2. What We Do: the headline and the closing couplet on the sub's axis */
  .kls-flow .def-section-head h2 { text-align: center; }
  .kls-flow-close { text-align: center; }
  /* 4. Introducing Your Director: the collage is a window, not the width */
  .def-about .kls-dir-cut { max-width: 100%; gap: 7px; } /* 9/2 (Giovani): the collage holds its desktop measure on phones */
  .def-about .kls-dir-cut-a { min-height: clamp(210px, 58vw, 290px); }
  /* 6. Learn From Kyle rows: everything centred, and the CTA comes AFTER the
     film (title, line, film, button) - the copy box dissolves so its
     children can take their places around the figure */
  .lnx-learn-rows { gap: clamp(3rem, 8vh, 4.5rem); }
  .lnx-lrow, .lnx-lrow.is-flip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
  .lnx-lcopy { display: contents; }
  .definitive-site.is-lead .lnx-lcopy h3 { order: 1; margin: 0 0 0.6rem; }
  .lnx-lcopy p { order: 2; margin: 0 0 1.1rem; }
  .lnx-lrow .lnx-lmedia, .lnx-lrow.is-flip .lnx-lmedia { order: 3; width: 100%; }
  .lnx-lcopy .lead-btn { order: 4; margin-top: 1.1rem; }
  /* 8. Behind The Scenes: shorter rows so two and a half stills read at once */
  .lnx-bts-track img { height: clamp(128px, 36vw, 168px); }
  .lnx-bts-track { gap: 7px; }
  .lnx-bts-track + .lnx-bts-track { margin-top: 7px; }
}