/* =========================================================================
   ABA . STUDIO — homepage
   Mobile-first. Monochrome, heavy grotesque, generous whitespace.
   ========================================================================= */

:root{
  --bg:#ffffff;
  --ink:#0b0b0b;
  --ink-soft:#1c1c1a;
  --muted:#8a8a86;
  --hairline:#e7e7e3;
  --placeholder:#ececea;
  --placeholder-ink:#a6a6a1;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw:1480px;
  --pad:clamp(20px, 5.5vw, 90px);
  --gap:clamp(20px, 3vw, 48px);

  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.6rem 1rem; font-weight:600;
}
.skip-link:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ---------------------------------------------------------------- Header */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:14px var(--pad);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid transparent;
}

.logo{ display:flex; flex-direction:column; line-height:.85; padding:6px 10px; border:1px solid var(--ink); }
.logo-mark{ font-weight:700; font-size:20px; letter-spacing:.02em; }
.logo-sub{ font-weight:500; font-size:8px; letter-spacing:.42em; text-transform:uppercase; padding-left:1px; }

.header-right{ display:flex; align-items:center; gap:10px; }

.main-nav{ display:none; }
.main-nav ul{ display:flex; gap:8px; }
.main-nav a{
  display:inline-block; padding:7px 16px;
  border:1px solid var(--ink); border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.main-nav a:hover,
.main-nav a[aria-current="page"]{ background:var(--ink); color:#fff; }

.cart{
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:11px; font-weight:700;
}

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:34px; padding:0 8px;
  background:none; border:1px solid var(--ink); border-radius:999px; cursor:pointer;
}
.nav-toggle-bar{ height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ------------------------------------------------------- Mobile drawer */
.mobile-nav{
  position:sticky; top:62px; z-index:90;
  background:var(--bg); border-bottom:1px solid var(--hairline);
  padding:8px var(--pad) 20px;
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav a{
  display:block; padding:14px 0; border-bottom:1px solid var(--hairline);
  font-weight:700; font-size:22px; text-transform:uppercase; letter-spacing:.01em;
}
.mobile-nav li:last-child a{ border-bottom:none; }

/* ----------------------------------------------------------------- Hero */
.hero{ padding:clamp(36px,7vw,90px) var(--pad) clamp(30px,5vw,60px); }

.display{
  font-weight:900;
  font-size:clamp(52px, 14vw, 168px);
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
}

.hero-tagline{
  margin:clamp(18px,3vw,34px) 0 0;
  font-weight:800;
  font-size:clamp(22px, 4.4vw, 46px);
  line-height:1.04;
  letter-spacing:-.01em;
  text-transform:uppercase;
}

.hero-media{ margin:clamp(34px,6vw,80px) 0 0; }
.hero-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 20%; }

/* -------------------------------------------------------------- Sections */
.section{ padding:clamp(40px,7vw,96px) var(--pad); }

.section-title{
  font-weight:900;
  font-size:clamp(28px, 5.6vw, 60px);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-bottom:clamp(30px,5vw,64px);
}
.arrow{ display:inline-block; font-weight:900; margin-left:.12em; }

/* Grids */
.grid{ display:grid; gap:var(--gap); }
.grid-3{ grid-template-columns:1fr; }

/* Exhibition cards */
.card-media{ margin:0; overflow:hidden; background:var(--placeholder); }
.card-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .6s var(--ease); }
.card-link:hover .card-media img{ transform:scale(1.04); }

.card-title{
  margin:16px 0 4px;
  font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:3px;
}
.card-cta{
  font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:lowercase;
  border-bottom:1px solid var(--muted); padding-bottom:1px;
  transition:color .25s, border-color .25s;
}
.card-link:hover .card-cta{ color:var(--ink); border-color:var(--ink); }

/* Product cards */
.product-media{ position:relative; margin:0; overflow:hidden; background:var(--placeholder); }
.product-media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.quick-view{
  position:absolute; left:0; right:0; bottom:0;
  padding:12px; text-align:center;
  background:rgba(11,11,11,.86); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  transform:translateY(100%); transition:transform .35s var(--ease);
}
.product-link:hover .quick-view{ transform:translateY(0); }
.product-title{
  margin:16px 0 2px;
  font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
}
.product-status{ margin:0; font-size:12px; color:var(--muted); letter-spacing:.04em; }

/* ----------------------------------------------------------------- Footer */
.site-footer{ padding:clamp(50px,8vw,120px) var(--pad) 40px; border-top:1px solid var(--hairline); }

.instagram{
  display:inline-block;
  font-weight:900;
  font-size:clamp(40px, 11vw, 132px);
  line-height:1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-decoration:underline; text-underline-offset:.08em; text-decoration-thickness:.04em;
  margin-bottom:clamp(40px,6vw,80px);
  transition:opacity .25s;
}
.instagram:hover{ opacity:.55; }

.footer-cols{
  display:grid; grid-template-columns:1fr; gap:36px;
  padding-bottom:48px; border-bottom:1px solid var(--hairline);
}
.footer-col h4{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; }
.footer-col p{ margin:0; font-size:14px; }
.footer-col ul li{ margin-bottom:8px; }
.footer-col ul a{ font-size:13px; color:var(--ink-soft); border-bottom:1px solid transparent; }
.footer-col ul a:hover{ border-color:var(--ink-soft); }

/* Subscribe form */
.subscribe-form .field{ display:flex; flex-direction:column; gap:6px; max-width:320px; }
.subscribe-form label{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.subscribe-form input[type="email"]{
  font:inherit; font-size:14px; padding:9px 0; background:none;
  border:none; border-bottom:1px solid var(--ink); color:var(--ink);
}
.subscribe-form input[type="email"]:focus{ outline:none; border-bottom-width:2px; }
.consent{ display:flex; align-items:flex-start; gap:9px; margin:16px 0; max-width:320px; text-transform:none; letter-spacing:0; font-weight:400; font-size:12.5px; line-height:1.4; }
.consent input{ margin-top:2px; accent-color:var(--ink); }
.btn-subscribe{
  font:inherit; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 30px; background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:999px; cursor:pointer;
  transition:background .25s, color .25s;
}
.btn-subscribe:hover{ background:transparent; color:var(--ink); }
.form-note{ margin:14px 0 0; font-size:13px; font-weight:600; }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:28px;
}
.footer-bottom p{ margin:0; font-size:11px; letter-spacing:.14em; }
.to-top{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--ink); }

/* ----------------------------------------------------- Reveal animation */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ===================================================== Interior pages */

/* Big page title (Work, Store, Biography, Contact, Portfolio) */
.page-head{ padding:clamp(40px,7vw,104px) var(--pad) clamp(8px,2vw,24px); }
.page-title{
  font-weight:900;
  font-size:clamp(46px, 11vw, 132px);
  line-height:.9;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.page-intro{
  margin:clamp(18px,3vw,30px) 0 0;
  max-width:60ch;
  font-size:clamp(14px,1.6vw,16px);
}

/* Two-column title + description block (exhibitions, bio sections) */
.entry{
  display:grid; grid-template-columns:1fr; gap:14px;
  padding:clamp(20px,3vw,30px) 0;
}
.entry-label{
  font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:3px;
  align-self:start;
}
.entry-body p{ margin:0 0 1em; max-width:62ch; }
.entry-body p:last-child{ margin-bottom:0; }

/* Featured-on list (biography) */
.featured-list{ display:flex; flex-direction:column; gap:14px; }
.featured-list li{
  font-weight:800; font-size:clamp(16px,2.4vw,24px);
  letter-spacing:.01em; text-transform:uppercase;
}
.featured-list a{ text-decoration:underline; text-underline-offset:4px; transition:opacity .25s; }
.featured-list a:hover{ opacity:.55; }

/* Contact details */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,52px);
  padding:clamp(24px,4vw,48px) var(--pad) clamp(50px,8vw,110px);
}
.contact-block h2{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.contact-block p,
.contact-block a{ font-weight:800; font-size:clamp(20px,3.2vw,32px); letter-spacing:-.01em; }
.contact-block a{ text-decoration:underline; text-underline-offset:4px; transition:opacity .25s; }
.contact-block a:hover{ opacity:.55; }

/* Portfolio masonry-ish gallery */
.gallery{
  columns:1; column-gap:var(--gap);
  padding:clamp(24px,4vw,48px) var(--pad) clamp(50px,8vw,110px);
}
.gallery figure{ margin:0 0 var(--gap); break-inside:avoid; background:var(--placeholder); overflow:hidden; }
.gallery img{ width:100%; height:auto; display:block; transition:transform .6s var(--ease); }
.gallery figure:hover img{ transform:scale(1.03); }

/* Generic note banner (e.g. policy pages awaiting content) */
.note-banner{
  margin:clamp(20px,4vw,40px) var(--pad) clamp(60px,9vw,120px);
  padding:24px 26px;
  border:1px solid var(--hairline);
  font-size:14px; color:var(--ink-soft); max-width:70ch;
}

/* =========================================================== Breakpoints */
@media (min-width:768px){
  body{ font-size:15px; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
  .main-nav{ display:block; }
  .footer-cols{ grid-template-columns:repeat(3,1fr); gap:48px; }
  .hero-media img{ aspect-ratio:16/9; }

  .entry{ grid-template-columns:minmax(180px,1fr) 2fr; gap:clamp(24px,5vw,80px); }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ columns:2; }
}

@media (min-width:1024px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .hero-tagline{ max-width:none; }
  .entry{ grid-template-columns:minmax(220px,1fr) minmax(0,1.4fr); }
  .contact-grid{ grid-template-columns:repeat(4,1fr); }
  .gallery{ columns:3; }
}

/* ----------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* TEMP: disable policy links — delete this block to re-enable */
.footer-col a[href="privacy-policy.html"],
.footer-col a[href="shipping-policy.html"],
.footer-col a[href="refund-policy.html"],
.footer-col a[href="terms-conditions.html"],
.footer-col a[href="accessibility-statement.html"]{
  pointer-events: none;
  opacity: .4;
  cursor: default;
}