/* =========================================================================
   Bento Studio — design system
   Neutral near-white ground · near-black ink · single cool gray-violet accent
   Helvetica Neue + PingFang (system stacks, zero load)
   ========================================================================= */

:root{
  --bg:        #f5f5f4;   /* neutral ground */
  --bg-alt:    #ffffff;   /* lighter band for rhythm */
  --ink:       #1a1a1a;   /* near-black text */
  --ink-2:     #5e5e5c;   /* secondary text */
  --ink-3:     #9a9a97;   /* tertiary / placeholder */
  --line:      rgba(26,26,26,.12);
  --line-soft: rgba(26,26,26,.07);
  --accent:    #5b5b6b;   /* cool gray-violet — used sparingly */
  --accent-ink:#3c3c48;
  --hero-bg:   #000000;   /* pure black ground for hero / inserted media */

  --sans: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --nav-h: 68px;
  --maxw: 1680px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --grid-gap: 2px;        /* tight, near-seamless work grid */

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .7s var(--ease);
  --med:  .42s var(--ease);
  --fast: .24s var(--ease);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  line-height:1.5; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* keyboard focus only */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }

/* ============================ TYPOGRAPHY ============================ */
.eyebrow{
  font-family:var(--mono); font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
}
.section-title{
  font-size:clamp(30px,5vw,60px); line-height:1.02;
  letter-spacing:-.02em; font-weight:500; margin:0;
}
.display{
  font-size:clamp(28px,4.4vw,56px); line-height:1.05;
  letter-spacing:-.018em; font-weight:400;
}

/* ============================== NAV =============================== */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:60;
  display:flex; align-items:center;
  transition:background var(--med), border-color var(--med), backdrop-filter var(--med);
  border-bottom:1px solid transparent;
}
.nav .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; }
.nav .brand{ justify-self:start; grid-column:1; }
.nav .nav-links{ grid-column:2; }
.nav .nav-tools{ justify-self:end; grid-column:3; }
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line-soft);
}

/* color scheme: over dark hero = light text; scrolled = dark text */
.nav{ --nc:#f4f4f4; --nc-dim:rgba(244,244,244,.62); }
.nav.scrolled{ --nc:var(--ink); --nc-dim:var(--ink-2); }
/* over bright hero media = dark text (set adaptively by hero.js) */
.nav.over-light:not(.scrolled){ --nc:#1a1a1a; --nc-dim:rgba(26,26,26,.6); }

.brand{
  display:flex; align-items:center; gap:10px; height:36px; color:var(--nc);
  transition:color var(--med);
}
.brand .logo-slot{
  height:30px; min-width:30px; display:flex; align-items:center;
}
.brand .wordmark{
  font-weight:600; letter-spacing:.18em; font-size:13px; white-space:nowrap;
}
.brand img{ height:30px; width:auto; }

.nav-links{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,30px); }
.nav-link{
  position:relative; color:var(--nc-dim); font-size:13.5px; letter-spacing:.04em;
  padding:6px 0; transition:color var(--fast); background:none; border:none;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right var(--med);
}
.nav-link:hover, .nav-link.active{ color:var(--nc); }
.nav-link:hover::after, .nav-link.active::after{ right:0; }

.nav-tools{ display:flex; align-items:center; gap:clamp(10px,1.6vw,20px); }
.lang-switch{ display:flex; align-items:center; gap:7px; color:var(--nc-dim); font-size:13px; }
.lang-switch button{
  background:none; border:none; color:inherit; font-size:13px; letter-spacing:.04em;
  padding:2px; opacity:.6; transition:opacity var(--fast), color var(--fast);
}
.lang-switch button.on{ opacity:1; color:var(--nc); }
.lang-switch .sep{ opacity:.35; }

.nav .edit-btn{
  color:var(--nc-dim); font-size:13.5px; letter-spacing:.04em; background:none;
  border:none; padding:6px 0; position:relative; transition:color var(--fast);
}
.nav .edit-btn::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right var(--med);
}
.nav .edit-btn:hover{ color:var(--nc); }
.nav .edit-btn:hover::after{ right:0; }
.nav .edit-btn.editing{ color:var(--accent); opacity:1; }
.nav.scrolled .edit-btn.editing{ color:var(--accent); }

/* hamburger */
.hamburger{ display:none; width:34px; height:34px; background:none; border:none; position:relative; }
.hamburger span{
  position:absolute; left:7px; right:7px; height:1.5px; background:var(--nc);
  transition:transform var(--med), opacity var(--fast); transition-property:transform,opacity,top;
}
.hamburger span:nth-child(1){ top:11.25px; }
.hamburger span:nth-child(2){ top:16.25px; }
.hamburger span:nth-child(3){ top:21.25px; }
body.menu-open .hamburger span:nth-child(1){ top:16.25px; transform:rotate(45deg); }
body.menu-open .hamburger span:nth-child(2){ opacity:0; }
body.menu-open .hamburger span:nth-child(3){ top:16.25px; transform:rotate(-45deg); }

/* mobile drawer */
.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:55; background:var(--bg);
  display:flex; flex-direction:column; gap:4px; padding:36px var(--gutter);
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity var(--med), transform var(--med);
}
body.menu-open .mobile-menu{ opacity:1; transform:none; pointer-events:auto; }
.mobile-menu a, .mobile-menu button{
  font-size:26px; letter-spacing:-.01em; color:var(--ink); padding:12px 0;
  border-bottom:1px solid var(--line-soft); text-align:left; background:none; border-left:none; border-right:none; border-top:none;
}
/* tools stack as two full-width rows, like the nav links */
.mobile-menu .m-tools{ display:flex; flex-direction:column; gap:0; margin-top:8px; align-items:stretch; }
/* language switch = one full-width row with a single continuous underline */
.mobile-menu .lang-switch{
  display:flex; align-items:center; gap:10px; width:100%;
  font-size:26px; letter-spacing:-.01em; color:var(--ink);
  padding:12px 0; border-bottom:1px solid var(--line-soft);
}
.mobile-menu .lang-switch button{
  border:none; padding:0; font-size:26px; background:none; opacity:.4; color:var(--ink);
}
.mobile-menu .lang-switch button.on{ opacity:1; }
.mobile-menu .lang-switch .sep{ opacity:.3; }
.mobile-menu #editBtnM{ width:100%; border-bottom:none; }

/* ============================== HERO ============================== */
.hero{
  position:relative; height:100svh; min-height:560px; width:100%;
  background:var(--hero-bg); overflow:hidden;
}
/* nav text adapts its color to the hero media brightness (set by hero.js):
   .nav.over-light flips the light nav text to dark when the top of the
   active hero media is bright. The particle hero stays dark → light text. */
.hero-track{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ease);
  pointer-events:none;
}
.hero-slide.active{ opacity:1; pointer-events:auto; }
.hero-slide.has-link{ cursor:pointer; }
.hero-slide video{ width:100%; height:100%; object-fit:cover; }
.hero-media{ position:absolute; inset:0; background:#000; }

/* programmatic placeholder "film" */
.film{ position:absolute; inset:0; overflow:hidden; }
.film .grain{ position:absolute; inset:-10%; opacity:.05; mix-blend-mode:screen;
  background-image:url("assets/grain.svg"); background-size:260px; animation:grainShift 8s steps(6) infinite; }
.film .orb{
  position:absolute; border-radius:50%; filter:blur(2px);
  mix-blend-mode:screen; will-change:transform;
}
.film .edge{ position:absolute; inset:0; box-shadow:inset 0 0 200px 40px rgba(0,0,0,.55); }
.film .scan{ position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,.10);
  animation:scan 7s linear infinite; }
.film-label{
  position:absolute; left:var(--gutter); bottom:calc(var(--gutter) + 70px);
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:rgba(255,255,255,.55);
  text-transform:uppercase;
}
.film-label .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#ff5f57; margin-right:8px; vertical-align:middle; }

@keyframes grainShift{ to{ transform:translate(6%,4%); } }
@keyframes scan{ 0%{ top:-2%; } 100%{ top:102%; } }

/* hero intro copy */
.hero-intro{
  position:absolute; left:var(--gutter); top:38%; transform:translateY(-50%);
  z-index:3; max-width:min(720px,80vw); color:#f3f3f3;
}
.hero-intro .eyebrow{ color:rgba(243,243,243,.6); }
.hero-intro .display{ color:#fff; margin:14px 0 0; text-wrap:balance; }

/* progress capsule */
.hero-progress{
  position:absolute; left:50%; bottom:calc(var(--gutter) - 4px); transform:translateX(-50%);
  z-index:5; display:flex; align-items:center; gap:9px;
  padding:9px 14px; border-radius:999px;
  background:rgba(20,20,22,.42); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10);
}
.hp-item{ height:6px; border-radius:999px; background:rgba(255,255,255,.28); cursor:pointer;
  transition:width var(--med), background var(--med); flex:0 0 auto; }
.hp-item.dot{ width:6px; }
.hp-item.bar{ width:46px; position:relative; overflow:hidden; background:rgba(255,255,255,.20); }
.hp-item.bar .fill{ position:absolute; inset:0; width:0; background:#fff; border-radius:999px; }
.hp-item:hover{ background:rgba(255,255,255,.5); }

/* scroll hint */
.scroll-hint{
  position:absolute; left:50%; bottom:clamp(22px,3vh,34px); transform:translateX(-50%); z-index:6;
  width:26px; height:16px; opacity:.7; transition:opacity var(--med);
  color:#fff; background:none; border:none; padding:0;
}
.scroll-hint svg{ width:100%; height:100%; display:block; animation:bob 2.4s var(--ease) infinite; }
.scroll-hint:hover{ opacity:1; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
body.scrolled-past .scroll-hint{ opacity:0; pointer-events:none; }

/* hero empty state */
.hero-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.4); font-family:var(--mono); font-size:13px; letter-spacing:.18em; }

/* ============================ WORK SECTION ============================ */
.work{ padding:clamp(64px,9vw,128px) 0 clamp(48px,7vw,96px); background:var(--bg); }
.work-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:clamp(28px,4vw,52px); }
.work-head .sub{ color:var(--ink-3); font-size:14px; }

.grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--grid-gap);
}
/* home "selected work": 3 per row, 16:9 frames, seamless (no gaps) */
.grid--home{ grid-template-columns:repeat(3,1fr); gap:0; background:#ececea; }
.grid--home .cell{ aspect-ratio:16/9; }
.grid--home .add-cell{ aspect-ratio:16/9; }
/* selected-work grid: no persistent corner caption (hover overlay only) */
.grid--home .mcap{ display:none !important; }
.cell{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:#ececea;
  cursor:pointer;
}
.cell .cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cell .cover img, .cell .cover video{ width:100%; height:100%; object-fit:cover; }
/* empty (pre-upload) frame: pure light-gray, name set in the title typeface */
.cell .cover--empty{ display:flex; align-items:center; justify-content:center; background:#ececea; padding:18px; }
.cell .cover--empty .ph-name{
  font-family:var(--sans); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(15px,1.5vw,22px); color:#b6b6b2; text-align:center; text-wrap:balance;
}
.cell .overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(14,14,16,0); opacity:0; transition:background var(--med), opacity var(--med);
  padding:20px; text-align:center;
}
.cell:hover .overlay{ background:rgba(14,14,16,.26); opacity:1; }
.cell .overlay .pname{ color:#fff; font-family:var(--sans); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(15px,1.5vw,22px); }
.cell .overlay .pname{ transform:none; }
.cell .overlay img{ max-width:54%; max-height:46%; filter:brightness(0) invert(1); }
/* mobile: persistent caption */
.cell .mcap{ display:none; }

.view-all{ display:flex; justify-content:center; margin-top:clamp(40px,6vw,72px); }
.btn-outline{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px; border:1px solid var(--line); border-radius:2px;
  font-size:13.5px; letter-spacing:.06em; color:var(--ink); background:none;
  transition:border-color var(--fast), color var(--fast), gap var(--fast);
}
.btn-outline:hover{ border-color:var(--ink); gap:16px; }
.btn-outline .arr{ width:14px; height:14px; }

.empty-state{ grid-column:1/-1; padding:80px 0; text-align:center; color:var(--ink-3);
  font-family:var(--mono); font-size:13px; letter-spacing:.14em; }

/* ============================== FOOTER ============================== */
.footer{ background:var(--bg); padding-top:clamp(60px,8vw,110px); }
.footer .rule{ height:1px; background:var(--line); }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center;
  padding:clamp(40px,5vw,64px) 0 clamp(36px,5vw,56px);
}
.footer .f-head{ font-family:var(--sans); font-size:14px; letter-spacing:.01em; color:var(--ink);
  font-weight:400; margin:0 0 22px; }
.footer .brand-line{ font-size:clamp(20px,2.6vw,30px); letter-spacing:-.01em; margin:0 0 14px; }
.footer a.mail{ font-size:clamp(15px,1.6vw,19px); color:var(--ink); position:relative; }
.footer a.mail::after{ content:""; position:absolute; left:0; bottom:-2px; right:100%; height:1px; background:currentColor; transition:right var(--med); }
.footer a.mail:hover::after{ right:0; }
.footer-nav{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.footer-nav a, .footer-nav button{ color:var(--ink-2); font-size:14px; background:none; border:none; padding:0; text-align:left; transition:color var(--fast); }
.footer-nav a:hover, .footer-nav button:hover{ color:var(--ink); }
.footer-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:22px 0 30px; border-top:1px solid var(--line-soft); color:var(--ink-3); font-size:12.5px; }

/* ========================= BACK TO TOP ========================= */
.to-top{
  position:fixed; right:clamp(18px,2.4vw,34px); bottom:clamp(18px,2.4vw,34px); z-index:50;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  opacity:0; transform:translateY(10px) scale(.92); pointer-events:none;
  transition:opacity var(--med), transform var(--med), border-color var(--fast);
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:var(--ink); transform:translateY(-2px); }
.to-top svg{ width:16px; height:16px; }

/* ========================= HERO SOUND TOGGLE ========================= */
/* shares the exact corner slot & shape of .to-top; appears only while a hero
   video is active near the top, so it never coexists with back-to-top. */
.sound-toggle{
  position:fixed; right:clamp(18px,2.4vw,34px); bottom:clamp(18px,2.4vw,34px); z-index:50;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); color:#fff;
  background:rgba(0,0,0,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px) scale(.92); pointer-events:none;
  transition:opacity var(--med), transform var(--med), border-color var(--fast), color var(--fast);
}
/* over bright hero media → dark ink to stay legible */
body.hero-media-light .sound-toggle{ border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.4); }
/* visible only when a hero video is playing, near the top, outside edit mode */
body.hero-has-video:not(.scrolled-past):not(.editmode) .sound-toggle{
  opacity:1; transform:none; pointer-events:auto;
}
.sound-toggle:hover{ border-color:currentColor; transform:translateY(-2px); }
.sound-toggle svg{ width:18px; height:18px; }
.sound-toggle .ic-on{ display:none; }
.sound-toggle.on .ic-on{ display:block; }
.sound-toggle.on .ic-muted{ display:none; }

/* ========================= EDIT ENTRY FAB (desktop bottom-right) ========================= */
.edit-fab{
  position:fixed; right:clamp(18px,2.4vw,34px); bottom:calc(clamp(18px,2.4vw,34px) + 58px); z-index:51;
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.45);
  background:transparent; color:#fff; padding:0;
  opacity:0; transform:translateY(4px);
  transition:opacity var(--med), transform var(--med), border-color var(--fast), color var(--fast);
}
/* over light content (scrolled past the dark hero): dark ink */
body.scrolled-past .edit-fab{ border-color:var(--line); color:var(--ink); }
/* over bright hero media (adaptive, same as nav/sound): dark ink */
body.hero-media-light:not(.scrolled-past) .edit-fab{ border-color:var(--line); color:var(--ink); }
@media (min-width:1024px){ .edit-fab{ display:inline-flex; } }
.edit-fab svg{ width:16px; height:16px; }
/* hidden until the pointer comes near the corner; an oversized hover catcher reveals it */
.edit-fab::before{ content:""; position:absolute; inset:-46px -46px -10px -46px; }
.edit-fab:hover, .edit-fab:focus-visible{ opacity:1; transform:none; }
.edit-fab:hover{ border-color:currentColor; }
body.editmode .edit-fab{ display:none !important; }

/* ============================ EDIT MODE ============================ */
.edit-only{ display:none !important; }
body.editmode .edit-only{ display:inline-flex !important; }
body.editmode .edit-only.block{ display:block !important; }

body.editmode [data-bind]{
  outline:1px dashed transparent; outline-offset:3px; border-radius:2px;
  transition:outline-color var(--fast), background var(--fast);
}
body.editmode [data-bind]:hover{ outline-color:var(--accent); }
body.editmode [data-bind][contenteditable="true"]:focus{
  outline:1px solid var(--accent); background:rgba(91,91,107,.06);
}

/* edit toolbar */
.edit-bar{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(140%);
  z-index:80; display:flex; align-items:center; gap:6px; width:max-content; max-width:calc(100vw - 24px);
  padding:8px; border-radius:12px; background:#16161a; color:#eee;
  box-shadow:0 18px 50px rgba(0,0,0,.35); transition:transform var(--med);
  font-size:13px;
}
body.editmode .edit-bar{ transform:translateX(-50%); }
/* desktop: anchor the edit area to the bottom-right corner (above back-to-top) */
@media (min-width:300px){
  body.editmode .to-top{ bottom:calc(clamp(18px,2.4vw,34px) + 58px); }
}
.edit-bar .grp{ display:flex; gap:5px; align-items:center; }
.edit-bar .eb-controls{ display:flex; gap:5px; align-items:center; }
.edit-bar .sep{ width:1px; height:20px; background:rgba(255,255,255,.14); margin:0 3px; align-self:center; }
.edit-bar button{
  height:34px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); color:#eee;
  padding:0 13px; border-radius:7px; font-size:12.5px; letter-spacing:.02em;
  transition:background var(--fast), border-color var(--fast);
}
.edit-bar button:hover{ background:rgba(255,255,255,.16); }
.edit-bar .eb-hero button{ width:34px; padding:0; }
.edit-bar .eb-hero button svg{ width:15px; height:15px; }
.edit-bar .badge{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:#9a9aa6;
  padding-left:6px; text-transform:uppercase; }
/* hero media controls live in the edit bar (act on the current hero slide) */
.eb-hero #ebAddHero{ width:34px; padding:0; }
/* hero controls only while the hero is in view (top of home); collapse smoothly
   on scroll using a grid 1fr->0fr track (animates the REAL content width — no
   dead travel like max-width had). */
.edit-bar .eb-hero{
  display:grid; grid-template-columns:1fr; min-width:0;
  opacity:1; transform:translateX(0);
  transition:grid-template-columns var(--med), opacity var(--med), transform var(--med), margin var(--med);
}
.eb-hero-inner{ display:flex; align-items:center; gap:5px; overflow:hidden; min-width:0; }
.eb-hero-sep{
  overflow:hidden; max-width:1px; opacity:1;
  transition:max-width var(--med), opacity var(--med), margin var(--med);
}
body.scrolled-past .eb-hero{
  grid-template-columns:0fr; opacity:0; transform:translateX(-4px);
  margin-left:-6px; pointer-events:none;
}
body.scrolled-past .eb-hero-sep{ max-width:0; opacity:0; margin-left:-6px; }

/* per-item edit controls */
.cell .cell-tools, .hp-edit, .hero-edit-tools{ }
.media-tools{
  position:absolute; top:8px; left:8px; right:8px; z-index:6;
  display:none; gap:6px; justify-content:flex-end;
}
body.editmode .cell:hover .media-tools, body.editmode .hero-slide.active .media-tools{ display:flex; }
.media-tools button{
  background:rgba(0,0,0,.62); color:#fff; border:none; border-radius:6px;
  width:30px; height:30px; font-size:14px; display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.media-tools button:hover{ background:#000; }
.media-tools button svg{ width:15px; height:15px; }
/* allow tools to wrap to a 2nd row on narrow cells instead of overflowing */
.media-tools{ flex-wrap:wrap; }
.add-cell{
  display:none; aspect-ratio:4/5; align-items:center; justify-content:center;
  border:1px dashed var(--line); color:var(--ink-3); background:none; font-size:30px; font-weight:200;
}
body.editmode .add-cell{ display:flex; }
.add-cell:hover{ border-color:var(--accent); color:var(--accent); }

/* dialogs */
.modal-back{
  position:fixed; inset:0; z-index:90; background:rgba(14,14,16,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.modal-back.show{ display:flex; }
.modal{
  background:var(--bg-alt); color:var(--ink); width:min(420px,100%); border-radius:14px;
  padding:30px; box-shadow:0 30px 80px rgba(0,0,0,.3);
}
.modal h3{ margin:0 0 6px; font-size:19px; font-weight:500; letter-spacing:-.01em; }
.modal p{ margin:0 0 20px; color:var(--ink-2); font-size:13.5px; }
.modal input[type=password], .modal input[type=text]{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:8px;
  font-family:var(--sans); font-size:15px; background:var(--bg); color:var(--ink); margin-bottom:14px;
}
.modal input:focus{ outline:none; border-color:var(--accent); }
.modal .row{ display:flex; gap:10px; justify-content:flex-end; }
.modal button{ padding:11px 20px; border-radius:8px; font-size:13.5px; border:1px solid var(--line); background:none; white-space:nowrap; }
.modal button.primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.modal .err{ color:#c0392b; font-size:12.5px; min-height:16px; margin-top:-6px; margin-bottom:8px; }
.modal .path-hint{ font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--ink-3);
  letter-spacing:.01em; word-break:break-all; margin:-4px 0 18px; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(16px);
  z-index:95; background:#16161a; color:#fff; padding:11px 20px; border-radius:999px;
  font-size:13px; opacity:0; pointer-events:none; transition:opacity var(--fast), transform var(--fast);
}
.toast.show{ opacity:1; transform:translateX(-50%); }

/* drag state */
.cell.dragging, .hp-item.dragging{ opacity:.4; }
.cell.drop-target{ outline:2px solid var(--accent); outline-offset:-2px; }

/* hidden file input */
.hidden-file{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1279px){ .grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:1023px){
  .grid{ grid-template-columns:repeat(3,1fr); }
  .grid--home{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ display:none; }
  .hamburger{ display:block; }
  .nav-tools .desktop-only{ display:none; }
  /* mobile top bar: lang-switch text matches the wordmark (same size/weight/tracking) */
  .nav-tools .nav-lang, .nav-tools .nav-lang button{ font-size:13px; font-weight:600; letter-spacing:.18em; }
  .nav-tools .nav-lang .sep{ font-weight:400; letter-spacing:0; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:767px){
  :root{ --grid-gap:1px; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .hero-intro{ top:auto; bottom:140px; transform:none; }
  .cell .mcap{ display:block; position:absolute; left:8px; bottom:8px; z-index:2;
    color:#fff; font-size:11px; letter-spacing:.02em; text-shadow:0 1px 6px rgba(0,0,0,.6); }
  .cell .overlay{ display:none; }
  /* edit bar: two stacked rows that each hug their content; fit-content keeps
     the gray fill exactly as wide as the widest row -> equal 8px on all sides. */
  .edit-bar{
    flex-direction:column; align-items:center; flex-wrap:nowrap; row-gap:0; column-gap:0;
    left:50%; right:auto; transform:translateX(-50%) translateY(160%);
    width:fit-content; max-width:calc(100vw - 32px); padding:8px;
  }
  body.editmode .edit-bar{ transform:translateX(-50%); }
  .edit-bar .badge{ display:none; }
  .edit-bar .sep{ display:none; }
  .edit-bar .grp{ gap:6px; }
  .edit-bar .eb-controls{ gap:6px; }
  .edit-bar button{ height:34px; padding:0 10px; font-size:11.5px; white-space:nowrap; }
  .edit-bar .eb-hero button, .edit-bar #ebAddHero{ width:34px; padding:0; }
  /* hero tools are the top row — collapse VERTICALLY (no horizontal width
     animation); the controls row simply rises as it slides up + fades. */
  .edit-bar .eb-hero{
    grid-template-columns:1fr; grid-template-rows:1fr;
    transition:grid-template-rows var(--med), opacity var(--med), transform var(--med), margin var(--med);
    transform:translateY(0); margin:0 0 6px 0;
  }
  body.scrolled-past .edit-bar .eb-hero{
    grid-template-columns:1fr; grid-template-rows:0fr;
    transform:translateY(-6px); margin:0;
  }
  .eb-hero-sep{ display:none; }
  /* mobile hero: minimal progress (no capsule frame), arrow moved to far right */
  .hero-progress{ padding:0; background:none; border:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    bottom:20px; }
  /* arrow shares the same horizontal line as the progress dots (centers aligned) */
  .scroll-hint{ display:none; }
}
@media (max-width:479px){
  .grid{ grid-template-columns:repeat(1,1fr); }
  .grid--home{ grid-template-columns:repeat(1,1fr); }
  .cell{ aspect-ratio:1/1; }
  .grid--home .cell{ aspect-ratio:16/9; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .hero-slide{ transition:opacity .2s linear; }
  .scroll-hint svg{ animation:none; }
}

/* ============================ INNER PAGES ============================ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.inner-page .nav{
  --nc:var(--ink); --nc-dim:var(--ink-2);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line-soft);
}
.inner-page main{ min-height:70vh; }
.inner-page .mobile-menu [aria-current="page"]{ color:var(--accent); }
.page-hero{
  padding:calc(var(--nav-h) + clamp(76px,10vw,150px)) 0 clamp(74px,9vw,138px);
  border-bottom:1px solid var(--line);
}
.page-hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.88fr);
  align-items:end; gap:clamp(42px,8vw,150px);
}
.page-kicker{
  margin:0 0 28px; font-family:var(--mono); font-size:11px; line-height:1.4;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.page-title{
  margin:0; font-size:clamp(30px,5vw,60px); line-height:1.02;
  font-weight:500; letter-spacing:-.02em;
}
.page-lead{
  max-width:760px; margin:0; font-size:clamp(22px,2.75vw,42px);
  line-height:1.25; letter-spacing:-.025em; text-wrap:balance;
}
.page-lead--wide{ max-width:920px; }

/* Work index */
.work-index{ padding:clamp(58px,7vw,104px) 0 clamp(92px,11vw,170px); }
.index-head{
  display:flex; justify-content:space-between; align-items:center; gap:28px;
  padding-bottom:28px; border-bottom:1px solid var(--line);
}
.work-filter{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 26px; }
.filter-item{
  position:relative; padding:5px 0; border:0; background:none; color:var(--ink-3);
  font-size:13px; letter-spacing:.06em; transition:color var(--fast);
}
.filter-item::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right var(--med);
}
.filter-item:hover,.filter-item.on{ color:var(--ink); }
.filter-item.on::after,.filter-item:hover::after{ right:0; }
.index-note{ margin:0; max-width:420px; color:var(--ink-3); font-size:12.5px; text-align:right; }
.grid--work{
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  margin-top:clamp(32px,4vw,56px); background:#dededb;
}
.grid--work .cell{ aspect-ratio:16/9; }
.cell--static{ cursor:default; }
.cell--static:focus-visible{ outline-offset:-3px; }

/* Shared editorial sections */
.content-section{ border-bottom:1px solid var(--line); padding:clamp(76px,9vw,142px) 0; }
.content-section--alt{ background:var(--bg-alt); }
.about-profile-grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr);
  gap:clamp(44px,9vw,150px); align-items:center;
}
.about-profile-copy .page-lead{ margin-top:clamp(40px,6vw,88px); }
.about-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(34px,5vw,62px); }
.about-portrait{ margin:0; aspect-ratio:4/5; overflow:hidden; background:#fff; }
.about-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.numbered-grid{
  display:grid; grid-template-columns:90px minmax(220px,.62fr) minmax(0,1.38fr);
  gap:clamp(28px,5vw,90px); align-items:start;
}
.section-no{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-3);
}
.content-heading{
  margin:0; font-size:clamp(28px,3.8vw,54px); line-height:1; font-weight:500; letter-spacing:-.035em;
}
.content-copy{
  margin:0; max-width:860px; font-size:clamp(22px,2.7vw,38px); line-height:1.34;
  letter-spacing:-.022em; text-wrap:balance;
}
.capability-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(36px,7vw,110px); }
.capability-grid h3{
  margin:0 0 24px; padding-bottom:12px; border-bottom:1px solid var(--line);
  font-size:13px; font-weight:400; color:var(--ink-3);
}
.plain-list{ list-style:none; margin:0; padding:0; }
.plain-list li{ padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:clamp(17px,1.6vw,22px); }
.timeline{ border-top:1px solid var(--line); }
.timeline-row{
  display:grid; grid-template-columns:minmax(120px,.5fr) minmax(0,1fr);
  gap:28px; padding:27px 0; border-bottom:1px solid var(--line);
}
.timeline-year{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3); padding-top:5px; }
.timeline-row h3{ margin:0 0 6px; font-size:clamp(18px,1.8vw,24px); font-weight:400; letter-spacing:-.01em; }
.timeline-row p{ margin:0; color:var(--ink-3); font-size:13px; }

/* Shared next-step panel */
.page-cta{ background:var(--ink); color:#f4f4f2; padding:clamp(76px,9vw,142px) 0; }
.page-cta .page-kicker{ color:rgba(244,244,242,.48); }
.page-cta-grid{ display:grid; grid-template-columns:minmax(160px,.45fr) minmax(0,1.55fr); gap:clamp(36px,8vw,140px); }
.page-cta h2{
  max-width:1000px; margin:0 0 42px; font-size:clamp(34px,5.2vw,76px);
  line-height:1.04; font-weight:400; letter-spacing:-.04em; text-wrap:balance;
}
.text-link{
  display:inline-flex; align-items:center; gap:14px; padding-bottom:6px;
  border-bottom:1px solid currentColor; font-size:14px; letter-spacing:.06em;
  transition:gap var(--fast), opacity var(--fast);
}
.text-link:hover{ gap:22px; opacity:.72; }

/* Project case study */
.project-media-hero{
  padding-top:var(--nav-h); background:#050505; color:#fff;
}
.project-media-stage{
  position:relative; width:min(100% - clamp(40px,9vw,128px),1120px); margin:0 auto;
  aspect-ratio:16/9; min-height:0;
  overflow:hidden; background:#050505;
}
.project-video-slide{ position:absolute; inset:0; background:#050505; }
.project-video-slide[hidden]{ display:none; }
.project-video-slide video{
  display:block; width:100%; height:100%; object-fit:cover; background:#050505;
}
.project-media-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 55%,rgba(0,0,0,.7) 100%);
}
.project-media-ui{
  position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); bottom:clamp(62px,5vw,84px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
  pointer-events:none;
}
.project-media-label{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(255,255,255,.74);
}
.project-media-tabs{ display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); pointer-events:auto; }
.project-media-tabs button{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px;
  padding:8px 0; border:0; border-bottom:1px solid transparent; background:none;
  color:rgba(255,255,255,.52); font-size:11px; letter-spacing:.08em; transition:color var(--fast),border-color var(--fast);
}
.project-media-tabs button:hover,.project-media-tabs button.is-active{ color:#fff; border-bottom-color:#fff; }
.project-media-tabs span{ font-family:var(--mono); font-size:9px; }
.project-media-tabs b{ font-weight:400; }
.project-media-hero + .project-intro{ padding-top:clamp(30px,4vw,56px); }
.project-intro{
  padding:clamp(30px,4vw,56px) 0 clamp(34px,5vw,72px);
  border-bottom:1px solid var(--line);
}
.project-intro-grid{
  width:min(100%,1120px); margin:0 auto; padding-inline:clamp(20px,4.5vw,64px);
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:clamp(28px,5vw,72px); align-items:end;
}
.project-summary{
  max-width:760px; margin:18px 0 0;
  font-size:clamp(17px,1.5vw,22px); line-height:1.45; letter-spacing:-.018em;
  color:var(--ink-2); text-wrap:pretty;
}
.project-meta{ margin:0; border-top:1px solid var(--line); }
.project-meta-row{
  display:grid; grid-template-columns:110px minmax(0,1fr); gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
}
.project-meta dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.project-meta dd{ margin:0; font-size:13px; line-height:1.5; }
.project-gallery{ background:#10110f; }
.project-frame{ margin:0; line-height:0; }
.project-frame img{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; background:#10110f;
}
.project-return{ border-top:1px solid rgba(255,255,255,.12); }

@media (max-width:767px){
  .project-media-stage{ width:100%; min-height:0; aspect-ratio:16/9; }
  .project-media-ui{ left:18px; right:18px; bottom:48px; display:block; }
  .project-media-label{ display:none; }
  .project-media-tabs{ justify-content:space-between; gap:12px; }
  .project-media-tabs button{ gap:5px; font-size:9.5px; }
  .project-media-hero + .project-intro{ padding-top:32px; }
  .project-intro{ padding-top:32px; }
  .project-intro-grid{ grid-template-columns:1fr; align-items:start; gap:44px; }
  .project-summary{ font-size:clamp(17px,5vw,21px); }
  .project-meta-row{ grid-template-columns:92px minmax(0,1fr); }
}

/* Contact */
.contact-panel{ padding:clamp(72px,9vw,142px) 0; border-bottom:1px solid var(--line); }
.contact-panel .section-no{ margin-bottom:clamp(34px,5vw,76px); }
.contact-email{
  display:inline-block; max-width:100%; font-size:clamp(28px,5.2vw,82px); line-height:1.05;
  letter-spacing:-.045em; overflow-wrap:anywhere; border-bottom:1px solid transparent;
  transition:border-color var(--fast), color var(--fast);
}
.contact-email:hover{ color:var(--accent); border-bottom-color:currentColor; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(38px,5vw,68px); }
.btn-solid,.btn-quiet{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:0 22px; border:1px solid var(--ink); border-radius:2px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.btn-solid{ background:var(--ink); color:#fff; }
.btn-solid:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.btn-quiet{ background:transparent; }
.btn-quiet:hover{ border-color:var(--accent); color:var(--accent); }
.contact-facts{ padding:clamp(70px,8vw,122px) 0; }
.facts-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); }
.facts-grid article{ min-height:230px; padding:clamp(24px,3vw,44px); background:var(--bg); }
.facts-grid h2{ margin:0; max-width:360px; font-size:clamp(21px,2.3vw,34px); line-height:1.2; font-weight:400; letter-spacing:-.02em; }

@media (max-width:1023px){
  .page-hero-grid{ grid-template-columns:1fr; align-items:start; }
  .page-lead{ max-width:820px; }
  .grid--work{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .numbered-grid{ grid-template-columns:60px minmax(180px,.55fr) minmax(0,1.45fr); gap:28px; }
  .page-cta-grid{ grid-template-columns:1fr; gap:12px; }
  .about-profile-grid{ grid-template-columns:minmax(0,1fr) minmax(280px,.72fr); gap:44px; }
}
@media (max-width:767px){
  .page-hero{ padding-top:calc(var(--nav-h) + 64px); padding-bottom:68px; }
  .page-hero-grid{ gap:38px; }
  .page-kicker{ margin-bottom:18px; }
  .page-lead{ font-size:clamp(21px,6.7vw,31px); }
  .index-head{ align-items:flex-start; flex-direction:column; }
  .index-note{ text-align:left; }
  .grid--work{ margin-top:28px; }
  .numbered-grid{ grid-template-columns:1fr; gap:24px; }
  .content-copy{ font-size:clamp(21px,6.4vw,30px); }
  .capability-grid{ grid-template-columns:1fr; }
  .timeline-row{ grid-template-columns:1fr; gap:10px; }
  .page-cta h2{ margin-bottom:32px; }
  .facts-grid{ grid-template-columns:1fr; }
  .facts-grid article{ min-height:180px; }
  .about-profile-grid{ grid-template-columns:1fr; }
  .about-profile-copy .page-lead{ margin-top:34px; }
  .about-portrait{ width:min(100%,520px); aspect-ratio:1/1; }
}
@media (max-width:479px){
  .grid--work{ grid-template-columns:1fr; }
  .grid--work .cell{ aspect-ratio:16/9; }
  .contact-actions{ align-items:stretch; flex-direction:column; }
  .btn-solid,.btn-quiet{ width:100%; }
}