/* ==========================================================================
   About the store.

   Same ivory/night tokens as the rest of the store; Cormorant for display,
   Josefin for everything you actually read.
   ========================================================================== */

/* Escape the shared `html, body { height: 100% }` in storestyle.css, which
   otherwise pins the document to the viewport and kills scrolling. */
html,
body.about-v2 {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

/* The breadcrumb markup is shared with the animal page, but its styling lives
   under .animal-v2 in animal.css, which this page does not load. */
.about-v2 .animal-breadcrumb {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px clamp(18px, 4vw, 32px) 0;
  text-align: left;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
}

.about-v2 .animal-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.about-v2 .animal-breadcrumb a:hover { color: var(--fg); }

.about-v2 .animal-breadcrumb a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.about-v2 .about-wrap {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 32px) 72px;
}

.about-v2 .about-wrap:focus { outline: none; }

.about-eyebrow {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--gold);
}

.about-title {
  margin: 0 0 18px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.05;
  color: var(--fg);
}

.about-lede {
  margin: 0 0 44px;
  max-width: 62ch;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.7;
  color: var(--muted);
}

/* ── The two halves ──────────────────────────────────────── */

.about-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 0 0 48px;
}

.half {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 24px 20px;
  background: var(--surface);
}

.half h3 {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--fg);
}

.half p {
  margin: 0 0 12px;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

.half-foot {
  margin: 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px !important;
  color: var(--gold) !important;
}

/* ── How this works ──────────────────────────────────────── */

.about-make { margin: 0 0 48px; }

.about-make h3,
.about-game h3,
.about-collection h3 {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--fg);
}

/* Body copy inside these sections had no rule of its own and fell back to Arial.
   Same Josefin treatment as .half p, which is what the rest of the page uses. */
.about-make > p {
  margin: 0 0 12px;
  max-width: 68ch;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

.make-list { margin: 14px 0 0; padding: 0; list-style: none; }

.make-list li {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

.make-list strong {
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-weight: 500;
  color: var(--fg);
}

.make-list a,
.game-feedback a,
.col-empty a,
.game-empty a { color: var(--gold); text-underline-offset: 2px; }

/* ── Wild Guess ──────────────────────────────────────────── */

.about-game { margin: 0 0 48px; }

.game-intro,
.col-intro {
  margin: 0 0 18px;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 15px;
  color: var(--muted);
}

.game {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  background: var(--surface);
  min-height: 240px;
}

.game-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.game-prompt {
  margin: 18px 0 20px;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.game-prompt strong {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.25;
  color: var(--fg);
}

.game-options { display: flex; flex-wrap: wrap; gap: 10px; }

.game-option {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--fg);
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.game-option:hover:not(:disabled) { border-color: var(--gold); }
.game-option:disabled { cursor: default; }

/* Right and wrong carry a border and a fill, never colour alone (1.4.1);
   the text feedback below states the outcome regardless. */
.game-option.is-right {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--fg);
}

.game-option.is-wrong {
  border-color: #b3402f;
  background: color-mix(in srgb, #b3402f 14%, transparent);
  color: var(--fg);
  text-decoration: line-through;
}

.game-feedback {
  margin: 18px 0 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 15px;
  color: var(--muted);
  min-height: 1.4em;
}

.game-next,
.game-again {
  margin-top: 14px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: var(--bg);
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

html.dark-theme .game-next,
html.dark-theme .game-again { color: #0d0f0d; }

.game-done { text-align: center; padding: 22px 0; }

.game-final {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(44px, 8vw, 72px);
  line-height: 1;
  color: var(--fg);
}

.game-verdict {
  margin: 10px 0 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 16px;
  color: var(--muted);
}

.game-empty {
  margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 15px;
  color: var(--muted);
}

.game-option:focus-visible,
.game-next:focus-visible,
.game-again:focus-visible,
.col-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── The collection index ────────────────────────────────── */

.col-group { margin: 0 0 34px; }

.col-group h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 24px;
}

.col-count {
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px;
  color: var(--gold);
}

.col-note {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
}

.col-list { margin: 0; padding: 0; list-style: none; }

.col-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "line price";
  gap: 2px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}

.col-item:hover .col-name { color: var(--gold); }

.col-name {
  grid-area: name;
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 15px;
  color: var(--fg);
}

.col-line {
  grid-area: line;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

.col-price {
  grid-area: price;
  align-self: center;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}

.col-empty {
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  color: var(--muted);
}

/* ── Narrow ──────────────────────────────────────────────── */

@media (max-width: 720px) {
  .about-halves { grid-template-columns: 1fr; gap: 18px; }
  .game-options { flex-direction: column; }
  .game-option { flex: 1 1 auto; }
}


/* ==========================================================================
   Exhibits — four products with real buy links. Cormorant for the display
   line, Josefin for reading, --v2 tokens throughout, same as the page above.
   ========================================================================== */
.exhibit-grid {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px 20px;
}

.exhibit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
}

.exhibit-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.exhibit-no {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--gold);
}

.exhibit-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--v2-image-bg);
}

.exhibit-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--fg);
}

.exhibit-price {
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.exhibit-caption {
  margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.exhibit-buy,
.machine-cta {
  align-self: flex-start;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.exhibit-link:focus-visible,
.exhibit-buy:focus-visible,
.machine-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 560px) {
  .exhibit-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 22px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .exhibit-buy { transition: none; }
}

/* Catch-all: every text node under the About main inherits an approved face.
   Cormorant is applied by the heading rules above; this stops anything new from
   silently landing on the browser default. */
.about-v2 #about-main {
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
}