/* ============================================================
   Drury Bynum Art — Website
   Built on the Drury Bynum Art Design System v1.0
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-Italic-VariableFont_wdth,wght.ttf') format('truetype'); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:'Source Serif 4'; src:url('../fonts/SourceSerif4-VariableFont_opsz,wght.ttf') format('truetype'); font-weight:200 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Source Serif 4'; src:url('../fonts/SourceSerif4-Italic-VariableFont_opsz,wght.ttf') format('truetype'); font-weight:200 900; font-style:italic; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-style:italic; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --studio-ink:#1F2C33; --veil:#E4DBC6; --earth:#8E6347;
  --smoke:#6E7E88; --dust:#6E7050; --flare:#B0432F; --void:#0A0A0A;

  /* veil tints for hairlines / hovers on dark */
  --ink-80:rgba(31,44,51,0.80);
  --ink-line:rgba(110,126,136,0.22);
  --veil-line:rgba(228,219,198,0.16);
  --veil-dim:rgba(228,219,198,0.55);
  --veil-faint:rgba(228,219,198,0.30);

  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Source Serif 4',Georgia,serif;
  --font-mono:'JetBrains Mono',Menlo,monospace;

  --mx:64px;            /* desktop side margin */
  --maxw:1280px;
  --accent:var(--flare);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--veil);
  color:var(--studio-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--flare);color:var(--veil);}

/* ---------- Shared type helpers ---------- */
.eyebrow{
  font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--smoke);
}
.eyebrow.on-dark{color:var(--veil-dim);}
.meta{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.02em;
  color:var(--smoke); line-height:1.7;
}
.meta.on-dark{color:var(--veil-dim);}
.lead{
  font-family:var(--font-body); font-style:italic; font-weight:400;
  font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--studio-ink);
}
.lead.on-dark{color:var(--veil);}
.body{font-family:var(--font-body); font-size:17px; line-height:1.62; color:var(--studio-ink);}
.body.dim{color:#52606a;}
.body.on-dark{color:var(--veil-dim);}

.flare-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.flare-dot.sm{width:7px;height:7px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:15px 26px; transition:opacity .25s, background .25s, color .25s;
}
.btn:hover{opacity:.82;}
.btn-veil{background:var(--veil); color:var(--studio-ink);}
.btn-ink{background:var(--studio-ink); color:var(--veil);}
.btn-flare{background:var(--flare); color:var(--veil);}
.btn-ghost-veil{
  background:transparent; color:var(--veil);
  border-bottom:1.5px solid var(--veil); padding:13px 0; letter-spacing:0.12em;
}
.btn-ghost-flare{
  background:transparent; color:var(--flare);
  border-bottom:1.5px solid var(--flare); padding:13px 0;
}
.btn-ghost-ink{
  background:transparent; color:var(--studio-ink);
  border-bottom:1.5px solid var(--studio-ink); padding:13px 0;
}
.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--accent);
  transition:gap .25s;
}
.link-arrow:hover{gap:16px;}
.link-arrow .ar{transition:transform .25s;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--mx);}
.section{padding:var(--sp,104px) 0;}
.band-ink{background:var(--studio-ink); color:var(--veil);}
.band-veil{background:var(--veil); color:var(--studio-ink);}
.band-earth{background:var(--earth); color:var(--veil);}
.band-void{background:var(--void); color:var(--veil);}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:sticky; top:0; z-index:120; background:var(--studio-ink);
  border-bottom:1px solid var(--ink-line); transition:background .3s;}
.hdr-inner{display:flex; align-items:center; height:66px; gap:36px;}
.wordmark{font-family:var(--font-display); font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--veil); font-size:14px; cursor:pointer;
  display:flex; align-items:center; gap:11px; flex-shrink:0;}
.hdr-nav{display:flex; gap:30px; margin-left:auto; align-items:center;}
.hdr-link{font-family:var(--font-display); font-weight:500; font-size:11.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--veil-dim);
  position:relative; padding:4px 0; transition:color .2s;}
.hdr-link:hover{color:var(--veil);}
.hdr-link.active{color:var(--veil);}
.hdr-link.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1.5px; background:var(--flare);}
.hdr-cart{position:relative; display:flex; align-items:center; justify-content:center;
  color:var(--veil-dim); padding:6px 8px; margin-left:auto; transition:color .2s;}
.hdr-cart:hover{color:var(--veil);}
.hdr-cart-count{position:absolute; top:0; right:0; background:var(--flare); color:var(--veil);
  font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0;
  min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; padding:0 4px; line-height:1;}
.hdr-burger{display:none; flex-direction:column; gap:5px; padding:8px;}
.hdr-burger span{width:22px; height:1.5px; background:var(--veil); display:block;}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--studio-ink); color:var(--veil); position:relative; overflow:hidden;}
.hero-inner{display:grid; grid-template-columns:1.05fr 0.95fr; gap:72px; align-items:center;
  padding:96px var(--mx); max-width:var(--maxw); margin:0 auto; min-height:78vh;}
.hero-eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:30px;}
.hero-h1{font-family:var(--font-display); font-weight:900;
  font-size:clamp(48px,7vw,108px); line-height:0.96; letter-spacing:-0.025em;
  color:var(--veil); margin-bottom:34px;}
.hero-h1 .em{color:var(--flare);}
.hero-lead{max-width:460px; margin-bottom:40px; color:var(--veil-dim);}
.hero-actions{display:flex; gap:28px; align-items:center; flex-wrap:wrap;}
.hero-figure{position:relative;}
.hero-figure .frame{overflow:hidden; height:min(76vh,640px); background:#16232a;}
.hero-figure img{width:100%; height:100%; object-fit:cover; object-position:center 18%;}
.hero-cap{display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; gap:16px;}
.hero-cap .t{font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--veil);}
.hero-scrim{position:absolute; left:var(--mx); bottom:40px; display:flex; align-items:center; gap:10px;}

/* ============================================================
   WORLD / STATEMENT BANDS
   ============================================================ */
.world-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:72px; align-items:start;}
.pullquote{font-family:var(--font-body); font-weight:300;
  font-size:clamp(24px,3vw,40px); line-height:1.28; letter-spacing:-0.01em;
  position:relative; padding-left:30px;}
.pullquote::before{content:""; position:absolute; left:0; top:8px; bottom:8px;
  width:3px; background:var(--flare);}
.pullquote .cite{display:block; margin-top:22px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.06em; color:var(--smoke); font-style:normal;}
.pullquote.on-dark .cite{color:var(--veil-faint);}

.colrule{column-count:2; column-gap:48px;}
@media(max-width:760px){.colrule{column-count:1;}}

/* ============================================================
   SERIES INDEX (home)
   ============================================================ */
.series-row{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  border-top:1px solid var(--ink-line);}
.series-row .media{overflow:hidden; min-height:420px; background:#16232a; position:relative;}
.series-row .media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.6,.2,1), opacity .4s;}
.series-row:hover .media img{transform:scale(1.04);}
.series-row .info{padding:64px; display:flex; flex-direction:column; justify-content:center; gap:20px;}
.series-row .num{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--smoke);}
.series-row h3{font-family:var(--font-display); font-weight:900; letter-spacing:-0.015em;
  font-size:clamp(28px,3.2vw,46px); line-height:1.0;}
.series-row.alt{direction:rtl;}
.series-row.alt > *{direction:ltr;}

/* ============================================================
   GALLERY GRID
   ============================================================ */
.gal{display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:38px 30px;}
.card{cursor:pointer; display:flex; flex-direction:column;}
.card .imgwrap{overflow:hidden; background:#dcd2bb; aspect-ratio:var(--ar,4/5);
  display:flex; align-items:center; justify-content:center; position:relative;}
.card .imgwrap img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.6,.2,1), opacity .4s;}
.card:hover .imgwrap img{transform:scale(1.045);}
.card .ph{width:100%; height:100%; background:var(--studio-ink); display:flex;
  flex-direction:column; align-items:flex-start; justify-content:space-between; padding:22px;}
.card .ph .pht{font-family:var(--font-display); font-weight:900; font-size:26px;
  line-height:0.95; letter-spacing:-0.01em; color:var(--veil);}
.card .ph .phn{font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--veil-faint);}
.badge{position:absolute; top:0; left:0; background:var(--studio-ink); color:var(--veil);
  font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  padding:6px 11px;}
.badge.flare{background:var(--flare);}
.card .cap{padding-top:14px; display:flex; flex-direction:column; gap:5px;}
.card .cap .ct{font-family:var(--font-display); font-weight:600; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--studio-ink);}
.card .cap .cm{font-family:var(--font-body); font-style:italic; font-size:13px; color:#5a6770; line-height:1.4;}
.card .cap .cmeta{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:3px;}
.card .cap .csize{font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--smoke);}
.card .cap .cprice{font-family:var(--font-mono); font-size:11px; color:var(--studio-ink);}
.card .cap .cprice.sold{color:var(--smoke);}

/* on dark gallery (series page header sits on ink, grid on veil) */

/* ============================================================
   PAINTING DETAIL MODAL
   ============================================================ */
.overlay{position:fixed; inset:0; background:rgba(10,10,10,0.82); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:40px;
  animation:fade .25s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--veil); width:100%; max-width:1040px; max-height:90vh; overflow:auto;
  position:relative; display:grid; grid-template-columns:1.25fr 1fr;}
.modal .mimg{background:var(--studio-ink); display:flex; align-items:center; justify-content:center; min-height:480px; overflow:hidden;}
.modal .mimg img{width:100%; height:100%; object-fit:contain;}
.modal .mimg .ph{width:100%; height:100%; min-height:480px; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:space-between; padding:40px;}
.modal .mimg .ph .pht{font-family:var(--font-display); font-weight:900; font-size:52px; line-height:0.92; color:var(--veil); letter-spacing:-0.02em;}
.modal .minfo{padding:48px 44px; display:flex; flex-direction:column; gap:14px;}
.modal .mclose{position:absolute; top:18px; right:18px; z-index:5; width:34px; height:34px;
  background:rgba(31,44,51,0.9); color:var(--veil); display:flex; align-items:center;
  justify-content:center; font-size:15px; font-family:var(--font-display);}
.modal .mtitle{font-family:var(--font-display); font-weight:900; font-size:clamp(28px,3vw,40px);
  letter-spacing:-0.02em; line-height:1.0;}
.modal .mrow{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:11px 0; border-top:1px solid var(--ink-line);}
.modal .mrow .k{font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--smoke);}
.modal .mrow .v{font-family:var(--font-display); font-weight:500; font-size:13px; color:var(--studio-ink); text-align:right;}
.modal .mrow .v.flare{color:var(--flare);}

/* ============================================================
   FORMS
   ============================================================ */
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-family:var(--font-display); font-weight:700; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--smoke);}
.field input, .field textarea, .field select{
  font-family:var(--font-body); font-size:15px; padding:13px 14px;
  background:rgba(228,219,198,0.06); border:1px solid var(--ink-line);
  color:var(--veil); outline:none; transition:border-color .2s;}
.field.light input, .field.light textarea, .field.light select{
  background:#efe8d6; border:1px solid rgba(31,44,51,0.18); color:var(--studio-ink);}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--flare);}
.field textarea{resize:vertical;}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq{border-top:1px solid var(--ink-line);}
.faq-item{border-bottom:1px solid var(--ink-line);}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:26px 0; text-align:left;}
.faq-q .qt{font-family:var(--font-display); font-weight:600; font-size:clamp(16px,1.6vw,20px);
  letter-spacing:-0.01em; color:var(--studio-ink);}
.faq-q .qi{font-family:var(--font-mono); font-size:18px; color:var(--flare); flex-shrink:0;}
.faq-a{overflow:hidden; max-height:0; transition:max-height .4s ease; }
.faq-a .inner{padding:0 0 28px; max-width:760px;}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--studio-ink); color:var(--veil); padding:84px 0 40px;}
.ftr-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:48px; padding-bottom:64px;
  border-bottom:1px solid var(--ink-line);}
.ftr-word{font-family:var(--font-display); font-weight:900; font-size:34px; letter-spacing:-0.01em;
  line-height:0.95; color:var(--veil); margin-bottom:18px;}
.ftr h5{font-family:var(--font-display); font-weight:500; font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--veil-faint); margin-bottom:18px;}
.ftr-col a{display:block; font-family:var(--font-display); font-weight:500; font-size:13px;
  letter-spacing:0.04em; color:var(--veil-dim); padding:6px 0; transition:color .2s;}
.ftr-col a:hover{color:var(--veil);}
.ftr-bottom{display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding-top:30px; flex-wrap:wrap;}

/* ============================================================
   MISC
   ============================================================ */
.hr{border:none; border-top:1px solid var(--ink-line); margin:0;}
.kicker-row{display:flex; align-items:center; gap:14px; margin-bottom:30px;}
.fade-up{opacity:1;} /* always visible — entrance animates transform only */
.fade-up.in{animation:fadeUp .7s cubic-bezier(.2,.6,.2,1) both;}
@keyframes fadeUp{from{transform:translateY(22px);} to{transform:none;}}
@media (prefers-reduced-motion: reduce){
  .fade-up, .fade-up.in{animation:none; opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  :root{--mx:40px;}
  .about-hero{grid-template-columns:1fr !important; gap:40px !important;}
  .hero-inner{grid-template-columns:1fr; gap:44px; min-height:0; padding:72px var(--mx);}
  .hero-figure .frame{height:54vh;}
  .world-grid{grid-template-columns:1fr; gap:36px;}
  .series-row, .series-row.alt{grid-template-columns:1fr; direction:ltr;}
  .series-row .media{min-height:300px;}
  .series-row .info{padding:44px 40px;}
  .ftr-top{grid-template-columns:1fr 1fr; gap:40px;}
  .modal{grid-template-columns:1fr; max-height:92vh;}
  .modal .mimg{min-height:340px;}
}
@media(max-width:680px){
  :root{--mx:22px;}
  .section{--sp:68px;}
  .hdr-nav{display:none;}
  .hdr-nav.open{display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column;
    background:var(--studio-ink); padding:8px var(--mx) 26px; gap:4px; border-bottom:1px solid var(--ink-line);}
  .hdr-nav.open .hdr-link{padding:12px 0; font-size:14px;}
  .hdr-burger{display:flex;}
  .gal{--cols:2 !important; gap:24px 16px;}
  .ftr-top{grid-template-columns:1fr; gap:34px;}
  .overlay{padding:0;}
  .modal{max-height:100vh; height:100%;}
}