/* =====================================================
   Case study shared styles · Chaos Theory
   Used by /work/mellohunt.html, /work/rock-the-boat.html
   ===================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --case-bg:#0a0a0d;
  --case-surface:#0a0a0d;
  --case-surface-raised:#13131b;
  --case-surface-sunken:#06060a;
  --case-text:#ececf1;
  --case-text-muted:#b6b6c2;
  --case-text-subtle:#7d7d8a;
  --case-hairline:#2a2a36;
  --case-accent:#FF2D55;
  --case-accent-soft:rgba(255,45,85,.14);
  --font-display:'Space Grotesk','Inter',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.7,0,.2,1);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--case-bg);
  color:var(--case-text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ===== Top nav (sticky) ===== */
.case-nav{
  position:sticky;top:0;z-index:30;
  background:rgba(10,10,13,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--case-hairline);
}
.case-nav-inner{
  max-width:1240px;margin:0 auto;
  padding:1rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.case-nav-brand{
  display:flex;align-items:center;gap:.6rem;color:var(--case-text);
  transition:opacity .2s;
}
.case-nav-brand:hover{opacity:.75}
.case-nav-brand img{height:22px;width:auto;filter:drop-shadow(0 0 6px rgba(255,45,85,.4))}
.case-nav-brand span{
  font-family:var(--font-display);font-weight:700;
  font-size:.82rem;letter-spacing:-.005em;
}
.case-nav-back{
  font-family:var(--font-display);font-weight:600;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--case-text-muted);
  display:inline-flex;align-items:center;gap:.5rem;
  transition:color .2s;
}
.case-nav-back:hover{color:var(--case-accent)}

/* ===== Typography ===== */
.eyebrow{
  font-family:var(--font-display);font-weight:600;
  font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--case-accent);
}
.type-hero{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.4rem,5.6vw,4.8rem);
  line-height:.98;letter-spacing:-.035em;
  color:var(--case-text);
}
.type-h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.85rem,3.4vw,2.8rem);
  line-height:1;letter-spacing:-.025em;
  color:var(--case-text);
}
.type-h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,2.4vw,1.95rem);
  line-height:1.05;letter-spacing:-.02em;
  color:var(--case-text);
}
.type-h3{
  font-family:var(--font-display);font-weight:700;
  font-size:1.15rem;letter-spacing:-.015em;
  color:var(--case-text);
}
.type-body-lg{
  font-size:clamp(1.05rem,1.25vw,1.18rem);
  line-height:1.6;color:var(--case-text);
}
.type-body{font-size:1rem;line-height:1.6;color:var(--case-text)}
.type-small{
  font-size:.85rem;line-height:1.55;color:var(--case-text-muted);
}
.editorial-italic{font-style:italic}
.font-mono{font-family:var(--font-mono)}
.muted{color:var(--case-text-muted)}
.subtle{color:var(--case-text-subtle)}

/* small accent dot after a phrase (matches the catalyst-group treatment) */
.dot-accent{
  display:inline-block;
  width:.22em;height:.22em;border-radius:50%;
  background:var(--case-accent);
  margin-left:.04em;
  vertical-align:baseline;
  transition:background-color .6s var(--ease);
}

/* ===== Layout ===== */
.case-header{
  padding:7rem 2rem 4.5rem;
}
.case-section{
  padding:5rem 2rem;
  background:var(--case-surface);
  position:relative;
}
.case-section--raised{
  background:var(--case-surface-raised);
  border-top:1px solid var(--case-hairline);
  border-bottom:1px solid var(--case-hairline);
}
.case-section--sunken{
  background:var(--case-surface-sunken);
  border-top:1px solid var(--case-hairline);
}
.case-inner{max-width:1240px;margin:0 auto}

/* Two-col split: 220px label gutter | content */
.case-split{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:2.5rem 4rem;
}
.case-split--hero{
  grid-template-columns:1fr 280px;
  gap:2.5rem 3rem;
  align-items:start;
}
.case-split--narrow{grid-template-columns:220px 1fr}
@media (max-width:980px){
  .case-split,.case-split--hero,.case-split--narrow{
    grid-template-columns:1fr;
    gap:1.75rem;
  }
}

/* Hero image frame (mellohunt) */
.case-hero-image{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--case-hairline);
  background:#14110E;
  max-width:320px;
  width:100%;
  margin:0;
}
.case-hero-image img{width:100%;height:100%;object-fit:cover}

/* Stats grid */
.case-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:3rem 2.5rem;
  list-style:none;
}
.case-stat .figure{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.5rem,5.6vw,4rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--case-text);
}
.case-stat .label{
  margin-top:.85rem;
  font-size:.85rem;
  color:var(--case-text-muted);
  max-width:26ch;
  line-height:1.45;
}

/* Video frames */
.case-video{
  position:relative;
  overflow:hidden;
  border:1px solid var(--case-hairline);
  background:var(--case-surface-sunken);
  width:100%;
}
.case-video--portrait{aspect-ratio:9/16;max-width:320px}
.case-video--landscape{aspect-ratio:16/9}
.case-video iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* "The work / The hunt" — text on left, video on right (mellohunt) */
.case-work{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:2.5rem 3rem;
  align-items:start;
}
@media (max-width:980px){
  .case-work{grid-template-columns:1fr}
  .case-work .case-video--portrait{max-width:none;margin:0 auto}
}
.case-work p + p{margin-top:1.4rem}
.case-work .subtitle{
  margin-top:1.25rem;
  color:var(--case-text-muted);
  font-style:italic;
}
.case-work .body{margin-top:2rem}

/* Body prose ("About the campaign" etc.) */
.case-prose p{line-height:1.65}
.case-prose p + p{margin-top:1.4rem}
.case-prose .body{margin-top:2rem}

/* Credits dl */
.case-credits{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:1rem 2rem;
}
.case-credits dt{
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--case-text-subtle);
  padding-top:.25rem;
}
.case-credits dd{color:var(--case-text)}
.case-caption{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--case-hairline);
  font-size:.82rem;
  color:var(--case-text-subtle);
  line-height:1.6;
  max-width:60ch;
}
.case-pullquote{
  margin-top:4rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.4rem,2.4vw,2rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--case-text);
  max-width:28ch;
}
@media (max-width:780px){
  .case-credits{grid-template-columns:1fr;gap:.4rem 0}
  .case-credits dt{padding-top:1.2rem}
  .case-credits dd{padding-bottom:1.2rem;border-bottom:1px solid var(--case-hairline)}
  .case-credits dd:last-child{border-bottom:none}
}

/* ===== RTB-specific ===== */

/* Location grid */
.case-locations{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:3rem 1.5rem;
  list-style:none;
}
.case-loc-frame{
  position:relative;
  aspect-ratio:4/5;
  margin-bottom:1rem;
  overflow:hidden;
  border:1px solid var(--case-hairline);
  background:var(--case-surface-raised);
}
.case-loc-frame img{width:100%;height:100%;object-fit:cover}
.case-loc-frame .marker{
  position:absolute;
  font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.08em;
  color:var(--case-text-subtle);
}
.case-loc-frame .marker.tl{top:1rem;left:1rem}
.case-loc-frame .marker.bl{bottom:1rem;left:1rem}
.case-loc .meta{
  margin-top:.6rem;
  font-size:.82rem;
  color:var(--case-text-muted);
  max-width:34ch;
  line-height:1.5;
}

/* Engagement breakdown table */
.case-engagement-table{
  display:grid;
  grid-template-columns:1fr auto;
  max-width:420px;
  margin-top:2.5rem;
}
.case-engagement-table .row{
  display:contents;
}
.case-engagement-table .row > *{
  padding:.8rem 0;
  border-top:1px solid var(--case-hairline);
}
.case-engagement-table .label{color:var(--case-text-muted)}
.case-engagement-table .value{
  font-family:var(--font-display);
  text-align:right;
}

/* Outcome bullet list */
.case-list-outcomes{
  margin-top:2.5rem;
  display:flex;flex-direction:column;gap:.6rem;
  list-style:none;
}
.case-list-outcomes li{
  font-size:1.05rem;line-height:1.5;color:var(--case-text);
}

/* Pull-quote block with red accent rule */
.case-blockquote{
  margin-top:3.5rem;
  padding-left:1.5rem;
  border-left:2px solid var(--case-accent);
}
.case-blockquote blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.5rem,2.4vw,2.2rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--case-text);
}
.case-blockquote figcaption{
  margin-top:.85rem;
  font-size:.78rem;
  color:var(--case-text-muted);
}

/* Press quote list */
.case-press{list-style:none;margin-top:2.5rem}
.case-press li{
  padding:1.4rem 0;
  border-top:1px solid var(--case-hairline);
}
.case-press .source{
  font-size:.78rem;
  color:var(--case-text-muted);
}
.case-press .source strong{
  color:var(--case-text);
  font-weight:400;
}
.case-press .quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  letter-spacing:-.015em;
  margin-top:.55rem;
  line-height:1.2;
}

/* Awards grid */
.case-awards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;
  background:var(--case-hairline);
  border-top:1px solid var(--case-hairline);
  border-bottom:1px solid var(--case-hairline);
  list-style:none;
}
.case-award{
  padding:2rem;
  background:var(--case-surface);
}
.case-award .num{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--case-text-subtle);
}
.case-award .name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.4rem,2vw,1.8rem);
  margin-top:1.5rem;
  letter-spacing:-.02em;
}
.case-award .category{
  margin-top:.85rem;
  font-size:.82rem;
  color:var(--case-text-muted);
}
.case-award ul{
  margin-top:2rem;
  display:flex;flex-direction:column;gap:.85rem;
  list-style:none;
}
.case-award li{
  font-size:.82rem;
  padding-left:1.2rem;
  position:relative;
  line-height:1.5;
  color:var(--case-text);
}
.case-award li::before{
  content:"";
  position:absolute;
  left:0;top:.65em;
  width:6px;height:1px;
  background:var(--case-text-muted);
}

/* ===== Footer ===== */
.case-footer{
  border-top:1px solid var(--case-hairline);
  padding:4rem 2rem 2rem;
  background:var(--case-surface-sunken);
}
.case-footer-inner{max-width:1240px;margin:0 auto}
.case-footer-top{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:2rem;
}
.case-footer-brand{
  display:flex;align-items:center;gap:.7rem;
  color:var(--case-text);
}
.case-footer-brand img{height:26px;filter:drop-shadow(0 0 6px rgba(255,45,85,.5))}
.case-footer-brand span{
  font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.005em;
}
.case-footer-brand .tagline{
  display:block;margin-top:.15rem;
  color:var(--case-text-muted);font-size:.7rem;
  font-style:italic;letter-spacing:.04em;
  font-weight:400;
}
.case-footer-back{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--case-accent);
  display:inline-flex;align-items:center;gap:.5rem;
  transition:opacity .2s;
}
.case-footer-back:hover{opacity:.7}
.case-footer-bottom{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--case-hairline);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem 2rem;
  color:var(--case-text-subtle);
  font-family:var(--font-display);
  font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
}
.case-footer-credit{flex:1 1 auto;text-align:center;letter-spacing:.16em}
.case-footer-credit a{color:var(--case-text-muted);transition:color .2s}
.case-footer-credit a:hover{color:var(--case-accent)}

/* ===== Mobile ===== */
@media (max-width:780px){
  .case-section{padding:3.5rem 1.25rem}
  .case-header{padding:5.5rem 1.25rem 2.5rem}
  .case-nav-inner{padding:.85rem 1.25rem}
  .case-footer{padding:3rem 1.25rem 1.5rem}
  .case-footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}
  .case-footer-credit{text-align:left}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}