/* Naela Aamir — site styles. Colours and type follow the brand system:
   sage paper, deep garden green, Amaltas gold, Gulmohr red; Marcellus + Jost. */
:root{
  --bg:#EEF0E6; --panel:#E2E6D6; --fg:#1F3B2F; --muted:#5A6257; --rule:#C6CCBB;
  --gold:#D9A91A; --gulmohr:#B8321F; --lattice:#EEF0E6; --band:#1F3B2F; --band-fg:#EEF0E6;
  --serif:"Marcellus","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13211A; --panel:#1A2C23; --fg:#E6EADD; --muted:#A3AB9B; --rule:#2D4035;
    --lattice:#E6EADD; --band:#0E1813; --band-fg:#E6EADD;
  }
}
:root[data-theme="dark"]{
  --bg:#13211A; --panel:#1A2C23; --fg:#E6EADD; --muted:#A3AB9B; --rule:#2D4035;
  --lattice:#E6EADD; --band:#0E1813; --band-fg:#E6EADD;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%;display:block}
p + p{margin-top:1rem}
.wrap{width:min(1180px,100% - 3rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem}

/* announcement */
.announce{background:var(--fg);color:var(--bg);font-size:.92rem;text-align:center;padding:.55rem 0}
.announce a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px}

/* header */
.site-head{padding:1.5rem 0}
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.mark{font-family:var(--serif);font-size:1.25rem;text-decoration:none}
.site-head nav{display:flex;gap:1.7rem;font-size:.97rem}
.site-head nav a{text-decoration:none;color:var(--muted);padding:.2rem 0;border-bottom:1px solid transparent}
.site-head nav a:hover{color:var(--fg)}
.site-head nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--gold)}
.menu-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--fg);font:inherit;font-size:.9rem;padding:.35rem .9rem;border-radius:999px;cursor:pointer}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center;padding:3rem 0 5rem}
.hero h1{font-size:clamp(3.4rem,9vw,7.5rem);letter-spacing:-.01em;line-height:1.02}
.hero h1 span{display:block}
.lede{font-size:1.3rem;max-width:32ch;margin-top:1.8rem;line-height:1.5}
.sub{color:var(--muted);max-width:44ch;margin-top:1rem}
.actions{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.8rem 1.5rem;border:1px solid var(--fg);text-decoration:none;font-weight:400;border-radius:999px;background:none;color:var(--fg);font-family:var(--sans);font-size:1rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#1F3B2F}
.text-link{text-decoration-color:var(--gold);text-underline-offset:5px;font-weight:400}
.text-link:hover{color:var(--gold)}
.text-link.on-dark{color:var(--band-fg)}

/* arch window with pinjra screen */
.window-wrap{position:relative;justify-self:end;width:100%;max-width:470px}
.window{position:relative;aspect-ratio:4/5;width:100%;clip-path:url(#arch);background:var(--panel)}
.window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.window .screen{position:absolute;inset:0;color:var(--lattice);opacity:.85;transition:opacity 2.4s ease .5s}
.loaded .window .screen{opacity:.08}
.window-wrap figcaption{font-size:.85rem;color:var(--muted);margin-top:.8rem;text-align:right}

/* sections */
section{padding:5.5rem 0;border-top:1px solid var(--rule)}
section.flush{border-top:none;padding-top:1rem}
h2{font-size:clamp(2.1rem,4.5vw,3.2rem);max-width:22ch}
h2.small-h{font-size:1.6rem;max-width:none;padding-bottom:.8rem;border-bottom:1px solid var(--rule);margin-bottom:.5rem}
.intro{max-width:60ch;margin-top:1.2rem;color:var(--muted)}
.intro a{color:var(--fg);text-decoration-color:var(--gold);text-underline-offset:4px}
.more{margin-top:2.5rem}
.page-head{padding:2.5rem 0 3rem}
.page-head h1{font-size:clamp(2.8rem,7vw,5.2rem);max-width:18ch;line-height:1.05}
.empty{color:var(--muted)}

/* seasons */
.seasons{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3rem;border-top:1px solid var(--rule)}
.season{padding:1.4rem 1.4rem 0 0}
.season + .season{padding-left:1.4rem;border-left:1px solid var(--rule)}
.season .when{font-size:.9rem;color:var(--muted)}
.season h3{font-size:1.5rem;margin:.3rem 0 .4rem;display:flex;align-items:center;gap:.6rem}
.dot{width:.75rem;height:.75rem;border-radius:50%;flex:none}

/* painted on the spot */
.onsite{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:center;margin-top:4.5rem}
.onsite img{width:100%;height:auto}
.onsite h3{font-size:2rem;max-width:16ch}
.onsite p{margin-top:1rem;max-width:46ch;color:var(--muted)}

/* gallery: paintings keep their own proportions */
.gallery{columns:3;column-gap:2rem;margin-top:3.5rem}
.piece{display:block;break-inside:avoid;margin-bottom:2.4rem;text-decoration:none}
.piece[hidden]{display:none}
.piece .frame{position:relative;background:var(--panel);padding:.8rem;transition:background .25s}
.piece:hover .frame{background:var(--rule)}
.piece img{width:100%;height:auto}
.cap{margin-top:.75rem;display:flex;flex-direction:column}
.cap .t{font-family:var(--serif);font-size:1.15rem;line-height:1.3}
.cap .n{color:var(--muted);font-size:.88rem}
.cap .price{font-size:.9rem;margin-top:.2rem}
.badge{display:inline-block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;background:var(--bg);color:var(--fg);border:1px solid var(--rule);font-weight:400;vertical-align:middle}
.frame .badge{position:absolute;top:1.3rem;left:1.3rem}
.badge-available{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.badge-reserved{background:var(--gold);color:#1F3B2F;border-color:var(--gold)}
.badge-sold{background:var(--gulmohr);color:#fff;border-color:var(--gulmohr)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.chip{font:inherit;font-size:.92rem;padding:.4rem 1rem;border-radius:999px;border:1px solid var(--rule);background:none;color:var(--muted);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* painting detail */
.painting{display:grid;grid-template-columns:1.25fr .75fr;gap:4rem;align-items:start;padding:2rem 0 4rem}
.frame.big{display:block;background:var(--panel);padding:1.2rem;cursor:zoom-in}
.frame.big img{width:100%;height:auto;max-height:80vh;object-fit:contain;margin:auto}
.thumbs{display:flex;gap:.8rem;margin-top:.8rem;flex-wrap:wrap}
.thumbs a{display:block;width:96px;background:var(--panel);padding:.4rem}
.thumbs img{width:100%;height:80px;object-fit:cover}
.painting-info{position:sticky;top:1.5rem}
.crumbs{font-size:.9rem;color:var(--muted)}
.crumbs a{text-underline-offset:4px}
.painting-info h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-top:.8rem}
.painting-info .note{color:var(--muted);font-size:1.15rem}
.titling{margin-top:1rem;font-size:.95rem;letter-spacing:.02em}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.5rem;margin:1.6rem 0;padding:1.2rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.97rem}
.facts dt{color:var(--muted)}
.availability{margin:1rem 0 1.4rem}

/* exhibitions and press */
.record{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:3rem}
.record h3{font-size:1.35rem;padding-bottom:.8rem;border-bottom:1px solid var(--rule)}
.entries{list-style:none}
.entries li{padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.entries .title{font-family:var(--serif);font-size:1.3rem;display:block;line-height:1.3}
.entries .title a{text-decoration-color:var(--gold);text-underline-offset:4px}
.entries .where{color:var(--muted);font-size:.95rem;display:block}
.show{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;padding:2.2rem 0;border-bottom:1px solid var(--rule)}
.show h3{font-size:2rem}
.show .where{color:var(--muted);margin-top:.4rem}
.show-body{color:var(--muted)}
.show-body p{max-width:58ch}
.show-body .text-link{color:var(--fg)}
.show-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-top:1.5rem}
.show-media a{display:block;background:var(--panel);padding:.5rem;cursor:zoom-in}
.show-media img{width:100%;aspect-ratio:1;object-fit:cover}
.show-media figcaption{font-size:.82rem;margin-top:.4rem}
.press-item{display:flex;gap:1.2rem;align-items:center}
.press-item img{width:84px;height:84px;object-fit:cover}

/* scholarship */
.scholar{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}
.scholar figure img{width:100%;height:auto}
.scholar figcaption{font-size:.85rem;color:var(--muted);margin-top:.6rem}
.scholar .lede{margin-top:0;max-width:40ch}
.scholar p{max-width:60ch}
.list-h{font-size:1.35rem;margin-top:2.5rem}
.topics{list-style:none;margin-top:1rem;border-top:1px solid var(--rule)}
.topics li{padding:.8rem 0 .8rem 2rem;border-bottom:1px solid var(--rule);position:relative}
.topics li::before,.topics li::after{content:"";position:absolute;left:0;top:1.25rem;width:.8rem;height:.8rem;border:1px solid var(--gold)}
.topics li::before{transform:rotate(45deg)}
.two-col{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}
.two-col h2{font-size:2.2rem}
.pubs a.read{display:inline-block;margin-top:.3rem;font-size:.92rem;color:var(--muted);text-decoration-color:var(--gold);text-underline-offset:4px}
.pubs a.read:hover{color:var(--gold)}
.teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.teaser-grid p{color:var(--muted);max-width:52ch}
.teaser-grid .text-link{color:var(--fg)}

/* studio band */
.band{background:var(--band);color:var(--band-fg);border-top:none;position:relative;overflow:hidden}
.band .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:end}
.band > .screen{position:absolute;inset:0;color:var(--band-fg);opacity:.06;pointer-events:none}
.band .intro{color:inherit;opacity:.85}
.talks{border:1px solid rgba(230,234,221,.3);padding:2rem}
.talks h3{font-size:1.9rem}
.talks p{margin-top:.6rem;opacity:.9}
.kicker{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.talk-title{font-family:var(--serif);font-size:1.35rem}
.talks-band .wrap{align-items:start}
.talk-list h3{font-size:1.2rem;opacity:.8;margin:0 0 1rem}
.talk-list h3:not(:first-child){margin-top:2.2rem}
.talk{display:flex;gap:1.2rem;padding:1.2rem 0;border-top:1px solid rgba(230,234,221,.2)}
.talk img{width:110px;height:110px;object-fit:cover;flex:none}
.talk h4{font-size:1.4rem}
.talk .subtitle{font-size:1.1rem;opacity:.85;margin-top:.3rem}
.talk .speaker{opacity:.8;margin-top:.2rem}
.talk p{margin-top:.5rem}
.studio-grid{grid-template-columns:1.2fr .8fr}

/* contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:start}
.contact > div > p{max-width:48ch;color:var(--muted);margin-top:1rem}
.reasons{list-style:none;margin-top:1.4rem}
.reasons li{padding:.35rem 0 .35rem 1.4rem;position:relative}
.reasons li::before{content:"";position:absolute;left:0;top:.95rem;width:.45rem;height:.45rem;background:var(--gold);transform:rotate(45deg)}
.channels{margin-top:1.5rem}
.channels a{display:block;font-family:var(--serif);font-size:1.6rem;text-decoration:none;padding:.9rem 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.channels a:hover{color:var(--gold)}
.channels small{display:block;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.note-form{display:grid;gap:1.1rem;margin-top:1.2rem}
.note-form label{display:grid;gap:.35rem;font-size:.92rem;color:var(--muted)}
.note-form input,.note-form select,.note-form textarea{font:inherit;font-size:1rem;color:var(--fg);background:transparent;border:1px solid var(--rule);border-radius:.4rem;padding:.7rem .8rem;width:100%}
.note-form textarea{resize:vertical;min-height:8rem}
.note-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note-form button{justify-self:start}
.note-form [hidden],.painting-field[hidden]{display:none}
.form-ok{margin-top:1.2rem;padding:1.2rem;border:1px solid var(--gold);border-radius:.4rem}
.form-err{color:var(--gulmohr);font-size:.92rem}

/* footer */
.site-foot{padding:2.5rem 0;border-top:1px solid var(--rule);font-size:.9rem;color:var(--muted)}
.site-foot .wrap{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:start}
.foot-name{font-family:var(--serif);font-size:1.2rem;color:var(--fg)}
.foot-links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:flex-end}
.foot-links a{text-underline-offset:4px}
.foot-note{grid-column:1/-1;font-size:.82rem}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(14,24,19,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:3rem 1rem 1.5rem}
.lb img{max-width:min(1200px,100%);max-height:calc(100vh - 7rem);object-fit:contain}
.lb p{color:#E6EADD;margin-top:1rem;font-size:.95rem;text-align:center}
.lb button{position:absolute;background:none;border:1px solid rgba(230,234,221,.4);color:#E6EADD;font:inherit;border-radius:999px;padding:.4rem 1rem;cursor:pointer}
.lb .lb-close{top:1rem;right:1rem}
.lb .lb-prev{left:1rem;top:50%}
.lb .lb-next{right:1rem;top:50%}

/* responsive */
@media (max-width:960px){ .gallery{columns:2} }
@media (max-width:860px){
  .hero,.scholar,.band .wrap,.contact,.record,.onsite,.painting,.show,.two-col,.teaser-grid,.studio-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero{padding-top:1rem}
  .window-wrap{justify-self:start;max-width:100%}
  .window-wrap figcaption{text-align:left}
  .seasons{grid-template-columns:1fr}
  .season + .season{border-left:none;padding-left:0;border-top:1px solid var(--rule);margin-top:1.4rem}
  .scholar figure{max-width:360px}
  .painting-info{position:static}
  .menu-toggle{display:inline-block}
  .site-head .wrap{flex-wrap:wrap}
  .site-head nav{display:none;width:100%;flex-direction:column;gap:0;padding-top:.8rem}
  .site-head nav a{padding:.7rem 0;border-bottom:1px solid var(--rule);font-size:1.1rem}
  .site-head.open nav{display:flex}
  .site-foot .wrap{grid-template-columns:1fr}
  .foot-links{justify-content:flex-start}
  section{padding:4rem 0}
}
@media (max-width:520px){
  .gallery{columns:1}
  .wrap{width:calc(100% - 2rem)}
  .channels a{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .window .screen{transition:none}
}
.is-preview a{cursor:default}
