/* The one colour page (templates/_color_page.html).
 *
 * Owner ruling 2026-08-31: simplicity, imagery, very little text, ONE call to
 * action. The layout rules here exist to make that hard to undo - the band is
 * full bleed, the rail is the tallest thing on the page, and there is exactly
 * one .btn that is not quiet.
 *
 * Loaded by /seasons/<season>/ and /palette/<slug>, on top of blog.css, so
 * only what those two need is here. Tokens come from tokens.css. */

.cpage {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 0 var(--sp-8);
}

/* ---------------------------------------------------------------- the boom */

.cpage__hero {
  padding: var(--sp-6) var(--page-gutter) var(--sp-5);
  text-align: center;
}

.cpage__eyebrow {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

.cpage__title {
  margin: 0;
  font-family: var(--font-wordmark);
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.cpage__sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--text-md);
  color: var(--color-accent);
}

.cpage__desc {
  margin: var(--sp-3) auto 0;
  max-width: 32ch;
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--color-muted);
}

/* The colours themselves, edge to edge. `100vw` off a centred column rather
 * than a wrapper class, so the band breaks out of whatever container the
 * including page happens to use. */
.cpage__band {
  display: flex;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  height: clamp(88px, 22vw, 168px);
}

.cpage__band-cell { flex: 1 1 0; }

/* --------------------------------------------------------------- the rail */

.cpage__section-h {
  margin: var(--sp-7) 0 var(--sp-4);
  padding: 0 var(--page-gutter);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-align: center;
}

.cpage__rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: 0;
  padding: 0 var(--page-gutter);
  list-style: none;
}

@media (min-width: 46rem) {
  .cpage__rail { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}

.cpage__garment { margin: 0; text-align: center; }

/* No border-radius and no tile background: the imagery is REGROUNDED to the
 * page paper by app/tools/season_imagery.py, so each garment sits directly on
 * the page with its own shadow rather than inside a card. Six cards in six
 * slightly different greys is what six stock photos look like. */
.cpage__garment img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.cpage__garment-name {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-neutral);
}

/* ------------------------------------------------------------------ the ask
 *
 * The one loud control on the page. `.cpage__cta .btn` is the only place in
 * this stylesheet that paints an accent button; every other control here is
 * .btn--quiet. That is the single-CTA ruling written as CSS rather than as a
 * comment somebody can ignore. */

.cpage__cta {
  margin: var(--sp-7) var(--page-gutter) 0;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-panel);
  background: var(--color-paper-3);
  text-align: center;
}

.cpage__cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.cpage__cta p {
  margin: var(--sp-3) auto 0;
  max-width: 34ch;
  color: var(--color-muted);
}

.cpage__cta-btn { margin-top: var(--sp-5) !important; }

.cpage__cta .btn {
  font-size: var(--text-base);
  padding: 0.95rem 2rem;
}

/* ------------------------------------------------------------ the reference */

.cpage__grid-wrap { padding-bottom: var(--sp-2); }

.cpage__grid-note {
  margin: calc(var(--sp-4) * -1) auto var(--sp-5);
  padding: 0 var(--page-gutter);
  max-width: 46rem;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

/* THE GROUPS FLOW ACROSS THE COLUMN, they are not stacked down the left of it.
 * The first cut held them to a 46rem measure and left a third of the desktop
 * page empty beside them (owner, 2026-08-31: "Misaligned and too much empty
 * space. Use this space").
 *
 * auto-fit rather than a fixed four columns, because the group COUNT is not
 * fixed: a season pack has four groups of three, and a personal corpus palette
 * has five groups of two to five. One rule has to hold both. */
.cpage__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--sp-6);
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

@media (min-width: 46rem) {
  .cpage__grid {
    /* 10rem, not 15: auto-fit lays as many tracks as fit and then COLLAPSES
     * the empty ones, so 10rem gives four full-width columns for a season
     * pack's four groups and five for a personal palette's five - one group
     * per column, no orphan row, no dead third of the page. At 15rem only
     * three tracks fit and Metals fell onto a line of its own; at 10rem only
     * four fit and a personal palette's fifth group orphaned the same way. */
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    max-width: none;
    align-items: start;
  }
}

.cpage__group { margin: 0; }

.cpage__group-h {
  margin: 0 0 var(--sp-3);
  /* Two lines reserved, for the same reason the chip names reserve two: the
   * headings run from "Metals" to "Brightens your eyes", and a heading that
   * wraps in one column and not the next starts that column's swatches a line
   * lower than its neighbours. */
  min-height: 2.4em;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-neutral);
}

.cpage__chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cpage__chip { margin: 0; }

.cpage__swatch {
  display: block;
  height: auto;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-tile);
  border: 1px solid var(--color-rule-soft);
}

/* Two lines reserved whether or not the name needs them. Colour names run
 * from "Sage" to "Brightens Your Eyes" length, so without this the hex codes
 * in one row sit at three different heights. */
.cpage__chip-name {
  display: block;
  min-height: 2.5em;
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  line-height: 1.25;
  color: var(--color-ink);
}

.cpage__chip-hex {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-neutral);
  font-variant-numeric: tabular-nums;
}

.cpage__actions {
  display: flex;
  max-width: 46rem;
  margin-inline: auto;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  padding: 0 var(--page-gutter);
  margin: var(--sp-5) 0 0;
}

/* Quiet by construction: an outline, never the accent fill. */
.cpage__actions .btn--quiet {
  flex: 0 1 auto;
  background: transparent;
  color: var(--color-neutral);
  border: 1px solid var(--color-rule);
  font-size: var(--text-xs);
  padding: 0.55rem 1.05rem;
}

.cpage__actions .btn--quiet:hover { color: var(--color-ink); border-color: var(--color-neutral); }

/* --------------------------------------------------------------- the email */

.cpage__email { margin: var(--sp-6) var(--page-gutter) 0; }

/* -------------------------------------------------------- everything written */

.cpage__more {
  margin: var(--sp-7) var(--page-gutter) 0;
  border-top: 1px solid var(--color-rule-soft);
}

.cpage__fold { border-bottom: 1px solid var(--color-rule-soft); }

.cpage__fold > summary {
  padding: var(--sp-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  list-style: none;
}

.cpage__fold > summary::-webkit-details-marker { display: none; }

.cpage__fold > summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--color-neutral);
}

.cpage__fold[open] > summary::after { content: "\2212"; }

.cpage__fold-body { padding-bottom: var(--sp-5); color: var(--color-muted); }

.cpage__fold-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-ink);
  margin: var(--sp-4) 0 var(--sp-2);
}

.cpage__fold-body p { margin: 0 0 var(--sp-3); line-height: 1.6; }

.cpage__fold-body ul { margin: 0 0 var(--sp-3); padding-left: 1.1rem; }

.cpage__fold-body a { color: var(--color-accent); }

/* Inside a fold the chips are a reference list, so they are smaller and the
 * story rows read as one line each rather than as three headed sections. */
.cpage__story { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
.cpage__story-chips { display: flex; flex: 0 0 88px; height: 40px; border-radius: 6px; overflow: hidden; }
.cpage__story-chips span { flex: 1 1 0; }
.cpage__story-text b { display: block; color: var(--color-ink); font-weight: 600; }

/* ---------------------------------------------------------------- printing */

.cpage__print-domain { display: none; }

@media print {
  .cpage__cta, .cpage__email, .cpage__more, .cpage__actions { display: none !important; }
  .cpage__print-domain {
    display: block;
    margin-top: var(--sp-5);
    text-align: center;
    font-size: var(--text-xs);
    color: #555;
  }
  .cpage__band { width: auto; margin-left: 0; transform: none; height: 60px; }
}