/* PurplePants — simple cream with purple accents. */

:root {
  --bg:          #FBF6EC;  /* light warm cream */
  --surface:     #FFFFFF;  /* clean white cards */
  --text:        #2C2630;  /* warm near-black */
  --muted:       #8C8290;  /* muted mauve-grey */
  --accent:      #7A52A6;  /* purple */
  --accent-soft: #ECE3F5;  /* pale purple (chips / badges) */
  --accent-2:    #D8C9EC;  /* soft lilac (subtle washes) */
  --ink:         #4A3370;  /* deep purple anchor */
  --line:        rgba(74, 51, 112, 0.14); /* hairline borders */

  --radius: 14px;
  --shadow: 0 6px 24px rgba(60, 45, 80, 0.08);
  --shadow-lg: 0 18px 50px rgba(60, 45, 80, 0.16);
  --wrap: 1120px;
  --gap: clamp(16px, 3vw, 28px);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Headings use an elegant serif; body stays in the clean sans. */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
}

/* Headings use the display (serif) face; body keeps --sans */
.brand-name, .hero-title, .page-title, .section-title { font-family: var(--display); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 350;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 40px);
}

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

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 246, 236, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-dot { color: var(--accent); }
/* Two-line logo lockup on the public site header */
.site-header .brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-by {
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-nav a {
  margin-left: 24px;
  color: var(--muted);
  font-size: 0.95rem;
  transition: color 0.2s;
}
.site-nav a:hover { color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(56px, 11vw, 128px) 0 clamp(40px, 7vw, 84px);
  position: relative;
  overflow: hidden;
}

/* ---------- Pottery doodles (decorative line-art) ---------- */
.hero-doodles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero .wrap, .page-hero .wrap { position: relative; z-index: 1; }
.doodle {
  position: absolute;
  width: clamp(96px, 13vw, 170px);
  height: auto;
  color: var(--ink);   /* deeper purple so the marks read a touch darker */
  opacity: 0.22;
}
.doodle-detail { opacity: 0.85; }   /* lighter than the bold outline */
.doodle--a { top: 6%;  right: 5%;  transform: rotate(-8deg); }
.doodle--b { bottom: -8%; left: 4%; width: clamp(74px, 10vw, 130px); transform: rotate(9deg); opacity: 0.18; }
.doodle--c { top: 24%; right: 30%; width: clamp(64px, 8vw, 110px); transform: rotate(5deg); opacity: 0.14; }
.doodle--d { bottom: 6%; right: 16%; width: clamp(58px, 7vw, 96px); transform: rotate(-12deg); opacity: 0.15; }
@media (max-width: 700px) {
  .doodle--c, .doodle--d { display: none; } /* keep small screens uncluttered */
}
@media (prefers-reduced-motion: no-preference) {
  .doodle { transition: opacity 0.3s; }
}

/* ---------- Footer decorative band ---------- */
.site-footer { position: relative; overflow: hidden; }
.footer-doodles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 7vw, 72px);
  padding-bottom: 22px;
  pointer-events: none;
}
.doodle--foot {
  position: static;
  width: clamp(40px, 6vw, 64px);
  opacity: 0.17;
}
.doodle--foot:nth-child(1) { transform: rotate(-6deg); }
.doodle--foot:nth-child(3) { transform: rotate(7deg); }
@media (max-width: 540px) {
  .footer-doodles > :nth-child(3) { display: none; } /* trim on narrow screens */
}

/* ---------- Page-wide marks (carry down the whole page, behind content) ---------- */
body { position: relative; }
.page-doodles {
  position: absolute;
  inset: 0;
  z-index: -1;            /* above the page background, behind all content */
  pointer-events: none;
  overflow: hidden;
}
.page-doodles .doodle { color: var(--ink); position: absolute; }
/* Each mark gets its own size; several bleed past the edges and are clipped by
   the layer (and by the opaque cards/images that sit in front of them). */
.pd { width: clamp(60px, 9vw, 120px); opacity: 0.12; }
.pd--1  { top: 11%; left: -4%;  width: clamp(120px, 16vw, 210px); transform: rotate(-10deg); }
.pd--2  { top: 19%; right: 5%;  width: clamp(56px, 7vw, 96px);   transform: rotate(9deg); }
.pd--3  { top: 28%; right: -3%; width: clamp(130px, 18vw, 230px); transform: rotate(6deg); }
.pd--4  { top: 37%; left: 4%;   width: clamp(80px, 10vw, 140px);  transform: rotate(-8deg); }
.pd--5  { top: 46%; left: -6%;  width: clamp(150px, 21vw, 270px); transform: rotate(5deg); }
.pd--6  { top: 55%; right: 6%;  width: clamp(52px, 6vw, 88px);   transform: rotate(-6deg); }
.pd--7  { top: 64%; right: -4%; width: clamp(120px, 16vw, 210px); transform: rotate(10deg); }
.pd--8  { top: 73%; left: 5%;   width: clamp(78px, 10vw, 150px);  transform: rotate(-9deg); }
.pd--9  { top: 83%; left: -3%;  width: clamp(120px, 16vw, 200px); transform: rotate(4deg); }
.pd--10 { top: 91%; right: 3%;  width: clamp(96px, 13vw, 180px);  transform: rotate(-5deg); }
@media (max-width: 760px) {
  .pd--3, .pd--6, .pd--9 { display: none; } /* thin out on narrow screens */
  .pd { opacity: 0.09; }
}

.hero-title {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}
.hero-sub {
  margin: 18px 0 28px;
  max-width: 36ch;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--muted);
}
.hero-cta {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow);
  transition: transform 0.2s, background 0.2s;
}
.hero-cta:hover { background: var(--ink); transform: translateY(-2px); }

/* ---------- Gallery ---------- */
.gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: clamp(40px, 7vw, 80px) 0 28px;
}
.section-title {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--muted);
  padding: 8px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: color 0.2s, background 0.2s, transform 0.15s;
}
.chip:hover { color: var(--ink); transform: translateY(-1px); }
.chip.is-active {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 500;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
}
.card {
  margin: 0;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-img-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2));
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
/* Images stack so the alternate can cross-fade in on hover. */
.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-img--alt {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.45s ease, transform 0.6s ease;
}
.card.has-alt:hover .card-img--alt,
.card.has-alt:focus-within .card-img--alt {
  opacity: 1;
  transform: scale(1);
}
/* Subtle zoom on the primary when a card has no alternate. */
.card:not(.has-alt):hover .card-img--primary { transform: scale(1.03); transition: transform 0.6s ease; }

/* "N photos" badge */
.card-count {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(26, 20, 48, 0.32);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.65rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  backdrop-filter: blur(3px);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.2s;
}
.card:hover .card-count { opacity: 1; }
.card-count::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
  box-shadow: 1.5px 1.5px 0 -1px rgba(255, 255, 255, 0.4);
}
.card-noimg {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--ink);
  font-size: 0.85rem;
  opacity: 0.7;
}
.card-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 16px;
}
.card-title { font-weight: 500; color: var(--text); }
.card-cat { font-size: 0.8rem; color: var(--accent); white-space: nowrap; }

.empty {
  text-align: center;
  color: var(--muted);
  padding: 60px 0;
}

/* Centered call-to-action under the homepage featured preview */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 6vw, 56px);
}

/* ---------- About / Footer ---------- */
.about { margin-top: clamp(56px, 9vw, 110px); padding: clamp(40px, 7vw, 80px) 0; border-top: 1px solid var(--line); }
.about-inner { max-width: 60ch; }
.about p { color: var(--muted); font-size: 1.05rem; }

.ghost-link {
  color: var(--accent);
  font-weight: 500;
  transition: color 0.2s;
}
.ghost-link:hover { color: var(--ink); }

/* ---------- About page ---------- */
.page-hero {
  padding: clamp(48px, 9vw, 104px) 0 clamp(28px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-eyebrow {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
}
.page-title {
  margin: 0;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
}
.page-lead {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--muted);
}

.page-body { padding-top: clamp(40px, 7vw, 72px); padding-bottom: clamp(48px, 8vw, 96px); }
.prose { max-width: 68ch; }
.prose p { color: var(--muted); font-size: 1.05rem; }
.prose .section-title { margin-top: clamp(36px, 6vw, 56px); margin-bottom: 14px; clear: both; }
.prose > .section-title:first-child { margin-top: 0; }
.prose-block { margin-bottom: clamp(36px, 6vw, 56px); }
.prose-block--clear { clear: both; }
.prose-block p { color: var(--muted); font-size: 1.05rem; }
.prose-block .section-title { margin-top: 0; margin-bottom: 14px; }

/* Piece photos scattered through the About text */
.about-figure {
  margin: 6px 0 16px;
  width: clamp(140px, 32%, 220px);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2));
}
.about-figure img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.about-figure--right { float: right; margin-left: clamp(18px, 4vw, 32px); }
.about-figure--left  { float: left;  margin-right: clamp(18px, 4vw, 32px); }
@media (max-width: 560px) {
  /* Stop wrapping on small screens — center the photo instead of floating it. */
  .about-figure { float: none; width: min(280px, 80%); margin: 18px auto; }
}

.process-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.process-list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  color: var(--muted);
}
.process-list strong { color: var(--text); font-weight: 600; }
.step-no {
  flex: none;
  width: 2.2em;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.prose-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 28px;
}

.site-footer {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer a { color: var(--accent); }

/* ---------- Ranks page ---------- */
.rank-noscript {
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 20px;
  color: var(--muted);
  box-shadow: var(--shadow);
}
.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rank-card {
  display: grid;
  grid-template-columns: 44px 84px 1fr;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.25s;
}
.rank-card:hover { box-shadow: var(--shadow-lg); }
.rank-card:target { box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); }
.rank-pos {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rank-thumb {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2));
}
.rank-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rank-thumb--creation { background: var(--bg); padding: 4px; position: relative; overflow: visible; cursor: zoom-in; }
.rank-thumb--creation .creation-svg { width: 100%; height: 100%; display: block; }
.rank-thumb--creation:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hover-to-enlarge preview for a creation */
.rank-zoom {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) scale(0.92);
  transform-origin: bottom center;
  width: clamp(180px, 40vw, 280px);
  height: clamp(180px, 40vw, 280px);
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 40;
}
.rank-zoom img,
.rank-zoom .creation-svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.rank-thumb--creation:hover .rank-zoom,
.rank-thumb--creation:focus-visible .rank-zoom {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

.rank-body { min-width: 0; }
.rank-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.rank-cat { font-size: 0.8rem; color: var(--accent); }
.rank-avg { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rank-avg-num { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rank-count { font-size: 0.85rem; color: var(--muted); }

/* Artist's own rating, shown beneath the viewers' average */
.rank-artist { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.rank-artist-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.rank-artist .stars-display { font-size: 0.9rem; }
.rank-artist-num { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Read-only average stars (gold fill clipped to the average). */
.stars-display { position: relative; display: inline-block; line-height: 1; letter-spacing: 2px; }
.stars-display-bg { color: var(--accent-soft); }
.stars-display-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #E8B65A;
}

/* Interactive "your rating" stars. */
.rank-yours { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.rank-yours-label { font-size: 0.85rem; color: var(--muted); }
.stars--input { display: inline-flex; gap: 2px; }
.stars--input .star {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 2px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent-soft);
  transition: color 0.15s, transform 0.15s;
}
.stars--input .star:hover { transform: scale(1.15); }
.stars--input .star.is-on,
.stars--input .star.is-hover { color: #E8B65A; }
.stars--input .star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 560px) {
  .rank-card { grid-template-columns: 32px 60px 1fr; gap: 12px; padding: 12px; }
  .rank-thumb { width: 60px; height: 60px; }
}

/* ---------- Creating studio ---------- */
/* ---------- "How it works" directions ---------- */
.studio-guide {
  margin-bottom: clamp(20px, 4vw, 32px);
  padding: clamp(16px, 3vw, 22px) clamp(18px, 3vw, 26px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.studio-steps-guide {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.studio-steps-guide li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text); }
.studio-steps-guide strong { color: var(--ink); }
.guide-no {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.studio-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(232,146,59,0.12), rgba(210,86,44,0.10));
  border: 1px solid rgba(210,86,44,0.18);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
.studio-note strong { color: #b4521f; }
@media (max-width: 760px) {
  .studio-steps-guide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .studio-steps-guide { grid-template-columns: 1fr; }
}

.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; }
}

.studio-shapes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.shape-btn {
  width: 66px;
  height: 66px;
  padding: 8px;
  border: 1px solid var(--line, rgba(74, 51, 112, 0.14));
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.shape-btn:hover { transform: translateY(-2px); }
.shape-btn svg { width: 100%; height: 100%; display: block; }
/* Outline thumbnails (admin-uploaded templates) */
.shape-btn--outline img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shape-btn .zone,
.shape-btn svg path,
.shape-btn svg ellipse { fill: var(--accent-2); stroke: none; }
.shape-btn.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow);
}
.shape-btn.is-active .zone,
.shape-btn.is-active svg path,
.shape-btn.is-active svg ellipse { fill: var(--accent); }

.studio-stage {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 4vw, 40px);
  display: grid;
  place-items: center;
}
.studio-svg { width: 100%; max-width: 420px; height: auto; }
.studio-canvas {
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 1 / 1;
  touch-action: none;       /* let us paint with touch/stylus without scrolling */
  cursor: crosshair;
  border-radius: 8px;
}

.studio-panel {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 24px;
  position: sticky;
  top: 88px;
}
.panel-title {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}
/* ---------- Glaze section + Before/After toggle ---------- */
.glaze-section {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.glaze-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.glaze-head .panel-title { margin: 0; }
.glaze-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.glaze-toggle-btn {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.glaze-toggle-btn.is-active { background: var(--accent); color: #fff; }
.glaze-view-note {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.glaze-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
}
.swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  padding: 4px 10px 4px 4px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.swatch-chip {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.swatch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch:hover { transform: translateY(-1px); border-color: var(--accent); }
.swatch.is-active { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.swatch--bare .swatch-chip { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }

.custom-color {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
}
.custom-color input[type="color"] {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line, rgba(74, 51, 112, 0.14));
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.custom-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.custom-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.custom-color input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }

.active-glaze { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; }
.active-dot {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.active-name { font-weight: 600; color: var(--text); font-size: 0.9rem; }

/* ---------- Brush controls ---------- */
.brush-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.brush-field { display: flex; flex-direction: column; gap: 6px; }
.brush-field-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
}
.brush-field-label b { color: var(--ink); font-weight: 600; }
.brush-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.texture-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.texture-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line, rgba(74, 51, 112, 0.14));
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 12px 5px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.texture-btn:hover { color: var(--ink); transform: translateY(-1px); }
.texture-btn.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
}
.texture-dot {
  display: block;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(44, 38, 48, 0.12);
}
.texture-name { line-height: 1; }

/* Painted creations on the Ranks page / admin */
.rank-thumb--creation .creation-img,
.creation-img { width: 100%; height: 100%; object-fit: contain; display: block; }

.studio-steps {
  margin: 16px 0 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}
.studio-steps strong { color: var(--text); font-weight: 600; }

.studio-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.studio-btn {
  white-space: nowrap;
  border: 1px solid var(--line, rgba(74, 51, 112, 0.14));
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.studio-btn:hover { transform: translateY(-1px); }
.studio-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.studio-btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.studio-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
/* Active toggle (e.g. Fill tool engaged) */
.studio-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.studio-btn.is-active:hover { background: var(--ink); border-color: var(--ink); }

/* Fire the kiln — the star action */
.studio-btn--fire {
  margin-top: 14px;
  background: linear-gradient(135deg, #E8923B, #D2562C);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(210, 86, 44, 0.28);
}
.studio-btn--fire:hover { background: linear-gradient(135deg, #F0A24A, #C8481F); transform: translateY(-1px); }
.studio-btn--fire:disabled { opacity: 0.85; cursor: default; transform: none; }
.fire-hint { margin: 8px 2px 0; font-size: 0.82rem; line-height: 1.4; color: var(--muted); }

/* Submit-to-Ranks block */
.studio-submit {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.studio-btn--wide { width: 100%; flex: none; }
.studio-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
.studio-field input {
  font: inherit;
  color: var(--text);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.studio-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.studio-status { margin: 12px 0 0; font-size: 0.88rem; color: var(--muted); }
.studio-status--ok  { color: #2f7d4f; }
.studio-status--err { color: #b3445e; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(26, 20, 48, 0.74);
  backdrop-filter: blur(6px);
  animation: fade 0.2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0;
  max-width: min(92vw, 900px);
  max-height: 88vh;
  text-align: center;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox-figure > img { cursor: zoom-in; }
.lightbox-count { color: var(--accent-2) !important; font-variant-numeric: tabular-nums; }
.lightbox-figure figcaption {
  margin-top: 14px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lightbox-figure figcaption small { color: var(--accent-soft); }
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 1;
}
.lightbox-nav[hidden] { display: none; }
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox-prev { left: max(16px, 3vw); }
.lightbox-next { right: max(16px, 3vw); }
@media (max-width: 540px) {
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.5rem; }
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Fade pieces as they (re)render */
.card.enter { animation: rise 0.35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
}

/* ---------- Contact page ---------- */
.contact-layout { max-width: 620px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.92rem; font-weight: 500; color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  font: inherit; font-weight: 400; color: var(--text);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.contact-form textarea { resize: vertical; line-height: 1.6; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-err { color: #b3445e; font-size: 0.82rem; font-weight: 400; }
.form-banner { padding: 12px 16px; border-radius: 12px; font-size: 0.92rem; margin: 0; }
.form-banner--err { background: #f7e4e8; color: #9c3450; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.contact-actions .hero-cta { border: 0; cursor: pointer; }
.contact-or { color: var(--muted); font-size: 0.9rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-thanks { max-width: 52ch; }
.contact-thanks p { color: var(--muted); font-size: 1.05rem; }