/* Commissions site layout. Shared fonts, tokens, buttons, panels and nav are in assets/shared/base.css. */

:root { --glass-rgb: 40, 22, 11; }      /* ember glass for the warm painting */
body { background: #3a2212; }
body::before { background-image: url(assets/bg.webp); }
@media (max-width: 736px) { body::before { background-image: url(assets/bg-small.webp); } }

main > section { width: var(--page); margin: clamp(4.5rem, 3rem + 4vw, 7.5rem) auto 0; }
main { padding-bottom: 2rem; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  margin-bottom: 1.8rem;
}
.section-head .lede { max-width: 30em; }

/* ---------- Hero ---------- */
.hero { display: grid; place-items: center; min-height: 100svh; padding: 4rem 1.25rem 3rem; }
.hero-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  width: min(62rem, 100%);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
/* The oval portrait from the original, now in a lantern-to-blush ring. */
.avatar {
  width: clamp(12rem, 8rem + 12vw, 20rem);
  aspect-ratio: 25 / 22.5;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--lantern), var(--blush), var(--lantern), var(--blush), var(--lantern));
  box-shadow: 0 0 1.8rem rgba(255, 249, 117, 0.55);
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hero-title { font-size: clamp(2.8rem, 1.5rem + 5vw, 5.4rem); }
.hero-name { margin-top: 0.5rem; color: var(--blush); font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem) / 1.1 var(--font-display); }
.hero-role { color: var(--ink-soft); font-size: 1.15em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.hero .socials { justify-content: flex-start; margin-top: 1.2rem; }

/* ---------- Shared card bits ---------- */
.card-name { color: var(--ink); font: 800 1.3rem / 1.15 var(--font-display); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem 0.32rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--glass-rgb), 0.65);
  color: var(--ink);
  font: 700 0.95rem / 1 var(--font-display);
  text-decoration: none;
  transition: transform 160ms var(--ease-out), border-color 200ms ease;
}
.chip svg { width: 1em; height: 1em; fill: currentColor; }
.chip:active { transform: scale(0.97); }
.card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  height: 100%;
  padding: 1.3rem 1rem 1.2rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 38%, rgba(255, 249, 117, 0.2), rgba(var(--glass-rgb), 0.66) 70%);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease;
}
a.card-link:active { transform: scale(0.98); }

/* ---------- Models ---------- */
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.4rem; }
.model { display: flex; flex-direction: column; gap: 0.85rem; }
.model-open {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 3px solid var(--lantern);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 40%, rgba(255, 249, 117, 0.22), rgba(var(--glass-rgb), 0.6) 72%);
  box-shadow: var(--glow);
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.model-open:active { transform: scale(0.98); }
.model-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: scale 400ms var(--ease-out); }
.model-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.model-meta .card-name { flex-basis: 100%; }

/* Model viewer (native <dialog>; app.js adds the expand-from-thumbnail motion) */
.viewer {
  width: min(64rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--lantern);
  border-radius: var(--radius-lg);
  background: rgba(var(--glass-rgb), 0.94);
  color: var(--ink);
  box-shadow: 0 0 2.2rem rgba(255, 249, 117, 0.45);
}
.viewer[open] { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 1fr); }
.viewer::backdrop { background: rgba(14, 6, 2, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.viewer-art {
  width: 100%;
  height: min(80dvh, 46rem);
  object-fit: contain;
  background: radial-gradient(circle at 50% 45%, rgba(255, 249, 117, 0.2), transparent 70%);
}
.viewer-info { display: grid; align-content: center; gap: 1rem; padding: 2rem 2.2rem 2rem 0; }
.viewer-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* The close button's <form method="dialog"> sits outside the grid so it doesn't take a cell. */
.viewer > form { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; }
.viewer-close {
  width: 2.7rem;
  height: 2.7rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: rgba(var(--glass-rgb), 0.85);
  color: var(--ink);
  font: 700 1.7rem / 1 var(--font-display);
  cursor: pointer;
}

/* ---------- Mascots & assets ---------- */
.mascot-grid, .asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.mascot-art { width: 72%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0.6rem 0.6rem rgba(20, 8, 2, 0.35)); }
.asset .card-link { padding: 0.8rem 0.8rem 1rem; background: rgba(var(--glass-rgb), 0.66); }
.asset-art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1rem; }
.asset .card-name { font-size: 1.15rem; }

/* ---------- Prices ---------- */
.price-card { max-width: 52rem; padding: clamp(1rem, 0.6rem + 1.5vw, 2rem) clamp(1rem, 0.6rem + 2vw, 2.4rem); }
.prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prices thead th {
  padding: 0.2rem 0 0.9rem 0.8rem;
  border-bottom: 3px solid var(--lantern);
  color: var(--lantern);
  font: 800 1.3rem / 1.1 var(--font-display);
  text-align: right;
}
.prices thead th:first-child { padding-left: 0; color: var(--ink-soft); text-align: left; }
.prices tbody th { padding: 0.8rem 0.8rem 0.8rem 0; font-weight: 400; text-align: left; }
.prices td { min-width: 7rem; padding: 0.8rem 0 0.8rem 0.8rem; font-weight: 600; text-align: right; text-wrap: balance; }
.prices tbody tr + tr { border-top: 1px dashed rgba(255, 249, 117, 0.3); }
.prices .is-base th, .prices .is-base td { color: var(--lantern); font: 800 1.4rem / 1.2 var(--font-display); }
.price-switch {
  display: flex;
  gap: 0.3rem;
  width: max-content;
  margin-bottom: 1rem;
  padding: 0.3rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--glass-rgb), 0.85);
}
.price-switch button {
  padding: 0.6rem 1.15rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 1rem / 1 var(--font-display);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.price-switch button[aria-pressed='true'] { background: var(--blush); color: var(--wine); }

/* ---------- How to order: a real sequence, so it's numbered ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; counter-reset: step; }
.steps li { padding: 2.6rem 1.2rem 1.4rem; }
.steps li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  top: -1.3rem;
  left: 1.1rem;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--lantern);
  color: var(--wine);
  font: 800 1.3rem / 1 var(--font-display);
  box-shadow: 0 0 1rem rgba(255, 249, 117, 0.7);
}
.steps h3 { margin-bottom: 0.4rem; color: var(--lantern); font: 800 1.3rem / 1.15 var(--font-display); }
.steps p { font-size: 0.98em; }
.order-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

/* ---------- Terms ---------- */
.tos-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.toc { position: sticky; top: 5.5rem; }
.toc summary { margin-bottom: 0.6rem; color: var(--lantern); font: 800 1.15rem / 1.2 var(--font-display); cursor: pointer; }
.toc ol { display: grid; gap: 0.1rem; font-size: 0.98em; }
.toc a { display: block; padding: 0.35rem 0.7rem; border-radius: 0.6rem; color: var(--ink-soft); text-decoration: none; }
.tos { max-width: 46rem; padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); }
.tos-block { scroll-margin-top: 5.5rem; }
.tos-block + .tos-block { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px dashed rgba(255, 249, 117, 0.3); }
.tos-h { margin-bottom: 0.7rem; color: var(--lantern); font: 800 1.4rem / 1.15 var(--font-display); }
.tos ul { display: grid; gap: 0.55rem; padding-left: 1.1rem; }
.tos li { position: relative; }
.tos li::before { content: ''; position: absolute; left: -1.05rem; top: 0.62em; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--blush); }
.tos p { margin: 0.6rem 0; }
.tos-credit { margin-top: 2rem; color: var(--ink-soft); font-size: 0.95em; }

/* ---------- Hover only where there's a real pointer ---------- */
@media (hover: hover) and (pointer: fine) {
  .model-open:hover { transform: translateY(-4px); box-shadow: 0 0 1.8rem rgba(255, 249, 117, 0.85); }
  .model-open:hover .model-art { scale: 1.04; }
  a.card-link:hover { transform: translateY(-4px); border-color: var(--lantern); box-shadow: 0 0 1.2rem rgba(255, 249, 117, 0.5); }
  .chip:hover { border-color: var(--lantern); }
  .toc a:hover { background: rgba(255, 249, 117, 0.12); color: var(--ink); }
  .viewer-close:hover { border-color: var(--lantern); }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; }
}
@media (max-width: 860px) {
  .model-grid, .mascot-grid, .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .tos-layout { grid-template-columns: 1fr; gap: 1rem; }
  .toc { position: static; }
}
@media (max-width: 760px) {
  .hero-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-actions, .hero .socials { justify-content: center; }
  .viewer[open] { grid-template-columns: 1fr; }
  .viewer-art { height: min(62dvh, 34rem); }
  .viewer-info { justify-items: center; padding: 0 1.4rem 1.6rem; text-align: center; }
  .viewer-links { justify-content: center; }
}
@media (max-width: 600px) {
  .prices[data-show='art'] .col-rig, .prices[data-show='rig'] .col-art { display: none; }
  .steps { grid-template-columns: 1fr; }
  .order-actions .btn, .hero-actions .btn { width: 100%; }
  .card-name { font-size: 1.1rem; }
  .model-meta .chip { font-size: 0.85rem; }
}