/* ========================================================================
   CASE PAGES. Three concerns in one file, loaded on every project page:

   1. BASE LAYER. Shared design tokens, Galatea on body and headings, and
      overrides for Bootstrap display classes so legacy pages inherit the
      editorial typography without migrating their markup.
   2. SITE FOOTER. The dark big-name footer, shared across every page via
      footer.html + footerloader.js (and the home, which inlines the markup).
   3. CASE GRID. Editorial four-column grid: content, debug gridlines and the
      Press-G overlay all read from the SAME container tokens
      (--case-max-w, --case-pad-x, --case-gap-x, --case-side-reserve), so the
      red guides land exactly on the real column tracks.
   ======================================================================== */

/* ============ BASE LAYER ============ */
:root {
  --ink: #0f1a2e;
  --ink-soft: #2a3651;
  --paper: #ffffff;
  --rule: rgba(15, 26, 46, 0.08);
  --rule-strong: rgba(15, 26, 46, 0.14);
}

body {
  font-family: 'Galatea', 'Times New Roman', serif;
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Galatea', 'Times New Roman', serif;
  letter-spacing: -0.015em;
}

p, span, small, li, a,
button, input, textarea, select,
.accordion-button, .accordion-body {
  font-family: 'Galatea', 'Times New Roman', serif;
}

/* ============ SITE FOOTER ============ */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(72px, 12vh, 140px) clamp(32px, 6vw, 96px) clamp(32px, 5vh, 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vh, 56px);
}

.site-footer__name {
  margin: 0;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--paper);
}

.site-footer__links {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  line-height: 1;
}

.site-footer__links a {
  color: var(--paper);
  text-decoration: none;
  transition: opacity 200ms ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
}

.site-footer__links a:hover { opacity: 0.6; }

.site-footer__sep { color: rgba(255, 255, 255, 0.35); }

.site-footer__meta {
  margin-top: clamp(32px, 6vh, 64px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__meta a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

.site-footer__meta a:hover { color: var(--paper); }

@media (max-width: 720px) {
  .site-footer {
    padding: clamp(56px, 10vh, 96px) 20px clamp(28px, 4vh, 40px);
  }

  .site-footer__name {
    white-space: normal;
    font-size: clamp(2.2rem, 11vw, 4rem);
    line-height: 0.98;
  }

  .site-footer__meta {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============ CASE GRID. SHARED CONTAINER TOKENS ============
   Every case-grid actor (content, gridlines, overlay) reads the same four
   tokens below. Resolving the horizontal geometry in one place is what
   keeps the red overlay and the real content on identical column tracks.

   --case-side-reserve mirrors the body's left/right padding set by
   sidebars.css. The Press-G overlay is position:fixed and therefore does
   not inherit that padding, so it is applied directly via left/right. */
:root {
  --case-cols: 6;
  --case-gap-x: clamp(24px, 2.6vw, 36px);
  --case-pad-x: clamp(28px, 5.5vw, 88px);
  --case-max-w: 1360px;
  --case-side-reserve: 88px;
  --case-row-lg: clamp(64px, 9vh, 96px);
  --case-rule: rgba(15, 26, 46, 0.12);
  --case-rule-faint: rgba(15, 26, 46, 0.045);
  --case-accent: rgba(255, 56, 92, 0.9);
}

html, body { overflow-x: hidden; }

.case {
  background: #ffffff;
  color: var(--ink, #0f1a2e);
  font-family: 'Galatea', 'Times New Roman', serif;
  padding: clamp(96px, 14vh, 180px) 0 clamp(120px, 18vh, 220px);
  border-top: 1px solid rgba(15, 26, 46, 0.08);
}
.case, .case *, .case *::before, .case *::after { box-sizing: border-box; }

.case__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--case-cols), 1fr);
  column-gap: var(--case-gap-x);
  row-gap: var(--case-row-lg);
  padding-inline: var(--case-pad-x);
  max-width: var(--case-max-w);
  margin-inline: auto;
  align-items: start;
}

/* ============ COLUMN GUIDES ============
   Thin vertical rules at the real column edges. Positioned absolutely to
   span the full height of .case__inner, with the SAME grid-template-columns
   and column-gap as the content grid so each span's borders sit on the
   actual column tracks. Decorative, non-interactive, behind content. */
.case__gridlines {
  position: absolute;
  inset: 0;
  padding-inline: var(--case-pad-x);
  display: grid;
  grid-template-columns: repeat(var(--case-cols), 1fr);
  column-gap: var(--case-gap-x);
  pointer-events: none;
  z-index: 0;
}
.case__gridlines > span {
  display: block;
  height: 100%;
  border-left: 1px solid var(--case-rule-faint);
  border-right: 1px solid var(--case-rule-faint);
}

/* ============ INTRO ============
   Subgrid so the intro reads the same tracks as .case__inner. Title spans
   all six columns, eyebrow sits below aligned to column 1, description
   occupies four columns for a controlled reading length, and the
   full-width border provides the divider. */
.case__intro {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: var(--case-gap-x);
  row-gap: 0;
  padding-bottom: clamp(44px, 6vh, 72px);
  border-bottom: 1px solid var(--case-rule);
}

.case__title {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: none;
  color: var(--ink, #0f1a2e);
}

.case__eyebrow {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  margin-top: clamp(16px, 2.4vh, 26px);
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft, #2a3651);
}

.case__description {
  grid-column: 1 / span 4;
  grid-row: 3;
  align-self: start;
  margin: clamp(28px, 4vh, 44px) 0 0;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
  line-height: 1.55;
  color: var(--ink-soft, #2a3651);
  max-width: 56ch;
}

/* ============ EDITORIAL CELLS ============ */
.case__cell {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
}

/* Paired cells. Each block spans three columns on the six-column grid
   and sits flush against its gutter edge. Numbers, titles and paragraphs
   inside the cell share its left axis. */
.case__cell--left       { grid-column: 1 / span 3; }
.case__cell--right      { grid-column: 4 / span 3; }

/* Wide variants for images and mockups that occupy four columns. */
.case__cell--left-wide  { grid-column: 1 / span 4; }
.case__cell--right-wide { grid-column: 3 / span 4; }

/* Full-bleed row across the six columns. */
.case__cell--full       { grid-column: 1 / -1; }

/* Legacy span-* modifiers remapped onto the editorial grid. */
.case__cell--span-2 { grid-column: 4 / span 3; }
.case__cell--span-3 { grid-column: 1 / span 3; }
.case__cell--span-4 { grid-column: 1 / span 3; }
.case__cell--span-5 { grid-column: 1 / span 4; }
.case__cell--span-6 { grid-column: 3 / span 4; }

/* ============ TEXT STYLES ============ */
.case__cell .case__num {
  display: block;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--case-accent);
  margin-bottom: 12px;
}

.case__cell h2 {
  margin: 0 0 clamp(12px, 1.6vh, 16px);
  font-family: 'Galatea', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.8vw + 0.3rem, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink, #0f1a2e);
}

.case__cell p {
  margin: 0 0 clamp(12px, 1.5vh, 18px);
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: clamp(1rem, 0.6vw + 0.75rem, 1.125rem);
  line-height: 1.6;
  color: var(--ink-soft, #2a3651);
  max-width: 42ch;
}

.case__cell p:last-child { margin-bottom: 0; }

.case__cell ul {
  margin: 0;
  padding-left: 1.1rem;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft, #2a3651);
  max-width: 600px;
}

.case__cell strong { color: var(--ink, #0f1a2e); font-weight: 400; }

/* ============ IMAGE / MOCKUP CELLS ============ */
.case__cell img,
.case__cell video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(15, 26, 46, 0.04);
}

.case__cell figcaption {
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft, #2a3651);
  margin-top: 14px;
  max-width: 600px;
}

/* Aspect-ratio variants for pure-image cells. */
.case__cell--portrait  { aspect-ratio: 3 / 4;  }
.case__cell--square    { aspect-ratio: 1 / 1;  }
.case__cell--landscape { aspect-ratio: 16 / 10; }
.case__cell--wide      { aspect-ratio: 21 / 9;  }
.case__cell--tall      { aspect-ratio: 2 / 3;  }
.case__cell--cinema    { aspect-ratio: 24 / 9; }

/* ============ PULLQUOTE ============
   Full-bleed editorial quote. Keeps the red accent for emphasised fragments
   wrapped in <em>. */
.case__pullquote {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin: 0;
  padding-block: clamp(16px, 3vh, 36px);
  font-family: 'Galatea', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink, #0f1a2e);
  max-width: 22ch;
}
.case__pullquote em { font-style: normal; color: var(--case-accent); }

/* ============ MOCKUP WRAP ============
   Full-bleed container for browser-chrome mockups. The inner .mockup-frame
   is design-width (e.g. 820px) and gets scaled down to fit via inline JS;
   overflow:hidden here clips any leaked design-width content. */
.mockup-frame-wrap {
  overflow: hidden;
  max-width: 100%;
  grid-column: 1 / -1;
}
.mockup-frame { transform-origin: top left; font-family: 'Geist', system-ui, sans-serif; }
.mockup-frame * { font-family: inherit; }
.mockup-frame-wrap figcaption {
  margin-top: 14px;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft, #2a3651);
  max-width: 56ch;
}
@keyframes cs-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ============ PRESS-G GRID OVERLAY ============
   Toggleable six-column overlay for layout debugging. The outer element
   is position:fixed, so it does not inherit body padding; we offset it by
   --case-side-reserve so the inner geometry matches .case__inner's parent
   exactly. The inner wrapper then shares max-width, padding and grid
   definition with the content: red guides fall on the real column tracks. */
.case-grid-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--case-side-reserve);
  right: var(--case-side-reserve);
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
.case-grid-overlay.is-active { opacity: 1; }
.case-grid-overlay__inner {
  position: relative;
  height: 100%;
  max-width: var(--case-max-w);
  margin-inline: auto;
  padding-inline: var(--case-pad-x);
  display: grid;
  grid-template-columns: repeat(var(--case-cols), 1fr);
  column-gap: var(--case-gap-x);
}
.case-grid-overlay__col {
  position: relative;
  height: 100%;
  border-left: 1px solid rgba(255, 56, 92, 0.75);
  border-right: 1px solid rgba(255, 56, 92, 0.75);
}
.case-grid-overlay__num {
  position: absolute;
  top: 14px;
  left: 10px;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: rgba(255, 56, 92, 1);
}
.case-grid-hint {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 91;
  font-family: 'Galatea', 'Times New Roman', serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(15, 26, 46, 0.55);
  padding: 6px 10px;
  border: 1px solid rgba(15, 26, 46, 0.14);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity 180ms ease;
}
.case-grid-overlay.is-active ~ .case-grid-hint { color: rgba(255, 56, 92, 0.9); border-color: rgba(255, 56, 92, 0.4); }

/* ============ MOBILE ============
   Collapse to a single column at <=820px, matching sidebars.css which
   drops body padding to 0 at the same breakpoint. The debug overlay is
   hidden here (one column makes it uninformative). */
@media (max-width: 820px) {
  :root { --case-side-reserve: 0px; }

  .case { padding: clamp(72px, 10vh, 110px) 0 clamp(72px, 10vh, 110px); }

  .case__inner {
    grid-template-columns: 1fr;
    padding: 0 22px;
    row-gap: clamp(40px, 6vh, 56px);
  }
  .case__intro {
    grid-template-columns: 1fr;
    padding-bottom: clamp(32px, 5vh, 44px);
  }
  .case__gridlines { display: none; }

  .case__title,
  .case__eyebrow,
  .case__description {
    grid-column: 1;
    grid-row: auto;
    white-space: normal;
  }
  .case__title { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.02; }
  .case__eyebrow { margin-top: 14px; font-size: 11px; letter-spacing: 0.2em; }
  .case__description { margin-top: 16px; max-width: none; }

  .case__cell,
  .case__cell--left,
  .case__cell--right,
  .case__cell--left-wide,
  .case__cell--right-wide,
  .case__cell--full,
  .case__cell--span-2,
  .case__cell--span-3,
  .case__cell--span-4,
  .case__cell--span-5,
  .case__cell--span-6 { grid-column: 1; }

  .case__cell .case__num { margin-bottom: 8px; }
  .case__cell h2 { font-size: 1.3rem; margin-bottom: 10px; }
  .case__cell p { max-width: none; font-size: 1rem; line-height: 1.55; }

  .case__pullquote { font-size: clamp(1.8rem, 8vw, 2.4rem); max-width: none; padding-block: 8px; }
  .mockup-frame-wrap figcaption { margin-top: 10px; font-size: 0.85rem; }

  .case-grid-overlay,
  .case-grid-hint { display: none; }
}

/* ============ MOBILE CHROME OVERRIDES ============
   Applies to every page that loads sidebars.js. Hides the Studio right strip,
   pins MENU top-right at 18px with icon on the right, and keeps the name
   top-left at 18px aligned to the same baseline. Scoped under html for extra
   specificity so it beats the base sidebars.css cascade. */
@media (max-width: 820px) {
  html .studio-strip { display: none !important; }

  html .hero__side-menu {
    top: clamp(14px, 2vh, 24px) !important;
    left: clamp(16px, 4vw, 24px) !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  html .hero__side-menu .hero__name {
    position: static !important;
    font-family: 'Galatea', 'Times New Roman', serif !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: var(--ink, #0f1a2e) !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
  html .hero__side-menu .hero__menu-btn {
    position: fixed !important;
    top: clamp(14px, 2vh, 24px) !important;
    right: clamp(16px, 4vw, 24px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    z-index: 2070 !important;
  }
  html .hero__side-menu .hero__menu-label {
    font-family: 'Galatea', 'Times New Roman', serif !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: var(--ink, #0f1a2e) !important;
    text-transform: none !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    opacity: 1 !important;
  }
  html .hero__side-menu .hero__menu-icon {
    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
  }
}