/* BANE – baneart.com
   Layout: one 1280px column, generous vertical rhythm, artwork always shown whole. */
:root{
  --bg:#D4D7DC; --panel:#CACED4; --field:#E2E5E9;
  --ink:#2A2D33; --ink-2:#464A52; --muted:#525760;
  --line:#B8BDC5; --line-strong:#979DA8;
  --accent:#6A4E22; --accent-hover:#4A3614; --on-accent:#F6F3EE;
  --bar:#2A2D33; --bar-ink:#DADDE2; --bar-soft:#B9BEC6; --gold:#D8BF8A;
  --mark:'Cinzel','Times New Roman',serif;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(20px,4vw,40px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color .3s ease}
a:hover{color:var(--accent-hover)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--bar);color:var(--bar-ink);padding:10px 16px;z-index:10}
.skip:focus{left:16px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.caps{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.meta{font-size:14px;letter-spacing:.04em;color:var(--ink-2)}
.soft{color:var(--ink-2)}
.title-it{font-family:var(--display);font-style:italic;font-size:16px;letter-spacing:0;color:var(--ink)}
.caption{font-size:12px;letter-spacing:.08em;color:var(--muted)}

/* Announcement bar */
.bar{background:var(--bar);color:var(--bar-ink);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.bar a{color:var(--bar-ink)}
.bar-one{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 18px;padding:10px var(--gutter)}
.bar-split{display:flex;flex-wrap:wrap;align-items:stretch}
.bar-split a{flex:1 1 340px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;padding:10px 20px}
.bar-split a+a{border-left:1px solid #525760}
.bar .k{color:var(--gold)}
.bar .it{font-family:var(--display);font-size:15px;font-style:italic;letter-spacing:.01em;text-transform:none;color:var(--bar-soft)}

/* Header */
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;padding-block:28px}
.brand{font-family:var(--mark);font-weight:500;font-size:34px;line-height:1;letter-spacing:.3em;color:var(--ink);margin-right:-.3em}
.brand:hover{color:var(--ink)}
.nav{display:flex;flex-wrap:wrap;gap:14px 28px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.nav a{color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent)}
.nav a[aria-current="page"]{font-weight:600}
.langs{display:flex;gap:12px;font-size:11px;letter-spacing:.12em}
.langs .on{color:var(--accent);font-weight:600}
.langs .off{color:var(--muted);cursor:default}
@media (max-width:760px){
  .site-header .wrap{padding-block:22px;row-gap:16px}
  .brand{font-size:28px}
  .nav{order:3;width:100%;justify-content:space-between;gap:10px 16px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.12em}
}

/* Buttons */
.btn{display:inline-block;align-self:flex-start;padding:15px 30px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border:0;cursor:pointer;font-family:var(--sans);transition:background .3s ease}
.btn:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn-line{display:inline-block;align-self:flex-start;padding:15px 30px;border:1px solid var(--accent);font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* Home hero */
.hero{display:flex;flex-wrap:wrap;flex-direction:row-reverse;align-items:center;gap:clamp(40px,6vw,96px);padding-block:clamp(24px,4vw,48px) clamp(72px,9vw,128px)}
.hero figure{flex:1 1 520px;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.hero figure img{max-height:78vh;width:auto;height:auto;box-shadow:0 18px 40px rgba(42,45,51,.14)}
.hero figcaption{align-self:stretch;text-align:right}
.hero .text{flex:1 1 340px;display:flex;flex-direction:column;gap:26px;min-width:0}
.hero h1{font-size:clamp(42px,5vw,66px);line-height:1.04}
.hero .lede{max-width:400px;color:var(--ink-2);font-size:17px}
@media (max-width:760px){.hero{gap:36px}.hero figure img{max-height:70vh}}

/* Section heads */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.sec-head h2{font-size:clamp(36px,4vw,48px)}
.page-head{padding-block:clamp(40px,6vw,80px) 28px;display:flex;flex-direction:column;gap:24px}
.page-head h1{font-size:clamp(48px,6vw,76px);line-height:1}

/* Artwork cards */
.work{display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.work img{width:100%;object-fit:contain;object-position:center bottom;transition:opacity .5s ease}
.work .t{font-family:var(--display);font-size:22px;line-height:1.2;text-align:center;transition:color .3s ease}
.work:hover{color:var(--ink)}
.work:hover img{opacity:.9}
.work:hover .t{color:var(--accent)}
.grid-selected{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(56px,6vw,80px) clamp(32px,4vw,56px);padding-top:clamp(48px,5vw,72px);align-items:start}
.grid-selected .work img{height:clamp(340px,34vw,440px)}
.grid-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:clamp(72px,8vw,120px) clamp(40px,6vw,96px);padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--line);align-items:start}
.grid-gallery .work{gap:20px}
.grid-gallery .work img{height:clamp(380px,44vw,600px)}
.grid-gallery .work .t{font-size:24px}
.years{display:flex;flex-wrap:wrap;gap:28px}
.years a{color:var(--ink);font-weight:600;padding-bottom:6px;border-bottom:1px solid var(--accent)}

/* Quote */
.quote{border-block:1px solid var(--line)}
.quote .inner{max-width:860px;margin:0 auto;padding:clamp(88px,11vw,160px) var(--gutter);display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.quote blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(28px,3.4vw,42px);line-height:1.35}

/* Featured event band */
.feature{background:var(--panel);border-bottom:1px solid var(--line)}
.feature .wrap{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,88px);align-items:center;padding-block:clamp(64px,8vw,104px)}
.feature .text{flex:1 1 380px;display:flex;flex-direction:column;gap:18px;min-width:0}
.feature h2{font-size:clamp(38px,4vw,52px);line-height:1.05}
.feature figure{flex:0 1 380px;margin:0;display:flex;flex-direction:column;gap:12px}

/* Split blocks (about teaser, about page) */
.split{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,88px);align-items:center;padding-block:clamp(88px,10vw,144px)}
.split .portrait{flex:1 1 320px;max-width:440px;width:100%;height:auto;filter:grayscale(1)}
.split .text{flex:1 1 420px;display:flex;flex-direction:column;gap:20px;min-width:0}
.split h2{font-size:clamp(38px,4vw,52px);line-height:1.05}
.split .text p.soft{max-width:560px}

/* Footer */
.footer{border-top:1px solid var(--line)}
.footer-full .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px;padding-block:clamp(56px,7vw,88px) 40px}
.footer-full .text{display:flex;flex-direction:column;gap:14px;max-width:520px}
.footer-full h2{font-size:clamp(34px,3.6vw,44px)}
.footer-bar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 24px;padding-block:40px}
.footer-bar .cta{font-family:var(--display);font-size:24px;color:var(--ink)}
.footer-bar .cta span{color:var(--accent)}
.copy{font-size:12px;color:var(--muted);padding-bottom:36px}
.social{display:flex;gap:12px}
.social a,.icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;color:var(--ink);flex:none}
.social a:hover{color:var(--accent);border-color:var(--accent)}
.social svg,.icon svg{width:18px;height:18px}

/* Artwork page */
.back{padding-top:8px}
.artwork{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,88px);align-items:center;padding-block:clamp(24px,3vw,40px) clamp(72px,8vw,112px)}
.artwork .stage{flex:1 1 560px;display:flex;justify-content:center;padding:clamp(24px,5vw,64px);background:var(--panel);min-width:0}
.artwork .stage img{max-height:76vh;width:auto;height:auto;box-shadow:0 18px 40px rgba(42,45,51,.16)}
.artwork .info{flex:1 1 340px;display:flex;flex-direction:column;gap:24px;min-width:0}
.artwork h1{font-size:clamp(40px,4.4vw,58px);line-height:1.05}
.facts{margin:0;display:grid;grid-template-columns:96px 1fr;gap:8px 16px;font-size:15px}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.desc{padding-top:22px;border-top:1px solid var(--line);font-family:var(--display);font-size:21px;line-height:1.55}
.exh-block{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.exh-block .label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.exh-now{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;background:var(--bar);color:var(--bar-ink);font-size:14px}
.exh-now:hover{color:#fff}
.exh-now .k{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.exh-now .arr{color:var(--gold)}
.exh-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.exh-row{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:15px}
.exh-row .y{font-size:14px;color:var(--muted)}
.exh-row .arr{color:var(--accent)}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-block:28px;border-block:1px solid var(--line);margin-bottom:clamp(72px,8vw,112px)}
.pager a{display:flex;align-items:center;gap:18px;color:var(--ink)}
.pager img{height:68px;width:auto}
.pager .arr{font-size:20px;color:var(--accent)}
.pager .lbl{display:flex;flex-direction:column}
.pager .lbl small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pager .lbl span{font-family:var(--display);font-size:20px}
.pager .next{text-align:right;margin-left:auto}
@media (max-width:560px){.pager img{display:none}}

/* News and exhibitions */
.entries{padding-bottom:clamp(96px,11vw,160px)}
.entry{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,88px);align-items:center;padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry .text{flex:1 1 400px;display:flex;flex-direction:column;gap:18px;min-width:0}
.entry h2{font-size:clamp(36px,4vw,50px);line-height:1.08}
.entry .lead{font-family:var(--display);font-size:21px;line-height:1.55;max-width:520px}
.entry .pics{flex:1 1 360px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,32px);align-items:end}
.entry .pics a{display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.entry .pics span{font-family:var(--display);font-size:18px;text-align:center}
.links{display:flex;flex-wrap:wrap;gap:14px 28px;padding-top:4px}
.group-label{margin-bottom:16px}
.exh-group{padding-bottom:clamp(56px,7vw,88px)}
.exh-group:last-of-type{padding-bottom:clamp(96px,11vw,160px)}
.record{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.record-row{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.record-row .y{color:var(--muted)}
.record-row .n{font-family:var(--display);font-size:24px}

/* About */
.bio{align-items:flex-start;padding-block:clamp(40px,6vw,80px) clamp(88px,10vw,144px)}
.bio .portrait{max-width:480px;flex-basis:340px}
.bio .text{gap:22px;max-width:620px;flex-basis:440px}
.bio h1{font-size:clamp(44px,5.4vw,68px);line-height:1.02}
.bio .sub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bio .first{font-family:var(--display);font-size:23px;line-height:1.5}
.statement{border-top:1px solid var(--line)}
.statement .inner{max-width:760px;margin:0 auto;padding:clamp(88px,11vw,168px) var(--gutter);display:flex;flex-direction:column;gap:28px}
.statement p{font-family:var(--display);font-size:22px;line-height:1.6}
.statement p.first{font-size:clamp(28px,3.2vw,38px);line-height:1.35}
.statement p.last{font-style:italic;font-size:24px;line-height:1.55}
.statement p.sign{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* Contact */
.contact{display:flex;flex-wrap:wrap;gap:clamp(48px,7vw,104px);align-items:flex-start;padding-block:clamp(40px,6vw,80px) clamp(96px,11vw,160px)}
.contact .text{flex:1 1 340px;display:flex;flex-direction:column;gap:24px;min-width:0}
.contact .intro{font-family:var(--display);font-size:23px;line-height:1.5;max-width:420px}
.contact .channels{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.contact .channels a{display:flex;align-items:center;gap:16px;color:var(--ink)}
.contact .channels a:hover{color:var(--accent)}
.form{flex:1 1 460px;display:flex;flex-direction:column;gap:22px;padding:clamp(28px,4vw,52px);background:var(--panel);min-width:0}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);padding:14px 16px;border:1px solid var(--line-strong);background:var(--field);border-radius:0;width:100%}
.form textarea{resize:vertical;min-height:150px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.form .note{font-size:13px;color:var(--muted)}
.form .status{font-size:14px;color:var(--ink)}
.hp{position:absolute;left:-9999px}

/* 404 */
.notfound{padding-block:clamp(80px,12vw,180px);display:flex;flex-direction:column;gap:24px;align-items:flex-start}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
