/* Tokyo venue sites v3. One stylesheet for every venue: the venue's palette, type preset and Motion Personality
   arrive as CSS variables on <html> (see build.py head()). Theme is locked per page (mode-dark | mode-light).
   Shape rule: buttons are pills, cards 16px, photos 12px, inputs 10px; the mincho preset is sharp (2px) throughout.
   Motion rule: transform + opacity only, IntersectionObserver reveals, everything collapses under reduced motion. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;--pad:clamp(16px,4.2vw,56px);--maxw:1320px;--r-btn:999px;--r-card:16px;--r-img:12px;--r-field:10px;
  --over:#f7f4ef;--field:color-mix(in srgb,var(--ground) 55%,var(--surface));--shadow:0 18px 50px -24px rgb(0 0 0/.55)}
html.type-mincho{--r-btn:2px;--r-card:2px;--r-img:2px;--r-field:2px}
html.mode-light{--shadow:0 22px 50px -28px color-mix(in srgb,var(--ink) 35%,transparent)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.8;font-weight:400;overflow-x:clip}
html.latin body{line-height:1.6}
.mode-dark body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.cjk p,.cjk dd{word-break:auto-phrase;line-break:strict}
/* headings: build.py wraps ja/zh phrases in .ph spans so lines break only between phrases (WebKit has no auto-phrase) */
.ph{display:inline-block;max-width:100%}
:lang(ko) .h2,:lang(ko) .hero-title,:lang(ko) h3,:lang(ko) .fact dd{word-break:keep-all}
.small{font-size:.875rem;color:var(--muted);line-height:1.7}
.skip{position:absolute;left:var(--pad);top:-60px;z-index:80;background:var(--accent);color:var(--on-accent);padding:.6em 1em;border-radius:var(--r-field);text-decoration:none}
.skip:focus{top:12px}

/* type */
.h2,.hero-title,.brand,.fact dd,.foot-name{font-family:var(--f-display);font-weight:var(--w-display)}
.h2{font-size:clamp(1.85rem,3.5vw,3rem);line-height:1.28;letter-spacing:.03em;text-wrap:balance;max-width:22ch;margin-bottom:.9em}
.latin .h2{line-height:1.06;letter-spacing:-.022em;max-width:18ch}
.type-heavy.cjk .h2{letter-spacing:.02em}
.type-mincho.latin .h2{font-size:clamp(2.2rem,4.2vw,3.6rem);letter-spacing:-.01em}
.lead{font-size:clamp(1.04rem,1.35vw,1.22rem);line-height:1.9;max-width:34em;text-wrap:pretty}
.latin .lead{line-height:1.6}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 1.35em;border-radius:var(--r-btn);
  font:700 .95rem/1.2 var(--f-body);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;
  transition:transform 120ms var(--ease),background-color 90ms linear,border-color 90ms linear,color 90ms linear,filter 90ms linear}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{filter:brightness(1.07)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--accent)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.hero-full .hero .btn-ghost{border-color:rgb(255 255 255/.6);color:var(--over);background:rgb(0 0 0/.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* header */
.bar{position:fixed;inset:0 0 auto;z-index:50;height:66px;display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:0 var(--pad);color:var(--ink);
  transition:background-color 220ms var(--ease),border-color 220ms var(--ease),color 220ms var(--ease);border-bottom:1px solid transparent}
.hero-full .bar:not(.solid){color:var(--over);background:linear-gradient(rgb(0 0 0/.42),rgb(0 0 0/0))}
.bar.solid{background:color-mix(in srgb,var(--ground) 86%,transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.brand{font-size:1.12rem;line-height:1.1;text-decoration:none;white-space:nowrap;letter-spacing:.02em;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:clamp(14px,1.8vw,30px);margin-inline-start:auto;font-size:.92rem;font-weight:500}
.nav a{text-decoration:none;opacity:.86;padding:.4em 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 200ms var(--ease),opacity 90ms linear}
.nav a:hover{opacity:1;background-size:100% 1px}
.langs{position:relative}
.langs summary{list-style:none;display:flex;align-items:center;gap:.4em;cursor:pointer;font-size:.88rem;min-height:44px;padding:0 .2em;opacity:.9}
.langs summary::-webkit-details-marker{display:none}
.langs-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:150px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);padding:6px;box-shadow:var(--shadow);display:grid}
.langs-menu a{padding:.55em .8em;border-radius:calc(var(--r-card) - 6px);text-decoration:none;font-size:.95rem}
.langs-menu a:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.langs-menu a[aria-current]{color:var(--accent);font-weight:700}
.bar-book{min-height:40px;padding:0 1.05em;font-size:.88rem}
@media (max-width:980px){.nav{display:none}.langs{margin-inline-start:auto}}
@media (max-width:420px){.langs summary span{display:none}.bar{gap:10px}}

/* sections */
main{display:block}
.sec{padding:clamp(64px,7.5vw,112px) var(--pad);max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto}
section[id]{scroll-margin-top:70px}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;color:var(--ink);isolation:isolate}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:var(--focal)}
.tagline{font-size:.95rem;font-weight:700;letter-spacing:.08em;margin:0 0 1.1em;color:var(--accent)}
.latin .tagline{letter-spacing:.04em}
.hero-title{font-size:clamp(2.3rem,5.3vw,4.7rem);line-height:1.18;letter-spacing:.03em;text-wrap:balance;max-width:15ch;margin:0 0 .45em}
.latin .hero-title{line-height:1.02;letter-spacing:-.03em;max-width:13ch}
.type-mincho.latin .hero-title{font-size:clamp(2.8rem,6.4vw,5.8rem);letter-spacing:-.015em}
.hero-sub{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.8;max-width:30em;margin:0 0 1.8em}
.latin .hero-sub{line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-full .hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-full .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgb(8 8 8/.86) 0%,rgb(8 8 8/.5) 38%,rgb(8 8 8/.12) 68%,rgb(8 8 8/.4) 100%)}
.hero-full .hero-copy{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:96px var(--pad) clamp(56px,11vh,120px);max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;color:var(--over)}
.hero-full .tagline{color:var(--over);opacity:.92}
.hero-split .hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.hero-split .hero-copy{grid-column:1;grid-row:1;align-self:center;padding:110px clamp(24px,4vw,64px) 64px var(--pad)}
.hero-split .hero-media{grid-column:2;grid-row:1;position:relative;min-height:100svh}
.hero-split .hero-frame{position:absolute;inset:0;overflow:hidden}
.hero-split .hero-inset{position:absolute;left:-9%;bottom:8%;width:34%;aspect-ratio:4/5;border:6px solid var(--ground);border-radius:var(--r-img);overflow:hidden;box-shadow:var(--shadow)}
.hero-split .hero-inset img{width:100%;height:100%;object-fit:cover}
.hero-mosaic .hero{display:flex;flex-direction:column;padding:104px var(--pad) clamp(40px,6vw,72px);max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto}
.hero-mosaic .hero-copy{order:-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 48px;align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.hero-mosaic .tagline,.hero-mosaic .hero-title{grid-column:1}
.hero-mosaic .hero-sub{grid-column:2;grid-row:2;margin-bottom:.4em}
.hero-mosaic .hero-cta{grid-column:2;grid-row:3}
.hero-mosaic .hero-title{max-width:14ch;margin:0}
.hero-mosaic .hero-media{flex:1;display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:1fr 1fr;gap:12px;min-height:46vh}
.hero-mosaic .m{overflow:hidden;border-radius:var(--r-img);position:relative}
.hero-mosaic .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-mosaic .m0{grid-row:span 2}
@media (max-width:900px){
  .hero-split .hero{grid-template-columns:1fr}
  .hero-split .hero-media{grid-column:1;grid-row:1;min-height:58svh}
  .hero-split .hero-copy{grid-row:2;padding:32px var(--pad) 56px}
  .hero-split .hero-inset{left:auto;right:var(--pad);bottom:-36px;width:30%}
  .hero-mosaic .hero{min-height:auto;padding-top:92px}
  .hero-mosaic .hero-copy{grid-template-columns:1fr}
  .hero-mosaic .hero-sub,.hero-mosaic .hero-cta{grid-column:1;grid-row:auto}
  .hero-mosaic .hero-media{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;min-height:0}
  .hero-mosaic .m0{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .hero-mosaic .m1,.hero-mosaic .m2{aspect-ratio:1}
}

/* intro */
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);align-items:start}
.intro-text{grid-column:1/span 7}
.intro-img{grid-column:8/span 5;margin:clamp(24px,6vw,96px) 0 0;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/5}
.intro-img img{width:100%;height:100%;object-fit:cover}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 32px;margin:clamp(32px,4vw,56px) 0 0;padding-top:28px;border-top:1px solid var(--line)}
.fact dt{font-size:.82rem;color:var(--muted);margin-bottom:.35em;letter-spacing:.04em}
.fact dd{margin:0;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.25}
.fact-rating dd{display:flex;flex-wrap:wrap;align-items:center;gap:.25em .4em}
.fact-rating small{flex-basis:100%;font:400 .82rem/1.5 var(--f-body);color:var(--muted)}
.star{color:var(--accent)}
@media (max-width:900px){.intro-text,.intro-img{grid-column:1/-1}.intro-img{aspect-ratio:4/3;margin-top:40px}}

/* menu */
.menu{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.menu-photo{margin:0;position:sticky;top:96px;border-radius:var(--r-img);overflow:hidden;aspect-ratio:3/4}
.menu-photo img{width:100%;height:100%;object-fit:cover}
.items{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:26px}
.menu.no-photo{grid-template-columns:1fr}
.menu.no-photo .items{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:28px 56px}
.item h3{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:1.12rem;font-weight:700;line-height:1.5;margin:0 0 .3em}
.item h3 .price{font-family:var(--f-body);font-weight:700;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.item p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.75}
.item.has-thumb{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:start}
.thumb{width:84px;height:84px;border-radius:var(--r-img);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.note{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
@media (max-width:900px){.menu{grid-template-columns:1fr}.menu-photo{position:relative;top:0;aspect-ratio:4/3}}

/* instagram / photos */
.ig-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:clamp(20px,3vw,36px)}
.ig-head .h2{margin:0}
.ig-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0;font-size:.95rem}
.ig-handle{display:inline-flex;align-items:center;gap:.4em;font-weight:700;text-decoration:none}
.ig-handle:hover{color:var(--accent)}
.followers{color:var(--muted)}
.bento{display:grid;gap:clamp(6px,.9vw,12px);grid-template-columns:repeat(4,minmax(0,1fr))}
.bento.n6,.bento.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{position:relative;display:block;margin:0;aspect-ratio:1;overflow:hidden;border-radius:var(--r-img);background:var(--surface)}
.tile.t0{grid-column:span 2;grid-row:span 2}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
a.tile:hover img{transform:scale(1.05)}
.reel,.tile-ig{position:absolute;display:grid;place-items:center;color:#fff;pointer-events:none}
.reel{top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgb(0 0 0/.45)}
.reel .ic{width:15px;height:15px}
.tile-ig{inset:auto 10px 10px auto;width:34px;height:34px;border-radius:50%;background:rgb(0 0 0/.42);opacity:0;transform:translateY(4px);transition:opacity 90ms linear,transform 160ms var(--ease)}
a.tile:hover .tile-ig,a.tile:focus-visible .tile-ig{opacity:1;transform:none}
.ig-foot{margin-top:clamp(20px,3vw,32px)}
@media (max-width:700px){
  .bento,.bento.n6,.bento.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento.n6 .t5{display:none}
}

/* moving photo strip: the page's one marquee */
.strip{overflow:hidden;padding:0 0 clamp(8px,1vw,16px)}
.strip-track{list-style:none;margin:0;padding:0;display:flex;gap:12px;width:max-content}
.strip-track li{height:clamp(190px,26vw,330px);flex:none}
.strip-track img{height:100%;width:auto;border-radius:var(--r-img);object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .strip-track{animation:marquee 70s linear infinite}
  .strip:hover .strip-track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.strip{overflow-x:auto}}
@keyframes marquee{to{transform:translateX(-50%)}}

/* hours + access */
.info-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,2vw,28px)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,3vw,40px)}
.hours-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:18px}
.hours-head h3{display:flex;align-items:center;gap:.5em;font-size:1.05rem;font-weight:700}
.status{margin:0;display:inline-flex;align-items:center;gap:.55em;font-size:.9rem;font-weight:700;min-height:1.6em}
.status:empty{display:none}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--muted)}
.status.is-open::before{background:var(--accent)}
@media (prefers-reduced-motion:no-preference){.status.is-open::before{animation:breathe 2.6s ease-in-out infinite}}
@keyframes breathe{50%{transform:scale(1.35);opacity:.6}}
.week{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.week th,.week td{padding:.62em .8em;text-align:start;vertical-align:top}
.week th{width:4.6em;font-weight:500;color:var(--muted)}
.week tr.today th,.week tr.today td{color:var(--ink);font-weight:700;background:color-mix(in srgb,var(--accent) 13%,transparent)}
.week tr.today th{border-radius:var(--r-field) 0 0 var(--r-field)}
.week tr.today td{border-radius:0 var(--r-field) var(--r-field) 0}
.closed{color:var(--muted)}
.hours .small{margin:16px 0 0}
.kv{margin:0;display:grid;gap:18px}
.kv dt{font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.kv dd{margin:.15em 0 0;line-height:1.7}
.access-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
@media (max-width:900px){.info-grid{grid-template-columns:1fr}}

/* booking + the engine widget, re-skinned to the page tokens */
.book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.book-notes p{max-width:30em;color:var(--muted)}
.book-notes p:first-child{color:var(--ink)}
.book-panel{min-height:420px}
@media (max-width:900px){.book{grid-template-columns:1fr}}
/* The widget injects its own light stylesheet after this file, so every rule here is scoped under .book-panel to win.
   --emiv1-accent is set on the panel: setting it on .emiv1 itself would make the widget's --accent refer to itself. */
.book-panel{--emiv1-accent:var(--accent);--emiv1-radius:var(--r-field)}
.book-panel .emiv1{color:var(--ink)}
.book-panel .emiv1 label{font-weight:700;font-size:.9rem;margin:1rem 0 .35rem}
.book-panel .emiv1 input,.book-panel .emiv1 select,.book-panel .emiv1 textarea{background-color:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-field);min-height:48px;font-size:16px;transition:border-color 90ms linear}
.book-panel .emiv1 select{-webkit-appearance:none;appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.mode-dark .book-panel .emiv1 input,.mode-dark .book-panel .emiv1 select,.mode-dark .book-panel .emiv1 textarea{color-scheme:dark}
.book-panel .emiv1 input:focus,.book-panel .emiv1 select:focus,.book-panel .emiv1 textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.book-panel .emiv1 .hint,.book-panel .emiv1 .opt,.book-panel .emiv1 dt{color:var(--muted)}
.book-panel .emiv1 .btn{background:var(--accent);color:var(--on-accent);border-radius:var(--r-btn);min-height:52px;font-size:1rem;transition:transform 120ms var(--ease),filter 90ms linear}
.book-panel .emiv1 .btn:hover{filter:brightness(1.07)}
.book-panel .emiv1 .btn:active{transform:scale(.98)}
.book-panel .emiv1 .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.book-panel .emiv1 .slot{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-field);min-height:42px;font-variant-numeric:tabular-nums;transition:background-color 90ms linear,transform 120ms var(--ease)}
.book-panel .emiv1 .slot:hover{border-color:var(--accent)}
.book-panel .emiv1 .slot:active{transform:scale(.96)}
.book-panel .emiv1 .slot[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.book-panel .emiv1 .ok{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid var(--line);border-radius:var(--r-card);padding:1.4rem}
.book-panel .emiv1 .ok h3{font-family:var(--f-display);font-weight:var(--w-display);font-size:1.4rem;margin-bottom:.4em}
.book-panel .emiv1 .ref{color:var(--accent)}
.book-panel .emiv1 .err{color:#c62f25}
.mode-dark .book-panel .emiv1 .err{color:#ff8f84}
.book-panel .emiv1 .bad{border-color:#c62f25}
.mode-dark .book-panel .emiv1 .bad{border-color:#ff8f84}
@media (prefers-reduced-motion:no-preference){
  .emiv1 .ok:not([hidden]){animation:pop 380ms var(--ease-out)}
  .emiv1 p.err{animation:shake 360ms ease-in-out}
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes shake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-4px)}90%{transform:translateX(2px)}}

/* the emi band (pitch demo only) */
.emi{border-top:1px solid var(--line)}
.emi-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.emi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.emi-cell{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;min-height:250px}
.emi-copy{padding:22px 22px 18px}
.emi-copy h3{font-size:1.06rem;font-weight:700;margin-bottom:.35em;line-height:1.45}
.emi-copy p{margin:0;font-size:.9rem;line-height:1.7;color:var(--muted)}
.shot{margin-top:auto;display:flex;justify-content:center;padding:0 22px;overflow:hidden}
.shot img{width:100%;border-radius:12px 12px 0 0;border:1px solid var(--line);border-bottom:0;box-shadow:var(--shadow);object-fit:cover;object-position:top}
.emi-cell.phone .shot img{width:min(78%,260px);aspect-ratio:9/13}
.emi-cell.tablet .shot img{aspect-ratio:16/8.4}
.emi-cell.c0{grid-column:1;grid-row:1/span 2}
.emi-cell.c1{grid-column:2/span 2;grid-row:1;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 20%,var(--surface)),var(--surface) 70%)}
.emi-cell.c2{grid-column:4;grid-row:1/span 2}
.emi-cell.c3{grid-column:2/span 2;grid-row:2}
.emi-cell.c4{grid-column:1/span 2;grid-row:3;flex-direction:row}
.emi-cell.c5{grid-column:3/span 2;grid-row:3;flex-direction:row;background:linear-gradient(200deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface) 65%)}
.emi-cell.c4 .emi-copy,.emi-cell.c5 .emi-copy{flex:1;align-self:center}
.emi-cell.c4 .shot,.emi-cell.c5 .shot{margin:24px 0 0;align-self:flex-end;flex:0 0 42%;padding:0 22px 0 0}
.emi-cell.c4 .shot img,.emi-cell.c5 .shot img{width:100%;aspect-ratio:9/11}
.emi-cell.c0 .shot img,.emi-cell.c2 .shot img{width:min(86%,300px);aspect-ratio:9/16}
.emi-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:clamp(24px,3vw,36px)}
.emi-foot .small{margin:0;max-width:44em}
@media (max-width:980px){
  .emi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .emi-cell.c0,.emi-cell.c1,.emi-cell.c2,.emi-cell.c3,.emi-cell.c4,.emi-cell.c5{grid-column:auto;grid-row:auto}
  .emi-cell.c1,.emi-cell.c3{grid-column:span 2}
  .emi-cell.c4,.emi-cell.c5{flex-direction:column}
  .emi-cell.c4 .shot,.emi-cell.c5 .shot{margin-top:auto;align-self:center;flex:none;padding:0 22px}
  .emi-cell .shot img,.emi-cell.phone .shot img,.emi-cell.c0 .shot img,.emi-cell.c2 .shot img,.emi-cell.c4 .shot img,.emi-cell.c5 .shot img{aspect-ratio:9/10}
}
@media (max-width:560px){.emi-grid{grid-template-columns:1fr}.emi-cell.c1,.emi-cell.c3{grid-column:auto}}

/* footer */
.foot{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) var(--pad) 40px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:28px 40px;max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto;font-size:.92rem}
.foot p{margin:0 0 .35em;color:var(--muted)}
.foot .foot-name{font-size:1.3rem;color:var(--ink);margin-bottom:.6em;line-height:1.3}
.foot-links,.foot-langs{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot-links a,.foot-langs a{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;color:var(--ink)}
.foot-links a:hover,.foot-langs a:hover{color:var(--accent)}
.foot-end{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid var(--line)}
.foot-end .small{margin:0}
.owner{font-size:.85rem;color:var(--muted)}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot-main{grid-column:1/-1}}

/* motion: hero entrance, scroll reveals (primary), image settle (secondary), drift + breathe + strip (ambient) */
@media (prefers-reduced-motion:no-preference){
  .js .hero [data-h]{opacity:0;transform:translateY(calc(var(--rise)*.9))}
  .js.ready .hero [data-h]{opacity:1;transform:none;transition:opacity var(--dur-hero) var(--ease-out),transform var(--dur-hero) var(--ease-out);transition-delay:calc(140ms + var(--h)*90ms)}
  .js .hero-img{transform:scale(1.07)}
  .js.ready .hero-img{transform:none;transition:transform calc(var(--dur-hero)*1.9) var(--ease-out)}
  .js.ready.hero-full .hero-media{animation:drift 26s ease-in-out 2.4s infinite alternate}
  .js .hero-inset{opacity:0;transform:translateY(24px)}
  .js.ready .hero-inset{opacity:1;transform:none;transition:opacity var(--dur-hero) var(--ease-out) 420ms,transform var(--dur-hero) var(--ease-out) 420ms}
  .js [data-r]{opacity:0;transform:translateY(var(--rise))}
  .js [data-r].in{opacity:1;transform:none;transition:opacity var(--dur) var(--ease-out),transform calc(var(--dur)*1.3) var(--ease-out);transition-delay:calc(var(--i,0)*var(--stagger))}
  .js figure[data-r] img,.js .tile[data-r] img{transform:scale(1.06)}
  .js figure[data-r].in img,.js .tile[data-r].in img{transform:none;transition:transform calc(var(--dur)*2.4) var(--ease-out)}
  .js a.tile[data-r].in:hover img{transform:scale(1.05);transition-duration:600ms}
  .noreveal [data-r],.noreveal .hero [data-h],.noreveal .hero-inset{opacity:1!important;transform:none!important}
}
@keyframes drift{to{transform:scale(1.045)}}