/* ==========================================================================
   Mastiff Wildcrest 2027 — page styles
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;color:var(--on-dark);background:#0d120f;overflow:hidden;isolation:isolate}
/* Media layer: poster + video. JS moves it for the parallax (see edition-mastiff.js) */
.hero-media{position:absolute;inset:-2px 0 auto 0;height:calc(100% + 4px);z-index:-2;will-change:transform;transform-origin:50% 0}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.hero-poster img,.hero-video{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-video{opacity:0;transition:opacity 1.2s ease}
.hero-video.is-playing{opacity:1}
/* The film: transparent black at 50% opacity. JS deepens it slightly as the hero scrolls away */
.hero-film{position:absolute;inset:0;z-index:-1;background:#000;opacity:var(--film,.5);pointer-events:none}
.hero [data-hero-parallax]{will-change:transform,opacity}
.video-toggle{position:absolute;right:max(16px,calc((100vw - var(--max)) / 2 + var(--gutter) - 8px));top:calc(var(--header-h) + 18px);z-index:4;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--paper);background:rgba(0,0,0,.35);border:1px solid rgba(249,248,245,.35);backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.video-toggle:hover{background:rgba(0,0,0,.6);border-color:var(--snow)}
.video-toggle svg{width:18px;height:18px}
.video-toggle .i-play{display:none}
.video-toggle.is-paused .i-play{display:block}
.video-toggle.is-paused .i-pause{display:none}
.hero .wrap{flex:1;display:flex;flex-direction:column;width:100%;padding-top:calc(var(--header-h) + clamp(40px,7vh,88px))}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:13px;color:var(--on-dark-2);margin-bottom:28px}
.crumbs a{text-decoration:none;color:var(--on-dark)}
.crumbs a:hover{color:var(--snow)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.hero-copy{max-width:760px}
.hero h1{font-size:clamp(52px,8.4vw,124px);line-height:.98;color:var(--paper);margin-bottom:28px}
.hero h1 .snow-line{color:var(--snow)}
.hero-sub{font-size:clamp(17px,1.5vw,20px);max-width:46ch;color:var(--on-dark);margin-bottom:34px}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px;font-size:14px;color:var(--on-dark-2)}
.countdown{display:inline-flex;align-items:baseline;gap:8px;padding:10px 16px;border:1px solid rgba(255,198,32,.45);border-radius:999px;background:rgba(31,42,36,.5);backdrop-filter:blur(6px)}
.countdown strong{font:400 22px/1 var(--display);color:var(--snow)}
.nations-inline{letter-spacing:.06em}

.facts{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);margin-top:auto;transform:translateY(64px);
  background:var(--paper);border-radius:6px;box-shadow:0 30px 60px -28px rgba(0,0,0,.5);overflow:hidden}
.fact{padding:26px 26px 28px;border-top:3px solid var(--snow-deep);position:relative}
.fact+.fact::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--line)}
.fact dt{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.fact dd{font:400 21px/1.2 var(--display);color:var(--alpine)}
.fact dd small{display:block;margin-top:8px;font:400 13px/1.4 var(--sans);color:var(--ink-3)}

/* --- In-page section bar ------------------------------------------------- */
.subnav{position:sticky;top:var(--header-h);z-index:80;background:rgba(249,248,245,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:top .4s var(--ease)}
.nav-hidden .subnav{top:0}
.subnav .wrap{display:flex;align-items:center;gap:18px;min-height:60px}
.subnav-label{font:400 17px/1 var(--display);color:var(--alpine);white-space:nowrap}
.subnav ul{display:flex;gap:4px;list-style:none;overflow-x:auto;scrollbar-width:none;flex:1;padding-block:8px}
.subnav ul::-webkit-scrollbar{display:none}
.subnav ul a{display:block;padding:8px 14px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s}
.subnav ul a:hover{background:var(--paper-2);color:var(--alpine)}
.subnav ul a.active{background:var(--alpine);color:var(--paper)}
.subnav .btn{flex-shrink:0}

/* --- Vision -------------------------------------------------------------- */
#experience{padding-top:clamp(140px,14vw,190px)}
.quote{max-width:980px;margin-inline:auto;text-align:center}
.quote blockquote{font:400 clamp(30px,4vw,52px)/1.18 var(--display);color:var(--alpine)}
.quote blockquote em{font-style:normal;color:var(--terracotta)}
.quote figcaption{margin-top:26px;font:600 14px/1 var(--sans);letter-spacing:.06em;color:var(--sage-deep)}
.nations{position:relative;display:flex;justify-content:space-between;list-style:none;max-width:780px;margin:clamp(56px,7vw,88px) auto}
.nations::before{content:"";position:absolute;left:7%;right:7%;top:34px;height:2px;background:repeating-linear-gradient(90deg,var(--snow-deep) 0 8px,transparent 8px 14px)}
.nation{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:14px;font-weight:600;color:var(--alpine)}
.flag{width:68px;height:68px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-size:32px;line-height:1;transition:transform .35s var(--ease),box-shadow .35s}
.nation:hover .flag{transform:translateY(-6px);box-shadow:0 14px 24px -12px rgba(31,42,36,.4)}
.nation.host .flag{border:2px solid var(--terracotta);box-shadow:0 0 0 6px rgba(192,92,70,.1)}
.nation small{font-weight:500;color:var(--terracotta);font-size:12px;margin-top:-8px}
.heritage{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch}
.h-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.h-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(31,42,36,.35)}
.h-card .strip{height:140px}
.h-card .body{padding:30px 32px 34px}
.h-card .tag{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta)}
.h-card h3{margin:12px 0 12px}
.h-card p{font-size:16px;color:var(--ink-3)}
.strip-baltic{background:linear-gradient(120deg,#4A739C 0%,#7C9AB6 38%,#C8D3DB 70%,#EFE9DA 100%)}
.strip-kangra{background:linear-gradient(120deg,#FFC620 0%,#D98A3C 32%,#7F8C6B 66%,#1F2A24 100%)}
.bridge{align-self:center;width:56px;height:56px;border-radius:50%;background:var(--alpine);color:var(--snow);display:grid;place-items:center}
.bridge svg{width:24px;height:24px}

/* --- Itinerary ----------------------------------------------------------- */
#itinerary{background:var(--paper-2)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:40px}
.tab{position:relative;text-align:left;padding:22px 24px 24px;border-radius:6px;background:var(--paper);border:1px solid var(--line);transition:background .25s,border-color .25s,transform .25s var(--ease)}
.tab:hover{transform:translateY(-2px);border-color:rgba(31,42,36,.25)}
.tab[aria-selected="true"]{background:var(--alpine);border-color:var(--alpine)}
.tab .k{display:block;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);margin-bottom:10px}
.tab .t{display:block;font:400 22px/1.15 var(--display);color:var(--alpine)}
.tab .d{display:block;font-size:13px;color:var(--ink-3);margin-top:8px}
.tab[aria-selected="true"] .k{color:var(--snow)}
.tab[aria-selected="true"] .t{color:var(--paper)}
.tab[aria-selected="true"] .d{color:var(--on-dark-2)}
.tab .bar{position:absolute;left:24px;right:24px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--snow);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tab[aria-selected="true"] .bar{transform:scaleX(1)}
.itin-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px;align-items:start}
.phase-intro{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.phase-intro p{flex:1;min-width:240px;color:var(--ink-3)}
.daybanner{display:flex;gap:18px;align-items:center;background:var(--sage);color:var(--paper);padding:22px 26px;border-radius:6px;margin-bottom:18px}
.daybanner svg{width:40px;height:40px;flex-shrink:0;color:var(--snow)}
.daybanner strong{display:block;font:400 21px/1.2 var(--display);color:var(--paper);margin-bottom:4px}
.daybanner span{font-size:15px;color:rgba(249,248,245,.9)}
.acc{display:grid;gap:10px}
.acc-item{background:var(--paper);border:1px solid var(--line);border-radius:6px;transition:border-color .25s,box-shadow .25s}
.acc-item.open{border-color:rgba(31,42,36,.22);box-shadow:0 18px 36px -26px rgba(31,42,36,.4)}
.acc-item.feature{border-left:4px solid var(--terracotta)}
.acc-btn{width:100%;display:grid;grid-template-columns:78px 100px 1fr 28px;gap:16px;align-items:center;padding:20px 22px;text-align:left}
.acc-btn .dn{font:400 22px/1 var(--display);color:var(--terracotta)}
.acc-btn .dn small{font:600 10px/1 var(--sans);letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:4px}
.acc-btn .date{font-size:13px;color:var(--ink-3)}
.acc-btn .title{font:600 17px/1.35 var(--sans);color:var(--alpine)}
.pm{position:relative;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);justify-self:end;transition:background .25s,border-color .25s}
.pm::before,.pm::after{content:"";position:absolute;left:7px;top:11px;width:9px;height:1.5px;background:var(--alpine);transition:transform .3s var(--ease)}
.pm::after{transform:rotate(90deg)}
.acc-item.open .pm{background:var(--alpine);border-color:var(--alpine)}
.acc-item.open .pm::before,.acc-item.open .pm::after{background:var(--paper)}
.acc-item.open .pm::after{transform:rotate(0)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-panel .inner{padding:0 22px 24px calc(22px + 78px + 16px)}
.acc-panel p{font-size:16px;margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.stag{font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:rgba(127,140,107,.16);color:var(--sage-deep)}
.stag.hot{background:rgba(192,92,70,.12);color:var(--terracotta-deep)}
.minimap{position:sticky;top:calc(var(--header-h) + 84px);background:var(--alpine);color:var(--on-dark);padding:30px;border-radius:6px;transition:top .4s var(--ease)}
.nav-hidden .minimap{top:84px}
.minimap h3{font-size:22px;color:var(--paper);margin-bottom:6px}
.minimap p{font-size:14px;color:var(--on-dark-2);margin-bottom:22px}
.dots{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.dot{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line-dark);display:grid;place-items:center;font:600 12px/1 var(--sans);color:var(--on-dark-2);transition:all .25s var(--ease)}
.dot:hover{border-color:var(--snow);color:var(--paper)}
.dot.in{border-color:var(--snow);color:var(--paper)}
.dot.on{background:var(--snow);border-color:var(--snow);color:var(--alpine);transform:scale(1.08)}
.legend{display:flex;gap:18px;margin-top:20px;font-size:12px;color:var(--on-dark-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.minimap .btn{width:100%;margin-top:24px}

/* --- Regional hubs ------------------------------------------------------- */
.hubs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hub{background:var(--alpine-2);border:1px solid var(--line-dark);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .35s}
.hub:hover{transform:translateY(-6px);border-color:rgba(255,198,32,.5)}
.hub .img{aspect-ratio:4/3;position:relative;overflow:hidden}
.hub .img::after{content:"Photo to come";position:absolute;right:12px;bottom:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(249,248,245,.7)}
.hub .img svg{position:absolute;inset:0;width:100%;height:100%;opacity:.35;transition:transform .8s var(--ease)}
.hub:hover .img svg{transform:scale(1.06)}
.hub .body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.hub .n{font:400 30px/1 var(--display);color:var(--snow);margin-bottom:14px}
.hub h3{font-size:22px;color:var(--paper);margin-bottom:8px}
.hub .loc{font-size:14px;color:var(--on-dark-2);margin-bottom:20px}
.daylink{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);padding:10px 14px;border-radius:999px;border:1px solid var(--line-dark);color:var(--paper);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.daylink:hover{background:var(--snow);border-color:var(--snow);color:var(--alpine)}
.g1{background:linear-gradient(150deg,#8C3B2E,#C05C46 45%,#D98A3C)}
.g2{background:linear-gradient(150deg,#5E5747,#A3927A 50%,#D8CBAE)}
.g3{background:linear-gradient(150deg,#6E432C,#B07449 50%,#DDBB90)}
.g4{background:linear-gradient(150deg,#E9DCBB,#E8B21C 55%,#9C6A2A)}
.g5{background:linear-gradient(150deg,#51272A,#A33A2E 50%,#E8B21C)}
.g6{background:linear-gradient(150deg,#2F4A36,#7F8C6B 50%,#C7CFA6)}

/* --- Artists ------------------------------------------------------------- */




/* --- Sponsors ------------------------------------------------------------ */
#sponsors{background:#1B2520}
.spot{display:grid;grid-template-columns:5fr 7fr;border-radius:8px;overflow:hidden;background:var(--alpine-2);border:1px solid var(--line-dark)}
.spot .img{position:relative;min-height:380px;background:linear-gradient(165deg,#3E5446 0%,#26332C 50%,#C05C46 150%)}
.spot .img svg{position:absolute;inset:0;width:100%;height:100%}
.spot .img.logo-panel{background:#fff;display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,64px)}
.spot .logo-panel img{width:100%;max-width:400px;height:auto}
.spot .body{padding:clamp(28px,4vw,52px)}
.spot h3{font-size:clamp(28px,3vw,36px);color:var(--paper);margin:18px 0 6px}
.spot .sub{color:var(--on-dark-2);font-size:15px;margin-bottom:28px}
.roi{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.roi li{display:flex;gap:14px;font-size:16px;color:var(--on-dark)}
.roi svg{width:22px;height:22px;flex-shrink:0;color:var(--snow);margin-top:2px}

/* --- Venue ---------------------------------------------------------------- */
.venue-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.venue-foot dl{display:flex;flex-wrap:wrap;gap:12px 40px;font-size:15px}
.venue-foot dt{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.venue-foot dd{color:var(--alpine);font-weight:500}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1080px){
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(3)::before{display:none}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .itin-grid{grid-template-columns:1fr}
  .minimap{display:none}
  .hubs{grid-template-columns:1fr 1fr}
  .spot{grid-template-columns:1fr}
  .spot .img{min-height:240px}
  .spot .img.logo-panel{min-height:0;padding:36px 28px}
  .spot .logo-panel img{max-width:280px}
  .subnav-label{display:none}
}
@media (max-width:720px){
  .hero .btn-row .btn{flex:1 1 100%}
  .facts{transform:translateY(48px);margin-top:48px}
  .fact{padding:18px 16px 20px}
  .fact dd{font-size:17px}
  .subnav .btn:not([data-explainer]){display:none}
  .subnav .btn[data-explainer]{min-height:38px;padding:0 13px}
  .subnav .btn[data-explainer] .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #experience{padding-top:120px}
  .nations{flex-wrap:wrap;justify-content:center;gap:26px 30px}
  .nations::before{display:none}
  .nation{width:26%}
  .flag{width:58px;height:58px;font-size:27px}
  .heritage{grid-template-columns:1fr}
  .bridge{justify-self:center;transform:rotate(90deg)}
  .tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 78%;scroll-snap-align:start}
  .acc-btn{grid-template-columns:auto 1fr 26px;grid-template-areas:"dn date pm" "title title pm";gap:6px 12px;padding:18px}
  .acc-btn .dn{grid-area:dn}
  .acc-btn .date{grid-area:date;align-self:end}
  .acc-btn .title{grid-area:title}
  .acc-btn .pm{grid-area:pm}
  .acc-panel .inner{padding:0 18px 20px}
  .hubs{grid-template-columns:1fr}
  .roi{grid-template-columns:1fr}
}

/* --- Field-site photos (swap in automatically; sample photos until replaced) */
.hub .img.ph-slot{border-radius:0;background-color:transparent}
.hub .img .ph-img{transition:opacity .6s ease,transform .8s var(--ease)}
.hub:hover .img .ph-img{transform:scale(1.06)}
.hub .img.has-img svg,.hub .img.has-img::after{display:none}

/* --- Itinerary download: second button under the day list on tablets/phones */
.itin-dl-mobile{display:none;margin-top:24px}
@media (max-width:1080px){.itin-dl-mobile{display:inline-flex}}
.minimap .btn svg,.itin-dl-mobile svg{width:15px;height:15px}

/* --- "edition" beside 2027 (option A) ------------------------------------- */
.ed-label{display:inline-block;font:400 .34em/1 var(--display);color:#D8664C;margin-left:.18em;vertical-align:top;position:relative;top:.12em;letter-spacing:.01em}
.js .ed-label{opacity:0;transform:translateY(35%);animation:fade-up .7s var(--ease) forwards;animation-delay:1.45s}
@media (max-width:720px){.ed-label{font-size:.42em;top:.08em}}

/* --- Participating nations: round flags with a cloth sheen (option C) ------ */
.nations{max-width:1000px}
.nations::before{left:5%;right:5%}
.flag.sheen{overflow:hidden;position:relative;border:0;padding:0;background:none;box-shadow:0 10px 22px -12px rgba(31,42,36,.6),inset 0 0 0 1px rgba(31,42,36,.1)}
.flag.sheen svg{display:block;width:100%;height:100%}
.flag.sheen::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 35%,rgba(0,0,0,.12) 60%,rgba(255,255,255,.18) 80%,rgba(0,0,0,.1) 100%)}
.nation.host .flag.sheen{border:0;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--terracotta),0 10px 22px -12px rgba(31,42,36,.6)}
.nation:hover .flag.sheen{transform:translateY(-6px)}
@media (max-width:720px){
  .nations{gap:22px 6px}
  .nation{width:23%;font-size:13px}
  .flag.sheen,.nation.host .flag.sheen{width:56px;height:56px;margin-top:0}
}
.dl-send{margin-top:22px;font-size:15px;color:var(--ink-3,#6b6b66)}
.dl-send a{color:var(--terracotta);font-weight:600}