.project-detail-page main { overflow: clip; }
.project-detail-page article { width: 100%; }
.project-hero {
  position: relative;
  display: grid;
  min-height: 720px;
  align-items: end;
  padding: 136px var(--page-edge) 74px;
  background:
    radial-gradient(44% 58% at 78% 22%, rgba(92,128,88,.042), transparent 62%),
    radial-gradient(34% 40% at 16% 82%, rgba(166,255,26,.016), transparent 68%),
    var(--bg);
}
.project-hero-grid { position: relative; display: grid; width: 100%; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .7fr); gap: 56px; align-items: end; }
.project-lead { min-width: 0; }
.project-lead > .chapter-label { margin-bottom: 25px; color: var(--text-muted); }
.project-lead > .chapter-label b { color: var(--green); font-weight: 500; }
.project-hero h1 { max-width: 900px; margin: 0; font: 720 clamp(64px, 7.6vw, 118px)/.92 var(--display); font-variation-settings: "wdth" 96, "opsz" 64; letter-spacing: -.045em; overflow-wrap: normal; word-break: normal; }
.project-hero h1 span { display: block; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; }
.hero-meta span { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-secondary); font: 500 9px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-meta b { color: var(--text-muted); font-weight: 500; }
.hero-meta i { color: var(--text); font-style: normal; }
.hero-meta .status-live, .hero-meta .status-active { color: var(--green); }
.project-intro { max-width: 475px; padding-bottom: 5px; }
.hero-summary { margin: 0; color: var(--text-secondary); font-size: clamp(18px, 1.65vw, 22px); line-height: 1.48; }
.project-actions { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 30px; }
.project-action { display: inline-flex; min-height: 44px; align-items: center; gap: 13px; color: var(--green); font: 600 9px/1 var(--mono); letter-spacing: .13em; }
.project-action span:last-child { font-size: 16px; transition: transform 160ms ease; }
.project-action:hover span:last-child { transform: translate(3px,-2px); }

.article-section { padding: 58px var(--page-edge) 66px; border-bottom: 1px solid rgba(219,231,221,.09); }
.article-section:nth-child(even) { background: rgba(255,255,255,.008); }
.section-head { margin-bottom: 28px; }
.section-head .chapter-label { margin-bottom: 14px; color: var(--text-muted); }
.section-head h2 { max-width: 920px; margin: 0; font: 650 clamp(34px, 4vw, 52px)/1 var(--display); font-variation-settings: "wdth" 94, "opsz" 48; letter-spacing: -.045em; }
.copy-stack { max-width: 760px; }
.project-copy { margin: 0; color: var(--text-secondary); font-size: 17px; line-height: 1.72; }
.project-copy + .project-copy { margin-top: 18px; }
.project-copy code { color: var(--text); font: 500 .85em/1.4 var(--mono); }

.signal-section { padding-top: 50px; padding-bottom: 54px; background: var(--field-dense); }
.signal-section .section-head { margin-bottom: 23px; }
.signal-sequence { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.signal-sequence li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: start; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.signal-sequence li span { color: var(--green); font: 500 8px/1.5 var(--mono); }
.signal-sequence li strong { color: var(--text-secondary); font: 500 11px/1.5 var(--mono); overflow-wrap: anywhere; }

.workflow-section, .output-section, .system-section { background: #060906; }
.workflow-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.workflow-list li { min-width: 0; padding: 18px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--panel); }
.flow-index { color: var(--green); font: 500 9px/1.4 var(--mono); }
.workflow-list h3 { margin: 22px 0 9px; color: var(--text); font: 620 22px/1.05 var(--display); letter-spacing: -.035em; }
.workflow-list li p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.output-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: 10px; }
.output-grid > div { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.output-grid > div > span { color: var(--text); font: 500 9px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.output-grid p { margin: 8px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.output-caption, .system-caption { max-width: 760px; margin: 17px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.project-image { margin: 0; border: 1px solid var(--line-strong); background: var(--field-dense); }
.project-image img { display: block; width: 100%; height: auto; }
.project-image figcaption { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.report-table-scroll { max-width: 1100px; overflow-x: auto; border-top: 1px solid var(--line-strong); background: var(--field-dense); }
.report-table-scroll:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.report-table { width: 100%; min-width: 480px; border-collapse: collapse; text-align: left; }
.report-table th, .report-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.report-table th { color: var(--text-muted); font: 500 10px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.report-table td { color: var(--text); font-size: 13px; line-height: 1.5; }
.report-table-emphasis { color: var(--green); font-weight: 600; }
.report-table-note, .report-table-caption { max-width: 760px; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.report-table-note { margin: 0 0 17px; }
.report-table-caption { margin: 17px 0 0; }
.interactive-frame { margin: 0; border: 1px solid var(--line-strong); background: var(--field-dense); }
.interactive-frame iframe { display: block; width: 100%; height: clamp(680px, 76vw, 860px); border: 0; background: var(--field-dense); }
.interactive-caption { margin: 0; padding: 13px 16px; border-top: 1px solid var(--line); color: var(--text-muted); font: 500 9px/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; }

.topology { display: grid; gap: 16px; }
.topology-row { display: flex; align-items: stretch; gap: 10px; }
.topology-stage { display: flex; min-width: 0; min-height: 75px; flex: 1; align-items: center; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); }
.topology-stage strong { color: var(--text); font: 500 10px/1.5 var(--mono); letter-spacing: .03em; overflow-wrap: anywhere; }
.topology-connector { display: grid; flex: 0 0 auto; place-items: center; color: var(--green); font: 500 14px/1 var(--mono); }
.system-groups { display: grid; gap: 8px; max-width: 1100px; }
.system-values { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); list-style: none; }
.system-values li { color: var(--text-secondary); font: 500 10px/1.5 var(--mono); overflow-wrap: anywhere; }
.system-section-readable-rows .system-values li { font-size: 12px; line-height: 1.55; }

/* Optional article grammar: engineering choices and factual checkpoints. */
.decision-section, .verification-section { background: var(--field-dense); }
.decision-relationship { display: grid; grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); align-items: center; max-width: 1100px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.decision-path { min-width: 0; padding: 24px 0; }
.decision-path h3 { margin: 0 0 13px; color: var(--text-muted); font: 500 9px/1.5 var(--mono); letter-spacing: .12em; }
.decision-chosen h3 { color: var(--green); }
.decision-path p { margin: 0; color: var(--text); font: 600 clamp(24px, 2.8vw, 36px)/1.15 var(--display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.decision-avoided p { color: var(--text-secondary); font-weight: 500; }
.decision-connector { justify-self: center; color: var(--green); font: 500 24px/1 var(--mono); }
.decision-reason { max-width: 760px; margin-top: 24px; overflow-wrap: anywhere; }
.decision-constraint { max-width: 760px; margin: 18px 0 0; padding-left: 16px; border-left: 1px solid var(--line-strong); color: var(--text-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.verification-checkpoint { max-width: 1100px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.verification-marker { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--text-muted); font: 500 9px/1.5 var(--mono); letter-spacing: .1em; }
.verification-marker span { color: var(--green); font-size: 8px; }
.verification-readouts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
.verification-readouts > div { min-width: 0; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); }
.verification-readouts dt { color: var(--text-muted); font: 500 10px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; overflow-wrap: anywhere; }
.verification-readouts dd { margin: 9px 0 0; color: var(--text); font: 500 18px/1.45 var(--mono); overflow-wrap: anywhere; }
.verification-caption { max-width: 760px; margin: 17px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .decision-relationship { grid-template-columns: minmax(0,1fr); }
  .decision-path { padding: 20px 0; }
  .decision-connector { font-size: 0; }
  .decision-connector::after { content: "↓"; font-size: 18px; }
  .verification-readouts { grid-template-columns: minmax(0,1fr); }
  .verification-readouts > div { padding-right: 0; }
}

@media (max-width: 900px) {
  .project-hero { min-height: 0; }
  .project-hero-grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .project-hero h1 { font-size: clamp(58px, 8.5vw, 90px); }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .interactive-frame iframe[src*="bulk-email-sender"] { height: 840px; }
}
@media (max-width: 760px) {
  .project-hero { padding-top: 112px; padding-bottom: 54px; }
  .section-head h2 { line-height: 1.08; letter-spacing: -.035em; }
  .interactive-frame iframe[src*="bulk-email-sender"] { height: 1440px; }
}
@media (max-width: 680px) {
  .project-hero-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .project-lead > .chapter-label { margin-bottom: 20px; }
  .project-hero h1 { font-size: clamp(38px, 12.4vw, 64px); line-height: .94; }
  .hero-meta { gap: 10px 22px; margin-top: 21px; }
  .project-intro { max-width: 420px; }
  .hero-summary { font-size: 18px; }
  .project-actions { margin-top: 20px; }
  .article-section { padding: 44px var(--page-edge) 50px; }
  .section-head { margin-bottom: 23px; }
  .project-copy { font-size: 16px; line-height: 1.65; }
  .signal-sequence { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workflow-list, .output-grid { grid-template-columns: minmax(0,1fr); }
  .workflow-list h3 { margin-top: 14px; }
  .topology-row { flex-direction: column; gap: 7px; }
  .topology-stage { min-height: 58px; }
  .topology-connector { display: none; }
  .interactive-frame iframe { height: 760px; }
  .interactive-frame iframe[src*="bulk-email-sender"] { height: 1440px; }
  .interactive-frame iframe[src*="qpsk-visualization"] { height: 1080px; }
  .interactive-frame iframe[src*="password-generator"] { height: 1260px; }
}
@media (max-width: 680px) {
  .interactive-frame iframe[src*="bulk-email-sender"] { height: 1600px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-action span:last-child { transition: none; }
}