/* ===========================================================
   Elbour — Examples one-page layout (loaded only on examples.html)
   Built on the shared Direction-3 tokens in elbour-base.css
   =========================================================== */
:root{ --eim-coral:#E8553F; --ex-paper:#FAF9F5; }

/* ---- EIM disclosure (editorial, once near the top) ---- */
.ex-disclose{background:var(--cream);border-top:1px solid var(--border-l);border-bottom:1px solid var(--border-l)}
.ex-disclose .wrap{padding:clamp(2.3rem,5vh,3.2rem) 0}
.ex-disclose .eyebrow{color:var(--eim-coral)}
.ex-disclose h2{font-size:clamp(19px,2.3vw,25px);font-weight:400;letter-spacing:-.3px;color:var(--navy);margin:0 0 .7rem}
.ex-disclose p{font-size:clamp(13.5px,1.35vw,15px);line-height:1.7;color:var(--body);font-weight:300;max-width:66ch;margin:0}

/* ---- Common-source band ---- */
.ex-source{background:var(--ex-paper)}
.ex-source .wrap{padding:clamp(3rem,7vh,4.6rem) 0}
.ex-source .eyebrow{color:var(--teal)}
.ex-source h2{font-size:clamp(22px,2.8vw,32px);font-weight:400;letter-spacing:-.5px;color:var(--navy);margin:0 0 1rem;max-width:24ch}
.ex-source p{font-size:clamp(14px,1.45vw,16.5px);line-height:1.72;color:var(--body);font-weight:300;max-width:62ch;margin:0}
.ex-source-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.ex-source-tags span{font-size:11.5px;letter-spacing:.04em;color:var(--meta-light);background:#fff;border:1px solid var(--border-l);border-radius:4px;padding:.42rem .72rem}

/* ---- Inline anchor index (understated, not tabs, not sticky) ---- */
.ex-jump{background:var(--ex-paper);border-top:1px solid var(--border-l)}
.ex-jump .wrap{padding:1.15rem 0}
.ex-jump-in{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem}
.ex-jump-lab{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta-light)}
.ex-jump a{font-size:13px;color:var(--body);text-decoration:none;padding:2px 1px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.ex-jump a:hover{color:var(--teal);border-bottom-color:var(--teal)}
.ex-jump a:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:2px}

/* ---- Scrolling example sections ---- */
.showcase{background:var(--ex-paper)}
.ex-sec{padding:clamp(3.4rem,8vh,6rem) 0;border-top:1px solid var(--border-l);scroll-margin-top:84px}
.ex-sec:nth-of-type(even){background:var(--cream)}
.ex-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);grid-template-areas:"media head" "media points";column-gap:clamp(2rem,4.5vw,4rem);row-gap:1.4rem;align-items:start}
.ex-media{grid-area:media}
.ex-head{grid-area:head}
.ex-points{grid-area:points}

/* media frame — full image always visible */
.examples-visual{background:var(--cream);border:1px solid var(--border-l);border-radius:6px;box-shadow:0 16px 40px rgba(11,19,35,.07);padding:clamp(14px,1.6vw,20px);display:flex;align-items:center;justify-content:center}
.examples-visual img{width:100%;height:auto;object-fit:contain;object-position:center;display:block;border-radius:2px}
.examples-visual.compact img{width:min(72%,560px)}

.ex-num{font-family:var(--f);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:.7rem}
.ex-format{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--eim-coral);margin-bottom:.7rem;font-weight:500}
.ex-head h3{font-size:clamp(22px,2.5vw,30px);line-height:1.12;letter-spacing:-.5px;font-weight:400;color:var(--navy);margin:0}
.ex-lead{font-size:clamp(14px,1.4vw,15.5px);line-height:1.6;color:var(--body);font-weight:300;margin:0 0 1.1rem}
.ex-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ex-list li{position:relative;padding-left:1.05rem;font-size:13.5px;line-height:1.6;color:var(--body);font-weight:300}
.ex-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--aqua)}

/* ---- Closing synthesis ---- */
.ex-close{background:var(--navy)}
.ex-close .wrap{padding:clamp(3.4rem,8vh,5.5rem) 0}
.ex-close .eyebrow{color:var(--aqua)}
.ex-close h2{font-size:clamp(24px,3.4vw,40px);font-weight:300;letter-spacing:-.7px;color:var(--cream);margin:0 0 1rem;max-width:22ch}
.ex-close p{font-size:clamp(14px,1.5vw,16.5px);line-height:1.72;color:var(--blue-grey);font-weight:300;max-width:60ch;margin:0 0 1.9rem}
.ex-seq{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem}
.ex-seq span{font-size:12.5px;letter-spacing:.02em;color:var(--cream);border:1px solid var(--border-d);border-radius:5px;padding:.5rem .8rem;background:rgba(242,239,230,.03)}
.ex-seq .ar{border:0;background:none;color:var(--copper);padding:0;font-size:15px}

/* ---- Responsive: stack head -> media -> points ---- */
@media (max-width:820px){
  .ex-grid{grid-template-columns:1fr;grid-template-areas:"head" "media" "points";row-gap:1.5rem}
  .examples-visual.compact img{width:min(86%,520px)}
}
@media (max-width:560px){
  .ex-jump-in{gap:.35rem 1rem}
  .ex-seq{gap:.45rem .55rem}
}


/* Cadence line + Elbour operating-value highlight */
.ex-cadence{margin-top:1.15rem;padding-top:.85rem;border-top:1px solid var(--border-l);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta-light)}
.ex-cadence b{color:var(--teal);font-weight:500;letter-spacing:.1em}
.ex-list li.ev{color:#1c2733;font-weight:400}