/* Hiphype — shared styles for detail pages (case study + article) */
:root{
  --paper:#ffffff;--paper-2:#f6f6f7;--ink:#13131a;--ink-soft:#3a3942;--muted:#6e6d77;--faint:#a6a3ab;
  --line:rgba(20,18,28,.12);--ease:cubic-bezier(.22,.9,.18,1);
}
*{box-sizing:border-box;}
/* hide the scrollbar (scrolling still works) */
html{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar{width:0;height:0;display:none;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;line-height:1.6;letter-spacing:-.005em;
  font-size:clamp(15px,1.05vw,17px);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.it{font-family:"Fraunces",serif;font-style:italic;font-weight:400;}
.wrap{width:min(1180px,calc(100% - clamp(36px,8vw,140px)));margin:0 auto;}
.eyebrow{display:flex;align-items:center;width:fit-content;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted);}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:16px 0;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;}
.nav .logo{display:inline-flex;align-items:center;line-height:0;color:var(--ink);}
.nav .logo img{height:18px;width:auto;display:block;}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-soft);transition:color .25s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{padding:9px 18px;border:1px solid var(--ink);border-radius:100px;color:var(--ink)!important;transition:background .3s,color .3s;}
.nav-cta:hover{background:var(--ink);color:#fff!important;}
/* Work dropdown (shared across detail pages) */
.nav-dd{position:relative;display:inline-flex;align-items:center;}
.nav-ddt{display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.nav-ddt svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease);}
.nav-dd:hover .nav-ddt svg,.nav-dd.open .nav-ddt svg{transform:rotate(180deg);}
.nav-ddp{position:absolute;top:100%;left:50%;margin-top:10px;transform:translateX(-50%) translateY(8px);min-width:224px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 34px 64px -28px rgba(20,18,40,.4);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;z-index:60;}
.nav-dd:hover .nav-ddp,.nav-dd.open .nav-ddp{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav-ddp::before{content:"";position:absolute;left:-14px;right:-14px;top:-18px;height:22px;}
.nav-links .nav-ddp a{display:block;padding:10px 14px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap;transition:background .2s,color .2s;}
.nav-links .nav-ddp a:hover{background:var(--paper-2);color:var(--ink);}
.nav-links .nav-ddp .dd-all{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);border-radius:9px 9px 0 0;margin-bottom:4px;}
@media(max-width:680px){.nav-links a:not(.nav-cta){display:none;}}

/* back link */
.backbar{padding-top:clamp(92px,12vh,120px);}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--muted);transition:gap .25s,color .25s;}
.back:hover{color:var(--ink);gap:12px;}
.back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* hero */
.dhead{padding:clamp(22px,3vw,40px) 0 clamp(30px,4vw,54px);}
.dhead .cat{margin-bottom:18px;}
.dhead h1{font-weight:300;font-size:clamp(34px,5.6vw,76px);line-height:1.04;letter-spacing:-.025em;margin:0 0 clamp(18px,2vw,28px);max-width:18ch;}
.dhead .lead{font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:var(--ink-soft);max-width:60ch;margin:0;}
.dhero-img{position:relative;border-radius:22px;overflow:hidden;height:clamp(380px,72vh,760px);margin:clamp(8px,1.5vw,20px) 0 clamp(36px,5vw,72px);box-shadow:0 50px 90px -50px rgba(16,14,30,.5);}
.dhero-img img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;will-change:transform;}

/* meta row */
.meta{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:clamp(36px,5vw,64px);}
.meta div{min-width:120px;}
.meta .k{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:7px;}
.meta .v{font-size:clamp(15px,1.1vw,17px);color:var(--ink);font-weight:500;}

/* prose / body */
.body{max-width:72ch;margin:0 auto;}
.body h2{font-weight:500;font-size:clamp(24px,2.6vw,38px);line-height:1.12;letter-spacing:-.02em;margin:clamp(40px,5vw,68px) 0 clamp(14px,1.4vw,20px);}
.body h3{font-weight:600;font-size:clamp(18px,1.5vw,22px);margin:clamp(28px,3vw,40px) 0 10px;}
.body p{color:var(--ink-soft);font-size:clamp(16px,1.2vw,19px);line-height:1.7;margin:0 0 22px;}
.body ul{color:var(--ink-soft);font-size:clamp(16px,1.2vw,19px);line-height:1.7;padding-left:22px;margin:0 0 22px;}
.body li{margin-bottom:10px;}
.body strong{color:var(--ink);font-weight:600;}
.pull{font-family:"Fraunces",serif;font-style:italic;font-weight:400;font-size:clamp(24px,3vw,40px);line-height:1.25;color:var(--ink);
  border-left:3px solid var(--ink);padding:6px 0 6px 26px;margin:clamp(36px,4vw,56px) 0;}

/* article layout — sticky meta/share rail + wide content column */
.article-grid{display:grid;grid-template-columns:230px 1fr;gap:clamp(34px,5vw,90px);align-items:start;}
.article-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px;}
.article-side .blk .k{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
.article-side .blk .v{font-size:15px;color:var(--ink);font-weight:500;}
.article-side .share .share-row{display:flex;gap:10px;margin-top:10px;}
.article-side .share a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);transition:background .25s,color .25s,border-color .25s,transform .25s;}
.article-side .share a:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px);}
.article-side .share svg{width:16px;height:16px;fill:currentColor;}
.body.article-main{max-width:760px;margin:0;}
.body.article-main p:first-of-type{font-size:clamp(18px,1.4vw,22px);color:var(--ink);}
@media (max-width:860px){
  .article-grid{grid-template-columns:1fr;gap:26px;}
  .article-side{position:static;flex-direction:row;flex-wrap:wrap;gap:22px 40px;padding-bottom:26px;border-bottom:1px solid var(--line);}
  .body.article-main{max-width:none;}
}

/* category page — projects grid */
.block-h{font-weight:500;font-size:clamp(24px,2.6vw,38px);line-height:1.12;letter-spacing:-.02em;margin:clamp(44px,5.5vw,72px) 0 clamp(18px,2vw,28px);color:var(--ink);}
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,30px);}
.pcard{display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 18px 44px -34px rgba(16,14,30,.32);transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.pcard:hover{transform:translateY(-6px);box-shadow:0 40px 76px -38px rgba(16,14,30,.45);}
.pcard .pimg{aspect-ratio:16/10;overflow:hidden;}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.pcard:hover .pimg img{transform:scale(1.06);}
.pcard .pbody{padding:clamp(18px,1.9vw,28px);}
.pcard .ptag{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.pcard .pname{font-weight:600;font-size:clamp(18px,1.5vw,23px);letter-spacing:-.015em;margin:9px 0 6px;color:var(--ink);}
.pcard .pmetric{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(15px,1.2vw,19px);color:var(--ink);}
.pcard .pblurb{color:var(--muted);font-size:14.5px;line-height:1.55;margin-top:11px;}
@media (max-width:720px){.proj-grid{grid-template-columns:1fr;}}

/* stat grid (case study results) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);margin:clamp(30px,4vw,52px) 0;}
.stats .s{padding:clamp(22px,2.4vw,34px);border:1px solid var(--line);border-radius:18px;background:linear-gradient(168deg,#fff,#f7f6fa);}
.stats .n{font-weight:600;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.03em;color:var(--ink);}
.stats .l{margin-top:10px;color:var(--muted);font-size:14px;}
@media(max-width:720px){.stats{grid-template-columns:1fr;}}

/* CTA band */
.cta{margin:clamp(60px,8vw,110px) 0 0;padding:clamp(40px,5vw,72px) clamp(28px,4vw,60px);border-radius:24px;
  background:linear-gradient(135deg,#15131f,#221d33 60%,#15121e);color:#fff;text-align:center;position:relative;overflow:hidden;}
.cta h2{font-weight:300;font-size:clamp(26px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em;margin:0 0 22px;color:#fff;}
.cta h2 .it{color:#fff;}
.cta .btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);font-weight:600;font-size:15px;padding:15px 26px;border-radius:100px;transition:transform .3s,gap .3s;}
.cta .btn:hover{transform:translateY(-2px);gap:14px;}

/* related */
.related{margin-top:clamp(56px,7vw,100px);}
.related h4{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 22px;}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
.rel-card{display:block;}
.rel-card .ri{aspect-ratio:4/3;border-radius:14px;overflow:hidden;margin-bottom:14px;}
.rel-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.rel-card:hover img{transform:scale(1.06);}
.rel-card .rt{font-weight:600;font-size:clamp(16px,1.2vw,19px);color:var(--ink);letter-spacing:-.01em;}
.rel-card .rc{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
@media(max-width:760px){.rel-grid{grid-template-columns:1fr;max-width:460px;}}

/* footer */
.ft{padding:clamp(60px,8vw,110px) 0 40px;margin-top:clamp(60px,8vw,120px);border-top:1px solid var(--line);}
.ft .row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;}
.ft .logo{display:inline-flex;color:var(--ink);line-height:0;}
.ft .logo img{height:28px;width:auto;}
.ft .tag{color:var(--muted);font-size:14px;}
.ft .bar{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:13px;}
.section{padding:clamp(10px,2vw,30px) 0;}