/* ============ Light scheme (site default since Oct 2026: white pages, original photographs, no tint) ============
   main.css is written against tokens, so the scheme is a token swap. The generated rules below pin the text that sits on
   photographs, amber and the pale panels to dark, because those would otherwise flip with the tokens. */
html.nemo-light{--ink:#ffffff;--ink-2:#f6f6f4;--ink-3:#eeeeeb;--line:#e3e2de;--line-2:#cbcac5;--fog:#666a71;--fog-2:#3d4046;--fog-3:#8a8e95;--bone:#f6f6f4;--bone-2:#ecebe7;--txt:#0e0f11;--txt-2:#3d4046;--txt-3:#666a71}
:where(html.nemo-light) ::selection{color:#0e0f11}
:where(html.nemo-light) .btn.primary{color:#0e0f11}
:where(html.nemo-light) .btn.dark{background:#0e0f11;border-color:#0e0f11;color:#fff}
:where(html.nemo-light) #hdr.fog .logo{color:#0e0f11}
:where(html.nemo-light) #hdr.fog nav a:hover,:where(html.nemo-light) #hdr.fog nav a.on{color:#0e0f11}
:where(html.nemo-light) #hdr.fog #cartbtn{color:#0e0f11}
:where(html.nemo-light) #hdr.fog #cartbtn b{background:#0e0f11;color:#fff}
:where(html.nemo-light) #hdr.fog #burger i{background:#0e0f11;box-shadow:0 -5px 0 #0e0f11,0 5px 0 #0e0f11}
:where(html.nemo-light) #hdr nav a.new::after{color:#96500a}
:where(html.nemo-light) .hero{color:#0e0f11}
:where(html.nemo-light) .hero .hprog i{background:#0e0f11}
:where(html.nemo-light) .hero .hdots button.on::before{background:#0e0f11}
:where(html.nemo-light) .hpause{color:#0e0f11}
:where(html.nemo-light) .hero .copy h1{color:#0e0f11}
:where(html.nemo-light) .hero .copy .eyebrow::before{background:#0e0f11}
:where(html.nemo-light) .hero .cta .btn{color:#0e0f11}
:where(html.nemo-light) .hero .cta .btn.primary{background:#0e0f11;border-color:#0e0f11;color:#fff}
:where(html.nemo-light) .hero .hud b{color:#0e0f11}
:where(html.nemo-light) .callout{color:#0e0f11}
:where(html.nemo-light) .callout .v{border-left:2px solid #0e0f11}
:where(html.nemo-light) .callout .ln{background:#0e0f11}
:where(html.nemo-light) .callout .ln::after{background:#0e0f11}
:where(html.nemo-light) .c2 .v{border-right:2px solid #0e0f11}
:where(html.nemo-light) .c4 .v{border-right:2px solid #0e0f11}
:where(html.nemo-light) .pricecard{background:#0e0f11;color:#fff}
@media (max-width:700px){:where(html.nemo-light) .hero-mobile .hm-cta{color:#96500a}}
:where(html.nemo-light) .card{color:#0e0f11}
:where(html.nemo-light) .card .badge{background:#0e0f11;color:#fff}
:where(html.nemo-light) .card .av{color:#0e0f11}
:where(html.nemo-light) .cat{color:#0e0f11}
:where(html.nemo-light) .cat.dark h3{color:#96500a}
:where(html.nemo-light) .row-i:hover h3{color:#96500a}
:where(html.nemo-light) .film:hover .play i::after{border-left-color:#0e0f11}
:where(html.nemo-light) .ex-hero{color:#0e0f11}
:where(html.nemo-light) .ex-hero .back:hover{color:#0e0f11}
:where(html.nemo-light) .ex-hero .hud b{color:#0e0f11}
:where(html.nemo-light) .ex-hero .meta b{color:#0e0f11}
:where(html.nemo-light) .ex-hero .cta .btn{color:#0e0f11}
:where(html.nemo-light) .ex-hero .cta .btn.primary{background:#0e0f11;border-color:#0e0f11;color:#fff}
:where(html.nemo-light) .ex-parts .wall span:hover{color:#0e0f11}
:where(html.nemo-light) .ex-nav a:hover b{color:#96500a}
:where(html.nemo-light) .yt .frame .lbl b{color:#96500a}
:where(html.nemo-light) .shop-feat{color:#0e0f11}
:where(html.nemo-light) .shop-feat .txt .eyebrow::before{background:#0e0f11}
:where(html.nemo-light) .shop-feat .specs span{border-left:2px solid #0e0f11}
:where(html.nemo-light) .shop-feat .cta .btn{color:#0e0f11}
:where(html.nemo-light) .shop-feat .cta .btn.primary{background:#0e0f11;border-color:#0e0f11;color:#fff}
:where(html.nemo-light) .shop-feat .dots button.on{background:#0e0f11}
:where(html.nemo-light) .shop-feat .tag{color:#0e0f11}
:where(html.nemo-light) .pcard .pill{background:#0e0f11;color:#fff}
:where(html.nemo-light) .pcard.big .card .story .eyebrow{color:#96500a}
:where(html.nemo-light) .app-strip{color:#0e0f11}
:where(html.nemo-light) .app-strip .it b{color:#0e0f11}
:where(html.nemo-light) .ch .yr b{color:#96500a}
:where(html.nemo-light) .step::before{color:#96500a}
:where(html.nemo-light) .event .date small{color:#96500a}
:where(html.nemo-light) #curtain .logo{color:#0e0f11}
:where(html.nemo-light) form.cart .single_add_to_cart_button,:where(html.nemo-light) .woocommerce button.button,:where(html.nemo-light) .woocommerce a.button,:where(html.nemo-light) .woocommerce input.button,:where(html.nemo-light) .wc-block-components-button,:where(html.nemo-light) .checkout-button{color:#0e0f11}
:where(html.nemo-light) .prose a{color:#96500a}
:where(html.nemo-light) .yt .frame .lbl{color:#0e0f11}
:where(html.nemo-light) .nc-title:hover{color:#96500a}
:where(html.nemo-light) .nc-side .cart_totals .shipping-calculator-button{color:#96500a}
:where(html.nemo-light) .woocommerce-checkout .required{color:#96500a}
:where(html.nemo-light) form.cart .variations .reset_variations{color:#96500a}
:where(html.nemo-light) .show .yr{color:#96500a}
:where(html.nemo-light) .contact-mail:hover{color:#96500a}
:where(html.nemo-light) .skip{color:#0e0f11}
:where(html.nemo-light) .ex-hero .cta .ex-ask{color:#0e0f11}
:where(html.nemo-light) .cv-year .yr b{color:#96500a}
:where(html.nemo-light) .cv-list .t a:hover{color:#96500a}
:where(html.nemo-light) .comm-seq figcaption .n{color:#96500a}
html.nemo-light .hero,html.nemo-light .hero-pin,html.nemo-light .ex-hero{background:#fff}
html.nemo-light #hdr.solid{background:rgba(255,255,255,.92)}
html.nemo-light #hdr nav a:hover{background:rgba(14,15,17,.06)}
html.nemo-light .btn{background:rgba(14,15,17,.02)}
html.nemo-light .btn:hover{background:rgba(14,15,17,.06)}
html.nemo-light .btn.primary{background:var(--amber)}
html.nemo-light .btn.primary:hover{background:var(--amber-2)}
/* Photographs, not cut-outs: nothing is multiplied onto the page colour or tinted, and there is no fake floor shadow. */
.hero .stage .imgs,.ex-hero .stage img,.gallery .g img{mix-blend-mode:normal}
.hero .stage img,.ex-hero .stage img{filter:none}
.hero .stage .shadow{display:none}
html.nemo-light .band{background:linear-gradient(120deg,#f6f6f4,#eeeeeb)}
html.nemo-light .toolbar{background:rgba(255,255,255,.92)}
html.nemo-light .cat.dark .cap{background:linear-gradient(0deg,rgba(246,246,244,.98) 55%,rgba(246,246,244,0))}
@media (max-width:700px){html.nemo-light #hdr.fog.scrolled{background:rgba(255,255,255,.92)}html.nemo-light .cat.dark .cap{background:linear-gradient(90deg,rgba(246,246,244,.96) 55%,rgba(246,246,244,.3))}}
/* Things that sit on top of a photograph or video stay dark-on-light-text whatever the scheme. */
html.nemo-light .film,html.nemo-light #lb,html.nemo-light .yt .frame,html.nemo-light .gallery .g .g-cap{--ink:#0e0f11;--ink-2:#15171a;--ink-3:#1e2125;--line:#2a2e33;--line-2:#3a3f46;--txt:#f2f1ee;--txt-2:#b9bbb8;--txt-3:#7d8085}
/* A piece page gives the photo the wider column. */
@media (min-width:901px){.ex-hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}}
html.nemo-light .btn.dark{background:#0e0f11;border-color:#0e0f11;color:#fff}

/* ---- Home hero: same layout as before (photo centred, specs either side, name + buttons along the bottom), with a larger rounded photo and no headline. ---- */
.hero .stage img,.ex-hero .stage img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:18px}
.hero .copy h1.hero-name,.hero-name{font-family:var(--head);font-weight:700;font-size:var(--hn);letter-spacing:-.03em;line-height:1;color:#0e0f11;margin-top:12px;max-width:none}
.hero-pin{--hn:clamp(34px,5vw,72px)} /* the name: same size as a full section title */
.hero-sub{margin-top:10px;font-size:15px;line-height:1.5;color:var(--txt-2);max-width:42ch}
.hero .copy .eyebrow{margin-bottom:0}
/* The photo lane sits between the header and the bottom row, so a short window shrinks the photo instead of sliding it under the menu. */
@media (min-width:701px){
.hero .stage{top:calc(76px + 14px);bottom:clamp(20px,4vh,48px)}
.hero .stage .imgs{height:min(100%,880px);width:min(52vw,820px)}
/* Tighter: the side notes spread down the photo's height and sit closer to it; the bottom row sits a little higher. */
.hero .copy{bottom:clamp(20px,4vh,48px)}
.hero .callout{max-width:300px}
.hero .c1 .ln{width:clamp(60px,9vw,150px)}
.hero .c2 .ln{width:clamp(70px,10vw,170px)}
.hero .c3{top:max(calc(76px + 250px),calc(76px + 40vh))}.hero .c3 .ln{width:clamp(70px,11vw,180px)}
.hero .c4{top:max(calc(76px + 235px),calc(76px + 38vh))}.hero .c4 .ln{width:clamp(60px,8vw,140px)}
}
/* When a slide's photo would touch the name or buttons (see fitHero in main.js), the lane ends above the bottom row. */
@media (min-width:1001px){.hero-pin.hero-tight .stage{bottom:calc(clamp(20px,4vh,48px) + var(--hn) + 50px)}}
/* Tablets: no room for side notes; photo in the middle, name and buttons under it. */
@media (min-width:701px) and (max-width:1000px){
.hero .callout{display:none}
.hero .stage{top:calc(76px + 110px);bottom:210px}
.hero .stage .imgs{width:min(80vw,720px)}
.hero .copy{grid-template-columns:1fr;gap:16px}
.hero .cta{justify-content:flex-start}
}
@media (max-width:700px){
.hero .stage{min-height:46vh;max-height:60vh;margin:8px 0 14px}
.hero .stage img{border-radius:14px}
.hero .copy h1.hero-name{margin-top:8px}
}
@media (max-width:640px){.hero-pin{--hn:clamp(38px,10vw,48px)}}
@media (min-width:641px) and (max-width:1100px){.hero-pin{--hn:clamp(36px,6vw,56px)}}
/* Short windows (small laptops): the name gives a little back so the photo keeps its height. */
@media (min-width:1001px) and (max-height:700px){.hero-pin{--hn:clamp(30px,3.6vw,48px)}}
@media (max-width:900px){.ex-hero .stage img{border-radius:14px}}

/* ---- Product page: square main window; photos fit inside it uncropped, the video plays letterboxed in the middle ---- */
[data-page="product"] .film[data-main] img,[data-page="product"] .film.as-photo img{object-fit:contain;padding:0}
[data-page="product"] .film:has(iframe){background:#0e0f11!important} /* beats the inline poster colour */
[data-page="product"] .film:has(iframe) img{opacity:0}
[data-page="product"] .film iframe{top:50%;bottom:auto;height:auto;aspect-ratio:16/9;transform:translateY(-50%)}
/* Sold pieces in the shop grid */
.pcard .pill.sold{background:#e9e7e1;color:#3d4046}
.pcard .pill.sold .amount{color:inherit;opacity:.7}
/* Piece page: details list under the title, video window in the video's own shape, prev/next under the photos */
.ex-hero .ex-plate{position:static;top:auto;max-width:520px}
.ex-hero .ex-plate div{padding:12px 0;grid-template-columns:104px 1fr}
.ex-body.solo{grid-template-columns:1fr}
.ex-body.solo .ex-text{max-width:920px}
.ex-video[style*="--ar"] .film{aspect-ratio:var(--ar);background:#0e0f11}
.ex-video[style*="--ar"] .film,.ex-video[style*="--ar"] .cap{width:min(100%,calc(82vh * var(--ar)));margin-inline:auto}
.ex-video[style*="--ar"] .film.no-frame{background:radial-gradient(90% 70% at 50% 35%,#f4f3ef,#dedbd3)}
.ex-video[style*="--ar"] .film.no-frame img{object-fit:contain}
.ex-navwrap{padding-bottom:clamp(36px,5vw,72px)}
.ex-navwrap .ex-nav{margin-top:0}
.ex-gallery:has(+ .ex-navwrap){padding-bottom:clamp(36px,5vw,72px)}
/* Tighter space between sections on the home page and on piece pages: every gap matches the one under the landing photo */
[data-page="home"],[data-page="piece"]{--gap:clamp(28px,4vw,48px)}
[data-page="home"] .section{padding-top:var(--gap);padding-bottom:var(--gap)}
[data-page="home"] .sec-head,[data-page="piece"] .sec-head{margin-bottom:clamp(20px,2.4vw,32px)}
[data-page="piece"] .ex-video{padding-bottom:var(--gap)}
[data-page="piece"] .ex-body{padding:0 0 var(--gap)}
[data-page="piece"] .ex-gallery,[data-page="piece"] .ex-gallery:has(+ .ex-navwrap){margin-top:0;padding-bottom:var(--gap)}
[data-page="piece"] .ex-navwrap{padding-bottom:var(--gap)}
[data-page="piece"] .ex-parts{padding-top:var(--gap);padding-bottom:var(--gap)}
[data-page="piece"] .ex-navwrap + .ex-parts{border-top:0;padding-top:0}
[data-page="piece"] .ex-rel{padding-top:var(--gap)}
/* Product page: the main window takes the video's shape while the video is showing, and is square for photos */
[data-page="product"] .film[style*="--ar"]{aspect-ratio:var(--ar)}
[data-page="product"] .film[style*="--ar"].as-photo{aspect-ratio:1}
[data-page="product"] .film[style*="--ar"] iframe{top:0;bottom:0;height:100%;aspect-ratio:auto;transform:none}
/* Tighter space between sections, site-wide: every page uses the same gap as the home page */
:root{--gap:clamp(28px,4vw,48px)}
.section{padding-top:var(--gap);padding-bottom:var(--gap)}
.sec-head{margin-bottom:clamp(20px,2.4vw,32px)}
.related,.shop-body,.app-strip,.nc-picks,.contact-news,.cv,.comm-seq,.comm-done,.comm-form,.ws-hero,.ws-what,.ws-shots,.ws-lectures,.ws-cta,.about-photo{margin-top:var(--gap)}
.exh-index,.about-bio,.about-process,.about-shows{padding-top:var(--gap)}
.page .band[style*="margin-top"],.page .events[style*="margin-top"]{margin-top:var(--gap)!important}
.page>.wrap.section[style*="padding-top:clamp"]{padding-top:var(--gap)!important}
.page>.wrap[style*="padding-bottom:clamp"]{padding-bottom:var(--gap)!important}
[data-page="exhibit"] .exh-head,[data-page="exhibit"] .ex-video,[data-page="exhibit"] .exh-body,[data-page="exhibit"] .exh-gallery{padding-bottom:var(--gap)}
[data-page="exhibit"] .ex-rel{border-top:0;padding-top:0}
[data-page="exhibit"] .ex-rel .ex-nav{margin-top:0}
/* Piece page, phone/tablet layout: no back link / piece number / category / year block between the photo and the title */
@media (max-width:900px){[data-page="piece"] .ex-hero .left>div:first-child{display:none}}
/* Materials as a plain sentence instead of tags */
.ex-parts .parts-text{margin-top:clamp(14px,2vw,22px);font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--txt-2);max-width:68ch}
.ex-navwrap+.ex-rel{border-top:0;padding-top:0}
/* Menu bar: white backing as soon as the page moves, also over the home slideshow and the piece photo (it was see-through there on wide screens) */
html.nemo-light #hdr.fog.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(14,15,17,.12)}
/* The Journey: each year is a row that opens and closes */
details.cv-year{display:block;padding:0;border-top:1px solid var(--line)}
details.cv-year>summary{list-style:none;display:flex;align-items:baseline;gap:16px;padding:clamp(14px,1.6vw,20px) 0;cursor:pointer}
details.cv-year>summary::-webkit-details-marker{display:none}
details.cv-year>summary:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:6px}
details.cv-year .yr b{display:inline;position:static;font-size:clamp(26px,2.8vw,40px)}
details.cv-year .yr .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
details.cv-year .yr::after{content:"+";margin-left:auto;align-self:center;font-family:var(--head);font-size:28px;line-height:1;color:var(--txt-2);transition:transform .2s}
details.cv-year[open] .yr::after{transform:rotate(45deg)}
details.cv-year .yr:hover::after{color:var(--txt)}
details.cv-year .cv-list{padding:0 0 clamp(16px,2vw,26px)}
details.cv-year.hide{display:none}
/* Every page's main title uses the Portfolio title format */
.about-hero h1,.jhero h1,.contact-intro h1,.exh-head h1,.ex-hero h1,.detail .side h1{font-size:clamp(34px,5vw,72px);letter-spacing:-.02em;line-height:1;max-width:none}
.about-hero h1,.jhero h1,.contact-intro h1,.exh-head h1{margin:12px 0 14px}
@media (min-width:641px) and (max-width:1100px){.about-hero h1,.jhero h1,.contact-intro h1,.exh-head h1,.ex-hero h1,.detail .side h1{font-size:clamp(36px,6vw,56px)}}
@media (max-width:640px){.about-hero h1,.jhero h1,.contact-intro h1,.exh-head h1,.ex-hero h1,.detail .side h1{font-size:clamp(38px,10vw,48px)}}
/* The Journey: button down to the exhibition list (replaces the press-name pills); the list lands below the menu bar */
.jhero-jump{margin-top:28px;display:flex}
#history,details.cv-year{scroll-margin-top:96px}
/* The Journey title: "showing up" in plain solid type like the rest of the title */
.jhero h1 em{color:inherit;-webkit-text-stroke:0}
/* Accessibility: shop grid heading is an h2 (it follows the page's h1); the price on a Sold pill is readable */
.shop-top h2{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;margin:0}
@media (max-width:640px){.shop-top h2{font-size:26px}}
.pcard .pill.sold .amount{opacity:1;color:#55585e}
/* Commissions: the steps (one column) beside the inquiry form, then the photo sequence, then every commissioned piece */
.comm-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(20px,3vw,36px)}
.comm-top .steps-flow{grid-template-columns:1fr;margin-top:0}
.comm-top .comm-closing{margin-top:clamp(20px,3vw,32px)}
.comm-top .comm-form{margin:0;max-width:none;position:sticky;top:96px}
@media (max-width:900px){.comm-top{grid-template-columns:1fr}.comm-top .comm-form{position:static}}
.comm-done .sec-head{margin-bottom:clamp(16px,2vw,24px)}
.comm-done .sec-head .count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
/* piece hero: title and details sit on a layer above the photo (as on the home page), so a long title is never covered */
.ex-hero .left{position:relative;z-index:2}
.ex-hero .stage{z-index:1}
/* touch screens: small text links get a finger-sized hit area (24px+), without changing how they look */
@media (pointer:coarse),(max-width:900px){
  .link,.back,.ex-hero .back,.hero-mobile .hm-cta,form.cart .variations .reset_variations{min-height:32px}
  #hudBuy{display:inline-flex;align-items:center;min-height:32px}
}