/* Evie Simon Art Advisory, Private Viewing Rooms
   Design tokens derived from Evie's typewritten wordmark: ink on paper.
   One face for everything but the logo: Archivo (Google Fonts, OFL),
   used expanded for titles and labels and semi-expanded for body, in the
   spirit of the wide grotesques Elsa chose on 2026-10-20. See docs/brand.md.
   The variable names are shared with admin.css and room-edit.css. */

:root {
  --white-hsl: 40, 36%, 95%;      /* paper #F7F4EE */
  --black-hsl: 0, 0%, 10%;        /* ink #1A1A1A */
  --accent-hsl: 39, 30%, 91%;     /* paper-deep #EFEAE1 */
  --light-accent-hsl: 40, 33%, 93%;
  --ribbon-hsl: 4, 60%, 41%;      /* red #A8322A: errors and destructive actions only */
  --moss-hsl: 69, 15%, 32%;       /* moss #5E6340: the accent, 5.7:1 on paper */
  --moss-deep-hsl: 69, 17%, 27%;  /* moss-deep #4F5434: hover and pressed */
  --moss-tint-hsl: 64, 23%, 88%;  /* moss-tint #E7E8DA: bands, chips, selection */

  --bg: hsl(var(--white-hsl));
  --ink: hsl(var(--black-hsl));
  --ink-soft: hsl(34, 4%, 35%);   /* graphite #5C5955 */
  --ink-faint: hsl(36, 5%, 54%);  /* graphite-faint #8E8A84 */
  --sand: hsl(var(--accent-hsl));
  --cream: hsl(var(--light-accent-hsl));
  --hairline: hsl(39, 18%, 82%);  /* rule #D9D3C8 */
  --ribbon: hsl(var(--ribbon-hsl));
  --moss: hsl(var(--moss-hsl));
  --moss-deep: hsl(var(--moss-deep-hsl));
  --moss-tint: hsl(var(--moss-tint-hsl));
  --mat: #ffffff;

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Archivo's width axis: titles, labels, and buttons run expanded, body
     copy semi-expanded so lines stay readable. */
  --stretch-wide: 125%;
  --stretch-text: 112.5%;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-base: clamp(3.5rem, 9vw, 7.5rem);
  --section: var(--section-base);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-stretch: var(--stretch-text);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

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

button, input, select, textarea { font-stretch: inherit; }

a { color: inherit; }

::selection { background: var(--moss-tint); }

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

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: var(--stretch-wide);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-label);
  font-stretch: var(--stretch-wide);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
}

/* ---------- Chrome ---------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--gutter);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
}

.head-actions .head-cta {
  font-family: var(--font-body);
  font-stretch: var(--stretch-wide);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.head-actions .head-cta:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--moss); color: var(--moss); }

.wordmark {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.wordmark-logo {
  display: block;
  height: 26px;
  width: auto;
}

@media (min-width: 768px) {
  .wordmark-logo { height: 30px; }
}

/* The site tag sits to the right of the logo behind a hairline, on one
   line, like a typed title beside a letterhead. */
.wordmark small {
  display: block;
  font-family: var(--font-label);
  font-stretch: var(--stretch-wide);
  font-weight: 500;
  font-size: 0.6rem;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moss);
  padding-left: 0.85rem;
  border-left: 1px solid var(--hairline);
  white-space: nowrap;
}

.head-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.85rem;
}

.head-actions a { text-decoration: none; color: var(--ink-soft); }
.head-actions a:hover { color: var(--ink); }

.site-foot {
  margin-top: auto;
  padding: 2.2rem var(--gutter) 2.6rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

/* ---------- Buttons and forms ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--moss);
  border: 1px solid var(--moss);
  padding: 1rem 2rem;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.btn:hover { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--bg); }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--moss); border-color: var(--moss); color: var(--bg); }

.btn:disabled { opacity: 0.45; pointer-events: none; }

.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-faint);
  border-radius: 0;
  padding: 0.65rem 0.1rem;
  min-height: 48px;
  transition: border-color 0.2s ease;
}

.field input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.form-note { font-size: 0.85rem; color: var(--ink-soft); }

.form-error {
  font-size: 0.9rem;
  color: var(--ribbon);
  min-height: 1.4em;
}

/* ---------- Login / gate pages ---------- */

.gate {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--section) var(--gutter);
}

.gate-card {
  width: 100%;
  max-width: 26.5rem;
  text-align: center;
}

.gate-card .eyebrow { margin-bottom: 1.1rem; }

.gate-card h1 {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  margin-bottom: 1.1rem;
}

.gate-card > p { color: var(--ink-soft); margin-bottom: 2.2rem; }

.gate-card form { text-align: left; display: grid; gap: 1.4rem; }

.gate-card .btn { width: 100%; }

.gate-rule {
  width: 2.6rem;
  height: 3px;
  background: var(--moss);
  margin: 0 auto 1.4rem;
}

.gate-swap { display: none; }
.gate.is-sent .gate-initial { display: none; }
.gate.is-sent .gate-sent { display: block; }
.gate.is-expired .gate-initial { display: none; }
.gate.is-expired .gate-expired { display: block; }

/* ---------- Your Viewing Rooms ---------- */

.page-intro {
  padding: var(--section) var(--gutter) calc(var(--section) * 0.5);
  max-width: 46rem;
}

.page-intro h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 0.9rem 0 1rem; }
.page-intro p { color: var(--ink-soft); max-width: var(--measure); }

.room-list {
  list-style: none;
  padding: 0 var(--gutter) var(--section);
  max-width: 62rem;
}

.room-card {
  border-top: 1px solid var(--hairline);
}

.room-card a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 2rem;
  padding: 1.9rem 0;
  text-decoration: none;
  transition: padding-left 0.3s ease;
}

.room-card a:hover { padding-left: 0.9rem; }

.room-card h2 { font-size: clamp(1rem, 2.5vw, 1.3rem); }

.room-card .room-meta {
  grid-column: 1;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.room-card .room-arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 1.4rem;
  color: var(--ink-faint);
}

.room-card a:hover .room-arrow { color: var(--ink); }

.empty-state {
  padding: 0 var(--gutter) var(--section);
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---------- Room viewer ---------- */

.room-hero {
  padding: calc(var(--section) * var(--bsq, 1)) var(--gutter);
  text-align: center;
}

/* **bold** in typed text renders as the loaded semibold, never a
   synthesized bold. */
.room-sub strong, .room-note strong, .section-sub strong, .sub-sub strong,
.piece-desc strong, .placement-caption strong, .room-close strong { font-weight: 600; }

.room-hero .eyebrow { margin-bottom: 1.2rem; }

.room-hero h1 {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  max-width: 22ch;
  margin: 0 auto;
}

.room-hero .room-sub {
  margin: 1.3rem auto 0;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.room-hero .gate-rule { margin-top: 2rem; }

.room-note {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section);
  color: var(--ink-soft);
  text-align: center;
}

.pieces {
  list-style: none;
  display: grid;
  gap: calc(var(--section) * 1.1);
  padding: 0 var(--gutter) var(--section);
  max-width: 71rem;
  margin: 0 auto;
  width: 100%;
}

.piece {
  display: grid;
  gap: calc(1.6rem * var(--bsq, 1));
  align-items: center;
}

.piece-figure { position: relative; }

.piece-figure button {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: var(--cream);
  cursor: zoom-in;
}

.piece-figure img { width: 100%; height: auto; }

.piece-info { max-width: 24rem; }

.piece-artist {
  font-family: var(--font-display);
  font-stretch: var(--stretch-wide);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.piece-title { font-style: italic; color: var(--ink-soft); margin-top: 0.15rem; }

.piece-facts {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: grid;
  gap: 0.15rem;
}

.piece-price {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.piece-desc { margin-top: 1rem; font-size: 0.95rem; color: var(--ink-soft); }

/* Inline-flex so the row follows the info column's text alignment
   (right-aligned on alternating pieces) instead of pinning left. */
.piece-actions { margin-top: 1.4rem; display: inline-flex; gap: 0.7rem; align-items: center; }

.piece-actions .btn { padding: 0.8rem 1.5rem; min-height: 44px; }

/* Alternating editorial layout on wide screens */
@media (min-width: 769px) {
  .piece { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: calc(clamp(2rem, 5vw, 4.5rem) * var(--bsq, 1)); }
  .piece:nth-child(even) .piece-figure { order: 2; }
  .piece:nth-child(even) .piece-info { order: 1; justify-self: end; text-align: right; }
  .piece:nth-child(even) .piece-facts { justify-items: end; }
}

/* ---------- Sections ---------- */

.section-head {
  text-align: center;
  padding: calc(var(--section) * 0.9 * var(--bsq, 1)) var(--gutter) calc(var(--section) * 0.55 * var(--bsq, 1));
  max-width: 46rem;
  margin: 0 auto;
}

.section-head .eyebrow { margin-bottom: 1rem; }

.section-head h2 {
  font-size: clamp(1.25rem, 3.5vw, 1.8rem);
}

.section-head .section-artists {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.section-head .section-sub {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Placement bands ---------- */

.placement {
  background: var(--moss-tint);
  padding: calc(clamp(2.2rem, 6vw, 4.5rem) * var(--bsq, 1)) var(--gutter);
  margin: calc(var(--section) * 0.55 * var(--bsq, 1)) 0;
}

.placement .eyebrow {
  text-align: center;
  margin-bottom: 1.6rem;
}

.placement-imgs {
  max-width: 71rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
}

.placement-imgs.multi {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: center;
}

.placement-imgs button {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.placement-imgs img { width: 100%; height: auto; }

.placement .placement-caption {
  text-align: center;
  margin-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Hearts ---------- */

.heart-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.heart-btn:hover { border-color: var(--ink); color: var(--ink); }

.heart-btn.liked { color: var(--moss); border-color: var(--moss); }

.heart-btn:active { transform: scale(1.15); }

/* ---------- Piece page ---------- */

.piece-solo {
  max-width: 56rem;
  margin: 0 auto;
  padding: calc(var(--section) * 0.5) var(--gutter) var(--section);
  width: 100%;
}

.piece-solo .back-link {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 2rem;
}

.piece-solo .back-link:hover { color: var(--ink); }

.piece-solo .solo-figure button {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: var(--cream);
  cursor: zoom-in;
}

/* Extra views of the piece: a quiet strip of thumbnails under the main
   photo; the chosen one is marked with an ink underline. */
.solo-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.solo-views .solo-view {
  display: block;
  padding: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: var(--cream);
  cursor: pointer;
  width: 72px;
  height: 72px;
}
.solo-views .solo-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.solo-views .solo-view:hover img,
.solo-views .solo-view.active img { opacity: 1; }
.solo-views .solo-view.active { border-bottom-color: var(--ink); }

.piece-solo .solo-info { max-width: 40rem; margin: 2.2rem 0 0; text-align: left; }

.piece-solo .piece-artist { font-size: 1.3rem; }
.piece-solo .piece-title { font-size: 1.1rem; }
.piece-solo .piece-facts { margin-top: 1.1rem; }
.piece-solo .piece-price { font-size: 1.05rem; }
.piece-solo .piece-desc { margin-top: 1.2rem; }

/* The heart sits above the artwork, flush with its right edge. */
.solo-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.7rem;
}

.inquiry-box {
  max-width: 40rem;
  margin: calc(var(--section) * 0.55) 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: calc(var(--section) * 0.4);
  text-align: left;
}

.inquiry-box h2 { font-size: 1.35rem; margin-bottom: 0.6rem; }

.inquiry-box > p { color: var(--ink-soft); margin-bottom: 1.4rem; }

.inquiry-box textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  border: 1px solid var(--ink-faint);
  padding: 0.9rem;
  min-height: 8rem;
  resize: vertical;
}

.inquiry-box textarea:focus { outline: none; border-color: var(--ink); }

.inquiry-box .btn { margin-top: 1.2rem; }

.inquiry-sent {
  background: var(--cream);
  padding: 1.6rem;
  color: var(--ink);
}

/* ---------- Likes page ---------- */

.like-rows {
  list-style: none;
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding: 0 var(--gutter) var(--section);
  max-width: 62rem;
  margin: 0 auto;
  width: 100%;
}

.like-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  border: 1px solid var(--hairline);
  padding: clamp(1rem, 2.5vw, 2rem);
}

.like-card .lc-figure a { display: block; background: var(--cream); }
.like-card .lc-figure img { width: 100%; height: auto; }

.like-card .lc-room {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.like-card .lc-actions { display: flex; gap: 0.7rem; margin-top: 1.2rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .like-card { grid-template-columns: 1fr; }
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: hsla(var(--white-hsl), 0.96);
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  z-index: 50;
}

.lightbox.open { display: grid; }

.lightbox img {
  max-width: 100%;
  max-height: 82svh;
  width: auto;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 30px 80px hsla(var(--black-hsl), 0.18);
}

.lightbox figcaption {
  text-align: center;
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Room footer sign-off ---------- */

.room-close {
  text-align: center;
  padding: 0 var(--gutter) var(--section);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 auto;
}

.room-close .gate-rule { margin-bottom: 1.6rem; }

/* ---------- Sandbox banner ---------- */

.sandbox-banner {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
  padding: 0.55rem var(--gutter);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Reveal motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
  .site-head { padding: 1.1rem var(--gutter); }
  .head-actions { gap: 0.9rem; flex-shrink: 0; }
  .wordmark { gap: 0.55rem; }
  .wordmark small { font-size: 0.5rem; letter-spacing: 0.08em; padding-left: 0.55rem; font-stretch: var(--stretch-text); }
  .head-actions .head-cta { font-size: 0.78rem; letter-spacing: 0.06em; font-stretch: var(--stretch-text); }
  .head-actions .head-site { display: none; }
  .piece-info { max-width: none; }
}

/* Artist bio: underline on hover, tooltip, and the centered popover. */

.artist-pop {
  cursor: pointer;
  text-decoration: none;
}

.artist-pop:hover, .artist-pop:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.bio-tip {
  display: none;
  position: fixed;
  z-index: 90;
  background: var(--ink);
  color: var(--bg);
  font-size: 1.02rem;
  line-height: 1.6;
  padding: 0.95rem 1.15rem;
  box-shadow: 0 4px 18px hsla(var(--black-hsl), 0.3);
  pointer-events: none;
}

.bio-pop-scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: hsla(var(--black-hsl), 0.45);
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.bio-pop {
  position: relative;
  background: var(--bg);
  width: min(34rem, 100%);
  max-height: 80svh;
  overflow: auto;
  padding: 2.2rem 2.4rem;
}

.bio-pop h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0.35rem 0 0.9rem;
}

.bio-pop p { font-size: 0.95rem; line-height: 1.7; color: var(--ink-soft); }
.bio-pop p.eyebrow { color: var(--ink-soft); }

.bio-pop-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 1.6rem;
  cursor: pointer;
}

.bio-pop-x:hover { color: var(--moss); }

/* ---------- Section wrapper and subsections ---------- */

.room-sec { position: relative; }

/* Squeezing a section: --sq scales the section-sized whitespace inside
   this wrapper only. Text and images keep their size until the squeeze
   floor, after which the editor switches to proportional zoom. */
.room-sec { --section: calc(var(--section-base) * var(--sq, 1)); }

.sub-head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(var(--section) * 0.35 * var(--bsq, 1)) var(--gutter) calc(var(--section) * 0.18 * var(--bsq, 1));
}
.sub-head h3 {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.5vw, 1.25rem);
}
.sub-head .sub-sub {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Artist popover extras: the facts line and website link. */
.bio-pop .bio-meta {
  margin: 0.35rem 0 0.9rem;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.bio-pop .bio-link { margin-top: 1rem; }
.bio-pop .bio-link a { color: var(--ink); }

/* Resized images center inside their frame. */
.piece-figure button { text-align: center; }
.placement-imgs button { text-align: center; }

/* ---------- Segmented toggles (Available/Sold, Framed/Unframed) ---------- */

.seg { display: inline-flex; border: 1px solid var(--ink-faint); }
.seg button {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--ink-soft);
  padding: 0.65rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
}
.seg button.active { background: var(--ink); color: var(--bg); }

/* Edit-piece bar and form on the piece page (admin preview only). */
.solo-editbar { margin: 0.4rem 0 1.2rem; }
.solo-editform { margin-top: 1.5rem; }
fieldset.artist-group {
  border: 1px solid var(--hairline);
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: 1.1rem;
}
fieldset.artist-group legend { padding: 0 0.4rem; }

/* An image with a stored size of its own escapes the global max-width
   cap, so it can overhang its frame when grown past 100%. */
.piece-figure img[style*="width"],
.placement-imgs img[style*="width"] { max-width: none; }

/* A piece with a sized image: the image's column takes --imgw of the
   row and the text moves sideways into the remaining open space,
   wrapping below when the image takes the whole row. Everything stays
   inside the page margins. Small screens keep the stacked layout. */
@media (min-width: 769px) {
  .piece.scaled { display: flex; flex-wrap: wrap; align-items: center; }
  .piece.scaled .piece-figure { flex: 0 0 var(--imgw, 63.6%); min-width: 0; }
  .piece.scaled .piece-info { flex: 1 1 6rem; min-width: 0; padding: 0.6rem 1.4rem; }
}


/* ---------- Brand additions ---------- */

/* Prices and dimensions line up as typed columns. */
.piece-price, .piece-facts { font-variant-numeric: tabular-nums; }

.foot-version { color: var(--ink-faint); }

/* Typed paper has square corners. */
.btn, .field input, .field textarea, .field select, .gate-card, .modal { border-radius: 0; }