/* ============================================================
   Cherry Campaign — editorial digital moodboard
   Deep cherry / burgundy · luxury fashion · low saturation
   (evolution of the studio design system: same serif voice,
    same spring motion philosophy, new interaction model)
   ============================================================ */
:root{
  --bg:#1E0A0E;               /* black cherry base */
  --bg-2:#2A0E12;
  --wine:#3A121A;             /* dark wine */
  --burgundy:#4A1620;
  --cherry:#5C1A22;
  --cherry-lift:#6E2230;
  --charcoal:#231016;
  --cream:#F0E4D8;            /* warm cream type */
  --cream-dim:rgba(240,228,216,.66);
  --cream-faint:rgba(240,228,216,.40);
  --blush:#C98B86;            /* muted blush highlight */
  --accent:#B23A2E;           /* one cherry-red spark */
  --line:rgba(240,228,216,.12);
  --line-soft:rgba(240,228,216,.07);
  --spring:cubic-bezier(.22,1,.36,1);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100%;
  background:var(--bg);
  color:var(--cream);
  font-family:'Instrument Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--blush);color:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{display:block;max-width:100%}

/* atmosphere */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% -6%, #6A1E28 0%, #3A121A 34%, var(--bg) 66%),
    radial-gradient(90% 70% at 10% 110%, #43141D 0%, transparent 60%),
    var(--bg);
}
.glow{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 34% at 74% 4%, rgba(178,58,46,.20), transparent 70%);
}
.vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  box-shadow:inset 0 0 200px 60px rgba(10,3,5,.65);
}
/* film grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* masthead */
.masthead{
  position:relative;z-index:5;max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:30px 40px 6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-dim);
}
.masthead .dot{color:var(--accent);letter-spacing:0}
.mh-mark{color:var(--cream);letter-spacing:.1em}
.mh-mid{opacity:.5;letter-spacing:.3em}
@media(max-width:720px){.mh-mid{display:none}}

/* ───────────── board / bento grid ───────────── */
.board{
  max-width:1280px;margin:0 auto;padding:22px 40px 160px;
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:78px;grid-auto-flow:dense;gap:20px;
}
.card{
  position:relative;overflow:hidden;border-radius:20px;
  background:var(--charcoal);border:1px solid var(--line-soft);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8);
  transition:transform .5s var(--spring),box-shadow .5s var(--spring),border-color .5s var(--ease);
  will-change:transform;
}
/* restrained hover: lift · slight rotation · soft shadow */
.card[data-open],.card[data-panel],.card.now{cursor:pointer}
.card[data-open]:hover,.card[data-panel]:hover,.card.now:hover{
  transform:translateY(-6px) rotate(-.5deg);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.9);
  border-color:var(--line);
}
.card[data-open]:nth-child(even):hover,.card[data-panel]:nth-child(even):hover{transform:translateY(-6px) rotate(.5deg)}

/* spans */
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.r2{grid-row:span 2}.r3{grid-row:span 3}.r4{grid-row:span 4}.r5{grid-row:span 5}.r6{grid-row:span 6}

/* shared type */
.eyebrow,.now-label,.cap-type,.reel-type,.brand-type,.mood-label,.stat-label,.cover-meta,.reader-kicker,.reader-type{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-faint);
}
h1,h2{font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:-.01em}

/* HERO */
.hero{
  display:flex;flex-direction:column;justify-content:center;padding:40px 40px 40px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(178,58,46,.16), transparent 60%),
    linear-gradient(160deg,#3A121A,#240C10 88%);
  border-color:var(--line);
}
.hero .eyebrow{margin-bottom:20px}
.hero h1{font-size:clamp(46px,5.2vw,80px);line-height:.92;color:var(--cream)}
.hero .lede{margin-top:20px;font-size:clamp(15px,1.4vw,19px);color:var(--cream-dim)}
.lede em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--blush);font-size:1.08em}
.lede.sm{margin-top:14px;font-size:15px}
.studio-btn{
  align-self:flex-start;margin-top:30px;display:inline-flex;align-items:center;gap:11px;
  padding:12px 24px;border-radius:99px;border:1px solid var(--line);
  background:rgba(240,228,216,.04);color:var(--cream);font-size:13px;letter-spacing:.03em;
  transition:transform .4s var(--spring),background .3s var(--ease),border-color .3s;
}
.studio-btn:hover{transform:translateY(-2px);background:rgba(240,228,216,.09);border-color:var(--blush)}
.studio-btn .arr{transition:transform .4s var(--spring)}
.studio-btn:hover .arr{transform:translate(2px,-2px)}
.hero-cherry{position:absolute;right:26px;bottom:22px;width:54px;height:54px;opacity:.9}
.hero-cherry.big{position:static;display:inline-block;width:62px;height:62px;margin:0 auto 20px}

/* COVER */
.cover{display:block}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-tint{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,6,9,.5) 0%,transparent 26%,transparent 44%,rgba(20,6,9,.86) 100%),
  radial-gradient(120% 80% at 50% 100%, rgba(74,22,32,.5), transparent 70%);}
.cover-top{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:baseline}
.masthead-serif{font-family:'Instrument Serif',serif;font-size:34px;letter-spacing:.14em;color:var(--cream)}
.cover-issue{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--cream-dim)}
.cover-bottom{position:absolute;left:24px;right:24px;bottom:22px}
.cover-line{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--blush);margin-bottom:8px}
.cover-bottom h2{font-size:clamp(26px,2.6vw,38px);line-height:1.02;color:var(--cream)}
.cover-meta{margin-top:10px}

/* NOW PLAYING */
.now{display:flex;flex-direction:column;padding:20px 22px;background:
  linear-gradient(150deg,#3A121A,#1F0A0E);}
.now-top{display:flex;align-items:center;justify-content:space-between}
.now-eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.now-eq i{width:2px;background:var(--blush);border-radius:1px;animation:eq 1.1s var(--ease) infinite alternate}
.now-eq i:nth-child(1){height:5px;animation-delay:0s}
.now-eq i:nth-child(2){height:11px;animation-delay:.18s}
.now-eq i:nth-child(3){height:7px;animation-delay:.36s}
.now-eq i:nth-child(4){height:9px;animation-delay:.1s}
@keyframes eq{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.now-title{font-family:'Instrument Serif',serif;font-size:23px;line-height:1.05;margin-top:auto;color:var(--cream)}
.now-artist{font-size:12px;color:var(--cream-dim);margin-top:2px}
.now-bar{height:3px;border-radius:2px;background:rgba(240,228,216,.14);margin:12px 0 10px;overflow:hidden}
.now-bar span{display:block;height:100%;width:46%;background:var(--blush);border-radius:2px}
.now-foot{display:flex;align-items:center;justify-content:space-between}
.now-controls{font-size:11px;color:var(--cream-dim);letter-spacing:.06em}
.now-spotify{font-size:10.5px;letter-spacing:.03em;color:var(--blush)}

/* STAT */
.stat{display:flex;flex-direction:column;justify-content:center;padding:22px 24px;
  background:linear-gradient(150deg,#4A1620,#280D12);}
.stat-num{font-family:'Instrument Serif',serif;font-size:clamp(48px,5vw,70px);line-height:.9;color:var(--cream)}
.stat-num em{font-style:normal;color:var(--blush);font-size:.5em;vertical-align:.4em}
.stat-label{margin-top:12px;max-width:80%;line-height:1.5;letter-spacing:.08em}

/* PHOTO */
.photo{display:block}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-tint{position:absolute;inset:0;background:
  linear-gradient(180deg,transparent 40%,rgba(20,6,9,.82) 100%),
  linear-gradient(0deg,rgba(74,22,32,.28),rgba(74,22,32,.28));mix-blend-mode:multiply}
.photo-cap{position:absolute;left:22px;bottom:20px;right:22px;display:flex;flex-direction:column;gap:6px}
.cap-title{font-family:'Instrument Serif',serif;font-size:24px;line-height:1.05;color:var(--cream)}

/* QUOTE */
.quote{display:flex;flex-direction:column;justify-content:center;padding:26px 26px;
  background:linear-gradient(155deg,#2E0F16,#1C090D);}
.q-mark{font-family:'Instrument Serif',serif;font-size:60px;line-height:.4;color:var(--blush);opacity:.7}
.quote blockquote{font-family:'Instrument Serif',serif;font-size:clamp(21px,2vw,27px);line-height:1.18;color:var(--cream);margin:14px 0 16px}
.q-by{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}

/* REEL */
.reel{display:block;background:#160709}
.reel-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80% 80% at 50% 40%,#3A121A,#140609)}
.reel-media img{width:64%;height:auto;object-fit:contain;filter:drop-shadow(6px 16px 20px rgba(0,0,0,.6))}
.reel-media.full{background:#140609}
.reel-media.full img{width:100%;height:100%;object-fit:cover;filter:none}
.reel-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,6,9,.12) 0%,transparent 32%,rgba(20,6,9,.82) 100%)}
.reel .reel-type{color:var(--cream)}
.reel .reel-time{color:var(--cream)}
.reel-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(240,228,216,.5);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--cream);
  background:rgba(20,6,9,.3);backdrop-filter:blur(4px);padding-left:3px;
  transition:transform .4s var(--spring),background .3s}
.reel:hover .reel-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(20,6,9,.5)}
.reel-foot{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:center}
.reel-time{font-family:'Space Mono',monospace;font-size:11px;color:var(--cream-dim)}

/* TYPE */
.type{display:flex;align-items:center;padding:28px 30px;
  background:linear-gradient(155deg,#4A1620,#2A0E13);border-color:var(--line)}
.type-big{font-family:'Instrument Serif',serif;font-size:clamp(28px,3vw,44px);line-height:1.02;color:var(--cream)}
.type-big em{font-style:italic;color:var(--blush)}

/* BRAND */
.brand{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(90% 90% at 50% 30%,#5C1A22,#220C10)}
.brand-mark{font-family:'Instrument Serif',serif;font-size:clamp(70px,8vw,110px);letter-spacing:.04em;color:var(--cream);opacity:.96}
.brand-foot{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:center}
.brand-title{font-family:'Instrument Serif',serif;font-size:18px;color:var(--cream)}

/* MOOD */
.mood{display:flex;flex-direction:column;padding:22px 24px;
  background:linear-gradient(150deg,#2A0E13,#180709)}
.mood .swatches{display:flex;gap:0;margin-top:auto;height:64%;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft)}
.mood .swatches span{flex:1}

/* ───────────── glass dock ───────────── */
.dock{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:24px;
  background:rgba(38,14,19,.55);backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(240,228,216,.14);
  box-shadow:0 20px 50px -16px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.08) inset;
}
.dapp{
  position:relative;width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:var(--cream);
  background:rgba(240,228,216,.05);border:1px solid var(--line-soft);
  transition:transform .32s var(--spring),background .3s var(--ease),color .3s;
}
.dapp:hover{transform:translateY(-7px);background:rgba(240,228,216,.12);color:#fff}
.dapp svg{width:22px;height:22px}
.dbe{font-family:'Instrument Serif',serif;font-size:19px}
.dock-div{width:1px;height:28px;background:var(--line);margin:0 2px}
.dtip{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:rgba(20,6,9,.95);color:var(--cream);font-size:11px;letter-spacing:.02em;
  padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;
  border:1px solid var(--line-soft);transition:opacity .2s,transform .2s;
}
.dapp:hover .dtip{opacity:1;transform:translateX(-50%) translateY(-2px)}

/* ───────────── reader overlay ───────────── */
.reader{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:40px}
.reader.hidden{display:none}
.reader-scrim{position:absolute;inset:0;background:rgba(12,4,6,.72);backdrop-filter:blur(6px);animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.reader-panel{
  position:relative;z-index:1;width:min(720px,94vw);max-height:88vh;overflow:hidden;
  border-radius:22px;background:linear-gradient(165deg,#2A0E13,#170709);border:1px solid var(--line);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.85);
  animation:pop .5s var(--spring);
}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.reader-content{max-height:88vh;overflow-y:auto;scrollbar-width:thin}
.reader-content::-webkit-scrollbar{width:8px}
.reader-content::-webkit-scrollbar-thumb{background:rgba(240,228,216,.16);border-radius:8px}

/* magazine hero */
.rc-hero{position:relative;overflow:hidden;background:#140609;aspect-ratio:16/9}
.rc-hero img{width:100%;height:100%;object-fit:cover}
.rc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#1B0A0D 100%)}
.rc-hero-ph{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(90% 90% at 50% 40%,#3A121A,#170709)}
.rc-hero-ph span{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}
.rc-hero-ph::after{display:none}
/* placeholder copy where approved write-up will drop in */
.rc-ph{border:1px dashed var(--line);border-radius:10px;padding:14px 16px;
  background:rgba(240,228,216,.02);font-style:italic}
p.reader-copy.rc-ph{color:var(--cream-dim)}

.rc-body{padding:32px 40px 40px}
.rc-body h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--cream);margin:8px 0 8px;letter-spacing:-.01em}
.rc-lead{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(18px,2vw,23px);line-height:1.15;color:var(--blush);margin-bottom:18px}
.reader-copy{font-size:14px;line-height:1.75;color:var(--cream-dim);max-width:56ch}

/* metric rows */
.rc-metrics{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0 8px}
.rc-metric{flex:1 1 150px;min-width:130px;padding:16px 18px;border-radius:12px;
  background:rgba(240,228,216,.04);border:1px solid var(--line-soft);display:flex;flex-direction:column;gap:3px}
.rc-v{font-family:'Instrument Serif',serif;font-size:clamp(28px,3vw,38px);line-height:.95;color:var(--cream)}
.rc-l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blush)}
.rc-sub-l{font-size:11px;color:var(--cream-faint);letter-spacing:.02em;margin-top:2px}
.rc-metrics.sm .rc-metric{flex:1 1 110px;min-width:100px;padding:13px 14px}
.rc-metrics.sm .rc-v{font-size:clamp(22px,2.4vw,28px)}

.rc-sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-faint);margin:30px 0 14px}
.rc-bullets{list-style:none;display:flex;flex-direction:column;gap:14px}
.rc-bullets li{font-size:13.5px;line-height:1.65;color:var(--cream-dim);padding-left:18px;position:relative;max-width:60ch}
.rc-bullets li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--blush)}
.rc-b-h{color:var(--cream);font-weight:600}

/* featured campaign block */
.rc-campaign{margin-top:30px;padding:26px 26px;border-radius:16px;
  background:linear-gradient(150deg,rgba(94,26,34,.5),rgba(30,12,15,.5));border:1px solid var(--line-soft)}
.rc-campaign h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(22px,2.4vw,30px);color:var(--cream);margin:6px 0 10px}

/* gallery */
.rc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rc-shot{border-radius:10px;overflow:hidden;aspect-ratio:1;background:#140609}
.rc-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--spring)}
.rc-shot:hover img{transform:scale(1.05)}

/* video reels (Pineapple Play · doctors) */
.rc-videos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rc-vid{margin:0}
.rc-vid video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:#140609;
  display:block;border:1px solid var(--line-soft)}
.rc-vid figcaption{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-faint);margin-top:8px}

/* static feed creatives — shown full, no crop */
.rc-creatives{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rc-cre{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);background:#140609}
.rc-cre img{width:100%;height:auto;display:block}

.rc-foot{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.rc-ig{font-size:13px;letter-spacing:.02em;color:var(--blush)}
.rc-ig span{display:inline-block;transition:transform .3s var(--spring)}
.rc-ig:hover span{transform:translateX(4px)}
.rc-ig.marker{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--cream-faint)}
.reader-note{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.05em;color:var(--cream-faint);margin-top:16px}

.reader-close{
  position:absolute;top:16px;right:16px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:rgba(20,6,9,.6);border:1px solid var(--line);color:var(--cream);font-size:18px;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .3s var(--spring)}
.reader-close:hover{background:var(--cherry);transform:rotate(90deg)}

/* studio overlay */
.studio-panel{width:min(560px,92vw)}
.studio-body{padding:44px 44px 40px;text-align:center}
.studio-body h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.05;margin:10px 0 16px;color:var(--cream)}
.studio-body .reader-copy{margin:0 auto}
.mail-link{display:inline-block;margin-top:22px;font-family:'Instrument Serif',serif;font-size:22px;
  color:var(--blush);border-bottom:1px solid rgba(201,139,134,.4);padding-bottom:3px}
.mail-link:hover{border-color:var(--blush)}

/* ============================================================
   EDITORIAL SECTIONS  (Hero · About · Services · PR · Work · Contact)
   Same tokens, type scale and motion as the rest of the system.
   ============================================================ */
body{overflow-x:hidden}
.sec{position:relative;max-width:1180px;margin:0 auto;padding:110px 40px}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:30px}
.sec-index{font-family:'Space Mono',monospace;font-size:12px;color:var(--blush);letter-spacing:.1em}
.sec-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(30px,4vw,54px);line-height:1;color:var(--cream);letter-spacing:-.01em}

/* pull-quotes (kept personality lines) */
.pull{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(34px,6vw,80px);line-height:1;letter-spacing:-.02em;color:var(--cream);text-align:center;margin:96px auto 0;max-width:15ch}
.pull em{font-style:italic;color:var(--blush)}
.pull.sm{font-size:clamp(22px,3.2vw,40px);max-width:24ch;margin:6px auto 44px;color:var(--cream-dim)}

/* 1 · HERO */
.hero-sec{min-height:90vh;display:flex;flex-direction:column;justify-content:center;padding-top:20px}
.hero-sec .eyebrow{margin-bottom:22px}
.hero-sec h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(64px,11vw,152px);line-height:.9;letter-spacing:-.025em;color:var(--cream)}
.hero-sec .lede{margin-top:24px;font-size:clamp(16px,1.6vw,21px);color:var(--cream-dim)}
.hero-sec .studio-btn{align-self:flex-start;margin-top:36px}
.hero-cherry{position:absolute;right:40px;bottom:120px;width:64px;height:64px;opacity:.9}
.scroll-cue{position:absolute;left:40px;bottom:44px;display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-faint)}
.scroll-cue span{animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* 2 · ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-top:10px}
.about-photo{border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);border:1px solid var(--line-soft)}
.about-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}
.about-copy .rc-lead{font-size:clamp(22px,2.4vw,30px);line-height:1.12;margin-bottom:22px}
.about-copy .reader-copy{max-width:48ch}
.about-copy .reader-copy+.reader-copy{margin-top:14px}
.about-copy-full{margin-top:44px;padding-top:38px;border-top:1px solid var(--line);max-width:60ch}

/* 3 · SERVICES */
.svc-list{margin-top:14px;border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:56px 1fr 1.5fr;gap:26px;align-items:baseline;
  padding:28px 8px;border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.svc-row:hover{background:rgba(240,228,216,.03)}
.svc-no{font-family:'Space Mono',monospace;font-size:12px;color:var(--cream-faint)}
.svc-row h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(22px,2.4vw,30px);color:var(--cream)}
.svc-row p{font-size:14px;line-height:1.6;color:var(--cream-dim)}

/* 4 · PR */
.pr-intro{max-width:62ch;margin-top:4px}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.pr-ph{aspect-ratio:4/3;border:1px dashed var(--line);border-radius:14px;background:rgba(240,228,216,.02);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:border-color .3s,background .3s}
.pr-ph:hover{border-color:var(--blush);background:rgba(240,228,216,.04)}
.pr-ph-k{font-family:'Instrument Serif',serif;font-size:22px;color:var(--cream-dim)}
.pr-ph-m{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}

/* 5 · WORK */
.work-pane{display:grid;grid-template-columns:250px 1fr;gap:44px;margin-top:6px}
.work-list{display:flex;flex-direction:column}
.wl-item{display:flex;align-items:baseline;gap:14px;text-align:left;
  padding:20px 14px;border-bottom:1px solid var(--line-soft);border-left:2px solid transparent;
  transition:border-color .3s var(--ease),background .3s}
.wl-item:hover{background:rgba(240,228,216,.02)}
.wl-item.active{border-left-color:var(--blush)}
.wl-no{font-family:'Space Mono',monospace;font-size:11px;color:var(--cream-faint);padding-top:5px}
.wl-text{display:flex;flex-direction:column;gap:4px}
.wl-name{font-family:'Instrument Serif',serif;font-size:23px;line-height:1;color:var(--cream-dim);transition:color .3s}
.wl-cat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}
.wl-item:hover .wl-name,.wl-item.active .wl-name{color:var(--cream)}
.work-feature{min-width:0}
.wf-media{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;cursor:pointer;
  border:1px solid var(--line-soft);box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.wf-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--spring)}
.wf-media:hover img{transform:scale(1.03)}
.wf-open-badge{position:absolute;left:16px;bottom:16px;background:rgba(20,6,9,.7);backdrop-filter:blur(6px);
  border:1px solid var(--line);padding:8px 15px;border-radius:99px;font-size:11px;letter-spacing:.03em;color:var(--cream);
  transition:background .3s}
.wf-media:hover .wf-open-badge{background:var(--cherry)}
.wf-body{padding-top:24px}
.wf-name{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--cream);margin:8px 0 8px}
.wf-body .rc-lead{margin-bottom:14px}
.wf-body .reader-copy{max-width:58ch}
.wf-metrics{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 22px}
.wf-chip{font-size:12px;color:var(--cream-dim);border:1px solid var(--line);border-radius:99px;padding:8px 15px}
.wf-chip b{font-family:'Instrument Serif',serif;font-weight:400;font-size:16px;color:var(--blush);margin-right:4px}
.wf-swap{animation:fadeswap .4s var(--ease)}
@keyframes fadeswap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 6 · CONTACT */
.contact-sec{padding-bottom:170px}
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:center;margin-top:20px}
.contact-lead{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(34px,5.2vw,66px);line-height:1;letter-spacing:-.02em;color:var(--cream)}
.contact-lead em{font-style:italic;color:var(--blush)}
.contact-main .mail-link{margin-top:26px}
.contact-soc{display:flex;gap:24px;margin-top:26px;font-size:13px;color:var(--cream-dim)}
.contact-soc a{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s,color .2s}
.contact-soc a:hover{border-color:var(--blush);color:var(--cream)}
.contact-now{min-height:196px;align-self:stretch}

/* section responsive */
@media(max-width:860px){
  .sec{padding:80px 26px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:30px}
  .work-pane{grid-template-columns:1fr;gap:26px}
  .work-list{flex-direction:row;flex-wrap:wrap;border-bottom:1px solid var(--line-soft)}
  .wl-item{border-bottom:none;flex:1 1 45%}
  .svc-row{grid-template-columns:40px 1fr;gap:14px}
  .svc-row p{grid-column:2}
  .pr-grid{grid-template-columns:1fr 1fr}
  .hero-cherry{right:26px;bottom:130px;width:52px;height:52px}
  .contact-now{max-width:340px}
}

/* ============================================================
   DASHBOARD — typographic section nav-cards
   ============================================================ */
.nav-card{display:flex;flex-direction:column;gap:12px;padding:26px}
.nav-card .nav-sub{margin-top:auto}
.nav-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(28px,3vw,42px);line-height:.95;letter-spacing:-.01em;color:var(--cream)}
.nav-sub{font-size:12.5px;color:var(--cream-dim);display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em}
.nav-sub .arr{transition:transform .3s var(--spring)}
.card[data-panel]:hover .nav-sub .arr{transform:translateX(4px)}
.svc-peek{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.svc-peek span{font-family:'Instrument Serif',serif;font-size:clamp(15px,1.7vw,20px);line-height:1.28;color:var(--cream-dim);opacity:.72}
.services-card{background:linear-gradient(150deg,#4A1620,#250D12)}
.contact-card{background:radial-gradient(90% 90% at 18% 16%,rgba(178,58,46,.22),transparent 60%),linear-gradient(150deg,#3A121A,#1F090D)}
.pr-card{background:linear-gradient(150deg,#2E0F16,#170709)}

/* ============================================================
   SECTION PANEL overlay (About · Services · PR · Contact · Work)
   ============================================================ */
.panel{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:40px}
.panel.hidden{display:none}
.panel-scrim{position:absolute;inset:0;background:rgba(12,4,6,.72);backdrop-filter:blur(6px);animation:fade .35s var(--ease)}
.panel-box{position:relative;z-index:1;width:min(560px,94vw);max-height:88vh;overflow:hidden;border-radius:22px;
  background:linear-gradient(165deg,#2A0E13,#170709);border:1px solid var(--line);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.85);animation:pop .5s var(--spring)}
.panel.panel-wide .panel-box{width:min(1040px,94vw)}
.panel-content{max-height:88vh;overflow-y:auto;padding:44px 46px;scrollbar-width:thin}
.panel-content::-webkit-scrollbar{width:8px}
.panel-content::-webkit-scrollbar-thumb{background:rgba(240,228,216,.16);border-radius:8px}
.panel-content .sec-head{margin-bottom:26px}
.panel-content .about-grid,.panel-content .work-pane{margin-top:6px}
.contact-panel{padding:2px 0 6px}
.contact-panel .contact-lead{margin-bottom:4px}

/* PR — press coverage list */
.pr-press{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.pr-item{display:flex;flex-direction:column}
.pr-clip{aspect-ratio:4/3;border:1px dashed var(--line);border-radius:12px;
  background:rgba(240,228,216,.02);display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden}
.pr-clip span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-faint)}
/* filled clip shows the full clipping, no crop */
.pr-clip.filled{aspect-ratio:auto;border:1px solid var(--line-soft);background:#140609;align-items:stretch}
.pr-clip.filled img{width:100%;height:auto;display:block}
.pr-outlet{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blush);margin-bottom:8px}
.pr-head{font-family:'Instrument Serif',serif;font-weight:400;font-size:21px;line-height:1.1;color:var(--cream);margin-bottom:9px}
.pr-blurb{font-size:12.5px;line-height:1.55;color:var(--cream-dim)}
.pr-foot{margin-top:auto;padding-top:14px;font-size:11px;letter-spacing:.04em;color:var(--cream-faint)}
.pr-note{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.55;color:var(--cream-dim);font-style:italic;max-width:70ch}
@media(max-width:760px){ .pr-press{grid-template-columns:1fr} }

/* About — Meet Huda (founder) */
.meet-huda{display:grid;grid-template-columns:0.85fr 1.15fr;gap:44px;align-items:center;
  margin-top:48px;padding-top:44px;border-top:1px solid var(--line)}
.meet-huda.meet-huda-first{margin-top:0;padding-top:0;border-top:none}
.huda-photo{border-radius:16px;overflow:hidden;border:1px solid var(--line-soft);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.huda-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/3.7;display:block}
.huda-copy .reader-kicker{color:var(--blush)}
.huda-name{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--cream);margin:8px 0 2px;letter-spacing:-.01em}
.huda-role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:18px}
.huda-copy .reader-copy{max-width:54ch}
.huda-copy .reader-copy+.reader-copy{margin-top:12px}
@media(max-width:860px){
  .meet-huda{grid-template-columns:1fr;gap:24px;margin-top:34px;padding-top:32px}
  .meet-huda.meet-huda-first{margin-top:0;padding-top:0}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .now-eq i{animation:none}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* ───────────── responsive ───────────── */
@media(max-width:1000px){
  .board{grid-template-columns:repeat(8,1fr);padding:20px 26px 150px}
  .c5,.c6{grid-column:span 8}.c4{grid-column:span 4}.c3{grid-column:span 4}
  .hero{grid-column:span 8}
}
@media(max-width:640px){
  .masthead{padding:22px 22px 4px;font-size:10px}
  .mh-right{display:none}
  .board{grid-template-columns:repeat(2,1fr);grid-auto-rows:70px;gap:14px;padding:16px 18px 140px}
  .c3,.c4,.c5,.c6{grid-column:span 2}
  .hero{grid-column:span 2}
  .hero h1{font-size:44px}
  .reader{padding:16px}
  .reader-panel{max-height:92vh}
  .reader-content{max-height:92vh}
  .rc-body{padding:24px 22px 30px}
  .rc-gallery{grid-template-columns:repeat(2,1fr)}
  .dock{gap:7px;padding:9px 12px;bottom:14px}
  .dapp{width:42px;height:42px}
}