/* =====================================================================
   CASE STUDY — individual project page (Patina system)
   loads after ../css/main.css
   ===================================================================== */

.nav__menu a.is-current{ color:var(--rust); }

/* ---------- Hero ---------- */
.case-hero{
  position:relative; min-height:94svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 2rem) var(--pad) clamp(2rem,5vh,4rem);
}
.case-hero__bg{ position:absolute; inset:0; z-index:-2; }
.case-hero__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.52) contrast(1.05) saturate(.9);
  transform:scale(1.06); animation:heroZoom 12s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.case-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(21,17,13,.35) 0%, rgba(21,17,13,.5) 45%, rgba(21,17,13,.9) 100%);
}
.case-back{
  align-self:flex-start; font-family:var(--mono); font-size:.78rem;
  color:var(--fg); margin-bottom:auto; letter-spacing:.02em;
}
.case-back span{ color:var(--rust); }
.case-hero__inner{ max-width:min(24ch,100%); }
.case-hero__eyebrow{
  font-family:var(--mono); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); display:block; margin-bottom:1.2rem;
}
.case-hero__title{
  font-size:clamp(3rem,10vw,8.5rem); font-weight:700;
  line-height:.9; letter-spacing:-.03em;
}
.case-hero__sub{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.8rem); color:var(--rust); margin-top:.15em;
}
.case-hero__role{
  font-family:var(--mono); font-size:.82rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-top:1.3rem;
}

/* ---------- Meta / credits ---------- */
.case-meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1.6rem 2rem; padding:clamp(3rem,7vh,5rem) var(--pad);
  border-bottom:1px solid var(--line-soft);
}
.meta-item .meta-k{
  display:block; font-family:var(--mono); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.45rem;
}
.meta-item .meta-v{ font-size:1.02rem; line-height:1.4; }
.meta-cats{ display:flex; flex-wrap:wrap; gap:.5rem; align-content:flex-start; }
.meta-cats .chip{
  font-family:var(--mono); font-size:.72rem; color:var(--fg);
  border:1px solid var(--line); border-radius:100px; padding:.35rem .75rem;
  text-transform:uppercase; letter-spacing:.03em;
}

/* ---------- Media sequence ---------- */
.case-media{
  padding:clamp(2.5rem,7vh,6rem) var(--pad) clamp(3rem,8vh,6rem);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.4rem,4vh,3.2rem);
}
.mediarow{
  width:100%; max-width:1120px;
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.mediarow.in{ opacity:1; transform:none; }
.mediarow img,
.mediarow video{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:4px; background:var(--bg-2);
}

/* ---------- Embedded interactive page (responsive iframe) ---------- */
.media-embed{ margin:0; }
.timeline-container{
  position:relative; width:100%; aspect-ratio:16 / 9;
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--bg-2);
}
.responsive-iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* ---------- Responsive video-tile grid (looping showcase clips / gifs) ---------- */
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr));
  gap:clamp(.7rem,1.6vw,1.2rem);
  align-items:start;
}
/* small groups keep exact columns so a pair/triple doesn't stretch full-width */
.media-grid[data-count="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.media-grid[data-count="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.media-tile{ margin:0; display:flex; flex-direction:column; min-width:0; }
.media-tile__cap{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); padding:.6rem .15rem 0; line-height:1.4;
}
@media (max-width:640px){
  .media-grid,
  .media-grid[data-count="2"],
  .media-grid[data-count="3"]{ grid-template-columns:1fr; }
}

/* ---------- Media section sub-heading (e.g. "Unbranded — Unblush") ---------- */
.case-media__head{
  width:100%; max-width:1120px; margin:clamp(1.4rem,3.5vh,2.6rem) auto -.6rem;
  font-family:var(--mono); font-size:.8rem; font-weight:500; letter-spacing:.03em;
  text-transform:uppercase; color:var(--fg);
  display:flex; align-items:center; gap:.7rem;
}
.case-media__head::before{ content:""; width:1.6rem; height:1px; background:var(--rust); flex:none; }

/* ---------- Prev / next pager ---------- */
.case-pager{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.case-pager a{
  padding:clamp(2rem,5vh,3.8rem) var(--pad);
  transition:background .5s var(--ease);
}
.case-pager a:hover{ background:rgba(236,227,212,.03); }
.pager__next{ text-align:right; border-left:1px solid var(--line); }
.case-pager .pk{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); display:flex; gap:.5rem; align-items:center;
}
.pager__next .pk{ justify-content:flex-end; }
.pager__name{
  display:block; font-size:clamp(1.5rem,3.4vw,2.8rem); font-weight:600;
  letter-spacing:-.02em; margin-top:.5rem; line-height:1; transition:color .4s var(--ease);
}
.pager__name small{ display:block; font-weight:400; font-size:.5em; color:var(--muted); margin-top:.3em; }
.case-pager a:hover .pager__name{ color:var(--rust); }
@media (max-width:640px){ .case-pager{ grid-template-columns:1fr; } .pager__next{ border-left:none; border-top:1px solid var(--line); text-align:left; } .pager__next .pk{ justify-content:flex-start; } }

/* ---------- Inlined Digital Style Guide (guide's own styles, scoped to .sg-doc) ---------- */
.case-doc{ padding:0 0 clamp(3rem,8vh,5.5rem); }
.sg-doc{
  font-family:'Mulish', system-ui, sans-serif; color:#2E302E; background:#F6F4F1;
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.sg-doc a{ color:#1E7268; text-decoration:none; }
.sg-doc a:hover{ color:#C6900C; }
.sg-doc ::selection{ background:#ECB013; color:#17181A; }
.sg-doc img{ max-width:100%; }

/* Fasenra variant — Spectral serif, magenta + teal identity */
.sg-doc--fasenra{ font-family:'Spectral', Georgia, serif; color:#1F272C; background:#FBFBFA; }
.sg-doc--fasenra a{ color:#B01C7A; }
.sg-doc--fasenra a:hover{ color:#E4297E; }
.sg-doc--fasenra ::selection{ background:#00A898; color:#fff; }

/* GSK Oncology on Demand variant — Source Sans, warm orange identity */
.sg-doc--gsk{ font-family:'Source Sans 3', system-ui, sans-serif; color:#231F20; background:#FBFAF8; line-height:1.6; }
.sg-doc--gsk a{ color:#F15A29; }
.sg-doc--gsk a:hover{ color:#C7431C; }
.sg-doc--gsk ::selection{ background:#FDBA2D; color:#231F20; }

/* Together with GSK Oncology variant — Source Serif/Sans, blue + orange identity */
.sg-doc--twgo{ font-family:'Source Sans 3', -apple-system, sans-serif; color:#414141; background:#ffffff; line-height:1.6; }
.sg-doc--twgo a{ color:#2D57A5; }
.sg-doc--twgo a:hover{ color:#ED7623; }
.sg-doc--twgo ::selection{ background:#ED7623; color:#fff; }

/* Zejula variant — Nunito display / Helvetica body, azure + navy identity */
.sg-doc--zejula{ font-family:'Helvetica Neue', Arial, sans-serif; color:#22272E; background:#F4F6F8; }
.sg-doc--zejula a{ color:#0093C9; }
.sg-doc--zejula a:hover{ color:#2CB4DC; }
.sg-doc--zejula ::selection{ background:#2CB4DC; color:#fff; }

/* Cornell Johnson variant — DARK: Cinzel serif / Helvetica body, crimson identity */
.sg-doc--johnson{ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#fff; background:#0E0E0E; }
.sg-doc--johnson a{ color:#E24A5A; }
.sg-doc--johnson a:hover{ color:#F07685; }
.sg-doc--johnson ::selection{ background:#B31B1B; color:#fff; }

/* mbrace — cinematic dark, brushed-metal neutrals, Signature Red accent */
.sg-doc--mbrace{ font-family:'Helvetica Neue', Arial, sans-serif; color:#EDEDED; background:#0E0E10; -webkit-font-smoothing:antialiased; }
.sg-doc--mbrace a{ color:#C41230; }
.sg-doc--mbrace a:hover{ color:#E8792B; }
.sg-doc--mbrace ::selection{ background:#C41230; color:#fff; }

/* Mercedes auto show — editorial dark, Archivo/Instrument Sans, cool-blue accent */
.sg-doc--mercedes{ font-family:'Instrument Sans', system-ui, sans-serif; color:#eceded; background:#0a0b0d; -webkit-font-smoothing:antialiased; }
.sg-doc--mercedes a{ color:#5aa9e6; }
.sg-doc--mercedes a:hover{ color:#c8ccd4; }
.sg-doc--mercedes ::selection{ background:#d4d7dd; color:#0a0b0d; }

/* Botox — warm cream, single confident orange, Mulish/IBM Plex Mono */
.sg-doc--botox{ font-family:'Mulish', system-ui, sans-serif; color:#2A241D; background:#FBF6EF; -webkit-font-smoothing:antialiased; }
.sg-doc--botox a{ color:#D97A00; }
.sg-doc--botox a:hover{ color:#B86400; }
.sg-doc--botox ::selection{ background:#F28C00; color:#fff; }
@keyframes sg-spin-slow{ to{ transform:rotate(360deg); } }

/* Chanel / SAISON — editorial monochrome, champagne accent, Oswald/Cormorant */
.sg-doc--chanel{ font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#111; background:#f4f2ee; -webkit-font-smoothing:antialiased; }
.sg-doc--chanel a{ color:#C2A878; }
.sg-doc--chanel a:hover{ color:#d8c39d; }
.sg-doc--chanel ::selection{ background:#C2A878; color:#0a0a0a; }
@keyframes sg-saisonFade{ from{ opacity:0; letter-spacing:0.9em; } to{ opacity:1; letter-spacing:0.55em; } }

/* McDonald's — warm cream & ember, Bricolage Grotesque/Hanken Grotesk */
.sg-doc--mcdonalds{ font-family:'Hanken Grotesk', Arial, sans-serif; color:#211C18; background:#FAF4EA; -webkit-font-smoothing:antialiased; }
.sg-doc--mcdonalds a{ color:#E14E2B; }
.sg-doc--mcdonalds a:hover{ color:#F2A916; }
.sg-doc--mcdonalds ::selection{ background:#E14E2B; color:#FAF4EA; }

.sg-doc--vyleesi{ font-family:'Hanken Grotesk', system-ui, sans-serif; color:#241A1D; background:#FBF4EE; -webkit-font-smoothing:antialiased; }
.sg-doc--vyleesi a{ color:#B8324B; }
.sg-doc--vyleesi a:hover{ color:#7A1F45; }
.sg-doc--vyleesi ::selection{ background:#F8D7CE; color:#241A1D; }
/* the guide's editorial screenshots-of-work grids read best on the cream ground */
.sg-doc--vyleesi .media-tile{ background:#fff; border-color:#E7DAD0; }
@media (max-width:760px){
  /* type-scale rows (specimen + spec label) and the ISI header stack cleanly */
  .sg-doc--vyleesi .vy-scale{ flex-direction:column; align-items:flex-start !important; gap:6px !important; }
  /* the 12-col layout demo collapses to a single column, so span-N children
     (span 8 / span 4 / span 12) must not re-create implicit tracks & overflow */
  .sg-doc--vyleesi .vy-grid12{ grid-template-columns:1fr !important; }
  .sg-doc--vyleesi .vy-grid12 > *{ grid-column:auto !important; }
}

/* ---------- Inlined guides — mobile responsiveness --------------------
   The guides are authored with fixed, desktop-oriented inline styles
   (multi-column grids, 56–64px side padding, 66–72px display type).
   Inline styles outrank classes, so these overrides need !important.  */
/* cover headlines are oversized (66–86px). Start shrinking them the moment the
   layout switches to the mobile-nav breakpoint (≤760px) — not just on phones —
   so long unbreakable words ("PRODUCTS") don't overflow in the 641–760 band. */
@media (max-width:760px){
  .sg-doc [style*="font-size:86px"],
  .sg-doc [style*="font-size:82px"],
  .sg-doc [style*="font-size:74px"],
  .sg-doc [style*="font-size:72px"],
  .sg-doc [style*="font-size:66px"]{ font-size:clamp(38px,11vw,58px) !important; line-height:1.05 !important; overflow-wrap:break-word; }
}
@media (max-width:640px){
  /* every multi-column grid collapses to a single column
     (except .sg-fixed — UI mocks like a phone tab bar that must stay multi-up) */
  .sg-doc [style*="grid-template-columns"]:not(.sg-fixed){ grid-template-columns:minmax(0,1fr) !important; }
  /* a child spanning 2 columns would re-create an implicit 2nd column on the
     now-single-column grid — pin those back to a single cell */
  .sg-doc [style*="grid-column:span 2"]:not(.sg-fixed),
  .sg-doc [style*="grid-column: span 2"]:not(.sg-fixed){ grid-column:auto !important; }
  /* trim oversized side-padding on centered content wrappers, sections + covers
     (some guides pad the <section>, others the inner margin:0 auto wrapper) */
  .sg-doc [style*="margin:0 auto"]:not(.sg-fixed),
  .sg-doc [style*="margin: 0 auto"]:not(.sg-fixed),
  .sg-doc section[style]:not(.sg-fixed),
  .sg-doc [style*="padding:0 80px"]:not(.sg-fixed),
  .sg-doc header[style]{ padding-left:20px !important; padding-right:20px !important; }
  /* (cover headline cap lives in the ≤760px block above) */
  /* mid-large type specimens (single-word samples like "JOHNSON" / "Nunito"
     can't wrap, so they overflow narrow spec cards) — shrink to fit the phone */
  .sg-doc [style*="font-size:64px"],
  .sg-doc [style*="font-size:62px"],
  .sg-doc [style*="font-size:60px"],
  .sg-doc [style*="font-size:56px"],
  .sg-doc [style*="font-size:54px"],
  .sg-doc [style*="font-size:52px"],
  .sg-doc [style*="font-size:48px"],
  .sg-doc [style*="font-size:46px"]{ font-size:clamp(30px,9vw,44px) !important; line-height:1.05 !important; }
  /* type-scale rows: fixed 150px spec labels crowd out the specimen on very
     narrow phones — let them shrink and let the specimen wrap/shrink freely */
  .sg-doc [style*="flex:0 0 150px"]{ flex-basis:96px !important; width:96px !important; }
  .sg-doc [style*="width:150px;flex:none"]{ width:88px !important; flex:none !important; }
  .sg-doc [style*="min-width:220px"]{ min-width:0 !important; }
}

/* ---------- Embedded Digital Style Guide (iframe variant — kept for reference) ---------- */
.case-sg{ padding:clamp(3rem,9vh,6.5rem) var(--pad) 0; }
.case-sg__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.case-sg__head .section-index{ margin-bottom:0; }
.case-sg__open{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--rust);
  display:inline-flex; align-items:center; gap:.4rem; transition:gap .3s var(--ease);
}
.case-sg__open:hover{ gap:.7rem; }
.case-sg__note{ margin-top:1rem; max-width:60ch; color:var(--muted); font-size:1rem; line-height:1.6; }
.case-sg__frame{
  position:relative; margin-top:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:#F6F4F1; height:min(82vh, 880px); box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.case-sg__frame iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:640px){ .case-sg__frame{ height:70vh; } }

/* ---------- Related works ("More in <category>") ---------- */
.case-related{ padding:clamp(3rem,9vh,6.5rem) var(--pad) clamp(3.5rem,9vh,6rem); }
.case-related .section-index{ display:block; margin-bottom:clamp(1.2rem,2.5vw,2rem); }
.related__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem); }
@media (max-width:1080px){ .related__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .related__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .related__grid{ grid-template-columns:1fr; } }
.related__card{ display:block; }
.related__media{
  position:relative; display:block; overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--line); border-radius:3px; background:var(--bg-2);
}
.related__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.82); transform:scale(1.03);
  transition:filter .6s var(--ease), transform .9s var(--ease);
}
.related__card:hover .related__media img{ filter:grayscale(.4) contrast(1.05) brightness(.98); transform:scale(1.07); }
.related__media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.24) 2px 3px);
  mix-blend-mode:multiply; opacity:.5;
}
.related__title{
  display:block; margin-top:.75rem; font-weight:600; font-size:clamp(1.05rem,1.5vw,1.25rem);
  letter-spacing:-.01em; line-height:1.15; transition:color .4s var(--ease);
}
.related__title small{ display:block; font-family:var(--serif); font-style:italic; font-weight:400; color:var(--muted); font-size:1rem; margin-top:.15rem; }
.related__card:hover .related__title{ color:var(--rust); }

/* ---------- Per-case content tint (e.g. Vyleesi pink) ---------- */
/* Tints only the media body; the meta bar (Client/Agency/Role) stays original. */
.case-tinted .case-media{
  background:var(--case-tint);
  color:#2b1a24;
  /* remap tokens so text/lines stay legible on the light tint */
  --fg:#2b1a24;
  --muted:#7a566a;
  --line:rgba(43,26,36,.28);
  --line-soft:rgba(43,26,36,.16);
}