/* Garlica Princess case study — scoped styles for the embedded
   .gc-embed section on project.html?id=garlica-princess-ip-design-study.
   Selectors here only ever match inside .gc-embed, so this file is a
   harmless no-op include on every other project page. */

  @font-face {
    font-family: 'Wasted Vindey';
    src: url('../assets/fonts/Wasted-Vindey.ttf');
    font-weight: 400;
    font-style: normal;
  }

  .gc-embed {
    --pink: #ff099e;
    --pink-sat: #ff099e;
    --pink-soft: #f7c9de;
    /* --fg / --muted intentionally not overridden here anymore — this
       section now inherits the site-wide tokens from :root (style.css),
       so text follows the global light/dark theme instead of being
       hardcoded to a dark-on-light look. */
  }

  /* at night, the saturated magenta pink used for headings/labels/highlights
     sits on the dark page background and reads a little muddy — lighten it
     toward white so it stays legible. Same double-guard pattern style.css
     uses for its own dark-mode tokens. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gc-embed {
      --pink: #ffb8e8;
      --pink-sat: #ffb8e8;
    }
  }
  :root[data-theme="dark"] .gc-embed {
    --pink: #ffb8e8;
    --pink-sat: #ffb8e8;
  }

  /* ...except inside the fixed brand-pink quote card: its background never
     changes with the site theme, so its highlight color shouldn't either —
     re-pin it back to the original saturated pink for legibility there. */
  .hub-card-text {
    --pink: #ff099e;
  }

  .gc-embed {
    /* was a pink radial gradient; now just follows the site's own
       light/dark background so this section matches every other page. */
    background: var(--bg);
    position: relative;
    isolation: isolate;
    /* break out of .project-page's max-width:1200px/centering so the
       case study is full-bleed edge-to-edge instead of a pink column with
       white gutters on wide screens */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

  .gc-embed {
    font-family: 'Poppins', -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--fg);
  }

  .cs-serif {
    font-family: 'Wasted Vindey', -apple-system, sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  /* ---- dev banner ---- */
  #devBanner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: #111;
    color: #fff;
    font-size: 12px;
    padding: 8px 16px;
    text-align: center;
  }
  #devBanner b { color: var(--pink); }

  /* ---- hub nav dots ---- */
  #navDots {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  #navDots a {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    display: block;
    transition: background 0.25s ease, width 0.25s ease, height 0.25s ease;
  }
  /* real box size (not a transform) so the bow gets its own reserved space
     in the column instead of visually overlapping the dot next to it */
  #navDots a.active {
    width: 24px;
    height: 20.3px;
    border-radius: 0;
    background: url('../assets/images/garlica-case-study/nav-dot-bow.png') center / contain no-repeat;
  }

  @media (max-width: 700px) { #navDots { display: none; } }

  /* ---- slide shell ---- */
  .cs-slide {
    position: relative;
    min-height: 70vh;
    padding: 77px 8vw 63px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .cs-eyebrow {
    color: var(--pink);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .cs-h1 {
    font-size: clamp(36px, 5.2vw, 68px);
    line-height: 1.05;
    margin: 0 0 14px;
  }

  .cs-h2 {
    font-family: 'Wasted Vindey', -apple-system, sans-serif;
    font-size: clamp(22px, 2.8vw, 32px);
    margin: 0 0 28px;
    color: var(--pink-sat);
  }

  .castle-subtitle { margin-bottom: 50px; }
  .title-gap-sm { height: 20px; }
  .title-gap { height: 30px; }

  .cs-body {
    font-size: 16px;
    line-height: 1.65;
    max-width: 640px;
    color: var(--fg);
  }

  .hl { color: var(--pink); font-weight: 600; }

  .cs-tool {
    position: absolute;
    left: 8vw;
    bottom: 40px;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--pink);
    text-transform: uppercase;
    line-height: 1.6;
  }

  /* ---- reveal animation (reversible) ---- */
  /* no opacity fade — content never disappears while scrolling between
     slides, it just settles up into place a little faster than before */
  [data-reveal] {
    transform: translateY(22px);
    transition: transform 0.4s ease;
  }
  [data-reveal].in-view { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { transform: none; }
  }

  /* ---- placeholder graphic block ---- */
  .cs-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: repeating-linear-gradient(135deg, #ffe3f0, #ffe3f0 10px, #ffd0e6 10px, #ffd0e6 20px);
    border: 1px dashed var(--pink);
    border-radius: 10px;
    color: var(--pink);
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 12px;
    line-height: 1.4;
  }

  /* ================= SLIDE 1 — HUB ================= */
  #cs-1 { align-items: center; }
  .hub-wrap {
    width: 100%;
    max-width: 1900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.5fr 1.9fr;
    gap: 60px;
    align-items: center;
  }
  .hub-card-text {
    /* fixed brand-pink card, same as .cps-panel/.cps-tag elsewhere in this
       file — intentionally NOT theme-reactive, so it can't ever repeat the
       white-text-on-white-card bug this used to have in dark mode. */
    background: var(--pink-soft);
    border: 2px solid var(--pink);
    border-radius: 20px;
    max-width: 460px;
    padding: clamp(29px, 2.2vw, 42px) clamp(26px, 2vw, 36px);
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.6;
    color: #1a1a1a;
  }
  .hub-card-text .hl { color: var(--pink); }
  /* desktop: every hub image shares the same HEIGHT, width follows each
     image's own natural aspect ratio (no cropping) */
  .hub-cols { display: flex; align-items: flex-end; justify-content: flex-start; gap: clamp(22px, 2vw, 40px); flex-wrap: wrap; }
  .hub-col {
    cursor: pointer;
    text-align: center;
    transition: transform 0.25s ease;
  }
  .hub-col:hover { transform: translateY(-6px); }
  .hub-col .cs-ph { aspect-ratio: 3/4; margin-bottom: 16px; width: 260px; max-width: 100%; }
  /* fixed pixel height didn't grow past a small size on large windows, unlike
     every other slide (whose grids fill up to a 1500px max-width) — scale
     with viewport instead, capped so it doesn't get absurd on huge screens */
  .hub-media {
    height: clamp(280px, 27vw, 490px);
    width: auto;
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 16px;
    display: block;
    /* transparent so the page's own gradient shows through once assets
       actually have alpha — a flat fill here would show as a mismatched box */
    background: transparent;
  }
  /* two flat PNG cards standing in for the album-art collage, positioned to
     match "album art collage ref.png" — animated in with CSS instead of a
     video so real alpha transparency just works everywhere */
  .album-art-stage {
    position: relative;
    height: clamp(280px, 27vw, 490px);
    width: clamp(211px, 20.35vw, 369px);
    max-width: 100%;
    margin: 0 auto 16px;
  }
  .rise-layer {
    position: absolute;
    display: block;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .rise-layer.risen { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .rise-layer { transform: none; transition: opacity 0.3s ease; }
    .rise-layer.risen { transform: none; }
  }
  .rise-layer-back {
    top: 0;
    left: 0;
    width: 78%;
    transition-delay: 0s;
  }
  .rise-layer-front {
    bottom: 0;
    right: 0;
    width: 82%;
    transition-delay: 0.15s;
  }

  .hub-col .cs-serif { color: var(--pink); font-size: clamp(26px, 1.9vw, 34px); margin-bottom: 6px; }
  .hub-col .hub-sub { font-size: 14px; color: var(--muted); line-height: 1.4; }
  .hub-col .hub-hint {
    display: inline-block;
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pink);
    border-bottom: 1px solid var(--pink);
  }

  @media (max-width: 900px) {
    .hub-wrap { grid-template-columns: 1fr; }
    .hub-cols { flex-direction: column; align-items: center; }
    /* the desktop cap (keeps the text card compact next to the big hub
       images) doesn't apply once it's stacked full-width above them */
    .hub-card-text { max-width: none; }
  }

  /* ================= SLIDE 2 — VIRTUAL IP ================= */
  .ip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    align-items: start;
  }
  /* one pose (Cute) is a wide landscape render while the other three are
     tall portraits — a rigid equal-cell grid would crop it, so instead every
     pose shares a HEIGHT and its width follows its own natural ratio */
  .ip-poses {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;
  }
  .ip-poses .cs-ph { aspect-ratio: 3/4; width: 200px; font-size: 10px; }
  .pose-img {
    height: 260px;
    width: auto;
    max-width: 100%;
    display: block;
    border-radius: 10px;
  }
  /* Sassy (the reclining landscape pose) doesn't get rotated or forced to the
     same height as the portraits — it drops to its own full-width row instead,
     with its width matching the row of portraits above */
  .ip-pose-wide-row { flex-basis: 100%; }
  .pose-img-wide { height: auto; width: 100%; }
  .ip-label { font-size: 11px; color: var(--pink); letter-spacing: 0.06em; margin-bottom: 6px; }
  @media (max-width: 900px) { .ip-grid { grid-template-columns: 1fr; } }

  /* ================= SLIDE 3 — ALBUM ART ================= */
  .album-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
  }
  .album-block h3 { font-size: 34px; margin: 0 0 4px; }
  .album-block .cs-h2 { font-size: 16px; margin-bottom: 22px; }
  .album-imgs { display: flex; gap: 16px; align-items: flex-start; }
  .album-imgs .cover { width: 130px; height: auto; flex-shrink: 0; border-radius: 8px; display: block; }
  .album-imgs .spreads { flex: 1; display: flex; flex-direction: column; gap: 12px; }
  .album-imgs .spreads .cs-ph { aspect-ratio: 16/8; }
  .spread-video { width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; }
  .spread-video iframe,
  .spread-video video,
  .spread-video img { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
  @media (max-width: 900px) { .album-grid { grid-template-columns: 1fr; gap: 40px; } }

  /* ================= SLIDE 4 — TOUR VISUAL / MOVING CASTLE ================= */
  .castle-bullets {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto 40px;
    width: 100%;
    font-size: 15px;
    line-height: 1.6;
  }
  .castle-bullets li { list-style: none; }
  .castle-img { max-width: 1300px; margin: 0 auto; width: 100%; }
  .castle-img .cs-ph { aspect-ratio: 16/9; }
  @media (max-width: 900px) { .castle-bullets { grid-template-columns: 1fr; } }

  /* ================= SLIDE 5 — COLOR PALETTE & STORYBOARD ================= */
  .cps-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 26px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
  }
  .cps-panel {
    background: #fff;
    border: 2px solid var(--pink-soft);
    border-radius: 18px;
    padding: 24px;
    position: relative;
  }
  .cps-tag {
    position: absolute;
    top: -14px;
    background: var(--pink);
    color: #fff;
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 999px;
  }
  .palette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 10px;
  }
  .palette-item .cs-ph { aspect-ratio: 16/9; font-size: 9px; margin-bottom: 6px; }
  /* the scene sketch + color-strip composite isn't exactly 16:9, so contain
     it inside the same box instead of cover — avoids cropping or overflow */
  .p-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 6px;
    display: block;
  }
  .palette-item .p-tag { font-size: 9px; color: var(--muted); letter-spacing: 0.04em; }
  .palette-item .p-name { color: var(--pink); font-size: 12px; font-weight: 600; }
  .palette-item .p-mood { font-size: 12px; }
  .storyboard-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 10px;
  }
  .storyboard-grid .cs-ph { aspect-ratio: 16/10; font-size: 8px; }
  .sb-img { width: 100%; aspect-ratio: 348/181; object-fit: cover; display: block; border-radius: 6px; }
  /* Process lives inside the same card, below Storyboard — fills the empty
     space that was left when the Storyboard grid (3 rows) came up shorter
     than the Color Palette column (6 stacked items) beside it. On mobile
     that card is already long with 14 panels, so Process moves out into
     its own separate card instead (.process-panel-mobile) — see the
     640px media query below, which swaps which one is visible. */
  .process-gap { height: 28px; }
  .process-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--pink);
    margin-bottom: 10px;
  }
  .process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
  }
  .pr-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 6px; }
  .process-panel-mobile { display: none; }
  @media (max-width: 900px) {
    .cps-wrap { grid-template-columns: 1fr; }
    .storyboard-grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* ================= SLIDE 6 — PRODUCTION / RENDER TEST ================= */
  .prod-wrap {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
  }
  .prod-block h4 { font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; }
  .layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .layout-grid .cs-ph { aspect-ratio: 1/1; font-size: 9px; }
  .lighting-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .lighting-grid .cs-ph { aspect-ratio: 1/1; font-size: 8px; }
  @media (max-width: 900px) { .prod-wrap { grid-template-columns: 1fr; } }

  /* ================= SLIDE 7 — FINAL RENDERS ================= */
  .renders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
  }
  .renders-grid .cs-ph { aspect-ratio: 16/9; }
  .render-item {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    border-radius: 10px;
  }
  /* castle render sits last in the DOM (so mobile shows it last naturally)
     and jumps to the front only on desktop, per request */
  @media (min-width: 901px) { .render-item-castle { order: -1; } }
  @media (max-width: 900px) { .renders-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .renders-grid { grid-template-columns: 1fr; } }

  /* ================= SLIDE 8 — ASSETS BOARD ================= */
  .assets-wrap {
    display: grid;
    grid-template-columns: 0.7fr 2fr;
    gap: 40px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    /* "end" (not "stretch") so each column sizes to its own real content —
       stretch was inflating the text+still column to the taller collage
       column's height, leaving empty space below the still image that
       .assets-grid's own bottom-alignment was then matching instead of
       the still image's actual bottom edge */
    align-items: end;
  }
  /* the transparent collage has no baked-in background box, so it's free to
     grow to the row's full height (matching the text+perfume-still column)
     and sit bottom-aligned, flush with the perfume-still image's own bottom
     edge — sized a bit past 100% of that row height since the collage's
     own transparent margins mean it reads smaller than it measures */
  .assets-grid {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .assets-grid img { max-width: 115%; max-height: 115%; width: auto; height: auto; border-radius: 14px; }
  .assets-img-h { display: block; }
  .assets-img-v { display: none; }
  @media (max-width: 900px) {
    .assets-wrap { grid-template-columns: 1fr; }
  }

  /* ================= SLIDE 8B — SOCIAL CONTENT MOCK-UPS ================= */
  /* desktop: full-bleed filmstrip that breaks out of the slide's own side
     padding to span the full window width — the row's natural content
     width (three gifs at a shared height) was wider than the old
     1600px-capped, centered container, so centering + overflow:hidden
     was clipping both edges symmetrically. 100vw gives it plenty of room
     and matches the reference's edge-to-edge look. */
  .social-strip {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }
  .social-item {
    /* height scales with viewport width instead of a fixed px value, so
       the row's combined natural width (based on each gif's own aspect
       ratio) always lands comfortably under 100vw instead of overflowing
       and getting clipped at common desktop widths */
    height: clamp(200px, 24vw, 380px);
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 14px;
  }
  .social-credits {
    max-width: 1600px;
    margin: 34px auto 0;
    width: 100%;
  }
  .social-credits .label {
    color: var(--pink);
    font-size: 11px;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .social-credits .line { color: var(--pink); font-size: 12px; line-height: 1.9; text-transform: uppercase; }
  @media (max-width: 900px) {
    .social-strip {
      flex-direction: column;
      width: 100%;
      max-width: 1600px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 0;
      border: none;
      gap: 14px;
      overflow: visible;
    }
    .social-item { height: auto; width: 100%; border-radius: 14px; }
  }

  /* ================= SLIDE 9 — DELIVERED ================= */
  .delivered-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
  }
  .delivered-list { list-style: none; padding: 0; margin: 0; }
  .delivered-list li { display: flex; gap: 18px; margin-bottom: 26px; }
  .delivered-list .num { color: var(--pink); font-weight: 700; font-size: 18px; flex-shrink: 0; }
  .delivered-list .title { font-weight: 600; margin-bottom: 4px; }
  .delivered-list .desc { font-size: 14px; color: var(--muted); line-height: 1.5; }
  .credits-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; font-size: 12px; line-height: 1.8; color: var(--muted); }
  .credits-cols b { display: block; margin-top: 18px; color: var(--fg); }
  .credits-cols b:first-child { margin-top: 0; }
  /* endless right-to-left marquee: the track holds the photo sequence
     twice back to back, and animates exactly one sequence-width to the
     left — by the time copy 1 has scrolled off, copy 2 is sitting exactly
     where copy 1 started, so the loop point is invisible */
  .filmstrip {
    margin-top: 50px;
    overflow: hidden;
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
  .filmstrip-track {
    display: flex;
    width: max-content;
    animation: filmstrip-scroll 32s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .filmstrip-track { animation: none; }
  }
  .filmstrip-group { display: flex; }
  .filmstrip-group img {
    width: 225px;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
  }
  @keyframes filmstrip-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @media (max-width: 900px) { .delivered-wrap { grid-template-columns: 1fr; } }

  /* ================= MOBILE: dedicated pass, not just a collapsed grid =================
     Matches the phone mockup: full-width image on top, centered Coolvetica-italic
     title, centered subtitle, generous breathing room between blocks. */
  @media (max-width: 640px) {
    .cs-slide {
      min-height: auto;
      padding: 42px 6vw 49px;
    }

    .desktop-only { display: none; }

    /* hub cards become the tall centered stack from the reference video */
    .hub-wrap { gap: 44px; }
    .hub-card-text { padding: 28px 24px; font-size: 15px; }
    /* gap pulled way out (~3x) and each hub-col given an explicit width —
       without an explicit width here, hub-media's width:100% had no solid
       basis to resolve against (align-items:center makes hub-col shrink to
       content by default) and was rendering much smaller than intended */
    .hub-cols { gap: 150px; }
    .hub-col { width: 100%; }
    .hub-col:hover { transform: none; }
    .hub-col .cs-ph { aspect-ratio: 4/5; width: 100%; margin-bottom: 20px; }
    /* mobile: every hub image shares the same WIDTH (full card width),
       height follows each image's own natural aspect ratio (no cropping) */
    .hub-media { height: auto; width: 100%; margin-bottom: 20px; }
    /* same 211:280 proportions as desktop so the two absolutely-positioned
       layers inside stay correctly aligned — a different ratio here was why
       Album Art looked badly misaligned on mobile */
    .album-art-stage { width: 100%; height: auto; aspect-ratio: 211 / 280; }
    .hub-col .cs-serif { font-size: 28px; }
    .hub-col .hub-sub { font-size: 14px; }

    .cs-h1 { text-align: center; margin-bottom: 28px; }
    .cs-h2 { text-align: center; margin-bottom: 56px; }
    /* every "big title -> media below" gap doubled on mobile, per request */
    .album-block .cs-h2 { margin-bottom: 44px; }
    .album-grid { gap: 80px; }
    .castle-subtitle { margin-bottom: 100px; }
    .title-gap-sm { height: 40px; }
    .title-gap { height: 60px; }

    /* poses: same width instead of same height on narrow screens, so the
       tall portrait poses don't shrink down to a sliver next to the wide one */
    .ip-poses { flex-direction: column; align-items: center; }
    .pose-img { height: auto; width: min(280px, 100%); }

    /* album art: cover on top, spreads stacked below instead of a cramped row */
    .album-imgs { flex-direction: column; }
    .album-imgs .cover { width: 100%; height: auto; }
    /* .spreads had no explicit width, and align-items:flex-start (needed on
       desktop) meant it shrank to content instead of matching the cover's
       width — same class of bug as the earlier hub-media sizing issue */
    .album-imgs .spreads { width: 100%; }
    .album-block { text-align: center; }

    .castle-img { max-width: 100%; }

    .storyboard-grid { grid-template-columns: repeat(2, 1fr); }
    .palette-grid { grid-template-columns: 1fr; }
    .process-inline { display: none; }
    .process-panel-mobile { display: block; margin-top: 20px; }

    .assets-img-h { display: none; }
    .assets-img-v { display: block; }
    .assets-wrap > div:first-child { text-align: center; }

    .lighting-grid { grid-template-columns: repeat(3, 1fr); }

    .delivered-list li { text-align: left; }
    .credits-cols { grid-template-columns: 1fr; gap: 26px; }

    .cs-tool { position: static; margin-top: 30px; display: block; }
  }

/* Garlica-only typography trial: clean display type and a consistent text face. */
body:has(.gc-embed) .project-text { font-family: 'Poppins', Arial, sans-serif; }
body:has(.gc-embed) #p-title,
.gc-embed .cs-h1,
.gc-embed .album-block h3 {
  font-family: 'Coolvetica', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.gc-embed .cs-h1 { font-size: clamp(34px, 4.7vw, 64px); }
.gc-embed .cs-h2,
.gc-embed .hub-col .cs-serif {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.gc-embed .cs-h2 { font-size: clamp(20px, 2.2vw, 28px); }
.gc-embed .product-section { gap: 36px; scroll-margin-top: 70px; }
.gc-embed .product-intro { max-width: 760px; }
.gc-embed .product-intro .cs-body { margin: 22px 0 0; }
.gc-embed .product-figure { margin: 0; min-width: 0; }
.gc-embed .product-figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
.gc-embed .product-figure figcaption {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 4px 16px; margin-top: 13px; font-size: 13px; line-height: 1.5;
}
.gc-embed .product-kind { color: var(--muted); font-size: 11px; }
.gc-embed .product-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gc-embed .product-detail-grid img { aspect-ratio: 3 / 4; object-fit: contain; background: #f2eeec; }
.gc-embed .product-collaboration { margin: 20px 0 0; }
@media (max-width: 640px) {
  .gc-embed .product-section { gap: 28px; }
  .gc-embed .product-intro { text-align: center; }
  .gc-embed .product-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .gc-embed .product-figure figcaption { font-size: 12px; }
}

.gc-embed .product-figure .product-caption-label-only { justify-content: flex-end; }
.gc-embed .product-brand-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.gc-embed .product-brand-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }