/* Art Initiatives - contemporary gallery system
   Ground: white. Ink: near-black. No accent hue - the work carries the colour.
   Grotesque (Helvetica Neue system stack) for the institution,
   Cormorant Garamond for the wordmark and the personal voice. */

:root{
  --white:#ffffff;
  --ink:#111111;
  --grey:#6a6a6a;
  --hair:#e6e6e6;
  --wash:#f7f7f6;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p a, .foot-links a, .body-links a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:#bbb}
p a:hover, .foot-links a:hover{text-decoration-color:var(--ink)}
a:focus-visible, button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.frame{max-width:1400px;margin:0 auto;padding-inline:clamp(20px,4vw,56px)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);padding:10px 16px;z-index:100}
.skip:focus{left:0}

/* ---------- type roles ---------- */
.wordmark{
  font-family:var(--serif);
  font-weight:600;
  font-size:22px;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.wordmark.small{font-size:16px}

.label{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grey);
  font-weight:500;
  margin-bottom:14px;
}

.serif-voice{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(24px,3vw,34px);
  line-height:1.35;
  letter-spacing:.005em;
}

/* ---------- header ---------- */
.site-head{
  border-bottom:1px solid var(--hair);
  background:var(--white);
}
.head-row{
  display:flex;align-items:baseline;gap:32px;
  padding-top:26px;padding-bottom:22px;
  flex-wrap:wrap;
}
.site-nav{
  margin-left:auto;
  display:flex;gap:26px;align-items:baseline;
  font-size:13px;
  letter-spacing:.02em;
  overflow-x:auto;
  scrollbar-width:none;
}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{
  white-space:nowrap;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  color:var(--ink);
}
.site-nav a:hover{border-bottom-color:#bbb}
.site-nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav-tickets{
  border:1px solid var(--ink);
  padding:7px 16px 8px;
  margin-left:6px;
  transition:background .2s,color .2s;
}
.site-nav a.nav-tickets:hover{background:var(--ink);color:var(--white);border-bottom-color:var(--ink)}

@media (max-width:760px){
  .frame{padding-inline:24px}
  .head-row{gap:14px;padding-top:26px;padding-bottom:0}
  .wordmark{font-size:23px;letter-spacing:.18em}
  .site-nav{
    margin-left:0;flex-basis:100%;
    padding-top:18px;padding-bottom:22px;
    flex-wrap:wrap;overflow:visible;gap:14px 24px;
    font-size:15.5px;
  }
  .site-nav a{padding-bottom:4px}
  .nav-tickets{margin-left:0;padding:8px 18px 9px}
  .label{font-size:12.5px;margin-bottom:16px}
  .crumb{font-size:14.5px}
  .facts dt{font-size:12px}
  .facts > div{gap:14px;padding-block:16px;font-size:16px}
  .fine{font-size:14px;line-height:1.55}
  .section{padding-block:clamp(52px,8vh,80px)}
  .btn{padding:16px 28px 17px;font-size:14px}
  .bid-form .btn, .ticket-form .btn, .donate-form .btn{width:100%;text-align:center}
  input, select, textarea,
  .bid-form input:not([type="checkbox"]), .ticket-form input:not([type="checkbox"]),
  .donate-form input:not([type="checkbox"]){font-size:16px}
}

/* ---------- shared section scaffolding ---------- */
.section{padding-block:clamp(56px,9vh,110px)}
.section + .section{border-top:1px solid var(--hair)}
.section-tight{padding-block:clamp(40px,6vh,72px)}

.split{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(0,2.4fr);
  gap:clamp(28px,4vw,80px);
  align-items:start;
}
@media (max-width:860px){ .split{grid-template-columns:1fr} }

.measure{max-width:62ch}
.measure p + p{margin-top:1em}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5}

h1.page-title{
  font-weight:400;
  font-size:clamp(34px,4.6vw,58px);
  line-height:1.05;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h2.section-title{
  font-weight:400;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.15;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.more-link{
  display:inline-block;
  font-size:13px;
  letter-spacing:.06em;
  border-bottom:1px solid var(--ink);
  padding-bottom:3px;
}
.more-link:hover{color:var(--grey);border-color:var(--grey)}

.btn{
  display:inline-block;
  appearance:none;-webkit-appearance:none;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:0;
  padding:14px 28px 15px;
  font:inherit;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,color .2s;
}
@media (hover:hover){ .btn:hover{background:var(--ink);color:var(--white)} }
.btn:active{background:var(--ink);color:var(--white)}

/* ---------- home hero ---------- */
.hero{padding-block:clamp(56px,10vh,130px)}
.hero h1{
  font-weight:400;
  font-size:clamp(40px,6.4vw,84px);
  line-height:1.02;
  letter-spacing:-.02em;
  max-width:14ch;
  text-wrap:balance;
}
.hero .lede{margin-top:34px;max-width:56ch;color:var(--ink)}
.hero-meta{
  margin-top:44px;
  display:flex;gap:14px 40px;flex-wrap:wrap;
  font-size:13px;color:var(--grey);
}

.bleed{width:100%}
.bleed img{width:100%;height:auto}
.bleed figcaption, .fig-cap{
  font-size:12px;color:var(--grey);
  padding:10px clamp(20px,4vw,56px) 0;
}

/* ---------- fact table (event) ---------- */
.facts{border-top:1px solid var(--hair);margin-block:8px 36px}
.facts > div{
  display:grid;
  grid-template-columns:minmax(110px,180px) 1fr;
  gap:18px;
  padding-block:14px;
  border-bottom:1px solid var(--hair);
  font-size:15px;
}
.facts dt{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:500;padding-top:3px;
}
.fine{font-size:13px;color:var(--grey);margin-top:14px}

/* ---------- work grids ---------- */
.works{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(36px,4vw,56px) clamp(24px,2.5vw,40px);
}
.work-cell a{display:block}
.work-cell .mat{
  background:var(--wash);
  aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  padding:9%;
}
.work-cell .mat img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  transition:opacity .25s;
}
.work-cell a:hover img{opacity:.88}
.work-cell figcaption{margin-top:14px}
.wc-artist{font-size:13px;font-weight:500;letter-spacing:.02em}
.wc-title{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.3;margin-top:1px}
.wc-medium{font-size:12.5px;color:var(--grey);margin-top:3px;line-height:1.45}

/* ---------- photo rows ---------- */
.photo-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,24px);
}
.photo-row.four{grid-template-columns:repeat(4,1fr)}
.photo-row img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.photo-row.wide img{aspect-ratio:3/2}
@media (max-width:760px){
  .photo-row, .photo-row.four{grid-template-columns:repeat(2,1fr)}
}

/* ---------- side-by-side feature ---------- */
.feature{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,90px);
  align-items:center;
}
.feature.rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
@media (max-width:860px){
  .feature, .feature.rev{grid-template-columns:1fr}
}

/* ---------- team ---------- */
/* Fixed 4-up, then 2-up - never 3 across with one orphan underneath. */
.team{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.4vw,34px);
}
@media (max-width:820px){ .team{grid-template-columns:repeat(2,1fr)} }
.team img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  /* crop biased upwards so faces sit at a consistent height across four
     photographs shot at different distances */
  object-position:center 22%;
  background:var(--wash);
  /* black and white - also unifies four very different backgrounds */
  filter:grayscale(1) contrast(1.04);
}
.team figcaption{margin-top:12px}
.team .t-name{font-size:15px;font-weight:500}
.team .t-role{font-size:12px;color:var(--grey);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}

/* ---------- partners ---------- */
.partner-list{
  columns:2;column-gap:48px;
  font-size:15px;line-height:2.2;
}
@media (max-width:600px){ .partner-list{columns:1} }
.partner-list a{border-bottom:1px solid var(--hair)}
.partner-list a:hover{border-color:var(--ink)}

.logo-row{display:flex;gap:clamp(28px,5vw,64px);align-items:center;flex-wrap:wrap}
.logo-row img{height:74px;width:auto}

/* partner logo wall - flex so every tile is identical and a short last row
   centres instead of hanging left */
.logo-grid{
  --lg-gap:clamp(12px,1.4vw,20px);
  --lg-cols:4;
  display:flex;flex-wrap:wrap;
  gap:var(--lg-gap);
  justify-content:center;
}
.logo-grid a{
  flex:0 0 calc((100% - (var(--lg-cols) - 1) * var(--lg-gap)) / var(--lg-cols));
  display:flex;align-items:center;justify-content:center;
  background:var(--wash);
  aspect-ratio:5/3;
  transition:background .25s;
}
.logo-grid a:hover{background:#efefed}
/* capped rather than filled, so logos of very different proportions still
   read as the same visual weight */
.logo-grid img{
  max-width:72%;max-height:62%;
  width:auto;height:auto;
  object-fit:contain;
}
@media (max-width:900px){ .logo-grid{--lg-cols:3} }
@media (max-width:560px){ .logo-grid{--lg-cols:2} }

/* ---------- pull quote ---------- */
.quote-block{
  padding-block:clamp(64px,10vh,120px);
  border-top:1px solid var(--hair);
}
.quote-block .serif-voice{max-width:30ch}
.quote-src{margin-top:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--ink);margin-top:clamp(56px,9vh,110px)}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(28px,4vw,72px);
  padding-block:clamp(40px,6vh,64px) clamp(28px,4vh,44px);
}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr} }
.foot-line{margin-top:14px;font-size:14px;color:var(--grey);max-width:34ch}
.foot-links{font-size:14px;line-height:2.1}
.foot-links a{text-decoration-color:var(--hair)}
.foot-base{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--hair);
  padding-block:18px 26px;
  font-size:12px;color:var(--grey);
}

/* ---------- auction 2026 ---------- */
.notice{
  border:1px solid var(--hair);
  padding:14px 18px;
  font-size:13px;
  color:var(--grey);
  max-width:72ch;
  margin-bottom:clamp(28px,4vh,44px);
}
.lot-info .notice{margin-bottom:26px}

.wc-lot{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);font-weight:500;margin-bottom:6px;
}
.wc-bid{
  margin-top:10px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);
  display:inline-block;padding-bottom:2px;
}
.work-cell a:hover .wc-bid{color:var(--grey);border-color:var(--grey)}
.work-cell a .wc-artist, .work-cell a .wc-title,
.work-cell a .wc-medium, .work-cell a .wc-lot{text-decoration:none}

.crumb{font-size:13px;color:var(--grey)}
.crumb a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#bbb}
.crumb a:hover{text-decoration-color:var(--ink)}

.lot-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,90px);
  align-items:start;
}
@media (max-width:860px){ .lot-layout{grid-template-columns:1fr} }
.lot-mat{
  background:var(--wash);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,64px);
  min-height:min(70vh,640px);
}
.lot-mat img{max-width:100%;max-height:min(70vh,640px);width:auto;height:auto;object-fit:contain}
.lot-artist{
  font-weight:400;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.08;letter-spacing:-.015em;
  margin-top:14px;
}
.lot-title{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,2vw,26px);
  margin-top:6px;
}
.lot-desc{margin-top:26px;font-size:15px}
.placeholder-text{color:var(--grey);font-style:italic}
.mat-empty>span{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
.tbc-block .bid-lede{margin-top:14px}

.lot-nav{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-top:1px solid var(--hair);
  padding-top:26px;
}

/* ---------- pre-bid form ---------- */
.bid-block{
  margin-top:40px;
  border-top:1px solid var(--ink);
  padding-top:30px;
}
.bid-lede{font-size:15px;max-width:52ch}
.bid-lede a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#bbb}
.bid-form{
  margin-top:26px;
  display:grid;gap:18px;
  max-width:440px;
}
.bid-form label{
  display:block;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:500;
}
.bid-form label .opt{text-transform:none;letter-spacing:.02em}
.bid-form input:not([type="checkbox"]){
  display:block;width:100%;margin-top:8px;
  border:1px solid var(--hair);background:var(--white);
  padding:12px 14px;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  border-radius:0;
}
.bid-form input:not([type="checkbox"]):focus{
  outline:none;border-color:var(--ink);
}
.bid-form .check{
  display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;letter-spacing:0;text-transform:none;
  color:var(--ink);font-weight:400;line-height:1.5;
}
.bid-form .check input{margin-top:3px;accent-color:var(--ink)}
.bid-form .check a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#bbb}
.bid-form .check a:hover{text-decoration-color:var(--ink)}
.bid-form .btn{justify-self:start;cursor:pointer;background:var(--white);font-family:var(--sans)}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:480px){ .field-row{grid-template-columns:1fr} }
.bid-form .hint{
  display:block;margin-top:7px;
  font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--grey);font-weight:400;
}
.price{font-variant-numeric:tabular-nums}
.wc-start{
  font-size:12.5px;margin-top:6px;
  font-variant-numeric:tabular-nums;
}

/* ---------- donation form ---------- */
.donate-form{display:grid;gap:24px;max-width:520px}
.amount-set{border:0;padding:0;margin:0}
.amount-set legend{padding:0;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;
  border:1px solid var(--hair);
  padding:10px 20px;
  font-size:14px;
  transition:border-color .2s,background .2s,color .2s;
  user-select:none;
}
.chip:hover span{border-color:#bbb}
.chip input:checked + span{background:var(--ink);color:var(--white);border-color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
.custom-amount{display:block;margin-top:16px}
.donate-form .custom-amount input{max-width:220px}
.cover-fee{margin:0}
.donate-total{
  font-size:17px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding-block:16px;
  font-variant-numeric:tabular-nums;
}
.donate-total strong{font-weight:500}
.donate-freq{color:var(--grey);font-size:14px}
.donate-form label{
  display:block;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:500;
}
.donate-form label .opt{text-transform:none;letter-spacing:.02em}
.donate-form input:not([type="radio"]):not([type="checkbox"]){
  display:block;width:100%;margin-top:8px;
  border:1px solid var(--hair);background:var(--white);
  padding:12px 14px;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  border-radius:0;
}
.donate-form input:not([type="radio"]):not([type="checkbox"]):focus{
  outline:none;border-color:var(--ink);
}
.donate-form .check{
  display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;letter-spacing:0;text-transform:none;
  color:var(--ink);font-weight:400;line-height:1.5;
}
.donate-form .check input{margin-top:3px;accent-color:var(--ink)}
.donate-form .btn{justify-self:start;cursor:pointer;background:var(--white);font-family:var(--sans)}

.conditions h2{margin-top:34px}
.conditions h2:first-child{margin-top:0}
.conditions p{margin-top:12px}

/* .site-nav a sets a transparent bottom border for the underline effect and
   outranks .nav-tickets, which left the Tickets box open at the bottom. */
.site-nav a.nav-tickets{border-bottom-color:var(--ink)}