/* Arts Exchange Market v0.4.3 — shared Arts Exchange UI foundation.
   Values and geometry are consolidated from the Arts Exchange Production v2.1.21
   public UI kit. This is a deliberately small extraction: one owning rule per
   shared primitive, with no page-history overrides or specificity patches. */

:root{
  --ink:#11110f;
  --ink-2:#24231f;
  --paper:#fdfdfc;
  --paper-2:#f2f2ee;
  --surface:#fafaf8;
  --surface-strong:#fff;
  --night:#080908;
  --line:rgba(17,17,15,.13);
  --line-strong:rgba(17,17,15,.25);
  --muted:#706d66;
  --success:#225f3b;
  --warning:#76520f;
  --danger:#842d26;
  --sans:"Inter","Roboto","Helvetica Neue",Arial,sans-serif;
  --mono:"Roboto Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --radius-xs:10px;
  --radius-sm:12px;
  --focus-backdrop:rgba(12,12,11,.32);
  --focus-blur:6px;
  --page-max:1880px;
  --page-x:max(clamp(24px,3.75vw,72px),calc(50vw - 940px));
  --public-grid-gap:clamp(18px,2vw,34px);
  --public-directory-column-gap:clamp(28px,3vw,52px);
  --public-directory-row-gap:clamp(46px,5vw,74px);
  --public-media-radius:6px;
  --public-card-media-ratio:4/3;
  --public-media-canvas:#f2f2ef;
  --public-art-mount-pad:clamp(16px,1.6vw,28px);
  --public-art-detail-pad:clamp(22px,2.8vw,48px);
  --public-work-title-size:clamp(17px,1.25vw,20px);
  --public-card-meta-size:11px;
  --public-header-height:72px;
}

*{box-sizing:border-box}
html{min-height:100%;margin:0;background:var(--paper);scroll-behavior:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px;min-height:100vh;min-height:100svh;margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-optical-sizing:auto;font-synthesis:none;font-feature-settings:"kern" 1,"liga" 1;line-height:1.45;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body,#app,#main-content{max-width:100%;overflow-x:clip}
#app{display:flex;min-height:100vh;min-height:100svh;flex-direction:column}
#main-content{flex:1 0 auto}
.site-footer{flex:0 0 auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
img,video{max-width:100%}
code,.mono{font-family:var(--mono);font-weight:400;letter-spacing:-.015em}
::selection{background:#e9e3d8;color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.eyebrow{margin:0;color:inherit;font-size:10px;font-weight:720;line-height:1.25;letter-spacing:.14em;text-transform:uppercase}
.text-link{display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;border-bottom:1px solid currentColor;font-size:13px;font-weight:650}
.text-link:hover{opacity:.62}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 16px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:transparent;
  color:inherit;
  font-size:13px;
  font-weight:650;
  line-height:1.2;
  cursor:pointer;
  box-shadow:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.button:hover{transform:translateY(-1px);border-color:currentColor}
.button.dark{border-color:var(--ink);background:var(--ink);color:#fff}
.button.dark:hover{background:#292925}
.button.ghost{border-color:var(--line);background:rgba(255,255,255,.4)}
.button.ghost:hover{background:#fff}
.button:disabled,.button[disabled]{opacity:.38;cursor:not-allowed;transform:none}

input,textarea,select{
  width:100%;
  min-height:46px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.48);
  color:var(--ink);
  outline:none;
  box-shadow:none;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
input:hover,textarea:hover,select:hover{border-color:var(--line-strong);background:rgba(255,255,255,.72)}
input:focus,textarea:focus,select:focus{border-color:rgba(17,17,15,.42);background:#fff;box-shadow:0 0 0 3px rgba(71,101,83,.1)}

/* Shared public masthead — same 72/66px physical shell, 174/158px identity,
   page gutter and progressive native backdrop material as Production v2.1.21. */
.site-header{
  --public-header-hide-distance:80px;
  --public-header-fg:rgb(10 10 10);
  --public-header-outline:rgba(10,10,10,.18);
  --public-header-cta-bg:rgb(10 10 10);
  --public-header-cta-fg:rgb(255 255 255);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:34px;
  width:100%;
  height:var(--public-header-height);
  min-height:var(--public-header-height);
  padding:12px var(--page-x);
  color:var(--public-header-fg);
  background:transparent;
  border:0;
  box-shadow:none;
  isolation:auto;
  transition:top .56s cubic-bezier(.22,1,.36,1);
}
.site-header.is-auto-hidden{top:calc(0px - var(--public-header-hide-distance));pointer-events:none}
.site-header>:not(.public-header-material){position:relative;z-index:1}
.site-header .brand{display:flex;align-items:center;flex:0 0 auto}
.site-header .brand img{display:block;width:174px;height:auto;filter:none}
.site-header .head-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;white-space:nowrap}
.site-header .head-actions .button.ghost{border-color:var(--public-header-outline);background:transparent;color:var(--public-header-fg)}
.site-header .head-actions .button.dark{border-color:var(--public-header-cta-bg);background:var(--public-header-cta-bg);color:var(--public-header-cta-fg)}

.public-header-material{position:absolute;inset:0;z-index:-1;display:grid;width:100%;height:100%;pointer-events:none}
.public-header-blur{grid-area:1/1;transform:translateZ(0);backface-visibility:hidden;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.public-header-blur-1a,.public-header-blur-1b{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask:linear-gradient(0deg,transparent,#000 8%);mask:linear-gradient(0deg,transparent,#000 8%)}
.public-header-blur-4{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask:linear-gradient(0deg,transparent 8%,#000 16%);mask:linear-gradient(0deg,transparent 8%,#000 16%)}
.public-header-blur-8{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask:linear-gradient(0deg,transparent 16%,#000 24%);mask:linear-gradient(0deg,transparent 16%,#000 24%)}
.public-header-blur-16{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask:linear-gradient(0deg,transparent 24%,#000 36%);mask:linear-gradient(0deg,transparent 24%,#000 36%)}
.public-header-blur-24{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);-webkit-mask:linear-gradient(0deg,transparent 36%,#000 48%);mask:linear-gradient(0deg,transparent 36%,#000 48%)}
.public-header-blur-32{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-mask:linear-gradient(0deg,transparent 48%,#000 60%);mask:linear-gradient(0deg,transparent 48%,#000 60%)}

/* Canonical public artwork card mount and reading order. */
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--public-directory-column-gap);row-gap:var(--public-directory-row-gap)}
.art-card{display:block;min-width:0;color:var(--ink)}
.art-card-media{display:grid;place-items:center;width:100%;aspect-ratio:var(--public-card-media-ratio);min-width:0;min-height:0;padding:var(--public-art-mount-pad);overflow:hidden;border:0;border-radius:var(--public-media-radius);background:var(--public-media-canvas)}
.art-card-media>:is(img,video){display:block;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;object-fit:contain;object-position:50% 50%;border:0;background:transparent}
.art-card-copy{padding:15px 0 17px;border-bottom:1px solid var(--line)}
.art-card-copy .public-card-title{margin:0 0 5px;font-size:var(--public-work-title-size);font-weight:620;line-height:1.1;letter-spacing:-.025em}
.art-card-copy .public-card-byline,.art-card-copy .public-card-meta{margin:0;color:var(--muted);font-size:var(--public-card-meta-size);line-height:1.4}

/* Canonical public footer grid from Production v2.1.21. */
.site-footer{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--public-grid-gap);
  row-gap:clamp(48px,5vw,78px);
  width:100%;
  padding:clamp(64px,6vw,96px) var(--page-x) 30px;
  background:var(--night);
  color:#fff;
}
.site-footer .footer-brand{grid-column:1/6;display:grid;align-content:start;justify-items:start;gap:clamp(22px,2vw,30px);min-width:0}
.site-footer .footer-mark{display:block;width:clamp(168px,13vw,200px);height:auto;color:#fff}
.site-footer .footer-mark img{display:block;width:100%;height:auto;margin:0}
.site-footer .footer-brand p{max-width:440px;margin:0;color:#fff;font-size:clamp(22px,2vw,31px);font-weight:520;line-height:1.12;letter-spacing:-.035em}
.site-footer .footer-links{grid-column:7/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--public-grid-gap);min-width:0}
.site-footer .footer-links>div{display:grid;align-content:start;justify-items:start;gap:10px;min-width:0}
.site-footer .footer-links span{margin-bottom:6px;color:#858581;font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.13em;text-transform:uppercase}
.site-footer .footer-links a,.site-footer .footer-links button{padding:0;border:0;background:none;color:#fff;font-size:13px;line-height:1.45;text-align:left;text-decoration:none;cursor:pointer}
.site-footer .footer-links a:hover,.site-footer .footer-links button:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer .footer-meta{grid-column:1/13;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);color:#858581;text-align:left}
.site-footer .footer-meta span{color:inherit;font-size:9px;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.footer-legal{display:flex;align-items:center;justify-content:flex-end;gap:22px;margin-left:auto}
.footer-legal a{color:#aaa8a2;font-size:11px}
.footer-legal a:hover{color:#fff;text-decoration:underline}


@media(max-width:1180px){
  .site-header{background:rgba(250,250,248,.97)}
  .public-header-material{display:none}
}

@media(max-width:960px){
  .site-footer{row-gap:46px}
  .site-footer .footer-brand,.site-footer .footer-links{grid-column:1/13}
  .site-footer .footer-brand p{max-width:560px}
}

@media(max-width:760px){
  :root{--public-header-height:66px;--page-x:24px}
  .site-header{--public-header-hide-distance:74px;gap:16px}
  .site-header .brand img{width:158px}
  .site-header .head-actions .button{min-height:40px;padding:9px 12px;font-size:11px}
  .art-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .site-footer{row-gap:38px;padding-top:54px;padding-bottom:24px}
  .site-footer .footer-mark{width:168px}
  .site-footer .footer-brand p{font-size:24px}
  .site-footer .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .site-footer .footer-links>div:last-child{grid-column:1/-1}
  .site-footer .footer-meta{align-items:center;flex-direction:row;flex-wrap:wrap;gap:10px 18px}
  .site-footer .footer-meta .footer-legal{margin-left:auto}
}

@media(prefers-reduced-motion:reduce){
  .site-header{transition:none}
  .button{transition:none}
}

@media(prefers-reduced-transparency:reduce){
  .public-header-blur{-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask:none;mask:none}
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .public-header-blur{-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask:none;mask:none}
}

[hidden]{display:none}