/* mobile.css — responsive overrides for the public site.
   Desktop layout is preserved as-is. All mobile rules live behind @media
   queries so they never affect ≥769px viewports.

   The site uses heavy inline styles, so most overrides are attribute-
   selector based with !important to win against the inline values.
   The patterns mirror the actual JSX:
     gridTemplateColumns: 'repeat(N, 1fr)'   → 'grid-template-columns: repeat(N, 1fr)'
     gridTemplateColumns: '1fr 2fr'          → 'grid-template-columns: 1fr 2fr'
   etc. Spacing is preserved exactly as React serialises it. */

html, body { overflow-x: hidden; }

/* ─────────────────────────────────────────────────────────────────
   NAV — desktop default: show inline links, hide hamburger.
   ──────────────────────────────────────────────────────────────── */
.c1-nav-burger { display: none !important; }
.c1-nav-links  { display: flex; }

/* Scope sub-menu (desktop hover dropdown) ----------------------- */
.c1-nav-dropdown { position: relative; }
.c1-nav-dropdown-trigger { cursor: pointer; user-select: none; outline: none; }
.c1-nav-dropdown-panel {
  position: absolute; top: 100%; left: 0;
  z-index: 60;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 22px;
  background: #0a0908;
  border: 1px solid rgba(240,235,226,.18);
  margin-top: 18px;
  min-width: 180px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
  /* Escape the parent nav's mix-blend-mode so the panel renders solid */
  mix-blend-mode: normal;
  isolation: isolate;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.c1-nav-dropdown:hover .c1-nav-dropdown-panel,
.c1-nav-dropdown:focus-within .c1-nav-dropdown-panel {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
/* A tiny invisible bridge so the cursor doesn't drop the hover when
   moving from the trigger down to the panel. */
.c1-nav-dropdown::before {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 18px;
  pointer-events: none;
}
.c1-nav-dropdown:hover::before { pointer-events: auto; }
.c1-nav-dropdown-panel a {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(240,235,226,.85);
}
.c1-nav-dropdown-panel a:hover { color: var(--accent, #991539); }
/* Stories carousel arrows — hidden on desktop */
.c1-stories-arrows { display: none !important; }

/* "Next scope" arrow on individual scope pages — extends + tints
   to the accent on hover (desktop) and on tap (mobile/touch).
   Minimal hairline + thin chevron. */
.c1-scope-next:hover .c1-scope-next-arrow,
.c1-scope-next:active .c1-scope-next-arrow,
.c1-scope-next:focus-visible .c1-scope-next-arrow {
  color: var(--accent, #991539);
  transform: translateX(10px);
}
.c1-scope-next:hover .c1-scope-next-rule,
.c1-scope-next:active .c1-scope-next-rule,
.c1-scope-next:focus-visible .c1-scope-next-rule {
  width: 84px;
}

/* ─────────────────────────────────────────────────────────────────
   PHONE  (≤ 768px)  — single-column, tighter padding, smaller chrome
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav: hide inline links, show hamburger */
  .c1-nav-links { display: none !important; }
  .c1-nav-burger { display: inline-flex !important; }
  .c1-nav-right { gap: 0 !important; }


  /* Stack repeat(N,…) grids ----------------------------------- */
  [style*="grid-template-columns: repeat(2,"],
  [style*="grid-template-columns: repeat(3,"],
  [style*="grid-template-columns: repeat(4,"],
  [style*="grid-template-columns: repeat(5,"],
  [style*="grid-template-columns: repeat(6,"],
  [style*="grid-template-columns: repeat(8,"],
  [style*="grid-template-columns: repeat(12,"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Stack explicit fr / auto fraction layouts ----------------- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 3fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 2.4fr"],
  [style*="grid-template-columns: 2.4fr 1fr"],
  [style*="grid-template-columns: 2.6fr 1fr"],
  [style*="grid-template-columns: 1fr 2.6fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1fr auto 1fr"],
  [style*="grid-template-columns: 1fr auto"],
  [style*="grid-template-columns: auto 1fr"],
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns: 180px 1fr 80px"],
  [style*="grid-template-columns: 80px 80px 1.6fr"],
  [style*="grid-template-columns: 80px 2fr"],
  [style*="grid-template-columns: 110px 1.4fr"],
  [style*="grid-template-columns: 120px 1.4fr"],
  [style*="grid-template-columns: 140px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Reduce big horizontal padding (28px → 16px, 40px → 16px) - */
  [style*="padding: 22px 28px"],
  [style*="padding: 24px 28px"],
  [style*="padding: 28px 28px"],
  [style*="padding: 32px 28px"],
  [style*="padding: 60px 28px"],
  [style*="padding: 80px 28px"],
  [style*="padding: 90px 28px"],
  [style*="padding: 100px 28px"],
  [style*="padding: 110px 28px"],
  [style*="padding: 120px 28px"],
  [style*="padding: 140px 28px"],
  [style*="padding: 160px 28px"],
  [style*="padding: 180px 28px"] { padding-left: 16px !important; padding-right: 16px !important; }

  [style*="padding: 22px 40px"],
  [style*="padding: 24px 40px"],
  [style*="padding: 32px 40px"],
  [style*="padding: 40px 40px"],
  [style*="padding: 60px 40px"],
  [style*="padding: 80px 40px"],
  [style*="padding: 100px 40px"],
  [style*="padding: 120px 40px"],
  [style*="padding: 140px 40px"],
  [style*="padding: 160px 40px"],
  [style*="padding: 180px 40px"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Vertical padding compression for tall sections ----------- */
  [style*="padding: 180px 40px"],
  [style*="padding: 180px 28px"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [style*="padding: 160px 40px"],
  [style*="padding: 160px 28px"] { padding-top: 70px !important; padding-bottom: 70px !important; }
  [style*="padding: 140px 40px"],
  [style*="padding: 140px 28px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 120px 40px"],
  [style*="padding: 120px 28px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 110px 28px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [style*="padding: 100px 28px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="padding: 90px 28px"]  { padding-top: 36px !important; padding-bottom: 36px !important; }
  [style*="padding: 80px 28px"]  { padding-top: 32px !important; padding-bottom: 32px !important; }

  /* Direction-Noir hero (180px 40px stacked variant) --------- */
  [style*="padding: '180px 40px 60px'"],
  [style*="padding: 180px 40px 60px"],
  [style*="padding: 160px 40px 60px"] { padding: 110px 16px 40px !important; }
  [style*="padding: 140px 40px 60px"] { padding: 110px 16px 40px !important; }
  [style*="padding: 140px 28px 50px"] { padding: 100px 16px 40px !important; }
  [style*="padding: 120px 28px 60px"] { padding: 90px 16px 40px !important; }

  /* Article header padding ----------------------------------- */
  [style*="padding: 90px 28px 60px"] { padding: 60px 16px 32px !important; }

  /* Sticky / fixed nav: smaller padding, no fancy blends -- */
  nav[style*="position: fixed"][style*="top: 0"],
  nav[style*="position: sticky"][style*="top: 0"] {
    padding: 14px 16px !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }
  /* Hide centre slot of 3-col nav (the "/Case Study/" label etc) */
  nav[style*="grid-template-columns: 1fr auto 1fr"] > div:nth-child(2) { display: none !important; }
  /* Shrink nav links so 4 still fit */
  nav .noir-link { font-size: 9px !important; }

  /* Small/mid header headlines stay readable (clamp() handles fonts) */

  /* Hide the floating Tweaks panel on phones --------------- */
  div[style*="position: fixed"][style*="bottom: 16px"][style*="right: 16px"],
  div[style*="position: fixed"][style*="bottom: 24px"][style*="right: 24px"] { display: none !important; }

  /* ShareRail (article) — make full-width, centred ---------- */
  aside[style*="position: fixed"][style*="bottom: 28px"][style*="left: 28px"] {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    max-width: none !important;
    padding: 10px 12px !important;
    gap: 12px !important;
  }
  aside[style*="position: fixed"][style*="bottom: 28px"] > div:first-child { padding-right: 10px !important; }

  /* Tighter gap between cards everywhere ------------------- */
  [style*="gap: 56px"] { gap: 24px !important; }
  [style*="gap: 60px"] { gap: 24px !important; }
  [style*="gap: 80px"] { gap: 28px !important; }
  [style*="gap: 40px"] { gap: 20px !important; }
  [style*="gap: 36px"] { gap: 18px !important; }
  [style*="gap: 30px"] { gap: 16px !important; }
  [style*="gap: 28px"] { gap: 16px !important; }

  /* Sidebar "sticky" rails: unstick on phones so they flow */
  aside[style*="position: sticky"] { position: static !important; }

  /* Marquees: keep text readable, ease the speed */
  .noir-display { letter-spacing: -0.025em; }

  /* Scope-page snap section: each scope is one viewport tall.
     Stack the inner two-col card. */
  section [style*="position: sticky"][style*="top: 0"] [style*="display: grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Tabs / horizontal scroll sections: keep horizontal scroll
     rather than collapsing — looks better. (No override needed.) */

  /* Direction-Noir scope snap section padding (large display fonts) */
  [style*="padding: 0 40px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 0 28px"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Article images: cap aspect ratio for very tall portraits */
  /* (clamp via max-height to avoid skyscrapers) */
  figure [style*="aspect-ratio"] { max-height: 80vh !important; }

  /* Project page hero text (clamp() already, but tighten) */
  h1[style*="clamp(72px, 14vw, 240px)"] { font-size: clamp(48px, 12vw, 96px) !important; }
  h1[style*="clamp(72px, 13vw, 200px)"] { font-size: clamp(44px, 11vw, 80px) !important; }
  h1[style*="clamp(72px, 12vw, 200px)"] { font-size: clamp(44px, 11vw, 80px) !important; }
  h1[style*="clamp(64px, 13vw, 220px)"] { font-size: clamp(48px, 12vw, 96px) !important; }
  h1[style*="clamp(56px, 10vw, 180px)"] { font-size: clamp(40px, 11vw, 72px) !important; }
  h2[style*="clamp(56px, 9vw, 160px)"]  { font-size: clamp(36px, 9vw, 64px) !important; }
  h2[style*="clamp(48px, 8vw, 120px)"]  { font-size: clamp(32px, 8vw, 56px) !important; }
  h2[style*="clamp(48px, 7vw, 120px)"]  { font-size: clamp(32px, 8vw, 56px) !important; }
  h2[style*="clamp(40px, 6vw, 96px)"]   { font-size: clamp(28px, 7vw, 48px) !important; }

  /* Featured work card title shrink */
  h3[style*="clamp(56px, 10vw, 160px)"] { font-size: clamp(32px, 9vw, 56px) !important; }
  h3[style*="clamp(36px, 5vw, 80px)"]   { font-size: clamp(28px, 7vw, 44px) !important; }
  h3[style*="clamp(36px, 5vw, 76px)"]   { font-size: clamp(26px, 7vw, 42px) !important; }
  h3[style*="clamp(28px, 3vw, 44px)"]   { font-size: clamp(22px, 6vw, 32px) !important; }

  /* Field Notes masthead */
  h1[style*="clamp(72px, 16vw, 240px)"] { font-size: clamp(44px, 14vw, 72px) !important; }

  /* Listicle/photo big numerals already ok */

  /* ── DEFENSIVE CATCH-ALLS ─────────────────────────────────────
     For any clamp/grid/padding pattern not enumerated above, these
     prevent broken layouts on new content. Specific rules above
     win via greater selector specificity (h1[…] > […]). */

  /* Any large display font: scale down min and max */
  [style*="font-size: clamp(120px,"] { font-size: clamp(48px, 14vw, 80px) !important; line-height: .92 !important; }
  [style*="font-size: clamp(96px,"]  { font-size: clamp(44px, 12vw, 72px) !important; line-height: .95 !important; }
  [style*="font-size: clamp(72px,"] { font-size: clamp(40px, 11vw, 64px) !important; line-height: .98 !important; }
  [style*="font-size: clamp(64px,"] { font-size: clamp(36px, 10vw, 56px) !important; line-height: .98 !important; }
  [style*="font-size: clamp(56px,"] { font-size: clamp(32px, 9vw, 52px) !important; line-height: 1 !important; }
  [style*="font-size: clamp(48px,"] { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.02 !important; }
  [style*="font-size: clamp(44px,"] { font-size: clamp(28px, 7.5vw, 40px) !important; line-height: 1.05 !important; }
  [style*="font-size: clamp(40px,"] { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.05 !important; }
  [style*="font-size: clamp(36px,"] { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.1 !important; }
  [style*="font-size: clamp(32px,"] { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.15 !important; }
  [style*="font-size: clamp(28px,"] { font-size: clamp(20px, 5vw, 26px) !important; line-height: 1.2 !important; }
  [style*="font-size: clamp(24px,"] { font-size: clamp(18px, 4.5vw, 22px) !important; line-height: 1.3 !important; }
  [style*="font-size: clamp(22px,"] { font-size: clamp(17px, 4.4vw, 20px) !important; line-height: 1.35 !important; }
  [style*="font-size: clamp(20px,"] { font-size: clamp(16px, 4.2vw, 19px) !important; line-height: 1.4 !important; }

  /* Pull-quote and large body italic — keep readable */
  blockquote, q { font-size: 22px !important; line-height: 1.4 !important; }

  /* ── ADDITIONAL GRID STACK RULES ──────────────────────────── */
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns: 60px 1fr 2fr"],
  [style*="grid-template-columns: 110px 1.4fr 2fr 1fr 40px"],
  [style*="grid-template-columns: 120px 1.4fr 2fr 1fr 40px"],
  [style*="grid-template-columns: repeat(8,"],
  [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns: 1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── ADDITIONAL PADDING RULES ─────────────────────────────── */
  [style*="padding: 14px 28px"],
  [style*="padding: 16px 28px"],
  [style*="padding: 18px 28px"],
  [style*="padding: 20px 28px"],
  [style*="padding: 40px 28px"],
  [style*="padding: 100px 28px"],
  [style*="padding: 110px 28px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 9px 18px"],
  [style*="padding: 14px 18px"],
  [style*="padding: 14px 8px"] { /* small chip-style padding — leave alone */ }

  /* ── STICKY ASIDES / SIDEBARS — un-stick on mobile ────────── */
  aside[style*="position: sticky"],
  [style*="position: sticky"][style*="top: 32"] {
    position: static !important;
    top: auto !important;
    align-self: stretch !important;
    margin-top: 24px !important;
  }

  /* ── ARTICLE PAGE ─────────────────────────────────────────── */
  /* Body columns (CoverBody / NormalBody / ListicleBody / PhotoBody)
     all use max-width 720 or 1280 with padding 28px. Tighten. */
  [style*="max-width: 720px"][style*="padding: 40px 28px 120px"],
  [style*="max-width: 1280px"][style*="padding: 20px 28px 120px"],
  [style*="max-width: 1280px"][style*="padding: 0px 28px 100px"],
  [style*="max-width: 1280px"][style*="padding: 60px 28px 100px"] {
    padding: 32px 18px 64px !important;
  }
  /* Article paragraphs: bigger line-height, comfortable size */
  article p, .c1-article-body p { font-size: 17px !important; line-height: 1.65 !important; }
  /* Drop cap doesn't render well at small sizes — clamp it */
  [style*="font-size: 92px"] { font-size: 56px !important; line-height: .9 !important; }
  [style*="font-size: 60px"] { font-size: 42px !important; line-height: .95 !important; }
  /* Pull quotes — squeeze into the column */
  [style*="max-width: 38ch"] { max-width: none !important; }
  [style*="max-width: 22ch"] { max-width: 14ch !important; }
  [style*="max-width: 54ch"] { max-width: none !important; }
  [style*="max-width: 56ch"] { max-width: none !important; }
  [style*="max-width: 720px"] { max-width: 100% !important; }

  /* ── PROJECT PAGE ─────────────────────────────────────────── */
  /* Hero variants (Stacked / Split / Marquee) all have huge
     project-name displays. Caught by the catch-all above.       */
  /* Brief block + credits + InlineTextBox — already stacked.    */
  /* Image grid: any "rows" config flattens via repeat() rules.   */
  /* "Other case studies" 3-col → 1-col covered by repeat(3,) rule. */

  /* ── JOURNAL / FIELD NOTES PAGE ───────────────────────────── */
  /* Search bar — full-width, larger tap target */
  input[type="search"], input[placeholder*="Search"] {
    font-size: 16px !important; /* prevent iOS zoom */
  }
  /* Sidebar rails (PlaybookWithRail / ScrollCulture / DeskWithRail
     / BulletinRail) — already stacked via 1fr 1.5fr / 1fr 1fr.   */
  /* All-posts grid usually uses repeat(2/3, 1fr) — covered.      */

  /* ── WORK INDEX (Stories) ────────────────────────────────── */
  /* Mosaic uses repeat(12, 1fr) with span values — flatten to 1fr. */
  [style*="grid-template-columns: repeat(12, 1fr)"] > * {
    grid-column: auto !important;
  }
  /* Ribbon cards — fixed grid-row spans need to flow naturally */
  [style*="grid-template-columns: repeat(6, 1fr)"] > * {
    grid-row: auto !important;
    grid-column: auto !important;
  }
  /* Filter chip rows — let them wrap, don't try to squeeze */
  [style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] { gap: 6px !important; }

  /* ── SCOPE PAGE (individual: Brands / Concepts / Campaigns) ── */
  /* Hero, manifesto, deliverables, process — most use 1.4fr 1fr
     or 1fr 2.4fr. All stacked by the existing rules.             */
  /* "Next scope" arrow already handled.                          */

  /* ── 404 PAGE ─────────────────────────────────────────────── */
  /* Suggestion swatches grid — usually 3-col, stacks via rule.   */
  /* Big "404" display caught by catch-all clamp.                 */

  /* ── COMMON FOOTERS — let them stack instead of 3-col grid ─── */
  footer[style*="grid-template-columns: 1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center !important;
    padding: 24px 16px !important;
  }
  footer[style*="grid-template-columns: 1fr auto 1fr"] > div:last-child,
  footer[style*="grid-template-columns: 1fr auto 1fr"] > div:first-child {
    text-align: center !important;
    justify-content: center !important;
  }
  footer [style*="justify-content: flex-end"] { justify-content: center !important; }

  /* ── IMAGES / FIGURES — keep aspect, prevent overflow ──────── */
  img, video, canvas, svg.responsive { max-width: 100%; height: auto; }
  figure { margin: 24px 0 !important; }
  figure[style*="aspect-ratio"] { aspect-ratio: 4 / 3 !important; }

  /* ── TIGHTEN VERTICAL RHYTHM EVERYWHERE ───────────────────── */
  [style*="margin-top: 100px"] { margin-top: 40px !important; }
  [style*="margin-top: 80px"]  { margin-top: 32px !important; }
  [style*="margin-top: 60px"]  { margin-top: 24px !important; }
  [style*="margin-bottom: 100px"] { margin-bottom: 40px !important; }
  [style*="margin-bottom: 80px"]  { margin-bottom: 32px !important; }
  [style*="margin-bottom: 60px"]  { margin-bottom: 24px !important; }
  [style*="margin-top: 40px"]  { margin-top: 20px !important; }

  /* ── LIST GAPS COMMON IN BLOG / WORK INDEX ────────────────── */
  [style*="gap: 100px"] { gap: 32px !important; }
  [style*="gap: 56px"]  { gap: 20px !important; }
  [style*="gap: 50px"]  { gap: 20px !important; }
  [style*="gap: 48px"]  { gap: 18px !important; }
  [style*="gap: 32px"]  { gap: 16px !important; }
  [style*="gap: 24px"]  { gap: 14px !important; }

  /* ── PROGRESS BARS / PROGRESS RAIL — keep narrow ───────────── */
  [style*="width: 320px"][style*="position: fixed"] { width: calc(100vw - 16px) !important; }

  /* ── RESPECT TOUCH TARGET SIZES ───────────────────────────── */
  a, button {
    min-height: 36px;
  }
  /* (Don't force min-height on inline links inside paragraphs) */
  p a, h1 a, h2 a, h3 a, h4 a, span a, .noir-link { min-height: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────────
   PHONE — page-specific overrides (Home / Field Notes / Scope / Contact)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* HERO (NoirHeroShader) ----------------------------------------
     The hero JSX now uses justify-content: center natively, with
     the subtitle directly below the headline. On mobile we just
     tighten the padding and narrow the subtitle so it wraps to
     3–4 short lines. */
  div[style*="padding: 140px 40px 80px"][style*="flex-direction: column"][style*="justify-content: center"] {
    padding-top: 92px !important;
    padding-bottom: 56px !important;
    gap: 24px !important;
  }
  p[style*="max-width: 28ch"] { max-width: 16ch !important; font-size: 16px !important; }

  /* PORTFOLIO HIGHLIGHTS (NoirStories) ---------------------------
     Mobile = horizontal carousel (scroll-snap) with arrow buttons.
     Each tile is fixed-width, peeking the next so the swipe is
     discoverable. Tile heights compressed too. */
  .c1-stories-arrows { display: flex !important; }
  /* Make the header row collapse the empty spacer column so the
     "Portfolio Highlights" title and arrows align nicely */
  section#stories > div:first-child {
    grid-template-columns: 1fr auto !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }
  section#stories > div:first-child > div:nth-child(3):empty { display: none !important; }

  /* Convert the grid into a horizontal scroller */
  .c1-stories-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 8px !important;
    margin: 0 -16px !important;
    gap: 12px !important;
    scrollbar-width: none;
  }
  .c1-stories-grid::-webkit-scrollbar { display: none; }
  /* Each card slot: fixed width, snap, override grid-column span */
  .c1-stories-grid > div {
    flex: 0 0 80% !important;
    grid-column: auto !important;
    scroll-snap-align: start !important;
  }

  /* Tile heights inside the carousel ----------------------------- */
  article[style*="height: 580px"]                 { height: 360px !important; }
  article[style*="height: 480px"]                 { height: 320px !important; }
  article[style*="height: 460px"]                 { height: 320px !important; }
  article[style*="height: 440px"]                 { height: 300px !important; }
  article[style*="height: 420px"]                 { height: 280px !important; }
  article[style*="height: min(78vh, 720px)"]      { height: 380px !important; }

  /* SCOPE SNAP (NoirScope) ---------------------------------------
     On mobile we abandon the snap-per-scroll behaviour entirely:
     the JS hijacked touch scroll, which clipped the long pillar
     cards. Convert the section into a normal vertical stack — each
     scope renders as its own panel with full natural height. */

  /* Section: collapse the N×100vh height; let it size to content */
  section#scope {
    height: auto !important;
  }
  /* Sticky child: un-stick, allow natural height, drop the
     overflow:hidden so cards aren't clipped */
  section#scope > div[style*="position: sticky"] {
    position: static !important;
    height: auto !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
  }
  /* The horizontal track wrapper: stop hiding overflow */
  section#scope > div[style*="position: sticky"] > div[style*="position: relative"][style*="overflow: hidden"] {
    overflow: visible !important;
  }
  /* The flex track of articles: become a vertical stack, no transform */
  section#scope > div[style*="position: sticky"] > div[style*="position: relative"] > div[style*="display: flex"] {
    display: block !important;
    transform: none !important;
    transition: none !important;
    height: auto !important;
    will-change: auto !important;
  }
  /* Each scope card: full width, natural height, padding for breathing room */
  article[style*="flex: 0 0 100vw"] {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 40px 16px 56px !important;
    align-items: start !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(240,235,226,.08) !important;
  }
  h3[style*="clamp(80px, 11vw, 200px)"] {
    font-size: clamp(40px, 11vw, 64px) !important;
    line-height: .95 !important;
  }
  article[style*="flex: 0 0 100vw"] p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  article[style*="flex: 0 0 100vw"] [style*="gap: 32px"] { gap: 18px !important; }
  article[style*="flex: 0 0 100vw"] [style*="gap: 7px"]  { gap: 6px !important; }
  /* CTA aligns to the start of the column, not flex-start across the row */
  article[style*="flex: 0 0 100vw"] a[href^="scope.html?s="] {
    align-self: flex-start !important;
    margin-top: 8px !important;
  }
  /* Hide the "scroll to advance / N/N" footer — there's no snap to advance to */
  section#scope > div[style*="position: sticky"] > div[style*="padding: 0px 40px 32px"] {
    display: none !important;
  }
  /* Hide the index dots in the header (they tracked snap state) */
  section#scope [style*="padding: 110px 40px 0"] > div:last-child { display: none !important; }
  /* Soften the header for mobile */
  section#scope [style*="padding: 110px 40px 0"] {
    padding: 60px 16px 0 !important;
    grid-template-columns: 1fr !important;
  }

  /* FIELD NOTES rows (NoirJournal) -------------------------------
     Five-col row already stacks via the generic rule.
     Reduce padding so the column is shorter. */
  article[style*="grid-template-columns: 140px 1fr 2fr 140px 40px"] {
    padding: 14px 0 !important;
    gap: 6px !important;
  }
  /* Hide the trailing arrow ↗ on phones (redundant with whole-row tap) */
  article[style*="grid-template-columns: 140px 1fr 2fr 140px 40px"] > span:last-child { display: none !important; }
  /* Field-notes article title: slightly smaller */
  article[style*="grid-template-columns: 140px 1fr 2fr 140px 40px"] h3 {
    font-size: 22px !important;
    line-height: 1.18 !important;
  }

  /* SAY HELLO headline (NoirContact) -----------------------------
     "Let's Craft / The Next Chapter." was breaking mid-word
     ("Chap-ter") because each char is an inline-block from
     SplitText. Shrink the font so the whole phrase fits, and
     prevent each word from breaking across lines. */
  div[style*="font-size: clamp(56px, 10vw, 200px)"] {
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: 1 !important;
    word-spacing: 2px !important;
  }
  /* Each SplitText container holds chars as inline-blocks; force the
     phrase to stay on one line. */
  div[style*="font-size: clamp(56px, 10vw, 200px)"] > span {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  /* Contact form: the two side-by-side fields stack via the generic
     rule. Tighten the row gap. */

  /* "[ 06 ] Say Hello" big margin → smaller */
  div[style*="margin-bottom: 100px"] { margin-bottom: 40px !important; }
  div[style*="margin-bottom: 60px"]  { margin-bottom: 28px !important; }
  div[style*="margin-bottom: 40px"]  { margin-bottom: 20px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   TOUCH (any pointer: coarse)  — disable custom cursor
   ──────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .c1-custom-cursor,
  .c1-custom-cursor a,
  .c1-custom-cursor button { cursor: auto !important; }
  /* Hide the floating dot+ring (they're rendered as fixed divs at the top of body) */
  body > div[style*="z-index: 9999"][style*="border-radius: 50%"],
  body > div[style*="z-index: 9998"][style*="border-radius: 50%"] { display: none !important; }
  /* Hide any cursor data-cursor labels just in case */
}

/* ─────────────────────────────────────────────────────────────────
   SMALL TABLET (769–1024px)  — light tightening
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Demote 3-col → 2-col where it makes sense */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 6-col → 3-col */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* 12-col stays (used by the magazine grid; needs the granularity) */
}