/* ==========================================================================
   Catalena Hatters — proposal landing page (index.html)
   Page-level composition on top of design-system/css/catalena.css.
   Every value is a token; components are never overridden here. The
   page-only ratios and widths below are declared as tokens before use,
   following src/catalog.css and src/audit.css.
   ========================================================================== */

:root {
  --hub-compare-ratio:  1558 / 784;   /* the audit's desktop capture and its redesign twin */
  --hub-thumb-ratio:    16 / 10;      /* document previews, 1440 x 900 captures */
  --hub-headline-max:   16ch;
  --hub-lede-max:       52ch;
  --hub-number-width:   var(--space-10);
  --hub-sticky-offset:  calc(var(--size-header-sticky) + var(--space-6));
}

/* ---------- Header: brand mark left, section jumps right ------------------ */
.proposal-header {
  background: var(--color-nav-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}
/* Sticky only where the nav fits on one row; on phones it would take a third of the screen */
@media (min-width: 768px) {
  .proposal-header { position: sticky; top: 0; z-index: var(--z-sticky); }
}
.proposal-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  min-height: var(--size-header-sticky);
  padding-block: var(--space-2);
}
.proposal-header__brand { display: flex; align-items: center; gap: var(--space-3); color: inherit; }
.proposal-header__logo { width: var(--size-logo-sticky); }
.proposal-header__name {
  font-family: var(--font-display); font-size: var(--text-sm); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-heading);
}
.proposal-header__name small {
  display: block;
  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.proposal-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); list-style: none; margin: 0; padding: 0; }
.proposal-nav__link {
  display: block; padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid transparent;
  font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-nav-text);
  transition: color var(--duration-fast) var(--ease-linear), border-color var(--duration-fast) var(--ease-linear);
}
.proposal-nav__link:hover, .proposal-nav__link:focus-visible { color: var(--color-accent-text); border-bottom-color: var(--color-accent); }

/* ---------- Section shell ------------------------------------------------- */
.proposal-section { scroll-margin-top: var(--hub-sticky-offset); }
.proposal-section__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-10); }
@media (min-width: 960px) {
  .proposal-section__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: end; }
}
.proposal-section__title { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); }
@media (min-width: 768px) { .proposal-section__title { font-size: var(--text-5xl); } }
.proposal-section__lede { margin: 0; max-width: var(--measure); font-size: var(--text-lg); color: var(--color-text-muted); }
.proposal-section__foot { margin-top: var(--space-8); }

/* Links that leave this page carry a small mark; the text says so for readers */
.external-link { display: inline-flex; align-items: center; gap: var(--space-1); }
.external-link .c-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.jump-link {
  font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

/* ---------- Hero: the claim, the ledger, then the comparison ---------------- */
.proposal-hero { padding-block: var(--space-12) var(--space-16); }
@media (min-width: 768px) { .proposal-hero { padding-block: var(--space-20); } }
.proposal-hero__lead { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); }
@media (min-width: 960px) {
  .proposal-hero__lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: end; }
}
.proposal-hero__copy { display: grid; gap: var(--space-6); }
.proposal-hero__headline {
  margin: 0; max-width: var(--hub-headline-max);
  font-size: max(var(--text-5xl), var(--text-chapter)); line-height: var(--leading-tight); text-transform: none;
}
.proposal-hero__lede { margin: 0; max-width: var(--hub-lede-max); font-size: var(--text-lg); }
.proposal-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.proposal-hero__ledger { align-self: end; }

/* Before and after: two frames of equal size, captions beneath */
.proposal-compare { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .proposal-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } }
.compare-figure { margin: 0; display: grid; gap: var(--space-3); }
.compare-figure__frame {
  display: block; overflow: hidden;
  aspect-ratio: var(--hub-compare-ratio);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
}
.compare-figure__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.compare-figure__caption { display: grid; gap: var(--space-1); max-width: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.compare-figure__label {
  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-heading);
}
.compare-figure--proposed .compare-figure__label { color: var(--color-accent-text); }
/* The one load moment on the page: the proposal settles in after the current site */
.compare-figure--proposed {
  animation: c-story-rise var(--duration-slower) var(--ease-hero) both;
  animation-delay: calc(var(--stagger) * 3);
}

/* ---------- Documents: a numbered ledger, because there is a reading order -- */
.document-list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: document;
  border-top: var(--border-width) solid var(--color-border-strong);
}
.document-row {
  display: grid; gap: var(--space-5);
  padding-block: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
  counter-increment: document;
}
@media (min-width: 768px) {
  .document-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10); padding-block: var(--space-10); align-items: start; }
}
.document-row__figure { margin: 0; }
.document-row__frame {
  display: block; overflow: hidden;
  aspect-ratio: var(--hub-thumb-ratio);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-cream);
}
.document-row__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.document-row__body { display: grid; gap: var(--space-3); align-content: start; }
.document-row__head { display: flex; align-items: baseline; gap: var(--space-3); }
.document-row__number {
  flex: none; min-width: var(--hub-number-width);
  font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-none);
  color: var(--color-accent-text);
}
.document-row__number::before { content: counter(document); }
.document-row__title { margin: 0; font-size: var(--text-2xl); line-height: var(--leading-snug); }
.document-row__text { margin: 0; max-width: var(--measure); }
.document-row__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.document-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }

/* ---------- Findings, moves and version points: two-column ruled cells ----- */
.finding-list, .move-list, .version-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  border-top: var(--border-width) solid var(--color-border-strong);
}
@media (min-width: 768px) {
  .finding-list, .move-list, .version-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-16); }
}
.finding, .move, .version-point {
  display: grid; gap: var(--space-3); align-content: start;
  padding-block: var(--space-6) var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
}
.finding__title, .move__title, .version-point__title { margin: 0; font-size: var(--text-xl); line-height: var(--leading-snug); text-transform: none; }
.finding__text, .move__text, .version-point__text { margin: 0; max-width: none; }
.finding__source { font-size: var(--text-sm); }

/* The proposal sits on the redesign's workshop ground */
.proposal-moves { background: var(--color-bg-story); color: var(--color-text-on-story); }
.proposal-moves .proposal-section__title { color: var(--cat-white); }
.proposal-moves .proposal-section__lede { color: var(--color-text-muted-inverse); }
.proposal-moves .move-list { border-top-color: var(--color-border-inverse); }
.proposal-moves .move { border-bottom-color: var(--color-border-inverse); }
.proposal-moves .move__title { color: var(--cat-white); }
.move__text a, .proposal-moves__foundation-text a { color: var(--color-accent); }
.move__text a:hover, .move__text a:focus-visible,
.proposal-moves__foundation-text a:hover, .proposal-moves__foundation-text a:focus-visible { color: var(--cat-white); }
.proposal-moves__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.proposal-moves__foundation {
  display: grid; gap: var(--space-4);
  margin-top: var(--space-12);
}
@media (min-width: 960px) {
  .proposal-moves__foundation { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
}
.proposal-moves__foundation-title { margin: 0; font-size: var(--text-xl); line-height: var(--leading-snug); text-transform: none; color: var(--cat-white); }
.proposal-moves__foundation-text { margin: 0; max-width: var(--measure); }

/* ---------- Version 2: the second direction, shown whole and costed -------- */
.proposal-version__showcase { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); }
@media (min-width: 960px) {
  .proposal-version__showcase { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-10); align-items: end; }
}
.version-figure { margin: 0; display: grid; gap: var(--space-3); }
.version-figure__frame {
  display: block; overflow: hidden;
  aspect-ratio: var(--hub-compare-ratio);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
}
.version-figure__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.version-figure__caption { display: grid; gap: var(--space-1); max-width: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.version-figure__label {
  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-accent-text);
}
/* What it would cost: a plain ruled list, unranked, beside the figure */
.version-caveats { display: grid; gap: var(--space-3); align-content: end; }
.version-caveats__title {
  margin: 0;
  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-heading);
}
.version-caveats__list {
  margin: 0; padding: 0; list-style: none;
  border-top: var(--border-width) solid var(--color-border-strong);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.version-caveats__list li { padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.version-close { margin: 0 0 var(--space-5); max-width: var(--measure); font-size: var(--text-lg); }
.version-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- First fixes: ranked, so numbered ------------------------------- */
.proposal-fixes { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
  .proposal-fixes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
}
.proposal-fixes__intro { display: grid; gap: var(--space-4); }
.fix-list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: fix;
  border-top: var(--border-width) solid var(--color-border-strong);
}
.fix {
  display: grid; grid-template-columns: var(--hub-number-width) minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  counter-increment: fix;
}
.fix::before {
  content: counter(fix);
  grid-row: span 2;
  font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-none);
  color: var(--color-accent-text);
}
.fix__title { margin: 0; font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--color-heading); }
.fix__text { margin: 0; max-width: var(--measure); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Customers: six ruled cells ------------------------------------ */
.persona-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  border-top: var(--border-width) solid var(--color-border-strong);
}
@media (min-width: 768px) { .persona-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-10); } }
@media (min-width: 960px) { .persona-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.persona {
  display: grid; gap: var(--space-2); align-content: start;
  padding-block: var(--space-5) var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}
.persona__name { margin: 0; font-size: var(--text-xl); line-height: var(--leading-snug); }
.persona__role { margin: 0; font-style: italic; color: var(--color-text-muted); }
.persona__text { margin: 0; max-width: none; font-size: var(--text-sm); }

/* ---------- What the shop confirms: term beside explanation ----------------- */
.need-list { margin: 0; padding: 0; display: grid; border-top: var(--border-width) solid var(--color-border-strong); }
.need {
  display: grid; gap: var(--space-2);
  margin: 0; padding-block: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}
@media (min-width: 768px) { .need { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10); } }
.need__term { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-heading); }
.need__value { margin: 0; max-width: var(--measure); }

/* ---------- Reading order, closing ----------------------------------------- */
.proposal-order { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .proposal-order { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: end; } }
.proposal-order__text { margin: 0; max-width: var(--measure); font-size: var(--text-lg); }
.proposal-order__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 960px) { .proposal-order__actions { justify-content: flex-end; } }

/* ---------- Footer -------------------------------------------------------- */
.proposal-footer__note { margin: 0 0 var(--space-4); max-width: var(--measure); }