/* Page composition and local exceptions. Shared primitives: ../../design-system/. */
body {

   text-rendering: optimizeLegibility;
}

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 0; background: var(--signal);
  z-index: 100; transition: width .06s linear;
}

.h-section {

  text-wrap: balance;
}

/* Top bar *//* COVER */
.cover .inner {
  max-width: var(--content-std); margin: 0 auto;
  padding: 144px var(--gutter);
  position: relative; z-index: 2;
}
.cover h1 {

  --cover-title-size: clamp(40px, 4vw, 56px);
  --cover-title-leading: 1.05; --cover-title-tracking: -0.03em;

}
.cover .lede {

   max-width: var(--content-text);
  margin-top: var(--s-32);
}

/* SHIFT — bg: the critique */
.shift { background: var(--bg); }

.shift .top { max-width: 760px; }
.shift .top .eyebrow { margin-bottom: var(--s-16); }
.shift .top h2 { margin-bottom: var(--s-24); }
.shift .top p { font-size: var(--body-size); line-height: 1.7; }
.shift .top p + p { margin-top: var(--s-16); }
.shift .frame {
  margin-top: var(--s-64);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-24);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.35);
}
.shift .frame img { width: 100%; border-radius: var(--r-md); }
.shift .figure-caption { max-width: 76ch; margin: var(--s-24) auto 0; text-align: center; text-wrap: balance; }
.shift .principles {
  margin-top: var(--s-64);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-24);
}
.shift .plist {
  border-radius: var(--r-lg);
  padding: var(--s-32) var(--s-24);
}
.shift .plist.keep { background: var(--sage); }
.shift .plist.avoid { background: var(--surface); }
.shift .plist h3 {
  font-family: var(--f-display); font-weight: 900; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: var(--s-16);
}
.shift .plist.keep h3 { color: var(--primary); }
.shift .plist.avoid h3 { color: var(--text-secondary); }
.shift .plist ul { list-style: none; }
.shift .plist li { padding: var(--s-8) 0; font-size: 15px; line-height: 1.5; border-bottom: 1px solid rgba(28,27,24,0.08); }
.shift .plist li:last-child { border-bottom: 0; }

/* IA — frost */
.ia { background: var(--frost); }
.ia .inner {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-64); align-items: center;
}
.ia .text .eyebrow { margin-bottom: var(--s-16); }
.ia .text h2 { margin-bottom: var(--s-20); }
.ia .text p { font-size: 16px; line-height: 1.7; max-width: 52ch; }
.ia .text p + p { margin-top: var(--s-12); }
.ia figure img {
  width: 100%; border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-media);
}


/* SHIPPED — sage */
.shipped { background: var(--sage); }

.shipped .top { max-width: var(--content-std); margin: 0 auto var(--s-48); text-align: center; }
.shipped .top .eyebrow { margin-bottom: var(--s-16); }
.shipped .top h2 { margin-bottom: var(--s-16); }
.shipped .top p { font-size: var(--body-size); line-height: 1.65; }
.shipped .shot { max-width: var(--content-std); margin: 0 auto; }
.shipped .shot + .shot { margin-top: var(--s-64); }
.shipped .frame {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--s-24);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.04);
}
.shipped .frame img { width: 100%; height: auto; border-radius: var(--r-md); background: var(--bg); }
.shipped .figure-caption { max-width: 76ch; margin: var(--s-24) auto 0; text-align: center; text-wrap: balance; }

/* HANDOFF — bg */
.handoff { background: var(--bg); }
.handoff .inner {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: var(--s-64); align-items: center;
}
.handoff .text .eyebrow { margin-bottom: var(--s-16); }
.handoff .text h2 { margin-bottom: var(--s-20); }
.handoff .text p { font-size: 16px; line-height: 1.7; max-width: 52ch; }
.handoff .text p + p { margin-top: var(--s-12); }
.handoff figure img {
  width: 100%; border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-media);
}


/* TAKEAWAY */
.takeaway { background: var(--depth-soft); }
.takeaway .inner {
  max-width: var(--content-text); margin: 0 auto;
  padding: var(--s-80) var(--gutter);
  text-align: center;
}
.takeaway .lbl {
  font-family: var(--f-display); font-weight: 900;
  font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--quiet);
  margin-bottom: var(--s-20);
}
.takeaway p {
  font-family: var(--f-quote); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.5;
  text-wrap: balance;
}

/* NEXT CTA */


/* RESPONSIVE */
@media (max-width: 1024px) {
  .shift .principles { grid-template-columns: 1fr; }
  .ia .inner { grid-template-columns: 1fr; gap: var(--s-48); }
  .handoff .inner { grid-template-columns: 1fr; gap: var(--s-48); }
}