/* =====================================================================
   DMINTI — shared site styles
   Every page links this file. Page-specific layout lives in a small
   <style> block in that page's <head>. See AGENTS.md for conventions.
   ===================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:Aeonik;font-weight:100;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-Air.woff2') format('woff2')}
@font-face{font-family:Aeonik;font-weight:200;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-Thin.woff2') format('woff2')}
@font-face{font-family:Aeonik;font-weight:300;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-Light.woff2') format('woff2')}
@font-face{font-family:Aeonik;font-weight:300;font-style:italic;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-LightItalic.woff2') format('woff2')}
@font-face{font-family:Aeonik;font-weight:400;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-Regular.woff2') format('woff2')}
@font-face{font-family:Aeonik;font-weight:500;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-Medium.woff2') format('woff2')}
@font-face{font-family:Aeonik;font-weight:500;font-style:italic;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-MediumItalic.woff2') format('woff2')}
@font-face{font-family:Aeonik;font-weight:400;font-style:italic;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-RegularItalic.woff2') format('woff2')}
@font-face{font-family:Aeonik;font-weight:600;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-Bold.woff2') format('woff2')}
@font-face{font-family:Aeonik;font-weight:700 900;font-display:swap;src:url('/wp-content/uploads/2021/11/Aeonik-Black.woff2') format('woff2')}
@font-face{font-family:UCCA;font-weight:400;font-display:swap;src:url('/wp-content/uploads/2023/03/simplexucca-webfont.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --ink:#161615;          /* body text */
  --muted:#62707c;        /* inline links in body copy */
  --black:#000;
  --white:#fff;
  --aqua:#b6f7f3;         /* menu panel, accent bands */
  --lime:#bbfa8d;
  --sand:#dfceb5;
  --cream:#faf3ee;
  --stone:#44423d;
  --pink:#e67df6;
  --green:#0d836d;
  --red:#ff1b54;
  --purple:#733894;
  --indigo:#3c2f87;
  --gutter:50px;          /* page side padding (desktop) */
  --band-pad:112px;       /* vertical padding of full-width bands */
}
@media(max-width:767px){:root{--gutter:20px;--band-pad:50px}}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Aeonik,-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.35;color:var(--ink);background:#fff}
img,video,iframe{max-width:100%;display:block}
img,video{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* heading scale (from the original Elementor kit) */
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.2}
h1{font-size:110px;font-weight:200}
h2{font-size:55px;font-weight:300}
h3{font-size:25px;font-weight:300}
h4{font-size:20px;font-weight:600;text-transform:uppercase}
h5{font-size:28px;font-weight:500;line-height:1.25}
h6{font-size:28px;font-weight:300;line-height:1.25;text-transform:uppercase;letter-spacing:.75px}

/* rich text blocks: links inside copy are muted grey like the original */
.prose a{color:var(--muted)}
.prose a:hover{text-decoration:underline}
.prose p{line-height:1.35}

/* ---------- layout helpers ---------- */
.band{padding:var(--band-pad) 0}
.bg-aqua{background:var(--aqua)}
.bg-lime{background:var(--lime)}
.bg-sand{background:var(--sand)}
.bg-cream{background:var(--cream)}
.bg-black{background:#000;color:#fff}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:1090px;margin-left:auto;margin-right:auto}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:767px){.split{grid-template-columns:1fr}}

/* 16:9 responsive embed (YouTube / Vimeo) */
.embed{position:relative;aspect-ratio:16/9;background:#000}
.embed iframe,.embed video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* simple text button ("About David Salle", "Learn more") */
.text-btn{display:inline-block;font-size:18px;font-weight:500;color:#000}
.text-btn:hover{text-decoration:underline}

/* =====================================================================
   HEADER  (logo left, menu button right)
   default                      — white bar, black logo
   <body class="header-overlay"> — transparent over a dark hero, white logo
   ===================================================================== */
.site-header{position:relative;z-index:40;display:flex;align-items:flex-start;justify-content:space-between;height:174px;padding:60px var(--gutter) 0}
.site-header .logo img{width:170px;height:54px}
.header-overlay .site-header{position:absolute;inset:0 0 auto 0;background:transparent}
.header-overlay .site-header .logo img{filter:invert(1)}
.header-overlay .site-header .burger span{background:#fff}
.burger{display:flex;flex-direction:column;justify-content:center;gap:8px;width:35px;height:35px;margin-top:7px}
.burger span{display:block;height:1.5px;background:#9f9f9f}
@media(max-width:1024px){
  .site-header{height:154px;padding:50px 20px 0}
}
@media(max-width:767px){
  .site-header{height:94px;padding-top:20px}
}

/* =====================================================================
   MENU  (slide-in aqua panel; opened by any [data-menu-open])
   ===================================================================== */
.menu-scrim{position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.75);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu{position:fixed;inset:0 0 0 auto;z-index:60;width:min(375px,100%);background:var(--aqua);color:#000;padding:30px 25px 40px 40px;overflow-y:auto;display:flex;flex-direction:column;transform:translateX(102%);visibility:hidden;transition:transform .45s cubic-bezier(.25,.7,.3,1),visibility .45s}
body.menu-open .menu{transform:none;visibility:visible}
body.menu-open .menu-scrim{opacity:1;visibility:visible}
.menu .close{position:absolute;top:18px;right:20px;font-size:22px;line-height:1;padding:4px}
.menu nav>ul{list-style:none}
.menu nav>ul>li>a{display:block;padding:9px 0;font-size:22px;font-weight:500;text-transform:uppercase}
.menu nav>ul>li>a:hover,.menu nav>ul>li>a[aria-current]{text-decoration:underline}
.menu nav ul ul{list-style:none;padding:0 0 4px 10px}
.menu nav ul ul a,.menu .sub-toggle{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:18px;font-weight:400;line-height:1.35;text-align:left}
.menu nav ul ul a:hover{text-decoration:underline}
.menu .sub-toggle svg{transition:transform .3s}
.menu li.has-sub>ul{display:none;padding-left:16px}
.menu li.has-sub.open>ul{display:block}
.menu li.has-sub.open .sub-toggle svg{transform:rotate(180deg)}
.menu .subscribe{margin-top:auto;padding:40px 0 0 10px}
.menu .subscribe h2{font-size:22px;font-weight:400;text-transform:uppercase;margin-bottom:22px;letter-spacing:.02em}
.menu .inline-signup{display:flex;border-bottom:2px solid #000}
.menu .inline-signup input{flex:1;min-width:0;background:none;border:0;padding:8px 12px;font:inherit;font-size:14px;color:#000}
.menu .inline-signup input::placeholder{color:#555}
.menu .inline-signup button{padding:0 4px;font-size:18px}
.menu .form-note{color:#000}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:#000;color:#fff;padding:60px 4px 60px 0}
.site-footer .grid{display:grid;align-items:start}
.site-footer .mark{display:flex;justify-content:center}
.site-footer .mark img{width:58px;height:91px}
.site-footer .links{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.site-footer h2{font-size:16px;font-weight:500;line-height:21.6px;text-transform:uppercase;margin:0 0 8px}
.site-footer li{list-style:none;font-size:14px;font-weight:200;line-height:18.9px;margin-bottom:5px}
.site-footer li a:hover{text-decoration:underline}
.site-footer .socials{display:flex;gap:25px;margin-top:16px}
.site-footer .socials svg{width:16px;height:16px;fill:#fff}
.site-footer .grid{grid-template-columns:202px minmax(0,1fr);max-width:1280px;margin:0 auto}
.footer-signup input{display:block;width:100%;height:33px;margin-bottom:15px;background:#000;border:0;border-bottom:1px solid #fff;color:#fff;font:inherit;font-size:15px;padding:4px 12px}
.footer-signup input::placeholder{color:#bbb}
.footer-signup button{display:block;margin-left:auto;height:33px;line-height:14px;font-size:14px;font-weight:500;text-transform:uppercase;color:#fff}
.footer-signup button:hover{text-decoration:underline}
@media(max-width:1024px){
  .site-footer{padding:65px 17px 60px 50px}
  .site-footer .grid{grid-template-columns:70.6% 1fr;row-gap:56px}
  .site-footer .links{grid-row:1;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .footer-signup{grid-row:2;grid-column:1}
  .site-footer .mark{grid-row:2;grid-column:2}
  .site-footer .mark img{width:75px;height:117px}
}
@media(max-width:767px){
  .site-footer{padding:40px 15px 58px}
  .site-footer .grid{grid-template-columns:1fr;row-gap:48px}
  .site-footer .mark{display:none}
  .site-footer .links{grid-row:1;grid-column:1;grid-template-columns:1fr;row-gap:35px;padding:70px 20px 0}
  .footer-signup{padding:0 18px}
}

/* =====================================================================
   FORMS  (all forms go through submitForm() in site.js)
   ===================================================================== */
.form-note{margin-top:12px;font-size:15px;min-height:1em;opacity:0;transition:opacity .4s}
.form-note.show{opacity:1}
.form-note.error{color:#ff1b54}
.form-note a{text-decoration:underline}
.form-note .spinner{display:inline-block;width:.9em;height:.9em;margin-right:.5em;vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:form-spin .8s linear infinite}
@keyframes form-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.form-note .spinner{animation-duration:2.4s}}
button:disabled{opacity:.5;cursor:default}

/* =====================================================================
   DIALOGS  (contact / inquiry pop-ups; <dialog class="modal">)
   open with <a href="#contact" data-dialog="contact">
   ===================================================================== */
dialog.modal{width:min(560px,calc(100% - 40px));max-height:calc(100% - 40px);border:0;padding:50px 40px 40px;background:#fff;color:#000}
dialog.modal::backdrop{background:rgba(0,0,0,.75)}
dialog.modal .close{position:absolute;top:14px;right:18px;font-size:22px;line-height:1;padding:4px}
dialog.modal h2{font-size:28px;font-weight:500;margin-bottom:24px}
dialog.modal p{font-size:15px}
.stack-form{display:grid;gap:14px}
.stack-form input,.stack-form textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:0;border-bottom:1px solid #000;background:transparent;color:inherit;border-radius:0}
.stack-form textarea{min-height:110px;resize:vertical;border:1px solid #000}
.stack-form button[type=submit]{justify-self:end;font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;padding:10px 0}
.stack-form button[type=submit]:hover{text-decoration:underline}

/* =====================================================================
   ARTISTS' PROJECTS STRIP  (black band near the foot of artist pages)
   ===================================================================== */
.artists-strip{background:#000;color:#fff;padding:80px 0}
.artists-strip .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.artists-strip .col{padding:0 25px}
.artists-strip .col:first-child{padding-right:50px}
.artists-strip h2{font-size:28px;font-weight:500;line-height:35px;margin-bottom:20px}
.artists-strip .lede{font-size:25px;font-weight:300;line-height:30px;margin:0}
.artists-strip h3{font-size:20px;font-weight:600;line-height:21.6px;text-transform:uppercase;margin:0 0 20px}
.artists-strip h3 a:hover{text-decoration:underline}
.artists-strip p{font-size:16px;line-height:21.6px}
@media(max-width:1024px){.artists-strip .cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}
@media(max-width:767px){
  .artists-strip .cols{grid-template-columns:1fr;row-gap:34px}
  .artists-strip .col{padding:0 25px}
.artists-strip .col:first-child{padding-right:50px}
  .artists-strip h3{font-size:18px}
}

/* =====================================================================
   CAROUSEL  (scroll-snap; arrows wired by site.js)
   <div class="carousel" style="--per:3" [data-autoplay="5000"]>
     <button class="prev" aria-label="Previous">…svg…</button>
     <div class="track"> <figure>…</figure> … </div>
     <button class="next" aria-label="Next">…svg…</button>
   </div>
   --per = items visible on desktop (tablet/mobile overrides below)
   ===================================================================== */
.carousel{position:relative;--per:3;--gap:24px}
.carousel .track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .track>*{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start;margin:0}
.carousel .prev,.carousel .next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;padding:12px;line-height:0}
.carousel .prev{left:0}.carousel .next{right:0}
.carousel .prev[disabled],.carousel .next[disabled]{opacity:.25;pointer-events:none}
@media(max-width:1024px){.carousel{--per:var(--per-tablet,2)}}
@media(max-width:767px){.carousel{--per:var(--per-mobile,1)}}

/* =====================================================================
   LIGHTBOX  (<a href="big.jpg" data-lightbox><img …></a>; site.js builds the viewer)
   ===================================================================== */
dialog.lightbox{max-width:none;max-height:none;width:100vw;height:100vh;margin:0;padding:0;border:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center}
dialog.lightbox[open]{display:flex}
dialog.lightbox img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
dialog.lightbox .close{position:fixed;top:16px;right:22px;color:#fff;font-size:28px;padding:6px}
a[data-lightbox]{cursor:zoom-in}

/* =====================================================================
   ACCORDION  (native <details>; used by timelines / FAQs)
   ===================================================================== */
details.acc{border-bottom:1px solid currentColor}
details.acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"+";font-size:26px;font-weight:200;line-height:1;transition:transform .25s}
details.acc[open]>summary::after{transform:rotate(45deg)}
details.acc>.acc-body{padding:0 0 22px}