/* =================================================
   HASSAN KHATRI — EDITORIAL / MAGAZINE REDESIGN
   Warm cream, deep black, burnt-sienna accent.
   ================================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#f4efe7;
  --bg-alt:#ebe4d6;
  --bg-dark:#0f0f0f;
  --bg-card:#ffffff;

  --ink:#0f0f0f;
  --ink-soft:#1a1a1a;
  --ink-mute:#6a6560;
  --ink-faint:#a8a29a;

  --accent:#c8502e;      /* burnt sienna */
  --accent-deep:#a8401f;
  --paper-line:rgba(15,15,15,.14);
  --paper-line-soft:rgba(15,15,15,.06);

  --font-display:'Playfair Display',serif;
  --font-sans:'Inter Tight','Inter',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Subpage inverse: dark-on-dark */
body.theme-dark{
  --bg:#0f0f0f;
  --bg-alt:#161514;
  --bg-card:#1a1917;
  --ink:#f4efe7;
  --ink-soft:#e5ddd0;
  --ink-mute:#8a857e;
  --ink-faint:#4a4740;
  --paper-line:rgba(244,239,231,.14);
  --paper-line-soft:rgba(244,239,231,.06);
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  transition:background .6s var(--ease),color .6s var(--ease);
  position:relative;
}

/* paper-grain overlay */
body::before{
  content:'';
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5;
  mix-blend-mode:multiply;
}
body.theme-dark::before{mix-blend-mode:screen;opacity:.35}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

::selection{background:var(--accent);color:var(--bg)}

/* ─────────────────────── NAV ─────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:1.4rem 2.5rem;
  display:flex;justify-content:space-between;align-items:center;
  mix-blend-mode:difference;
  color:#fff;
}
.nav-logo{
  font-family:var(--font-display);
  font-weight:700;font-style:italic;
  font-size:1.2rem;letter-spacing:-.01em;
  cursor:pointer;
}
.nav-logo span{color:var(--accent);font-style:normal}
.nav-links{display:flex;gap:1.75rem;align-items:center}
.nav-links a{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  position:relative;
  padding:.25rem 0;
  cursor:pointer;
  color:rgba(255,255,255,.7);
  transition:color .35s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active::before{
  content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  mix-blend-mode:normal;
}

/* ─────────────────────── HERO ─────────────────────── */
.hero{
  min-height:100vh;
  position:relative;
  padding:7rem 2.5rem 3rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  z-index:2;
}

/* top meta strip */
.hero-meta{
  position:absolute;top:6rem;left:2.5rem;right:2.5rem;
  display:flex;justify-content:space-between;align-items:flex-start;
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);
  z-index:3;
}
.hero-meta-col{display:flex;flex-direction:column;gap:.25rem;max-width:180px}
.hero-meta-col.right{text-align:right;align-items:flex-end}
.hero-meta strong{color:var(--ink);font-weight:500}

/* parallax name */
.hero-name{
  position:relative;
  font-family:var(--font-display);
  line-height:.82;
  letter-spacing:-.04em;
  margin-bottom:2rem;
  user-select:none;
}
.hero-name-row{
  display:block;
  position:relative;
  will-change:transform;
}
.hero-name .word{
  display:inline-block;
  font-size:clamp(5rem,17vw,17rem);
  font-weight:900;
  color:var(--ink);
}
.hero-name .word.italic{
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}
.hero-name-row.r1{transform:translateX(0)}
.hero-name-row.r2{text-align:right;margin-top:-.2em}

/* kinetic sub-line */
.hero-foot{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:2rem;
  align-items:end;
  padding-top:2.5rem;
  border-top:1px solid var(--paper-line);
}
.hero-tag{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.1rem,1.6vw,1.5rem);
  line-height:1.35;
  color:var(--ink-soft);
  max-width:32ch;
}
.hero-tag em{color:var(--accent);font-style:italic}
.hero-roles{
  font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);
  display:flex;flex-direction:column;gap:.35rem;
}
.hero-roles strong{color:var(--ink);font-weight:500}
.hero-scroll{
  display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;
  font-family:var(--font-mono);font-size:.65rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);
}
.hero-scroll .bar{
  width:1px;height:60px;background:var(--ink-mute);
  position:relative;overflow:hidden;
}
.hero-scroll .bar::after{
  content:'';position:absolute;top:-100%;left:0;right:0;height:100%;
  background:var(--accent);
  animation:slide 2.2s var(--ease) infinite;
}
@keyframes slide{0%{top:-100%}100%{top:100%}}

/* marquee under hero */
.marquee{
  overflow:hidden;white-space:nowrap;
  padding:1.25rem 0;
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  background:var(--bg);
  position:relative;z-index:2;
}
.marquee-track{
  display:inline-flex;gap:3rem;align-items:center;
  animation:marq 38s linear infinite;
  will-change:transform;
}
.marquee-track span{
  font-family:var(--font-display);
  font-style:italic;
  font-size:2.4rem;font-weight:400;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:3rem;
}
.marquee-track span::after{
  content:'✦';color:var(--accent);font-style:normal;font-size:1.4rem;
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─────────────────── GENERIC SECTION ─────────────────── */
section{
  padding:8rem 2.5rem;
  position:relative;
  z-index:2;
}
.section-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3rem;
  align-items:end;
  margin-bottom:4.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--paper-line);
}
.section-num{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  padding-top:.4rem;
  white-space:nowrap;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,6vw,5.5rem);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.02em;
}
.section-title em{color:var(--accent);font-style:italic;font-weight:400}
.section-desc{
  margin-top:1.25rem;
  font-size:1rem;
  color:var(--ink-mute);
  max-width:58ch;
  line-height:1.65;
}

/* ─────────────────── WORK / PROJECTS ─────────────────── */
#work{background:var(--bg)}
.work-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.25rem;
}
.work-card{
  position:relative;
  cursor:pointer;
  overflow:hidden;
  background:var(--bg-dark);
  border:1px solid var(--paper-line-soft);
  transition:transform .7s var(--ease-out);
}
/* magazine-style uneven grid — fixed aspect ratios keep cards uniform */
.work-card:nth-child(1){grid-column:span 7;aspect-ratio:16/11}
.work-card:nth-child(2){grid-column:span 5;aspect-ratio:4/5}
.work-card:nth-child(3){grid-column:span 5;aspect-ratio:4/5}
.work-card:nth-child(4){grid-column:span 7;aspect-ratio:16/11}
.work-card:hover{transform:translateY(-6px)}

/* image frame — fills the card, image gets cropped to fit */
.work-card-img{
  position:absolute;inset:0;
  background:var(--bg-dark);
  overflow:hidden;
}
.work-card-img img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s var(--ease-out);
}
.work-card:hover .work-card-img img{transform:scale(1.04)}

/* placeholder fallback (only shows if no image) */
.work-card-img .placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:clamp(4rem,9vw,10rem);
  font-weight:900;font-style:italic;
  color:rgba(244,239,231,.08);
  letter-spacing:-.03em;
}

/* permanent dark scrim — text stays readable on any image */
.work-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(15,15,15,0) 30%,
    rgba(15,15,15,.45) 65%,
    rgba(15,15,15,.88) 100%);
  opacity:1;
  transition:opacity .5s var(--ease);
  pointer-events:none;
  z-index:1;
}
.work-card:hover .work-card-overlay{
  background:linear-gradient(180deg,
    rgba(15,15,15,.1) 20%,
    rgba(15,15,15,.55) 60%,
    rgba(15,15,15,.92) 100%);
}

.work-card-body{
  position:absolute;bottom:0;left:0;right:0;
  padding:1.75rem 1.85rem;
  z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  color:#f4efe7;
}
.work-card-cat{
  font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.55rem;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.work-card-title{
  font-family:var(--font-display);
  font-size:1.9rem;font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#f4efe7;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.work-card-title em{font-style:italic;color:var(--accent)}
.work-card-desc{
  font-size:.82rem;
  color:rgba(244,239,231,.8);
  max-width:32ch;
  line-height:1.5;
  margin-top:.4rem;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.work-card-arrow{
  display:inline-flex;width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid rgba(244,239,231,.4);
  border-radius:50%;
  font-size:1rem;
  color:#f4efe7;
  background:rgba(15,15,15,.25);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:all .5s var(--ease);
  flex-shrink:0;
}
.work-card:hover .work-card-arrow{
  background:var(--accent);color:#fff;border-color:var(--accent);
  transform:rotate(-45deg);
}

/* ─────────────────── ABOUT ─────────────────── */
#about{background:var(--bg-alt)}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
}
.about-body p{
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin-bottom:1.25rem;
}
.about-body p:first-child::first-letter{
  font-family:var(--font-display);
  font-size:4.5rem;
  float:left;
  line-height:.85;
  margin:.15em .15em 0 0;
  color:var(--accent);
  font-style:italic;
  font-weight:900;
}
.about-body p.small{
  font-family:var(--font-sans);
  font-size:.95rem;
  color:var(--ink-mute);
  margin-top:1.5rem;
}
.about-traits{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.trait{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem 1rem;
  border:1px solid var(--paper-line);
  border-radius:999px;
  color:var(--ink-mute);
  transition:all .4s var(--ease);
}
.trait:hover{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
  transform:translateY(-2px);
}

/* portrait visual */
.about-portrait{
  position:relative;aspect-ratio:3/4;
  background:var(--bg-card);
  border:1px solid var(--paper-line-soft);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.about-portrait .hk{
  font-family:var(--font-display);
  font-size:16rem;font-style:italic;font-weight:900;
  color:var(--accent);
  letter-spacing:-.05em;
  line-height:.85;
  opacity:.95;
}
.about-portrait::after{
  content:'HASSAN KHATRI / CREATIVE PRACTICE / 2026';
  position:absolute;bottom:1rem;left:1rem;right:1rem;
  font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);
  display:flex;justify-content:space-between;
  border-top:1px solid var(--paper-line);
  padding-top:.75rem;
}
.about-portrait::before{
  content:'01';
  position:absolute;top:1rem;left:1rem;
  font-family:var(--font-mono);font-size:.65rem;
  letter-spacing:.2em;color:var(--ink-mute);
  z-index:2;
}

/* ─────────────────── TIMELINE (pinned scrub) ─────────────────── */
#experience{
  background:var(--bg-dark);
  color:var(--bg);
  padding:0;
}
#experience .section-head{
  padding:8rem 2.5rem 3rem;
  margin-bottom:0;
  border-color:rgba(244,239,231,.1);
}
#experience .section-num{color:var(--accent)}
#experience .section-title{color:var(--bg)}
#experience .section-desc{color:#a8a29a}

.timeline-stage{
  position:relative;
  height:500vh; /* scroll length: more = slower scrub */
}
.timeline-sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.timeline-slides{
  position:relative;
  width:100%;
  height:100%;
}
.timeline-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transform:scale(.7);
  filter:blur(14px);
  transition:opacity .5s var(--ease),transform .7s var(--ease-out),filter .5s var(--ease);
  pointer-events:none;
}
.timeline-slide.active{
  opacity:1;transform:scale(1);filter:blur(0);
}
.timeline-slide.past{
  opacity:0;transform:scale(1.35);filter:blur(18px);
}

.tl-card{
  text-align:center;
  padding:0 2.5rem;
  max-width:1100px;
  width:100%;
}
.tl-num{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.5rem;
  display:block;
}
.tl-date{
  font-family:var(--font-mono);
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:#a8a29a;
  margin-bottom:1.5rem;
  display:inline-block;
  padding:.4rem 1rem;
  border:1px solid rgba(244,239,231,.14);
  border-radius:999px;
}
.tl-role{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,6.5vw,6rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.02em;
  margin-bottom:1rem;
  color:var(--bg);
}
.tl-role em{font-style:italic;color:var(--accent)}
.tl-org{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.2rem,2vw,1.8rem);
  color:#a8a29a;
  margin-bottom:1rem;
}
.tl-desc{
  font-family:var(--font-sans);
  font-size:.95rem;
  color:#a8a29a;
  max-width:45ch;
  margin:0 auto;
  line-height:1.6;
}

/* progress rail */
.tl-progress{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.5rem;align-items:center;
  z-index:5;
}
.tl-dot{
  width:28px;height:2px;background:rgba(244,239,231,.2);
  transition:all .5s var(--ease);
}
.tl-dot.done{background:var(--accent)}
.tl-dot.current{background:var(--accent);width:54px}

.tl-counter{
  position:absolute;top:2rem;right:2.5rem;
  font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.2em;color:var(--accent);
  z-index:5;
}

/* ─────────────────── VENTURES ─────────────────── */
#ventures{background:var(--bg)}
.ventures-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--paper-line);
}
.venture-card{
  padding:3rem 2rem 2.5rem;
  border-right:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  position:relative;
  overflow:hidden;
  transition:background .5s var(--ease);
  cursor:pointer;
}
.venture-card:last-child{border-right:none}
.venture-card:hover{background:var(--bg-alt)}
.venture-card::before{
  content:'';position:absolute;inset:0;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .6s var(--ease-out);
  z-index:0;
}
.venture-card:hover::before{transform:translateY(0)}
.venture-card > *{position:relative;z-index:1;transition:color .4s var(--ease)}
.venture-card:hover > *{color:#f4efe7 !important}
.venture-card:hover .venture-stage{color:rgba(244,239,231,.75) !important;border-color:rgba(244,239,231,.3)}

.venture-num{
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.2em;color:var(--ink-mute);
  margin-bottom:2.5rem;
  display:block;
}
.venture-stage{
  display:inline-block;
  font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;
  padding:.3rem .7rem;
  border:1px solid var(--paper-line);
  border-radius:999px;
  color:var(--ink-mute);
  margin-bottom:1.25rem;
}
.venture-name{
  font-family:var(--font-display);
  font-size:2.25rem;font-weight:400;
  line-height:1;letter-spacing:-.02em;
  margin-bottom:1rem;
  color:var(--ink);
}
.venture-desc{
  font-size:.88rem;line-height:1.6;
  color:var(--ink-mute);
}

/* ─────────────────── SKILLS ─────────────────── */
#skills{background:var(--bg-alt);padding:8rem 2.5rem}
.skills-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
}
.skill-group{padding-top:1rem;border-top:2px solid var(--ink)}
.skill-group h4{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:1.5rem;color:var(--accent);font-weight:500;
}
.skill-list{list-style:none;display:flex;flex-direction:column}
.skill-list li{
  font-family:var(--font-display);
  font-size:1.4rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--paper-line-soft);
  color:var(--ink-soft);
  font-weight:400;
  transition:all .35s var(--ease);
  cursor:default;
  position:relative;
  padding-left:0;
}
.skill-list li:hover{
  padding-left:1rem;
  color:var(--accent);
  font-style:italic;
}

/* ─────────────────── CONTACT ─────────────────── */
#contact{
  background:var(--bg-dark);
  color:var(--bg);
  padding:10rem 2.5rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
#contact .section-num{color:var(--accent)}
.contact-title{
  font-family:var(--font-display);
  font-size:clamp(3rem,9vw,9rem);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.03em;
  color:var(--bg);
  margin-bottom:2rem;
}
.contact-title em{font-style:italic;color:var(--accent)}
.contact-sub{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.3rem;
  color:#a8a29a;
  margin-bottom:4rem;
  max-width:45ch;
  margin-left:auto;margin-right:auto;
}
.contact-mail{
  display:inline-block;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.6rem,3vw,2.6rem);
  color:var(--bg);
  border-bottom:1px solid rgba(244,239,231,.3);
  padding-bottom:.25rem;
  margin-bottom:3.5rem;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.contact-mail:hover{color:var(--accent);border-color:var(--accent)}
.contact-links{
  display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;
}
.contact-link{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.9rem 1.6rem;
  border:1px solid rgba(244,239,231,.2);
  border-radius:999px;
  color:#a8a29a;
  transition:all .4s var(--ease);
}
.contact-link:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
  transform:translateY(-2px);
}

/* ─────────────────── FOOTER ─────────────────── */
footer{
  padding:2.5rem;
  background:var(--bg-dark);
  color:#6a6560;
  border-top:1px solid rgba(244,239,231,.08);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);
  font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  flex-wrap:wrap;gap:1rem;
}

/* ─────────────────── CURSOR ─────────────────── */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor-dot{
  width:6px;height:6px;border-radius:50%;
  background:#fff;
}
.cursor-ring{
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease);
}
.cursor-ring.hover{width:60px;height:60px;border-color:var(--accent)}
@media(hover:none){.cursor-dot,.cursor-ring{display:none}}

/* ─────────────────── REVEAL ANIMATIONS ─────────────────── */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* split-text char reveal */
.split-char{
  display:inline-block;
  opacity:0;
  transform:translateY(100%);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.split-word{display:inline-block;overflow:hidden;vertical-align:top}
.visible .split-char{opacity:1;transform:translateY(0)}

@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* ─────────────────── SUBPAGE STYLES ─────────────────── */
.page-hero{
  padding:10rem 2.5rem 4rem;
  max-width:1200px;
  position:relative;
}
.page-hero-meta{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:1.5rem;border-bottom:1px solid var(--paper-line);
  margin-bottom:3rem;
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
}
.back-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);
  transition:color .35s var(--ease),gap .35s var(--ease);
}
.back-link:hover{color:var(--accent);gap:.9rem}
.page-hero h1{
  font-family:var(--font-display);
  font-size:clamp(4rem,13vw,13rem);
  font-weight:400;line-height:.88;
  letter-spacing:-.03em;
  margin-bottom:2rem;
}
.page-hero h1 em{font-style:italic;color:var(--accent);font-weight:400}
.page-hero-desc{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.35rem;
  color:var(--ink-mute);
  max-width:45ch;
  line-height:1.5;
}

/* ─────────────────── MEDIA CATEGORIES ─────────────────── */
.media-categories{
  padding:2rem 2.5rem 8rem;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--paper-line);
}
.media-cat-card{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:3rem;
  align-items:center;
  padding:3.5rem 1rem;
  border-bottom:1px solid var(--paper-line);
  position:relative;
  overflow:hidden;
  transition:padding .5s var(--ease);
}
.media-cat-card::before{
  content:'';position:absolute;inset:0;
  background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .6s var(--ease-out);
  z-index:0;
}
.media-cat-card:hover::before{transform:scaleY(1)}
.media-cat-card > *{position:relative;z-index:1;transition:color .5s var(--ease)}
.media-cat-card:hover{padding-left:3rem}
.media-cat-card:hover *{color:#f4efe7}
.media-cat-number{
  font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.22em;color:var(--accent);
  width:40px;
}
.media-cat-title{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,7vw,6rem);
  font-weight:400;line-height:1;letter-spacing:-.02em;
  font-style:italic;
}
.media-cat-desc{
  font-size:.9rem;color:var(--ink-mute);
  max-width:30ch;line-height:1.5;
}
.media-cat-arrow{
  font-family:var(--font-display);font-style:italic;
  font-size:2rem;color:var(--accent);
  transition:transform .5s var(--ease);
}
.media-cat-card:hover .media-cat-arrow{transform:translateX(12px) rotate(-12deg)}

/* ─────────────────── GALLERY ─────────────────── */
.gallery-section{padding:2rem 2.5rem 8rem}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem;
  grid-auto-rows:minmax(180px,auto);
}
/* magazine-style varied sizes */
.gallery-item{
  position:relative;overflow:hidden;cursor:pointer;
  background:var(--bg-alt);
  border:1px solid var(--paper-line-soft);
  transition:transform .7s var(--ease-out);
}
.gallery-item:nth-child(6n+1){grid-column:span 5;grid-row:span 2}
.gallery-item:nth-child(6n+2){grid-column:span 4;grid-row:span 1}
.gallery-item:nth-child(6n+3){grid-column:span 3;grid-row:span 1}
.gallery-item:nth-child(6n+4){grid-column:span 4;grid-row:span 2}
.gallery-item:nth-child(6n+5){grid-column:span 3;grid-row:span 1}
.gallery-item:nth-child(6n){grid-column:span 5;grid-row:span 1}
.gallery-item:hover{transform:translateY(-4px)}
.gallery-placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:clamp(3rem,8vw,7rem);
  font-weight:900;font-style:italic;
  color:rgba(15,15,15,.08);
  transition:transform .8s var(--ease-out),color .5s;
  letter-spacing:-.03em;
}
body.theme-dark .gallery-placeholder{color:rgba(244,239,231,.08)}
.gallery-item:hover .gallery-placeholder{
  transform:scale(1.1);
  color:rgba(200,80,46,.18);
}
.gallery-item-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(15,15,15,.8) 100%);
  opacity:0;transition:opacity .5s;
  display:flex;align-items:flex-end;padding:1.5rem;
}
.gallery-item:hover .gallery-item-overlay{opacity:1}
.gallery-item-number{
  font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.22em;color:#fff;
}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(15,15,15,.97);
  backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease);
}
.lightbox.active{opacity:1;pointer-events:all}
.lightbox-img-wrapper{
  transform:scale(.9);opacity:0;
  transition:transform .6s var(--ease-out),opacity .5s;
}
.lightbox.active .lightbox-img-wrapper{transform:scale(1);opacity:1}
.lightbox-placeholder{
  width:70vw;height:75vh;max-width:900px;
  display:flex;align-items:center;justify-content:center;
  background:#1a1917;
  border:1px solid rgba(244,239,231,.08);
  font-family:var(--font-display);
  font-size:6rem;font-style:italic;font-weight:900;
  color:rgba(200,80,46,.25);
  letter-spacing:-.03em;
}
.lightbox-close{
  position:fixed;top:2rem;right:2.5rem;
  font-size:2rem;color:#f4efe7;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,transform .5s var(--ease);
}
.lightbox-close:hover{background:rgba(255,255,255,.08);transform:rotate(90deg)}
.lightbox-arrow{
  position:fixed;top:50%;transform:translateY(-50%);
  color:#f4efe7;font-size:3rem;
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,color .3s;
  font-family:var(--font-display);font-style:italic;
}
.lightbox-arrow:hover{background:rgba(255,255,255,.08);color:var(--accent)}
.lightbox-arrow.prev{left:2rem}
.lightbox-arrow.next{right:2rem}
.lightbox-counter{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.22em;
  color:rgba(244,239,231,.5);
}

/* ─────────────────── RESPONSIVE ─────────────────── */

/* Tablet */
@media(max-width:1024px){
  section{padding:6rem 2rem}
  .hero{padding:6rem 2rem 2.5rem}
  .work-grid{gap:1rem}
  .ventures-grid{grid-template-columns:repeat(2,1fr)}
  .venture-card:nth-child(2){border-right:none}
  .venture-card:nth-child(3),.venture-card:nth-child(4){border-bottom:1px solid var(--paper-line)}
}

/* Mobile — full rebuild for compact, tight, editorial-feel */
@media(max-width:768px){
  /* hide custom cursor entirely on touch */
  .cursor-dot,.cursor-ring{display:none}

  /* nav */
  nav{padding:1rem 1.25rem}
  .nav-logo{font-size:1.05rem}
  .nav-links{display:none}

  /* sections — tight padding everywhere */
  section{padding:4rem 1.25rem}

  /* HERO — compact, no awkward gaps */
  .hero{
    min-height:auto;
    padding:6rem 1.25rem 2rem;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
  }
  /* meta strip becomes one tight row */
  .hero-meta{
    position:static;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    font-size:.55rem;
    margin-bottom:3rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--paper-line);
  }
  .hero-meta-col{
    max-width:none;
    gap:.15rem;
    flex:1;
  }
  .hero-meta-col.right{align-items:flex-end;text-align:right}

  /* name — both rows left-aligned, tight, no parallax */
  .hero-name{margin-bottom:1.75rem;line-height:.85}
  .hero-name-row{
    transform:none !important;
    text-align:left !important;
    margin-top:0 !important;
  }
  .hero-name .word{
    font-size:clamp(3.8rem,21vw,7rem);
    letter-spacing:-.04em;
  }
  .hero-name-row.r2 .word{
    font-size:clamp(3.4rem,19vw,6.2rem);
  }

  /* foot — stacks tightly */
  .hero-foot{
    grid-template-columns:1fr;
    gap:1.5rem;
    padding-top:1.5rem;
  }
  .hero-tag{font-size:1.05rem;line-height:1.4}
  .hero-roles{font-size:.65rem;gap:.3rem}
  .hero-scroll{
    flex-direction:row;
    align-items:center;
    gap:.75rem;
    margin-top:.5rem;
  }
  .hero-scroll .bar{width:40px;height:1px}
  .hero-scroll .bar::after{
    width:100%;height:100%;top:0;left:-100%;
    animation:slideH 2.2s var(--ease) infinite;
  }
  @keyframes slideH{0%{left:-100%}100%{left:100%}}

  /* marquee — smaller */
  .marquee{padding:.85rem 0}
  .marquee-track{gap:1.75rem;animation-duration:28s}
  .marquee-track span{font-size:1.4rem;gap:1.75rem}
  .marquee-track span::after{font-size:.9rem}

  /* section headers */
  .section-head{
    grid-template-columns:1fr;
    gap:.75rem;
    margin-bottom:2.5rem;
    padding-bottom:1rem;
  }
  .section-num{font-size:.6rem;padding-top:0}
  .section-title{font-size:clamp(2.4rem,11vw,3.6rem)}
  .section-desc{font-size:.92rem;margin-top:.75rem}

  /* work grid — single column, uniform aspect */
  .work-grid{gap:1rem}
  .work-grid > .work-card{
    grid-column:span 12 !important;
    aspect-ratio:4/3 !important;
  }
  .work-card-body{padding:1.25rem 1.35rem}
  .work-card-title{font-size:1.5rem}
  .work-card-desc{font-size:.78rem;max-width:26ch}
  .work-card-arrow{width:38px;height:38px;font-size:.85rem}

  /* about */
  .about-grid{grid-template-columns:1fr;gap:2.5rem}
  .about-body p{font-size:1.1rem}
  .about-body p:first-child::first-letter{font-size:3.4rem}
  .about-portrait{aspect-ratio:4/5}
  .about-portrait .hk{font-size:8rem}
  .about-portrait::after{font-size:.55rem;flex-direction:column;gap:.3rem;align-items:flex-start}
  .trait{font-size:.62rem;padding:.4rem .8rem}

  /* timeline — shorter scroll, smaller type */
  #experience .section-head{padding:5rem 1.25rem 2rem}
  .timeline-stage{height:350vh}
  .tl-card{padding:0 1.25rem}
  .tl-num{font-size:.6rem;margin-bottom:1rem}
  .tl-date{font-size:.65rem;margin-bottom:1rem;padding:.3rem .8rem}
  .tl-role{font-size:clamp(2.2rem,10vw,3.4rem);margin-bottom:.75rem}
  .tl-org{font-size:1.05rem;margin-bottom:.75rem}
  .tl-desc{font-size:.85rem}
  .tl-counter{top:1.25rem;right:1.25rem;font-size:.6rem}
  .tl-progress{bottom:1.5rem;gap:.35rem}
  .tl-dot{width:18px}
  .tl-dot.current{width:36px}

  /* ventures — single column, all borders */
  .ventures-grid{grid-template-columns:1fr}
  .venture-card{
    border-right:none;
    border-bottom:1px solid var(--paper-line);
    padding:2.25rem 1.25rem 2rem;
  }
  .venture-num{margin-bottom:1.5rem}
  .venture-name{font-size:1.85rem}
  .venture-desc{font-size:.85rem}

  /* skills */
  .skills-row{grid-template-columns:1fr;gap:1.75rem}
  .skill-list li{font-size:1.15rem;padding:.5rem 0}

  /* contact */
  #contact{padding:6rem 1.25rem}
  .contact-title{font-size:clamp(2.5rem,13vw,4.5rem)}
  .contact-sub{font-size:1.05rem;margin-bottom:2.5rem}
  .contact-mail{font-size:1.3rem;margin-bottom:2.5rem}
  .contact-link{font-size:.6rem;padding:.7rem 1.1rem}

  /* footer */
  footer{
    padding:2rem 1.25rem;
    flex-direction:column;
    text-align:center;
    gap:.75rem;
    font-size:.58rem;
  }

  /* SUBPAGES */
  .page-hero{padding:6rem 1.25rem 2.5rem}
  .page-hero-meta{font-size:.6rem;margin-bottom:2rem;padding-bottom:1rem}
  .page-hero h1{font-size:clamp(3.4rem,16vw,5.5rem);line-height:.9;margin-bottom:1.25rem}
  .page-hero-desc{font-size:1.05rem;line-height:1.45}

  /* media categories — stack tight */
  .media-categories{padding:1rem 1.25rem 5rem}
  .media-cat-card{
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    gap:.5rem 1rem;
    padding:1.75rem .5rem;
    align-items:start;
  }
  .media-cat-card:hover{padding-left:1rem}
  .media-cat-number{
    grid-row:1;
    width:auto;
    font-size:.6rem;
    padding-top:.5rem;
  }
  .media-cat-title{
    grid-row:1;
    font-size:clamp(2rem,9vw,3rem);
  }
  .media-cat-desc{
    grid-column:2;
    grid-row:2;
    font-size:.85rem;
    max-width:none;
  }
  .media-cat-arrow{
    grid-column:1/3;
    grid-row:3;
    font-size:1.4rem;
    margin-top:.5rem;
    text-align:right;
  }

  /* gallery — 2 column on phone */
  .gallery-section{padding:1.5rem 1.25rem 4rem}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;grid-auto-rows:auto}
  .gallery-item{
    grid-column:span 1 !important;
    grid-row:span 1 !important;
    aspect-ratio:3/4;
  }
  .gallery-item:nth-child(6n+1){grid-column:span 2 !important;aspect-ratio:16/11}
  .gallery-placeholder{font-size:2.4rem}

  /* lightbox */
  .lightbox-placeholder{width:90vw;height:55vh;font-size:3rem}
  .lightbox-close{top:1rem;right:1rem;font-size:1.6rem;width:42px;height:42px}
  .lightbox-arrow{font-size:2rem;width:42px;height:42px}
  .lightbox-arrow.prev{left:.5rem}
  .lightbox-arrow.next{right:.5rem}
  .lightbox-counter{bottom:1rem;font-size:.6rem}
}

/* Very small phones */
@media(max-width:380px){
  section{padding:3.5rem 1rem}
  .hero{padding:5.5rem 1rem 1.5rem}
  .hero-meta{font-size:.5rem;gap:.5rem}
  .hero-name .word{font-size:clamp(3.2rem,20vw,5.5rem)}
  .hero-tag{font-size:.95rem}
  .marquee-track span{font-size:1.2rem}
  .section-title{font-size:clamp(2rem,10vw,3rem)}
  .work-card-title{font-size:1.3rem}
  .tl-role{font-size:clamp(1.9rem,9.5vw,2.8rem)}
  .contact-title{font-size:clamp(2.2rem,12vw,3.6rem)}
  .page-hero{padding:5.5rem 1rem 2rem}
  .page-hero h1{font-size:clamp(3rem,15vw,4.8rem)}
  .gallery-section{padding:1rem 1rem 3rem}
}