/* GO CILENTO — Valle del Bussento photo journey (companion to the brand system) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ivory:#FAF5E9; --paper:#FFFDF7; --ink:#1E2422; --ink-soft:#3C4642;
  --line:#1E2422;
  --blu:#0E3A52; --blu-deep:#0A2C40; --sole:#E9A400; --corallo:#C65A33; --ulivo:#5F7420;
  --f-display:"Fraunces",Georgia,serif; --f-sans:"Instrument Sans",system-ui,sans-serif; --f-mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box}
.ph{filter:saturate(1.12) contrast(1.06) brightness(1.01)}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--blu-deep);color:var(--ink);font-family:var(--f-sans)}
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .rv.in{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--sole);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* fixed photo layers: crossfade + Ken Burns via inline opacity/transform */
.wlayers{position:fixed;inset:0;z-index:0;background:var(--blu-deep)}
.wlayer{position:absolute;inset:-4%;background-size:cover;background-position:center;opacity:0;will-change:opacity,transform}
.wlayer[data-grade]{filter:saturate(1.12) contrast(1.07)}
.wlayers::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,44,64,.28),rgba(10,44,64,0) 30%,rgba(10,44,64,0) 62%,rgba(10,44,64,.42));pointer-events:none}

/* top bar */
.wtop{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:rgba(250,245,233,.94);border-bottom:1.5px solid var(--line)}
.wtop img{height:34px;width:auto;object-fit:contain}
.wtop b{font-family:var(--f-display);font-size:18px;white-space:nowrap}
.wtop .back{font-family:var(--f-mono);font-size:12px;color:var(--ink);text-decoration:none;border:1.5px solid var(--line);border-radius:3px;padding:7px 11px;background:var(--paper)}
.wtop .count{margin-left:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em}
.wtop .lang{display:flex;border:1.5px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper)}
.wtop .lang button{border:0;background:transparent;padding:7px 9px;font-family:var(--f-mono);font-size:11px;cursor:pointer;color:var(--ink)}
.wtop .lang button[aria-pressed="true"]{background:var(--ink);color:var(--ivory)}
#wprog{position:fixed;top:55px;left:0;right:0;height:3px;z-index:10;background:rgba(14,58,82,.15)}
#wprog i{display:block;height:100%;background:var(--corallo);transform-origin:0 50%;transform:scaleX(0)}

/* progress rail */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:4px;
  background:rgba(250,245,233,.92);border:1.5px solid var(--line);border-radius:6px;padding:8px}
.rail button{display:flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;padding:8px 6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink);min-height:44px}
.rail button i{font-style:normal;width:12px;height:12px;border-radius:50%;border:2px solid var(--blu);flex:none}
.rail button[aria-current="true"] i{background:var(--corallo);border-color:var(--corallo)}
.rail button span{display:none}
@media(min-width:1100px){.rail button span{display:inline}}

/* story */
.wmain{position:relative;z-index:5}
.whero{min-height:100vh;display:flex;align-items:flex-end;padding:110px 24px 12vh}
.whero .panel{background:var(--ivory);border:1.5px solid var(--line);border-radius:6px;box-shadow:8px 8px 0 rgba(10,44,64,.35);padding:30px;max-width:640px}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blu);margin:0 0 12px}
.whero h1{font-family:var(--f-display);font-weight:560;font-size:clamp(42px,6vw,84px);line-height:.95;margin:0 0 14px;letter-spacing:-.02em}
.whero h1 em{color:var(--corallo);font-style:italic}
.whero p{color:var(--ink-soft);font-size:18px;max-width:52ch}
.wspec{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.wspec span{font-family:var(--f-mono);font-size:11px;border:1px solid var(--line);padding:6px 9px;border-radius:20px;background:var(--paper)}
.scrollhint{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;margin-top:14px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

.wch{min-height:115vh;display:flex;align-items:center;padding:12vh 24px}
.wch .card{background:var(--ivory);border:1.5px solid var(--line);border-radius:6px;box-shadow:8px 8px 0 rgba(10,44,64,.35);padding:24px;max-width:440px}
.wch.right{justify-content:flex-end}
.wch h2{font-family:var(--f-display);font-size:clamp(30px,3.4vw,48px);line-height:1;margin:0 0 10px;letter-spacing:-.015em}
.wch .num{font-family:var(--f-display);font-size:15px;color:var(--corallo)}
.wch p{color:var(--ink-soft);font-size:16px}
.wch figure{margin:14px 0 0;border:1.5px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper)}
.wch figure img{width:100%;height:230px;object-fit:cover;display:block}
.wch figcaption{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;padding:8px 10px;border-top:1.5px solid var(--line);color:var(--ink-soft)}
.wch figcaption a{color:var(--blu)}
.cta{display:inline-flex;margin-top:12px;background:var(--sole);color:var(--ink);font-weight:650;text-decoration:none;border:1.5px solid var(--line);border-radius:3px;padding:12px 18px}

.wfoot{position:relative;z-index:5;background:var(--ivory);border-top:1.5px solid var(--line);padding:28px 24px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-soft)}
.wfoot a{color:var(--blu)}

@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .scrollhint{animation:none}
}
@media(max-width:720px){
  .wch .card{max-width:100%}
  .wch figure img{height:180px}
  .rail{right:8px}
  .wtop img{height:24px}
}