/* Portfolio narrative refresh.
 * Intentionally layered on top of the original Hallmark theme so the visual
 * identity, canvas treatment, typography, tokens, and motion remain intact.
 */

.section-kicker {
  width: fit-content;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overlay-menu__inner {
  gap: clamp(0.45rem, 1.4vh, var(--space-sm));
}

.overlay-menu__inner a {
  font-size: clamp(2rem, 8vw, 5.7rem);
}

.hero__content--expanded {
  width: min(100%, 76rem);
  gap: clamp(3.75rem, 9vh, 6.5rem);
  transform: translateY(2.5svh);
}

.hero__positioning {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  max-width: 58rem;
}

.hero__positioning .hero__role {
  margin-block-start: 0;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__statement {
  max-width: 50rem;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  text-wrap: balance;
}

.hero__domains {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
}

.hero__domains span,
.control-state,
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.35rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-backdrop);
}

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

.scroll-cue {
  inset-block-end: clamp(2rem, 5vh, 3.5rem);
}

.work-grid--portfolio {
  align-items: stretch;
}

.work-grid--portfolio .project--featured {
  position: relative;
  overflow: hidden;
}

.work-grid--portfolio .project--featured::after {
  position: absolute;
  inset: auto -8rem -10rem auto;
  width: 24rem;
  height: 24rem;
  content: "";
  pointer-events: none;
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-accent) 28%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 3.5rem color-mix(in oklch, var(--color-accent) 4%, transparent),
    0 0 0 7rem color-mix(in oklch, var(--color-accent) 2%, transparent);
}

.project--security {
  background:
    radial-gradient(circle at 84% 16%, var(--color-card-sheen), transparent 17rem),
    linear-gradient(135deg, var(--color-card-featured-a), var(--color-card-featured-b)),
    var(--color-card);
}

.project__header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.project__lede {
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.7;
}

.status-badge {
  color: var(--color-muted);
  white-space: nowrap;
}

.status-badge--active {
  color: var(--color-accent-2);
  border-color: color-mix(in oklch, var(--color-accent-2) 42%, var(--color-rule));
  background: color-mix(in oklch, var(--color-accent-2) 7%, var(--color-backdrop));
}

.project__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-xs) 0 0;
}

.project__meta div {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.project__meta dt {
  color: var(--color-subtle);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.project__meta dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.control-states {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
}

.control-state {
  color: var(--color-subtle);
}

.control-state--complete {
  color: var(--color-ink);
  border-color: color-mix(in oklch, var(--color-accent) 44%, var(--color-rule));
}

.control-state--complete::before,
.control-state--partial::before {
  margin-inline-end: 0.42rem;
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
}

.control-state--partial {
  color: var(--color-accent-2);
}

.project__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.project__link--muted {
  color: var(--color-muted);
}

.project__highlights {
  display: grid;
  gap: 0.4rem;
  padding: 0;
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  list-style: none;
}

.project__highlights li {
  position: relative;
  padding-inline-start: 1rem;
  font-size: var(--text-sm);
}

.project__highlights li::before {
  position: absolute;
  inset-block-start: 0.68em;
  inset-inline-start: 0;
  width: 0.3rem;
  height: 0.3rem;
  content: "";
  border-radius: 50%;
  background: var(--color-accent);
}

.professional-work,
.capabilities {
  position: relative;
}

.experience-grid,
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.experience-card,
.capability-card {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  min-width: 0;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-card);
  backdrop-filter: blur(10px);
}

.experience-card h3,
.capability-card h3,
.decision-card h3,
.evidence-card h3 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 2.15rem);
  font-weight: 400;
  line-height: 1.08;
}

.experience-card > p:not(.project__eyeline),
.capability-card p,
.decision-card p,
.evidence-card p {
  color: var(--color-muted);
}

.system-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem;
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.system-flow span {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.system-flow b {
  color: var(--color-subtle);
  font-weight: 400;
}

.capability-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capability-card {
  min-height: 17rem;
}

.capability-card__index {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
}

.principles--expanded dt {
  color: var(--color-accent);
}

/* Case study ------------------------------------------------------------- */

.case-study-page .site-header {
  position: absolute;
}

.case-study-page main {
  overflow: clip;
}

.case-hero {
  position: relative;
  display: grid;
  min-height: 82svh;
  align-content: end;
  padding: clamp(8rem, 17vh, 12rem) var(--page-gutter) var(--space-3xl);
}

.case-hero::after {
  position: absolute;
  inset: 18% -8rem auto auto;
  width: clamp(18rem, 35vw, 32rem);
  height: clamp(18rem, 35vw, 32rem);
  content: "";
  pointer-events: none;
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-accent) 26%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem color-mix(in oklch, var(--color-accent) 4%, transparent),
    0 0 0 8rem color-mix(in oklch, var(--color-accent) 2%, transparent);
}

.case-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-lg);
  width: min(100%, 76rem);
}

.case-breadcrumb {
  width: fit-content;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.case-breadcrumb:hover {
  color: var(--color-accent);
}

.case-hero h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.92;
  overflow-wrap: normal;
}

.case-hero__lede {
  max-width: 55rem;
  color: var(--color-muted);
  font-size: clamp(1.08rem, 2vw, 1.45rem);
  line-height: 1.6;
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  width: min(100%, 65rem);
  margin: 0;
}

.case-meta div {
  display: grid;
  gap: 0.35rem;
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.case-meta dt {
  color: var(--color-subtle);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.case-meta dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.case-disclaimer {
  max-width: 66rem;
  padding: var(--space-md);
  color: var(--color-muted);
  border-inline-start: 2px solid var(--color-accent-2);
  background: color-mix(in oklch, var(--color-accent-2) 5%, var(--color-card));
}

.case-section {
  padding: var(--space-3xl) var(--page-gutter);
}

.case-section__head {
  display: grid;
  gap: var(--space-md);
  max-width: 62rem;
  margin-block-end: var(--space-2xl);
}

.case-section__head h2 {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 400;
  line-height: 1.02;
}

.case-section__head p:not(.section-kicker) {
  max-width: 64ch;
  color: var(--color-muted);
}

.challenge-grid,
.decision-grid,
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.challenge-card,
.decision-card,
.evidence-card {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  min-height: 14rem;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-card);
}

.challenge-card__number,
.decision-card__number {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
}

.challenge-card h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.challenge-card p {
  color: var(--color-muted);
}

.architecture-board {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background:
    radial-gradient(circle at 88% 16%, var(--color-card-sheen), transparent 18rem),
    var(--color-card);
}

.architecture-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 2fr;
  gap: var(--space-sm);
  align-items: stretch;
}

.architecture-node {
  display: grid;
  align-content: center;
  gap: 0.25rem;
  min-height: 6.2rem;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-backdrop);
}

.architecture-node strong {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.architecture-node span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.architecture-node--accent {
  border-color: color-mix(in oklch, var(--color-accent) 48%, var(--color-rule));
}

.architecture-node--country {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  align-content: stretch;
}

.architecture-node--country > div {
  display: grid;
  align-content: center;
  gap: 0.25rem;
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
}

.architecture-caption {
  color: var(--color-subtle);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  line-height: 1.6;
}

.maturity-table {
  display: grid;
  gap: var(--space-xs);
}

.maturity-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.2fr) minmax(8rem, 0.7fr) minmax(10rem, 1fr);
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.maturity-row:first-child {
  border-block-start: 0;
}

.maturity-row strong {
  font-size: var(--text-sm);
}

.maturity-row > span:not(.control-state) {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.evidence-card__state {
  width: fit-content;
  color: var(--color-accent-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.boundary-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: var(--space-xl);
  padding: var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-card);
}

.boundary-panel h3 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 400;
}

.boundary-panel p,
.boundary-panel li {
  color: var(--color-muted);
}

.boundary-panel ul {
  display: grid;
  gap: var(--space-xs);
  padding-inline-start: 1.2rem;
  margin: 0;
}

.case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.case-actions a {
  width: fit-content;
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
}

.case-actions a:hover {
  color: var(--color-accent);
}

@media (min-width: 60rem) {
  .work-grid--portfolio {
    grid-template-columns: 1.25fr 0.75fr;
  }

  .work-grid--portfolio .project--featured {
    grid-row: span 2;
  }
}

@media (max-width: 74rem) {
  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .experience-grid,
  .challenge-grid,
  .decision-grid,
  .evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .hero__content--expanded {
    gap: 3.4rem;
    transform: translateY(1svh);
  }

  .hero__statement {
    max-width: 36rem;
  }

  .project__meta,
  .case-meta,
  .architecture-row,
  .boundary-panel {
    grid-template-columns: 1fr;
  }

  .architecture-node--country {
    grid-template-columns: 1fr;
  }

  .maturity-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}

@media (max-width: 39.99rem) {
  .hero {
    min-height: 100svh;
    padding-block: 7.5rem 6rem;
  }

  .hero__content--expanded {
    transform: none;
  }

  .hero__statement {
    font-size: 0.96rem;
  }

  .hero__domains span {
    font-size: 0.61rem;
  }

  .experience-grid,
  .capability-grid,
  .challenge-grid,
  .decision-grid,
  .evidence-grid {
    grid-template-columns: 1fr;
  }

  .experience-card,
  .capability-card,
  .challenge-card,
  .decision-card,
  .evidence-card {
    padding: var(--space-md);
  }

  .capability-card {
    min-height: 0;
  }

  .case-hero {
    min-height: 72svh;
    padding-block-end: var(--space-2xl);
  }

  .case-hero::after {
    opacity: 0.5;
  }

  .case-section {
    padding-block: var(--space-2xl);
  }

  .architecture-board,
  .boundary-panel {
    padding: var(--space-md);
  }
}

/* Editorial type refinement: keep the Cinzel identity, reduce poster-scale wrapping. */
.section__head {
  max-width: 78rem;
}

.section__head h2,
.contact h2 {
  max-width: 30ch;
  font-size: clamp(2rem, 3.1vw, 3.55rem);
  line-height: 1.06;
  text-wrap: balance;
}

.about__panel h2 {
  max-width: 22ch;
  font-size: clamp(1.95rem, 2.7vw, 3.1rem);
  line-height: 1.08;
  text-wrap: balance;
}

.section__head > p:not(.section-kicker) {
  max-width: 70ch;
}

.case-hero h1 {
  max-width: 19ch;
  font-size: clamp(2.7rem, 4.6vw, 5rem);
  line-height: 0.98;
  text-wrap: balance;
}

.case-section__head {
  max-width: 76rem;
}

.case-section__head h2 {
  max-width: 28ch;
  font-size: clamp(2rem, 3vw, 3.45rem);
  line-height: 1.06;
  text-wrap: balance;
}

@media (max-width: 52rem) {
  .section__head h2,
  .about__panel h2,
  .contact h2,
  .case-section__head h2 {
    max-width: 24ch;
    font-size: clamp(1.9rem, 7vw, 2.7rem);
  }

  .case-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.55rem, 10vw, 4rem);
  }
}