/* Casa Carlini's world: red, near-black and cream, Fraunces for display.
   Contrast: ink on cream 14.2:1; muted 6.3:1; cream on near-black 15.4:1.
   Bright red (#E0322A) is 3.7:1 on cream and 4.2:1 on black — large type and marks only;
   small red text uses #B3221B (5.4:1 on cream, 6.6:1 on white). Its marks: a shelf of
   imprint spines, the logo's roofline as a divider, and red ink stamps. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.case--casa {
  --w-ground: #F2E7D3;
  --w-dark: #111111;
  --w-ink: #1A1A1A;
  --w-muted: #5A5248;
  --w-on-dark: #F2E7D3;
  --w-muted-on-dark: #B8AE9E;
  --w-accent: #E0322A;
  --w-accent-text: #B3221B;
  --w-display: "Fraunces", Georgia, serif;
  --w-display-weight: 560;
}

.case--casa .cs-display {
  font-variation-settings: "opsz" 120;
}

.case--casa .cs-head__title span {
  font-weight: 700;
}

.accent { color: var(--w-accent); }

/* ---------- Casa's marks: icons, roofline, stamp ---------- */

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-ring {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 1.5px solid var(--w-accent-text);
  border-radius: 50%;
  color: var(--w-accent-text);
}

.cs-band--dark .icon-ring {
  border-color: var(--w-accent);
  color: var(--w-on-dark);
}

/* The roofline from the Casa Carlini logo, drawn as a section divider. */
.roof {
  display: block;
  width: 100%;
  max-width: var(--page-max);
  height: auto;
  margin: 0 auto;
  padding-inline: var(--gutter);
  overflow: visible;
}

.roof path {
  fill: none;
  stroke: var(--w-accent);
  stroke-width: 3;
  stroke-linejoin: round;
}

.roof-band {
  padding-block: var(--space-5);
  background: var(--w-ground);
}

.roof-band--dark {
  background: var(--w-dark);
}

/* Ink stamp: red outline, tilted. */
.stamp {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--w-accent-text);
  border-radius: 4px;
  color: var(--w-accent-text);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.c-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.c-head .cs-h2 { max-width: 24ch; }
.c-head .cs-lead { margin-inline: auto; }

.c-centered {
  margin-inline: auto;
  text-align: center;
}

.c-gap {
  margin-top: var(--space-4);
}

.c-sub-head {
  display: grid;
  justify-items: center;
  margin-bottom: var(--space-6);
  text-align: center;
}

.c-sub-head .cs-h3 { margin-bottom: var(--space-3); }

.c-sub-head .cs-prose {
  margin-inline: auto;
  color: var(--w-muted);
  font-style: italic;
}

/* ---------- Header: the title over a shelf of eleven imprints ---------- */

.c-hero {
  display: grid;
  gap: var(--space-8);
  align-items: end;
}

.shelf {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 15rem;
  margin: 0;
  padding: 0 0 6px;
  border-bottom: 6px solid var(--w-accent);
  list-style: none;
}

.spine {
  display: grid;
  place-items: center;
  width: var(--w, 2.4rem);
  height: var(--h, 80%);
  padding-block: 0.6rem;
  border-radius: 3px 3px 0 0;
  background: var(--bg, #F2E7D3);
  color: var(--fg, #111111);
  font-family: var(--w-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  box-shadow: inset -3px 0 0 rgb(0 0 0 / 0.12);
}


.motion .cs-head .spine {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity 500ms var(--ease-out) calc(var(--i) * 60ms), translate 500ms var(--ease-out) calc(var(--i) * 60ms);
}

.motion .cs-head.is-in .spine {
  opacity: 1;
  translate: 0 0;
}

@media (min-width: 64rem) {
  .c-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .shelf { justify-content: flex-end; }
}

@media (max-width: 39.99rem) {
  .shelf { height: 11rem; gap: 3px; }
  .spine { width: calc(var(--w, 2.4rem) * 0.72); font-size: 0.6875rem; }
}

/* ---------- Overview stats as cards ---------- */

.c-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
}

.c-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  padding: var(--space-5);
  border-top: 4px solid var(--w-accent);
  background: #fff;
}

.c-stat dd {
  margin: 0;
  font-family: var(--w-display);
  font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
}

.c-stat dt { color: var(--w-muted); }

@media (min-width: 52rem) {
  .c-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Scope: assigned vs delivered ---------- */

.versus {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  align-items: stretch;
}

.versus__col {
  padding: var(--space-6);
  border: 1px solid var(--w-line);
}

.versus__col--delivered {
  border: 2px solid var(--w-accent);
  background: rgb(224 50 42 / 0.08);
}

.versus__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--w-muted);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.versus__count {
  color: var(--w-on-dark);
  font-family: var(--w-display);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

.versus ul {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.versus li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-family: var(--w-display);
  font-size: 1.375rem;
  line-height: 1.25;
}

.versus li::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--w-muted);
  transform: translateY(-0.15rem);
}

.versus__col--delivered li::before { background: var(--w-accent); }

.versus__arrow {
  display: grid;
  place-items: center;
  color: var(--w-accent);
  font-size: 2.5rem;
}

@media (min-width: 52rem) {
  .versus { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); }
}

@media (max-width: 51.99rem) {
  .versus__arrow { transform: rotate(90deg); }
}

.c-facts {
  display: grid;
  gap: var(--space-6) var(--space-7);
  margin: var(--space-8) 0 0;
}

.c-facts > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
}

.c-facts .icon-ring { grid-row: span 2; }

.c-facts dt {
  color: var(--w-muted);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-facts dd { margin: 0; }

@media (min-width: 52rem) {
  .c-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
  .c-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Deliverables: four cards ---------- */

.deliverables {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.deliverable {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-left: 6px solid var(--w-ink);
  background: #fff;
}

.deliverable__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.deliverable__n {
  color: var(--w-accent);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 0.9;
}

.deliverable__title {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
}

.deliverable__body {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
  font-size: var(--step-1);
}

.deliverable__body ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.1em;
}

.deliverable__body li::marker { color: var(--w-accent); }

.deliverable__note {
  color: var(--w-muted);
  font-style: italic;
}

.deliverable .cs-figure { margin-top: var(--space-3); }

@media (min-width: 64rem) {
  .deliverables { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deliverable--wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: var(--space-8); align-items: center; }
  .deliverable--wide .cs-figure { grid-row: 1 / span 3; grid-column: 2; margin: 0; }
}

.unasked {
  margin-top: var(--space-8);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  text-align: center;
}

/* ---------- Two-layer diagram ---------- */

.layers {
  display: grid;
  justify-items: center;
  margin-top: var(--space-6);
}

.layers__pair {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.layer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--w-dark);
  color: var(--w-on-dark);
}

.layer--how { background: var(--w-accent-text); }

.layer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layer__tag {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.14em;
}

.layer .icon { width: 2rem; height: 2rem; }

.layer__name { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.layer__what { font-size: var(--step-1); }
.layer__how { opacity: 0.85; font-style: italic; }

/* Both layers meet in one point: every post. */
.layers__join {
  width: min(50%, 26rem);
  height: 3rem;
  border: 2px solid var(--w-ink);
  border-top: 0;
  border-radius: 0 0 16px 16px;
}

.layers__stem {
  width: 2px;
  height: 2rem;
  background: var(--w-ink);
}

.layers__result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-7);
  border: 2px solid var(--w-ink);
  background: #fff;
}

.layers__result small {
  color: var(--w-muted);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.layers__result strong {
  font-family: var(--w-display);
  font-size: 2rem;
  font-weight: 600;
}

@media (min-width: 52rem) {
  .layers__pair { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .motion .layers .layer--why { transform: translateX(-2.5rem); opacity: 0; }
  .motion .layers .layer--how { transform: translateX(2.5rem); opacity: 0; }
  .motion .layers .layer { transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out); }
  .motion .layers.is-in .layer { transform: none; opacity: 1; }
}

@media (max-width: 51.99rem) {
  .layers__join { display: none; }
}

/* ---------- Content pillars: cards, native details, pillar 01 open ---------- */

.pillars {
  display: grid;
  gap: var(--space-4);
}

.pillar {
  border-left: 6px solid var(--w-accent);
  background: #fff;
}

.pillar summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
}

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

.pillar__n {
  color: var(--w-accent);
  font-family: var(--w-display);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
}

.pillar__name {
  font-family: var(--w-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  font-weight: 560;
  line-height: 1.15;
}

.pillar__tagline {
  display: block;
  margin-top: var(--space-1);
  color: var(--w-accent-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-style: italic;
  font-weight: 500;
}

.pillar__act {
  display: block;
  margin-top: var(--space-2);
  color: var(--w-muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pillar__toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--w-ink);
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
}

.pillar__toggle::before { content: "+"; }
.pillar[open] .pillar__toggle::before { content: "−"; }

.pillar__body {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0 var(--space-6) var(--space-6);
}

.pillar__body dt { font-weight: 700; }
.pillar__body dd { margin: var(--space-1) 0 0; }

@media (min-width: 64rem) {
  .pillar__body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: calc(var(--space-6) + 2.75rem + var(--space-5));
  }
}

/* ---------- Platform roles: seven cards ---------- */

.roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.role {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--w-line);
  background: #fff;
}

.role__name {
  font-family: var(--w-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.role p { color: var(--w-muted); }

/* ---------- Imprint activation: the bookshelf ---------- */

.books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.book {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--space-5);
  min-height: 13rem;
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 14px);
  border-radius: 2px 10px 10px 2px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 4px 6px 0 rgb(17 17 17 / 0.15);
}

/* The spine edge. */
.book::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 14px;
  background: rgb(0 0 0 / 0.22);
  border-radius: 2px 0 0 2px;
}

.book__name {
  font-family: var(--w-display);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.1;
}

.book__posture {
  font-size: var(--step-0);
}

/* Four light-touch imprints, four thin spines. */
.book--group {
  grid-column: span 1;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.book--group::before { display: none; }

.thin {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 8.5rem;
  padding-bottom: 4px;
  border-bottom: 4px solid var(--w-ink);
}

.thin span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--w-display);
  font-size: 0.875rem;
  font-weight: 600;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.book--group .book__posture {
  color: var(--w-ink);
}

/* ---------- Brief framework + research method ---------- */

.brief-doc {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-7);
  border: 1px solid var(--w-line);
  background: #fff;
  box-shadow: 8px 8px 0 rgb(17 17 17 / 0.08);
}

.brief-doc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 3px solid var(--w-accent);
}

.brief-doc__title {
  font-family: var(--w-display);
  font-size: 1.75rem;
  font-weight: 600;
}

.brief-doc ol {
  display: grid;
  gap: var(--space-1) var(--space-7);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: field;
}

.brief-doc li {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-3);
  counter-increment: field;
  font-weight: 650;
}

.brief-doc li::before {
  content: counter(field, decimal-leading-zero);
  color: var(--w-accent-text);
  font-size: var(--step--1);
  font-weight: 800;
}

/* Empty ruled lines: the brief is a frame, never filled in here. */
.brief-doc li::after {
  content: "";
  height: 1.5rem;
  border-bottom: 1px dashed var(--w-line);
  background: repeating-linear-gradient(to bottom, transparent 0 11px, var(--w-line) 11px 12px);
  opacity: 0.6;
}

@media (min-width: 52rem) {
  .brief-doc ol { grid-template-columns: 1fr 1fr; }
}

.brief-note {
  max-width: 36rem;
  margin: var(--space-6) auto 0;
  color: var(--w-muted);
  font-style: italic;
  text-align: center;
}

.method {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.method li {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 4px solid var(--w-ink);
  background: #fff;
  counter-increment: step;
}

.method__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.method__top::after {
  content: counter(step, decimal-leading-zero);
  color: var(--w-accent);
  font-family: var(--w-display);
  font-size: 2rem;
  font-weight: 600;
}

.method strong {
  display: block;
  font-family: var(--w-display);
  font-size: 1.5rem;
  font-weight: 600;
}

@media (min-width: 52rem) {
  .method { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Notes: the untested premise, and the open questions ---------- */

.c-notes {
  max-width: 60rem;
  margin: 0 auto;
}

.c-notes .cs-lead { margin-inline: auto; text-align: center; }

.premise {
  margin: var(--space-8) 0 0;
  padding: var(--space-7) var(--space-6);
  border-top: 3px solid var(--w-accent);
  border-bottom: 3px solid var(--w-accent);
  text-align: center;
}

.premise__label {
  color: var(--w-accent-text);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.premise blockquote {
  margin: var(--space-3) 0 0;
  font-family: var(--w-display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 560;
  line-height: 1.15;
}

.premise blockquote::before { content: "“"; color: var(--w-accent); }
.premise blockquote::after { content: "”"; color: var(--w-accent); }

.questions-intro {
  margin-top: var(--space-8);
  font-family: var(--w-display);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.questions {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.question {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--w-line);
  background: #fff;
  font-size: var(--step-1);
}

.question__mark {
  color: var(--w-accent);
  font-family: var(--w-display);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
}

@media (min-width: 52rem) {
  .questions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.case--casa .cs-pager {
  justify-items: center;
  text-align: center;
}


/* ---------- Process loop: ten stages around a ring, back to stage 1 ---------- */

.loop {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
}

.loop__ring {
  width: min(100%, 34rem);   /* the anchor of the framework: give it room */
  justify-self: center;
}

.loop__ring svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.loop__track { fill: none; stroke: var(--w-ink); stroke-width: 2; }
.loop__back { fill: none; stroke: var(--w-accent); stroke-width: 3; }
.loop__node circle { fill: var(--w-ground); stroke: var(--w-ink); stroke-width: 2; }
/* First and last stage in deep red: white numbers on it measure 6.6:1. */
.loop__node--first circle,
.loop__node--last circle { fill: var(--w-accent-text); stroke: var(--w-accent-text); }
.loop__node text { fill: var(--w-ink); font: 700 15px var(--font-body); text-anchor: middle; dominant-baseline: central; }
.loop__node--first text,
.loop__node--last text { fill: #fff; }
.loop__center { fill: var(--w-accent-text); font: italic 600 18px var(--w-display); text-anchor: middle; }

.loop__stages {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.loop__stages li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-3);
  counter-increment: stage;
}

.loop__stages li::before {
  content: counter(stage);
  color: var(--w-accent-text);
  font-weight: 700;
}

.loop__stages strong {
  display: block;
}

.loop__stages span {
  color: var(--w-muted);
}

.loop__return {
  margin-top: var(--space-2);
  padding-left: calc(2.25rem + var(--space-3));
  color: var(--w-accent-text);
  font-weight: 650;
}

/* Stage by stage, once: each node and its line fade in after the one before. */
.motion .loop .loop__node,
.motion .loop .loop__stages li,
.motion .loop .loop__back,
.motion .loop .loop__return {
  opacity: 0;
  transition: opacity 420ms ease calc(var(--i, 0) * 140ms);
}

.motion .loop.is-in .loop__node,
.motion .loop.is-in .loop__stages li,
.motion .loop.is-in .loop__back,
.motion .loop.is-in .loop__return {
  opacity: 1;
}

@media (min-width: 64rem) {
  .loop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* ---------- Phased rollout: three steps, Phase 1 marked as the point of delivery ---------- */

.rollout {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.phase {
  padding: var(--space-5);
  border: 1.5px solid var(--w-line);
}

.phase--delivered {
  border: 2px solid var(--w-accent);
  background: #fff;
}

.phase__flag {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 0.15rem 0.5rem;
  background: var(--w-accent-text);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phase__name {
  font-family: var(--w-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.phase p {
  margin-top: var(--space-3);
}

.phase__success {
  color: var(--w-muted);
}

@media (min-width: 64rem) {
  .rollout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  /* Stepped: each phase sits higher than the last. */
  .phase:nth-child(1) { margin-top: 6rem; }
  .phase:nth-child(2) { margin-top: 3rem; }
}

/* ---------- Measurement ---------- */

.measure {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

.measure__title {
  font-family: var(--w-display);
  font-size: 1.75rem;
  font-weight: 600;
}

.measure__line {
  margin-top: var(--space-1);
  color: var(--w-accent-text);
  font-style: italic;
}

.measure ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding-left: 1.1em;
}

.measure__close {
  color: var(--w-muted);
}

@media (min-width: 52rem) {
  .measure { grid-template-columns: 1fr 1fr; }
}

/* ---------- The 80/20 rule ---------- */

.ratio {
  display: grid;
  grid-template-columns: 4fr 1fr;
  margin-top: var(--space-6);
  font-family: var(--w-display);
}

.ratio__part {
  padding: var(--space-5);
}

.ratio__part--80 {
  background: var(--w-dark);
  color: var(--w-on-dark);
}

.ratio__part--20 {
  background: var(--w-accent-text);
  color: #fff;
}

.ratio__n {
  display: block;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  font-weight: 600;
  line-height: 1;
}

.ratio__l {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
}

/* ---------- Selected work ---------- */

.work-meta {
  margin-top: var(--space-3);
  color: var(--w-accent-text);
  font-weight: 650;
}

.work-facts {
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
  margin-top: var(--space-5);
  font-size: var(--step-1);
}

.pieces {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.piece-c img,
.piece-c video {
  display: block;
  width: 100%;
  height: auto;
}

.piece-c figcaption {
  margin-top: var(--space-3);
}

.piece-c__name {
  display: block;
  font-weight: 650;
}

.piece-c__map {
  display: block;
  margin-top: var(--space-1);
  color: var(--w-muted);
  font-size: var(--step-0);
}

@media (min-width: 40rem) {
  .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mychal Threets: four slides across, scroll sideways on phones. */
.slides {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 22rem);
  gap: var(--space-4);
  margin-top: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
}

.slides img {
  display: block;
  width: 100%;
  height: auto;
  scroll-snap-align: start;
}

@media (min-width: 64rem) {
  .slides {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
}

/* The caption sheet, rebuilt as text. */
.captions {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.caption-sheet {
  padding: var(--space-6);
  background: #fff;
}

.caption-sheet__platform {
  color: var(--w-accent-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.caption-sheet p {
  margin-top: var(--space-3);
}

.caption-sheet__tags {
  color: var(--w-muted);
}

@media (min-width: 52rem) {
  .captions { grid-template-columns: 1fr 1fr; }
}

/* Caption sheets sit in a phone-shaped frame. */
.caption-sheet {
  border: 10px solid var(--w-dark);
  border-radius: 34px;
  padding-top: var(--space-7);
  position: relative;
}

.caption-sheet::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 4.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--w-dark);
  transform: translateX(-50%);
}

/* Phones: the pillar number sits above its name, so the name gets the full width. */
@media (max-width: 39.99rem) {
  .pillar summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-5);
  }

  .pillar__n {
    grid-column: 1 / -1;
    font-size: 2rem;
  }

  .pillar__body {
    padding: 0 var(--space-5) var(--space-5);
  }
}

.pillar {
  text-align: left;
}

/* Phones: books size to their text instead of a shelf height. */
@media (max-width: 39.99rem) {
  .book {
    min-height: 0;
    gap: var(--space-3);
  }
}

/* ---------- The password panel on the public preview ---------- */

.c-lock {
  background: var(--w-dark);
  color: var(--w-on-dark);
  --w-muted: var(--w-muted-on-dark);
}

.c-lock__wrap {
  display: grid;
  gap: var(--space-7);
}

.c-lock__list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.c-lock__list li {
  padding-left: var(--space-4);
  border-left: 2px solid var(--w-accent);
  color: var(--w-muted-on-dark);
}

.c-lock__list b {
  display: block;
  color: var(--w-on-dark);
}

.c-lock__form {
  align-self: center;
  padding: var(--space-6);
  border-radius: 1.25rem;
  background: var(--w-ground);
  color: var(--w-ink);
}

.c-lock__form label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.c-lock__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.c-lock__row input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1.5px solid #8A8072;
  border-radius: 0.5rem;
  background: #FFFFFF;
  font: inherit;
  color: var(--w-ink);
}

.c-lock__row button {
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--w-dark);
  color: var(--w-on-dark);
  font-weight: 600;
  cursor: pointer;
}

.c-lock__row button:hover {
  background: var(--w-accent-text);
}

.c-lock__error {
  margin-top: var(--space-3);
  font-weight: 600;
  color: var(--w-accent-text);
}

.c-lock__ask {
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  color: var(--w-muted);
}

@media (min-width: 60rem) {
  .c-lock__wrap {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

/* Follows the dark Scope band, so no second gap; reads left to right beside the form. */
.c-lock { padding-top: 0; }
.c-lock .c-head { justify-items: start; text-align: left; }
.c-lock .c-head .cs-lead { margin-inline: 0; }
.c-lock .c-lock__ask { color: #5A5248; }