/* Art by K.Auner — main stylesheet */

/* Self-hosted fonts (latin subset, from Google Fonts) */

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/newsreader-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/newsreader-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/newsreader-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-500.woff2') format('woff2');
}

:root {
  --bg: #faf9f6;
  --band: #f3efe8;
  --ink: #34322e;
  --body: #57544e;
  --muted: #716c63;
  --hairline: #ebe6de;
  --rule: #ddd6cb;
  --accent: #857a6a;
  --footer-bg: #232220;
  --footer-text: #cfc8bd;
  --footer-muted: #97918a;
  --footer-rule: #3b3936;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
  /* Side gutters grow on wide displays so content never exceeds ~1600px */
  --gutter: max(120px, calc((100vw - 1600px) / 2));
}

* { box-sizing: border-box; }

main { flex: 1 0 auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; }

/* Header */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 34px var(--gutter);
  border-bottom: 1px solid var(--hairline);
}

.brand { display: block; }
.brand img { height: 46px; width: auto; display: block; mix-blend-mode: multiply; }

.site-nav { display: flex; gap: 44px; align-items: center; font-size: 14px; letter-spacing: 0.02em; }
.site-nav a.active { color: var(--accent); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  color: var(--ink);
}

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0.02em;
  font-family: inherit;
  border: none;
  cursor: pointer;
}
.btn:hover { color: var(--bg); background: var(--footer-bg); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  border: 1px solid var(--ink);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.link-underline {
  font-size: 14px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #cfc8bd;
  padding-bottom: 3px;
}

/* Collection page */

.page-head { padding: 88px var(--gutter) 56px; }
.page-head h1 { font-size: 58px; line-height: 1.1; }

/* Product page */

.breadcrumb {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 28px var(--gutter) 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb .current { color: var(--ink); }

.product {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 96px;
  padding: 48px var(--gutter) 110px;
  align-items: start;
}

.product-gallery { display: flex; flex-direction: column; gap: 16px; }

.gallery-frame { position: relative; }

.gallery-main {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
.gallery-main img {
  width: 100%;
  max-height: calc(100vh - 240px);
  object-fit: contain;
  display: block;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  cursor: pointer;
  background: rgba(250, 249, 246, 0.85);
  color: var(--ink);
}
.gallery-nav:hover { background: var(--bg); }
.gallery-nav-prev { left: 12px; }
.gallery-nav-next { right: 12px; }

.gallery-thumbs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.thumb {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px solid var(--rule);
  background: none;
  cursor: pointer;
  opacity: 0.7;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { opacity: 1; }
.thumb.is-active { opacity: 1; border-color: var(--ink); }

.gallery-note { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26, 25, 22, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.lightbox img {
  max-width: 84vw;
  max-height: 86vh;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  background: none;
  border: none;
  color: #cfc8bd;
  cursor: pointer;
}
.lightbox-btn:hover { color: #faf9f6; }
.lightbox-close { top: 20px; right: 24px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-count {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #8a857c;
  font-size: 13px;
}

.product-info { display: flex; flex-direction: column; gap: 28px; padding-top: 12px; }
.product-info h1 { font-size: 52px; line-height: 1.08; }
.product-price { font-size: 26px; font-weight: 300; }
.product-status { font-size: 14px; color: var(--muted); }
.product-description { font-weight: 300; line-height: 1.75; color: var(--body); }

.specs { border-top: 1px solid var(--rule); }
.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 16px 2px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.spec-row dt { color: var(--muted); }
.spec-row dd { margin: 0; }

.product-actions { display: flex; flex-direction: column; gap: 14px; }
.product-note { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.7; }

/* About page */

.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 110px;
  padding: 100px var(--gutter);
  align-items: start;
}
.about-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 40px; }
.about-aside h1 { font-size: 62px; line-height: 1.05; }
.about-aside .born { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; line-height: 1.8; }
.about-aside img { max-width: 380px; margin-top: 24px; box-shadow: 0 20px 48px rgba(46, 45, 42, 0.14); }
.about-aside figcaption { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--muted); }
.about-aside figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }

.about-body { display: flex; flex-direction: column; gap: 32px; padding-top: 16px; }
.about-body .lede { font-family: var(--serif); font-size: 28px; font-weight: 300; line-height: 1.5; }
.about-body p { margin: 0; font-weight: 300; line-height: 1.8; color: var(--body); }

.pullout { padding: 36px 40px; background: var(--band); }
.pullout p { font-family: var(--serif); font-size: 23px; font-weight: 300; font-style: italic; line-height: 1.5; color: var(--ink); }

/* Contact page */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 110px;
  padding: 100px var(--gutter);
  align-items: start;
}
.contact h1 { font-size: 58px; line-height: 1.1; }
.contact-details { display: flex; flex-direction: column; gap: 12px; font-size: 15px; font-weight: 300; margin-top: 28px; }
.contact-details a { border-bottom: 1px solid #cfc8bd; padding-bottom: 2px; align-self: flex-start; }

.contact-form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; color: var(--muted); }
.field input,
.field textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 10px 2px;
  outline: none;
}
.field input:focus,
.field textarea:focus { border-bottom-color: var(--ink); }

.field select {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 10px 28px 10px 2px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2334322e' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  cursor: pointer;
}
.field select:focus { border-bottom-color: var(--ink); }

.form-selection { display: flex; gap: 16px; align-items: center; }
.form-selection[hidden] { display: none; }
.form-selection img { width: 56px; height: 56px; object-fit: cover; }
.form-selection-info { font-size: 14px; color: var(--body); }
.field textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { align-self: flex-start; margin-top: 8px; }
.contact-form .btn:disabled { opacity: 0.6; cursor: default; }

.form-status { margin: 0; font-size: 14px; font-weight: 300; color: var(--body); min-height: 1.4em; }
.form-status-error { color: #8a4f42; }

/* Policy pages */

.policy { max-width: 980px; padding: 88px 120px 110px; }
.policy h1 { font-size: 48px; margin-bottom: 40px; }
.policy h2 { font-size: 24px; font-weight: 400; margin: 36px 0 12px; }
.policy p { font-weight: 300; color: var(--body); line-height: 1.8; margin: 0 0 14px; }
.policy ul, .policy ol { padding-left: 22px; margin: 0 0 14px; }
.policy li { font-weight: 300; color: var(--body); line-height: 1.8; margin-bottom: 6px; }
.policy a { border-bottom: 1px solid #cfc8bd; }
.policy h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; margin: 24px 0 10px; }

/* Footer */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 72px var(--gutter) 48px;
  background: var(--footer-bg);
  color: var(--footer-text);
  margin-top: auto;
}
.footer-cols { display: flex; justify-content: space-between; gap: 64px; }
.footer-about { max-width: 340px; }
.footer-links { display: flex; gap: 96px; }
.footer-logo { height: 44px; width: auto; align-self: flex-start; filter: invert(1); mix-blend-mode: screen; }
.footer-brand { font-family: var(--serif); font-size: 22px; color: var(--bg); }
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; font-weight: 300; }
.footer-col a { color: var(--footer-text); }
.footer-col a:hover { color: var(--bg); }
.footer-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--footer-muted);
}
.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--footer-rule);
  font-size: 12px;
  font-weight: 300;
  color: var(--footer-text);
}

.footer-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px 72px;
  background: var(--footer-bg);
  color: var(--footer-muted);
  font-size: 12px;
  font-weight: 300;
  margin-top: auto;
}
.footer-strip .copyright { color: var(--footer-text); }

/* Layout helper so short pages keep the footer at the bottom */

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* Responsive */

@media (max-width: 960px) {
  .site-header { padding: 18px 24px; }
  .brand img { height: 38px; }
  .site-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    z-index: 10;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 16px 24px; border-top: 1px solid var(--hairline); width: 100%; }
  .nav-toggle { display: block; }



  .section, .page-head, .about, .contact, .policy, .note { padding-left: 24px; padding-right: 24px; }
  .section { padding-top: 56px; padding-bottom: 56px; }



  .product, .about, .contact { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .about-aside { position: static; }
  .breadcrumb, .product { padding-left: 24px; padding-right: 24px; }
  .product-info h1 { font-size: 36px; }
  .page-head h1 { font-size: 38px; }
  .about-aside h1, .contact h1 { font-size: 42px; }

  .site-footer { padding: 48px 24px 32px; }
  .footer-cols { flex-direction: column; gap: 32px; }
  .footer-links { flex-direction: column; gap: 32px; }
  .footer-base { flex-direction: column; gap: 10px; align-items: flex-start; }
  .footer-strip { flex-direction: column; gap: 8px; align-items: flex-start; padding: 28px 24px; }
}

/* Approximate foreign-currency prices (filled in by js/main.js) */
.price-alt { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.product-price .price-alt { display: block; font-size: 14px; margin-top: 8px; }

/* Catalogue design: one painting up front, works at true proportions, numbered index */

.no { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; font-size: 12px; color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c8322b; margin-right: 8px; vertical-align: 1px; }
.hero-work { background: color-mix(in oklab, var(--tint, var(--rule)) 14%, var(--bg)); }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 80px;
  align-items: end;
  padding: 72px var(--gutter) 56px;
}
.intro h1 { font-size: 46px; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.intro h1 span { color: var(--muted); }
.intro-aside { display: flex; flex-direction: column; gap: 18px; font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--body); }
.intro-aside p { margin: 0; }
.status { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.02em; color: var(--ink); }
.status a { border-bottom: 1px solid transparent; padding-bottom: 1px; }
.status a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.status-sep { color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 3px rgba(47, 179, 68, 0.18); }

.hero-work { padding: 48px var(--gutter) 52px; }
.hero-image { display: block; }
.hero-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(74vh, calc(100vh - 320px)); margin: 0 auto; }
/* Smaller paintings are shown smaller, so scale on the home page stays honest */
.hero-m .hero-image img { max-height: min(55vh, calc(100vh - 320px)); }
.hero-s .hero-image img { max-height: min(40vh, calc(100vh - 320px)); }
.hero-caption { display: flex; gap: 20px; align-items: baseline; justify-content: center; margin-top: 28px; font-size: 14px; }
.hero-title { font-family: var(--serif); font-size: 28px; }
.hero-meta { color: var(--body); }
.hero-caption .no, .hero-price .price-alt { color: var(--body); }
.hero-price { font-size: 16px; }
.tag { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: 4px 10px 3px; }
.hero-price .price-alt { display: inline; margin-left: 10px; }

.section { padding: 96px var(--gutter); }

.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 56px; }
.section-head h2 { font-size: 42px; font-weight: 400; }

.wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 72px 32px;
  grid-auto-flow: dense;
  align-items: end;
}
.work { grid-column: span var(--span, 3); }
.work a { display: flex; flex-direction: column; gap: 14px; }
.work img { width: 100%; height: auto; background: var(--band); }
.work-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-items: baseline; font-size: 13px; }
.work-line { display: flex; gap: 12px; align-items: baseline; }
.work-title { font-family: var(--serif); font-size: 20px; }
.work-meta { color: var(--muted); grid-column: 1; }
.work-price { position: relative; font-size: 15px; color: var(--ink); text-align: right; white-space: nowrap; }
.work-price .price-alt { position: absolute; right: 0; top: 100%; margin-top: 4px; font-size: 12px; }
.hero-price .price-alt { font-size: 12px; }
.is-sold img { opacity: 0.85; }
.is-sold .work-title, .is-sold .idx-title { color: var(--muted); }

.page-head { padding: 88px var(--gutter) 56px; }
.page-head h1 { font-size: 58px; line-height: 1.1; }
.count { font-size: 13px; color: var(--muted); margin-top: 16px; }

.catalogue { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 96px; padding: 0 var(--gutter) 110px; align-items: start; }
/* Pinned by js/main.js: scrolls with the page, holds at whichever edge would otherwise leave a gap */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); font-size: 13px; }
.index li { border-bottom: 1px solid var(--rule); }
.index a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; align-items: baseline; }
.idx-title { font-family: var(--serif); font-size: 15px; }
.idx-price { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; color: var(--ink); }
.idx-meta { grid-column: 2 / 4; font-size: 12px; color: var(--muted); }

/* Quarter-width cards beside the index: stack the caption */
.catalogue .work-sm .work-caption { grid-template-columns: minmax(0, 1fr); }
.catalogue .work-sm .work-price { text-align: left; white-space: normal; }
.catalogue .work-sm .work-price .price-alt { position: static; margin-top: 0; }
.catalogue .work-sm .work-meta { grid-column: 1; }

.note { padding: 80px var(--gutter) 110px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.note h2 { font-size: 34px; }
.note p { margin: 0; max-width: 640px; font-weight: 300; color: var(--body); line-height: 1.75; }

.product-info .no { margin-bottom: -16px; }
.signature { height: 60px; width: auto; align-self: flex-end; mix-blend-mode: multiply; margin-top: 8px; }
.contact .lede { font-weight: 300; color: var(--body); line-height: 1.75; margin: 24px 0 0; }
.commission .lede { margin-bottom: 40px; }
.steps { margin: 0 0 40px; padding-left: 1.4em; display: flex; flex-direction: column; gap: 14px; font-weight: 300; color: var(--body); line-height: 1.7; }
.steps strong { font-weight: 500; color: var(--ink); }
.steps li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.commission .contact-form { position: sticky; top: 40px; }
.note .btn { margin-top: 8px; }

@media (max-width: 960px) {
  .hero-work { padding: 24px 24px 36px; }
  .hero-image img { max-height: 60vh; }
  .hero-m .hero-image img { max-height: 46vh; }
  .hero-s .hero-image img { max-height: 34vh; }
  .section, .page-head, .note { padding-left: 24px; padding-right: 24px; }
  .intro { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 44px 24px 36px; }
  .intro h1 { font-size: 30px; }
  .section-head { gap: 16px; flex-wrap: wrap; }
  .section-head h2 { font-size: 30px; }
  .section-head a { white-space: nowrap; }
  .hero-caption { flex-direction: column; gap: 6px; align-items: flex-start; }
  .hero-title { font-size: 22px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .work { grid-column: span 1; }
  .work-title { font-size: 17px; }
  .wall { align-items: start; }
  .work-caption { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .work-line { flex-direction: column; gap: 2px; }
  .work-price { text-align: left; white-space: normal; }
  .work-price .price-alt { display: none; }
  .work-meta { grid-column: 1; margin-top: 4px; }
  .catalogue { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 0 24px 64px; }
  .index { order: 2; position: static !important; top: auto !important; }
  .commission .contact-form { position: static; }
  .page-head h1 { font-size: 38px; }
  .note { padding: 56px 24px 72px; }
}