/* ArtByMargo. Minimal, white, one accent: deep burgundy from the signature. Layout after a quiet portfolio template. */
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --burgundy: #5C1426;
  --ink: #141414;
  --mute: #7a7775;
  --line: #e6e4e1;
  --tile: #f4f3f1;
  --sans: 'Satoshi', 'Helvetica Neue', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --pad: clamp(18px, 3.4vw, 48px);
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lock { overflow: hidden; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
::selection { background: var(--burgundy); color: #fff; }

/* text link with a line that wipes in and out */
.ln { position: relative; display: inline-block; font-weight: 500; }
.ln::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform-origin: 100% 50%; transition: transform .5s var(--ease-io); }
.ln:hover::after { transform: scaleX(0); transform-origin: 0 50%; }
.bar .ln::after, .v-nav .ln::after, .v-close::after { transform: scaleX(0); transform-origin: 0 50%; }
.bar .ln:hover::after, .v-nav .ln:hover::after, .v-close:hover::after { transform: scaleX(1); }

/* ---- intro ---- */
.intro { position: fixed; inset: 0; z-index: 200; background: #fff; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: transform 1s var(--ease-io); }
.js:not(.seen) .intro { display: flex; }
.intro.out { transform: translateY(-100%); }

.intro-logo { width: min(66vw, 560px); height: auto; clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--ease-io) .2s; }
.intro.go .intro-logo { clip-path: inset(0); }
.intro-role { font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); opacity: 0; transition: opacity .8s var(--ease) 1.3s; }
.intro.go .intro.go .intro-role { opacity: 1; }

/* ---- top bar ---- */
.bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--pad); min-height: 66px; transition: transform .5s var(--ease), background .3s; }
.bar nav { transition: opacity .4s var(--ease), transform .5s var(--ease); }
.bar.hide nav { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.bar.solid { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bar-home img { width: 30px; height: 30px; }
.bar nav { display: flex; gap: clamp(16px, 3vw, 32px); font-size: 14px; }

/* ---- hero ---- */
.hero { min-height: var(--vh); padding: 90px var(--pad) var(--pad); display: flex; flex-direction: column; gap: 48px; }
.hero-name { flex: 1; display: grid; place-items: center; }
.hero-name img { width: min(78vw, 880px); height: auto; }
.js .hero-name img { clip-path: inset(0 100% 0 0); }
.js .hero.go .hero-name img { clip-path: inset(0); transition: clip-path 1.5s var(--ease-io); }
.hero-row { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: end; }
.hero-about { display: grid; gap: 18px; justify-items: start; max-width: 34ch; }
.hero-about p { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.35; letter-spacing: -.01em; }
.rows { width: 100%; max-width: 440px; border-top: 1px solid var(--line); }
.rows li[hidden] { display: none; }
.row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 500; position: relative; }
.row::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--burgundy); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-io); }
.row-act { color: var(--mute); transition: color .3s; }
.row:hover::after { transform: scaleX(1); }
.row:hover .row-act { color: var(--burgundy); }
@media (min-width: 800px) { .hero-row { grid-template-columns: 1fr minmax(320px, 440px); gap: 8vw; } }

/* ---- works ---- */
.works { padding: 0 var(--pad) clamp(70px, 10vw, 140px); }
.grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 44px) clamp(10px, 1.2vw, 18px); }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.item { display: block; width: 100%; }
.thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--tile); overflow: hidden; }
.thumb img { max-width: 82%; max-height: 82%; width: auto; height: auto; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 34px -18px rgba(0,0,0,.35); transition: transform 1s var(--ease); }
.thumb::after { content: 'View'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(92,20,38,.78); color: #fff; font-weight: 500; font-size: 15px; letter-spacing: .02em; opacity: 0; transition: opacity .45s var(--ease); }
.cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; }
.cap-title { font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mute); white-space: nowrap; }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; box-sizing: border-box; flex: none; }
.st.available::before { background: var(--burgundy); border-color: var(--burgundy); }
.st.available { color: var(--ink); }
.st.reserved::before { background: linear-gradient(90deg, var(--mute) 50%, transparent 50%); }
@media (hover: hover) {
  .item:hover .thumb::after { opacity: 1; }
  .item:hover .thumb img { transform: scale(1.04); }
}

/* ---- about ---- */

/* ---- the artist ---- */
.artist { display: grid; grid-template-columns: 1fr; gap: 18px; padding: clamp(60px, 8vw, 110px) var(--pad); border-top: 1px solid var(--line); }
.artist-label { font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.artist-name { font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.artist-bio { margin-top: 10px; max-width: 32em; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--mute); }
.artist-bio:empty { display: none; }
@media (min-width: 860px) { .artist { grid-template-columns: minmax(180px, 3fr) 9fr; gap: 8vw; align-items: baseline; } }

/* ---- contact ---- */
.foot { background: var(--burgundy); color: #f6eee8; padding: clamp(70px, 10vw, 130px) var(--pad) 28px; }
.foot ::selection { background: #f6eee8; color: var(--burgundy); }
.foot-label { font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,238,232,.62); }
.foot-mail { display: inline-block; margin-top: 18px; font-size: clamp(26px, 6.4vw, 96px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; overflow-wrap: anywhere; transition: opacity .4s var(--ease); }
.foot-mail:hover { opacity: .72; }
.foot-insta { display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 500; border-bottom: 1px solid rgba(246,238,232,.4); }
.foot-insta[hidden] { display: none; }
.foot-legal { display: grid; gap: 10px; margin-top: clamp(60px, 8vw, 110px); max-width: 46em; font-size: 14px; line-height: 1.65; color: rgba(246,238,232,.62); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px 36px; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(246,238,232,.2); font-size: 14px; color: rgba(246,238,232,.62); }
.foot-links { display: flex; gap: 26px; }
.foot-links .ln, .foot-base .ln { color: #f6eee8; font-weight: 400; }
.totop { display: inline-flex; align-items: center; gap: 14px; color: #f6eee8; font-weight: 500; }
.totop svg { box-sizing: content-box; padding: 13px; border: 1px solid rgba(246,238,232,.5); border-radius: 50%; transition: background .5s var(--ease), color .5s var(--ease), transform .7s var(--ease); }
.totop:hover svg { background: #f6eee8; color: var(--burgundy); transform: translateY(-4px); }
@media (max-width: 700px) { .foot-base { flex-direction: column; align-items: flex-start; } }
.foot :focus-visible { outline-color: #f6eee8; }

/* ---- viewer ---- */
.viewer { position: fixed; inset: 0; z-index: 120; background: #fff; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); overflow-y: auto; overscroll-behavior: contain; }
.viewer[hidden] { display: none; }
.v-close { position: fixed; top: 18px; right: var(--pad); z-index: 2; font-size: 14px; }
.v-stage { display: grid; place-items: center; background: var(--tile); padding: clamp(70px, 9vh, 110px) clamp(20px, 4vw, 70px) clamp(30px, 6vh, 70px); min-height: var(--vh); }
.v-stage img { max-width: 100%; max-height: min(84vh, 1200px); width: auto; height: auto; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 28px 50px -24px rgba(0,0,0,.4); }
.v-info { padding: clamp(90px, 14vh, 150px) clamp(24px, 5vw, 72px) 60px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; }
.v-count { font-size: 13px; color: var(--mute); letter-spacing: .08em; }
.v-title { font-size: clamp(34px, 4.6vw, 64px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.v-meta { font-size: 14px; color: var(--mute); }
.v-desc { max-width: 28em; font-size: 17px; line-height: 1.5; }
.v-status { display: flex; gap: 16px; align-items: center; font-weight: 500; }
.v-meta:empty, .v-desc:empty { display: none; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; background: var(--burgundy); color: #fff; font-weight: 500; transition: background .3s, transform .4s var(--ease); }
.btn:hover { background: #3f0d1a; }
.v-nav { display: flex; gap: 28px; margin-top: 18px; font-size: 14px; }
@media (max-width: 860px) {
  .viewer { display: block; }
  .viewer[hidden] { display: none; }
  .v-stage { min-height: 0; padding: 70px 22px 24px; }
  .v-stage img { max-height: 56vh; max-height: 56svh; }
  .v-info { padding: 26px 22px 60px; }
}

/* ---- reveal on scroll ---- */
.js [data-in] { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-in].in { opacity: 1; transform: none; }
.js .bar { opacity: 0; transition: opacity .8s var(--ease), transform .5s var(--ease), background .3s; }
.js .bar.show { opacity: 1; }


/* ---- works: rows, every row the same height, every painting at its own proportions ---- */
.jwrap { display: grid; gap: clamp(34px, 4.4vw, 64px); justify-items: center; }
.jrow { display: flex; justify-content: center; align-items: flex-start; gap: var(--jgap, 20px); }
.jt { margin: 0; flex: none; }
.js .jt[data-in] { opacity: 0; transform: none; transition: opacity 1s var(--ease); }
.js .jt[data-in].in { opacity: 1; }
.jt .item { display: block; width: 100%; text-align: left; }
.jt .thumb { display: block; height: var(--h); background: none; overflow: visible; aspect-ratio: auto; }
.jt .thumb img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 34px -22px rgba(0,0,0,.35); }
.jt .thumb::after { display: none; }
.jt .cap { display: grid; gap: 3px; padding-top: 12px; text-align: left; justify-items: start; }
.jt .cap-title { font-size: 16px; transition: color .3s; }
/* hover or focus a painting: the rest fall back, slowly, and it comes into focus */
.jt .item { transition: opacity 1.3s cubic-bezier(.22,.61,.36,1), filter 1.3s cubic-bezier(.22,.61,.36,1), transform 1.8s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.jt .thumb img { transition: box-shadow 1.4s cubic-bezier(.22,.61,.36,1); }
.jt .cap-title { transition: color 1s cubic-bezier(.22,.61,.36,1); }
.jwrap.focusing .jt:not(.focus) .item { opacity: .26; filter: grayscale(.9) blur(.4px); }
.jwrap.focusing .jt.focus .item { transform: scale(1.018); }
.jwrap.focusing .jt.focus .thumb img { box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 40px 64px -28px rgba(0,0,0,.55); }
.jwrap.focusing .jt.focus .cap-title { color: var(--burgundy); }


/* ---- about words and footer letters ---- */
.cw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.ch { display: inline-block; }
.js .foot-mail .ch { transform: translateY(115%); }
.js .foot-mail.in .ch { transform: none; transition: transform 1s var(--ease) calc(var(--i) * 26ms + 150ms); }


/* ---- touch: bigger tap areas, same look ---- */
@media (pointer: coarse) {
  .ln::before, .v-close::before { content: ''; position: absolute; inset: -13px -8px; }
  .bar nav { gap: 22px; }
  .foot-base .ln::before { inset: -14px -10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}

/* ---- legal page ---- */
.legal-page .bar { opacity: 1; }
.doc { max-width: 760px; margin: 0 auto; padding: clamp(110px, 14vw, 170px) var(--pad) clamp(70px, 9vw, 120px); }
.doc-label { font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.doc h1 { margin-top: 14px; font-size: clamp(34px, 5vw, 58px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
.doc-date { margin-top: 14px; font-size: 14px; color: var(--mute); }
.doc-jump { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 36px 0 12px; font-size: 14px; }
.doc section { padding-top: clamp(40px, 5vw, 64px); scroll-margin-top: 90px; }
.doc h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; letter-spacing: -.02em; }
.doc h3 { margin-top: 26px; font-size: 16px; font-weight: 700; letter-spacing: -.005em; }
.doc p, .doc li { margin-top: 12px; font-size: 17px; line-height: 1.65; }
.doc ul { padding-left: 1.2em; list-style: disc; }
.doc li::marker { color: var(--burgundy); }
.doc a.ln { color: var(--burgundy); }
.doc-foot { padding-top: 40px; }
.doc-foot .foot-base { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---- about overlay: opens over the page, closes back to it ---- */
.aboutov { position: fixed; inset: 0; z-index: 130; background: #fff; overflow-y: auto; overscroll-behavior: contain; }
.aboutov[hidden] { display: none; }
.ab-in { max-width: 1180px; margin: 0 auto; padding: clamp(96px, 12vw, 150px) var(--pad) clamp(70px, 9vw, 120px); }
.ab-name img { width: min(62vw, 400px); height: auto; margin-left: -1%; }
.ab-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 56px); margin-top: clamp(40px, 6vw, 80px); align-items: start; }
.ab-photo { max-width: 420px; background: var(--tile); }
.ab-photo img { width: 100%; height: auto; }
.ab-bio { display: grid; gap: 1.1em; max-width: 30em; }
.ab-bio p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--mute); }
.ab-bio p:first-child { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -.025em; font-weight: 500; color: var(--ink); }
.ab-list { margin-top: clamp(44px, 6vw, 72px); max-width: 38em; }
.ab-label { font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); padding-bottom: 14px; }
.ab-list ul { border-top: 1px solid var(--line); }
.ab-list li { display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ab-item-title { font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.ab-item-by { margin-top: 2px; font-size: 14px; color: var(--mute); }
.ab-item-year { flex: none; font-size: 14px; color: var(--mute); padding-top: 3px; }
.artist-more { margin-top: 18px; font-size: 15px; color: var(--burgundy); justify-self: start; }
@media (min-width: 860px) { .ab-grid { grid-template-columns: minmax(260px, 4fr) 7fr; gap: 7vw; } .ab-photo { position: sticky; top: 110px; } }
@media (max-width: 859px) { .ab-photo { max-width: 340px; } }