:root{
    --blue:#1f5bff;
    --blue-dark:#1648cc;
    --blue-card:#dde7ff;
    --blue-card-2:#d9e4ff;
    --blue-ink:#16264f;
    --gray-card:#f4f4f4;
    --gray-card-2:#f7f7f7;
    --dark-card:#1c1c1e;
    --pill-bg:#f3ecff;
    --pill-ink:#7c3aed;
    --red:#e6202b;
    --green:#23c552;
    --ink:#171717;
    --muted:#9a9aa0;
    --muted-2:#bcbcc2;
    --dim:#7a7a82;
    --line:#ededed;
    --cream:#f4ecdc;
    --gold:#dd9520;
    --gold-strong:#c47f12;
    --gold-card:#fae5bc;
    --gold-card-2:#fdf3dc;
    --gold-circle:#f2d290;
    --gold-ink:#6a4710;
    --page:#ffffff;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Hanken Grotesk',-apple-system,sans-serif;
    background:var(--page);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.45;
    overflow-x:hidden;
  }
  .wrap{max-width:760px;margin:0 auto;padding:0 24px;}
  .wide{max-width:1040px;margin:0 auto;padding:0 24px;}
  .muted{color:var(--muted);}
  .strong{font-weight:600;color:var(--ink);}

  /* ---------- HERO ---------- */
  .hero-stage{position:relative;padding:clamp(52px,11vw,90px) 0 40px;}
  .hero-card{
    max-width:600px;margin:0 auto;
    border:1px solid #ececec;border-radius:26px;
    background:#fff;padding:clamp(30px,6vw,46px) clamp(26px,6vw,56px) clamp(36px,6vw,54px);
    position:relative;z-index:5;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
  }
  .brand{display:flex;align-items:center;gap:11px;font-size:25px;font-weight:600;letter-spacing:-.4px;}
  .brand .fist{font-size:23px;filter:grayscale(.2);}
  .hero-lead{font-size:24px;font-weight:500;line-height:1.42;letter-spacing:-.4px;margin-top:48px;}
  .hero-lead .dim{color:var(--dim);}
  .hero-sub{font-size:24px;font-weight:500;line-height:1.42;letter-spacing:-.4px;margin-top:26px;}
  .cta-row{display:flex;gap:14px;align-items:center;margin-top:48px;flex-wrap:wrap;}
  .btn{font-family:inherit;font-size:15px;font-weight:500;border:none;cursor:pointer;border-radius:999px;
       padding:13px 22px;display:inline-flex;align-items:center;gap:9px;transition:transform .15s ease,filter .15s ease;}
  .btn:hover{transform:translateY(-1px);}
  .btn-blue{background:var(--blue);color:#fff;}
  .btn-blue:hover{filter:brightness(1.06);}
  .btn-ghost{background:#fff;color:var(--ink);border:1px solid #e3e3e3;}
  .btn-dark{background:#141414;color:#fff;}
  .kbd{background:rgba(255,255,255,.22);border-radius:6px;font-size:12px;font-weight:600;
       width:20px;height:20px;display:grid;place-items:center;}
  .open-line{display:flex;align-items:center;gap:9px;margin-top:24px;color:#8a8a90;font-size:14.5px;font-weight:400;}
  .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(35,197,82,.18);}
  .logos{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:54px;
          opacity:.34;filter:grayscale(1);flex-wrap:wrap;}
  .logos span{font-weight:700;font-size:18px;letter-spacing:-.5px;white-space:nowrap;}
  .logos .l-script{font-style:italic;font-weight:600;}
  .logos .l-netflix{color:#000;}

  /* floating screenshots behind hero */
  .float{position:absolute;border-radius:14px;box-shadow:0 30px 60px -28px rgba(0,0,0,.4);overflow:hidden;z-index:1;pointer-events:none;}
  .f1{width:280px;height:200px;left:-150px;top:300px;transform:rotate(9deg);}
  .f2{width:150px;height:170px;left:130px;top:430px;transform:rotate(-6deg);}
  .f3{width:330px;height:200px;left:50%;top:430px;margin-left:-40px;transform:rotate(3deg);}
  .f4{width:300px;height:230px;right:-180px;top:250px;transform:rotate(-13deg);background:#0b0e1a;}
  .f5{width:200px;height:250px;left:50%;margin-left:205px;top:486px;transform:rotate(7deg);z-index:6;box-shadow:0 48px 76px -26px rgba(0,0,0,.55);}
  .scrn-dark{background:linear-gradient(160deg,#141a2e,#0b1020);}
  .scrn-light{background:#f6f7f9;}
  .scrn-map{background:linear-gradient(160deg,#cfe3f0,#aacbe0);}

  @media(max-width:900px){.float{display:none}}

  /* ---------- SECTION SPACING ---------- */
  section{position:relative;}
  .pad{padding:clamp(48px,9vw,70px) 0;}

  /* ---------- TESTIMONIAL MASONRY ---------- */
  .masonry{column-count:3;column-gap:20px;}
  @media(max-width:760px){.masonry{column-count:1;}}
  @media(max-width:1040px) and (min-width:761px){.masonry{column-count:2;}}
  .tcard{break-inside:avoid;margin-bottom:20px;border-radius:18px;padding:22px 22px 20px;
         background:var(--gray-card);}
  .tcard p{font-size:15px;line-height:1.5;font-weight:400;}
  .tcard.blue{background:var(--blue);color:#fff;}
  .tcard.blue .who-name{color:#fff;}
  .tcard.blue b{font-weight:600;}
  .tcard.dark{background:var(--dark-card);color:#e9e9ec;}
  .who{display:flex;align-items:center;gap:11px;margin-top:18px;}
  .who-ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
           font-weight:700;font-size:13px;color:#fff;flex:none;overflow:hidden;}
  .who-name{font-size:14.5px;font-weight:500;color:#3a3a3a;}
  .who-time{font-size:12px;color:#9a9a9a;font-weight:400;margin-left:auto;}

  /* ---------- CENTER CTA ---------- */
  .center{text-align:center;}
  .center .cta-row{justify-content:center;}
  .booked{display:inline-flex;align-items:center;gap:9px;margin-top:18px;color:#8a8a90;font-size:14.5px;}

  /* ---------- WORKING WITH ---------- */
  .copy-block{font-size:23px;font-weight:500;line-height:1.46;letter-spacing:-.3px;text-align:left;}
  .copy-block .dim{color:var(--dim);}
  .pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px;}
  .pill{background:var(--pill-bg);color:var(--pill-ink);border-radius:999px;padding:7px 15px;
        font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:7px;}

  /* ---------- HIGHLIGHT BLUE CARDS ---------- */
  .hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:8px;}
  @media(max-width:760px){.hl-grid{grid-template-columns:1fr;}}
  .hl-tab{background:var(--gold-card);border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:14px;
          font-size:16px;color:var(--gold-ink);font-weight:500;position:relative;z-index:2;}
  .hl-tab .ic{width:34px;height:34px;border-radius:50%;background:var(--gold-circle);display:grid;place-items:center;flex:none;color:var(--gold-strong);}
  .hl-body{background:var(--gold-card-2);border-radius:18px;padding:24px;margin-top:-10px;
           font-size:17px;line-height:1.5;color:var(--gold-ink);font-weight:400;
           border-top:2px dashed rgba(201,126,18,.34);}
  .hl-body b{font-weight:600;}
  .hl-name{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(201,126,18,.24);}
  .role-ava{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,#e3a52b,#bf7a10);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.3px;}
  .role-txt{font-size:15px;line-height:1.3;}
  .role-by{color:rgba(106,71,16,.62);font-weight:500;}
  .role-char{color:var(--gold-ink);font-weight:700;}

  /* ---------- PRODUCT SHOWCASE ---------- */
  .showcase{border-radius:16px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(0,0,0,.35);}
  .cap{text-align:center;margin-top:22px;font-size:17px;}
  .cap b{font-weight:600;}
  .browser{background:#fff;}
  .browser-bar{height:38px;background:#fafafa;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 14px;}
  .browser-bar i{width:11px;height:11px;border-radius:50%;display:block;}

  /* 3d viewer mock */
  .viewer{display:grid;grid-template-columns:1fr 220px;height:330px;background:#f2f2f3;}
  .viewer .stage{background:
      linear-gradient(#e7e7e9 1px,transparent 1px) 0 0/40px 40px,
      linear-gradient(90deg,#e7e7e9 1px,transparent 1px) 0 0/40px 40px,#f2f2f3;
      display:grid;place-items:center;position:relative;}
  .viewer .stage .robot{font-size:120px;filter:grayscale(1) brightness(.85);}
  .viewer .side{background:#fff;border-left:1px solid var(--line);padding:16px;font-size:12px;}
  .viewer .side .h{color:#9a9a9a;font-weight:500;margin:10px 0 6px;font-size:11px;letter-spacing:.3px;}
  .viewer .side .row{display:flex;align-items:center;gap:9px;padding:8px 6px;border-radius:8px;color:#444;font-weight:400;}
  .viewer .side .row:hover{background:#f6f6f6;}

  /* generic app mock dark */
  .appdark{height:330px;background:linear-gradient(160deg,#16181d,#0d0f13);display:flex;}
  .appdark .lft{width:180px;background:#1b1e24;border-right:1px solid #25282f;padding:16px 12px;}
  .appdark .lft .it{height:9px;border-radius:5px;background:#2a2e36;margin-bottom:13px;}
  .appdark .mid{flex:1;display:grid;place-items:center;color:#3a3f48;}
  .appdark .mid .photo{width:78%;height:60%;border-radius:12px;background:linear-gradient(135deg,#d8c9b0,#9fb39a);box-shadow:0 20px 40px -20px #000;}
  .appdark .rgt{width:170px;background:#1b1e24;border-left:1px solid #25282f;padding:16px 12px;}

  /* gatekeep brand grid (cream) */
  .brandgrid{background:var(--cream);border-radius:18px;padding:18px;display:grid;
             grid-template-columns:1fr 1fr 1.1fr;gap:14px;}
  @media(max-width:760px){.brandgrid{grid-template-columns:1fr;}}
  .bcell{border-radius:12px;overflow:hidden;min-height:150px;display:grid;place-items:center;font-weight:800;}
  .bc-purple{background:#c7c1f0;}
  .bc-pink{background:#f2c4e0;font-size:64px;color:#111;}
  .bc-photo{background:linear-gradient(135deg,#caa,#977);}
  .bc-logo{background:#efe7d6;font-size:60px;color:#111;}
  .bc-tags{background:linear-gradient(135deg,#b96,#759);}
  .swatch-row{display:flex;gap:6px;padding:10px;flex-wrap:wrap;}
  .sw{height:22px;border-radius:5px;flex:1;min-width:60px;font-size:9px;color:#fff;display:grid;place-items:center;font-weight:600;}

  /* ---------- PRICING ---------- */
  .price-head{text-align:center;font-size:20px;font-weight:500;line-height:1.5;max-width:540px;margin:0 auto 46px;}
  .price-head b{font-weight:600;}
  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:760px;margin:0 auto;}
  @media(max-width:760px){.price-grid{grid-template-columns:1fr;}}
  .pcard{border:1px solid #ececec;border-radius:22px;padding:34px 30px 30px;background:#fff;display:flex;flex-direction:column;}
  .pcard.pro{background:#f3f3f4;border-color:#eee;}
  .pcard h3{font-size:21px;font-weight:600;}
  .pcard .pdesc{color:#9a9a9a;font-size:14.5px;margin-top:10px;line-height:1.5;font-weight:400;}
  .pcard .amt{font-size:42px;font-weight:600;letter-spacing:-1px;margin-top:22px;}
  .pcard.pro .amt{color:var(--blue);}
  .pcard .amt small{font-size:15px;color:#9a9a9a;font-weight:400;letter-spacing:0;}
  .pdiv{border-top:1px dashed #e2e2e2;margin:22px 0 20px;}
  .feat{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;margin-bottom:15px;line-height:1.45;font-weight:400;}
  .feat .ck{width:19px;height:19px;border-radius:50%;background:var(--red);color:#fff;flex:none;
            display:grid;place-items:center;font-size:11px;margin-top:1px;}
  .pnote{color:#a4a4a4;font-size:13px;margin-top:8px;margin-bottom:22px;}
  .pcard .btn{justify-content:center;width:100%;margin-top:auto;padding:15px;}

  /* ---------- FOOTER FORM ---------- */
  .foot-eyebrow{text-align:center;font-size:16px;font-weight:500;}
  .foot-title{text-align:center;font-size:40px;font-weight:600;letter-spacing:-1px;margin-top:6px;}
  .form{max-width:560px;margin:42px auto 0;border:1px solid #efefef;border-radius:22px;padding:clamp(22px,5vw,34px);background:#fff;}
  .field{margin-bottom:20px;}
  .field label{display:block;font-size:13px;color:#8a8a8a;margin-bottom:8px;font-weight:500;}
  .field input,.field textarea{width:100%;background:#f5f5f5;border:1px solid #efefef;border-radius:12px;
      padding:14px 16px;font-family:inherit;font-size:15px;color:var(--ink);}
  .field input::placeholder,.field textarea::placeholder{color:#b6b6b6;}
  .field textarea{min-height:120px;resize:vertical;}
  .form .btn{width:100%;justify-content:center;padding:15px;}
  .copyright{text-align:center;color:#bbb;font-size:13px;padding:40px 0 50px;}

  .sec-copy{max-width:600px;margin:0 auto;}

  /* ---------- Vikram Raja adaptation ---------- */
  a.btn{text-decoration:none;}
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);margin-bottom:14px;text-align:center;}
  .facts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px;margin-top:34px;}
  @media(max-width:620px){.facts-row{grid-template-columns:1fr 1fr;}}
  .fact{border-top:1px solid var(--line);padding-top:12px;}
  .fact .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:500;}
  .fact .v{font-size:18px;font-weight:600;margin-top:5px;letter-spacing:-.2px;}
  .hl-body b{display:block;font-size:18px;letter-spacing:-.3px;}
  .film-brief{font-size:14px;line-height:1.5;color:rgba(106,71,16,.66);margin-top:9px;font-weight:400;}
  .hl-body .film-brief + .hl-name{margin-top:13px;}
  .bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;}
  @media(max-width:760px){.bcards{grid-template-columns:1fr;}}
  .bcard{border:1px solid #ececec;border-radius:18px;padding:26px 24px;background:#fff;}
  .bcard .bk{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--blue);font-weight:600;margin-bottom:12px;}
  .bcard h3{font-size:19px;font-weight:600;letter-spacing:-.3px;}
  .bcard p{font-size:14.5px;line-height:1.55;color:#6a6a70;margin-top:8px;font-weight:400;}
  .float{background-size:cover;background-position:center;}

  /* ---------- brand marquee ---------- */
  .logo-marquee{margin-top:46px;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
  .logo-track{display:flex;align-items:center;width:max-content;animation:logoscroll 52s linear infinite;}
  .logo-marquee:hover .logo-track{animation-play-state:paused;}
  .logo-track span{font-weight:700;font-size:16px;letter-spacing:-.4px;white-space:nowrap;color:#111;opacity:.32;filter:grayscale(1);margin-right:36px;}
  @keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;justify-content:center;}.logo-track span{margin:6px 16px;}}


/* ============================================================
   Journal + Article — baked theme (shared by blog.html & blog/*)
   ============================================================ */
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:#fff3a0;color:#000}
  ::-moz-selection{background:#fff3a0;color:#000}
main{display:block}

/* ---------- top nav ---------- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px clamp(20px,5vw,40px);background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s ease;}
.topbar.scrolled{border-bottom-color:var(--line);}
.topbar .brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.4px;color:var(--ink);text-decoration:none;}
.topbar .brand img{width:26px;height:26px;object-fit:contain;}
.menu{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);}
.menu a{font-size:15px;color:#5a5a62;text-decoration:none;font-weight:500;transition:color .2s ease;}
.menu a:hover,.menu a.active{color:var(--ink);}
.menu .menu-cta{background:var(--blue);color:#fff;padding:9px 18px;border-radius:999px;}
.menu .menu-cta:hover{filter:brightness(1.06);color:#fff;}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:0;background:none;cursor:pointer;}
.menu-toggle span{width:22px;height:2px;background:var(--ink);margin-left:auto;border-radius:2px;transition:transform .3s ease,opacity .25s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:760px){
  .menu{display:none;position:fixed;inset:60px 0 auto 0;flex-direction:column;align-items:flex-start;gap:2px;
    padding:14px clamp(20px,5vw,40px) 22px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(0,0,0,.25);}
  .menu.open{display:flex;}
  .menu a{font-size:20px;font-weight:600;padding:9px 0;}
  .menu .menu-cta{padding:9px 0;background:none;color:var(--blue);}
  .menu-toggle{display:flex;}
}

/* ---------- journal index ---------- */
.journal-head{max-width:1040px;margin:0 auto;padding:clamp(44px,7vw,84px) clamp(20px,5vw,40px) clamp(20px,3vw,30px);}
.journal-head .label{font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:14px;}
.journal-head h1{font-size:clamp(40px,6.5vw,64px);font-weight:700;letter-spacing:-2px;line-height:1.02;}
.journal-head p{font-size:19px;color:var(--muted);max-width:560px;margin-top:18px;line-height:1.5;}
.journal-controls{max-width:1040px;margin:0 auto;padding:6px clamp(20px,5vw,40px) clamp(20px,3vw,30px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;border-bottom:1px solid var(--line);}
.filters{display:flex;flex-wrap:wrap;gap:6px 22px;}
.filter-chip{font:inherit;font-size:15px;font-weight:500;color:var(--muted);background:none;border:0;padding:6px 0;cursor:pointer;position:relative;transition:color .2s ease;}
.filter-chip:hover{color:var(--ink);}
.filter-chip.is-active{color:var(--ink);}
.filter-chip.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);border-radius:2px;}
.filter-chip:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px;}
.sort{position:relative;display:flex;align-items:center;gap:8px;}
.sort-label{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;}
.sort-select{font:inherit;font-size:15px;font-weight:500;color:var(--ink);background:none;border:0;padding:6px 20px 6px 2px;cursor:pointer;appearance:none;-webkit-appearance:none;}
.sort-select:hover{color:var(--blue);}
.sort::after{content:"";position:absolute;right:5px;top:50%;width:6px;height:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none;}
.post-grid{max-width:1040px;margin:0 auto;padding:clamp(30px,4vw,40px) clamp(20px,5vw,40px) clamp(50px,8vw,90px);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:clamp(30px,4vw,42px) clamp(20px,3vw,28px);}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;}
.post-card:hover{transform:translateY(-5px);box-shadow:0 26px 48px -28px rgba(0,0,0,.26);border-color:#e4e4e4;}
.post-card .cover{position:relative;overflow:hidden;aspect-ratio:16/11;background:var(--gray-card);}
.post-card .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform .6s ease;}
.post-card:hover .cover img{transform:scale(1.06);}
.post-card .cat{position:absolute;top:12px;left:12px;margin:0;z-index:2;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px -8px rgba(0,0,0,.35);}
.p-body{display:flex;flex-direction:column;flex:1;padding:17px 19px 18px;}
.post-card h2{font-size:19px;font-weight:600;letter-spacing:-.4px;line-height:1.28;margin-bottom:8px;transition:color .2s ease;}
.post-card:hover h2{color:var(--blue);}
.post-card p{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:16px;flex:1;}
.post-card .meta{font-size:13px;color:var(--muted-2);font-weight:600;display:flex;align-items:center;justify-content:space-between;}
.post-card .meta::after{content:"Read \2192";color:var(--blue);font-weight:600;opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease;}
.post-card:hover .meta::after{opacity:1;transform:none;}

/* ---------- site footer ---------- */
.site-foot{max-width:1040px;margin:0 auto;padding:34px clamp(20px,5vw,40px) 50px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted);}
.site-foot a{color:#5a5a62;text-decoration:none;}
.site-foot a:hover{color:var(--ink);}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;}

/* ---------- article ---------- */
.article-main{max-width:760px;margin:0 auto;padding:clamp(26px,4vw,44px) clamp(20px,5vw,40px) clamp(50px,8vw,80px);}
.post-back{font-size:14px;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:clamp(20px,3vw,30px);font-weight:500;}
.post-back:hover{color:var(--ink);}
.post-cover{position:relative;overflow:hidden;display:block;aspect-ratio:2/1;border-radius:20px;margin:0 0 clamp(24px,3vw,34px);background:var(--gray-card);}
.post-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;}
.post-cat{font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
.post-title{font-size:clamp(32px,5vw,48px);font-weight:700;letter-spacing:-1.6px;line-height:1.05;margin-bottom:14px;}
.post-meta{font-size:14px;color:var(--muted);padding-bottom:clamp(20px,3vw,28px);border-bottom:1px solid var(--line);margin-bottom:clamp(24px,3.5vw,34px);}
.post-lead{font-size:21px;line-height:1.5;font-weight:500;color:var(--ink);margin-bottom:clamp(24px,3.5vw,34px);}
.toc{background:var(--gray-card);border-radius:16px;padding:20px 22px;margin-bottom:clamp(28px,4vw,38px);}
.toc-title{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px;}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:9px;}
.toc li{counter-increment:toc;}
.toc a{font-size:14.5px;color:#5a5a62;text-decoration:none;display:inline-flex;gap:10px;line-height:1.4;}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums;}
.toc a:hover{color:var(--ink);}
.toc a.current{color:var(--blue);font-weight:600;}
.prose{font-size:17px;line-height:1.72;color:#34343b;}
.prose>*+*{margin-top:20px;}
.prose h2{font-size:clamp(23px,3vw,29px);font-weight:700;letter-spacing:-.6px;color:var(--ink);margin-top:clamp(34px,5vw,46px);line-height:1.22;scroll-margin-top:84px;}
.prose h3{font-size:20px;font-weight:600;color:var(--ink);margin-top:30px;}
.prose strong,.prose b{font-weight:600;color:var(--ink);}
.prose a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(31,91,255,.3);transition:border-color .2s ease;}
.prose a:hover{border-color:var(--blue);}
.prose ul,.prose ol{padding-left:22px;}
.prose li{margin-top:9px;}
.prose li::marker{color:var(--blue);}
.prose blockquote{border-left:3px solid var(--blue);padding:2px 0 2px 20px;margin:28px 0;font-size:20px;font-weight:500;line-height:1.45;color:var(--ink);}
.prose .callout{background:var(--blue-card-2);border-radius:14px;padding:20px 22px;margin:28px 0;color:var(--blue-ink);}
.prose .callout strong{display:block;margin-bottom:6px;color:var(--blue-ink);}
.share-rail{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:clamp(34px,5vw,46px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--line);}
.share-label{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600;}
.share-list{list-style:none;display:flex;gap:10px;}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#5a5a62;cursor:pointer;text-decoration:none;padding:0;transition:color .2s ease,border-color .2s ease,transform .2s ease,background-color .2s ease;}
.share-btn:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-2px);}
.share-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.share-btn svg{display:block;}
.share-btn.copied{background:var(--blue);border-color:var(--blue);color:#fff;}
.author{display:flex;gap:18px;align-items:flex-start;margin-top:clamp(34px,5vw,46px);padding:clamp(22px,3vw,28px);background:var(--gray-card);border-radius:20px;}
.author-avatar{flex:none;width:70px;height:70px;border-radius:50%;overflow:hidden;background:#e6e6e9;}
.author-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 16%;}
.author-eyebrow{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:5px;}
.author-name{font-size:20px;font-weight:600;letter-spacing:-.4px;margin-bottom:8px;}
.author-bio{font-size:14.5px;line-height:1.6;color:#5a5a62;margin-bottom:12px;}
.author-links{display:flex;flex-wrap:wrap;gap:16px;}
.author-links a{font-size:14px;color:var(--blue);text-decoration:none;font-weight:500;}
.author-links a:hover{text-decoration:underline;}
.related{margin-top:clamp(40px,6vw,58px);padding-top:clamp(24px,3vw,30px);border-top:1px solid var(--line);}
.related-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;}
.related-title{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:0;}
.related-nav{display:flex;gap:8px;}
.rel-arrow{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#5a5a62;font-size:18px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:color .2s ease,border-color .2s ease,background-color .2s ease,opacity .2s ease;}
.rel-arrow:hover{color:var(--blue);border-color:var(--blue);}
.rel-arrow:disabled{opacity:.32;cursor:default;color:#5a5a62;border-color:var(--line);}
.rel-arrow:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.related-list{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -4px;padding:4px;}
.related-list::-webkit-scrollbar{display:none;}
.related-list a{flex:0 0 clamp(208px,62%,236px);scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.related-list a:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(0,0,0,.28);border-color:#e4e4e4;}
.r-cover{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--gray-card);}
.r-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform .5s ease;}
.related-list a:hover .r-cover img{transform:scale(1.06);}
.r-body{display:flex;flex-direction:column;padding:13px 15px 15px;}
.related-list .r-cat{display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:6px;}
.related-list .r-title{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.2px;}
.foot{margin-top:clamp(40px,6vw,54px);padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);}

/* ---------- article 3-column on desktop ---------- */
@media(min-width:1100px){
  .article-main{max-width:1180px;padding-left:clamp(28px,4vw,48px);padding-right:clamp(28px,4vw,48px);}
  .post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px) minmax(0,1fr);
    grid-template-areas:". head ." "toc body share" ". end .";column-gap:clamp(24px,2.6vw,44px);align-items:start;}
  .post-head{grid-area:head;}
  .toc-rail{grid-area:toc;position:sticky;top:88px;}
  .prose{grid-area:body;}
  .share-rail{grid-area:share;position:sticky;top:88px;flex-direction:column;align-items:flex-start;border-top:0;margin:0;padding-top:2px;gap:14px;}
  .share-rail .share-list{flex-direction:column;gap:10px;}
  .post-end{grid-area:end;}
  .toc-rail .toc{background:none;padding:0;}
  .toc-rail .toc ol{border-left:1px solid var(--line);padding-left:16px;}
}

/* ---------- floating hamburger menu (home) ---------- */
.topnav{position:fixed;top:24px;right:28px;z-index:200;}
.topnav-trigger{display:inline-flex;align-items:center;justify-content:center;gap:0;width:54px;height:54px;
  border-radius:50%;background:#fff;border:1px solid #ececec;box-shadow:0 8px 24px -10px rgba(0,0,0,.22);
  cursor:pointer;font-family:inherit;transition:transform .18s ease,box-shadow .18s ease;}
.topnav-trigger:hover{transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(0,0,0,.30);}
.topnav-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.topnav-icon{display:flex;flex-direction:column;gap:4px;}
.topnav-icon span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s ease,opacity .2s ease;}
.topnav-label{display:none;font-weight:600;font-size:15px;color:var(--ink);}
.topnav.open .topnav-icon span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.topnav.open .topnav-icon span:nth-child(2){opacity:0;}
.topnav.open .topnav-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.topnav-panel{position:absolute;top:64px;right:0;min-width:212px;background:#fff;border:1px solid #ececec;
  border-radius:18px;box-shadow:0 26px 56px -22px rgba(0,0,0,.32);padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;}
.topnav.open .topnav-panel{opacity:1;visibility:visible;transform:none;}
.topnav-panel a{padding:11px 16px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;transition:background-color .15s ease,color .15s ease;}
.topnav-panel a:hover{background:var(--gray-card);}
.topnav-panel .topnav-cta{background:var(--blue);color:#fff;margin-top:6px;text-align:center;font-weight:600;}
.topnav-panel .topnav-cta:hover{background:var(--blue-dark);color:#fff;}
@media(max-width:760px){
  .topnav{position:relative;top:auto;right:auto;z-index:10;display:flex;justify-content:flex-end;margin:-6px 0 14px;}
  .topnav-trigger{width:auto;height:auto;border-radius:999px;padding:9px 16px;gap:10px;}
  .topnav-icon span{width:18px;}
  .topnav-label{display:inline;}
  .topnav-panel{top:calc(100% + 8px);left:0;right:0;min-width:0;transform-origin:top center;}
}

/* journal: round menu button lives inside the topbar */
.topbar{gap:14px;}
.topbar .topnav{position:relative;top:auto;right:auto;margin:0;z-index:70;display:block;}
.topbar .topnav-trigger{width:44px;height:44px;border-radius:50%;padding:0;gap:0;}
.topbar .topnav-label{display:none !important;}
.topbar .topnav-icon span{width:20px;}
.topbar .topnav-panel{top:calc(100% + 10px);right:0;left:auto;min-width:212px;transform-origin:top right;}

/* ---------- portfolio marquee (home) ---------- */
.portfolio{overflow:hidden;}
.portfolio .eyebrow{margin-bottom:28px;}
.portfolio-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.portfolio-track{display:flex;align-items:center;width:max-content;animation:portfolioscroll 58s linear infinite;}
.portfolio-marquee:hover .portfolio-track{animation-play-state:paused;}
.portfolio-track img{height:clamp(230px,33vw,380px);width:auto;margin-right:18px;border-radius:16px;
  object-fit:cover;display:block;flex:none;box-shadow:0 16px 34px -20px rgba(0,0,0,.34);background:var(--gray-card);}
@keyframes portfolioscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .portfolio-marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto;}
  .portfolio-track{animation:none;}
}

/* ---------- scroll text reveal ---------- */
.reveal-text .rw{opacity:.22;will-change:opacity;}

/* ---------- small discipline tags (about) ---------- */
.tags-sm{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.tag-sm{font-size:12.5px;font-weight:500;color:var(--pill-ink);background:var(--pill-bg);border-radius:999px;padding:5px 12px;line-height:1.3;}

/* ---------- big statement (creative scroll spacer) ---------- */
.statement{padding:clamp(76px,16vw,176px) 0;}
.big-statement{font-size:clamp(26px,4.3vw,48px);font-weight:600;line-height:1.26;letter-spacing:-.8px;color:var(--ink);text-align:center;max-width:900px;margin:0 auto;}

/* ---------- minimal contact footer ---------- */
.contact-section{padding-bottom:clamp(40px,7vw,72px);}
.contact-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(38px,7vw,80px);flex-wrap:wrap;}
.contact-lead{flex:1 1 340px;min-width:min(100%,300px);}
.contact-h{font-size:clamp(32px,4.6vw,52px);font-weight:500;letter-spacing:-1.5px;line-height:1.05;margin-top:14px;color:var(--ink);}
.contact-sub{font-size:16px;line-height:1.55;color:var(--muted);max-width:430px;margin-top:18px;}
.contact-email{display:inline-flex;align-items:center;gap:12px;font-size:clamp(19px,2.4vw,28px);font-weight:500;letter-spacing:-.6px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--line);padding-bottom:5px;margin-top:clamp(22px,3vw,30px);transition:border-color .2s ease;}
.email-arrow{color:var(--blue);font-weight:400;transition:transform .25s ease;}
.contact-email:hover .email-arrow{transform:translateX(5px);}
.contact-avail{display:flex;align-items:center;gap:9px;margin-top:clamp(22px,3vw,28px);font-size:14.5px;color:#8a8a90;font-weight:400;}
.avail-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(35,197,82,.18);flex:none;}
.contact-email:hover{border-color:var(--ink);}
.contact-cols{display:flex;gap:clamp(34px,5vw,60px);flex-wrap:wrap;}
.contact-col{display:flex;flex-direction:column;gap:15px;}
.find-label{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600;}
.find-links{display:flex;flex-direction:column;gap:11px;}
.find-links a{font-size:15px;color:#5a5a62;text-decoration:none;font-weight:500;width:fit-content;transition:color .2s ease;}
.find-links a:hover{color:var(--ink);}
.site-footer{border-top:1px solid var(--line);}
.site-footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 24px;padding:32px 0 46px;font-size:13px;color:var(--muted);}
.foot-right{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,28px);}
.site-footer a{color:#5a5a62;text-decoration:none;transition:color .2s ease;}
.site-footer a:hover{color:var(--ink);}

/* film feature graphic */
.film-figure{margin:4px auto 30px;max-width:480px;}
.film-figure img{display:block;width:100%;height:auto;}

#about .copy-block + .copy-block,
#modelling .copy-block + .copy-block{margin-top:20px;}

/* clickable portfolio */
.portfolio-track a{display:block;flex:none;position:relative;}
.portfolio-track a img{transition:filter .25s ease;}
.portfolio-track a:hover img{filter:brightness(.82);}
.portfolio-track a::after{content:"\2197";position:absolute;top:14px;right:32px;color:#fff;font-size:20px;font-weight:700;opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease;text-shadow:0 2px 10px rgba(0,0,0,.55);pointer-events:none;}
.portfolio-track a:hover::after{opacity:1;transform:none;}

.bcard-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14px;font-weight:600;color:var(--blue);text-decoration:none;transition:gap .2s ease;}
.bcard-link:hover{gap:10px;}

.bcard-tag{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12.5px;font-weight:600;letter-spacing:.2px;color:#6a6a70;background:#f4f4f4;border-radius:999px;padding:5px 13px;}

.costars a{color:#5a5a62;text-decoration:underline;text-decoration-color:rgba(0,0,0,.2);text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease;}
.costars a:hover{color:var(--ink);text-decoration-color:var(--ink);}

.imdb-link{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--gold-strong);text-decoration:none;letter-spacing:.3px;transition:opacity .2s ease;}
.imdb-link:hover{opacity:.6;}