/* ==========================================================================
   components.css — typography, content blocks, controls, placeholders
   ========================================================================== */

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--color-charcoal);
  color: var(--color-white);
  font-size: var(--fs-small);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--color-orange);
  border-radius: var(--radius);
}

.slide--closing :focus-visible {
  outline-color: var(--color-white);
}

/* A slide made focusable because it scrolls: inset ring, no outer glow */
.slide:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: -2px;
  box-shadow: none;
  border-radius: 0;
}

.noscript-note {
  padding: var(--space-4) var(--gutter);
  background: var(--color-surface-alt);
  font-size: var(--fs-small);
}

/* ---------- Floating chrome (header + footer) ----------
   Chips carry their own backing so they stay legible over images.
   Over the white text column the backing is invisible. */

.brand,
.deck__section,
.counter {
  background: var(--chrome-bg);
  color: var(--chrome-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color var(--duration-slide) var(--ease-slide), color var(--duration-slide) var(--ease-slide);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
  margin-left: calc(var(--space-3) * -1);
  padding-inline: var(--space-3);
}

.brand__name {
  font-size: clamp(1rem, 0.4vw + 0.85rem, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand__tag {
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-rule);
  color: var(--color-ink-muted);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deck__section {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 2rem;
  margin-right: calc(var(--space-3) * -1);
  padding-inline: var(--space-3);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.deck__section-num {
  color: var(--color-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.deck__section-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(45, 45, 45, 0.08);
}

.progress__fill {
  display: block;
  width: calc(100% / 12);
  height: 100%;
  background: var(--color-orange);
  transition: width var(--duration-slide) var(--ease-slide);
}

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

.counter {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-left: calc(var(--space-3) * -1);
  padding: var(--space-1) var(--space-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.counter__current {
  font-size: clamp(1.1rem, 0.5vw + 0.95rem, 1.4rem);
  font-weight: 600;
}

.counter__divider,
.counter__total {
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
}

.nav-buttons {
  display: flex;
  gap: var(--space-2);
}

.nav-button {
  display: inline-grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-ink);
  transition: border-color 150ms ease, background-color 150ms ease, opacity 150ms ease;
  touch-action: manipulation;
}

.nav-button:hover:not(:disabled) {
  border-color: var(--color-charcoal);
}

.nav-button[data-nav="next"]:not(:disabled) {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-white);
}

.nav-button[data-nav="next"]:hover:not(:disabled) {
  background: #000;
}

.nav-button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* No "Previous" on the first slide */
.nav-button[data-nav="prev"]:disabled {
  visibility: hidden;
}

/* Dark theme for the chrome (closing slide) */
.deck[data-theme="dark"] {
  --chrome-bg: rgba(45, 45, 45, 0.94);
  --chrome-ink: var(--color-white);
}

.deck[data-theme="dark"] .brand__tag {
  border-color: var(--color-rule-dark);
  color: var(--color-on-dark-muted);
}

.deck[data-theme="dark"] .deck__section-num {
  color: var(--color-orange);
}

.deck[data-theme="dark"] .counter__divider,
.deck[data-theme="dark"] .counter__total {
  color: var(--color-on-dark-muted);
}

.deck[data-theme="dark"] .progress {
  background: rgba(255, 255, 255, 0.12);
}

.deck[data-theme="dark"] .nav-button {
  border-color: var(--color-rule-dark);
  background: var(--color-charcoal);
  color: var(--color-white);
}

.deck[data-theme="dark"] .nav-button[data-nav="next"]:not(:disabled) {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-charcoal);
}

/* ---------- Typography ---------- */

.display {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

.heading {
  margin-bottom: var(--space-fluid);
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  max-width: 22ch;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--color-orange);
}

/* Slide number from the visible-slide counter (layout.css), e.g. "05 —" */
.eyebrow__num::before {
  content: counter(slide, decimal-leading-zero) " \2014";
}

.eyebrow__num {
  margin-right: calc(var(--space-3) * -1 + 0.35em);
}

.subtitle {
  margin-top: calc(var(--space-fluid) * -0.5);
  margin-bottom: var(--space-fluid);
  color: var(--color-ink-muted);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-snug);
}

.subtitle__location {
  display: block;
  margin-top: 0.15em;
  color: var(--color-ink-soft);
  font-size: 0.9em;
}

.closing-brand .sep {
  margin-inline: 0.4em;
  color: var(--color-orange);
}

.subtitle--cover {
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
  color: var(--color-ink);
  font-size: clamp(1.15rem, 0.8vw + 0.9vh + 0.6rem, 2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.statement {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-orange);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  max-width: 30ch;
}

.nav-hint {
  margin-top: var(--space-7);
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
  max-width: 36ch;
}

.lead {
  color: var(--color-ink-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  max-width: 60ch;
}

.body-copy {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-fluid);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 62ch;
}

/* Heading with a quieter second line (ecosystem slide):
   "Our Studios" / "Distinct practices. Shared thinking." */
.heading__sub {
  display: block;
  margin-top: 0.3em;
  color: var(--color-ink-muted);
  font-size: var(--fs-subtitle);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--lh-snug);
}

/* Text-led statement slides (02, 10) */
.heading--statement {
  font-size: clamp(2rem, 1.6vw + 2.6vh + 0.4rem, 4.25rem);
  max-width: 13ch;
  margin-bottom: 0;
}

.body-copy--lead {
  margin-bottom: 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 48ch;
}

.statement__body > .body-copy:not(.body-copy--lead) {
  max-width: 56ch;
}

.scope-list.scope-list--ruled {
  gap: 0;
  max-width: 56ch;
  border-top: 1px solid var(--color-rule);
}

.scope-list.scope-list--ruled li {
  padding-block: clamp(0.4rem, 1.1vh, 0.7rem);
  border-bottom: 1px solid var(--color-rule);
}

.scope-list.scope-list--ruled li::before {
  top: calc(clamp(0.4rem, 1.1vh, 0.7rem) + 0.6em);
}

.note {
  margin-top: var(--space-fluid);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  max-width: 70ch;
}

.list-heading {
  margin-bottom: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.scope-list + .list-heading--spaced {
  margin-top: var(--space-fluid);
}

/* ---------- Lists ---------- */

.scope-list {
  display: grid;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

.scope-list--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scope-list--3col {
  display: flex;
  flex-wrap: wrap;
}

.scope-list--3col li {
  white-space: nowrap;
}

.scope-list li {
  position: relative;
  padding-left: 1.1em;
}

.scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.45em;
  height: 2px;
  background: var(--color-orange);
}

/* ---------- Capabilities (slide 03) ---------- */

.capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-fluid) var(--space-6);
}

.capability {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

.capability__num {
  grid-row: span 2;
  color: var(--color-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.capability__name {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.capability__desc {
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

/* ---------- Process (slide 04) ---------- */

.process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  counter-reset: step;
}

.process__step {
  position: relative;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-charcoal);
}

/* Sequence marker on the rule */
.process__step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-orange);
}

/* Arrow-like continuation between steps */
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -2px;
  right: calc(var(--space-5) * -1);
  width: var(--space-5);
  height: 2px;
  background: var(--color-rule);
}

.process__num {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.process__name {
  margin-bottom: var(--space-2);
  font-size: var(--fs-lead);
  font-weight: 600;
}

.process__desc {
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

/* ---------- Project facts (slides 05–07) ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-fluid);
  padding-block: var(--space-3);
  border-block: 1px solid var(--color-rule);
}

.facts--3col {
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
}

.facts__item--full {
  grid-column: 1 / -1;
}

.facts dt {
  color: var(--color-ink-soft);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.facts dd {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.facts__aside {
  display: block;
  color: var(--color-ink-muted);
  font-weight: 400;
}

.facts__aside--small {
  margin-top: 0.2em;
  font-size: var(--fs-small);
}

/* Recreation Park status: keep the badge on one line */
.facts .status-badge--design {
  white-space: nowrap;
}

.status-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 1px solid var(--color-charcoal);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Orange tint = design-stage work, not built (proposal, competition entry,
   design and working drawings completed) */
.status-badge--proposal,
.status-badge--design {
  border-color: var(--color-orange);
  background: rgba(248, 177, 51, 0.14);
}

/* ---------- Project cards (slide 09 — Selected Projects) ---------- */

.project-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.project-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-3);
}

.project-card__media > .ph {
  position: absolute;
  inset: 0;
}

.project-card__body {
  display: grid;
  gap: 0.2rem;
  align-content: start;
}

.project-card__category {
  color: var(--color-ink-soft);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-card__name {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.project-card__type,
.project-card__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

.project-card__desc {
  color: var(--color-ink-muted);
}

.project-card__status {
  margin-top: var(--space-1);
}

/* ---------- Additional work list (reserved; unused since v1.5) ---------- */

.pending-tag {
  align-self: flex-start;
  margin-bottom: var(--space-fluid);
  padding: 0.2em 0.7em;
  border: 1px dashed var(--ph-border);
  color: var(--ph-text);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
}

.work-list {
  display: grid;
}

.work-item {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: var(--space-3);
  padding-block: clamp(0.4rem, 1.3vh, 0.75rem);
  border-top: 1px solid var(--color-rule);
}

.work-item:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.work-item__num {
  color: var(--color-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

.work-item__body {
  display: grid;
  gap: 0.15rem;
}

.work-item__type {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-item__title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.work-item__location,
.work-item__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

.is-placeholder {
  color: var(--ph-text);
}

.work-item__link {
  justify-self: start;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

.work-item__link.is-pending {
  color: var(--color-ink-soft);
  border-bottom-style: dashed;
  cursor: not-allowed;
}

/* ---------- Ecosystem list (slide 11) ---------- */

@media (min-width: 901px) {
  .layout-split--text-only .brand-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .layout-split--text-only .brand-row:nth-last-child(2) {
    border-bottom: 1px solid var(--color-rule);
  }
}

.lead + .brand-list {
  margin-top: var(--space-fluid);
}

.brand-list {
  display: grid;
}

.brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-4);
  padding: clamp(0.4rem, 1.3vh, 0.75rem) 0;
  border-top: 1px solid var(--color-rule);
}

.brand-row:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.brand-row__name {
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.brand-row__desc {
  grid-column: 1;
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
}

.brand-row__label {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--color-ink);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.brand-row--primary {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-orange);
  background: var(--color-surface-alt);
}

.brand-row--primary .brand-row__label {
  padding-right: var(--space-4);
}

/* ---------- Brand logo (img/brand/A21_Studios_Logo.png) ----------
   Supplied transparent PNG, shown at its own proportions (1917 × 410).
   Sized by width only; height follows. Never recoloured or filtered. */

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.display--logo {
  margin-bottom: clamp(1.25rem, 3.5vh, 2.5rem);
  line-height: 0;
}

.brand-logo--cover {
  width: clamp(14rem, 20vw + 9vh, 28rem);
  max-width: 100%;
}

.brand-logo--closing {
  width: clamp(9rem, 7vw + 5vh, 13rem);
}

/* Light plate so the charcoal + orange logo reads on the dark closing slide */
.closing-brand--logo {
  display: inline-block;
  align-self: flex-start;
  padding: clamp(0.6rem, 1vw, 0.9rem) clamp(0.8rem, 1.3vw, 1.2rem);
  background: var(--color-white);
}

/* ---------- Ecosystem tree (slide 08) ----------
   Mirrors the "Our Studios" diagram on arch21studios.com: one parent, five
   studios of equal standing. v1.8: precise geometry. Columns have no gaps
   (spacing is padding inside each column), so the column centres sit at
   exactly 10/30/50/70/90 % and the stem, bus and drops meet without
   overshoot. Orange dots mark the junction and the end of each drop. */

.eco-tree {
  --eco-line: var(--color-ink-soft);
  --eco-drop: clamp(1.25rem, 3.6vh, 2.5rem);
  --eco-dot: 7px;
  margin-block: var(--space-fluid);
  padding-block: clamp(1rem, 3.2vh, 2.25rem);
  border-block: 1px solid var(--color-rule);
}

.eco-tree__root {
  position: relative;
  width: max-content;
  margin: 0 auto var(--eco-drop);
  padding: 0.85em 2.1em;
  border: 1px solid var(--color-orange);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* stem: parent → bus, on the exact centre line. Measured from inside the
   1px border, so it is 1px longer to land exactly on the bus. */
.eco-tree__root::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.5px);
  top: 100%;
  width: 1px;
  height: calc(var(--eco-drop) + 1px);
  background: var(--eco-line);
}

.eco-tree__branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 0;
}

/* bus: first column centre (10 %) to last column centre (90 %) */
.eco-tree__branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--eco-line);
}

/* junction where the stem meets the bus */
.eco-tree__branches::after {
  content: "";
  position: absolute;
  top: calc(var(--eco-dot) / -2 + 0.5px);
  left: calc(50% - var(--eco-dot) / 2);
  width: var(--eco-dot);
  height: var(--eco-dot);
  border-radius: 50%;
  background: var(--color-orange);
}

.eco-node {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.2rem;
  padding: calc(var(--eco-drop) + 0.6rem) var(--space-2) 0;
  text-align: center;
}

/* drop: bus → studio */
.eco-node::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: var(--eco-drop);
  background: var(--eco-line);
}

/* dot at the end of each drop (positioned against .eco-node) */
.eco-node__name::before {
  content: "";
  position: absolute;
  top: calc(var(--eco-drop) - var(--eco-dot) / 2);
  left: calc(50% - var(--eco-dot) / 2);
  width: var(--eco-dot);
  height: var(--eco-dot);
  border-radius: 50%;
  background: var(--color-orange);
}

.eco-node__name {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.eco-node__desc {
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

/* ---------- Closing (slide 12) ---------- */

.slide--closing {
  background: var(--color-charcoal);
  color: var(--color-on-dark);
}

.slide--closing .eyebrow,
.slide--closing .body-copy {
  color: var(--color-on-dark-muted);
}

.closing-brand {
  margin-bottom: var(--space-4);
  font-size: var(--fs-subtitle);
  font-weight: 600;
}

.contact-list {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule-dark);
  font-size: var(--fs-body);
}

.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
}

.contact-list__label {
  min-width: 5.5rem;
  color: var(--color-on-dark-muted);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-list a {
  display: inline-block;
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-orange);
}

.contact-list a:hover {
  color: var(--color-orange);
}

.text-button {
  align-self: flex-start;
  min-height: var(--touch-target);
  padding-inline: var(--space-5);
  border: 1px solid var(--color-rule-dark);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
}

.text-button:hover {
  border-color: var(--color-white);
}

/* ==========================================================================
   Image placeholder component
   Rendered by js/placeholders.js from the central asset registry.
   Fills its masonry cell edge to edge. Neutral, hatched and labelled so it
   can never be mistaken for imagery. Real images use the same box with
   object-fit: cover.
   ========================================================================== */

.ph {
  container-type: size;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background-color: var(--ph-bg);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ph-hatch) 0 1px,
    transparent 1px 12px
  );
  color: var(--ph-text);
}

.ph--on-dark {
  background-color: var(--ph-bg-dark);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ph-hatch-dark) 0 1px,
    transparent 1px 12px
  );
  color: var(--ph-text-dark);
}

/* Fallback caption before JS renders (and in no-JS mode) */
.ph > figcaption {
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.no-js .ph {
  min-height: 16rem;
}

.ph__inner {
  display: grid;
  justify-items: center;
  gap: clamp(2px, 1.2cqmin, 8px);
  max-width: 100%;
  padding: clamp(6px, 4cqmin, 20px);
  text-align: center;
}

.ph__tag {
  padding: 0.15em 0.6em;
  border: 1px dashed currentColor;
  font-size: clamp(0.55rem, 2.4cqmin, 0.7rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ph__role {
  color: var(--ph-text-strong);
  font-size: clamp(0.68rem, 3.4cqmin, 0.95rem);
  font-weight: 600;
}

.ph--on-dark .ph__role,
.ph--on-dark .ph__file {
  color: var(--ph-text-strong-dark);
}

.ph__file {
  color: var(--ph-text-strong);
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 2.9cqmin, 0.85rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ph__meta {
  font-family: var(--font-mono);
  font-size: clamp(0.56rem, 2.4cqmin, 0.72rem);
  overflow-wrap: anywhere;
}

/* Corner marks — a drawing-board cue, clearly not a photograph */
.ph::before,
.ph::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: currentColor;
  border-style: solid;
  opacity: 0.55;
  pointer-events: none;
}

.ph::before {
  top: 8px;
  left: 8px;
  border-width: 1px 0 0 1px;
}

.ph::after {
  right: 8px;
  bottom: 8px;
  border-width: 0 1px 1px 0;
}

/* Small frames: keep the filename, drop secondary labels */
@container (max-width: 200px) or (max-height: 130px) {
  .ph__tag,
  .ph__meta {
    display: none;
  }
}

@container (max-width: 130px) {
  .ph__role {
    display: none;
  }
}

/* Image not yet added (registry `pending: true`): a quiet panel that keeps the
   frame's ratio. Plain surface, no hatching — clearly "to follow", never
   mistaken for project imagery. The file appears as soon as it is copied in. */
.ph.ph--pending {
  background: var(--color-surface-alt);
  box-shadow: inset 0 0 0 1px var(--color-rule);
  color: var(--color-ink-soft);
}

.ph--pending::before,
.ph--pending::after {
  opacity: 0.35;
}

.ph--pending .ph__tag {
  border: 0;
  padding: 0;
  font-weight: 600;
}

.ph--pending .ph__file {
  color: var(--color-ink-soft);
}

@container (max-width: 200px) or (max-height: 130px) {
  .ph--pending .ph__tag {
    display: inline;
  }
}

/* Index / brand badge (data-label) — stays on real images too */
.ph__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: calc(100% - 1rem);
  padding: 0.35rem 0.7rem;
  background: var(--color-charcoal);
  color: var(--color-white);
  font-size: max(0.7rem, var(--fs-eyebrow));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Ready image still loading: quiet surface, no placeholder label or marks */
.ph.is-loading {
  background: var(--color-surface-alt);
}

.ph.is-loading::before,
.ph.is-loading::after {
  display: none;
}

.slide--closing .ph.is-loading {
  background: #383838;
}

/* Real image (Step 2+): fills the same box the placeholder used */
.ph.is-loaded {
  background: var(--color-surface-alt);
}

.ph.is-loaded::before,
.ph.is-loaded::after {
  display: none;
}

.ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

/* Technical drawings: whole sheet on a tinted panel, never trimmed.
   White paper multiplies into the panel tone so the 4px seams stay visible.
   The bottom strip is reserved for the project label. */
.ph--drawing {
  --dp: clamp(0.5rem, 1.4vw, 1.25rem);
}

.ph--drawing.is-loaded,
.ph--drawing.is-loading {
  background: #F1F0EC;
}

/* Loaded drawing: the drawing fills the space above; the label sits in its
   own row underneath and can grow (wrap) without ever covering the drawing. */
.ph--drawing.is-loaded {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  place-items: stretch;
  row-gap: 0.4rem;
  padding: var(--dp) var(--dp) 0;
}

.ph--drawing.is-loaded > img {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.ph--drawing.is-loaded > .ph__badge {
  position: static;
  justify-self: start;
  align-self: end;
  margin-left: calc(var(--dp) * -1);
  max-width: calc(100% + var(--dp));
}

.layout-split--media-left .ph--drawing.is-loaded > .ph__badge {
  justify-self: end;
  margin-left: 0;
  margin-right: calc(var(--dp) * -1);
}

/* Short label variant (data-label-short) in narrow frames */
.ph__badge-short {
  display: none;
}

@container (max-width: 280px) {
  .ph__badge-full {
    display: none;
  }

  .ph__badge-short {
    display: inline;
  }
}

/* On slides with media on the left, labels sit on the inner (text-side)
   edge so they never meet the footer counter. */
.layout-split--media-left .ph__badge {
  left: auto;
  right: 0;
}

/* Split layouts with media on the right: the bottom-right frame sits under
   the floating Previous/Next buttons, so its label wraps before them. */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) and (min-height: 541px) {
  .layout-split:not(.layout-split--media-left) .media-grid > .ph:last-child .ph__badge {
    max-width: calc(100% - var(--gutter) - 7rem);
  }
}

/* ---------- The Practice (slide 02, v1.6) ---------- */

.layout-practice .heading {
  margin-bottom: 0;
}

.practice__lead {
  max-width: 54ch;
}

.capability-list--compact {
  gap: var(--space-3) var(--space-5);
}

.capability-list--compact .capability {
  align-content: start;
  padding-top: var(--space-2);
}

.capability-list--compact .capability__name {
  font-size: var(--fs-small);
  font-weight: 700;
}

.team-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
}

.team-member {
  display: grid;
  gap: 0.1rem;
  align-content: start;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
}

.team-member__name {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.team-member__role {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

.team-member__qual {
  color: var(--color-ink-soft);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-snug);
}

/* ---------- How We Work (slide 03, v1.6) ---------- */

.process__intro {
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 52ch;
}

/* Our Studios (v1.8): the diagram spans the full content width, as on
   arch21studios.com; the lead and note keep their reading widths. */
#ecosystem .layout-split--text-only > .slide__text {
  max-width: none;
}