/* ============================================================
   DIVERSITY ON BOARD v2 — app styles
   ============================================================ */

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--t-body); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block; height:auto}
a{color:var(--sage); text-decoration:none}
button{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--sage); outline-offset:3px; border-radius:2px}
::selection{background:var(--gold); color:var(--ink)}

/* ---------- type ---------- */
.display,h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1; letter-spacing:.01em; margin:0; text-wrap:balance}
h1,.h1{font-size:var(--t-h1); text-transform:uppercase; letter-spacing:.02em; line-height:.98}
h2,.h2{font-size:var(--t-h2); text-transform:uppercase; letter-spacing:.03em; line-height:1.02}
h3,.h3{font-size:var(--t-h3); text-transform:uppercase; letter-spacing:.04em}
p{margin:0 0 1em; text-wrap:pretty}
.lede{font-size:var(--t-lede); line-height:1.45; color:var(--ink); font-weight:400; max-width:var(--measure)}
.muted{color:var(--ink-2)}
.eyebrow{
  font-family:var(--body); font-size:var(--t-eyebrow); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--sage);
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1.1rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold)}
.eyebrow--plain::before{display:none}
em,.accent{font-style:normal; color:var(--sage)}
strong{font-weight:700}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sect)}
/* band-weight scale: centerpieces breathe more, strips compress, so the page reads as an argument not a list */
.section--feature{padding-block:calc(var(--sect) * 1.45)}
.section--tight{padding-block:clamp(2.4rem,5vw,3.4rem)}
.band--paper2{background:var(--paper-2)}
.band--ink{background:var(--ink); color:var(--on-dark)}
.band--sage{background:var(--sage-deep); color:var(--on-dark)}
.band--ink .eyebrow,.band--sage .eyebrow{color:var(--gold)}
.band--ink .eyebrow::before,.band--sage .eyebrow::before{background:var(--gold)}
.band--ink a:not(.btn),.band--sage a:not(.btn){color:var(--gold)}
.band--ink .muted,.band--sage .muted{color:var(--on-dark-soft)}
/* clay: the single bold warm "wow" band per page (Studio Bruch reference) */
.band--clay{background:var(--clay-deep); color:var(--on-dark); position:relative; overflow:hidden}
.band--clay .eyebrow{color:var(--gold)}
.band--clay .eyebrow::before{background:var(--gold)}
.band--clay a:not(.btn),.band--clay .lnk{color:var(--gold)}
.band--clay .muted{color:var(--on-dark-soft)}
.band--clay .ghost{-webkit-text-stroke-color:rgba(246,244,238,.18)}
.band--clay .stat-num,.band--clay .src{color:var(--on-dark)}
.dfly-watermark{position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2.4rem); width:clamp(76px,12vw,140px); height:auto; opacity:.16; pointer-events:none; stroke:var(--on-dark); fill:none}
/* thin gold monoline divider between major sections (Mellon reference, dragonfly language) */
.divider-gold{display:block; width:min(120px,40vw); height:auto; margin:clamp(2rem,5vw,3.25rem) auto 0; opacity:.5}
.divider-gold path,.divider-gold circle{vector-effect:non-scaling-stroke}
.band--ink .divider-gold,.band--sage .divider-gold,.band--clay .divider-gold{opacity:.4}
.rule{height:0; border:0; border-top:1px solid var(--line); margin:0}

/* ghosted giant section heading (signature editorial move) */
.ghost{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:var(--t-ghost); line-height:.82; letter-spacing:.01em;
  color:transparent; -webkit-text-stroke:1px var(--line);
  margin:0 0 -.12em; pointer-events:none; user-select:none;
}
.band--ink .ghost,.band--sage .ghost{-webkit-text-stroke-color:rgba(246,244,238,.16)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--body); font-size:var(--t-small); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.95rem 1.6rem; border-radius:var(--r-pill);
  border:1.5px solid var(--ink); color:var(--ink); background:transparent;
  cursor:pointer; transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease);
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn:active{scale:.97}
.btn--solid{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.btn--solid:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:var(--ink)}
.btn--ghost-light{border-color:var(--on-dark); color:var(--on-dark)}
.btn--ghost-light:hover{background:var(--on-dark); color:var(--ink)}
.btn .arr{transition:transform var(--dur-fast) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.lnk{display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:var(--t-small); letter-spacing:.08em; text-transform:uppercase; color:var(--sage)}
.lnk .arr{transition:transform var(--dur-fast) var(--ease)}
.lnk:hover .arr{transform:translate(3px,-3px)}
.band--ink .lnk,.band--sage .lnk{color:var(--gold)}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem var(--gut);
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-soft); padding-block:.6rem}
.nav.is-hidden{transform:translateY(-110%)}
.nav__logo{display:inline-flex; align-items:center; gap:.7rem; z-index:2; transition:gap var(--dur-fast) var(--ease)}
.nav__mark{width:40px; height:40px; flex:none; transition:width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease)}
.nav__word{display:flex; flex-direction:column; font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.09em; font-size:.82rem; line-height:1.0; color:var(--ink)}
.nav.is-scrolled .nav__mark{width:33px; height:33px}
.nav.is-scrolled .nav__logo{gap:.55rem}
@media (max-width:520px){ .nav__word{font-size:.74rem} .nav__mark{width:34px; height:34px} }
.nav__links{display:flex; align-items:center; gap:1.9rem; list-style:none; margin:0; padding:0}
.nav__links a{font-size:var(--t-small); font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); position:relative; padding:.3rem 0}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav__cta{margin-left:.4rem}
.nav__burger{display:none; background:none; border:0; cursor:pointer; padding:.5rem; margin:-.5rem; z-index:2}
.nav__burger span{display:block; width:26px; height:2px; background:var(--ink); margin:6px 0; transition:transform .3s var(--ease), opacity .3s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.skip{position:fixed; top:-100px; left:1rem; z-index:var(--z-toast); background:var(--ink); color:var(--paper); padding:.6rem 1rem; border-radius:var(--r); transition:top .2s}
.skip:focus{top:1rem}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:grid; align-content:center; padding:clamp(7rem,16vh,10rem) var(--gut) clamp(3rem,8vh,5rem); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1rem,4vw,3rem); align-items:center; max-width:var(--maxw); margin-inline:auto; width:100%}
.hero__title{font-size:var(--t-h1); max-width:15ch; line-height:1.0}
.hero__title .ln{display:block}
.hero__title .ln > span{display:block; will-change:transform, opacity}
.hero__lede{margin-top:1.6rem; max-width:46ch; font-size:var(--t-lede); color:var(--ink); line-height:1.45}
.hero__ctas{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2.2rem}
.hero__art{position:relative; aspect-ratio:1/1; display:grid; place-items:center}
.hero__art img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 30px 50px rgba(26,25,22,.12))}
.hero__art .placeholder{width:80%; aspect-ratio:1; border:1px dashed var(--line); border-radius:50%; display:grid; place-items:center; color:var(--ink-2); font-size:var(--t-small); text-align:center; padding:2rem}
.hero__scroll{position:absolute; bottom:1.6rem; right:var(--gut); display:flex; align-items:center; gap:.6rem; font-size:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.hero__scroll i{display:block; width:1.5px; height:38px; background:var(--line); position:relative; overflow:hidden}
.hero__scroll i::after{content:""; position:absolute; inset:0; background:var(--gold); animation:scrollhint 2.2s var(--ease) infinite}
@keyframes scrollhint{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
.constellation{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5}

/* ---------- three intelligences (centerpiece) ---------- */
.tri__head{max-width:760px; margin-bottom:clamp(2rem,5vh,3.5rem)}
.tri__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2rem)}
.tri-card{position:relative; display:flex; flex-direction:column; background:transparent; border:0; transition:transform var(--dur) var(--ease)}
.tri-card:hover{transform:translateY(-6px)}
.tri-card__art{aspect-ratio:1/1; overflow:hidden; display:grid; place-items:center}
.tri-card__art img{width:100%; height:100%; object-fit:contain; will-change:transform; animation:triFloat 7s var(--ease) infinite}
@keyframes triFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.tri-card:nth-child(2) .tri-card__art img{animation-duration:8.4s; animation-delay:-2.5s}
.tri-card:nth-child(3) .tri-card__art img{animation-duration:7.6s; animation-delay:-4.2s}
.tri-card__art .placeholder{width:100%; height:100%; display:grid; place-items:center; color:var(--ink-2); font-size:var(--t-small)}
.tri-card__body{padding:1.2rem 0 0; margin-top:.4rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.7rem}
.tri-card__n{font-family:var(--display); font-size:var(--t-eyebrow); letter-spacing:.2em; color:var(--gold-ink)}
.tri-card h3{font-size:var(--t-h3); letter-spacing:.03em; min-height:2.1em}
.tri-card__meaning{color:var(--ink-2); font-size:var(--t-body); min-height:9.6em}
.tri-card__impl{padding-top:1rem; border-top:1px solid var(--line-soft); font-size:var(--t-small); color:var(--ink)}
.tri-card__impl b{color:var(--sage)}
@media (max-width:860px){ .tri-card__meaning{min-height:0} }

/* ---------- hero dragonfly (brand mark, alive) ---------- */
.dfly{width:min(100%,500px); height:auto; overflow:visible; margin-inline:auto; display:block}
.dfly__net path{fill:none}

/* ---------- Nature on Board plate (illustration on the sage band) ---------- */
.nob__plate{background:var(--paper); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lift); aspect-ratio:5/4}
.nob__plate img{width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply}

/* ---------- generic feature row ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,4.5rem); align-items:center}
.feature--flip .feature__media{order:2}
.feature__media{aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2)}
.feature__media img{width:100%;height:100%;object-fit:cover}
/* plain media tile blends into its band (no box); used for the SVG route + map */
.feature__media--plain{background:transparent; border-radius:0; overflow:visible; display:grid; place-items:center}
.feature__media--plain img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal; animation:triFloat 9s var(--ease) infinite}
.pw-route{width:100%; height:auto; overflow:visible}
.pw-track{fill:none; stroke:var(--line); stroke-width:1.6; stroke-dasharray:3 7; stroke-linecap:round}
.pw-trace{fill:none; stroke:var(--gold); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:760; stroke-dashoffset:760; animation:pwDraw 2.8s var(--ease) .3s forwards}
@keyframes pwDraw{to{stroke-dashoffset:0}}
.pw-nodes circle{fill:var(--paper-2); stroke:var(--gold-ink); stroke-width:1.6}
.pw-seat{fill:var(--gold); stroke:var(--ink); stroke-width:1}

/* ---------- partner strip ---------- */
.partners{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.5rem,5vw,3.5rem); justify-content:center}
.partners img{height:34px; width:auto; opacity:.7; filter:grayscale(1); transition:opacity var(--dur-fast), filter var(--dur-fast)}
.partners img:hover{opacity:1; filter:grayscale(0)}
.partners__tier{font-size:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); display:block; margin-bottom:.4rem}

/* ---------- footer ---------- */
.footer{background:var(--ink); color:var(--on-dark); padding:var(--sect) var(--gut) 3rem}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; max-width:var(--maxw); margin-inline:auto}
.footer__big{font-family:var(--display); text-transform:uppercase; font-size:clamp(2rem,5vw,3.4rem); letter-spacing:.03em; line-height:.95; color:var(--on-dark)}
.footer__col h4{font-family:var(--body); font-size:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 1rem}
.footer__col a{display:block; color:var(--on-dark-soft); padding:.25rem 0; letter-spacing:.02em}
.footer__col a:hover{color:var(--on-dark)}
.footer__bottom{display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; max-width:var(--maxw); margin:3rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(246,244,238,.14); font-size:var(--t-small); color:var(--on-dark-soft)}

/* ---------- reveal motion (gated behind .js-anim so content is visible without JS / headless) ---------- */
html.js-anim .rv{opacity:0; transform:translateY(24px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
html.js-anim .rv.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html.js-anim .rv{opacity:1; transform:none; transition:none}
  .hero__scroll i::after{animation:none}
  .tri-card__art img,.feature__media--plain img{animation:none}
  .pw-trace{animation:none; stroke-dashoffset:0}
  *{scroll-behavior:auto !important}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__big{grid-column:1/-1}
}
@media (max-width:860px){
  .nav__links{position:fixed; inset:0; flex-direction:column; justify-content:center; gap:2rem; background:var(--paper); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); z-index:1}
  .nav__links.is-open{opacity:1; pointer-events:auto}
  .nav__links a{font-size:var(--t-h3)}
  .nav__cta{display:none}
  .nav__burger{display:block}
  .hero__grid{grid-template-columns:1fr}
  .hero__art{order:-1; max-width:340px; margin-inline:auto}
  .hero__scroll{display:none}
  .tri__grid{grid-template-columns:1fr}
  .feature,.feature--flip .feature__media{grid-template-columns:1fr; order:0}
  .footer__top{grid-template-columns:1fr; gap:1.8rem}
  .footer__col a{padding:.4rem 0}
}

/* ---------- subpage hero + about page ---------- */
.sub-hero{padding-top:clamp(7.5rem,15vh,11rem); padding-bottom:clamp(2rem,4vw,3rem)}
.sub-hero__title{font-family:var(--display); text-transform:uppercase; font-size:clamp(3rem, 2rem + 5vw, 6.4rem); line-height:.98; letter-spacing:-.01em; max-width:18ch; margin:.5rem 0 0}
.sub-hero__title em{font-style:normal; color:var(--clay)}
.prose{max-width:var(--maxw-text)}
.prose h2{font-size:var(--t-h2)}
.prose p{color:var(--ink); font-size:var(--t-body); margin-top:1rem}
.band--paper2 .prose .eyebrow,.prose .eyebrow{margin-bottom:.5rem}
.about-row{align-items:center; margin-top:clamp(3rem,7vw,5.5rem)}
.about-row:first-of-type{margin-top:0}
.about-row__n{font-family:var(--display); font-size:var(--t-eyebrow); letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); display:block; margin-bottom:.5rem}
.about-row h3{font-size:var(--t-h2)}
.about-row p{color:var(--ink-2); font-size:var(--t-body)}
.about-row__impl{margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:var(--t-small); color:var(--ink)}
.about-row__impl b{color:var(--sage)}
.stat-num{font-family:var(--display); font-size:clamp(3.1rem,7vw,5.6rem); line-height:1; color:var(--gold-ink); letter-spacing:.01em; font-variant-numeric:tabular-nums; margin:0}
.stat-num--clay{color:var(--clay)}
.band--ink .stat-num,.band--sage .stat-num{color:var(--gold)}
.src{font-size:var(--t-small); color:var(--ink-2); margin-top:1rem}
.band--ink .src,.band--sage .src{color:var(--on-dark-soft)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); max-width:var(--maxw); margin-inline:auto}
.vm{font-size:var(--t-lede); line-height:1.4; margin-top:.8rem; color:var(--ink); max-width:36ch}
@media (max-width:860px){ .two-col{grid-template-columns:1fr; gap:2.5rem} }

/* ---------- opportunities board ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.board__controls{display:flex; flex-direction:column; gap:1rem; margin-bottom:1.2rem}
.board__search{display:flex; align-items:center; gap:.7rem; background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:.85rem 1.3rem; max-width:560px}
.board__search svg{flex:none; fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round}
.board__search input{flex:1; border:0; background:none; font:inherit; color:var(--ink); outline:none; min-width:0}
.board__search input::placeholder{color:var(--ink-2)}
.board__filters{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.seg{display:inline-flex; background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:3px}
.seg__btn{border:0; background:none; cursor:pointer; font-size:var(--t-small); font-weight:600; letter-spacing:.02em; color:var(--ink-2); padding:.5rem 1rem; border-radius:var(--r-pill); transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)}
.seg__btn.is-on{background:var(--ink); color:var(--paper)}
.filter-select{
  font-family:var(--body); font-size:var(--t-small); font-weight:500; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-pill);
  padding:.6rem 2.2rem .6rem 1.1rem; cursor:pointer; max-width:100%;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231A1916' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:.7rem;
  transition:border-color var(--dur-fast) var(--ease)}
.filter-select:hover{border-color:var(--gold-deep)}
.board__bar{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between; margin-bottom:1.4rem; min-height:1.8rem}
.tokens{display:flex; flex-wrap:wrap; gap:.5rem}
.token{display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-small); font-weight:600; letter-spacing:.01em; color:var(--gold-ink); background:var(--gold-tint); border:1px solid transparent; border-radius:var(--r-pill); padding:.35rem .8rem; cursor:pointer; transition:background-color var(--dur-fast) var(--ease)}
.token:hover{background:#efddb6}
.token--clear{color:var(--ink-2); background:transparent; border-color:var(--line)}
.token span{font-size:1.1em; line-height:1}
.board__count{font-size:var(--t-small); color:var(--ink-2); letter-spacing:.02em; margin:0; white-space:nowrap}

.opps-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.2rem}
.opp-cell{position:relative}
.opp-card{display:flex; flex-direction:column; gap:.7rem; height:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem 1.4rem 1.3rem; box-shadow:var(--shadow); color:var(--ink); transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)}
.opp-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb, var(--clay) 70%, transparent)}
.opp-card.is-archived{opacity:.9}
.opp-card__top{display:flex; align-items:center; gap:.7rem; min-width:0; padding-right:2.2rem}
.opp-card__logo{width:40px; height:40px; flex:none; object-fit:contain; border-radius:var(--r); border:1px solid var(--line); background:var(--paper); padding:5px}
.opp-card__logo--mono{display:grid; place-items:center; padding:0; font-family:var(--display); font-size:1.2rem; color:var(--gold-ink); background:var(--gold-tint); border-color:transparent}
.opp-card__org{font-family:var(--body); font-size:var(--t-eyebrow); letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--sage); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.opp-card__flag{margin-left:auto; font-size:1.15rem; line-height:1}
.opp-card__title{font-family:var(--body); text-transform:none; letter-spacing:-.01em; font-size:1.08rem; font-weight:700; line-height:1.25; color:var(--ink)}
.opp-card__blurb{font-size:var(--t-small); color:var(--ink-2); line-height:1.5; margin:0; flex:1}
.opp-card__meta{display:flex; flex-wrap:wrap; gap:.4rem}
.tag{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:.28rem .6rem; border-radius:var(--r-pill); background:var(--sage-tint); color:var(--sage)}
.tag--type{background:var(--paper-2); color:var(--ink-2)}
.tag--lang{background:var(--gold-tint); color:var(--gold-ink)}
.opp-card__foot{display:flex; align-items:center; justify-content:space-between; gap:.6rem; border-top:1px solid var(--line-soft); padding-top:.9rem; margin-top:.2rem}
.opp-card__status{font-size:.78rem; color:var(--ink-2)}
.opp-card__go{font-size:var(--t-small); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sage); display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap}
.opp-card:hover .opp-card__go .arr{transform:translateX(3px)}
.opp-card__go .arr{transition:transform var(--dur-fast) var(--ease)}
.save-btn{position:absolute; top:.9rem; right:.9rem; z-index:2; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink-2); cursor:pointer; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease)}
.save-btn svg{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round}
.save-btn:hover{color:var(--gold-deep); border-color:var(--gold-deep)}
.save-btn:active{scale:.9}
.save-btn.is-on{color:var(--gold-deep); border-color:var(--gold)}
.save-btn.is-on svg{fill:var(--gold)}
.opp-empty{grid-column:1/-1; text-align:center; padding:3rem 1rem; border:1.5px dashed var(--line); border-radius:var(--r-lg)}
.opp-empty__msg{max-width:46ch; margin:0 auto 1.2rem; color:var(--ink-2); line-height:1.5}
.opp-empty__acts{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center}
.opp-empty__acts .btn{padding:.6rem 1.1rem; font-size:.72rem}
@media (max-width:600px){ .opps-grid{grid-template-columns:1fr} .board__filters{width:100%} .filter-select{flex:1} }

/* allow board cards to shrink below content min-width (prevents mobile overflow) */
.opp-cell,.opp-card,.opp-card__top,.opp-card__org{min-width:0}

/* ---------- pathway journey ---------- */
.orient__opts{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem}
.orient__btn{font-family:var(--body); font-size:var(--t-body); font-weight:600; letter-spacing:.01em; color:var(--ink); background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:.85rem 1.5rem; cursor:pointer; transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease)}
.orient__btn:hover{border-color:var(--gold-deep)}
.orient__btn:active{scale:.97}
.orient__btn.is-on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.journey__head{display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; margin-bottom:clamp(2rem,5vw,3.5rem)}
.pw-route--wide{width:100%; height:auto}
.pw-route--wide .pw-trace{stroke-dasharray:1300; stroke-dashoffset:1300; animation-duration:3.2s}
.pw-nodes circle.is-lit{fill:var(--gold); stroke:var(--gold)}
.journey__progress{}
.journey__pct{font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:var(--t-h3); line-height:1.05; color:var(--ink); margin:0 0 .8rem}
.journey__bar{height:8px; background:var(--paper-2); border-radius:var(--r-pill); overflow:hidden; border:1px solid var(--line-soft)}
.journey__bar span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); border-radius:var(--r-pill); transition:width .6s var(--ease)}
.journey__count{font-size:var(--t-small); color:var(--ink-2); margin:.7rem 0 0; font-variant-numeric:tabular-nums}

.stations{border-top:1px solid var(--line)}
.station{border-bottom:1px solid var(--line); position:relative}
.station::before{content:""; position:absolute; left:calc(-1 * var(--gut)); top:0; bottom:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform var(--dur) var(--ease)}
.station.is-focus::before{transform:scaleY(1)}
.station.is-focus{background:linear-gradient(90deg, color-mix(in srgb,var(--gold-tint) 55%, transparent), transparent 70%)}
.station__head{display:flex; align-items:center; gap:1rem; padding:1.25rem .2rem; cursor:pointer; list-style:none}
.station__head::-webkit-details-marker{display:none}
.station__n{font-family:var(--display); font-size:var(--t-h3); color:var(--clay); line-height:1; flex:none; min-width:1.8em}
.station.is-done .station__n{color:var(--gold-deep)}
.station__titles{display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1}
.station__title{font-family:var(--body); font-weight:700; font-size:clamp(1.05rem,1rem+.5vw,1.35rem); letter-spacing:-.01em; color:var(--ink); line-height:1.2}
.station__teaser{font-size:var(--t-small); color:var(--ink-2)}
.station__state{flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:background-color var(--dur-fast), border-color var(--dur-fast)}
.station.is-done .station__state{background:var(--gold); border-color:var(--gold)}
.station.is-done .station__state::after{content:"✓"; font-size:.8rem; color:var(--ink); font-weight:700}
.station__chev{flex:none; width:14px; height:14px; border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:rotate(45deg); transition:transform .3s var(--ease); margin-left:.2rem}
.station[open] .station__chev{transform:rotate(-135deg)}
.station__body{padding:.2rem 0 1.7rem; max-width:var(--maxw-text)}
.station__why{color:var(--ink); font-size:var(--t-body); margin:0 0 1.2rem}
.station__lbl{font-family:var(--body); font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); margin:1.1rem 0 .5rem}
.station__checks,.station__res{margin:.15rem 0 0; padding:.2rem 0 .2rem 1.4rem; display:flex; flex-direction:column; gap:.4rem; border-left:3px solid var(--line)}
.station__res{border-left-color:var(--gold)}
.station__checks li,.station__res li{color:var(--ink-2); font-size:var(--t-body); line-height:1.5}
.station__checks li::marker{color:var(--ink-2)}
.station__res li::marker{color:var(--gold-deep)}
.station__done{margin-top:1.4rem; padding:.78rem 1.5rem; font-size:.8rem}
.station__done.is-on{background:var(--sage); border-color:var(--sage); color:var(--paper)}
@media (max-width:860px){ .journey__head{grid-template-columns:1fr} .pw-route--wide{order:2; max-width:520px; margin-inline:auto} }
.station__head::after{content:""; flex:none; width:11px; height:11px; border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:rotate(45deg); transition:transform .3s var(--ease); margin-right:.2rem}
.station[open] .station__head::after{transform:rotate(-135deg)}

/* three-intelligences synthesis line + hero alt-CTA alignment (interface-craft wave 1) */
.tri__synthesis{text-align:center; max-width:48ch; margin:clamp(2.5rem,6vw,4rem) auto 0; font-size:var(--t-lede); line-height:1.4; color:var(--ink)}
.hero__ctas{align-items:center}

/* ---------- fellowship roster + bio modal ---------- */
.cohort-tabs{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.8rem 0 1.6rem}
.cohort-tab{font-family:var(--body); font-size:var(--t-small); font-weight:600; letter-spacing:.02em; color:var(--ink); background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:.55rem 1.1rem; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease)}
.cohort-tab:hover{border-color:var(--gold-deep)}
.cohort-tab:active{scale:.97}
.cohort-tab.is-on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.cohort-tab__n{font-variant-numeric:tabular-nums; font-size:.82em; opacity:.65}
.cohort-tab.is-on .cohort-tab__n{opacity:.85}
.fellows-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1.1rem}
.fellow{display:flex; flex-direction:column; text-align:left; min-width:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; box-shadow:var(--shadow); transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)}
.fellow:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb,var(--clay) 55%, transparent)}
.fellow__photo{aspect-ratio:1/1; overflow:hidden; background:var(--sage-tint); display:grid; place-items:center}
.fellow__photo img{width:100%; height:100%; object-fit:cover; outline:1px solid rgba(0,0,0,.08); outline-offset:-1px}
.fellow__mono{font-family:var(--display); font-size:2.6rem; color:var(--sage); opacity:.5}
.fellow__cap{padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.25rem; min-width:0}
.fellow__name{font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:.92rem; color:var(--ink); line-height:1.2}
.fellow__role{font-size:.78rem; color:var(--ink-2); line-height:1.35}
.fl-modal{position:fixed; inset:0; z-index:var(--z-modal); display:none; align-items:center; justify-content:center; padding:1.2rem}
.fl-modal.is-open{display:flex}
.fl-modal__veil{position:absolute; inset:0; background:rgba(26,25,22,.55); backdrop-filter:blur(5px)}
.fl-modal__card{position:relative; max-width:680px; width:100%; max-height:86vh; overflow:auto; background:var(--paper); border-radius:var(--r-lg); padding:clamp(1.6rem,4vw,2.6rem); box-shadow:var(--shadow-lift)}
.fl-modal__close{position:absolute; top:1rem; right:1rem; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background:var(--card); cursor:pointer; font-size:1rem; color:var(--ink); display:grid; place-items:center; transition:border-color var(--dur-fast) var(--ease)}
.fl-modal__close:hover{border-color:var(--gold-deep)}
.fl-modal__top{display:flex; gap:1.3rem; align-items:center; margin-bottom:1.2rem; padding-right:2.5rem}
.fl-modal__photo{width:92px; height:92px; border-radius:var(--r-lg); object-fit:cover; flex:none; outline:1px solid rgba(0,0,0,.08); outline-offset:-1px}
.fl-modal__name{font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:var(--t-h3); color:var(--ink)}
.fl-modal__role{color:var(--sage); font-size:var(--t-small); margin-top:.3rem; font-weight:600}
.fl-modal__bio{color:var(--ink); font-size:var(--t-body); line-height:1.7; white-space:pre-line}
@media (max-width:560px){ .fellows-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .fl-modal__top{flex-direction:column; align-items:flex-start} }

/* ===== three-intelligences: living illustrations float on the page (looping cinemagraphs, background matched to the page so they blend) ===== */
.tri-card__art{position:relative; background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible}
.tri-card__vid{width:100%; height:100%; object-fit:contain; display:block}
.tri-card__art img{width:100%; height:100%; object-fit:contain; animation:none}

/* ===== MaxiBestOf warm-accent helpers (clay emphasis, used sparingly) ===== */
.hero__title .accent-mind{color:var(--clay)}
.em-clay{font-style:normal; color:var(--clay-ink)}
.em-gold{font-style:normal; color:var(--gold)}
.lede-accent{color:var(--clay-ink); font-weight:700}

/* ===== MaxiBestOf per-page accents (scoped) ===== */
/* nature: the 01/02/03 lens numbers, monument scale + warm */
#what .tri-card__n{font-size:clamp(2rem, 1.4rem + 2vw, 3rem); color:var(--clay); line-height:1; font-weight:700}
/* nature: warm the closing sage band toward clay (its single bold moment) */
#visit{position:relative; overflow:hidden; background:linear-gradient(135deg, var(--sage-deep) 0%, color-mix(in srgb, var(--sage-deep) 80%, var(--clay)) 100%)}

/* ===== board upgrade: live dashboard, closed pills, search highlight, saved view ===== */
.board__dash{display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.5rem; margin:0 0 1.7rem; padding:1rem 1.4rem; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:color-mix(in srgb, var(--card) 72%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.dash__item{display:flex; align-items:baseline; gap:.55rem}
.dash__n{font-family:var(--display); font-size:clamp(1.35rem,1.1rem+1vw,1.9rem); color:var(--ink); line-height:1; font-variant-numeric:tabular-nums}
.dash__n--small{font-family:var(--body); font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink)}
.dash__l{font-size:var(--t-small); color:var(--ink-2)}
.dash__sep{width:1px; align-self:stretch; background:var(--line-soft)}
@media (max-width:700px){ .dash__sep{display:none} .board__dash{gap:.7rem 1.2rem; padding:.85rem 1.1rem} }
mark.hl{background:var(--gold-tint); color:inherit; border-radius:3px; padding:0 .1em}
.closed-pill{display:inline-block; font-weight:700; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--clay-ink); background:color-mix(in srgb, var(--clay) 15%, transparent); border-radius:var(--r-pill); padding:.16rem .6rem; margin-right:.4rem; vertical-align:middle}
.closed-detail{color:var(--ink-2)}
.seg__count{display:inline-block; min-width:1em; font-size:.72rem; font-weight:700; color:var(--gold-ink)}
.seg__count:empty{display:none}
.seg__btn.is-on .seg__count{color:inherit}
.opp-empty__try{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin:1rem 0 0}

/* ===== pathway 100x: time chips, ready + tip callouts, next-up marker ===== */
.station__time{display:inline-block; font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); background:var(--gold-tint); border-radius:var(--r-pill); padding:.32rem .85rem; margin:.2rem 0 1.1rem}
.station__ready{margin:1.4rem 0 0; padding:.9rem 1.15rem; border-left:3px solid var(--sage-bright); background:color-mix(in srgb, var(--sage-tint) 55%, transparent); border-radius:0 var(--r) var(--r) 0; color:var(--ink); max-width:var(--maxw-text)}
.station__tip{margin:.8rem 0 0; padding:.9rem 1.15rem; border-left:3px solid var(--clay); background:color-mix(in srgb, var(--clay) 8%, transparent); border-radius:0 var(--r) var(--r) 0; color:var(--ink); max-width:var(--maxw-text)}
.station__klabel{display:block; font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 .3rem}
.station__ready .station__klabel{color:var(--sage)}
.station__tip .station__klabel{color:var(--clay-ink)}
.station.is-next .station__title::after{content:"Next up"; display:inline-block; margin-left:.6rem; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink); background:var(--gold-tint); border-radius:var(--r-pill); padding:.2rem .6rem; vertical-align:middle}

/* ===== cinematic home: hero sting, grain, vignette, motes, glass, route film ===== */
.hero--cinema{position:relative; min-height:100svh; display:grid; align-content:center; padding:clamp(7rem,15vh,9.5rem) 0 clamp(4.5rem,10vh,7rem); overflow:hidden; isolation:isolate}
.hero__film{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; z-index:-4}
.hero__vignette{position:absolute; inset:0; z-index:-3; pointer-events:none; opacity:.55; background:radial-gradient(120% 96% at 50% 40%, transparent 54%, rgba(26,25,22,.13) 100%)}
.hero__grain{position:absolute; inset:-40px; z-index:-2; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  animation:grainShift 1.1s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-13px,9px)}66%{transform:translate(11px,-7px)}100%{transform:translate(0,0)}}
.hero__motes{position:absolute; inset:0; z-index:-1; pointer-events:none}
.hero__motes i{position:absolute; bottom:18%; width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:0; animation:moteUp 9s linear infinite}
.hero__motes i:nth-child(1){left:12%; animation-delay:0s}
.hero__motes i:nth-child(2){left:28%; width:3.5px; height:3.5px; animation-delay:2.1s; animation-duration:11s}
.hero__motes i:nth-child(3){left:47%; animation-delay:4.4s}
.hero__motes i:nth-child(4){left:63%; width:4px; height:4px; animation-delay:1.2s; animation-duration:10s}
.hero__motes i:nth-child(5){left:78%; animation-delay:5.6s}
.hero__motes i:nth-child(6){left:90%; width:3px; height:3px; animation-delay:3.2s; animation-duration:12s}
@keyframes moteUp{0%{transform:translateY(12vh); opacity:0}12%{opacity:.5}80%{opacity:.22}100%{transform:translateY(-52vh); opacity:0}}
.hero__stage{position:relative; width:100%; display:grid; justify-items:start; will-change:transform, opacity}
/* protected type lane: a soft cream wash anchored left, so the headline always
   reads over the film no matter which frame is on screen */
.hero__stage::before{content:""; position:absolute; inset:-16% 34% -26% -16%; z-index:-1; pointer-events:none;
  background:radial-gradient(75% 82% at 30% 46%, color-mix(in srgb, var(--paper) 88%, transparent), transparent 78%); filter:blur(10px)}
.hero__title--cinema{max-width:15ch; font-size:clamp(2.6rem, 1rem + 6vw, 5.4rem)}
/* redesigned centered scroll cue: a hairline rail with a travelling gold dot */
.hero__cue{position:absolute; left:50%; bottom:clamp(1.1rem,3vh,2rem); transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; pointer-events:none}
.hero__cue-label{font-family:var(--body); font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-2)}
.hero__cue-rail{position:relative; width:1.5px; height:46px; background:linear-gradient(var(--ink-2), transparent); overflow:hidden}
.hero__cue-rail i{position:absolute; left:-1px; top:0; width:3.5px; height:3.5px; border-radius:50%; background:var(--gold); animation:cueDrop 1.9s var(--ease) infinite}
@keyframes cueDrop{0%{transform:translateY(-4px); opacity:0}22%{opacity:1}80%{opacity:1}100%{transform:translateY(46px); opacity:0}}
@media (max-width:720px){
  .hero__film{object-position:66% bottom}
  .hero--cinema{align-content:start; padding-top:clamp(6.4rem,14vh,8rem)}
  .hero__stage::before{inset:-16% -10% -26% -16%; background:radial-gradient(88% 72% at 42% 40%, color-mix(in srgb, var(--paper) 86%, transparent), transparent 82%)}
  .hero__title--cinema{max-width:none}
}

/* the board head: copy beside the glowing-seat film (both on cream, so they blend) */
.board__head{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.2rem,3.5vw,2.6rem); align-items:center}
.board__head > *{min-width:0}
.board-seat__film{width:100%; max-width:100%; height:auto; display:block}
@media (max-width:860px){ .board__head{grid-template-columns:minmax(0,1fr)} .board-seat__film{max-width:min(520px,100%); margin-inline:auto} }

/* pathway teaser: the route, filmed inside an organic brand-shaped mask (Nordiska move) */
.cine-teaser__title{position:relative; display:inline-block}
.hand-underline{position:absolute; left:50%; bottom:-.42em; transform:translateX(-50%); width:min(86%,320px); height:auto; overflow:visible}
.hand-underline path{stroke-dasharray:640; stroke-dashoffset:640; transition:stroke-dashoffset 1.1s var(--ease) .15s}
.rv.is-in .hand-underline path, .is-in .hand-underline path{stroke-dashoffset:0}
.cine-teaser__stage{position:relative; margin-top:clamp(1.8rem,4vw,3rem); display:flex; flex-direction:column; align-items:center; gap:clamp(1.1rem,3vw,1.9rem)}
.cine-teaser__mask{position:relative; width:min(940px,100%); aspect-ratio:16/9; overflow:hidden; will-change:border-radius;
  border-radius:48% 52% 46% 54% / 62% 58% 42% 38%;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 42%, transparent), 0 34px 64px -36px rgba(26,25,22,.5);
  animation:maskMorph 16s ease-in-out infinite}
@keyframes maskMorph{0%,100%{border-radius:48% 52% 46% 54% / 62% 58% 42% 38%}50%{border-radius:54% 46% 52% 48% / 56% 62% 40% 44%}}
.cine-teaser__film{width:100%; height:100%; object-fit:cover; display:block}
.cine-teaser__cards{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center}
.glass{display:flex; flex-direction:column; gap:.15rem; padding:.85rem 1.3rem; border-radius:var(--r-lg); min-width:9.5rem;
  background:var(--card); border:1px solid var(--line-soft);
  box-shadow:var(--shadow)}
.glass__n{font-family:var(--display); font-size:clamp(1.4rem,1rem+1.4vw,2.1rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.glass__slash{color:var(--gold-deep)}
.glass__l{font-size:.8rem; color:var(--ink-2); margin-top:.1rem}
@media (max-width:600px){ .cine-teaser__cards{display:grid; grid-template-columns:1fr 1fr; width:100%} .glass{min-width:0} .glass:last-child{grid-column:1 / -1} }

/* board: top-N with an expand (progressive disclosure on the landing) */
.board__more{display:flex; justify-content:center; margin-top:1.6rem}
.board__more:empty{display:none}
.board__more-btn{display:inline-flex; align-items:center; gap:.7rem; font-family:var(--body); font-weight:700; font-size:var(--t-small);
  letter-spacing:.06em; color:var(--ink); background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-pill);
  padding:.85rem 1.6rem; cursor:pointer; transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease)}
.board__more-btn:hover{border-color:var(--clay); background:var(--clay-tint)}
.board__more-btn:active{scale:.98}
.board__more-btn .board__more-chev{width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform var(--dur-fast) var(--ease)}
.board__more-btn[aria-expanded="true"] .board__more-chev{transform:rotate(-135deg)}

@media (max-width:640px){
  .glass{background:var(--card); backdrop-filter:none; -webkit-backdrop-filter:none; border-color:var(--line-soft)}
}
@media (prefers-reduced-motion:reduce){
  .hero__grain{animation:none}
  .hero__motes,.hero__cue-rail i{animation:none}
  .cine-teaser__mask{animation:none}
  .hand-underline path{transition:none; stroke-dashoffset:0}
}

/* ============ Act B: pathway as a guided expedition ============ */
.pw-hero{padding:clamp(6.5rem,13vh,8.5rem) 0 clamp(1.4rem,4vw,2.4rem)}
.pw-hero__intro{text-align:center; max-width:64ch; margin-inline:auto}
.pw-hero__title{font-size:var(--t-h1); margin-top:.3rem; line-height:.98}
.pw-hero__intro .lede{margin-top:1rem}
.pw-hero__map{margin:clamp(1.4rem,4vw,2.6rem) auto 0; max-width:1120px}
.pw-hero__map .pw-route--wide{overflow:visible}
.pw-hero__foot{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(1.4rem,4vw,3rem); align-items:center; margin-top:clamp(1.6rem,4vw,2.6rem)}
.pw-hero__foot>*{min-width:0}
.pw-orient__q{font-size:var(--t-small); color:var(--ink-2); margin:0 0 .7rem}
@media (max-width:760px){ .pw-hero__foot{grid-template-columns:1fr; gap:1.6rem} }

/* interactive route stops */
#pwRoute .pw-nodes circle{fill:var(--card); stroke:var(--gold-ink); stroke-width:1.8; transition:fill .3s var(--ease), stroke .3s var(--ease)}
#pwRoute .pw-nodes circle.is-lit{fill:var(--gold); stroke:var(--gold)}
#pwRoute .pw-nodes circle.is-active{stroke:var(--sage); stroke-width:3}
.pw-hit{outline:none}
.pw-hit:focus-visible{outline:2.5px solid var(--sage); outline-offset:1px; border-radius:50%}

/* stage identity: gold mark + number */
.station__head{gap:.85rem}
.station__icon{width:26px; height:26px; color:var(--gold-deep); flex:none}
.station.is-done .station__icon{color:var(--sage)}

/* two-column body: reflection beside action */
.station__cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.4rem); margin-top:.2rem}
.station__cols .station__lbl{margin-top:0}
@media (max-width:680px){ .station__cols{grid-template-columns:1fr; gap:.8rem} }

/* checkable actions */
.station__res.is-checklist{list-style:none; padding:0; border-left:0; margin:.15rem 0 0; gap:.15rem}
.pw-check-li{margin:0}
.pw-check{display:flex; gap:.65rem; align-items:flex-start; padding:.5rem .55rem; border-radius:var(--r); cursor:pointer; transition:background-color var(--dur-fast) var(--ease)}
.pw-check:hover{background:var(--gold-tint)}
.pw-check input{appearance:none; -webkit-appearance:none; flex:none; width:1.2rem; height:1.2rem; margin:.12rem 0 0; border:1.6px solid var(--line); border-radius:5px; cursor:pointer; display:grid; place-items:center; transition:background-color .2s var(--ease), border-color .2s var(--ease)}
.pw-check input:checked{background:var(--sage); border-color:var(--sage)}
.pw-check input:checked::after{content:"\2713"; color:var(--paper); font-size:.78rem; font-weight:700; line-height:1}
.pw-check input:focus-visible{outline:2.5px solid var(--sage); outline-offset:2px}
.pw-check span{color:var(--ink-2); font-size:var(--t-body); line-height:1.5}
.pw-check input:checked ~ span{color:var(--ink); text-decoration:line-through; text-decoration-color:var(--line-soft)}

/* armed + celebration */
.station.is-armed .station__done{border-color:var(--sage); color:var(--sage)}
.station.just-done .station__state{animation:pwPop .85s var(--ease)}
@keyframes pwPop{0%{transform:scale(1)}30%{transform:scale(1.4)}100%{transform:scale(1)}}

/* sticky journey rail */
.pw-rail{position:fixed; left:0; right:0; bottom:0; z-index:40; background:color-mix(in srgb,var(--paper) 90%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .4s var(--ease)}
.pw-rail.is-shown{transform:translateY(0)}
.pw-rail__in{display:flex; align-items:center; gap:1rem; padding:.65rem var(--gut)}
.pw-rail__stage{font-family:var(--body); font-weight:700; font-size:var(--t-small); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44ch}
.pw-rail__bar{flex:1; height:6px; background:var(--paper-2); border-radius:var(--r-pill); overflow:hidden; min-width:60px; border:1px solid var(--line-soft)}
.pw-rail__bar span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); transition:width .5s var(--ease)}
.pw-rail__plan{padding:.55rem 1.15rem; font-size:.74rem; flex:none}
@media (max-width:520px){ .pw-rail__stage{max-width:16ch} }

/* print: My board plan */
.pw-plan{display:none}
@media print{
  .nav,.footer,.pw-hero,#journey,#contact,.pw-rail,.skip{display:none !important}
  main{padding:0 !important}
  .pw-plan{display:block !important}
  .pw-plan__doc{max-width:none; color:#000}
  .pw-plan h1{font-size:24pt; margin:0 0 4pt}
  .pw-plan__sub{color:#555; margin:0 0 2pt}
  .pw-plan__meta{margin:0 0 16pt; font-weight:700}
  .pw-plan__stage{margin:0 0 12pt; break-inside:avoid}
  .pw-plan__stage h2{font-size:13pt; margin:0 0 4pt}
  .pw-plan ul{margin:0; padding-left:18pt}
  .pw-plan li{margin:0 0 2pt}
  .pw-plan__none{color:#999; font-style:italic; margin:0}
}
@media (prefers-reduced-motion:reduce){ .pw-rail{transition:none} .station.just-done .station__state{animation:none} }