/* okno-constitution.css — OKNO Design Constitution R1, Foundation Wave A.
   SEMANTIC token layer + shared card roles C1-C7 + related-content module + hero modes + KB cover frame.
   Every raw value below is mapped from the EXISTING approved global layer (okno-global-shell / d3 /
   okno-card-system / okno-typography). No new colors, fonts, radii or shadow languages are introduced. */

:root{
  /* brand + text (mapped 1:1 to existing --ok-* values) */
  --okc-brand:#0d7c6b;            /* = --ok-teal */
  --okc-heading:#0c1e3c;          /* = --ok-navy */
  --okc-ink:#33404f;              /* = --ok-ink */
  --okc-muted:#5b6472;            /* = --ok-muted */
  --okc-line:#e7ecf3;             /* = --ok-card-line */
  --okc-surface:#fff;             /* = --ok-card-surface */
  --okc-surface-quiet:#f6f8fb;    /* = --ok-card-surface-quiet */
  --okc-accent-soft:linear-gradient(180deg,#f3faf8,#eaf4f1); /* = --ok-card-accent */
  --okc-focus:#7fd1c3;            /* = --ok-focus */
  --okc-font:'Mulish','Mulish Fallback',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --okc-radius:14px;              /* = --ok-card-radius */
  --okc-shadow-hover:0 6px 20px rgba(13,124,107,.10);
  /* canvas */
  --okc-container:1240px;
  --okc-measure:760px;
  /* spacing scale */
  --okc-s1:8px;--okc-s2:12px;--okc-s3:16px;--okc-s4:24px;--okc-s5:40px;--okc-s6:64px;
  --okc-sec-pad:56px;
  --okc-card-gap:24px;
}
@media(max-width:1000px){:root{--okc-sec-pad:40px;--okc-card-gap:18px}}
@media(max-width:640px){:root{--okc-sec-pad:30px;--okc-card-gap:14px}}

/* ---------- canvas ---------- */
.okc-container{max-width:var(--okc-container);margin:0 auto;padding:0 20px}
@media(min-width:1000px){.okc-container{padding:0 40px}}
.okc-measure{max-width:var(--okc-measure)}
.okc-sec{padding:calc(var(--okc-sec-pad)/2) 0}
.okc-sec--quiet{background:var(--okc-surface-quiet)}
.okc-sec--accent{background:var(--okc-accent-soft)}
.okc-eyebrow{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--okc-brand)}

/* ---------- hero modes ---------- */
/* H1 split photo hero: text+CTA one side, media 40-50% the other; mobile puts CTA before compact media */
.okc-hero{padding:26px 0 8px}
.okc-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.okc-hero__media img,.okc-hero__media picture img{width:100%;height:auto;display:block;border-radius:18px;box-shadow:var(--okc-shadow-hover);object-fit:cover}
.okc-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}
.okc-hero__chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:18px 0 0}
.okc-hero__chips li{font-size:13.5px;font-weight:700;color:var(--okc-heading);background:var(--okc-surface);border:1px solid var(--okc-line);border-radius:999px;padding:6px 13px}
/* H3 text-only hero uses the canvas intentionally: structured right rail instead of an empty half */
.okc-hero__grid--facts{align-items:start}
.okc-herofacts{display:flex;flex-direction:column;gap:12px}
.okc-herofacts__item{background:var(--okc-surface);border:1px solid var(--okc-line);border-radius:var(--okc-radius);padding:14px 16px}
.okc-herofacts__item b{display:block;color:var(--okc-heading);font-size:15px;margin-bottom:2px}
.okc-herofacts__item span{color:var(--okc-muted);font-size:13.5px;line-height:1.45}
@media(max-width:1000px){.okc-hero__grid,.okc-hero__grid--facts{grid-template-columns:1fr;gap:22px}.okc-hero__media{order:2}.okc-hero__media img{max-height:240px}}
@media(max-width:640px){.okc-hero__ctas .d3-btn{width:100%}}

/* ---------- card grid ---------- */
.okc-grid{display:grid;gap:var(--okc-card-gap)}
.okc-grid--3{grid-template-columns:repeat(3,1fr)}
.okc-grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.okc-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.okc-grid--3,.okc-grid--2{grid-template-columns:1fr}}

/* ---------- base card (single flat surface: no card-inside-card) ---------- */
.okc-card{display:flex;flex-direction:column;min-width:0;background:var(--okc-surface);border:1px solid var(--okc-line);
  border-radius:var(--okc-radius);overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow 150ms,transform 150ms,border-color 150ms}
a.okc-card:hover{box-shadow:var(--okc-shadow-hover);transform:translateY(-2px);border-color:var(--okc-brand)}
a.okc-card:focus-visible{outline:3px solid var(--okc-focus);outline-offset:2px}
.okc-card__media{aspect-ratio:4/3;overflow:hidden;background:var(--okc-accent-soft)}
.okc-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.okc-card__body{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 18px 18px;gap:8px}
.okc-card__kicker{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--okc-brand)}
.okc-card__title{margin:0;font-size:17px;line-height:1.3;font-weight:800;color:var(--okc-heading)}
.okc-card__desc{margin:0;font-size:14px;line-height:1.5;color:var(--okc-ink)}
.okc-card__meta{font-size:13px;color:var(--okc-muted)}
/* CTA zone pinned to the bottom -> equal CTA alignment across a row (C1 invariant) */
.okc-card__cta{margin-top:auto;padding-top:10px;font-weight:800;font-size:14px;color:var(--okc-brand);display:flex;align-items:center;gap:6px}
.okc-card__cta::after{content:"→"}

/* C2 route/scenario: compact, text-first, one flat surface */
.okc-card--route .okc-card__body{padding:14px 16px;gap:6px}
.okc-card--route .okc-card__title{font-size:15.5px}
/* C4 related: compact editorial */
.okc-card--related .okc-card__media{aspect-ratio:4/3}
.okc-card--related .okc-card__title{font-size:15.5px}
.okc-card--related .okc-card__body{padding:14px 16px}
/* C6 compact nav: deliberately dense */
.okc-card--nav .okc-card__body{padding:12px 14px;gap:4px}
.okc-card--nav .okc-card__title{font-size:14.5px}

/* ---------- singleton / featured composition (C1 invariant: no orphan third-width card) ---------- */
.okc-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0;background:var(--okc-surface);
  border:1px solid var(--okc-line);border-radius:var(--okc-radius);overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow 150ms,transform 150ms,border-color 150ms}
a.okc-feature:hover{box-shadow:var(--okc-shadow-hover);transform:translateY(-2px);border-color:var(--okc-brand)}
a.okc-feature:focus-visible{outline:3px solid var(--okc-focus);outline-offset:2px}
.okc-feature__body{padding:24px 28px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.okc-feature__media{min-height:200px;background:var(--okc-accent-soft)}
.okc-feature__media img{width:100%;height:100%;object-fit:cover;display:block}
.okc-feature--nomedia{grid-template-columns:1fr}
@media(max-width:800px){.okc-feature{grid-template-columns:1fr}.okc-feature__media{order:-1;min-height:150px;max-height:200px}}

/* ---------- related-content editorial module (sitewide) ---------- */
.okc-related{padding:calc(var(--okc-sec-pad)/2) 0}
.okc-related__head{margin:0 0 18px;font-size:22px;line-height:1.25;font-weight:800;color:var(--okc-heading)}

/* ---------- KB editorial cover frame (C3): real media OR intentional abstract; title always HTML ---------- */
.okc-cover{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--okc-accent-soft)}
.okc-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* NOT_APPROVED_FOR_WAVE_B (R1.2): the abstract arc is frozen — kept only for rollback safety; no builder may emit it */
.okc-cover--abstract::before{content:"";position:absolute;inset:auto -20% -55% -20%;height:110%;
  background:var(--okc-surface);border-radius:50% 50% 0 0;border-top:1px solid var(--okc-line)}
.okc-cover--abstract::after{content:"";position:absolute;left:18px;top:18px;width:34px;height:4px;border-radius:2px;background:var(--okc-brand)}
.okc-cover__topic{position:absolute;right:12px;top:12px;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--okc-brand);background:var(--okc-surface);border:1px solid var(--okc-line);
  border-radius:999px;padding:4px 10px}

/* ---------- sticky section nav (shared contract; visual match to the approved long-page pattern) ---------- */
.okc-secnav{position:sticky;top:0;z-index:40;background:var(--okc-surface);border-bottom:1px solid var(--okc-line)}
.okc-secnav__in{max-width:var(--okc-container);margin:0 auto;padding:0 20px;display:flex;gap:4px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.okc-secnav__in::-webkit-scrollbar{display:none}
.okc-secnav__in a{flex:0 0 auto;padding:12px 12px;font-size:13.5px;font-weight:700;color:var(--okc-muted);
  text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.okc-secnav__in a:hover,.okc-secnav__in a.on{color:var(--okc-brand);border-bottom-color:var(--okc-brand)}
.okc-secnav__in a:focus-visible{outline:3px solid var(--okc-focus);outline-offset:-3px}

/* ---------- final CTA panel (full-width, accent surface) ---------- */
.okc-final{padding:calc(var(--okc-sec-pad)/2) 0 var(--okc-sec-pad)}
.okc-final__panel{background:var(--okc-accent-soft);border:1px solid var(--okc-line);border-radius:18px;padding:34px 38px}
.okc-final__panel h2{margin:0 0 10px;color:var(--okc-heading)}
.okc-final__panel p{max-width:70ch}
@media(max-width:640px){.okc-final__panel{padding:22px 18px}}

/* ---------- process / steps (restrained, existing d3-eor look-alike via tokens) ---------- */
.okc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--okc-card-gap)}
@media(max-width:1000px){.okc-steps{grid-template-columns:1fr}}
.okc-step{background:var(--okc-surface);border:1px solid var(--okc-line);border-radius:var(--okc-radius);padding:16px 18px}
.okc-step__n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--okc-brand);color:#fff;font-weight:800;font-size:14px;margin-bottom:8px}
.okc-step b{display:block;color:var(--okc-heading);margin-bottom:4px}
.okc-step p{margin:0;font-size:14px;line-height:1.5;color:var(--okc-ink)}

/* editorial measure inside sections */
.okc-prose{max-width:var(--okc-measure)}
.okc-prose p{line-height:1.6}