/* ---------- Pretendard (local) ---------- */
/* ---------- Pretendard · latin subset (woff2, ~28KB each) with local .otf fallback ---------- */
@font-face{font-family:'Pretendard';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/Pretendard-Regular.subset.woff2') format('woff2'),url('../Pretendard/Pretendard-Regular.otf') format('opentype')}
@font-face{font-family:'Pretendard';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/Pretendard-Medium.subset.woff2') format('woff2'),url('../Pretendard/Pretendard-Medium.otf') format('opentype')}
@font-face{font-family:'Pretendard';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/Pretendard-SemiBold.subset.woff2') format('woff2'),url('../Pretendard/Pretendard-SemiBold.otf') format('opentype')}
@font-face{font-family:'Pretendard';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/Pretendard-Bold.subset.woff2') format('woff2'),url('../Pretendard/Pretendard-Bold.otf') format('opentype')}
@font-face{font-family:'Pretendard';font-weight:800;font-style:normal;font-display:swap;src:url('../fonts/Pretendard-ExtraBold.subset.woff2') format('woff2'),url('../Pretendard/Pretendard-ExtraBold.otf') format('opentype')}
:root{
  --bg:#ffffff;
  --bg-alt:#f5f4f1;
  --ink:#0b0b0c;
  --muted:#6c6c72;
  --line:rgba(11,11,12,.12);
  --line-soft:rgba(11,11,12,.07);
  /* ---- brand palette · L1→L4 gradient ---- */
  --l1:#8a3fe0; --l1-rgb:138,63,224;   /* purple  */
  --l2:#c42e93; --l2-rgb:196,46,147;   /* magenta */
  --l3:#e12b4c; --l3-rgb:225,43,76;    /* crimson · accent */
  --l4:#f6981f; --l4-rgb:246,152,31;   /* orange (yellow-leaning) */
  --accent:var(--l3);
  --accent-rgb:225,43,76;
  --accent-soft:#fdeaed;
  --marker:#ffba3d; --marker-rgb:255,186,61;   /* bright highlighter tint of L4 */
  --grad:linear-gradient(120deg,var(--l1),var(--l2),var(--l3),var(--l4));
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html{background:var(--bg)}
body{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:transparent;color:var(--ink);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* ---------- site-wide flowing gradient backdrop ---------- */
.aurora{position:fixed;inset:-20% -20% -20% -20%;z-index:-1;pointer-events:none;opacity:.85;
  background:
    radial-gradient(38% 42% at 18% 22%,rgba(var(--l1-rgb),.16),transparent 60%),
    radial-gradient(34% 40% at 82% 30%,rgba(var(--l2-rgb),.14),transparent 60%),
    radial-gradient(40% 45% at 35% 82%,rgba(var(--l3-rgb),.13),transparent 60%),
    radial-gradient(36% 42% at 75% 78%,rgba(var(--l4-rgb),.14),transparent 60%);
  background-size:200% 200%;
  /* --sy is driven by scroll via JS; also slow ambient drift */
  transform:translateY(var(--sy,0px));
  animation:auroraShift 24s ease-in-out infinite}
@keyframes auroraShift{
  0%{background-position:0% 0%,100% 0%,0% 100%,100% 100%}
  50%{background-position:60% 40%,40% 60%,60% 40%,40% 60%}
  100%{background-position:0% 0%,100% 0%,0% 100%,100% 100%}}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.serif{font-family:'Newsreader',Georgia,serif}
.accent{color:var(--accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 2.5rem}

/* ---------- film grain texture ---------- */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- scroll progress bar ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--l1),var(--l2),var(--l3),var(--l4));transition:width .1s linear}

/* ---------- custom cursor ---------- */
.cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .3s}
.cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1.5px solid rgba(var(--accent-rgb),.5);border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .15s ease-out,width .25s,height .25s,opacity .3s}
.cursor-ring.hot{width:60px;height:60px;border-color:var(--accent);background:rgba(var(--accent-rgb),.06)}
@media(hover:none),(max-width:880px){.cursor-dot,.cursor-ring{display:none}}

/* ---------- decorative gradient blobs ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;pointer-events:none}
.blob-1{width:440px;height:440px;background:radial-gradient(circle,rgba(var(--l3-rgb),.28),transparent 70%);top:-120px;right:-80px;animation:drift 16s ease-in-out infinite}
.blob-2{width:380px;height:380px;background:radial-gradient(circle,rgba(var(--l1-rgb),.24),transparent 70%);bottom:-140px;left:-90px;animation:drift 20s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}}

/* word-by-word title reveal */
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word>span{display:inline-block;transform:translateY(110%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.in .word>span,.rv.in .word>span{transform:none}
.sec-title .word:nth-child(1)>span{transition-delay:.02s}
.sec-title .word:nth-child(2)>span{transition-delay:.07s}
.sec-title .word:nth-child(3)>span{transition-delay:.12s}
.sec-title .word:nth-child(4)>span{transition-delay:.17s}
.sec-title .word:nth-child(n+5)>span{transition-delay:.22s}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  background:rgba(255,255,255,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:.35s ease;
}
header.scrolled{border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.9)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;transition:.35s}
header.scrolled .nav{height:62px}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.brand b{color:var(--accent)}
.nav-links{display:flex;gap:2rem;align-items:center;list-style:none}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--muted);position:relative;transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--accent);transition:width .3s}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:.55rem 1.25rem;border:1.5px solid var(--ink);border-radius:50px;font-weight:600;color:var(--ink);transition:.3s}
.nav-cta{position:relative;overflow:visible}
.nav-links a.nav-cta:hover{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(var(--accent-rgb),.3)}
/* confetti burst (Connect CTA + email) — fixed so it never clips */
.spark{position:fixed;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:9998;
  will-change:transform,opacity;animation:burst .66s cubic-bezier(.16,1,.3,1) forwards}
@keyframes burst{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:1}
  60%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.spark{display:none}}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s}

/* ---------- hero ---------- */
.hero{padding:9.5rem 0 4rem;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:4rem;align-items:center;position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.8rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:.45rem 1rem;border-radius:50px;margin-bottom:1.6rem}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero-greet{font-family:'Newsreader',Georgia,serif;font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:500;font-style:italic;color:var(--accent);margin-bottom:.7rem}
.hero h1{font-size:clamp(2.4rem,5vw,4.4rem);font-weight:800;line-height:1.08;letter-spacing:-.035em;margin-bottom:1.6rem}
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{content:'';position:absolute;left:-2px;right:-2px;bottom:.08em;height:.32em;background:var(--marker);z-index:-1;opacity:.9;
  transform:scaleX(0);transform-origin:left;animation:drawline .9s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .hl:nth-of-type(2)::after{animation-delay:.35s}
@keyframes drawline{to{transform:scaleX(1)}}
.hero-lede{font-size:1.18rem;color:#34343a;max-width:640px;margin-bottom:1.4rem}
.hero-lede.serif{font-size:1.35rem;line-height:1.5}
.hero-bio{font-size:1rem;color:var(--muted);max-width:600px;margin-bottom:2.2rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.8rem;border-radius:50px;font-weight:600;font-size:.95rem;transition:transform .3s,box-shadow .3s,background .3s,color .3s,border-color .3s;cursor:pointer;border:1.5px solid transparent;overflow:hidden}
.btn>*{position:relative;z-index:1}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark::before{content:'';position:absolute;inset:0;z-index:0;background:var(--grad);transform:translateX(-101%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(var(--accent-rgb),.35)}
.btn-dark:hover::before{transform:translateX(0)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.1)}
.hero-photo{position:relative;justify-self:center}
.hero-photo .frame{position:relative;width:clamp(240px,26vw,330px);aspect-ratio:1/1.2;border-radius:200px 200px 18px 18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.16)}
.hero-photo .frame::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(var(--accent-rgb),0);transition:box-shadow .5s}
.hero-photo:hover .frame::after{box-shadow:inset 0 0 0 3px rgba(var(--accent-rgb),.55)}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hero-photo:hover .frame img{transform:scale(1.05)}
/* rotating ring behind portrait */
.hero-photo .ring{position:absolute;inset:-26px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,rgba(var(--l1-rgb),0),rgba(var(--l1-rgb),.35),rgba(var(--l2-rgb),.32),rgba(var(--l3-rgb),.32),rgba(var(--l4-rgb),.32),rgba(var(--l1-rgb),0));
  filter:blur(14px);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-photo .badge{position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:50px;
  padding:.55rem 1rem;box-shadow:0 12px 28px rgba(0,0,0,.1);font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.hero-photo .b1{top:18px;left:-34px;animation:float 6s ease-in-out infinite}
.hero-photo .b2{bottom:38px;right:-32px;animation:float 7s ease-in-out infinite reverse}
.hero-photo .bdot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:2rem 0;overflow:hidden;margin-top:3.5rem;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee-label{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:1.6rem}
.marquee-track{display:flex;align-items:center;gap:3.4rem;white-space:nowrap;width:max-content;animation:scroll 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
/* every logo fits the same bounding box, so heights read consistently regardless of aspect ratio */
.marquee-logo{flex:none;height:96px;width:170px;display:flex;align-items:center;justify-content:center;transition:transform .4s}
.marquee-logo img{max-height:42px;max-width:155px;width:auto;height:auto;object-fit:contain;display:block;transition:transform .4s;backface-visibility:hidden}
/* dense square marks read large at equal height, so trim them a touch for optical balance */
.marquee-logo.sq img{max-height:36px}
.marquee-logo:hover{transform:translateY(-6px)}
.marquee-logo:hover img{transform:scale(1.07)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:3.5rem;align-items:start}
.about-lead{font-family:'Newsreader',Georgia,serif;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.about-lead strong{color:var(--accent);font-weight:600}
.about-body{display:flex;flex-direction:column;gap:1.3rem}
.about-body p{font-size:1.1rem;line-height:1.75;color:#3a3a40}
.about-body p{padding-left:1.4rem;border-left:3px solid var(--accent)}
@media(max-width:880px){.about-grid{grid-template-columns:1fr;gap:1.8rem}}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:6.5rem 0}
.sec-alt{background:rgba(245,244,241,.72)}
.sec-head{max-width:760px;margin-bottom:3.2rem}
.sec-num{font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:700;letter-spacing:.08em;color:var(--accent);text-transform:uppercase;margin-bottom:1.1rem;display:flex;align-items:center;gap:.7rem}
.sec-num::before{content:'';width:34px;height:2px;background:var(--accent);display:inline-block}
.sec-title{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.sec-intro{font-size:1.15rem;color:var(--muted);margin-top:1.1rem}

/* ---------- positioning stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem 1.7rem;transition:.35s}
.stat:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 24px 50px rgba(0,0,0,.08)}
.stat .num{font-size:2.9rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .num .pre{color:var(--accent)}
.stat .cap{margin-top:.7rem;font-weight:700;font-size:1rem}
.stat .sub{margin-top:.35rem;font-size:.88rem;color:var(--muted)}

/* ---------- experience ---------- */
.xp{display:grid;grid-template-columns:1fr;gap:0}
.xp-row{display:grid;grid-template-columns:200px 1fr;gap:2rem;padding:1.8rem 0;border-top:1px solid var(--line);transition:.3s}
.xp-row:last-child{border-bottom:1px solid var(--line)}
.xp-row:hover{background:#fff;padding-left:1rem;padding-right:1rem;border-radius:14px}
.xp-when{font-size:.9rem;font-weight:600;color:var(--accent)}
.xp-where{font-size:.85rem;color:var(--muted);margin-top:.2rem}
.xp-role h3{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.xp-role .org{font-size:.95rem;color:var(--muted);margin:.15rem 0 .6rem}
.xp-role p{color:#34343a;font-size:.97rem}
.xp-role .seealso{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;padding:.28rem .7rem;border-radius:50px;
  font-size:.82rem;font-weight:700;color:#c4660f;background:rgba(var(--l4-rgb),.14);transition:.25s}
.xp-role .seealso:hover{background:rgba(var(--l4-rgb),.24);transform:translateX(3px)}

/* ---------- four layers (3D stacked blocks) ---------- */
.layers{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.5rem;perspective:1900px}
.layer{position:relative;border-radius:16px;background:#fff;cursor:pointer;transform-style:preserve-3d;
  /* the colored extruded "edge" beneath the slab (soft, translucent) */
  box-shadow:0 6px 0 0 var(--lcs,rgba(0,0,0,.12)),0 14px 30px -10px var(--lcs,rgba(0,0,0,.18));
  border:1px solid var(--line-soft);
  transform:rotateX(8deg);transform-origin:center bottom;
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s}
.layer::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(120deg,var(--lc,#999),var(--lc2,transparent) 38%,transparent 72%);opacity:.04;transition:opacity .6s ease}
.layer.open::after{opacity:.16}
.layer:hover{transform:rotateX(0deg) translateY(-6px);
  box-shadow:0 9px 0 0 var(--lcs,rgba(0,0,0,.16)),0 30px 52px -14px var(--lcs,rgba(0,0,0,.22))}
.layer:hover::after{opacity:.1}
.layer.open:hover::after{opacity:.2}
.layer.open{transform:rotateX(0deg);box-shadow:0 7px 0 0 var(--lcs,rgba(0,0,0,.14)),0 26px 46px -14px var(--lcs,rgba(0,0,0,.2))}
.layer-head{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;padding:1.6rem 2rem}
.layer-idxwrap{display:flex;align-items:center;gap:1.15rem}
.layer-idx{width:54px;height:54px;border-radius:14px;background:var(--lcs,rgba(0,0,0,.08));
  color:var(--lc,#666);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;transition:.45s;
  box-shadow:inset 0 0 0 1px var(--lcs,rgba(0,0,0,.12))}
.layer:hover .layer-idx{transform:translateZ(30px) scale(1.06)}
.layer-ic{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--lc,var(--accent));transition:.5s}
.layer-ic svg{width:24px;height:24px;display:block;opacity:.9;transition:.5s}
.layer:hover .layer-ic,.layer.open .layer-ic{transform:translateZ(24px) scale(1.08)}
.layer:hover .layer-ic svg,.layer.open .layer-ic svg{opacity:1}
.layer-main .lname{font-size:1.34rem;font-weight:700;letter-spacing:-.02em}
.layer-main .lone{color:var(--muted);font-size:.97rem;margin-top:.15rem;font-weight:400}
.layer-toggle{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--muted);transition:.45s;background:#fff}
.layer:hover .layer-toggle{border-color:var(--lc,var(--accent));color:var(--lc,var(--accent))}
.layer.open .layer-toggle{transform:rotate(45deg);background:var(--lc,var(--accent));color:#fff;border-color:transparent}
.layer-body{position:relative;z-index:1;max-height:0;overflow:hidden;transition:max-height .5s ease}
.layer.open .layer-body{max-height:460px}
.layer-body-inner{padding:.2rem 2rem 1.9rem 6.9rem;color:#34343a}
.layer-body-inner .chips{margin-top:1rem}
@media(max-width:640px){
  .layers{perspective:none}
  .layer{transform:none}
  .layer:hover,.layer.open{transform:translateY(-4px)}
  .layer-body-inner{padding-left:2rem}
}

/* link chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border:1px solid var(--line);border-radius:50px;
  font-size:.83rem;font-weight:600;color:var(--ink);background:#fff;transition:.25s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.chip img{width:16px;height:16px;border-radius:4px;object-fit:cover}
.chip .ext{opacity:.5;font-size:.75rem}

/* ---------- projects ---------- */
.proj{padding:5rem 0;border-top:1px solid var(--line)}
.proj:first-of-type{border-top:none}
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.proj.rev .proj-media{order:2}
.proj-tag{font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.proj h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:.6rem 0 .4rem}
.proj .sub{font-size:.95rem;color:var(--muted);margin-bottom:1.6rem}
.cao{margin-bottom:1.3rem}
.cao .lbl{display:inline-block;font-size:.82rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  background:none;padding:0;border-radius:0;margin-bottom:.7rem;line-height:1}
.cao .lbl::before{content:'#';margin-right:.06em;opacity:.42;font-weight:800}
.cao.c .lbl{color:#7330c9}
.cao.a .lbl{color:#b02981}
.cao.o .lbl{color:#c4660f}
.cao p{color:#34343a;font-size:.98rem}
.cao ul{list-style:none;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.55rem}
.cao li{position:relative;padding-left:1.35rem;color:#34343a;font-size:.96rem;line-height:1.55}
.cao li::before{content:'';position:absolute;left:.05rem;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cao.c li::before{background:var(--l1)}
.cao.a li::before{background:var(--l2)}
.cao.o li::before{background:var(--l4)}
.cao strong{font-weight:inherit;color:inherit}
/* subtle highlighter marker for key facts in body copy */
.mk{background:linear-gradient(180deg,transparent 60%,rgba(var(--marker-rgb),.34) 60%);padding:0 .06em;font-weight:inherit}
.proj-media{position:relative}
.fig{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-bottom:1.1rem;cursor:zoom-in;position:relative;background:#fff}
.fig[data-href]{cursor:pointer}
.fig img{width:100%;height:auto;transition:transform .5s ease}
.fig:hover img{transform:scale(1.04)}
.fig .cap{position:absolute;left:0;right:0;bottom:0;padding:1rem;font-size:.82rem;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);opacity:0;transition:.3s;display:flex;align-items:center;gap:.4rem}
.fig:hover .cap{opacity:1}
.fig .src-badge{position:absolute;top:.7rem;right:.7rem;z-index:2;display:flex;align-items:center;gap:.35rem;
  padding:.32rem .7rem;border-radius:50px;background:rgba(11,11,12,.82);backdrop-filter:blur(6px);color:#fff;
  font-size:.7rem;font-weight:600;letter-spacing:.02em;opacity:0;transform:translateY(-4px);transition:.3s}
.fig[data-href]:hover .src-badge{opacity:1;transform:none}
.fig-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

/* video */
.video-card{border-radius:16px;overflow:hidden;border:1px solid var(--line);position:relative;aspect-ratio:16/9;background:#000;cursor:pointer}
.video-card img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:.4s}
.video-card:hover img{opacity:.65;transform:scale(1.03)}
.video-card .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video-card .play .circle{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:var(--accent);box-shadow:0 10px 40px rgba(0,0,0,.4);transition:.3s}
.video-card:hover .play .circle{transform:scale(1.1);background:#fff}
.video-card .vlabel{position:absolute;left:1.1rem;bottom:1rem;color:#fff;font-weight:700;font-size:1rem;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.video-card iframe{width:100%;height:100%;border:0}

/* press wall */
.press-wall{columns:4;column-gap:1.1rem}
.press-item{break-inside:avoid;margin-bottom:1.1rem;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  position:relative;display:block;background:#fff;transition:.35s}
.press-item:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.1);border-color:var(--accent)}
.press-item img{width:100%;height:auto;cursor:pointer}
.press-item .ov{position:absolute;inset:0;display:flex;align-items:flex-end;padding:.9rem;
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent 55%);opacity:0;transition:.3s}
.press-item:hover .ov{opacity:1}
.press-item .ov span{color:#fff;font-size:.8rem;font-weight:600}

/* ---------- recognition ---------- */
.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-bottom:2.5rem}
.cred{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.8rem;transition:transform .35s,border-color .35s,box-shadow .35s;position:relative;overflow:hidden}
.cred::before{content:'';position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);transition:width .4s}
.cred:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 20px 44px rgba(0,0,0,.09)}
.cred:hover::before{width:100%}
.cred .ic{width:74px;height:74px;border-radius:16px;background:var(--bg-alt);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;transition:transform .4s}
.cred:hover .ic{transform:scale(1.06)}
.cred .ic img{max-width:62px;max-height:52px;width:auto;height:auto;object-fit:contain;display:block}
.cred .ic img.flag-us{display:block;width:auto;height:auto;max-width:31px;max-height:26px;border-radius:4px}
.cred .ic img.trophy-ic{display:block;width:auto;height:auto;max-width:30px;max-height:30px}
.cred h4{font-size:1.1rem;font-weight:800;margin:1rem 0 .3rem;letter-spacing:-.02em}
.cred p{font-size:.9rem;color:var(--muted)}
.awards{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.award{display:grid;grid-template-columns:170px 1fr;gap:1.6rem;padding:1.5rem 1.8rem;border-top:1px solid var(--line-soft);transition:.3s}
.award:first-child{border-top:none}
.award:hover{background:var(--bg-alt)}
.award .ad{font-size:.85rem;font-weight:700;color:var(--accent)}
.award h4{font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.award p{font-size:.92rem;color:#34343a;margin-top:.3rem}

/* ---------- off the clock ---------- */
.clock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.clock-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:2.1rem;transition:.35s}
.clock-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.08)}
.clock-card .big{font-size:2rem;margin-bottom:.8rem}
.clock-card h4{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem}
.clock-card p{color:#34343a;font-size:.96rem}
.clock-quote{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.3;font-weight:500;letter-spacing:-.02em;margin-bottom:2.4rem;max-width:900px}

/* ---------- writing ---------- */
.feature-essay{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--ink);border-radius:20px;overflow:hidden;margin-bottom:2.5rem;background:#fff}
.feature-essay .fe-text{padding:2.6rem}
.feature-essay .fe-side{background:var(--ink);color:#fff;padding:2.6rem;display:flex;flex-direction:column;justify-content:center}
.fe-thesis{font-size:1.15rem;line-height:1.55}
.fe-thesis .accent{color:var(--accent)}
.fe-live{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem}
.fe-live .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
.feature-essay h3{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:.9rem}
.feature-essay .fe-text p{color:#34343a}
.upcoming-head{font-weight:800;font-size:1.05rem;margin-bottom:1rem;letter-spacing:-.01em}
.essay-list{border-top:1px solid var(--line)}
.essay{border-bottom:1px solid var(--line);transition:.3s}
.essay-btn{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:1.2rem;padding:1.2rem .4rem;transition:.3s}
.essay-btn:hover{padding-left:1rem}
.essay-btn .en{font-size:.85rem;font-weight:700;color:var(--accent);min-width:28px}
.essay-btn .et{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;flex:1}
.essay-btn .ex{font-size:1.3rem;color:var(--muted);transition:.3s}
.essay.open .essay-btn .ex{transform:rotate(45deg);color:var(--accent)}
.essay-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.essay.open .essay-body{max-height:160px}
.essay-body p{padding:0 .4rem 1.3rem 3.2rem;color:var(--muted);font-size:.95rem}
.tagrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.tag{font-size:.82rem;font-weight:600;color:var(--muted);background:var(--bg-alt);border:1px solid var(--line-soft);padding:.45rem .95rem;border-radius:50px}

/* ---------- connect ---------- */
.connect{text-align:center;padding:7rem 0}
.connect h2{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:1.6rem}
.connect p{color:var(--muted);font-size:1.15rem;max-width:560px;margin:0 auto 2.4rem}
.connect-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

footer{border-top:1px solid var(--line);padding:2.6rem 0}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.88rem;color:var(--muted)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(8,8,10,.93);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:4rem 2rem}
.lb.open{display:flex}
.lb-box{max-width:92vw;max-height:88vh;text-align:center;position:relative}
.lb-box img{max-width:100%;max-height:78vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-cap{color:#fff;margin-top:1rem;font-size:.95rem;font-weight:500}
.lb-x{position:absolute;top:-3.2rem;right:0;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:1.2rem;transition:.3s}
.lb-nav{position:absolute;top:42%;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:1.5rem;transition:.3s}
.lb-x:hover,.lb-nav:hover{background:var(--accent);border-color:var(--accent)}
.lb-prev{left:-4.5rem}.lb-next{right:-4.5rem}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
/* staggered children reveal */
.stagger>*{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:0s}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .rv,.stagger>*{opacity:1;transform:none;transition:none}
  .hero h1 .hl::after{animation:none;transform:scaleX(1)}
  .marquee-track{animation:none}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-photo{order:-1;justify-self:start}
  .stats{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:1fr;gap:2rem}
  .proj.rev .proj-media{order:0}
  .creds,.clock-grid{grid-template-columns:1fr}
  .feature-essay{grid-template-columns:1fr}
  .press-wall{columns:2}
  .award{grid-template-columns:1fr;gap:.4rem}
}
@media(max-width:640px){
  .wrap{padding:0 1.3rem}
  .nav-links{display:none}
  .burger{display:flex}
  .stats{grid-template-columns:1fr}
  .xp-row{grid-template-columns:1fr;gap:.5rem}
  .layer-body-inner{padding-left:1.9rem}
  .press-wall{columns:1}
  .lb-prev{left:.4rem}.lb-next{right:.4rem}.lb-x{right:.4rem}
}

/* ============================================================================
   APP MODE
   Everything below re-lays the page for phones. Desktop is untouched.
   Breakpoint: 768px. Keep this block last so it wins the cascade.
   ============================================================================ */

/* ---------- bottom tab bar ---------- */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;
  grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);
  border-top:1px solid var(--line-soft);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px rgba(11,11,12,.055)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;height:58px;
  color:var(--muted);font-size:.635rem;font-weight:600;position:relative;-webkit-tap-highlight-color:transparent}
.tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.tab.on{color:var(--ink)}
.tab.on svg{color:var(--accent);transform:translateY(-1px) scale(1.08)}
.tab.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:3px;border-radius:0 0 4px 4px;background:var(--grad)}
.tab:active{opacity:.55}

/* ---------- menu sheet ---------- */
.sheet{position:fixed;inset:0;z-index:190;display:none}
.sheet.open{display:block}
.sheet-scrim{position:absolute;inset:0;background:rgba(11,11,12,.44);opacity:0;transition:opacity .3s ease}
.sheet.show .sheet-scrim{opacity:1}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;
  box-shadow:0 -20px 54px rgba(0,0,0,.22);max-height:88vh;overflow-y:auto;
  padding:.5rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sheet.show .sheet-panel{transform:none}
.sheet-grab{width:40px;height:4px;border-radius:4px;background:var(--line);margin:.4rem auto .9rem}
.sheet-nav a{display:flex;align-items:center;gap:.8rem;padding:.85rem .15rem;border-bottom:1px solid var(--line-soft);
  font-weight:700;font-size:1rem;letter-spacing:-.01em}
.sheet-nav a:last-of-type{border-bottom:none}
.sheet-nav a .n{font-size:.7rem;font-weight:700;color:var(--accent);min-width:20px;letter-spacing:.06em}
.sheet-nav a .ar{margin-left:auto;color:var(--muted);font-size:.95rem}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1rem}
.sheet-actions .btn{width:100%;justify-content:center;padding:.85rem .6rem;font-size:.84rem}

/* ---------- swipe-gallery page dots ---------- */
.gal-dots{display:none;justify-content:center;gap:.36rem;margin:.35rem 0 1.2rem}
.gal-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:.3s}
.gal-dots i.on{width:18px;border-radius:50px;background:var(--accent)}


/* ============================ ≤768px ============================ */
@media(max-width:768px){
  :root{--gut:1.15rem}
  html{-webkit-text-size-adjust:100%}
  body{-webkit-tap-highlight-color:transparent;padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .wrap{padding:0 var(--gut)}
  .grain{opacity:.03}
  .aurora{opacity:.7}
  .blob-1{width:270px;height:270px;top:-100px;right:-80px}
  .blob-2{width:240px;height:240px;bottom:-120px;left:-90px}
  .tabbar{display:grid}
  .gal-dots{display:flex}

  /* --- top app bar: compact, hides on scroll down --- */
  header{padding-top:env(safe-area-inset-top);will-change:transform}
  header.hide{transform:translateY(-100%)}
  .nav,header.scrolled .nav{height:54px}
  .brand{font-size:1.02rem}
  .nav-links{display:none}
  .burger{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px}
  .burger span{width:19px;height:2px;border-radius:2px}
  .progress{height:2px;top:env(safe-area-inset-top)}

  /* --- hero: portrait first, everything centred --- */
  .hero{padding:calc(env(safe-area-inset-top) + 5.1rem) 0 1.6rem}
  .hero-grid{grid-template-columns:1fr;gap:1.85rem;text-align:center}
  .hero-photo{order:-1;justify-self:center;transform:none!important}
  .hero-photo .frame{width:min(54vw,215px);border-radius:150px 150px 16px 16px;box-shadow:0 18px 42px rgba(0,0,0,.15)}
  .hero-photo .ring{inset:-15px;filter:blur(11px)}
  .hero-photo .badge{padding:.4rem .72rem;font-size:.62rem;gap:.35rem;box-shadow:0 8px 18px rgba(0,0,0,.12)}
  .hero-photo .b1{top:10px;left:-14px}
  .hero-photo .b2{bottom:26px;right:-14px}
  .hero-photo .bdot{width:5px;height:5px}
  .eyebrow{margin-bottom:1rem;font-size:.7rem;padding:.4rem .85rem}
  .hero-greet{font-size:1.12rem;margin-bottom:.4rem}
  .hero h1{font-size:clamp(1.78rem,7.4vw,2.4rem);line-height:1.14;letter-spacing:-.028em;margin-bottom:1rem}
  .hero-lede.serif{font-size:1.02rem;line-height:1.5;margin:0 auto 1.5rem}
  .hero-bio{font-size:.94rem;margin:0 auto 1.6rem}
  .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .hero-cta .btn{width:100%;justify-content:center;padding:.9rem .6rem;font-size:.9rem}

  /* --- partner marquee --- */
  .marquee{margin-top:2.2rem;padding:1.3rem 0}
  .marquee-label{font-size:.66rem;letter-spacing:.14em;margin-bottom:1rem;padding:0 var(--gut)}
  .marquee-track{gap:1.9rem;animation-duration:32s}
  .marquee-logo{height:54px;width:100px}
  .marquee-logo img{max-height:25px;max-width:88px}
  .marquee-logo.sq img{max-height:22px}

  /* --- section rhythm --- */
  .sec{padding:3.3rem 0}
  .sec-head{margin-bottom:1.9rem}
  .sec-num{font-size:.78rem;letter-spacing:.1em;margin-bottom:.7rem;gap:.5rem}
  .sec-num::before{width:22px}
  .sec-title{font-size:clamp(1.58rem,6.2vw,2.1rem);line-height:1.15;letter-spacing:-.025em}
  .sec-intro{font-size:.97rem;margin-top:.8rem}

  /* --- about --- */
  .about-grid{gap:1.4rem}
  .about-lead{font-size:1.28rem;line-height:1.36}
  .about-body{gap:1rem}
  .about-body p{font-size:.98rem;line-height:1.68;padding-left:1rem;border-left-width:2px}

  /* --- by the numbers: number left, label right --- */
  .stats{grid-template-columns:1fr;gap:.65rem}
  .stat{display:grid;grid-template-columns:76px 1fr;column-gap:.9rem;align-items:center;
    padding:1.1rem 1.05rem;border-radius:16px}
  .stat .num{grid-column:1;grid-row:1/3;font-size:1.85rem;text-align:center}
  .stat .num sup{font-size:.5em}
  .stat .cap{grid-column:2;grid-row:1;margin-top:0;font-size:.93rem;line-height:1.3}
  .stat .sub{grid-column:2;grid-row:2;margin-top:.2rem;font-size:.77rem;line-height:1.42}

  /* --- experience --- */
  .xp-row{grid-template-columns:1fr;gap:.6rem;padding:1.3rem 0}
  .xp-row>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
  .xp-when{font-size:.72rem;background:rgba(var(--accent-rgb),.09);padding:.24rem .6rem;border-radius:50px}
  .xp-where{margin-top:0;font-size:.78rem}
  .xp-role h3{font-size:1.12rem}
  .xp-role .org{font-size:.87rem;margin:.15rem 0 .5rem}
  .xp-role p{font-size:.92rem;line-height:1.6}
  .xp-role .seealso{font-size:.77rem;padding:.3rem .7rem}

  /* --- four layers: flat cards, thumb-sized tap area --- */
  .layers{perspective:none;gap:.7rem;margin-top:1.1rem}
  .layer,.layer:hover,.layer.open{transform:none}
  .layer{border-radius:14px;box-shadow:0 4px 0 0 var(--lcs,rgba(0,0,0,.12)),0 12px 22px -14px var(--lcs,rgba(0,0,0,.2))}
  .layer-head{gap:.8rem;padding:1rem .95rem}
  .layer-idxwrap{gap:0}
  .layer-ic{display:none}
  .layer-idx,.layer:hover .layer-idx{width:40px;height:40px;border-radius:11px;font-size:.9rem;transform:none}
  .layer-main .lname{font-size:1.04rem}
  .layer-main .lone{font-size:.82rem;line-height:1.4;margin-top:.2rem}
  .layer-toggle{width:30px;height:30px;font-size:1.05rem;flex:none}
  .layer-body-inner{padding:0 .95rem 1.25rem;font-size:.91rem;line-height:1.62}
  .layer.open .layer-body{max-height:760px}

  /* --- projects: headline → swipe gallery → detail --- */
  .proj{padding:2.4rem 0}
  .proj-grid{display:block}
  .proj-tag{font-size:.72rem}
  .proj h3{font-size:1.32rem;line-height:1.2;margin:.5rem 0 .3rem}
  .proj .sub{font-size:.85rem;line-height:1.45;margin-bottom:1.1rem}
  .cao{margin-bottom:1.1rem}
  .cao .lbl{font-size:.74rem;margin-bottom:.5rem}
  .cao p,.cao li{font-size:.92rem;line-height:1.62}
  .cao li{padding-left:1.15rem}
  .chips{gap:.45rem}
  .chip{font-size:.78rem;padding:.45rem .78rem}

  .proj-media{display:flex;align-items:stretch;gap:.6rem;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;scroll-padding-inline:var(--gut);scrollbar-width:none;
    margin:0 calc(var(--gut) * -1) .1rem;padding:.15rem var(--gut) .35rem}
  .proj-media::-webkit-scrollbar{display:none}
  .proj-media .fig-row{display:contents}
  .proj-media .fig{flex:0 0 84%;aspect-ratio:4/3;scroll-snap-align:start;margin-bottom:0;border-radius:14px}
  .proj-media .fig img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .proj-media .fig .cap{opacity:1;font-size:.72rem;padding:.75rem .8rem;
    background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.12) 62%,transparent)}
  .proj-media .fig .src-badge{opacity:1;transform:none;font-size:.62rem;padding:.26rem .55rem}

  /* --- press: same swipe strip --- */
  .press-wall{columns:auto;display:flex;gap:.6rem;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;scroll-padding-inline:var(--gut);scrollbar-width:none;
    margin:0 calc(var(--gut) * -1);padding:.15rem var(--gut) .35rem}
  .press-wall::-webkit-scrollbar{display:none}
  .press-item{flex:0 0 76%;aspect-ratio:4/3;scroll-snap-align:start;margin-bottom:0;border-radius:14px}
  .press-item img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .press-item .ov{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.1) 60%,transparent)}
  .press-item .ov span{font-size:.72rem}

  /* --- recognition --- */
  .creds{grid-template-columns:1fr;gap:.65rem;margin-bottom:1.6rem}
  .cred{display:grid;grid-template-columns:54px 1fr;column-gap:.95rem;padding:1.2rem 1.05rem;border-radius:16px}
  .cred .ic{grid-column:1;grid-row:1/3;width:54px;height:54px;border-radius:14px}
  .cred .ic img{max-width:40px;max-height:34px}
  .cred h4{grid-column:2;grid-row:1;margin:0 0 .2rem;font-size:1rem}
  .cred p{grid-column:2;grid-row:2;font-size:.85rem;line-height:1.5}
  .awards{border-radius:16px}
  .award{grid-template-columns:1fr;gap:.5rem;padding:1.15rem 1.05rem}
  .award .ad{width:fit-content;font-size:.7rem;background:rgba(var(--accent-rgb),.09);padding:.24rem .6rem;border-radius:50px}
  .award h4{font-size:.99rem}
  .award p{font-size:.87rem;line-height:1.55;margin-top:.25rem}

  /* --- off the clock --- */
  .clock-quote{font-size:1.28rem;line-height:1.36;margin-bottom:1.5rem}
  .clock-grid{grid-template-columns:1fr;gap:.65rem}
  .clock-card{padding:1.35rem 1.15rem;border-radius:16px}
  .clock-card .big{font-size:1.6rem;margin-bottom:.5rem}
  .clock-card h4{font-size:1.05rem}
  .clock-card p{font-size:.91rem;line-height:1.6}

  /* --- writing --- */
  .feature-essay{grid-template-columns:1fr;border-radius:16px;margin-bottom:1.8rem}
  .feature-essay .fe-text{padding:1.5rem 1.25rem 1.4rem}
  .feature-essay .fe-side{padding:1.5rem 1.25rem}
  .feature-essay h3{font-size:1.22rem;margin-bottom:.7rem}
  .feature-essay .fe-text p{font-size:.92rem;line-height:1.62}
  .fe-thesis{font-size:1rem;line-height:1.55}
  .upcoming-head{font-size:.98rem}
  .essay-btn{padding:1rem .1rem;gap:.75rem}
  .essay-btn .en{min-width:22px;font-size:.76rem}
  .essay-btn .et{font-size:.94rem;line-height:1.34}
  .essay-btn .ex{font-size:1.15rem}
  .essay-body p{padding:0 .1rem 1.1rem 2.55rem;font-size:.87rem}
  .essay.open .essay-body{max-height:280px}
  .tagrow{gap:.45rem;margin-top:1.5rem}
  .tag{font-size:.75rem;padding:.38rem .78rem}

  /* --- connect + footer --- */
  .connect{padding:3.4rem 0 3rem}
  .connect h2{font-size:clamp(1.85rem,7.6vw,2.5rem);margin-bottom:1.1rem}
  .connect p{font-size:.97rem;margin-bottom:1.6rem}
  .connect-links{flex-direction:column;gap:.6rem}
  .connect-links .btn{width:100%;justify-content:center;padding:.95rem 1rem}
  footer{padding:1.8rem 0 1.5rem}
  .foot{flex-direction:column;text-align:center;gap:.45rem;font-size:.78rem;line-height:1.5}

  /* --- lightbox: full screen, swipe to move, swipe down to close --- */
  .lb{padding:0}
  .lb-box{width:100%;max-width:100vw;max-height:100vh;
    padding:calc(env(safe-area-inset-top) + 3.5rem) 1rem calc(env(safe-area-inset-bottom) + 4rem)}
  .lb-box img{max-height:70vh;border-radius:12px}
  .lb-cap{font-size:.82rem;margin-top:.9rem;padding:0 .4rem}
  .lb-x{position:fixed;top:calc(env(safe-area-inset-top) + .7rem);right:.9rem;width:40px;height:40px}
  .lb-nav{position:fixed;top:auto;bottom:calc(env(safe-area-inset-bottom) + 1rem);width:44px;height:44px}
  .lb-prev{left:calc(50% - 3.6rem)}
  .lb-next{right:calc(50% - 3.6rem)}
}

/* ---------- touch devices: no sticky hover, real press feedback ----------
   Kept last so the :active states win over the layout overrides above. */
@media(hover:none){
  .btn-dark:hover,.btn-ghost:hover,.stat:hover,.cred:hover,.clock-card:hover,.press-item:hover,
  .layer:hover,.chip:hover,.marquee-logo:hover,.essay-btn:hover,.xp-role .seealso:hover{transform:none}
  .btn-dark:hover,.stat:hover,.cred:hover,.clock-card:hover,.press-item:hover{box-shadow:none}
  .layer:hover{box-shadow:0 4px 0 0 var(--lcs,rgba(0,0,0,.12)),0 12px 22px -14px var(--lcs,rgba(0,0,0,.2))}
  .cred:hover,.stat:hover,.clock-card:hover,.press-item:hover{border-color:var(--line)}
  .xp-row:hover{background:transparent;padding-left:0;padding-right:0;border-radius:0}
  .essay-btn:hover{padding-left:.4rem}
  .fig:hover img,.press-item:hover img,.marquee-logo:hover img,.hero-photo:hover .frame img{transform:none}
  .hero-photo:hover .frame::after{box-shadow:none}
  .marquee:hover .marquee-track{animation-play-state:running}
  .btn:active,.chip:active{transform:scale(.97)}
  .layer:active,.stat:active,.cred:active,.clock-card:active,.press-item:active,.fig:active{transform:scale(.988)}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* very small phones */
@media(max-width:360px){
  .tab{font-size:.58rem}
  .hero-cta{grid-template-columns:1fr}
  .stat{grid-template-columns:66px 1fr}
  .proj-media .fig{flex:0 0 88%}
  .press-item{flex:0 0 82%}
}

/* ============================================================================
   JOURNAL — the writing index and the essay pages
   ============================================================================ */

/* ---------- cross-page transitions ----------
   Chrome/Safari animate between pages; other browsers just navigate normally.
   Naming the header and tab bar keeps them still while the body cross-fades. */
@view-transition{navigation:auto}
header{view-transition-name:sitehdr}
.tabbar{view-transition-name:sitetab}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- sub-page hero ---------- */
.page-hero{padding:calc(74px + 4.2rem) 0 2.6rem;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:800;letter-spacing:-.035em;line-height:1.06}
.page-hero .dek{font-family:'Newsreader',Georgia,serif;font-size:clamp(1.12rem,2vw,1.42rem);line-height:1.5;
  color:#3a3a40;max-width:660px;margin-top:1.2rem}
.crumb{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;color:var(--muted);
  margin-bottom:1.3rem;transition:color .25s,gap .25s}
.crumb:hover{color:var(--accent);gap:.7rem}

/* ---------- entry cards ---------- */
.jr-grid{display:grid;gap:1rem}
.jr-card{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:1.85rem;position:relative;overflow:hidden;transition:.35s}
.jr-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);
  transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.jr-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 22px 46px rgba(0,0,0,.09)}
.jr-card:hover::before{transform:scaleY(1)}
.jr-card.feature{border-color:var(--ink)}
.jr-card.feature h3{font-size:clamp(1.45rem,3vw,2rem)}
.jr-card.feature .dek{font-size:1.04rem}
.jr-no{font-size:.82rem;font-weight:800;color:var(--accent);letter-spacing:.08em;padding-top:.3rem}
.jr-card h3{font-size:1.32rem;font-weight:800;letter-spacing:-.022em;line-height:1.2}
.jr-card .dek{color:#34343a;font-size:.97rem;line-height:1.6;margin-top:.5rem}
.jr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted);margin-top:.85rem}
.jr-meta .sep{opacity:.4}
.jr-live{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.jr-live .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
.jr-go{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-size:.87rem;font-weight:700;
  color:var(--accent);transition:gap .3s}
.jr-card:hover .jr-go{gap:.65rem}

/* ---------- still being written ---------- */
.jr-soon{border-top:1px solid var(--line)}
.jr-soon-item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;
  padding:1.15rem .2rem;border-bottom:1px solid var(--line-soft)}
.jr-soon-item .n{font-size:.8rem;font-weight:700;color:var(--muted);min-width:24px;padding-top:.15rem}
.jr-soon-item .t{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:#3a3a40;line-height:1.32}
.jr-soon-item .d{display:block;font-weight:400;font-size:.9rem;color:var(--muted);margin-top:.25rem;line-height:1.5}
.jr-soon-item .st{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:var(--bg-alt);border:1px solid var(--line-soft);padding:.28rem .6rem;border-radius:50px;white-space:nowrap}

/* ---------- essay page ---------- */
.readbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--l1),var(--l2),var(--l3),var(--l4));transition:width .1s linear}
.art{padding:calc(74px + 3.2rem) 0 0}
.art-wrap{max-width:768px;margin:0 auto;padding:0 2.5rem}
.art-head{margin-bottom:2.4rem}
.art-series{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:.4rem .9rem;border-radius:50px;margin-bottom:1.25rem}
.art h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.035em;line-height:1.09}
.art-dek{font-family:'Newsreader',Georgia,serif;font-size:clamp(1.12rem,2.1vw,1.4rem);line-height:1.5;color:#3a3a40;margin-top:1.15rem}
.art-byline{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.6rem;padding-top:1.35rem;
  border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.art-byline .who{font-weight:700;color:var(--ink)}
.art-byline .sep{opacity:.4}

/* body: serif to read, sans to navigate */
.art-body{font-family:'Newsreader',Georgia,serif;font-size:1.16rem;line-height:1.72;color:#26262b;padding-bottom:1rem}
.art-body > * + *{margin-top:1.35rem}
.art-body h2{font-family:'Pretendard',-apple-system,sans-serif;font-size:1.5rem;font-weight:800;
  letter-spacing:-.025em;line-height:1.2;margin-top:3rem}
.art-body h3{font-family:'Pretendard',-apple-system,sans-serif;font-size:1.14rem;font-weight:800;
  letter-spacing:-.015em;margin-top:2.2rem}
.art-body strong{font-weight:600;color:var(--ink)}
.art-body a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:background .2s}
.art-body a:hover{background:rgba(var(--accent-rgb),.09)}
.art-body ul,.art-body ol{padding-left:1.35rem;display:flex;flex-direction:column;gap:.55rem}
.art-body li{padding-left:.25rem}
.art-body li::marker{color:var(--accent)}
.art-body hr{border:none;height:1px;background:var(--line);margin:2.8rem 0}
.art-body figure{margin:2.4rem 0}
.art-body figure img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.art-body figcaption{font-family:'Pretendard',-apple-system,sans-serif;font-size:.83rem;color:var(--muted);
  margin-top:.7rem;line-height:1.5}

/* the four blocks you'll reach for while writing */
.pull{font-family:'Newsreader',Georgia,serif;font-size:clamp(1.32rem,2.6vw,1.7rem);line-height:1.34;font-weight:500;
  letter-spacing:-.015em;color:var(--ink);padding-left:1.5rem;border-left:3px solid var(--accent);margin:2.6rem 0}
.note{font-family:'Pretendard',-apple-system,sans-serif;font-size:.95rem;line-height:1.65;color:#34343a;
  background:var(--bg-alt);border:1px solid var(--line-soft);border-radius:14px;padding:1.25rem 1.4rem;margin:2.2rem 0}
.note b{display:block;font-size:.73rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.45rem}
.mk-inline{background:linear-gradient(180deg,transparent 60%,rgba(var(--marker-rgb),.34) 60%);padding:0 .06em}
.draft{font-family:'Pretendard',-apple-system,sans-serif;font-size:.92rem;line-height:1.62;color:#6b4a10;
  background:repeating-linear-gradient(45deg,rgba(var(--marker-rgb),.15) 0 10px,rgba(var(--marker-rgb),.06) 10px 20px);
  border:1px dashed rgba(var(--l4-rgb),.55);border-radius:12px;padding:1.05rem 1.25rem;margin:1.5rem 0}
.draft b{display:block;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#9a6a10;margin-bottom:.35rem}

/* ---------- essay footer ---------- */
.art-foot{margin-top:3.2rem;padding-top:2rem;border-top:1px solid var(--line)}
.art-foot .lbl{font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.art-share{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.4rem}
.art-nav a,.art-nav span{display:block;border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.3rem;
  background:#fff;transition:.3s}
.art-nav a:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.08)}
.art-nav .dir{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.art-nav .ttl{font-weight:700;font-size:1rem;letter-spacing:-.01em;line-height:1.3;margin-top:.4rem}
.art-nav .next{text-align:right}
.art-nav span{opacity:.5}

/* ---------- journal on a phone ---------- */
@media(max-width:768px){
  .page-hero{padding:calc(env(safe-area-inset-top) + 5rem) 0 1.8rem}
  .page-hero h1{font-size:clamp(1.8rem,7.4vw,2.4rem)}
  .page-hero .dek{font-size:1.03rem;margin-top:.9rem}
  .crumb{margin-bottom:1rem;font-size:.8rem}
  .jr-grid{gap:.7rem}
  .jr-card{grid-template-columns:1fr;gap:.45rem;padding:1.35rem 1.15rem;border-radius:16px}
  .jr-card:hover{transform:none}
  .jr-no{padding-top:0;font-size:.75rem}
  .jr-card h3,.jr-card.feature h3{font-size:1.16rem}
  .jr-card .dek,.jr-card.feature .dek{font-size:.91rem;margin-top:.4rem}
  .jr-meta{font-size:.76rem;margin-top:.7rem}
  .jr-soon-item{grid-template-columns:auto 1fr;gap:.7rem;padding:.95rem .1rem}
  .jr-soon-item .st{grid-column:2;justify-self:start;margin-top:.55rem}
  .jr-soon-item .t{font-size:.96rem}
  .jr-soon-item .d{font-size:.85rem}

  .art{padding:calc(env(safe-area-inset-top) + 4.6rem) 0 0}
  .art-wrap{padding:0 var(--gut)}
  .art-head{margin-bottom:1.9rem}
  .art h1{font-size:clamp(1.72rem,7.2vw,2.3rem)}
  .art-dek{font-size:1.03rem;margin-top:.9rem}
  .art-byline{font-size:.8rem;margin-top:1.3rem;padding-top:1.1rem}
  .art-body{font-size:1.07rem;line-height:1.72}
  .art-body h2{font-size:1.22rem;margin-top:2.3rem}
  .art-body h3{font-size:1.03rem;margin-top:1.8rem}
  .art-body figure{margin:1.8rem 0}
  .pull{font-size:1.18rem;padding-left:1rem;margin:2rem 0}
  .note,.draft{padding:1rem 1.1rem;font-size:.89rem}
  .art-foot{margin-top:2.4rem;padding-top:1.6rem}
  .art-nav{grid-template-columns:1fr;gap:.65rem;margin-top:1.8rem}
  .art-nav .next{text-align:left}
  .art-nav a:hover{transform:none}
  .readbar{top:env(safe-area-inset-top)}
}

/* ---------- the featured essay card is a link now ---------- */
a.feature-essay{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
a.feature-essay:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.13)}
a.feature-essay .jr-go{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.2rem;
  font-size:.88rem;font-weight:700;color:var(--accent);transition:gap .3s}
a.feature-essay:hover .jr-go{gap:.65rem}
button.chip{font-family:inherit;cursor:pointer;line-height:inherit}
@media(hover:none){a.feature-essay:hover{transform:none;box-shadow:none}}
@media(max-width:768px){a.feature-essay .jr-go{margin-top:1rem;font-size:.84rem}}