/* Culture Engineering — composition: a networked hero, a definition set as four verbs,
   an instrument-like interactive model, then method, ethics and practice. Prefix: .ce- */

/* Hero */
.ce-hero { min-height: min(88vh, 860px); display: flex; flex-direction: column; justify-content: flex-end; }
.ce-hero__field { position: absolute; inset: 0 0 0 38%; z-index: -1; -webkit-mask-image: linear-gradient(to right, transparent, #000 35%); mask-image: linear-gradient(to right, transparent, #000 35%); opacity: .9; }
.ce-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-6); align-items: end; }
.ce-hero__grid > * { min-width: 0; }
.ce-hero__title { grid-column: 1 / span 8; }
.ce-hero__title .display { max-width: 15ch; }
.ce-hero__title .lead { color: var(--fog); }
.ce-hero__aside { grid-column: 10 / span 3; display: grid; gap: .9rem; justify-items: start; padding-top: 1.25rem; border-top: 1px solid var(--line-on-dark-strong); }
.ce-disciplines { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; width: 100%; }
.ce-disciplines li { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.35; border-bottom: 1px solid var(--line-on-dark); padding-block: .2rem; }
@media (max-width: 960px) { .ce-hero__field { inset: 0; opacity: .5; -webkit-mask-image: none; mask-image: none; } .ce-hero__title, .ce-hero__aside { grid-column: 1 / -1; } }

/* Definition: four verbs */
.ce-verbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.ce-verbs li { display: grid; align-content: start; gap: .8rem; padding: 1.4rem 1.5rem 2rem 0; }
.ce-verbs li + li { padding-left: 1.5rem; border-left: 1px solid var(--line-on-light); }
.ce-verbs .mono { color: var(--gold-ink); }
.ce-verbs__word { font-family: var(--font-serif); font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem); line-height: .95; letter-spacing: -.02em; }
.ce-verbs li p:last-child { color: var(--slate); font-size: var(--fs-small); max-width: 32ch; }
.ce-define__not { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--col-gap); margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--line-on-light); font-family: var(--font-serif); font-size: clamp(1.35rem, 1.1rem + .9vw, 2rem); line-height: 1.2; }
.ce-define__not .mono { font-family: var(--font-mono); font-size: var(--fs-xs); padding-top: .5rem; }
@media (max-width: 960px) { .ce-verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ce-verbs li:nth-child(3) { padding-left: 0; border-left: 0; } .ce-verbs li:nth-child(n+3) { border-top: 1px solid var(--line-on-light); } }
@media (max-width: 560px) { .ce-verbs { grid-template-columns: 1fr; } .ce-verbs li, .ce-verbs li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-on-light); } .ce-verbs li:first-child { border-top: 0; } .ce-define__not { grid-template-columns: 1fr; } }

/* Why */
.ce-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap) clamp(1.5rem, 4vw, 4rem); }
.ce-stats .stat { padding-top: 1.25rem; border-top: 1px solid var(--line-on-light-strong); }
.ce-stats .stat__value small { font-size: .38em; letter-spacing: 0; color: var(--slate); }
.ce-gaps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap) clamp(2rem, 6vw, 6rem); margin-top: clamp(4rem, 7vw, 6.5rem); align-items: start; }
.ce-gaps__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-on-light-strong); }
.ce-gaps__list li { display: grid; grid-template-columns: minmax(0, 4fr) 3rem minmax(0, 6fr); align-items: center; gap: 1rem; padding-block: 1.15rem; border-bottom: 1px solid var(--line-on-light); }
.ce-gap__has { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); line-height: 1.1; }
.ce-gap__arrow { height: 1px; background: var(--gold-deep); position: relative; }
.ce-gap__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-right: 1px solid var(--gold-deep); border-top: 1px solid var(--gold-deep); transform: rotate(45deg); }
.ce-gap__lacks { color: var(--slate); font-style: italic; }
@media (max-width: 900px) { .ce-stats, .ce-gaps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ce-gaps__list li { grid-template-columns: 1fr; gap: .35rem; } .ce-gap__arrow { display: none; } }

/* Model */
.ce-lenses .tabs__list { border-color: var(--line-on-dark); }
.ce-lenses .tabs__tab { color: var(--ivory); }
.ce-lenses .tabs__tab::after { background: var(--gold); }
.ce-rel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ce-graph { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; margin-inline: auto; }
.ce-graph__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ce-rings circle { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .28; }
.ce-rings circle:last-child { opacity: .5; }
.ce-spokes line { stroke: var(--line-on-dark-strong); stroke-width: 1; stroke-dasharray: 2 5; transition: stroke var(--dur-2), opacity var(--dur-2); }
.ce-edges path { fill: none; stroke: rgba(246,241,231,.28); stroke-width: 1.2; transition: stroke var(--dur-2), stroke-width var(--dur-2), opacity var(--dur-2); }
.ce-dots circle { fill: var(--navy-900); stroke: var(--gold); stroke-width: 1.5; }
.ce-dots .ce-origin { fill: var(--gold); stroke: none; }
.ce-graph.has-focus .ce-edges path, .ce-graph.has-focus .ce-spokes line { opacity: .22; }
.ce-graph .ce-edges path.is-on { stroke: var(--gold-soft); stroke-width: 2; opacity: 1; stroke-dasharray: 6 6; animation: ce-flow 1.4s linear infinite; }
.ce-graph .ce-spokes line.is-on { stroke: var(--gold); opacity: 1; stroke-dasharray: 3 4; }
@keyframes ce-flow { to { stroke-dashoffset: -24; } }
.ce-graph__nodes { position: absolute; inset: 0; }
.ce-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  min-height: 44px; padding: .55rem 1rem; border: 1px solid var(--line-on-dark-strong); border-radius: 999px;
  background: var(--navy-900); color: var(--ivory); font-size: .9rem; font-weight: 650; white-space: nowrap;
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
}
.ce-node:hover { border-color: var(--gold); }
.ce-node[aria-pressed="true"] { background: var(--gold); color: var(--navy-950); border-color: var(--gold); box-shadow: 0 0 0 6px rgba(194,162,122,.18); }
.ce-node.is-linked { border-color: var(--gold-soft); color: var(--gold-soft); }
.ce-node--centre { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; padding: .6rem 1.15rem; background: var(--navy-950); }
.ce-detail { display: grid; gap: 1rem; align-content: start; }
.ce-detail__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ivory); }
.ce-detail__rows { margin: .5rem 0 0; border-top: 1px solid var(--line-on-dark-strong); }
.ce-detail__rows > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 1rem; padding-block: .9rem; border-bottom: 1px solid var(--line-on-dark); }
.ce-detail__rows dt { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); display: grid; gap: .4rem; align-content: start; justify-items: start; }
.ce-detail__rows dd { margin: 0; color: var(--fog); font-size: var(--fs-small); }
.ce-detail.is-changing > * { animation: ce-swap var(--dur-3) var(--ease-out) both; }
@keyframes ce-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ce-text-equivalent { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-on-dark); padding-top: 1rem; color: var(--fog); font-size: var(--fs-small); }
.ce-text-equivalent summary { cursor: pointer; font-weight: 650; color: var(--ivory); width: max-content; max-width: 100%; }
.ce-text-equivalent ol { margin: 1rem 0 0; padding-left: 1.25rem; display: grid; gap: .4rem; max-width: 80ch; }
.ce-text-equivalent strong { color: var(--ivory); }
@media (max-width: 960px) { .ce-rel { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ce-node { font-size: .75rem; padding: .45rem .7rem; min-height: 40px; } .ce-node--centre { font-size: .95rem; } .ce-detail__rows > div { grid-template-columns: 1fr; gap: .35rem; } }

/* MLP */
.ce-mlp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ce-mlp__stack { display: grid; gap: .25rem; }
.ce-level { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; text-align: left; padding: 1.4rem 1.5rem; border: 1px solid var(--line-on-dark-strong); background: rgba(246,241,231,.03); color: var(--ivory); transition: background-color var(--dur-2), border-color var(--dur-2); }
.ce-level:hover { border-color: var(--gold); }
.ce-level[aria-pressed="true"] { background: rgba(194,162,122,.13); border-color: var(--gold); }
.ce-level__name { font-family: var(--font-serif); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); line-height: 1; }
.ce-level__sub { align-self: center; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); text-align: right; }
.ce-level__chips { grid-column: 1 / -1; color: var(--fog); font-size: var(--fs-small); }
.ce-level[data-level="landscape"] { margin-inline: 0; }
.ce-level[data-level="regime"] { margin-inline: clamp(0rem, 3vw, 2.5rem); }
.ce-level[data-level="niches"] { margin-inline: clamp(0rem, 6vw, 5rem); }
.ce-flow { display: flex; gap: .6rem; align-items: center; justify-content: center; padding: .5rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .04em; color: var(--mist); }
.ce-flow span { color: var(--gold); font-size: 1rem; }
.ce-roles { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line-on-dark); }
.ce-roles__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ce-roles__list span { padding: .35rem .8rem; border: 1px solid var(--line-on-dark-strong); border-radius: 999px; font-size: .85rem; font-weight: 600; }
@media (max-width: 960px) { .ce-mlp { grid-template-columns: 1fr; } .ce-level[data-level] { margin-inline: 0; } }

/* Levers */
.ce-lever-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ce-lever { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: var(--col-gap); align-items: baseline; padding-block: clamp(1.25rem, 2.4vw, 2rem); border-bottom: 1px solid var(--line-on-light); transition: background-color var(--dur-2); }
.ce-lever:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--ivory) 80%, transparent), transparent); }
.ce-lever__name { font-family: var(--font-serif); font-size: clamp(2.2rem, 1.5rem + 2.6vw, 4.2rem); line-height: .95; letter-spacing: -.02em; }
.ce-lever__what { color: var(--slate); max-width: 52ch; }
.ce-lever__acts { font-size: var(--fs-xs); font-weight: 600; display: grid; gap: .2rem; }
.ce-lever__acts .mono { font-weight: 400; color: var(--gold-ink); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 860px) { .ce-lever { grid-template-columns: 1fr; gap: .5rem; } }

/* Method rail */
.ce-rail__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-bottom: 0; position: relative; }
.ce-rail__list::before { content: ""; position: absolute; left: 0; right: 0; top: 1.15rem; height: 1px; background: var(--line-on-light-strong); }
.ce-rail .tabs__tab { display: grid; justify-items: start; gap: .55rem; padding: 0 1rem 1rem 0; text-align: left; font-family: var(--font-serif); font-size: clamp(1.15rem, .95rem + .7vw, 1.6rem); font-weight: 400; color: var(--slate); opacity: 1; } /* QA: was opacity .55 (3.8:1 text, 2.5:1 index) */
.ce-rail .tabs__tab .mono { position: relative; z-index: 1; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--ivory); border: 1px solid var(--line-on-light-strong); font-size: .72rem; color: var(--slate); transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.ce-rail .tabs__tab::after { left: 0; right: 1rem; bottom: 0; }
.ce-rail .tabs__tab[aria-selected="true"] { color: var(--ink); }
.ce-rail .tabs__tab[aria-selected="true"] .mono { background: var(--navy-900); border-color: var(--navy-900); color: var(--gold-soft); }
.ce-stage { padding-top: clamp(2rem, 4vw, 3rem); }
.ce-stage__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: baseline; }
.ce-stage__big { font-family: var(--font-serif); font-size: clamp(3rem, 1.8rem + 5vw, 7rem); line-height: .9; letter-spacing: -.03em; color: var(--ink); }
.ce-stage__head .lead { max-width: 52ch; }
.ce-stage__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; }
.ce-stage__grid > div { padding-top: 1rem; border-top: 1px solid var(--line-on-light-strong); }
.ce-stage__grid dt { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.ce-stage__grid dd { margin: .5rem 0 0; font-size: var(--fs-small); color: var(--charcoal); }
.ce-stage__grid > div:last-child { border-top-color: var(--gold-deep); }
.ce-logic { margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.25rem 0 0; border-top: 1px solid var(--line-on-light); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--col-gap); color: var(--slate); font-size: var(--fs-small); }
@media (max-width: 960px) {
  .ce-rail__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
  .ce-rail__list::before { display: none; }
  .ce-stage__head, .ce-stage__grid, .ce-logic { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .ce-rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ethics */
.ce-ethics { overflow: hidden; }
.ce-ethics__burst { position: absolute; right: -8vw; top: -6vw; width: min(52vw, 640px); aspect-ratio: 1; z-index: -1; opacity: .4; }
.ce-ethics .statement { max-width: 26ch; font-size: clamp(2rem, 1.25rem + 2.8vw, 3.75rem); }
.ce-ethics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap) clamp(1.5rem, 4vw, 4rem); margin-top: clamp(3rem, 6vw, 5rem); }
.ce-ethics__grid > div { padding-top: 1.25rem; border-top: 1px solid var(--line-on-dark-strong); }
.ce-ethics .link-arrow { color: var(--gold-soft); }
.ce-redlines { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ce-redlines li { position: relative; padding-left: 1.4rem; color: var(--fog); font-size: var(--fs-small); }
.ce-redlines li::before { content: ""; position: absolute; left: 0; top: .65em; width: .8rem; height: 1px; background: var(--gold); }
.ce-redlines li::after { content: ""; position: absolute; left: .32rem; top: calc(.65em - .3rem); width: 1px; height: .6rem; background: var(--gold); transform: rotate(45deg); }
@media (max-width: 900px) { .ce-ethics__grid { grid-template-columns: 1fr; } }

/* Research themes & outputs */
.ce-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap) clamp(2rem, 7vw, 8rem); }
.ce-themes { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line-on-light-strong); counter-reset: th; }
.ce-themes li { counter-increment: th; display: grid; grid-template-columns: 2.5rem 1fr; padding-block: .85rem; border-bottom: 1px solid var(--line-on-light); font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.2; }
.ce-themes li::before { content: counter(th, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--gold-ink); padding-top: .4rem; }
.ce-outputs { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ce-outputs li { padding: .55rem .95rem; border: 1px dashed var(--line-on-light-strong); font-size: .9rem; font-weight: 600; color: var(--charcoal); }
.ce-outputs__note { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.25rem; }
@media (max-width: 860px) { .ce-split { grid-template-columns: 1fr; gap: 3.5rem; } }

/* Learning */
.ce-courses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-on-light); border: 1px solid var(--line-on-light); }
.ce-course { display: grid; align-content: start; gap: .7rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); background: var(--paper); }
.ce-course__code { font-family: var(--font-serif); font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); line-height: 1; letter-spacing: -.02em; }
.ce-course p:nth-child(3) { color: var(--slate); font-size: var(--fs-small); }
.ce-course__apply { margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--line-on-light); display: grid; gap: .25rem; font-weight: 600; font-size: var(--fs-small); }
.ce-course__apply .mono { font-weight: 400; color: var(--gold-ink); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; }
.ce-progress { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1rem; }
.ce-progress__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.ce-progress__list li { position: relative; display: flex; align-items: center; font-family: var(--font-serif); font-size: clamp(1.25rem, 1rem + .9vw, 1.85rem); }
.ce-progress__list li + li::before { content: ""; width: clamp(1.25rem, 3vw, 3rem); height: 1px; margin: 0 .75rem; background: var(--gold-deep); }
.ce-progress__list li:last-child { font-style: italic; color: var(--gold-ink); }
.ce-progress .small { max-width: 70ch; }
@media (max-width: 860px) { .ce-courses { grid-template-columns: 1fr; } }

/* Applications */
.ce-apply__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.ce-apply__item { display: grid; grid-template-rows: auto auto 1fr auto; gap: .8rem; padding-top: 1.25rem; border-top: 1px solid var(--ink); text-decoration: none; }
.ce-apply__item .mono { color: var(--gold-ink); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; }
.ce-apply__item .link-arrow { color: var(--gold-ink); }
.ce-apply__item:hover .h3 { color: var(--gold-ink); }
@media (max-width: 1060px) { .ce-apply__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }
@media (max-width: 560px) { .ce-apply__grid { grid-template-columns: 1fr; } }