:root {
  /* Chrome that used to be tinted. Colour is reserved for the hero, the CTA and
     anything that actually encodes data; everything else reads in ink. */
  --chrome: #1c1c1c;
  --chrome-soft: rgb(0 0 0 / 14%);
  --chrome-fill: rgb(0 0 0 / 5%);
}

/* Opera project page.
   Shares the site container, section rhythm and card treatment with the other
   project pages. The hero is centred like the rest of the portfolio and every
   screen is held to the same measure as the body copy. */

:root {
  /* The one site accent, as on every other detail page. */
  --op-accent: var(--mint);
  --op-surface: #fff;
  --op-bg: #f5f5fa;
}

/* ---------- Hero ---------- */

.op-hero {
  padding: 140px 0 0;
  background: var(--bg-dark);
  text-align: center;
}

.op-hero-copy {
  max-width: 1000px;
  margin: 0 auto;
}

.op-eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  color: var(--op-accent);
  font-family: var(--font-hand);
  font-size: var(--text-l);
  font-weight: 700;
  transform: rotate(-3deg);
}

.op-title {
  margin: 0 0 22px;
  color: var(--text-dark-1);
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: var(--fw-semibold);
  letter-spacing: -.04em;
  line-height: .9;
}

.op-lead {
  max-width: 900px;
  margin: 0 auto 26px;
  color: var(--text-dark-1);
  font-family: var(--font-display);
  font-size: var(--h4);
  font-weight: var(--fw-semibold);
  letter-spacing: -.025em;
  line-height: 1.14;
}

.op-desc {
  max-width: 780px;
  margin: 0 auto;
  color: var(--text-dark-2);
  font-size: var(--text-l);
  line-height: 1.65;
}

.op-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 900px;
  margin: clamp(40px, 4.4vw, 60px) auto 0;
  padding: 26px 0;
  border-top: 1px solid rgb(255 255 255 / 14%);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.op-meta div {
  padding: 0 18px;
  border-right: 1px solid rgb(255 255 255 / 14%);
}

.op-meta div:last-child { border-right: 0; }

.op-meta dt {
  margin-bottom: 8px;
  color: var(--text-dark-2);
  font-size: var(--text-s);
  font-weight: 600;
}

.op-meta dd {
  margin: 0;
  color: var(--text-dark-1);
  font-size: var(--text-r);
  font-weight: 700;
  line-height: 1.45;
}

.op-hero-shot {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: clamp(46px, 5.5vw, 72px) auto 0;
}

.op-hero-figure {
  margin: 0;
  padding-bottom: clamp(60px, 6vw, 90px);
}

/* ---------- Section furniture ---------- */

.op-label {
  display: block;
  margin: 0 0 18px;
  color: var(--chrome);
  font-size: var(--text-t);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.op-lede {
  max-width: 900px;
  margin: 0 0 44px;
  color: var(--text-light-2);
  font-size: var(--text-m);
  line-height: 1.7;
}

.op-prose {
  display: grid;
  gap: 22px;
  max-width: 900px;
  margin: 0 0 44px;
}

.op-prose p {
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-m);
  line-height: 1.7;
}

.op-subhead {
  max-width: 900px;
  margin: 0 0 20px;
  color: var(--text-light-1);
  font-family: var(--font-display);
  font-size: var(--h5);
  font-weight: var(--fw-semibold);
  letter-spacing: -.02em;
  line-height: 1.25;
}

/* ---------- Focus blocks, roles ---------- */

.op-focus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.op-focus > div {
  padding-top: 26px;
}

.op-focus h3,
.op-roles h3 {
  margin: 0 0 12px;
  color: var(--text-light-1);
  font-size: var(--text-l);
  line-height: 1.35;
}

.op-focus p,
.op-roles p {
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-r);
  line-height: 1.7;
}

.op-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

.op-roles > div {
  padding-left: 24px;
  border-left: 2px solid var(--chrome);
}

.op-roles p {
  max-width: 460px;
}

/* ---------- Flow stages ---------- */

.op-stage {
  margin-top: clamp(56px, 6vw, 92px);
  padding-top: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--border-soft);
}

.op-stage:first-of-type {
  margin-top: clamp(16px, 2vw, 28px);
  padding-top: 0;
  border-top: 0;
}

.op-stage-head {
  display: grid;
  align-items: start;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  max-width: 1000px;
}

.op-stage-num {
  padding-top: 6px;
  color: var(--chrome);
  font-family: var(--font-display);
  font-size: var(--text-r);
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
}

.op-stage-head h3 {
  margin: 0 0 16px;
  color: var(--text-light-1);
  font-family: var(--font-display);
  font-size: var(--h4);
  font-weight: var(--fw-semibold);
  letter-spacing: -.025em;
  line-height: 1.18;
}

.op-stage-head p {
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-m);
  line-height: 1.7;
}

/* ---------- Screens ---------- */

/* Desktop captures sit centred and a step wider than the body copy, so the
   dense interface has a little more room without leaving the container. */
.op-shots {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 100%;
  margin: clamp(32px, 3.6vw, 48px) auto 0;
}

.op-shot {
  margin: 0;
}

.op-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.op-caption {
  margin-top: 14px;
  color: var(--text-light-2);
  font-size: var(--text-s);
  line-height: 1.55;
}

/* Mobile captures are already finished screens, so they are shown at a
   restrained width rather than dropped into another device frame. */
.op-phones {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 52px);
  justify-items: center;
  max-width: 760px;
  margin: clamp(32px, 3.6vw, 48px) auto 0;
}

.op-phones--single {
  --cols: 1;
  max-width: 380px;
}

.op-phone {
  margin: 0;
  max-width: 340px;
}

.op-phone img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
}

.op-phone figcaption {
  margin-top: 14px;
  color: var(--text-light-2);
  font-size: var(--text-s);
  line-height: 1.55;
  text-align: center;
}

/* ---------- Principles, note ---------- */

.op-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 3vw, 40px);
}

.op-principles li {
  padding: 18px 22px;
  border: 1px solid var(--chrome-soft);
  border-radius: var(--radius-md);
  background: #fafafa;
  color: var(--text-light-1);
  font-size: var(--text-r);
  font-weight: 700;
  line-height: 1.45;
}

.op-principles {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.op-note {
  max-width: 760px;
  margin: clamp(28px, 3vw, 38px) 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--chrome);
  color: var(--text-light-1);
  font-size: var(--text-r);
  line-height: 1.65;
}

/* ---------- Decisions ---------- */

.op-decisions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.op-decision {
  padding: clamp(26px, 2.8vw, 34px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #fafafa;
}

.op-decision h3 {
  margin: 0 0 12px;
  color: var(--text-light-1);
  font-size: var(--text-l);
  line-height: 1.35;
}

.op-decision p {
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-r);
  line-height: 1.7;
}

/* ---------- Design system ---------- */

.op-system {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(32px, 3.4vw, 44px);
}

.op-system-item {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #fafafa;
}

.op-system-item dt {
  color: var(--text-light-2);
  font-size: var(--text-t);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.op-system-item dd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-light-1);
  font-size: var(--text-r);
  font-weight: 700;
}

.op-swatch {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--c);
}

/* ---------- Reflection ---------- */

.op-next {
  max-width: 820px;
  margin: clamp(36px, 4vw, 52px) 0 0;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #fafafa;
}

.op-next h3 {
  margin: 0 0 12px;
  color: var(--text-light-1);
  font-size: var(--text-m);
  line-height: 1.35;
}

.op-next p {
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-r);
  line-height: 1.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .op-focus,
  .op-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .op-system {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .op-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 0;
  }

  .op-meta div:nth-child(odd) {
    padding-left: 0;
  }

  .op-meta div:nth-child(even) {
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 900px) {
  .op-roles,
  .op-decisions {
    grid-template-columns: minmax(0, 1fr);
  }

  .op-stage-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .op-stage-num {
    padding-top: 0;
  }
}

@media (max-width: 700px) {
  .op-hero {
    padding-top: 118px;
  }

  .op-focus,
  .op-principles,
  .op-system,
  .op-phones {
    grid-template-columns: minmax(0, 1fr);
  }

  .op-phones {
    justify-items: center;
    gap: 34px;
  }

  .op-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 22px 0;
  }

  .op-meta div {
    padding: 0;
    border-right: 0;
  }

  .op-lede,
  .op-prose p {
    font-size: var(--text-m);
  }
}