:root{
  --hvit:#fcf9f0;
  --accent:#b8d1fe;
}
*{box-sizing:border-box}
html,body,#root{height:100%;}
body{
  margin:0;
  font-family: 'Epilogue', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--hvit);
  color:#0a0a0a;
  overflow-x:hidden;
}
.page-root{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.page-root > main{flex:1 0 auto}
.footer{margin-top:auto}
.header{padding:28px 0;text-align:center}
.brand{font-family:'Notable', sans-serif;letter-spacing:2px;font-size:28px;margin:0}
.nav-pill{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:77px; /* keeps vertical position */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:var(--accent);
  border:2px solid #000;
  border-radius:999px;
  /* Responsive fixed width: caps at 744px, otherwise 90% of container */
  width: min(744px, 90%);
  padding:10px clamp(12px, 3%, 28px);
  box-sizing:border-box;
  z-index:200;
}
.nav-item{
  background:transparent;
  border-radius:999px;
  padding:8px 18px;
  border:0;
  cursor:pointer;
  font-size:14px;
  min-width:88px;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  text-decoration:none;
  color:inherit;
}
/* Ensure anchors inside nav-pill don't show link styles */
.nav-item, .nav-item:link, .nav-item:visited, .nav-item:hover, .nav-item:active {
  text-decoration:none;
  color:inherit;
}
.nav-item.active{
  background:#fff;
  min-width:88px;
  z-index:2;
}

/* Decorative background for Turer page (right side) */
.turer-bg-right{position:absolute;left:1vw;top:12vh;width: min(40vw, 480px);height:auto;object-fit:cover;opacity:0.7;pointer-events:none;z-index:0}
.divider{width:2px;height:40px;background:rgba(0,0,0,0.2)}

.hero{position:relative;min-height:900px;padding:40px 60px}
.hero .bg-img{position:absolute;object-fit:cover;opacity:0.7;pointer-events:none; z-index: 0;}
.hero .img2-frame{left:5vw; top:3vh; width: min(28vw, 335px); aspect-ratio:3 / 4; overflow:hidden}
.hero .img2{width:100%; height:100%; object-fit:cover; object-position:100% 100%; transform:scale(1.5); transform-origin:100% 100%; display:block}
.hero .bg_img_right{right:6vw; top:28vh; width: min(40vw, 469px); height: auto}
.hero .img4{left:3vw; top:42vh; width: min(48vw, 654px); height: auto}

.hero-content{max-width:1025px;margin:120px auto 40px;text-align:center; z-index: 60; position:relative}
.hero-content .eyebrow{font-family:'Liberation Sans',sans-serif;font-weight:700;margin:0;opacity:0}
.headline{font-family:'Liberation Sans',sans-serif;font-size:170px;line-height:0.98;margin:0;color:#000;letter-spacing:-3.2px}
.sub{font-size:16px;line-height:25px;color:#0a0a0a;margin-top:16px}
.cta{display:inline-block;background:#000;color:#fff;padding:14px 28px;border-radius:999px;margin-top:18px;font-size:16px}

.poster-left{
  position:fixed;
  left:16vh;
  top:14vh;
  width: min(16vw, 353px);
  height: auto;
  z-index:120;
  pointer-events:none}
.poster-left img{
  width:100%;
  height:auto;
  object-fit:cover}
.poster-right{
  position:fixed;
  right:6vw;
  top:58vh;
  width: min(12vw, 346px);
  height: auto;
  z-index:120;
  pointer-events:none}
.poster-right img{
  width:100%;
  height:auto;
  object-fit:cover}
  
.countdown{
    position:relative;
    background:var(--accent);
    width: min(896px, 95%);
    margin:160px auto 60px;
    padding:64px 24px;
    border-radius:8px}
.countdown h4{
    text-align:center;
    font-family:'Liberation Sans',sans-serif;
    font-size:45px;
    margin:0 0 24px}
.count-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px}
.count-box{
    background:#fff;
    border:2px solid #000;
    border-radius:10px;
    padding:20px 12px;
    text-align:center}
.count-box .big{
    font-family:'Liberation Sans',sans-serif;
    font-size:72px;
    margin-bottom:8px}
.count-box .label{font-size:20px;
    letter-spacing:0.5px;
    text-transform:uppercase}

.hype-wall{width: min(896px, 95%);margin:28px auto;padding:20px;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(248,248,248,0.95));border:2px solid #000;border-radius:12px}
.hype-inner{padding:8px 12px}
  .hype-wall h4{margin:0 0 12px;font-family:'Liberation Sans',sans-serif;text-align:center}
.hype-form{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.hype-form input,.hype-form textarea{border:2px solid #000;padding:10px;border-radius:8px;font-size:14px;width:100%;box-sizing:border-box}
.hype-form textarea{min-height:72px;resize:vertical}
.hype-form button{align-self:flex-start;background:#000;color:#fff;padding:10px 16px;border-radius:999px;border:0;cursor:pointer}
.hype-entries{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;padding-right:6px}
.hype-entry{background:#fff;border:1px solid rgba(0,0,0,0.08);padding:10px;border-radius:8px}
.hype-meta{font-size:13px;color:#333;margin-bottom:6px}
.hype-msg{font-size:15px;line-height:1.4}
.hype-empty{color:#666;padding:8px}


.footer{border-top:2px solid #000;background:#fff;padding:12px 0;margin-top:40px;position:relative;z-index:50}
.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;padding:0 20px}
.footer .brand{font-family:'Notable',sans-serif;font-size:35px}
.footer-note{text-align:center;font-size:14px;line-height:1.3;margin-top:6px;padding:0 20px}

/* Info page specific styles */
.info-page{position:relative;min-height:0;padding:40px 60px;background:var(--hvit)}
.bg-img.img-info{position:absolute;right:6vw;top:2vh;width: min(30vw, 459px);height:auto;object-fit:cover;opacity:0.7;pointer-events:none; z-index: 0;}
.info-content{position:relative;left:50px;top:120px;max-width:880px;z-index: 60;}
.info-headline{font-family:'Liberation Sans',sans-serif;font-weight:700;font-size:40px;margin:0 0 24px}
.accordion{display:block;margin-top:8px}
.acc-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;width:875px}
.acc-title{font-family:'Epilogue',sans-serif;font-size:16px;line-height:25px}
.acc-icon img{width:24px;height:24px}
.acc-line{display:block;width:100%;max-width:1056px;margin:8px 0 16px}

/* When using <details class="acc-row"> make summary and content stack vertically */
details.acc-row{display:block;width:100%;padding:0;margin:8px 0;border:2px solid #000;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
details.acc-row > summary.acc-title{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:12px 16px;font-size:16px}
details.acc-row > summary.acc-title::-webkit-details-marker{display:none}
details.acc-row > summary.acc-title::after{content:"\002B";font-size:20px;line-height:1;transition:transform .18s ease, opacity .18s ease}
details.acc-row[open] > summary.acc-title::after{content:"\2212";transform:rotate(0)}
details.acc-row .acc-content{padding:0 16px;color:#222;max-height:0;overflow:hidden;transition:max-height .32s ease, padding .18s ease}
details.acc-row[open] .acc-content{padding:12px 16px 18px;max-height:1200px}
details.acc-row .acc-content p{margin:0 0 10px}
.info-posters .poster-left{
  position:fixed;
  left:16vh;
  top:8vh;
  width: min(10vw, 353px);
  height: auto;
  z-index:120;
  pointer-events:none;
  transform:scaleX(-1);
  }
.info-posters .poster-left img{width:100%;
  height:auto;
  object-fit:cover}
.info-posters .poster-right{position:fixed;
  right:4vw;
  top:50vh;
  width: min(16vw, 282px);
  height:auto;
  z-index:120;
  pointer-events:none}
.info-posters .poster-right img{width:100%;
  height:auto;
  object-fit:cover}

/* Turer page styles */
.turer-page{
  position:relative;
  min-height:900px;
  padding:40px 60px;
  background:var(--hvit)}
.turer-container{max-width:1177px;margin:0 auto;position:relative;z-index:20}
.turer-headline{font-family:'Liberation Sans',sans-serif;font-weight:700;font-size:40px;margin:0 0 24px}
.turer-map{width:100%;margin-bottom:28px}
.map-frame{border:2px solid #000;border-radius:16px;overflow:hidden;height:413px}
.map-frame img{width:100%;height:100%;object-fit:cover}
.section-title{font-family:'Liberation Sans',sans-serif;font-size:40px;margin:28px 0}
.trips-grid{display:flex;gap:18px}
.trip-card{flex:1;border:2px solid #000;border-radius:16px;overflow:hidden;padding:12px;background:#fff}
.trip-card img{width:100%;height:220px;object-fit:cover;border-radius:8px}
.trip-title{margin-top:8px;font-size:14px}
.turer-poster{
  position:fixed;
  right:0;
  top:4vh;
  width: min(20vw, 474px);
  height:auto;
  pointer-events:none;
   z-index:120}
.turer-poster img{
  width:100%;
  height:auto;
  object-fit:cover}

/* Trip stories */
.trip-stories{margin:40px auto 0;width:min(960px, 92%);display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px}
.trip-story{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:190px}
.trip-story .trip-bubble{
  position:absolute;
  top:170px;
  left:50%;
  transform:translateX(-50%);
  width:min(720px, 92vw);
}
.trip-story .trip-bubble-tail{
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  top:-12px;
  border-left:0;
  border-bottom:0;
  border-right:2px solid #000;
  border-top:2px solid #000;
}
.trip-bubble{position:relative;flex:1;background:#fff;border:2px solid #000;border-radius:18px;padding:18px 20px;box-shadow:0 8px 20px rgba(0,0,0,0.08);display:none;z-index:10}
.trip-story[open]{padding-bottom:12px}
.trip-face{list-style:none;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.trip-face::-webkit-details-marker{display:none}
.trip-face img{width:148px;height:148px;border-radius:50%;object-fit:cover;border:2px solid #000;background:#fff}
.trip-face-name{font-size:14px;text-transform:uppercase;letter-spacing:0.6px}
.trip-bubble{position:relative;flex:1;background:#fff;border:2px solid #000;border-radius:18px;padding:18px 20px;box-shadow:0 8px 20px rgba(0,0,0,0.08);display:none}
.trip-story[open] .trip-bubble{display:block}
.trip-bubble-title{margin:0 0 8px;font-family:'Liberation Sans',sans-serif;font-size:20px}
.trip-bubble-text{margin:0;line-height:1.5}
.trip-bubble-tail{position:absolute;left:-12px;top:28px;width:24px;height:24px;background:#fff;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(45deg)}

/* Program page styles */
.program-page{position:relative;min-height:900px;padding:40px 60px;background:var(--hvit)}
.program-bg{position:absolute;left:4vw;top:20vh;width: min(32vw, 493px);height:auto;object-fit:cover;opacity:0.5;pointer-events:none; z-index:0}
.program-frame{position:relative;margin:80px auto 40px;max-width:910px}
.program-tabs{display:flex;gap:12px;position:absolute;left:50%;top:-16px;transform:translateX(-50%)}
.tab{padding:12px 24px;border-radius:12px 12px 0 0;font-size:19.7px;text-decoration:none;color:#000;border:1.6px solid #000}
.tab-friday{background:var(--gul,#f2c366)}
.tab-saturday{background:var(--blå,#b8d1fe)}
.tab-sunday{background:var(--grønn,#5ca374)}
.tab-monday{background:#f2a9b6}
.tab.active{box-shadow:inset 0 -10px 0 rgba(255,255,255,1); z-index:2}
.program-inner{display:block;border:1.6px solid #000;background:var(--gul,#f2c366);border-radius:12px;padding:24px;margin-top:40px}
.merch-signup{max-width:1177px;margin-top:18px;width:100%;}
.merch-form{display:flex;flex-direction:column;gap:8px}
.merch-form input,.merch-form select{border:2px solid #000;padding:10px;border-radius:8px;font-size:14px;width:100%;box-sizing:border-box}
.merch-form button{align-self:flex-start;background:#000;color:#fff;padding:10px 16px;border-radius:999px;border:0;cursor:pointer}
.merch-note{font-size:13px;color:#444;margin-top:8px}
.merch-confirm{background:#e6ffed;border:1px solid #7ad08a;padding:12px;border-radius:8px;color:#084c1b}
.merch-grid{display:flex;gap:24px;align-items:flex-start;max-width:1177px;width:100%;margin:0 auto}
.merch-left{flex:0 0 60%;max-width:60%}
.merch-image{flex:0 0 40%;max-width:40%}
.merch-image img{width:100%;height:auto;border:2px solid #000;border-radius:8px;display:block;object-fit:contain}

/* Caption for merch image: show as normal text above the image (no overlay) */
.merch-image{position:relative}
.merch-caption{position:static;background:transparent;padding:0;border:0;font-size:14px;color:#333;margin-bottom:8px;display:block}
.program-inner-content{display:flex;align-items:stretch;background:#fff;border-radius:6px;overflow:hidden}
.program-schedule{width:338px;padding:28px}
.program-note{text-align:center;font-weight:700;margin:0 0 12px}
.program-schedule .row{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:start;padding:12px 8px}
.program-schedule .row > div:last-child{word-break:break-word;hyphens:auto;text-align:left}
.program-image{flex:1;padding:24px}
.program-image img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.program-poster{position:fixed;right:18vw;top:19vh;width: min(18vw, 242px);height:auto;pointer-events:none; z-index:120}
.program-poster img{width:100%;height:auto;object-fit:cover}

@media (max-width:900px){
  .header{padding:12px 0 6px}
  .brand{font-size:22px}
  .headline{font-size:48px}
  .hero{padding:120px 16px 32px;min-height:auto}
  .hero-content{margin-top:16px;padding:0 12px}
  .countdown{width:100%;margin:72px auto 24px;padding:20px 12px}
  .countdown h4{font-size:14px;white-space:nowrap}
  .count-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .count-box{padding:12px 8px}
  .count-box .big{font-size:34px}
  /* keep home photos visible on mobile, but small */
  .hero .img2-frame, .hero .bg_img_right, .hero .img4{display:block;opacity:0.6}
  .hero .img2-frame{left:4vw;top:14vh;width:min(24vw,120px)}
  .hero .bg_img_right{right:4vw;top:22vh;width:min(26vw,140px)}
  .hero .img4{left:38%;top:48vh;width:min(42vw,220px);transform:translateX(-50%)}
  /* keep other decorative images hidden on mobile */
  .bg-img.img-info{display:block;opacity:0.6;left:4vw;right:auto;top:auto;bottom:14vh;width:min(30vw,160px)}
  .program-bg{display:none}

  /* make nav pill fixed and full-bleed friendly */
  .nav-pill{position:fixed;top:64px;left:50%;transform:translateX(-50%);width:calc(100% - 24px);padding:8px 10px;gap:6px;z-index:220;flex-wrap:nowrap}
  .nav-item{padding:6px 8px;font-size:12px;min-width:0}
  .nav-item.active{min-width:0}

  /* program layout stacks vertically */
  .program-frame{margin:52px auto 16px;padding:0 12px;max-width:100%}
  .program-tabs{
    position:static;
    left:auto;
    top:auto;
    display:flex;
    justify-content:center;
    margin:0 auto 12px;
    gap:6px;
    flex-wrap:wrap;
    width:100%;
    padding:0 6px;
    box-sizing:border-box;
    transform:none;
  }
  .program-tabs .tab{flex:1 1 46%;min-width:0;text-align:center;font-size:15px;padding:10px 10px}
  .program-inner-content{flex-direction:column}
  .program-schedule{width:100%;padding:16px}
  .program-image{padding:12px}
  .program-image img{height:auto}

  /* trips stack */
  .turer-page{padding:24px 16px}
  .turer-container{max-width:100%}
  .trips-grid{flex-direction:column;gap:12px}
  .trip-card img{height:auto}
  .map-frame{height:240px}

  /* info layout adjusts */
  .info-page, .turer-page, .program-page{padding:24px 16px}
  .info-headline, .turer-headline, .section-title{font-size:32px}
  .info-headline{text-align:center}
  .info-content{left:0;top:56px;max-width:100%;padding:0 12px}
  .acc-row{width:100%;flex-direction:column;align-items:flex-start;padding:8px 0}
  .trip-stories{margin-top:24px;grid-template-columns:repeat(2, minmax(0, 1fr))}
  .trip-story{align-items:center;min-height:120px}
  .trip-face{margin-top:25px}
  .trip-face img{width:78px;height:78px}
  .trip-story .trip-bubble{
    position:fixed;
    left:50%;
    right:auto;
    width:calc(100% - 24px);
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
    top:50%;
    z-index:200;
    padding:12px 14px;
    box-sizing:border-box;
    transform:translate(-50%, -50%);
  }
  .trip-bubble-title{font-size:15px}
  .trip-bubble-text{font-size:12px}
  .trip-bubble-tail{top:-12px;border-left:0;border-bottom:0;border-right:2px solid #000;border-top:2px solid #000;left:50%;right:auto;transform:translateX(-50%) rotate(45deg)}
  .trip-story:nth-child(odd) .trip-bubble-tail{left:50%;right:auto;transform:translateX(-50%) rotate(45deg)}
  .trip-story:nth-child(even) .trip-bubble-tail{left:50%;right:auto;transform:translateX(-50%) rotate(45deg)}
  details.acc-row > summary.acc-title{
    flex-wrap:wrap;
    white-space:normal;
    line-height:1.3;
    padding:12px 14px;
  }

  /* footer stacks */
  .footer-inner{flex-direction:column;align-items:center;gap:12px;padding:12px;max-width:100%;width:calc(100% - 24px);box-sizing:border-box;margin:0 auto}
  .footer-inner > *{text-align:center;width:100%;font-size:14px;line-height:1.15}
  .footer{padding:10px 0;overflow:hidden}
  .footer .brand{font-size:18px}

  /* keep posters visible on mobile, but shrink and anchor them */
  .poster-left, .poster-right, .info-posters .poster-left, .info-posters .poster-right, .turer-poster, .program-poster{display:block;opacity:1}
  .poster-left{left:2vw;top:13vh;width:min(28vw,160px)}
  .poster-right{right:2vw;top:62vh;width:min(22vw,150px)}
  .info-posters .poster-left{left:2vw;top:10vh;width:min(24vw,150px)}
  .info-posters .poster-right{right:2vw;top:60vh;width:min(24vw,150px)}
  .turer-poster{right:2vw;top:10vh;width:min(28vw,170px)}
  .program-poster{right:2vw;top:62vh;width:min(24vw,150px)}

  /* hype wall mobile fit */
  .hype-wall{width:calc(100% - 40px);margin:40px auto 24px;padding:14px}
  .hype-inner{padding:4px 6px}
  .hype-form input,.hype-form textarea{font-size:13px}
  .hype-form textarea{min-height:64px}
  .hype-entries{max-height:420px}
  .hype-entry{padding:8px}
  .hype-msg{font-size:14px}
  /* stack merch image under the form on small screens */
  .merch-grid{flex-direction:column;gap:16px;padding:0 12px;box-sizing:border-box}
  .merch-left{flex:0 0 100%;width:100%;max-width:100%}
  .merch-image{flex:0 0 100%;width:100%;max-width:100%}
  .merch-image img{max-width:100%;height:auto;display:block}
  .merch-caption{position:static;background:transparent;padding:0;border-radius:0;border:0;font-size:13px;color:#333;margin-bottom:6px}
}

@media (max-width:480px){
  .headline{font-size:38px}
  .nav-pill{top:64px;padding:6px 8px;width:calc(100% - 16px);gap:6px}
  .nav-item{font-size:11px}
  .cta{padding:10px 16px;font-size:14px}
  .hero{padding:100px 12px 24px}
  .hero-content{margin-top:12px}
  .countdown{margin:52px auto 20px;padding:16px 10px}
  .countdown h4{font-size:12px}
  .count-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .count-box{padding:10px 6px}
  .count-box .big{font-size:28px}
  .brand{font-size:20px}
  .program-frame{margin:44px auto 12px}
  .program-tabs{padding:0 4px;gap:6px}
  .program-tabs .tab{font-size:12px;padding:8px 8px;flex:1 1 44%;min-width:0}
  .info-content{top:40px}
  .hype-wall{width:calc(100% - 28px);margin:32px auto 20px;padding:10px}
  .hype-form input,.hype-form textarea{font-size:12px}
  .hype-entries{max-height:320px}
  details.acc-row > summary.acc-title{font-size:14px}
  /* further reduce footer text on very small screens */
  .footer-inner > *{font-size:12px}
  .footer .brand{font-size:16px}
}