/* ==========================================================================
   Home page — long-image parallax
   The painting sits fixed behind the page and travels from sky (top) to the
   painter at the easel (bottom) as the visitor scrolls. assets/js/pages/home.js
   ========================================================================== */
.page-home{background:#E5E9C1}

/* --- The long image ------------------------------------------------------ */
.longbg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#E5E9C1}
.longbg img{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto;will-change:transform;transform-origin:0 0}
.no-js .longbg img,.longbg.static img{position:absolute}
.longbg-tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,236,190,0) 0%,rgba(255,214,120,.18) 100%);opacity:var(--warm,0);mix-blend-mode:soft-light}

/* --- Descent marker (sky → ridge → meadow → easel) ----------------------- */
.descent{position:fixed;right:clamp(14px,2.2vw,32px);top:50%;transform:translateY(-50%);z-index:5;list-style:none;
  display:flex;flex-direction:column;gap:clamp(28px,6vh,56px);padding:4px 0;opacity:0;transition:opacity .6s}
.descent.show{opacity:1}
.descent::before,.descent::after{content:"";position:absolute;right:6px;top:10px;bottom:10px;width:2px;border-radius:2px;background:rgba(31,42,36,.18)}
.descent::after{bottom:auto;height:calc((100% - 20px) * var(--p,0));background:var(--snow-deep)}
.descent li{cursor:pointer}
.descent li{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(31,42,36,.55);transition:color .3s}
.descent li::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid rgba(31,42,36,.35);position:relative;z-index:1;transition:all .3s}
.descent li.on{color:var(--alpine)}
.descent li.on::after{background:var(--snow);border-color:var(--alpine);transform:scale(1.15)}
.descent li span{padding:4px 8px;border-radius:999px;background:rgba(249,248,245,.6);backdrop-filter:blur(4px);opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s}
.descent li.on span,.descent:hover li span{opacity:1;transform:none}

/* --- Hero ---------------------------------------------------------------- */
.h-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;padding:calc(var(--header-h) + 24px) 0 110px}
.h-hero .eyebrow{color:var(--terracotta);margin-bottom:clamp(20px,3vh,34px);max-width:none}
.h-title{font-size:clamp(56px,12.6vw,196px);line-height:.94;letter-spacing:-.01em;color:var(--alpine);margin:0 auto clamp(22px,3.5vh,40px)}
.h-title .split-line{will-change:transform}
.h-tag{font-size:clamp(17px,1.7vw,22px);color:#2D3A32;max-width:34ch;margin:0 auto 32px}
.h-hero .btn-secondary{--fg:var(--alpine);--bd:var(--alpine);background:rgba(249,248,245,.35);backdrop-filter:blur(4px)}
.h-hero .btn-secondary:hover{--bg:var(--alpine);--fg:var(--paper)}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(31,42,36,.7);text-decoration:none}
.scroll-cue::after{content:"";width:2px;height:46px;background:linear-gradient(var(--snow-deep),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* --- Content panels over the painting ------------------------------------ */
.h-panel{min-height:115svh;display:flex;align-items:center;padding:14vh 0}
.h-card{max-width:640px;border-radius:14px;padding:clamp(28px,4vw,52px);box-shadow:0 40px 80px -40px rgba(20,28,24,.55)}
.h-card.light{background:rgba(249,248,245,.88);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);color:var(--ink-2)}
.h-card.dark{background:rgba(24,33,28,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--on-dark)}
.h-card.wide{max-width:760px}
.h-card.one-line{max-width:880px}
.h-card.one-line h2{font-size:clamp(30px,3.6vw,46px)}
@media (min-width:900px){.h-card.one-line h2{white-space:nowrap}}
.h-card.bio{max-width:960px}
.bio-text p{font-size:16px;line-height:1.7}
.bio-text p+p{margin-top:12px}
.h-card h2{font-size:clamp(34px,4.2vw,54px)}
.h-card.dark h2{color:var(--paper)}
.h-card.dark .eyebrow{color:var(--snow)}
.h-card .lead{color:inherit;opacity:.9;margin-bottom:18px}
.h-card p+p{margin-top:14px}

.points{list-style:none;display:grid;gap:18px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.points li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.points svg{width:44px;height:44px;padding:10px;border-radius:50%;background:rgba(127,140,107,.16);color:var(--sage-deep)}
.points strong{display:block;font:400 21px/1.2 var(--display);color:var(--alpine);margin-bottom:4px}
.points span{font-size:15.5px;color:var(--ink-3)}
.history{margin-top:26px;font-size:14.5px;color:var(--ink-3);padding-left:16px;border-left:2px solid var(--snow-deep)}

.h-quote{margin:26px 0 30px;font:400 clamp(22px,2.4vw,28px)/1.3 var(--display);color:var(--snow)}
.gov{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gov div{padding:20px;border-radius:10px;background:rgba(249,248,245,.06);border:1px solid var(--line-dark)}
.gov h3{font-size:20px;color:var(--paper);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.gov h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--snow)}
.gov p{font-size:14.5px;color:var(--on-dark-2);line-height:1.55}
.h-links{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.h-link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-radius:10px;text-decoration:none;
  background:var(--paper);color:var(--alpine);transition:transform .3s var(--ease),background .3s}
.h-link:hover{transform:translateY(-3px);background:var(--snow)}
.h-link strong{font:400 20px/1.1 var(--display)}
.h-link small{display:block;font-size:13px;color:var(--ink-3);margin-top:4px}
.h-link span.arrow{font-size:20px}

.curator{display:grid;grid-template-columns:200px 1fr;gap:clamp(22px,3vw,36px);align-items:start}
.curator .ph-slot{aspect-ratio:4/5;border-radius:10px}
.curator .ph{inset:8px}
.curator .ph-title{font-size:16px}
.curator h2{margin-bottom:6px}
.curator .role{font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta);margin-bottom:18px}
.curator .btn-row{margin-top:24px}

/* Footer sits on the painting: a soft fade into it */
.page-home .site-footer{margin-top:0;box-shadow:0 -60px 80px -20px rgba(31,42,36,.35)}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .gov{grid-template-columns:1fr}
  .descent{display:none}
}
@media (max-width:640px){
  .h-panel{min-height:auto;padding:18vh 0}
  .h-card{border-radius:12px}
  .h-card.light{background:rgba(249,248,245,.93)}
  .h-card.dark{background:rgba(24,33,28,.9)}
  .h-links{grid-template-columns:1fr}
  .curator{grid-template-columns:1fr}
  .curator .ph-slot{max-width:220px}
  .h-hero .btn-row .btn{flex:1 1 100%}
  .h-hero .eyebrow::before{display:none}
  .h-hero .eyebrow{line-height:1.6}
}