/* Khawla Abu Saleh · redesign prototype · 16 Oct 2026
   Principles: the work leads, nothing hides, one readable type scale, no motion. */


:root{
  --paper:#f7f7f5;
  --ink:#141414;
  --mid:#595959;      /* 7:1 on paper, captions stay readable */
  --hair:#dcdcd8;
  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --text:"Instrument Sans",Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a.u{border-bottom:1px solid currentColor}
a.u:hover{opacity:.6}

/* header */
.top{position:sticky;top:0;z-index:10;background:var(--paper);display:flex;justify-content:space-between;align-items:baseline;padding:22px var(--gutter);border-bottom:1px solid var(--hair)}
.top .name{font-family:var(--display);font-size:22px;letter-spacing:.005em;font-variation-settings:"opsz" 24}
.top nav{display:flex;gap:28px;font-size:15px}
.top nav a{color:var(--mid)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}

/* type */
.eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
h1,h2,h3{font-family:var(--display);font-weight:400;font-variation-settings:"opsz" 72}
h2{font-size:clamp(30px,3.2vw,44px);line-height:1.1}
h3{font-size:24px;line-height:1.2;font-variation-settings:"opsz" 28}
.cap{font-size:14px;color:var(--mid);line-height:1.5}
.lede{font-family:var(--display);font-size:clamp(21px,1.9vw,27px);line-height:1.4;font-variation-settings:"opsz" 24}
.body{max-width:62ch}
.body p+p{margin-top:1em}

/* HOME hero: the painting at full height, text beside it */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--gutter);align-items:end;padding:var(--gutter);min-height:calc(100vh - 68px)}
.hero figure img{max-height:calc(100vh - 68px - 2*var(--gutter));width:auto}
.hero .txt{padding-bottom:6px}
.hero .txt .lede{margin:18px 0 28px;max-width:30ch}
.hero .txt .meta{border-top:1px solid var(--hair);padding-top:14px}

/* sections */
.sec{padding:96px var(--gutter) 24px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:36px}

/* work index */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--gutter)}
.work .frame{background:#ecebe7;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:7%}
.work .frame img{max-height:100%;width:auto;object-fit:contain;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.work .frame.bleed{padding:0}
.work .frame.bleed img{width:100%;height:100%;object-fit:cover}
.work h3{margin-top:16px}
.work .cap{margin-top:4px}
.work:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* in development list */
.list{border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:var(--gutter);padding:20px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.row h3{font-size:22px}

/* statement band */
.statement{padding:120px var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter)}
.statement .lede{max-width:34ch}

/* footer */
.foot{padding:40px var(--gutter);border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15px;color:var(--mid)}
.foot a{color:var(--ink)}

/* WORK page */
.plate{padding:var(--gutter) var(--gutter) 0;display:flex;justify-content:center}
.plate img{max-height:calc(100vh - 68px - 2*var(--gutter));width:auto}
.tombstone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter);padding:40px var(--gutter) 0}
.tombstone h1{font-size:clamp(34px,3.6vw,52px);line-height:1.05}
.tombstone dl{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;margin-top:20px;font-size:15px}
.tombstone dt{color:var(--mid)}
.details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);padding:96px var(--gutter) 0}
.details figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.details figcaption{margin-top:10px}
.pager{display:flex;justify-content:space-between;padding:96px var(--gutter) 64px;font-size:15px}
.pager a{display:block}
.pager a span{display:block}
.pager .t{font-family:var(--display);font-size:24px;color:var(--ink)}

@media (max-width:900px){
  .top{flex-direction:column;gap:10px}
  .top nav{gap:18px;flex-wrap:wrap}
  .hero,.statement,.tombstone{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero figure img{max-height:none;width:100%}
  .works{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .details{grid-template-columns:1fr}
  .plate img{max-height:none;width:100%}
}
.ar{display:block;text-align:left;font-size:16px}

/* paintings shown to true relative scale: 1 cm = --u, all on one baseline, no frames */
.scale{--u:min(0.52vh, calc((100vw - 2*var(--gutter) - 96px) / 226));display:flex;align-items:flex-end;gap:96px;flex-wrap:wrap}
.scale .work img{width:calc(var(--cm) * var(--u));height:auto;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.scale-note{margin-top:28px}
.inst{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--gutter);align-items:end;margin-top:96px}
.inst img{height:min(78vh,820px);width:auto}
.inst .body{padding-bottom:4px}
.sub{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin-bottom:28px}
@media (max-width:900px){
  .scale{gap:32px}
  .scale{--u:calc((100vw - 2*var(--gutter) - 32px) / 226)}
  .inst{grid-template-columns:1fr}
  .inst img{height:auto;width:100%}
}

/* ---------- shared page heads ---------- */
.page-head{padding:96px var(--gutter) 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter);align-items:end;border-bottom:1px solid var(--ink);margin:0 var(--gutter);padding-left:0;padding-right:0}
.page-head h1{font-size:clamp(40px,4.6vw,68px);line-height:1}
.page-head .cap{max-width:52ch}

/* ---------- details: natural proportions variant ---------- */
.details.natural figure img{aspect-ratio:auto;object-fit:contain}

/* ---------- video ---------- */
video{display:block;width:100%;height:auto;background:#e9e8e4}
.media2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);padding:96px var(--gutter) 0}
.media2 figcaption{margin-top:10px}
.states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);padding:var(--gutter) var(--gutter) 0}

/* ---------- record lists (CV, press) ---------- */
.rec{padding:0 var(--gutter)}
.rec-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter);padding:40px 0;border-bottom:1px solid var(--hair)}
.rec-sec h2{font-family:var(--text);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);font-weight:500;padding-top:4px}
.rec-item+.rec-item{margin-top:18px}
.rec-item p{margin:0}
.rec-item .cap{margin-top:2px}
.rec-item a.u{color:var(--ink)}
.thumb-item{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:start}
.thumb-item img{width:120px;height:120px;object-fit:cover}
.thumb-item.wide img{height:68px}
.cv-actions{padding:40px var(--gutter) 0}
.btn{font:inherit;font-size:15px;background:none;border:1px solid var(--ink);padding:10px 18px;cursor:pointer;color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--paper)}

/* ---------- about ---------- */
.about-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter);padding:96px var(--gutter) 0;align-items:start}
.about-top h1{font-size:clamp(40px,4.6vw,68px);line-height:1}
.about-top figure{margin-top:36px}
.about-top .body p{font-size:18px}
.about-top .body p+p{margin-top:1.1em}

/* ---------- research ---------- */
.proj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter);padding:40px 0;border-bottom:1px solid var(--hair)}
.proj h2{font-size:28px}

/* ---------- lightbox ---------- */
[data-zoom]{cursor:zoom-in}
.lb{position:fixed;inset:0;background:rgba(247,247,245,.98);z-index:50;display:none;align-items:center;justify-content:center;overflow:hidden}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:94vh;width:auto;height:auto;cursor:zoom-in;transition:transform .2s ease}
.lb.zoomed img{cursor:zoom-out}
.lb button{position:absolute;top:18px;right:24px;font:inherit;font-size:15px;background:none;border:0;cursor:pointer;color:var(--ink)}

@media (max-width:900px){
  .page-head,.rec-sec,.about-top,.proj{grid-template-columns:1fr}
  .media2,.states{grid-template-columns:1fr}
  .thumb-item{grid-template-columns:80px minmax(0,1fr)}
  .thumb-item img{width:80px;height:80px}
}
@media print{
  .top,.foot,.cv-actions{display:none}
  body{font-size:11pt;background:#fff}
  .page-head{padding-top:0}
  .rec-sec{padding:14px 0;break-inside:avoid}
}
.details figure.span{grid-column:1/-1}
.loop{padding:96px var(--gutter) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter);align-items:end}
@media (max-width:900px){.loop{grid-template-columns:1fr}}
.details.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.details.three{grid-template-columns:1fr}}

/* =========================================================
   v2.1 · ONE GRID, ONE MEASURE, JUSTIFIED TEXT (Khawla, 16 Oct)
   Every two column block uses the same split: a 4/12 label column
   and an 8/12 content column. Content never runs wider than --measure,
   so every right edge on every page lands on the same line.
   ========================================================= */
:root{--measure:700px}
.tombstone,.rec-sec,.proj,.page-head,.statement,.about-grid,.loop{
  grid-template-columns:minmax(0,4fr) minmax(0,8fr) !important;column-gap:var(--gutter)}
.tombstone>div:last-child,.rec-sec>div,.proj>.body,.page-head>.cap,.statement>div,.about-grid>.about-body,.loop>video{max-width:var(--measure);width:100%}
/* justified running text, hyphenated so the spacing stays even */
.body p,.rec-item p,.row p,.proj p,.inst .body p,.statement p,.about-body p,.page-head .cap,.hero .txt .lede{
  text-align:justify;-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty}
.rec-item p:first-child{text-align:left}            /* one line titles stay flush left */
.row{grid-template-columns:minmax(0,4fr) minmax(0,8fr) !important}
.row>span.cap{grid-column:2;margin-top:-10px}
.row>p.cap{max-width:var(--measure)}
/* page heads align to the same split */
.page-head{margin:0 var(--gutter);padding:96px 0 32px}
.page-head .cap{align-self:end}
/* thumbnails: one fixed column, so text always starts on the same line */
.thumb-item{grid-template-columns:120px minmax(0,1fr)}
.thumb-item img{width:120px;height:120px;object-fit:cover}
.thumb-item.wide img{height:120px}
.indent{padding-left:144px}

/* ---------- banners: the landing image of every work page ---------- */
.banner{position:relative;width:100%;background:#e9e8e4}
.banner img{width:100%;height:auto;max-height:calc(100vh - 68px);object-fit:cover;display:block}
.banner figcaption{position:absolute;left:var(--gutter);bottom:18px;color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.tombstone{padding-top:72px}
.plate{padding-top:96px}
.plate-cap{text-align:center;margin-top:12px}

/* ---------- about ---------- */
.about-grid{display:grid;padding:72px var(--gutter) 0;align-items:start}
.about-grid h1{font-size:clamp(40px,4.6vw,68px);line-height:1}
.about-body p{font-size:18px}
.about-body p+p{margin-top:1.1em}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.pair img{width:100%;aspect-ratio:4/5;object-fit:cover}

@media (max-width:900px){
  .tombstone,.rec-sec,.proj,.page-head,.statement,.about-grid,.loop,.row{grid-template-columns:1fr !important}
  .row>span.cap{grid-column:1;margin-top:0}
  .indent{padding-left:104px}
  .thumb-item{grid-template-columns:80px minmax(0,1fr)}
  .thumb-item img,.thumb-item.wide img{width:80px;height:80px}
  .banner img{max-height:none}
}
.about-body p.lede{font-size:clamp(21px,1.9vw,27px)}

/* v2.2 · one content width for the whole site: every block, header and footer share the same left and right edges */
:root{--pad:max(var(--gutter), calc((100vw - 1180px) / 2));--measure:100%}
.top,.hero,.sec,.statement,.foot,.plate,.tombstone,.details,.pager,.media2,.states,.loop,.rec,.about-grid,.cv-actions{
  padding-left:var(--pad) !important;padding-right:var(--pad) !important}
.page-head{margin-left:var(--pad) !important;margin-right:var(--pad) !important}
p.cap[style*="padding:10px var(--gutter)"]{padding-left:var(--pad) !important}
body{font-size:17.5px}
/* v2.3 · alignment pass on home */
.statement .lede,.hero .txt .lede{max-width:none}
.row>span.cap{grid-column:1 !important;grid-row:2;margin-top:4px !important}
.row>p.cap{grid-row:1 / span 2}
.inst{grid-template-columns:minmax(0,4fr) minmax(0,8fr) !important;column-gap:var(--gutter)}
.inst img{width:100%;height:auto}
.inst .body{max-width:var(--measure)}
@media (max-width:900px){.row>p.cap{grid-row:auto}.row>span.cap{grid-row:auto}}
.row{row-gap:6px !important}
@media (max-width:600px){.body p,.rec-item p,.row p,.proj p,.inst .body p,.statement p,.about-body p,.page-head .cap,.hero .txt .lede{text-align:left}}

/* v2.4 · work spread: full painting left, title and text right, top and bottom edges aligned */
.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gutter);padding:72px var(--pad) 0;align-items:stretch}
.spread-img img{width:100%;height:auto}
.spread .info{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.spread h1{font-size:clamp(34px,3.6vw,52px);line-height:1.05}
.spread dl{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;margin-top:20px;font-size:15px}
.spread dt{color:var(--mid)}
.spread .body p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.spread .body .lede{font-size:clamp(20px,1.7vw,25px)}
.spread+.details{padding-top:96px}
@media (max-width:900px){.spread{grid-template-columns:1fr;row-gap:32px}.spread .body p{text-align:left}}
.spread .body .lede{font-size:clamp(19px,1.45vw,22px)}

/* v2.5 · home: installation wide on the right, studio row */
.inst{align-items:end}
.inst .body{order:0}
.studio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.studio img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.studio figcaption{margin-top:10px}
@media (max-width:900px){.studio{grid-template-columns:1fr 1fr}.studio figure:last-child{display:none}}
@media (max-width:600px){.studio{grid-template-columns:1fr}.studio figure:last-child{display:block}}
@media (max-width:900px){.inst{grid-template-columns:1fr !important;row-gap:20px}.inst>a{order:-1}}
/* v2.6 · home opens on the portrait banner; studio row of four */
.statement.intro{padding-top:72px;padding-bottom:24px}
.studio{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.studio{grid-template-columns:1fr 1fr}.studio figure:last-child{display:block}}
@media (max-width:600px){.studio{grid-template-columns:1fr 1fr;gap:14px}}
.intro .eyebrow,.statement .eyebrow{text-align:left!important}

/* v2.7 · black and white artist treatment, home banner overlay, DoH film, about portrait, mobile scale */
.artist,.home-banner img{filter:grayscale(1)}
.home-banner{position:relative;display:block;color:#fff;background:#222}
.home-banner img{width:100%;height:calc(100svh - 68px);min-height:420px;object-fit:cover;object-position:60% 30%;display:block}
.home-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);pointer-events:none}
.hb-txt{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,6vh,64px);z-index:1}
.hb-txt h1{font-size:clamp(46px,6.4vw,96px);line-height:.98;color:#fff}
.hb-txt p{margin-top:14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.statement.intro{padding-top:88px;padding-bottom:8px}

.film,.views,.states-cap{padding-left:var(--pad);padding-right:var(--pad)}
.film{padding-top:96px}
.film-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:28px}
.film-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.film-row video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#111;display:block}
.film-row figcaption{margin-top:10px}
.views{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--gutter);align-items:end;padding-top:96px}
.views img{width:100%;height:auto;display:block}
.views figcaption{margin-top:10px}
.states-cap{padding-top:10px}
.about-side .portrait-main{width:100%;height:auto;margin-top:36px;display:block}

@media (max-width:600px){
  .home-banner img{height:auto;aspect-ratio:3/4;min-height:0;object-position:50% 20%}
  .hb-txt h1{font-size:46px}
  .film-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:calc(-1 * var(--pad));padding-right:var(--pad);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .film-row::-webkit-scrollbar{display:none}
  .film-row figure{scroll-snap-align:start}
  .film-head{flex-direction:column;gap:4px}
  .views{grid-template-columns:1fr;row-gap:40px}
  .scale{display:block}
  .scale .work{display:block;margin-bottom:44px}
  .scale .work img{width:calc(var(--cm) / 120 * 100%)}
  .about-grid{display:flex;flex-direction:column}
}
.inst img{aspect-ratio:16/10;object-fit:cover;object-position:50% 55%}
@media (max-width:600px){
  .inst img{aspect-ratio:4/5;object-position:51% 50%}
  .states{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-right:var(--pad) !important;scrollbar-width:none}
  .states::-webkit-scrollbar{display:none}
  .states figure{scroll-snap-align:start}
  .about-side{margin-bottom:40px}
}

/* v2.8 · home feature: Dance of Horizons full bleed, title as wall text */
.feature{margin-top:96px}
.feature-img{position:relative;display:block;color:var(--ink)}
.feature-img img{width:100%;height:auto;display:block}
.feature .wall{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:clamp(6px,1vw,14px)}
.feature .wall .eyebrow{color:#6b6b6b}
.feature .wall .t{font-family:var(--display);font-size:clamp(24px,4.4vw,68px);line-height:1;font-variation-settings:"opsz" 72}
.feature-img:hover .wall .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.feature-txt{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gutter);padding:24px var(--pad) 0}
.feature-txt p:not(.cap){text-align:justify;hyphens:auto}
@media (max-width:600px){
  .feature{margin-top:64px}
  .feature .wall{gap:4px}
  .feature .wall .eyebrow{font-size:10px}
  .feature .wall .t{font-size:22px}
  .feature-txt{grid-template-columns:1fr;row-gap:14px;padding-top:18px}
  .feature-txt p:not(.cap){text-align:left}
}
.feature .wall{left:max(var(--pad),13%)}

/* v2.9 · mobile menu: floating black circle, bottom centre (≤760px) */
.mbtn,.mnav{display:none}
@media (max-width:760px){
  .top{flex-direction:row !important;justify-content:center !important;align-items:center !important;padding-top:18px !important;padding-bottom:18px !important}
  .top nav{display:none !important}
  .mbtn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;width:60px;height:60px;border-radius:50%;border:0;background:#141414;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.22);-webkit-tap-highlight-color:transparent}
  .mbtn span{display:block;width:22px;height:1.5px;background:#fff;transition:transform .2s,opacity .2s}
  .mbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .mbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .mnav{position:fixed;inset:0;z-index:80;background:var(--paper);flex-direction:column;justify-content:center;padding:0 28px 120px}
  .mnav:not([hidden]){display:flex}
  .mnav-name{position:absolute;top:22px;left:0;right:0;text-align:center;font-family:var(--display);font-size:20px}
  .mnav nav{display:flex;flex-direction:column}
  .mnav nav a{font-family:var(--display);font-size:40px;line-height:1.3;color:var(--ink)}
  .mnav nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
  .mnav-foot{position:absolute;left:28px;right:28px;bottom:calc(104px + env(safe-area-inset-bottom));font-size:13px;color:var(--mid);line-height:1.8}
  .foot{padding-bottom:110px !important}
  body.menu-open{overflow:hidden}
}

/* v2.10 · menu circle on every screen size */
.top{flex-direction:row !important;justify-content:center !important;align-items:center !important}
.top nav{display:none !important}
.mbtn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;width:64px;height:64px;border-radius:50%;border:0;background:#141414;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.22);-webkit-tap-highlight-color:transparent;transition:transform .2s}
.mbtn:hover{transform:translateX(-50%) scale(1.06)}
.mbtn span{display:block;width:22px;height:1.5px;background:#fff;transition:transform .2s,opacity .2s}
.mbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.mbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:80;background:var(--paper);flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 28px 120px}
.mnav:not([hidden]){display:flex}
.mnav-name{position:absolute;top:22px;left:0;right:0;text-align:center;font-family:var(--display);font-size:22px}
.mnav nav{display:flex;flex-direction:column;align-items:center}
.mnav nav a{font-family:var(--display);font-size:clamp(40px,5.2vw,76px);line-height:1.22;color:var(--ink)}
.mnav nav a:hover,.mnav nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:10px}
.mnav-foot{position:absolute;left:0;right:0;bottom:calc(112px + env(safe-area-inset-bottom));font-size:13px;color:var(--mid);line-height:1.8;text-align:center}
.foot{padding-bottom:120px !important}
body.menu-open{overflow:hidden}
@media (max-width:760px){.mbtn{width:60px;height:60px;bottom:calc(20px + env(safe-area-inset-bottom))}.mnav{align-items:flex-start;text-align:left}.mnav nav{align-items:flex-start}.mnav-foot{left:28px;text-align:left;bottom:calc(104px + env(safe-area-inset-bottom))}}