/* MNcourage Art — a museum floor plan built from Benin City materials.
   Layout: one room per page; red-earth course walls, carved pillars and doorway arches frame the work.
   Single light look by choice. */
:root{
  --chalk:#FBF9F7;      /* gallery white */
  --plaster:#F1EBE6;    /* hanging wall */
  --line:#E2D7CF;
  --ebony:#17110F;      /* frames, type */
  --ash:#6B5E58;        /* secondary text */
  --laterite:#9A3E22;   /* Benin red earth */
  --earth:#8E3D25;      /* course wall */
  --pillar:#BF6B4E;     /* carved pillar */
  --coral:#B3262B;      /* coral bead */
  --bronze:#8A6A3B;     /* Igun Street bronze */
  --f-display:'Marcellus','Iowan Old Style','Times New Roman',serif;
  --f-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chalk);color:var(--ebony);font-family:var(--f-body);font-size:16px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--chalk)}
[hidden]{display:none!important}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
p{margin:0}
.eyebrow,.room{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laterite)}
.muted{color:var(--ash)}
canvas[data-art]{display:block}

/* ---------- Header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(251,249,247,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:10px}
.logo{display:block;line-height:0;flex-shrink:0}
.logo img{height:44px;width:auto}
nav.main{display:flex;gap:22px}
nav.main a{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding-block:8px;border-bottom:1px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{border-color:var(--coral);color:var(--coral)}
nav.main a.walk-link{color:var(--coral)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:transparent;border-radius:50%;cursor:pointer;place-items:center;padding:0}
.burger span{display:block;width:18px;height:1.5px;background:var(--ebony);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ebony)}
.burger span::before{top:-6px}.burger span::after{top:6px;width:12px}
@media (max-width:1180px){nav.main{gap:15px}nav.main a{font-size:.62rem;letter-spacing:.1em}.logo img{height:38px}}
@media (max-width:860px){nav.main{display:none}.burger{display:grid}}

/* ---------- Menu ---------- */
#menu{position:fixed;inset:0;z-index:60;background:var(--chalk);display:flex;flex-direction:column;overflow:auto;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  animation:menuin .35s cubic-bezier(.2,.7,.2,1)}
@keyframes menuin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-top img{height:38px;width:auto}
.menu-close{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:1.1rem;color:var(--ebony)}
#menu ol{list-style:none;margin:auto 0;padding:24px 0;display:grid;gap:2px}
#menu li a{display:grid;grid-template-columns:3rem 1fr;align-items:baseline;text-decoration:none;padding-block:12px;border-bottom:1px solid var(--line)}
#menu li a small{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;color:var(--laterite)}
#menu li a span{font-family:var(--f-display);font-size:clamp(1.7rem,7vw,2.3rem);line-height:1.1}
#menu li a[aria-current="page"] span,#menu li a.walk-link span{color:var(--coral)}
.menu-foot{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;color:var(--ash)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;font:600 .76rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ebony);background:var(--ebony);color:var(--chalk);cursor:pointer;text-decoration:none;transition:background .25s,border-color .25s,color .25s}
.btn:hover{background:var(--coral);border-color:var(--coral);color:var(--chalk)}
.btn.ghost{background:transparent;color:var(--ebony)}
.btn.ghost:hover{background:var(--ebony);color:var(--chalk);border-color:var(--ebony)}
.btn .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(179,38,43,.25)}
.textlink{font:600 .74rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--coral);padding-bottom:6px;color:var(--ebony)}
.textlink:hover{color:var(--coral)}
.ctas{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:34px}

/* ---------- Shared art furniture ---------- */
.frame{position:relative;background:var(--ebony);padding:clamp(6px,1vw,10px);box-shadow:0 40px 60px -34px rgba(23,17,15,.6),0 2px 0 rgba(23,17,15,.2)}
.frame{padding:clamp(5px,.7vw,9px)}
/* the mount: a white passe-partout between the print and the frame */
.frame img{display:block;width:100%;height:auto;box-sizing:border-box;background:#FAF8F5;padding:9%;box-shadow:inset 0 0 0 1px rgba(23,17,15,.08)}
.placard{position:relative;display:grid;gap:3px;margin-top:20px;max-width:320px;padding-left:12px;border-left:2px solid var(--coral)}
.placard .t{font-family:var(--f-display);font-size:1.06rem;line-height:1.25}
.placard .m{font-size:.84rem;color:var(--ash)}
.placard .a{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;color:var(--ash)}
.beads{flex:1;height:10px;opacity:.9;
  background:radial-gradient(circle at 50% 50%,var(--bronze) 0 3px,transparent 3.6px) 0 0/60px 10px repeat-x,
             radial-gradient(circle at 50% 50%,var(--coral) 0 3px,transparent 3.6px) 0 0/12px 10px repeat-x}
.threshold{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,4vw,36px)}
.scallop{height:10px;background:radial-gradient(circle at 50% 100%,var(--earth) 6.4px,transparent 7px) 0 0/15px 10px repeat-x}

/* ---------- Home ---------- */
.hero .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:end;padding-block:clamp(20px,4vw,52px)}
.hero h1{font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.2}
.hero .intro-line{margin-top:14px;color:var(--ash);max-width:30em}
.now{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:.84rem}
.now::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(179,38,43,.16)}
.hero .ctas{margin-top:28px}
.hero-art{display:flex;flex-direction:column;align-items:flex-end}
.hero-art a{display:block;line-height:0;max-width:100%}
.hero-art img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 150px);box-shadow:0 40px 60px -40px rgba(23,17,15,.55);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
.hero-art .caption{margin-top:12px;font-size:.78rem;color:var(--ash);align-self:flex-end}
html.intro-run .hero-art img{opacity:0;transform:scale(1.025)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;align-items:start}.hero .art-col{order:-1}.hero-art{align-items:stretch}.hero-art img{width:100%;max-height:none}.hero-art .caption{align-self:flex-start}}

.directory{padding-block:clamp(40px,7vw,88px);border-top:1px solid var(--line)}
.doors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.door{display:grid;gap:10px;text-decoration:none}
.door .arch{aspect-ratio:3/4;max-width:100%;border-radius:999px 999px 0 0;overflow:hidden;background:var(--plaster);border:5px solid var(--earth);border-bottom:0}
.door img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.door:hover img{transform:scale(1.06)}
.door small{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--laterite)}
.door span{font-family:var(--f-display);font-size:1.12rem;line-height:1.2}
.door:hover span{color:var(--coral)}
@media (max-width:860px){.doors{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:8px;scrollbar-width:none}.doors::-webkit-scrollbar{display:none}.door{flex:0 0 40%;scroll-snap-align:start}}

/* ---------- Interior page head ---------- */
.page-head{position:relative;overflow:hidden;background:var(--plaster);border-bottom:1px solid var(--line)}
.page-head .wrap{position:relative;padding-block:clamp(36px,6vw,72px) clamp(28px,4vw,48px)}
.page-head h1{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.05;margin-top:12px}
.page-head .lede{margin-top:18px;max-width:40em;color:var(--ash);font-size:1.05rem}
section.roomblock{padding-block:clamp(44px,7vw,96px)}
.band{background:var(--plaster)}

/* ---------- Statement ---------- */
.statement{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,7vw,110px)}
@media (max-width:860px){.statement{grid-template-columns:1fr}}
.statement .lead{position:sticky;top:110px;align-self:start}
@media (max-width:860px){.statement .lead{position:static}}
.statement blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.16;text-wrap:balance}
.statement blockquote::before{content:"";display:block;width:48px;height:2px;background:var(--coral);margin-bottom:24px}
.roles{margin-top:24px;display:grid;gap:4px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.prose{display:grid;gap:18px;max-width:38em;font-size:1.04rem;line-height:1.75}
.prose h2{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laterite);margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---------- Portfolio ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:28px;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;border:1px solid var(--line);background:transparent;color:var(--ebony);padding:9px 15px;border-radius:999px;font:500 .74rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--ebony)}
.chip[aria-pressed="true"]{background:var(--ebony);border-color:var(--ebony);color:var(--chalk)}
.series-intro{max-width:46em;color:var(--ash);margin:0 0 36px}
.series-intro b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.3rem;color:var(--ebony);margin-bottom:6px}
.grid{columns:3;column-gap:32px}
@media (max-width:900px){.grid{columns:2;column-gap:16px}}
.work{display:block;width:100%;text-align:left;background:none;border:0;padding:0;margin:0 0 48px;color:inherit;font:inherit;cursor:pointer;break-inside:avoid}
@media (max-width:900px){.work{margin-bottom:30px}}
.work .mount{background:var(--plaster);padding:10%}
.work .frame{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.work:hover .frame{transform:translateY(-6px);box-shadow:0 50px 60px -34px rgba(23,17,15,.65)}
.work .placard{margin-top:12px;max-width:none;gap:2px;border-left-width:1px}
.work .placard .t{font-family:var(--f-body);font-size:.88rem;font-weight:500;line-height:1.35}
.work .placard .m{font-size:.76rem}
@media (max-width:520px){.work .placard .m{font-size:.76rem}.work .placard .t{font-size:.9rem}.work .placard .a{font-size:.6rem}}

dialog.viewer{border:0;padding:0;width:min(1180px,100vw);max-width:100vw;max-height:100dvh;background:var(--chalk);color:var(--ebony)}
dialog.viewer::backdrop{background:rgba(23,17,15,.82)}
.vr{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);max-height:100dvh;overflow:auto}
.vr-art{background:var(--plaster);padding:clamp(28px,5vw,64px);display:grid;place-items:center}
.vr-art .frame{max-width:100%}
.vr-art .frame img{max-height:78dvh;width:auto;max-width:100%;padding:clamp(18px,4vw,48px)}
.vr-text{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:14px;min-width:0}
.vr-text h2{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2}
.vr-text .note{font-size:1.02rem;line-height:1.7;max-width:34em}
.vr-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.vr-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));background:var(--chalk);border:1px solid var(--line);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.1rem;color:var(--ebony)}
@media (max-width:760px){.vr{grid-template-columns:1fr}.vr-art{padding:60px 20px 24px}.vr-art .frame img{max-height:64dvh;padding:18px}}

/* ---------- Exhibitions & press ---------- */
.two{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,6vw,88px)}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.col-title{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:12px}
.ex{list-style:none;margin:0;padding:0}
.ex li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:4px 14px;padding-block:18px;border-top:1px solid var(--line)}
.ex li:last-child{border-bottom:1px solid var(--line)}
.yr{font-family:var(--f-mono);font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--laterite);padding-top:3px}
.ex .ttl{display:block;font-family:var(--f-display);font-size:1.18rem;line-height:1.3}
.ex .ven{display:block;font-size:.88rem;color:var(--ash);margin-top:3px}
.ex .det{display:block;font-size:.86rem;margin-top:6px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:4px 8px;white-space:nowrap;background:var(--chalk)}
.tag.hi{border-color:var(--coral);color:var(--coral)}
.press{list-style:none;margin:0;padding:0}
.press li{border-top:1px solid var(--line)}
.press li:last-child{border-bottom:1px solid var(--line)}
.press a{display:grid;gap:6px;padding-block:18px;text-decoration:none}
.press .out{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--laterite)}
.press .hl{font-family:var(--f-display);font-size:1.14rem;line-height:1.35}
.press .rd{font:600 .64rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.press a:hover .hl{color:var(--coral)}

/* ---------- Publication ---------- */
.pub{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,100px);align-items:center}
@media (max-width:860px){.pub{grid-template-columns:1fr}}
.book-stage{display:grid;place-items:center;padding:clamp(32px,6vw,64px);background:var(--plaster);perspective:1400px}
.book{position:relative;width:min(100%,280px);transform:rotateY(-16deg) rotateX(3deg);box-shadow:24px 30px 50px -20px rgba(23,17,15,.6);transition:transform .7s cubic-bezier(.2,.7,.2,1);line-height:0}
.book:hover{transform:rotateY(-5deg)}
.book img{width:100%;height:auto;display:block}
.book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0));z-index:1}
.facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,88px)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-grid dl{margin:0;display:grid;gap:22px;align-content:start}
.contact-grid dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.contact-grid dd{margin:4px 0 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--f-display);font-size:1.3rem;overflow-wrap:anywhere}
.copy{border:1px solid var(--line);background:transparent;font:600 .62rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;cursor:pointer;color:var(--ebony)}
.enq{list-style:none;margin:24px 0 0;padding:0;display:grid}
.enq li{padding-block:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:2.4rem 1fr;gap:10px}
.enq li:last-child{border-bottom:1px solid var(--line)}
.enq small{font-family:var(--f-mono);color:var(--laterite);font-size:.7rem;padding-top:4px}

/* ---------- The Walk ---------- */
.walk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:28px}
@media (max-width:900px){.walk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.exh{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--chalk);border:1px solid var(--line);padding:12px 12px 16px;cursor:pointer;color:inherit;font:inherit}
.exh img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--plaster)}
.exh .n{font-family:var(--f-display);font-size:1.02rem;line-height:1.25}
.exh .c{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.exh[aria-checked="true"]{border-color:var(--ebony);box-shadow:inset 0 0 0 1px var(--ebony)}
.exh[aria-checked="true"]::after{content:"Selected";position:absolute;top:18px;left:18px;background:var(--coral);color:var(--chalk);font:600 .6rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px}
.walk-foot{display:flex;gap:20px 32px;align-items:center;flex-wrap:wrap}
.walk-foot ul{display:flex;gap:8px 22px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:.88rem;color:var(--ash)}
.walk-foot li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-right:8px;vertical-align:middle}
#walk{position:fixed;inset:0;z-index:100;background:#EDE6E0;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
#walk canvas.gl{display:block;width:100%;height:100%}
.hud{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
.hud *{pointer-events:auto}
.hud.top-h{top:0;padding-top:calc(12px + env(safe-area-inset-top,0px))}
.hud.bot{bottom:0;flex-direction:column;align-items:stretch;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.pill{background:rgba(251,249,247,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(23,17,15,.12);color:var(--ebony)}
.hud-title{padding:9px 14px;display:grid;gap:1px;min-width:0}
.hud-title b{font-family:var(--f-display);font-weight:400;font-size:1rem;line-height:1.2}
.hud-title small{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.hud-btns{display:flex;gap:8px;flex-shrink:0}
.ib{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:600 .7rem/1 var(--f-body)}
.label-panel{padding:14px 16px;max-width:560px;width:100%;align-self:center;display:grid;gap:4px;transition:opacity .4s}
.label-panel .idx{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--laterite)}
.label-panel .lt{font-family:var(--f-display);font-size:1.25rem;line-height:1.2}
.label-panel .lm{font-size:.82rem;color:var(--ash)}
.label-panel .ln{font-size:.9rem;line-height:1.55;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.label-panel.open .ln{-webkit-line-clamp:unset;display:block}
.label-panel .more{justify-self:start;background:none;border:0;padding:4px 0 0;font:600 .68rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--coral);cursor:pointer}
.pad{display:flex;justify-content:center;gap:10px;margin-top:10px}
.pad button{height:52px;min-width:52px;padding:0 18px;border-radius:999px;cursor:pointer;font:600 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.pad .go{background:var(--ebony);color:var(--chalk);border-color:var(--ebony)}
.hint{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;padding:18px 22px;max-width:min(88vw,420px);pointer-events:none;transition:opacity .8s}
.hint b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.15;margin:6px 0 8px}
.hint p{font-size:.88rem;color:var(--ash)}

/* ---------- Footer: the compound wall ---------- */
.wallband{position:relative;height:clamp(120px,15vw,160px);display:grid;place-items:center;overflow:hidden;background:var(--earth)}
.wallband img{position:relative;width:min(56vw,260px);height:auto}
.foot{background:var(--earth);color:#F3E7DE}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;padding-block:4px 26px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em}
.foot a{text-decoration:none;border-bottom:1px solid rgba(243,231,222,.35)}
.foot a:hover{border-color:#F3E7DE}

/* ---------- Opening: the signature on a darkened screen ---------- */
.opening{position:fixed;inset:0;z-index:300;background:#120D0B;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px;text-align:center;
  animation:openfade .9s 3.1s ease forwards}
.opening img{width:min(72vw,520px);height:auto;clip-path:inset(0 100% 0 0);animation:write 1.4s .45s cubic-bezier(.6,0,.2,1) forwards}
.opening .bead-line{display:block;height:10px;width:0;animation:grow 1s 1.5s cubic-bezier(.2,.7,.2,1) forwards;background:radial-gradient(circle at 50% 50%,#C9806A 0 3px,transparent 3.6px) 0 0/12px 10px repeat-x}
.opening p{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#E8DCD3;opacity:0;animation:fadein .8s 1.8s forwards}
.opening .skip{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:transparent;border:1px solid rgba(232,220,211,.4);color:#E8DCD3;padding:10px 16px;font:600 .64rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.opening.out{animation:openfade .5s ease forwards}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
@keyframes fadein{to{opacity:.85}}
@keyframes grow{to{width:min(50vw,200px)}}
@keyframes openfade{to{opacity:0;visibility:hidden}}

/* Quiet page change: a cross-fade */
@view-transition{navigation:auto}
main{animation:pagein .5s ease both}
@keyframes pagein{from{opacity:.25}to{opacity:1}}

/* ---------- Contact form ---------- */
form.enquiry{display:grid;gap:20px}
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field label,.field legend{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);padding:0}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ebony);background:var(--chalk);border:1px solid var(--line);border-radius:0;padding:12px 14px;width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ebony);box-shadow:inset 0 0 0 1px var(--ebony)}
fieldset.field{border:0;margin:0;padding:0}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cats label{font:500 .8rem/1 var(--f-body);letter-spacing:.02em;text-transform:none;color:var(--ebony);border:1px solid var(--line);padding:10px 14px;border-radius:999px;cursor:pointer;background:var(--chalk)}
.cats label{position:relative}
.cats input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.cats label:has(input:checked){background:var(--ebony);border-color:var(--ebony);color:var(--chalk)}
.cats label:has(input:focus-visible){outline:2px solid var(--coral);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.form-status{font-size:.92rem;border-left:2px solid var(--coral);padding:4px 0 4px 12px}
.form-status.err{color:var(--laterite)}
.or-email{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.opening{display:none}}
.contact-grid dd span,.contact-grid dd a{min-width:0;overflow-wrap:anywhere}
.contact-grid>*{min-width:0}

/* ---------- Round 5 ---------- */
.red{color:var(--coral)}
@media (min-width:861px){
  .hero .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
  .hero .text-col{justify-self:center;max-width:30rem}
  .hero h1{white-space:nowrap;font-size:clamp(1.35rem,2.05vw,1.9rem)}
}
/* statement portrait */
.portrait{margin:0;display:grid;gap:18px;align-content:start}
.portrait img{display:block;width:auto;max-width:100%;max-height:calc(100svh - 170px);height:auto}
.portrait .pname{display:block;font-family:var(--f-display);font-size:1.35rem;line-height:1.2}
.portrait .roles{margin-top:10px}
@media (max-width:860px){.portrait{grid-template-columns:minmax(0,9fr) minmax(0,10fr);align-items:end;gap:16px}.portrait img{max-height:none;width:100%}.portrait .pname{font-size:1.15rem}}
/* contact chips: clearly clickable */
.cats label{transition:background .2s,border-color .2s,color .2s}
.cats label:hover{border-color:var(--ebony);background:var(--plaster)}
.cats label:has(input:checked):hover{background:var(--ebony)}
/* CV */
.cv-intro{display:grid;gap:4px;margin-bottom:clamp(28px,4vw,44px);max-width:46em}
.cv-intro b{font-family:var(--f-display);font-weight:400;font-size:1.3rem}
.cv-h{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laterite);margin:clamp(36px,5vw,56px) 0 12px}
.cv-intro+.cv-h{margin-top:0}
.cv .ex li{grid-template-columns:4.2rem minmax(0,1fr) auto}
.cv .ex .ttl a{text-decoration:none;border-bottom:1px solid var(--coral)}
.flyer{display:block;width:clamp(84px,14vw,170px)}
.flyer:empty{width:0}
a.flyer{border:1px solid var(--line);background:var(--chalk);padding:4px;transition:border-color .2s,transform .3s}
a.flyer:hover{border-color:var(--ebony);transform:translateY(-2px)}
.flyer img{display:block;width:100%;height:auto}
@media (max-width:640px){.cv .ex li{grid-template-columns:3.2rem minmax(0,1fr)}.flyer{grid-column:2;width:min(220px,100%);margin-top:10px}.flyer:empty{display:none}}
.press-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.press-grid{grid-template-columns:1fr}}
.clip{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ebony);background:var(--chalk);border:1px solid var(--line);padding:22px 22px 18px;box-shadow:0 1px 0 rgba(23,17,15,.04);transition:border-color .2s,box-shadow .3s,transform .3s;min-width:0}
.clip:hover{border-color:var(--ebony);box-shadow:0 22px 40px -28px rgba(23,17,15,.45);transform:translateY(-3px)}
.clip .mast{font-family:var(--f-display);font-size:1.5rem;line-height:1.1;padding-bottom:10px;border-bottom:2px solid var(--ebony)}
.clip .kind{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--laterite)}
.clip .hl{font-family:var(--f-display);font-size:1.12rem;line-height:1.35}
.clip .by{font-size:.86rem;font-weight:600}
.clip blockquote{margin:6px 0 0;padding-left:14px;border-left:2px solid var(--coral);font-size:.98rem;line-height:1.55;color:var(--ash);font-style:italic}
.clip .go{margin-top:auto;padding-top:14px;align-self:flex-start;display:inline-flex;gap:8px;font:600 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--chalk);background:var(--ebony);padding:12px 16px;transition:background .2s}
.clip .go{margin-top:auto}
.clip:hover .go{background:var(--coral)}
.clip.critic{background:var(--plaster)}
.ex .det a{color:var(--laterite);text-decoration:none;border-bottom:1px solid var(--coral);white-space:nowrap}

/* ---------- Portfolio: project index and project exhibition view ---------- */
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(20px,3vw,40px)}
@media (max-width:700px){.projects{grid-template-columns:1fr}}
.pcard{display:grid;gap:14px;text-decoration:none;color:var(--ebony)}
.pcover{display:block;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:var(--plaster)}
.pcover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcover img{transform:scale(1.04)}
.pinfo{display:grid;gap:3px;padding-left:12px;border-left:2px solid var(--coral)}
.pt{font-family:var(--f-display);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.15}
.pt.untitled,h2.untitled{color:var(--ash);font-style:italic}
.ps{font-size:.92rem;color:var(--ash)}
.pm{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--laterite)}
.pcard:hover .pt{color:var(--coral)}
.project-view .back{display:inline-block;margin-bottom:24px;font:600 .72rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ash)}
.project-view .back:hover{color:var(--coral)}
.pv-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:end;padding-bottom:clamp(28px,4vw,44px);margin-bottom:clamp(28px,4vw,44px);border-bottom:1px solid var(--line)}
@media (max-width:760px){.pv-head{grid-template-columns:1fr}}
.pv-head h2{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.04;margin-top:10px}
.pv-sub{margin-top:8px;font-family:var(--f-display);font-size:1.2rem;color:var(--ash)}
.pv-note{margin-top:16px;max-width:42em;color:var(--ash);line-height:1.7}
.pv-actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.pv-next{margin-top:clamp(40px,6vw,80px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line);max-width:560px}
.pv-next .pinfo .room{margin-bottom:4px}
.work .placard .m{font-family:var(--f-mono);letter-spacing:.06em}
/* project works keep their exhibition order, row by row */
.project-view .grid{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
@media (max-width:900px){.project-view .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}}
.project-view .work{margin:0}
.project-view .work .mount{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:8%}
.project-view .work .frame img{width:auto;max-width:100%;max-height:clamp(150px,22vw,300px)}