/* TAZZ — mobile layout (≤ 760px). Loaded after style.css. */
.ct-btn{display:none}
@media (max-width:760px){
:root{--nav-h:52px}
html.snap{scroll-snap-type:none}
/* header: logo + clock on top; nav fixed at the bottom */
.hdr{grid-template-columns:1fr auto!important;align-items:start}
.hdr .brand{width:78vw!important}
.hdr .meta{position:static!important;font-size:13px!important}
.hdr .meta .where{display:none!important}
/* no CV on mobile */
.ft .people>a[href^="#cv"],.ab dd a.fd{pointer-events:none!important}
.ab dd a.fd::after{display:none!important}
.hdr nav{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:20px;padding:0 var(--pad);height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);font-size:15px;pointer-events:auto}
.hdr nav a{padding:3px 5px;margin:-3px -5px}
.ct-btn{display:block;margin-left:auto;font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:inherit;color:inherit;background:none;border:0;padding:3px 5px;margin-right:-5px;cursor:pointer}
html.ct-open .ct-btn{background:#fff;color:#000}
html.ct-open .hdr nav a.on{background:none!important;color:#fff!important}
/* home: one full-screen image */
#v-work .grid{grid-template-columns:1fr!important;grid-template-rows:1fr!important;height:100svh!important;padding:0!important;gap:0!important}
#v-work .card{height:100%!important}
#v-work .card .cap{grid-template-columns:1fr!important;justify-items:start;gap:4px;top:auto!important;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));transform:none!important;padding:0 var(--pad)!important;opacity:1!important;font-size:12px}
#v-work .card .cap>span:nth-child(2){display:none}
#v-work .card .cap>span:nth-child(3):not(:empty){justify-self:start!important}
/* contact bar → sheet opened by "Contact" */
.ft{display:none!important}
html.ct-open .ft{display:flex!important;position:fixed;inset:0;z-index:45;isolation:isolate;overflow:hidden;touch-action:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:36px;padding:calc(var(--pad) + 18vw) var(--pad) calc(var(--nav-h) + 24px);background:var(--t-deep);pointer-events:auto;font-size:17px;line-height:1.35;text-shadow:none;animation:ctIn 260ms ease both}
html.ct-open body{overflow:hidden}
html.ct-open .ft .people{display:grid!important;grid-template-columns:1fr!important;gap:2px 0!important}
html.ct-open .ft .people>*{display:block!important}
html.ct-open .ft .people>a[href^="#cv"]{font-weight:700;margin-top:22px}
html.ct-open .ft .people>a[href^="#cv"]:first-child{margin-top:0}
html.ct-open .ft .people>span:empty{display:none!important}
html.ct-open .ft .right{flex-direction:column;align-items:flex-start;gap:14px}
html.ct-open .ft .so{gap:20px}
html.ct-open .ft .copy{display:none!important}
html.ct-open .ft .people>*,html.ct-open .ft .right a{mix-blend-mode:difference;color:#fff}
html.ct-open .ft a.tap{mix-blend-mode:normal!important}
.cursor,.cursor-label{display:none!important}
html,body,a,button{cursor:auto!important}
.ct-bg{display:none}
html.ct-open .ct-bg{display:block;position:absolute;inset:-40px;z-index:-1;pointer-events:none}
.ct-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.55) saturate(1.15);opacity:0;transform:scale(1.08);transition:opacity 700ms ease}
.ct-bg img.on{opacity:1}
@keyframes ctIn{from{opacity:0}to{opacity:1}}
/* index: thumbnail left, two lines */
#v-index .idx-head{font-size:30px}
#idxList .idx-row{display:grid!important;grid-template-columns:76px 34px minmax(0,1fr) auto!important;grid-template-areas:"th n t y" "th . l c";gap:3px 10px!important;align-items:center!important;padding:8px 0!important;color:var(--fg)!important}
#idxList .idx-row>.th{grid-area:th;display:block!important;width:76px!important;justify-self:start!important;filter:none!important}
#idxList .idx-row>.n{grid-area:n}
#idxList .idx-row>.t{grid-area:t;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#idxList .idx-row>.y{grid-area:y;display:block!important;justify-self:end;color:#c4c4c4}
#idxList .idx-row>span:nth-child(4){grid-area:l;display:block!important;color:#c4c4c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#idxList .idx-row>.c{grid-area:c;display:block!important;justify-self:end;color:#c4c4c4;white-space:nowrap}
#idxList:hover .idx-row:not(:hover){color:var(--fg)!important}
/* about + project + cv */
.idx-wrap{padding-top:calc(var(--pad) + 24vw)!important}
#v-index,#v-about{min-height:0!important}
#v-index .idx-wrap,#v-about .idx-wrap{padding-top:calc(var(--pad) + 13vw + 28px)!important}
#v-index{padding-bottom:0!important}
#v-about .idx-head{font-size:30px}
.ab{grid-template-columns:1fr!important;gap:32px!important}
#v-project .pj-head{padding-top:calc(var(--pad) + 24vw)!important;font-size:30px}
#v-project .pj-row{grid-template-columns:1fr 1fr!important;row-gap:4px}
#v-project .pj-body{grid-template-columns:1fr!important}
#v-project .pj-body>div:empty{display:none}
.pj-gal{columns:1!important;margin-top:40px!important}
.pj-gal figure{margin-bottom:4px}
.pj-nav2{gap:10px}
#v-about,.pj,.cv{padding-bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom))!important}
#v-about .idx-wrap{min-height:0!important}
#v-about .ab{flex:none!important;grid-template-rows:none!important}
#v-about .press{margin-top:8px!important}
/* About fills at least the visible screen (small viewport = browser bars shown) and grows with its content,
   so the last publication always ends 24px above the menu bar, never under it. */
#v-about{box-sizing:border-box!important;min-height:100svh!important;height:auto!important;overflow:visible!important}
/* tap glows (brief) */
html body a.tap:is(*,:hover)[href^="tel:"]{color:#3fd477!important;text-shadow:0 0 3px rgba(20,190,80,.75),0 0 10px rgba(20,190,80,.5),0 0 20px rgba(20,190,80,.28)!important}
html body a.tap:is(*,:hover)[href^="mailto:"]{color:#5b86f0!important;text-shadow:0 0 3px rgba(30,80,220,.75),0 0 10px rgba(30,80,220,.5),0 0 20px rgba(30,80,220,.3)!important}
html body a.tap.ig:is(*,:hover){-webkit-text-fill-color:currentColor!important;background:none!important;color:#ff4f9a!important;text-shadow:0 0 3px rgba(214,41,118,.8),0 0 10px rgba(150,47,191,.5),0 0 20px rgba(250,126,30,.3)!important}
html body a.tap.in:is(*,:hover){color:#2d8cf0!important;text-shadow:0 0 3px rgba(10,102,194,.8),0 0 10px rgba(10,102,194,.55),0 0 20px rgba(10,102,194,.3)!important}
a[href^="tel:"],a[href^="mailto:"],a.ig,a.in{transition:color 500ms ease,text-shadow 600ms ease}
html body a.tap:is(*,:hover)[href^="tel:"],html body a.tap:is(*,:hover)[href^="mailto:"],html body a.tap.ig:is(*,:hover),html body a.tap.in:is(*,:hover){transition:color 40ms linear,text-shadow 60ms linear!important}
.pj-nav2{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px!important;align-items:start!important}
.pj-nav2 .next{display:flex!important;flex-direction:column!important;align-items:flex-start;gap:2px!important;min-width:0}
.pj-nav2 .next:not(.prev){grid-column:2;flex-direction:column!important;align-items:flex-end;text-align:right}
.pj-nav2 .next .t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idx-wrap>.idx-head,#v-project .pj-head{box-sizing:border-box!important;min-height:44px!important;align-items:flex-end!important}
#v-index .idx-head>*,#v-about .idx-head>*{line-height:30px!important}
#v-project .pj{padding-top:calc(var(--pad) + 13vw + 28px)!important}
#v-project .pj-head{padding-top:0!important;margin-top:0!important;height:44px!important;min-height:0!important;overflow:visible!important;align-items:flex-end!important}
}

/* Publications "page" on small phones (button added by mobile.js). */
.ab-pubs-btn{display:none}
@media (max-width:760px){
#v-about .idx-head>span:last-child{display:flex;align-items:center;justify-content:flex-end}
#v-about.ab-compact .ab-pubs-btn{display:inline-flex;align-items:center;gap:6px;height:22px;font:inherit;font-size:11px;font-weight:700;line-height:1;letter-spacing:.04em;text-transform:uppercase;background:#fff;color:#000;border:0;padding:0 8px;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#v-about .ab-pubs-btn svg{width:10px;height:10px;fill:none;stroke:#000;stroke-width:1.2;flex:none}
#v-about.ab-compact:not(.pubs-open) .press{display:none!important}
#v-about.ab-compact.pubs-open .lead,#v-about.ab-compact.pubs-open .ab>dl{display:none!important}
#v-about.ab-compact.pubs-open .press{margin-top:0!important}
}

/* Publications sit at the bottom of About, 24px above the menu bar, as on desktop. */
@media (max-width:760px){
#v-about.on{display:flex!important;flex-direction:column}
#v-about .idx-wrap{flex:1 0 auto;display:flex!important;flex-direction:column}
#v-about .ab{flex:1 0 auto!important;display:flex!important;flex-direction:column;gap:32px!important}
#v-about .press,#v-about.ab-compact.pubs-open .press{margin-top:auto!important;align-self:stretch!important}
}

/* Home image runs under the browser bars: it is sized to the LARGE viewport (bars hidden), so it never
   shrinks when Safari / Arc show their bars; a translucent bar simply lets the image show through.
   The captions follow the visible bottom edge (dynamic viewport), so they stay just above the menu. */
@media (max-width:760px){
#v-work .grid{height:100vh!important;height:var(--home-h,100lvh)!important}
#v-work .card .cap{bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom) + 100lvh - 100dvh)!important}
}

/* Contact sheet reaches under the browser bars (top and bottom): it overflows the screen by 30vh
   on each side, so the blur also covers what a translucent Safari / Arc bar would let through.
   The extra padding keeps the contacts exactly where they were. */
@media (max-width:760px){
html.ct-open .ft{top:-30vh!important;bottom:-30vh!important;left:0!important;right:0!important;padding-top:calc(30vh + var(--pad) + 18vw)!important;padding-bottom:calc(30vh + var(--nav-h) + 24px)!important}
}

/* Project title stays put on mobile: title, number and the line under them stay fixed where they
   are, with no band behind them; everything else slides under, and the title stays readable over
   images by inverting (same effect as on desktop). */
@media (max-width:760px){
#v-project .pj-head,#v-project.enter .pj-head{position:sticky!important;top:calc(var(--pad) + 13vw + 28px)!important;z-index:5!important;mix-blend-mode:difference!important;color:#fff!important;background:none!important}
}

/* Safari iOS 26 shows the page under its own bars (status bar on top, address bar at the bottom).
   - grain: a full-screen FIXED layer made Safari draw a grey separator line above its bar; on phones the grain
     is laid on the page itself instead (still under the content), and static, which is also lighter.
   - top cap: a band of the page colour just ABOVE the screen, so what is above (e.g. the index under About)
     does not show through under the clock. Invisible in other browsers (it is outside the screen).
   - home: the image is made taller by the part of the screen Safari keeps below its viewport (--home-x,
     measured in mobile.js), so it runs down under the address bar; captions are lifted by the same amount. */
.top-cap{display:none}
@media (max-width:760px){
body::after{position:absolute!important;inset:0!important;transform:none!important;will-change:auto!important;animation:none!important}
.top-cap{display:block;position:fixed;left:0;right:0;top:-160px;height:160px;z-index:49;background:var(--t-deep);pointer-events:none}
#v-work .grid{height:calc(var(--home-h,100lvh) + var(--home-x,0px))!important}
#v-work .card .cap{bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom) + 100lvh - 100dvh + var(--home-x,0px))!important}
}

/* Safari iOS 26, second pass.
   Safari fills whatever lies beyond the end of the page (and, at the screen edges, under its bars) with a
   flat colour taken from the page background. Two consequences, two fixes:
   - Grain: a grainy page next to that flat band shows a faint line. The grain (still static and under all
     content) now fades out over the last 220px of the page, so the page ends on the exact flat colour.
   - Contact sheet: a FIXED full-screen panel makes Safari paint flat bands under its bars instead of the
     blur. While open, the sheet is now a normal (absolute) block placed where the screen is and running
     30vh past it on both sides, like page content, so Safari shows the blur under its bars too. Scrolling
     is already blocked while it is open; the top cap is hidden meanwhile. */
@media (max-width:760px){
body::after{-webkit-mask-image:linear-gradient(#000 calc(100% - 220px),transparent);mask-image:linear-gradient(#000 calc(100% - 220px),transparent)}
html.ct-open body{overflow:visible!important;overflow-x:clip!important}
html.ct-open .ft{position:absolute!important;top:calc(var(--ct-y,0px) - 30vh)!important;bottom:auto!important;height:calc(100vh + 60vh)!important;box-sizing:border-box!important}
html.ct-open .top-cap{display:none!important}
}

/* Home captions: placed from the VISIBLE bottom edge (100dvh) whatever the measured image height, so they
   always sit 16px above the menu, even if a browser (Arc) reported odd viewport sizes at load. */
@media (max-width:760px){
#v-work .card .cap{bottom:calc(var(--home-h,100lvh) + var(--home-x,0px) - 100dvh + var(--nav-h) + 16px + env(safe-area-inset-bottom))!important}
}

/* Menu + home captions follow Safari / Arc bars smoothly. Their resting place is pinned to the LARGE
   viewport bottom (100lvh = bars hidden), which never changes, so the browser can never make them jump.
   mobile.js measures how much of that bottom is covered by the bars (--bar-gap) and they slide up/down
   by exactly that amount with an eased transition. */
@media (max-width:760px){
/* home captions never move: pinned just above where the menu sits when the bars are shown (100svh) */
#v-work .card .cap{bottom:calc(var(--home-h,100lvh) + var(--home-x,0px) - var(--vis-min,100svh) + var(--nav-h) + 16px + env(safe-area-inset-bottom))!important;translate:none!important}
}

/* About (and its publications page) no longer resizes while Arc / Safari bars slide: its minimum height is the
   smallest visible screen height measured in px (--vis-min, mobile.js) instead of the moving 100svh unit,
   so the publications block stays put and simply scrolls under the menu like the rest of the page. */
@media (max-width:760px){
#v-about{min-height:var(--vis-min,100svh)!important}
}