/* Juliana Porotsky Art
   Taken from the "New Works" invitations: dusty-blue damask walls, a champagne
   parchment panel in a gilt frame, copperplate script over spaced classical capitals,
   and gold flourish dividers. */

:root {
  --damask: #7d8aab;
  --damask-line: #7280a2;
  --damask-motif: #8b97b6;
  --parchment: #f4ebdc;
  --parchment-edge: #e9dcc5;
  --pearl: #fbf7ef;
  --gilt: #a27a3a;
  --gilt-soft: #c6a565;
  --rose: #b5626f;
  --ink: #2a2537;
  --ink-soft: #5d5566;

  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;

  --pad: clamp(20px, 5vw, 72px);
  --measure: 36em;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 1.1875rem/1.6 var(--serif);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  /* Damask wallpaper: a lozenge trellis with a small fleuron in each cell. */
  background-color: var(--damask);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='80' viewBox='0 0 56 80'%3E%3Cpath d='M28 0L56 40L28 80L0 40Z' fill='none' stroke='%237280a2' stroke-width='1.2'/%3E%3Cg fill='%238b97b6'%3E%3Cpath d='M28 30c3 4 3 8 0 12c-3-4-3-8 0-12z'/%3E%3Cpath d='M18 40c4-3 8-3 10 0c-2 3-6 3-10 0z'/%3E%3Cpath d='M38 40c-4-3-8-3-10 0c2 3 6 3 10 0z'/%3E%3Ccircle cx='28' cy='47' r='1.6'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='56' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='80' r='2.4'/%3E%3Ccircle cx='56' cy='80' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-color: var(--gilt); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--rose); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 30; background: var(--ink); color: var(--pearl); padding: .5em 1em; }
.skip:focus { top: 12px; }

/* ---------- the parchment panel on the wall ---------- */
.wall { padding: clamp(10px, 3.2vw, 48px); }
.panel {
  position: relative;
  max-width: 1320px; margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--pad) clamp(28px, 4vw, 48px);
  background:
    radial-gradient(ellipse at 50% 30%, var(--pearl) 0%, var(--parchment) 55%, var(--parchment-edge) 100%);
  box-shadow:
    inset 0 0 0 9px var(--parchment), inset 0 0 0 10px var(--gilt),
    inset 0 0 0 13px var(--parchment), inset 0 0 0 14px var(--gilt-soft),
    0 2px 18px rgba(42, 37, 55, .28);
}
.corner {
  position: absolute; width: 72px; height: 72px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none' stroke='%23a27a3a' stroke-linecap='round'%3E%3Cpath d='M14 70V30C14 20 20 14 30 14h40' stroke-width='1.3'/%3E%3Cpath d='M14 44c9 0 13 7 8 11s-10-1-6-5' stroke-width='1.2'/%3E%3Cpath d='M44 14c0 9 7 13 11 8s-1-10-5-6' stroke-width='1.2'/%3E%3Cpath d='M20 20c6-6 14-4 12 2s-9 4-7-1' stroke-width='1.2'/%3E%3Ccircle cx='14' cy='14' r='3.2' fill='%23a27a3a' stroke='none'/%3E%3C/svg%3E") no-repeat;
}
.corner.tl { top: 2px; left: 2px; }
.corner.tr { top: 2px; right: 2px; transform: scaleX(-1); }
.corner.bl { bottom: 2px; left: 2px; transform: scaleY(-1); }
.corner.br { bottom: 2px; right: 2px; transform: scale(-1, -1); }
@media (max-width: 600px) { .corner { width: 52px; height: 52px; } }

/* ---------- type ---------- */
.script-title, .wordmark-name {
  font-family: var(--script); font-weight: 400; line-height: 1.05; color: var(--ink); margin: 0;
}
.caps-line, .nav, .wordmark-art, .button, .filter button, .crumb, .card-new, .pager span, .contact-list dt, .footer-links {
  text-transform: uppercase; letter-spacing: .2em; font-feature-settings: "lnum";
}
.caps-line { margin: .5rem 0 0; font-size: .82rem; color: var(--ink-soft); }
.flourish { display: block; width: 220px; height: 22px; margin: 1rem auto 0; color: var(--gilt); }
.flourish.small { width: 150px; height: 16px; }
.flourish.left { margin-left: 0; }

/* ---------- masthead ---------- */
.masthead { text-align: center; padding-top: clamp(6px, 1.5vw, 16px); }
.wordmark { display: inline-block; text-decoration: none; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wordmark-name { display: block; font-size: clamp(2.7rem, 7vw, 4.4rem); }
.wordmark-art { display: block; margin-top: .1rem; font-size: clamp(.95rem, 1.6vw, 1.15rem); letter-spacing: .55em; padding-left: .55em; }
.nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem clamp(1rem, 3vw, 2.6rem);
  list-style: none; margin: 1.3rem 0 0; padding: .8rem 0;
  border-top: 1px solid var(--gilt-soft); border-bottom: 1px solid var(--gilt-soft);
  font-size: .8rem;
}
.nav a { text-decoration: none; color: var(--ink); padding: .2em 0; }
.nav a:hover, .nav a[aria-current] { color: var(--rose); }
.nav a[aria-current] { border-bottom: 1px solid var(--rose); }

/* ---------- shared blocks ---------- */
.section { padding-top: clamp(40px, 6vw, 80px); }
.heading { text-align: center; margin-bottom: clamp(24px, 3.5vw, 44px); }
.heading .script-title { font-size: clamp(2.8rem, 6vw, 4.2rem); }
.intro { max-width: var(--measure); margin: 0 auto clamp(24px, 3vw, 40px); text-align: center; color: var(--ink-soft); }

.button {
  display: inline-block; margin-top: 1.6rem; padding: .95em 1.8em; font-size: .78rem; text-decoration: none;
  color: var(--pearl); background: var(--ink); border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--gilt-soft);
}
.button:hover { background: var(--rose); border-color: var(--rose); color: var(--pearl); box-shadow: inset 0 0 0 3px var(--rose), inset 0 0 0 4px var(--pearl); }
.button.quiet { background: transparent; color: var(--ink); box-shadow: none; }
.button.quiet:hover { background: var(--ink); color: var(--pearl); border-color: var(--ink); }

/* A gilt slip around every artwork, like the inner edge of a picture frame. */
.card-frame {
  display: block; background: var(--pearl);
  box-shadow: 0 0 0 1px var(--gilt), 0 0 0 5px var(--pearl), 0 0 0 6px var(--gilt-soft), 0 6px 14px rgba(42, 37, 55, .18);
}
.card-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- hero: the invitation itself ---------- */
.hero { padding-top: clamp(28px, 4vw, 52px); text-align: center; }
.hero-invitation {
  width: min(100%, 560px); margin: 0 auto;
  box-shadow: 0 0 0 1px var(--gilt), 0 0 0 6px var(--pearl), 0 0 0 7px var(--gilt-soft), 0 10px 26px rgba(42, 37, 55, .28);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.quote { max-width: 46rem; margin: clamp(48px, 7vw, 96px) auto 0; text-align: center; }
.quote blockquote { margin: 0; }
.quote p { margin: 0; font-style: italic; font-size: clamp(1.25rem, 2.3vw, 1.55rem); line-height: 1.55; }
.quote footer { margin-top: .6rem; font-family: var(--script); font-size: 2.4rem; color: var(--gilt); }

/* ---------- salon grid: each work keeps its own proportions ---------- */
.salon { --row: clamp(150px, 19vw, 240px); display: flex; flex-wrap: wrap; gap: clamp(26px, 3vw, 40px) clamp(18px, 2.2vw, 32px); list-style: none; margin: 0; padding: 8px; }
.salon::after { content: ""; flex-grow: 1e4; }
.salon.full::after { display: none; }   /* last row is complete, so let it stretch edge to edge */
.card { flex-grow: calc(var(--ar) * 100); flex-basis: calc(var(--ar) * var(--row)); max-width: calc(var(--ar) * var(--row) * 1.9); }
.card a { display: block; text-decoration: none; text-align: center; color: var(--ink); }
.card .card-frame { aspect-ratio: var(--ar); }
.card a:hover .card-frame { box-shadow: 0 0 0 1px var(--gilt), 0 0 0 5px var(--pearl), 0 0 0 6px var(--rose), 0 8px 18px rgba(42, 37, 55, .24); }
.card-title { display: block; margin-top: .9rem; font-style: italic; line-height: 1.25; }
.card a:hover .card-title { color: var(--rose); }
.card-meta { display: block; margin-top: .15rem; font-size: .95rem; color: var(--ink-soft); font-feature-settings: "lnum"; }
.status-sold, .status-unavailable { font-style: italic; }
.status-sold { color: var(--rose); }
.card-new { margin-left: .7em; font-size: .68rem; color: var(--rose); font-style: normal; }
.card-new.big { margin: 0 0 .4rem; font-size: .78rem; }
.salon.only-available .card:not([data-status="available"]) { display: none; }

.filter { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(22px, 3vw, 36px); }
.filter button {
  font: 500 .74rem var(--serif); padding: .7em 1.3em; cursor: pointer;
  color: var(--ink); background: transparent; border: 1px solid var(--gilt-soft);
}
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--pearl); border-color: var(--ink); }
.more-link { text-align: center; margin-top: 2.2rem; font-style: italic; }

.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(28px, 4vw, 52px); list-style: none; margin: 0; padding: 8px; }
.door { display: block; text-align: center; text-decoration: none; }
.door .card-frame { aspect-ratio: 4 / 5; }
.door-name { display: block; margin-top: .9rem; font-family: var(--script); font-size: 2.4rem; line-height: 1.1; }

/* ---------- piece page ---------- */
.piece { padding-top: clamp(28px, 4vw, 48px); }
.crumb { margin: 0 0 1.4rem; font-size: .74rem; }
.crumb a { text-decoration: none; }
.crumb a::before { content: "‹ "; }
.piece-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.piece-media { padding: 8px; }
.piece-main { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.piece-main img { max-height: 76vh; width: auto; margin: 0 auto; object-fit: contain; }
.piece-main .card-frame { display: inline-block; }
.piece-media { text-align: center; }
.thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none; margin: 22px 0 0; padding: 0; }
.thumbs button, .thumbs a { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; box-shadow: 0 0 0 1px var(--gilt-soft); }
.thumbs [aria-current] img { box-shadow: 0 0 0 2px var(--rose); }
.piece-text h1 { margin: 0; font-weight: 400; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.15; }
.piece-text .flourish { margin-top: .8rem; }
.price { margin: 1.1rem 0 1.2rem; font-size: 1.6rem; font-feature-settings: "lnum"; }
.piece-text p { max-width: var(--measure); }
.size { color: var(--ink-soft); }
.cta-note { margin-top: .8rem; font-size: 1rem; color: var(--ink-soft); }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(40px, 6vw, 72px); padding-top: 1.2rem; border-top: 1px solid var(--gilt-soft); }
.pager a { text-decoration: none; font-style: italic; max-width: 45%; }
.pager span { display: block; font-style: normal; font-size: .7rem; color: var(--ink-soft); }
.pager-next { margin-left: auto; text-align: right; }
@media (max-width: 760px) { .piece-layout { grid-template-columns: 1fr; } }

.zoom { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(42, 37, 55, .96); }
.zoom[open] { display: grid; place-items: center; }
.zoom::backdrop { background: rgba(42, 37, 55, .9); }
.zoom img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); object-fit: contain; }
.zoom-close { position: absolute; top: 8px; right: 12px; width: 48px; height: 48px; font: 2.4rem/1 var(--serif); color: var(--pearl); background: none; border: 0; cursor: pointer; }

/* ---------- furniture ---------- */
.lede { max-width: var(--measure); margin: 0 auto; text-align: center; }
.lede-q { font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.35; margin: 0 0 1rem; text-align: center; }
.tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(36px, 4vw, 56px); list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 8px; }
.compare { --pos: 50%; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--pearl);
  box-shadow: 0 0 0 1px var(--gilt), 0 0 0 5px var(--pearl), 0 0 0 6px var(--gilt-soft), 0 6px 14px rgba(42, 37, 55, .18); }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--pearl); pointer-events: none; }
.compare-line::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pearl); color: var(--ink); box-shadow: 0 0 0 1px var(--gilt), 0 2px 8px rgba(42, 37, 55, .3);
}
.compare-tag { position: absolute; bottom: 12px; padding: .1em .6em; font-style: italic; background: rgba(251, 247, 239, .9); pointer-events: none; }
.compare-tag.from { left: 12px; }
.compare-tag.to { right: 12px; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: 8px; }
.table .thumbs { justify-content: flex-start; }

/* ---------- about & contact ---------- */
.about-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.about-photo { margin: 0; padding: 8px; }
.about-photo img { filter: sepia(.25) contrast(1.02); }
.prose p { max-width: var(--measure); margin: 0 0 1.1em; }
.prose p:first-child::first-letter { float: left; font-family: var(--script); font-size: 4.6rem; line-height: .8; padding: .08em .1em 0 0; color: var(--gilt); }
@media (max-width: 760px) { .about-layout { grid-template-columns: 1fr; } .about-photo { max-width: 420px; } }

.contact { text-align: center; }
.contact-copy { max-width: var(--measure); margin: 0 auto; }
.contact-list { display: grid; gap: 1.2rem; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0; }
.contact-list dt { font-size: .72rem; color: var(--ink-soft); }
.contact-list dd { margin: .2rem 0 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); overflow-wrap: anywhere; }

/* ---------- footer ---------- */
.footer { margin-top: clamp(56px, 8vw, 104px); text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; margin: 1.2rem 0 0; font-size: .74rem; }
.footer-links a { text-decoration: none; }
.footer-note { margin: .8rem 0 0; font-size: .95rem; font-style: italic; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}