/* Case-study layout (scripts/case-layouts.mjs, assets/motion.js).
   Opening photo, summary band, key figures, sticky section bar, centered
   reading column, pinned photo with step cards, next-project ending. */

.cx h2{font-weight:400}

/* Opening: full-bleed photo, centered title, gentle drift on scroll and pointer */
.cx-hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;overflow:hidden;background:var(--green);color:#fff}
.cx-hero-img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transform:translate3d(var(--px,0),calc(var(--py,0px) + var(--sy,0px)),0) scale(1.02);will-change:transform}
.cx-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,37,50,.25) 0%,rgba(16,37,50,.35) 40%,rgba(12,28,38,.88) 100%)}
.cx-hero-inner{position:relative;width:100%;padding-top:120px;padding-bottom:90px;text-align:center;opacity:var(--fade,1)}
.cx-hero-inner .breadcrumbs{display:flex;justify-content:center}
.cx-hero-inner .breadcrumbs,.cx-hero-inner .breadcrumbs a,.cx-hero-inner .breadcrumbs span{color:rgba(255,255,255,.8)}
.cx-hero .eyebrow{color:var(--clay);margin-top:26px}
.cx-hero h1{font-size:clamp(46px,6.4vw,96px);line-height:.98;letter-spacing:-.02em;margin:16px auto 22px;max-width:15ch;color:#fff;font-weight:400}
.cx-hero-lede{max-width:640px;margin:0 auto;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:rgba(255,255,255,.88)}
.cx-hero-action{margin-top:32px}
.cx-hero-credit{position:absolute;right:5.5%;bottom:18px;margin:0;font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.6)}

/* Summary band */
.cx-summary{background:var(--green);color:#fff;padding:78px 0}
.cx-summary p{max-width:980px;margin:0 auto;text-align:center;font:400 clamp(24px,2.6vw,36px)/1.35 var(--serif)}

/* Key figures */
.cx-facts{padding:70px 0 40px}
.cx-facts ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);max-width:1100px}
.cx-facts li{padding:6px 34px;text-align:center;border-left:1px solid var(--line)}
.cx-facts li:first-child{border-left:0}
.cx-fact-num{display:block;font:400 clamp(56px,6vw,88px)/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.cx-fact-label{display:block;margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--muted)}

/* Sticky "On this page" bar with reading progress */
.cx-onpage{position:sticky;top:var(--hdr,72px);z-index:20;background:var(--green);color:var(--paper);margin-top:50px}
.cx-onpage-inner{display:flex;align-items:center;gap:28px;min-height:52px}
.cx-onpage-label{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(246,241,231,.7);white-space:nowrap}
.cx-onpage-links{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.cx-onpage-links a{padding:8px 14px;border-radius:3px;color:rgba(246,241,231,.85);text-decoration:none;font-size:14px;white-space:nowrap;transition:background .2s ease,color .2s ease}
.cx-onpage-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.cx-onpage-links a.is-active{background:rgba(229,191,145,.18);color:#fff}
.cx-progress{height:2px;background:rgba(246,241,231,.12)}
.cx-progress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--progress,0));background:var(--clay)}

/* Centered reading column */
.cx-read{max-width:760px;margin:0 auto;padding:0 24px}
.cx-meta-wrap{padding-top:60px}
.cx-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cx-meta dt{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#3f6a72;margin-bottom:9px}
.cx-meta dd{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.cx-chapter{padding:90px 0 40px;scroll-margin-top:140px}
.cx-chapter .eyebrow{text-align:center}
.cx-chapter h2{text-align:center;font-size:clamp(34px,3.8vw,54px);line-height:1.08;margin:14px 0 34px}
.cx-chapter p:not(.eyebrow){font-size:18px;line-height:1.75;color:#3d4c55;margin:0 0 20px}
.cx-dropcap::first-letter{float:left;font:400 4.1em/.82 var(--serif);margin:.06em .1em 0 0;color:var(--gold-ink)}

/* Principle: a large centered line between rules */
.cx-principle{padding:70px 0}
.cx-principle .cx-read{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:54px;padding-bottom:54px;text-align:center}
.cx-principle-text{font:400 clamp(32px,3.8vw,52px)/1.12 var(--serif);color:var(--ink);margin:0 0 22px}
.cx-principle-note{margin:0 auto;max-width:600px;color:var(--muted);font-size:16.5px;line-height:1.7}

/* Pinned photo with step cards scrolling over it */
.cx-scrolly{position:relative;margin:60px 0 0;scroll-margin-top:110px}
.cx-scrolly-media{position:sticky;top:0;height:100vh;overflow:hidden}
.cx-scrolly-media img{width:100%;height:100%;object-fit:cover}
.cx-scrolly-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,28,38,.15),rgba(12,28,38,.55))}
.cx-scrolly-cards{position:relative;margin-top:-100vh;padding:18vh 5.5% 24vh;display:grid;justify-items:end;gap:46vh}
.cx-scrolly-intro{justify-self:start;max-width:520px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.cx-scrolly-intro .eyebrow{color:var(--clay)}
.cx-scrolly-intro h2{font-size:clamp(36px,4.4vw,64px);line-height:1.04;margin:14px 0 0}
.cx-card{width:min(420px,100%);background:var(--green);color:var(--paper);padding:34px 36px;box-shadow:0 24px 60px -24px rgba(0,0,0,.5);opacity:.35;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.cx-card.is-visible{opacity:1;transform:none}
.cx-card .eyebrow{color:var(--clay)}
.cx-card h3{font:400 30px/1.12 var(--serif);margin:12px 0 12px;color:#fff}
.cx-card p:not(.eyebrow){margin:0;color:rgba(246,241,231,.8);line-height:1.7}

/* Figures and gallery */
.cx-figure{margin:36px 0 0}
.cx-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff}
.cx-figure figcaption{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}
.cx-gallery{background:#ece4d6;padding:96px 0;margin-top:70px;scroll-margin-top:110px}
.cx-gallery .eyebrow,.cx-gallery h2{text-align:center}
.cx-gallery h2{font-size:clamp(32px,3.4vw,48px);margin:14px 0 44px}
.cx-gallery .case-shots{grid-template-columns:repeat(3,1fr);gap:28px}
.cx-gallery .case-shots img{height:210px;width:100%;background:#fff;border:1px solid var(--line);transition:transform .35s ease,box-shadow .35s ease}
.cx-gallery .case-shots figure:hover img{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(16,37,50,.5)}

/* Where it stands: a quiet footnote */
.cx-standing{padding:70px 0 0}
.cx-standing .cx-read{border-left:3px solid var(--rust);padding-left:24px;margin-left:max(24px,calc(50% - 380px))}
.cx-standing p:not(.eyebrow){margin:10px 0 0;color:var(--muted);line-height:1.7}

/* Next project */
.cx-next{padding:80px 0 110px}
.cx-next-card{display:block;background:var(--green);color:var(--paper);padding:46px 52px;text-decoration:none;transition:background .25s ease}
.cx-next-card:hover,.cx-next-card:focus-visible{background:#163a4e}
.cx-next-card .eyebrow{color:var(--clay)}
.cx-next-title{display:block;font:400 clamp(30px,3.6vw,52px)/1.05 var(--serif);margin:14px 0 10px;color:#fff}
.cx-next-title span{display:inline-block;transition:transform .25s ease;color:var(--clay)}
.cx-next-card:hover .cx-next-title span{transform:translateX(8px)}
.cx-next-sub{display:block;max-width:640px;color:rgba(246,241,231,.75)}
.cx-next-contact{margin:26px 0 0;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.cx-all{color:var(--muted)}

/* Reveal on scroll (only when motion.js has run, so content never stays hidden) */
.cx-js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.cx-js [data-reveal].is-visible{opacity:1;transform:none}

@media(max-width:900px){
  .cx-facts ul{grid-template-columns:1fr;gap:34px}
  .cx-facts li{border-left:0;border-top:1px solid var(--line);padding-top:30px}
  .cx-facts li:first-child{border-top:0;padding-top:0}
  .cx-meta{grid-template-columns:1fr;gap:16px}
  .cx-gallery .case-shots{grid-template-columns:1fr 1fr}
  .cx-onpage-label{display:none}
}
@media(max-width:620px){
  .cx-hero{min-height:78vh}
  .cx-hero-inner{padding-bottom:60px}
  .cx-summary{padding:56px 0}
  .cx-chapter{padding:64px 0 24px}
  .cx-scrolly-cards{padding:14vh 20px 20vh;gap:40vh;justify-items:center}
  .cx-card{padding:26px 24px}
  .cx-gallery .case-shots{grid-template-columns:1fr}
  .cx-next-card{padding:32px 26px}
}
@media(prefers-reduced-motion:reduce){
  .cx-hero-img{transform:none}
  .cx-js [data-reveal],.cx-card{opacity:1;transform:none;transition:none}
  .cx-next-card,.cx-next-title span,.cx-gallery .case-shots img{transition:none}
}

/* Dated development notes under a plain status summary */
.cx-notes-title{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#3f6a72;margin:34px 0 12px;padding-top:22px;border-top:1px solid var(--line)}

/* Miradi: plan → extracted items → project */
.cx-convert{background:#ece4d6;padding:96px 0}
.cx-convert h2{font-size:clamp(32px,3.6vw,50px);margin:14px 0 48px;max-width:760px}
.cx-convert-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:46px;position:relative}
.cx-convert-flow>li{position:relative}
.cx-convert-flow>li:not(:last-child)::after{content:"→";position:absolute;right:-34px;top:50%;font:400 28px/1 var(--serif);color:var(--gold-ink)}
.cx-convert-step{display:block;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px}
.cx-doc{background:#fff;border:1px solid var(--line);padding:22px 22px 18px;display:grid;gap:9px;min-height:220px}
.cx-doc strong{font:400 19px/1.2 var(--serif);color:var(--ink);margin-bottom:6px}
.cx-doc-line{display:block;height:8px;border-radius:2px;background:#e7e1d5}
.cx-doc-line:nth-of-type(3){width:82%}
.cx-doc-hl{height:auto;background:none;font-size:14px;line-height:1.5;color:var(--muted)}
.cx-doc-hl em{font-style:normal;background:#e5bf91;color:var(--ink);padding:1px 4px;border-radius:2px}
.cx-chips{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cx-chips li{background:#fff;border:1px solid var(--line);border-left:3px solid var(--rust);padding:12px 16px;font-size:15px;color:var(--ink)}
.cx-chips b{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#3f6a72;margin-bottom:6px}
.cx-convert-note{margin:14px 0 0;font-size:14px;color:var(--muted)}
.cx-tree{display:grid;justify-items:start;gap:6px;background:var(--green);padding:24px;min-height:220px;align-content:center}
.cx-node{display:inline-block;padding:10px 14px;font-size:14.5px;border-radius:3px;color:var(--ink)}
.cx-node--strategy{background:#e5bf91}
.cx-node--threat{background:#e5bf91}
.cx-node--target{background:#cfe0d6}
.cx-edge{font:italic 400 13px/1 var(--serif);color:rgba(246,241,231,.7);padding-left:18px}
.cx-convert-caption{margin:30px 0 0;font-size:12.5px;color:var(--muted)}
@media(max-width:900px){
  .cx-convert-flow{grid-template-columns:1fr;gap:56px}
  .cx-convert-flow>li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-42px}
  .cx-convert{padding:70px 0}
}

/* Rust feature bands (OEC summary, Digest principle): depth, contour lines, brand mark */
.cx-feature{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(120% 140% at 0% 0%,#1f4256 0%,#102b3a 45%,#0a1d28 100%);color:#fff}
.cx-contours{position:absolute;z-index:-1;right:-14%;top:50%;width:min(980px,90vw);aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 22px,rgba(255,255,255,.09) 22px 23.5px);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);
  transform:translate3d(var(--drift-x,0px),calc(-50% + var(--drift-y,0px)),0) rotate(var(--drift-r,0deg));transition:transform .2s linear}
.cx-feature::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(60,20,6,.18));pointer-events:none}
.cx-ridge{display:block;width:120px;height:25px;margin-top:16px;background:#e5bf91;
  -webkit-mask:url(/assets/brand/data-angler-mark-rust.svg) left center/contain no-repeat;mask:url(/assets/brand/data-angler-mark-rust.svg) left center/contain no-repeat;opacity:.9}
.cx-feature .eyebrow{color:#e5bf91;margin:0}

.cx-summary.cx-feature{padding:104px 0}
.cx-feature-grid{display:grid;grid-template-columns:220px 1fr;gap:8%;align-items:start}
.cx-summary.cx-feature .cx-feature-text{max-width:900px;margin:0;text-align:left;font:400 clamp(28px,3.2vw,46px)/1.25 var(--serif);letter-spacing:-.005em;color:#fff}
.cx-feature-text em{font-style:italic;color:#ffe3cf;background:linear-gradient(transparent 82%,rgba(255,227,207,.45) 82%);padding:0 2px}

.cx-principle--band.cx-feature{padding:110px 0;margin-top:70px}
.cx-principle--band.cx-feature .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end}
.cx-principle--band.cx-feature .cx-feature-label{grid-column:1/-1;margin-bottom:18px}
.cx-principle--band.cx-feature .cx-principle-text{max-width:13ch;font-size:clamp(44px,5.6vw,84px);line-height:.98}
.cx-principle--band.cx-feature .cx-principle-note{border-top:1px solid rgba(255,227,207,.45);padding-top:22px}

@media(max-width:900px){
  .cx-feature-grid,.cx-principle--band.cx-feature .wrap{grid-template-columns:1fr;gap:26px}
  .cx-summary.cx-feature,.cx-principle--band.cx-feature{padding:72px 0}
  .cx-contours{right:-40%;width:130vw}
}
@media(prefers-reduced-motion:reduce){.cx-contours{transition:none;transform:translate3d(0,-50%,0)}}
.cx-summary.cx-feature .eyebrow{font:600 11px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-align:left;margin:0;max-width:none;color:#e5bf91}

/* Miradi gallery: two photos per habitat until expanded */
.cx-guide.is-collapsed .cx-guide-grid li[data-extra]{display:none}
.cx-guide-more{text-align:center;margin:34px 0 0}
.cx-guide-more button{font:600 13px/1 var(--sans);letter-spacing:.04em;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:13px 22px;cursor:pointer;transition:background .2s ease,color .2s ease}
.cx-guide-more button:hover,.cx-guide-more button:focus-visible{background:var(--ink);color:var(--paper)}
.cx-guide .cx-guide-more button{color:var(--paper);border-color:rgba(229,191,145,.7)}
.cx-guide .cx-guide-more button:hover,.cx-guide .cx-guide-more button:focus-visible{background:var(--clay);border-color:var(--clay);color:var(--ink)}