/* ============================================================
   Dani Bruckman — design system
   Aesthetic: New York Magazine / The Cut editorial
   White ground, true black ink, hairline rules,
   Canela display + PP Telegraf body.
   ============================================================ */

/* ---- FONTS ---- */
@font-face{font-family:"Canela";src:url("fonts/Canela-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Canela";src:url("fonts/Canela-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:"Canela";src:url("fonts/Canela-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Canela";src:url("fonts/Canela-RegularItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Canela";src:url("fonts/Canela-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Canela";src:url("fonts/Canela-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"PP Telegraf";src:url("fonts/PPTelegraf-Ultralight.otf") format("opentype");font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:"PP Telegraf";src:url("fonts/PPTelegraf-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"PP Telegraf";src:url("fonts/PPTelegraf-RegularSlanted.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"PP Telegraf";src:url("fonts/PPTelegraf-Ultrabold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;}

/* ---- TOKENS ---- */
:root{
  --bg:#ffffff;
  --ink:#0f0f0f;
  --muted:#6b6b6b;
  --faint:#9a9a9a;
  --line:#e3e1da;
  --line-strong:#0f0f0f;
  --accent:#0f0f0f;

  --font-display:"Canela",Georgia,"Times New Roman",serif;
  --font-body:"PP Telegraf","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
.serif{font-family:var(--font-display);}
em{font-style:italic;}

/* ---- NAV (masthead) ---- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-strong);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:1080px;margin:0 auto;}
.brand{font-family:var(--font-display);font-size:20px;letter-spacing:.2px;}
.nav-links{display:flex;gap:26px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.nav-links a:hover{color:var(--ink);}

/* ---- HERO ---- */
.hero{padding:60px 0 56px;}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;}
h1.name{font-family:var(--font-display);font-weight:300;font-size:clamp(58px,12vw,138px);line-height:.9;letter-spacing:-.01em;}

/* ---- ABOUT ---- */
.about{display:grid;grid-template-columns:1.6fr 0.8fr;gap:64px;align-items:center;padding:52px 0 8px;border-top:1px solid var(--line-strong);}
.about .portrait{width:100%;max-width:330px;justify-self:end;display:block;border:1px solid var(--ink);box-shadow:13px 13px 0 0 var(--ink);}
#credits{padding-top:44px;border-top:none;}
.lw-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:24px;text-align:center;}
.lw-label-2{margin-top:52px;}
.lw-heroes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px 30px;margin-bottom:22px;max-width:900px;margin-left:auto;margin-right:auto;}
.lw-badge{flex:0 0 auto;width:150px;height:58px;display:flex;align-items:center;justify-content:center;}
.lw-badge img{max-width:130px;max-height:44px;width:auto;height:auto;display:block;opacity:.9;}
.lw-badge img.lw-tall{max-height:58px;}
.lw-more{font-size:15px;line-height:1.85;color:var(--muted);max-width:860px;margin:0 auto;text-align:center;}
.lw-more-2{margin-top:0;}
@media(max-width:640px){.lw-heroes{gap:24px 28px;}.lw-badge{width:108px;height:46px;}.lw-badge img{max-width:96px;max-height:36px;}.lw-more{font-size:14px;}}
.about p{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,2.4vw,27px);line-height:1.35;color:var(--ink);max-width:880px;margin-bottom:22px;}

/* ---- SECTION SCAFFOLD ---- */
section{padding:70px 0;border-top:1px solid var(--line-strong);}
.sec-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.sec-head{font-family:var(--font-display);font-weight:300;font-size:clamp(34px,5.5vw,58px);line-height:1;margin:0 0 40px;}

/* ---- CASE STUDIES (image-led editorial cards) ---- */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 40px;}
.case{display:block;}
.case .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid var(--line);}
.case .thumb img,.case .thumb video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,opacity .3s;}
.case:hover .thumb img,.case:hover .thumb video{transform:scale(1.02);}
.case .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff;opacity:.92;text-shadow:0 2px 16px rgba(0,0,0,.5);}
.thumb.ph{background:#f3f1ea;display:flex;align-items:center;justify-content:center;}
.thumb.ph .ph-label{position:absolute;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.thumb.ph .play{color:#cfcabd;text-shadow:none;}
.case .meta{padding-top:18px;}
.case .tag{display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-strong);padding:5px 11px;border-radius:0;margin-bottom:14px;}
.case .client{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.4vw,40px);line-height:1.02;}
.case:hover .client{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
.case .pub{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px;}

/* portrait (9:16) case cards */
.case.portrait .thumb{aspect-ratio:9/16;max-width:340px;margin:0 auto;}
.case.portrait .meta{max-width:340px;margin:0 auto;text-align:center;}
.todo{color:var(--faint)!important;border-color:var(--line)!important;font-style:italic;}

/* ---- SIDE QUESTS ---- */
.quest{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:64px;}
.quest:last-child{margin-bottom:0;}
.quest.reverse{direction:rtl;}
.quest.reverse > *{direction:ltr;}
.quest .imgs{display:grid;grid-template-columns:1fr;gap:12px;align-content:start;}
.quest .imgs img{border:1px solid var(--line);width:100%;height:auto;display:block;}
.quest.gw{grid-template-columns:0.85fr 1.4fr;align-items:start;gap:50px;}
.quest .imgs.arrow-down{display:flex;flex-direction:column;align-items:center;gap:12px;}
.quest .imgs.arrow-down figure{margin:0;width:100%;}
.quest .imgs.arrow-down img{width:100%;border:1px solid var(--line);display:block;}
.quest .imgs.arrow-down figcaption{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:9px;text-align:center;}
.quest .imgs.arrow-down .ar{font-size:30px;line-height:.7;color:var(--ink);}
.quest .num{font-family:var(--font-display);font-size:16px;color:var(--muted);}
.quest .qtag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 12px;}
.quest h3{font-family:var(--font-display);font-weight:300;font-size:34px;margin-bottom:16px;line-height:1.05;}
.quest p{font-size:16px;color:#3a3a3a;margin-bottom:14px;}
.quest .stat{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-top:1px solid var(--line-strong);padding-top:14px;margin-top:6px;}
.quest small{color:var(--muted);text-transform:none;letter-spacing:0;}

/* ---- PRESS & AWARDS ---- */
.pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.pa-grid h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.award{border-top:1px solid var(--line);padding:14px 0;}
.award .t{font-family:var(--font-display);font-weight:300;font-size:20px;}
.award .d{font-size:13px;color:var(--muted);}
.press-block{margin-bottom:26px;}
.press-block .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;}
.press-block a{display:block;font-size:14px;color:#3a3a3a;padding:7px 0;border-bottom:1px solid var(--line);}
.press-block a:hover{color:var(--ink);}
.logos{margin-top:30px;}
.logos .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:24px 0 12px;}
.logos .list{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:14px;color:#3a3a3a;}

/* ---- CONTACT ---- */
.contact{display:block;}
.contact img{border:1px solid var(--line);}
.contact h2{font-family:var(--font-display);font-weight:300;font-size:clamp(38px,6vw,66px);margin-bottom:20px;line-height:1;}
.contact p{font-size:17px;color:#3a3a3a;margin-bottom:22px;}
.contact .links{display:flex;gap:22px;font-size:15px;}
.contact .links a{border-bottom:1px solid var(--line-strong);padding-bottom:2px;}
.contact .links a:hover{opacity:.6;}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--line-strong);padding:32px 0;}
.foot-inner{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.04em;color:var(--muted);}
.foot-inner img{width:46px;opacity:.85;}

/* ============================================================
   CASE STUDY DETAIL PAGES
   ============================================================ */
.cs-hero{padding:64px 0 40px;}
.back{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:30px;display:inline-block;}
.back:hover{color:var(--ink);}
.cs-tag{display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--line-strong);padding:5px 11px;margin-bottom:20px;}
.cs-client{font-family:var(--font-display);font-weight:300;font-size:clamp(44px,8vw,96px);line-height:.92;letter-spacing:-.01em;}
.cs-pub{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:18px;}
.cs-logline{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(22px,3vw,34px);line-height:1.25;max-width:820px;margin:34px 0 0;color:var(--ink);text-wrap:balance;}
.cs-role{margin-top:24px;font-size:16px;color:var(--ink);}
.cs-role .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:12px;}

.cs-video{aspect-ratio:16/9;background:#000;border:1px solid var(--line);margin:48px 0;position:relative;overflow:hidden;}
.cs-video img{width:100%;height:100%;object-fit:cover;}
.cs-video.ph{background:#f3f1ea;display:flex;align-items:center;justify-content:center;}
.cs-video .ph-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.cs-video iframe{width:100%;height:100%;border:0;}
.cs-video video{width:100%;height:100%;object-fit:cover;display:block;}
.cs-video.portrait{aspect-ratio:4/5;max-width:460px;margin:48px auto;}

.cs-body{display:grid;grid-template-columns:200px 1fr;gap:40px;border-top:1px solid var(--line-strong);padding-top:40px;}
.cs-body + .cs-body{margin-top:0;}
.cs-block{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:32px 0;border-top:1px solid var(--line);}
.cs-block:first-of-type{border-top:1px solid var(--line-strong);}
.cs-block h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400;padding-top:4px;}
.cs-block .copy{font-size:18px;line-height:1.6;color:#262626;max-width:680px;}
.cs-block .copy p{margin-bottom:16px;}
.cs-block .copy .placeholder{color:var(--faint);font-style:italic;}
.cs-block .copy ul{list-style:none;padding:0;margin:0;}
.cs-block .copy li{font-size:18px;line-height:1.6;color:#262626;padding-left:20px;position:relative;margin-bottom:10px;}
.cs-block .copy li:before{content:"";position:absolute;left:0;top:13px;width:8px;height:1px;background:var(--ink);}

/* capabilities groups */
.cap-group{margin-bottom:30px;}
.cap-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}

/* outcome stat cards */
.outcome-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;}
.ocard{background:var(--ink);color:#f4f1ea;border-radius:14px;padding:24px 22px;display:flex;flex-direction:column;justify-content:flex-start;min-height:152px;}
.ocard .ostat{font-family:var(--font-display);font-weight:300;font-size:clamp(38px,4.8vw,56px);line-height:1;color:#f7f4ec;}
.ocard .olabel{font-size:13px;line-height:1.45;margin-top:13px;color:#a29f95;}
.ocard.statement{justify-content:center;}
.ocard.statement .otext{font-size:15px;line-height:1.55;color:#e6e3da;}
.cs-block .copy .role-title{font-family:var(--font-display);font-size:22px;color:var(--ink);margin-bottom:14px;}
.pills{display:flex;flex-wrap:wrap;gap:8px;}
.pill{font-size:12.5px;letter-spacing:.01em;padding:7px 14px;border:1px solid var(--line-strong);border-radius:30px;color:var(--ink);white-space:nowrap;}
.pill-note{font-size:13px;color:var(--muted);font-style:italic;margin-top:14px;}
.cs-banner{display:block;width:100%;border:1px solid var(--line);margin:8px 0 44px;}
.cs-banner.ph{aspect-ratio:2.4/1;background:#f3f1ea;align-items:center;justify-content:center;}
.cs-banner.ph span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.cs-meta-list{font-size:15px;color:#262626;line-height:1.9;}

.cs-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.cs-gallery .shot{aspect-ratio:4/3;background:#f3f1ea;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cs-gallery .shot img{width:100%;height:100%;object-fit:cover;}
.cs-gallery .shot .ph-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.cs-gallery.full{grid-template-columns:repeat(2,1fr);}
.cs-gallery.full .shot{aspect-ratio:16/9;background:#0f0f0f;}
.cs-gallery.full .shot img,.cs-gallery.full .shot video{width:100%;height:100%;object-fit:contain;display:block;}
.cs-gallery.vert{grid-template-columns:repeat(4,1fr);}
.cs-gallery.vert .shot{aspect-ratio:9/16;background:#0f0f0f;}
.cs-gallery.vert .shot img,.cs-gallery.vert .shot video{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:760px){.cs-gallery.vert{grid-template-columns:repeat(2,1fr);}}

/* embedded social players */
.embed-row{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:48px;}
.embed-row figure{flex:1 1 300px;max-width:360px;margin:0;}
.embed-frame{aspect-ratio:9/16;border:1px solid var(--line);background:#fff;overflow:hidden;}
.embed-frame iframe{width:100%;height:100%;border:0;display:block;}
.embed-row figcaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px;}

/* asset captions / per-asset links */
.asset-cap{font-size:13px;letter-spacing:.04em;}
.asset-cap a{border-bottom:1px solid var(--line-strong);padding-bottom:2px;}
.asset-cap a:hover{opacity:.6;}
.cs-gallery.vert figure{margin:0;}
.cs-gallery.vert figcaption{font-size:12px;letter-spacing:.03em;margin-top:10px;line-height:1.3;}
.cs-gallery.vert figcaption a{border-bottom:1px solid var(--line-strong);padding-bottom:1px;}
.cs-gallery.vert figcaption a:hover{opacity:.6;}

.cs-next{border-top:1px solid var(--line-strong);padding:36px 0 0;display:flex;justify-content:space-between;align-items:baseline;}
.cs-next .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.cs-next a{font-family:var(--font-display);font-weight:300;font-size:24px;}
.cs-next a:hover{text-decoration:underline;text-underline-offset:4px;}

/* ---- RESPONSIVE ---- */
html{overflow-x:hidden;}

@media(max-width:760px){
  .wrap{padding:0 22px;}
  section{padding:54px 0;}

  /* masthead: not sticky on mobile, brand + wrapped links stacked */
  header.nav{position:static;}
  .nav-inner{flex-direction:column;gap:11px;padding:14px 22px;}
  .brand{font-size:19px;}
  .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;font-size:10.5px;}

  /* layout grids collapse */
  .about,.case-grid,.quest,.quest.gw,.pa-grid,.contact{grid-template-columns:1fr;}
  .about{gap:34px;padding-top:40px;}
  .about .portrait{justify-self:start;max-width:248px;box-shadow:9px 9px 0 0 var(--ink);margin-bottom:4px;}
  .quest{gap:26px;margin-bottom:48px;}
  .quest.reverse{direction:ltr;}
  .case-grid{gap:34px 0;}
  .pa-grid{gap:32px;}

  /* case study detail */
  .cs-block{grid-template-columns:1fr;gap:10px;}
  .cs-body{grid-template-columns:1fr;}
  .cs-video{margin:30px 0;}

  /* footer stacks */
  .foot-inner{flex-direction:column;gap:12px;text-align:center;}
}

@media(max-width:480px){
  h1.name{font-size:clamp(44px,15vw,72px);}
  .cs-gallery,.cs-gallery.full{grid-template-columns:1fr;}
  .outcome-cards{grid-template-columns:1fr 1fr;}
  .ocard{min-height:118px;padding:18px 16px;}
  .contact .links{flex-wrap:wrap;gap:14px 22px;}
}