/* ===========================================================
   Jakob Thrane — Comedy Tour 2027
   Palette/structure mirrors the Tajmer tour template
   (logic from nikolajstokholm.dk), colours from the JT PSD.
   =========================================================== */
:root{
  --cream:      #FFE4CB;   /* cotton-like text on olive */
  --cotton:     #F2E7DA;
  --cream-2:    #E8D8D0;
  --yellow:     #FCD000;   /* accent / headings */
  --brown:      #88694D;
  --mud:        #3A2A1C;   /* dark buttons / dark text */

  --olive-top:  #9D9468;
  --olive:      #8A8B62;
  --olive-mid:  #6E7553;
  --olive-dark: #464E2C;
  --olive-deep: #39432B;

  --tan:        #A78B71;   /* booking */
  --cotton-bg:  #F5DCC6;   /* newsletter / light */
  --footer-bg:  #735437;

  --red:        #E9252F;
  --green:      #42E6A7;

  --font-display: 'guildhall-compressed','Oswald','Arial Narrow',sans-serif;
  --font-hero:    'guildhall-compressed','Anton','Oswald',sans-serif;
  --font-body:    'roboto','Roboto',system-ui,sans-serif;
  --font-ui:      'roboto','Roboto',system-ui,sans-serif;

  --wrap: 77.5rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:var(--olive-mid) var(--olive-deep);scrollbar-width:thin;scrollbar-gutter:stable}
body{
  font-family:var(--font-body);color:var(--cream);background:var(--olive-dark);
  line-height:1.6;overflow-x:hidden;
  /* Font smoothing: this site is almost entirely light text on dark
     backgrounds, and that is the one case where `antialiased` hurts.
     It swaps macOS/Safari's subpixel rendering for grayscale, which
     drops roughly a quarter of the apparent stroke weight — the reason
     city names and button labels looked washed out and blurry. `auto`
     restores the browser default (subpixel where available) so the
     same type renders noticeably crisper. */
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* The HTML hidden attribute must always win, even on rules like
   .tour-row { display:grid } that out-specify the UA stylesheet. */
[hidden]{display:none!important}

/* ---------- Accessibility utilities ---------- */
.screen-reader-text{
  position:absolute!important;width:0.0625rem;height:0.0625rem;
  padding:0;margin:-0.0625rem;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-624.938rem;top:0;z-index:1000;
  padding:0.75rem 1.25rem;background:var(--yellow);color:var(--mud);
  font-family:var(--font-ui);font-weight:700;text-decoration:none;
  border-radius:0 0 0.25rem 0;
}
.skip-link:focus{left:0}

/* ---------- Site-wide scrollbar ---------- */
::-webkit-scrollbar{width:0.75rem;height:0.75rem}
::-webkit-scrollbar-track{background:var(--olive-deep)}
::-webkit-scrollbar-thumb{
  background:var(--olive-mid);border-radius:0.5rem;
  border:0.1875rem solid var(--olive-deep);
}
::-webkit-scrollbar-thumb:hover{background:var(--yellow)}
::-webkit-scrollbar-corner{background:var(--olive-deep)}

/* ---------- Text selection ---------- */
::selection{background:var(--yellow);color:var(--mud)}
::-moz-selection{background:var(--yellow);color:var(--mud)}

/* ---------- Focus styling ---------- */
:focus{outline:none}
:focus-visible{
  outline:0.125rem solid var(--yellow);outline-offset:0.1875rem;
  border-radius:0.1875rem;
  box-shadow:0 0 0 0.25rem rgba(252,208,0,.18);
}
.tour-link:focus-visible,.hero__cta:focus-visible,.btn-form:focus-visible,
.btn-pill:focus-visible,.menu-btn:focus-visible,.navmenu__close:focus-visible,
.hero__social a:focus-visible{outline-offset:0.25rem}
.side-nav .dot:focus-visible{outline-offset:0.25rem;border-radius:50%}
.skip-link:focus{
  position:fixed!important;z-index:10000;top:1rem;left:1rem;
  width:auto;height:auto;padding:.75rem 1rem;margin:0;
  clip:auto!important;clip-path:none;background:var(--cream);color:var(--mud);
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 2.5rem;width:100%}
@media (min-width:901px){
  .wrap{padding:0 6.875rem}
}

/* ---------- shared headings ---------- */
.section-title{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.045em;line-height:.9;color:var(--yellow);
  font-size:clamp(3rem,7vw,5.5rem);
}
.section-title--cotton{color:var(--cotton)}
.section-title--mud{color:var(--mud)}
.section-title--brown{color:var(--brown)}

/* ---------- pill buttons ---------- */
.btn-pill{
  display:inline-block;font-family:var(--font-ui);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;
  padding:.85em 2em;border-radius:62.4375rem;cursor:pointer;border:none;
  transition:transform .15s,filter .15s,background .2s,color .2s;
}
.btn-pill:hover{transform:translateY(-0.125rem)}
.btn-pill--dark{background:var(--mud);color:var(--cream)}
.btn-pill--yellow{background:var(--yellow);color:var(--mud)}

/* Rectangular brown form button (Booking / Newsletter) — sized to match inputs */
.btn-form{
  display:inline-block;font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.09em;font-size:1.05rem;line-height:1.1;
  color:var(--cotton);background:var(--brown);border:0.0625rem solid var(--brown);cursor:pointer;
  padding:0.8125rem 2rem;border-radius:0.1875rem;
  transition:background .2s,border-color .2s,color .2s,transform .1s;
}
.btn-form:hover{background:#75583E;border-color:#75583E}
.btn-form:active{transform:translateY(0.0625rem)}
.booking__submit{margin-top:0.375rem}
.booking__form .btn-form{display:inline-block;width:auto}
.newsletter__form .btn-form{padding:0.8125rem 2rem;font-size:1.05rem}

/* ===========================================================
   Olive sections (hero / tourplan / om / presse / downloads)
   =========================================================== */
.section-olive{
  position:relative;padding:5.625rem 0;
  background:linear-gradient(180deg,var(--olive-top) 0%,var(--olive) 38%,var(--olive-mid) 70%,var(--olive-dark) 100%);
}
.section-olive--deep{
  background:linear-gradient(180deg,var(--olive-dark) 0%,#5C6240 35%,#8F9069 70%,#C3B58E 100%);
}
.section-olive > *{position:relative;z-index:2}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;color:var(--cream);
  background:linear-gradient(177deg,var(--olive-top) 0%,var(--olive) 45%,var(--olive-mid) 78%,var(--olive-dark) 100%);
}
.hero__bg{display:none}
.hero__portrait-wrap{
  position:absolute;right:0;bottom:0;height:100%;width:auto;z-index:2;
  pointer-events:none;will-change:transform;
  transform:translate3d(0, var(--parallax-y, 0), 0);
}
.hero__portrait{
  position:absolute;right:-8%;bottom:0;height:118%;width:auto;max-width:none;
  object-fit:contain;object-position:bottom;
  pointer-events:none;user-select:none;transform-origin:bottom right;
  opacity:0;transform:translateY(4.375rem);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.hero__portrait.is-up{opacity:1;transform:translateY(0)}
.om__portrait{will-change:transform}
.newsletter__art{will-change:transform}
.hero__overlay{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(40,42,22,.45) 0%,rgba(40,42,22,.12) 38%,transparent 60%),
             linear-gradient(180deg,transparent 60%,rgba(40,46,24,.4) 100%);
}
.hero__content{
  position:relative;z-index:4;width:54%;max-width:47.5rem;
  margin-left:6%;text-align:center;
}
@media (max-width:900px){.hero__content{width:100%;margin:0;padding:0 1.5rem;text-align:center}}
/* Fluid hero typography — every size is clamp(min, vw-based, current-max).
   The max equals the previous desktop value, so big screens look identical;
   below that, each line scales smoothly with the viewport. */
.hero__presenter{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.2em;
  font-size:clamp(.72rem, 1.15vw, 1rem);
  color:var(--yellow);margin-bottom:1rem;
  text-shadow:0 0.125rem 0.625rem rgba(30,34,16,.45);
}
.hero__title{
  font-family:var(--font-hero);font-weight:400;text-transform:uppercase;
  color:var(--yellow);line-height:.92;letter-spacing:.015em;
  font-size:clamp(3.9rem, 10vw, 8.6rem);
  text-shadow:0 0.25rem 1.375rem rgba(30,34,16,.3);
}
.hero__tagline{display:block;font-size:.54em;margin-top:.16em;letter-spacing:.015em;line-height:.95}
.hero__tour{
  display:block;font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(1.7rem, 3.3vw, 3.1rem);
  color:var(--yellow);margin-top:2.2rem;
  text-shadow:0 0.25rem 1.375rem rgba(30,34,16,.3);
}
.hero__cta{
  display:inline-block;margin-top:1.4rem;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(.9rem, 1.4vw, 1.15rem);line-height:1;
  padding:0.875rem 1.5rem;border-radius:0.25rem;
  background:var(--cream);color:var(--olive-deep);
  transition:transform .15s,background .2s,color .2s;
}
.hero__cta:hover{transform:translateY(-0.0625rem);background:var(--yellow);color:var(--olive-deep)}

@media (min-width:901px){
  .hero{padding:7.5rem 0 8.75rem}
  .hero__presenter{letter-spacing:.26em;margin-bottom:1.8rem}
  .hero__title{line-height:.94}
  .hero__tagline{margin-top:.18em}
  .hero__tour{margin-top:2.6rem}
  .hero__cta{margin-top:2.2rem;padding:1.0625rem 2rem}
  /* Zoom-in framing: anchor top, taller image, body extends past the section bottom (clipped). */
  .hero__portrait{top:-5%;bottom:auto;height:150%;object-position:top}
}
/* Smaller desktops / tablets — shift the portrait further right so the face
   clears the centered title and stays visible inside the section. */
@media (min-width:901px) and (max-width:1280px){
  .hero__portrait{right:-18%}
}

/* hero corners — fixed on tablet/desktop so they persist across all sections */
.hero__topleft{position:fixed;top:1.875rem;left:2.5rem;z-index:60}
.hero__social{position:fixed;top:1.875rem;right:2.5rem;z-index:90;display:flex;gap:0.625rem;list-style:none}
.hero__social a{
  width:2.625rem;height:2.625rem;border-radius:50%;background:var(--cream);
  display:grid;place-items:center;transition:transform .15s,background .2s}
.hero__social svg{width:1.0625rem;height:1.0625rem;fill:var(--olive-mid);transition:fill .2s}
.hero__social a:hover{background:var(--yellow);transform:scale(1.06)}
.hero__social a:hover svg{fill:var(--mud)}

.menu-btn{
  width:2.875rem;height:2.875rem;border-radius:50%;background:var(--cream);color:var(--olive-mid);
  border:none;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .15s}
.menu-btn svg{width:1.5rem;height:1.5rem}
.menu-btn:hover{background:var(--yellow);color:var(--mud);transform:scale(1.06)}

.hero__logo{
  position:fixed;right:2.5rem;bottom:1.875rem;z-index:90;
  display:inline-block;width:4.125rem;height:4.1875rem;
  color:var(--cream);
  filter:drop-shadow(0 0.125rem 0.5rem rgba(0,0,0,.35));
  transform-origin:center;
  transition:color .25s,transform .4s cubic-bezier(.34,1.56,.64,1),filter .25s;
}
.hero__logo:hover{
  color:var(--yellow);
  transform:rotate(-6deg) scale(1.08);
  filter:drop-shadow(0 0.25rem 0.875rem rgba(0,0,0,.45));
}
.hero__logo svg{width:100%;height:100%;display:block;fill:currentColor}
.hero__logo svg path,.footer__logo svg path{fill:currentColor}

/* side dots bottom-left — fixed across sections */
.side-nav{position:fixed;left:2.5rem;bottom:2.125rem;z-index:90;display:flex;flex-direction:column;gap:0.75rem}
.side-nav .dot{width:0.75rem;height:0.75rem;border-radius:50%;background:rgba(255,236,200,.5);position:relative;transition:background .2s,box-shadow .2s,transform .2s}
.side-nav .dot.active,.side-nav .dot:hover{background:var(--yellow)}
.side-nav .dot::after{content:attr(data-label);position:absolute;left:1.375rem;top:50%;transform:translateY(-50%);font-family:var(--font-ui);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cream);white-space:nowrap;opacity:0;transition:opacity .2s}
.side-nav .dot:hover::after{opacity:1}

/* ===========================================================
   Overlay menu
   =========================================================== */
.navmenu{
  position:fixed;inset:0;z-index:200;
  background:linear-gradient(180deg,rgba(110,117,83,.78) 0%,rgba(70,78,44,.78) 60%,rgba(57,67,43,.82) 100%);
  -webkit-backdrop-filter:blur(1.25rem) saturate(140%);
  backdrop-filter:blur(1.25rem) saturate(140%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.navmenu.is-open{opacity:1;visibility:visible}
/* Same coordinates as the .menu-btn that opens the overlay so the icons
   swap in place rather than visually jumping when the menu opens. */
.navmenu__close{position:fixed;top:1.875rem;left:2.5rem;width:2.875rem;height:2.875rem;border-radius:50%;background:var(--cream);color:var(--olive-mid);border:none;font-size:1.1rem;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s,transform .15s;z-index:210}
@media (max-width:900px){
  .navmenu__close{
    top:max(1.125rem, env(safe-area-inset-top, 0) + 0.75rem);
    left:max(1.125rem, env(safe-area-inset-left, 0) + 0.75rem);
    width:2.5rem;height:2.5rem;
  }
}
.navmenu__close:hover{background:var(--yellow);color:var(--mud);transform:scale(1.06)}
.navmenu__links{display:flex;flex-direction:column;gap:0.625rem;text-align:center}
.navmenu__links a{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,4.5rem);letter-spacing:.03em;color:var(--cream);line-height:1;
  opacity:0;transform:translateY(1.25rem);
  transition:opacity .5s ease,transform .5s ease;
}
.navmenu__links a:hover{color:var(--yellow)}
.navmenu.is-open .navmenu__links a{opacity:1;transform:translateY(0)}
.navmenu.is-open .navmenu__links a:nth-child(1){transition-delay:.12s}
.navmenu.is-open .navmenu__links a:nth-child(2){transition-delay:.18s}
.navmenu.is-open .navmenu__links a:nth-child(3){transition-delay:.24s}
.navmenu.is-open .navmenu__links a:nth-child(4){transition-delay:.30s}
.navmenu.is-open .navmenu__links a:nth-child(5){transition-delay:.36s}

/* ===========================================================
   TOURPLAN
   =========================================================== */
.tourplan__head{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;margin-bottom:1.625rem}
.tourplan__controls{display:flex;align-items:center;gap:0.875rem;margin-left:auto;min-width:0}

/* Ønskeskyen button inside the overlay menu. */
.navmenu__gowish{margin-top:2.25rem;opacity:0;transform:translateY(1.25rem);transition:opacity .5s ease .42s,transform .5s ease .42s}
.navmenu.is-open .navmenu__gowish{opacity:1;transform:translateY(0)}

/* Size round cloud buttons to match the social circles. */
.hero__social-gowish,.tourplan__gowish{display:flex;align-items:center;flex:none}
.hero__social-gowish .gowish-btn-rounded,
.tourplan__gowish .gowish-btn-rounded{
  width:2.625rem;height:2.625rem;padding:0;border:0;cursor:pointer;
  background-color:transparent;background-position:center;background-repeat:no-repeat;
  background-size:cover;border-radius:50%;
  transition:transform .15s;
}
.tourplan__gowish .gowish-btn-rounded{margin-right:0}
.hero__social-gowish .gowish-btn-rounded:hover,
.tourplan__gowish .gowish-btn-rounded:hover{transform:scale(1.06)}
.hero__social-gowish .gowish-btn-rounded:focus-visible,
.tourplan__gowish .gowish-btn-rounded:focus-visible{outline-offset:0.25rem}

.toggle{
  display:inline-flex;align-items:center;gap:0.625rem;cursor:pointer;
  background:transparent;color:var(--cream);
  border:0.0625rem solid rgba(255,236,200,.55);
  font-family:var(--font-body);font-weight:500;font-size:.9rem;
  padding:0.75rem 1.125rem;border-radius:0.25rem;line-height:1.1;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}
.toggle:hover{border-color:var(--cream)}
.toggle:has(input:checked){background:var(--cream);color:var(--mud);border-color:var(--cream)}
.toggle[hidden]{display:none}
.toggle input{
  appearance:none;-webkit-appearance:none;
  width:1rem;height:1rem;border-radius:0.1875rem;cursor:pointer;
  border:0.09375rem solid var(--cream);background:transparent;
  display:grid;place-items:center;flex:none;
  transition:background .15s,border-color .15s;
}
.toggle:has(input:checked) input{border-color:var(--yellow)}
.toggle input:checked{background:var(--yellow);border-color:var(--yellow)}
.toggle input:checked::after{
  content:"";width:0.5625rem;height:0.3125rem;
  border-left:0.125rem solid var(--mud);border-bottom:0.125rem solid var(--mud);
  transform:rotate(-45deg) translate(0.0625rem,-0.0625rem);
}
.search{position:relative;width:20rem;max-width:100%}
.search input{
  width:100%;background:transparent;
  border:0.0625rem solid rgba(255,236,200,.55);border-radius:0.25rem;
  color:var(--cream);font-family:var(--font-body);font-size:.9rem;
  padding:0.75rem 2.75rem 0.75rem 1.125rem;line-height:1.1;outline:none;
  transition:border-color .2s,background .2s;
}
.search input:hover{border-color:var(--cream)}
.search input::placeholder{color:rgba(255,236,200,.65)}
.search input:focus{border-color:var(--cream);background:rgba(255,236,200,.08)}
.search__icon{position:absolute;right:0.875rem;top:50%;transform:translateY(-50%);pointer-events:none}
.search__icon svg{width:1rem;height:1rem;fill:var(--cream)}

/* Tourplan section override — custom gradient per spec */
.tourplan.section-olive{
  background:linear-gradient(180deg, #545e3f 0%, #99956f 100%);
}
.tour-group{margin-top:4rem}
.tour-group:first-of-type{margin-top:3rem}
.tourplan__main-title{font-size:clamp(2.8rem,6vw,4.4rem);line-height:.9}
.subsection-title{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.045em;line-height:1;color:var(--yellow);
  font-size:clamp(1.8rem,3vw,2.3rem);margin-bottom:1.125rem;
}
.tourplan__head .section-title{margin-bottom:0}

.tourlist{display:flex;flex-direction:column}
.tour-row{
  position:relative;
  display:grid;grid-template-columns:minmax(12.5rem,1.1fr) 10.625rem 1.4fr auto auto;align-items:center;gap:1.375rem;
  padding:1rem 0.75rem;margin:0 -0.75rem;border-radius:0.375rem;
  border-bottom:0.0625rem solid rgba(255,255,255,.18);
  transition:background-color .2s ease;
}
.tour-row:not(.tour-row--past){cursor:pointer}
.tour-row:hover{background:rgba(255,255,255,.06)}
/* Stretched link — clicking anywhere on a non-past row activates its ticket link */
.tour-row:not(.tour-row--past) .tour-link::after{
  content:"";position:absolute;inset:0;z-index:1;
}
/* Mirror the button's hover state when the row is hovered */
.tour-row:not(.tour-row--past):hover .tour-link:not(.tour-link--muted){
  background:var(--yellow);color:var(--olive-deep);transform:translateY(-0.0625rem);
}
.tour-row:not(.tour-row--past):hover .tour-link--muted{
  background:rgba(255,228,203,.1);color:var(--cream);transform:none;
}
.tour-row__city{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:2.1rem;line-height:1;color:var(--cream)}
.tour-row__date{font-family:var(--font-ui);font-weight:700;text-transform:uppercase;font-size:.95rem;line-height:1.25;color:var(--yellow)}
.tour-row__date small{display:block;color:var(--cream);font-weight:400;font-size:.78rem;text-transform:none}
.tour-row__venue{color:var(--cream);font-size:1rem}
.tour-row__status{display:inline-flex;align-items:center;gap:0.625rem;font-family:var(--font-ui);font-weight:600;text-transform:none;letter-spacing:0;font-size:.85rem;white-space:nowrap;min-width:8.75rem}
.status-sun{width:1.625rem;height:1.625rem;flex:none}
.status-sun path{fill:currentColor}
.status-available{color:#FFE4CB}
.status-few{color:#FFD400}
.status-extra{color:#42E6A7}
.status-soldout{color:#E9252F}
.tour-row__cta{justify-self:end;min-width:8.125rem;text-align:right}
.tour-link{
  display:inline-block;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.08em;font-size:1rem;line-height:1;
  background:var(--cream);color:var(--olive-deep);
  padding:0.5625rem 1rem;border-radius:0.25rem;
  transition:background .2s,color .2s,transform .15s;
}
.tour-link:hover{background:var(--yellow);color:var(--olive-deep);transform:translateY(-0.0625rem)}
.tour-link--muted{background:transparent;border:0.0625rem solid rgba(255,228,203,.45);color:rgba(255,228,203,.6)}
.tour-link--muted:hover{background:rgba(255,228,203,.1);color:var(--cream);transform:none}
.tour-link--disabled{
  background:transparent;border:0.0625rem solid rgba(255,228,203,.25);
  color:rgba(255,228,203,.4);cursor:not-allowed;pointer-events:none;
}
.tourlist__empty{padding:1.75rem 0.25rem;color:var(--cream-2);font-style:italic;text-align:center}

/* Past shows */
.tour-row--past{opacity:.55}
.tour-row--past .tour-row__city{color:var(--cream-2)}
.tour-row--past .tour-row__date{color:var(--cream-2)}
.tour-row--past .tour-row__venue{color:var(--cream-2);opacity:.85}
.status-past{color:var(--cream-2);font-style:italic}

/* ===========================================================
   OM SHOWET + PRESSE  (combined; portrait spans full height)
   =========================================================== */
.om.section-olive{
  background:linear-gradient(180deg, #3e4a33 0%, #46522f 50%, #2b3320 100%);
}
.om{position:relative;overflow:hidden;padding:7.5rem 0 5rem}
/* The <picture> wrapper carries the positioning — Apple-/Chromium-quirky
   behaviour with srcset on an absolutely-positioned img makes width:auto
   collapse to 0, so we size the picture explicitly and let the img fill it. */
.om__portrait-pic{
  position:absolute;left:-2%;bottom:-5%;
  width:70%;
  transform:translate3d(0, var(--parallax-y, 0), 0);
  z-index:1;pointer-events:none;will-change:transform;
}
.om__portrait{
  display:block;width:100%;height:auto;max-width:none;
  pointer-events:none;user-select:none;
}
.om__inner{
  position:relative;z-index:2;
  display:flex;justify-content:flex-end;
  margin-bottom:2.5rem;
}
.om__text{
  width:50%;max-width:35rem;text-align:center;
}
.om__title{
  font-size:clamp(5rem,12vw,10rem);
  line-height:.85;margin-bottom:2rem;
}
/* Read-more clamp: hide overflow at a clean line boundary, no gradient.
   line-height inherits 1.6, so max-height = 8 * 1.6em = 12.8em cuts cleanly between lines. */
.om__body{
  color:var(--cream-2);
  position:relative;text-align:center;
  max-height:12.8em;overflow:hidden;
  transition:max-height .5s ease;
}
.om__body p{margin-bottom:1rem}
.om__body.is-expanded{max-height:none}
.om__readmore{
  display:inline-block;margin-top:1.4rem;cursor:pointer;
  font-family:var(--font-ui);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.78rem;line-height:1;
  color:var(--yellow);background:transparent;border:none;
  padding:0.625rem 1.125rem;border-radius:0.1875rem;
  transition:color .2s,background .2s;
}
.om__readmore:hover{color:var(--mud);background:var(--yellow)}
.om__readmore[hidden]{display:none}

/* ===========================================================
   PRESSE (lives inside Om Showet)
   =========================================================== */
.presse__wrap{position:relative;z-index:2;margin-top:7.5rem}
.presse__title{margin-bottom:2.375rem;text-align:left}
.presse__grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.875rem}
.presse__fig{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:0.25rem;background:rgba(255,228,203,.18)}
.presse__ph{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:0.25rem;
  transition:transform .25s}
.presse__fig:hover .presse__ph{transform:scale(1.04) rotate(1.5deg)}
.presse__title-row{margin-top:0.875rem;font-weight:700;font-size:1.05rem;color:var(--cream)}
.presse__link{display:block;margin-top:0.1875rem;font-family:var(--font-body);font-size:.78rem;letter-spacing:.02em;color:var(--cream-2)}
.presse__link:hover{color:var(--yellow);text-decoration:underline}

/* ===========================================================
   BOOKING (tan)
   =========================================================== */
.section-tan{position:relative;background:var(--tan);color:var(--cotton);padding:5.625rem 0}
.section-tan > *{position:relative}
.booking__inner{display:grid;grid-template-columns:1fr 1fr;gap:4.375rem;align-items:start}
.booking__lead{margin:1.2rem 0 2.4rem;font-family:var(--font-body);font-size:1.35rem;line-height:1.3;color:var(--cotton);max-width:28.75rem}
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:1.875rem}
.contact h3{font-family:var(--font-body);font-weight:700;text-transform:none;letter-spacing:0;font-size:1.1rem;color:var(--cotton);margin-bottom:.6rem}
.contact__name{font-weight:400;color:#FBF3E9}
.contact p{font-size:.95rem;color:#EADCCD;line-height:1.85}
.contact a{
  color:var(--yellow);
  text-decoration:underline;
  text-decoration-color:rgba(252,208,0,.6);
  text-underline-offset:0.1875rem;
  text-decoration-thickness:0.09375rem;
  transition:color .2s,text-decoration-color .2s;
}
.contact a:hover{color:var(--cream);text-decoration-color:var(--cream)}
.booking__formtitle{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.045em;font-size:1.9rem;color:var(--cotton);margin-bottom:1rem}
.booking__formtitle--mobile{display:none}
.booking__form{display:grid;grid-template-columns:1fr;gap:0.875rem}
.booking__form .full{grid-column:1/-1}
.booking__form input,.booking__form textarea{
  width:100%;font-family:var(--font-body);font-size:.95rem;padding:0.875rem 1.125rem;border-radius:0.1875rem;
  border:0.0625rem solid rgba(247,236,220,.55);background:transparent;color:#FBF3E9;outline:none;transition:border-color .2s,background .2s}
.booking__form input::placeholder,.booking__form textarea::placeholder{color:rgba(247,236,220,.7)}
.booking__form input:focus,.booking__form textarea:focus{border-color:var(--cream);background:rgba(247,236,220,.08)}
.booking__form input.is-invalid,
.booking__form textarea.is-invalid,
.newsletter__form input.is-invalid{
  border-color:var(--red);
  background:rgba(233,37,47,.08);
  box-shadow:0 0 0 0.1875rem rgba(233,37,47,.18);
}
.booking__form input.is-invalid::placeholder,
.booking__form textarea.is-invalid::placeholder,
.newsletter__form input.is-invalid::placeholder{color:rgba(233,37,47,.7)}
.form-msg{font-size:.88rem;font-weight:600;min-height:1.1em}
.form-msg.ok{color:#FBF3E9}.form-msg.err{color:var(--red)}

/* ===========================================================
   NEWSLETTER (tan, lighter than booking)
   =========================================================== */
.section-tan2{position:relative;background:linear-gradient(180deg,#B3977E 0%,#A58775 100%);color:var(--cotton);padding:5rem 0}
.section-tan2{overflow:hidden}
.section-tan2 > .wrap{position:relative;z-index:2}
.newsletter__art{
  position:absolute;z-index:1;left:50%;top:60%;
  transform:translate3d(0, var(--parallax-y, 0), 0) translate(-50%,-50%) rotate(-7deg);
  width:min(22vw,17.5rem);height:auto;pointer-events:none;
  filter:drop-shadow(0 1.125rem 2rem rgba(60,40,20,.28));
  will-change:transform;
}
.newsletter__inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.newsletter__left .section-title{margin-bottom:1.4rem;font-size:clamp(2rem,3.4vw,3rem);line-height:1}
.newsletter__form{position:relative;display:flex;flex-direction:column;gap:1rem;max-width:28.75rem}
.newsletter__form input[type=email]{font-family:var(--font-body);font-size:.95rem;padding:0.9375rem 1.125rem;border-radius:0.1875rem;border:0.0625rem solid rgba(247,236,220,.6);background:transparent;color:#FBF3E9;outline:none}
.newsletter__form input[type=email]::placeholder{color:rgba(247,236,220,.7)}
.newsletter__form input[type=email]:focus{border-color:var(--cream)}
.newsletter__right{font-family:var(--font-body);color:var(--cotton);font-size:.95rem;line-height:1.65}
.newsletter__right p{margin-bottom:1rem}

/* ===========================================================
   DOWNLOADS  (cream, posters)
   =========================================================== */
.section-cream{position:relative;background:var(--cotton-bg);color:var(--mud);padding:8.125rem 0}
.section-cream > *{position:relative}
.downloads .section-title{margin-bottom:4.375rem}
.downloads__grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.dlcard{
  display:grid;
  grid-template-columns:minmax(12.5rem,1fr) 1.4fr;
  grid-template-areas:
    "poster head"
    "poster links";
  gap:0.875rem 1.875rem;
  align-items:start;
}
.dlcard__poster{
  grid-area:poster;
  margin:0;width:100%;
  position:relative;height:0;padding-bottom:150%;
  overflow:hidden;border-radius:0.25rem;
  background:rgba(0,0,0,.5);
}
.dlcard__poster img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.dlcard__head{grid-area:head}
.dlcard__links{grid-area:links}
.dlcard__title{font-family:var(--font-body);font-weight:500;font-size:1.5rem;line-height:1.15;color:var(--mud);white-space:nowrap}
.dlcard__desc{
  margin-top:.7rem;
  font-family:var(--font-body);font-size:.95rem;line-height:1.55;
  color:rgba(58,42,28,.72);
  max-width:38ch;
}
.dlcard__label{font-family:var(--font-body);font-weight:500;font-size:1.05rem;color:var(--mud);margin-bottom:.4rem}
.dlcard__rows{list-style:none}
.dlcard__rows a{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;padding:0.6875rem 0;border-bottom:0.0625rem solid rgba(94,69,40,.25);font-size:.95rem;color:var(--mud);transition:color .2s}
.dlcard__rows a:hover{color:var(--brown)}
.dlcard__rows .arr{font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;color:var(--mud);opacity:.9}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{position:relative;z-index:100;background:var(--footer-bg);color:var(--cream);padding:8.125rem 0}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:2.5rem;flex-wrap:wrap}
.footer__contacts{display:flex;gap:5rem;flex-wrap:wrap}
.footer .contact h3{color:var(--cream);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;margin-bottom:.7rem}
.footer .contact__name,.footer .contact p{color:var(--cream-2)}
.footer .contact a{
  color:var(--yellow);
  text-decoration:underline;
  text-decoration-color:rgba(252,208,0,.6);
  text-underline-offset:0.1875rem;
  text-decoration-thickness:0.09375rem;
  transition:color .2s,text-decoration-color .2s;
}
.footer .contact a:hover{color:var(--cream);text-decoration-color:var(--cream)}
.footer__logo{
  display:inline-block;width:7.5rem;height:7.625rem;
  color:var(--cream);
  transform-origin:center;
  transition:color .25s,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.footer__logo:hover{color:var(--yellow);transform:rotate(-6deg) scale(1.08)}
.footer__logo svg{width:100%;height:100%;display:block;fill:currentColor}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:900px){
  /* Unified vertical rhythm — every section after the hero shares the
     same top + bottom padding so the page reads as one consistent stack
     rather than each section setting its own. */
  .tourplan.section-olive,
  .om.section-olive,
  .booking.section-tan,
  .newsletter.section-tan2,
  .downloads.section-cream,
  .footer{
    padding-top:4.375rem;
    padding-bottom:4.375rem;
  }

  /* Hero tracks the dynamic viewport. With iOS Safari's translucent glass
     URL bar, dvh is the currently-visible area; padding-bottom honours the
     safe-area inset so chrome clears the home indicator without arithmetic. */
  .hero{
    height:100dvh;min-height:0;
    align-items:flex-end;
    padding-top:max(5.625rem, env(safe-area-inset-top, 0) + 4.375rem);
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 3.75rem);
  }
  .hero__portrait{right:-12%;height:108%;opacity:1;object-position:bottom right}
  /* Top 2/3 lets the portrait read at full opacity. We darken just enough
     around the title band to keep type legible, then fade BACK toward
     transparent at the very bottom so the iOS glass URL bar shows the
     portrait through itself instead of an opaque olive stripe. */
  .hero__overlay{
    background:linear-gradient(180deg,
      transparent 0%,
      transparent 52%,
      rgba(40,46,24,.55) 68%,
      rgba(40,46,24,.85) 82%,
      rgba(40,46,24,.55) 92%,
      rgba(40,46,24,.18) 100%);
  }
  .hero__presenter{letter-spacing:.2em;margin-bottom:1.3rem}
  .hero__tagline{margin-top:.16em}
  .hero__tour{margin-top:2rem}
  .hero__cta{padding:1.02em 2.5em}
  /* on mobile, revert to absolute so the chrome doesn't follow the scroll */
  .hero__topleft{position:absolute;top:max(1.125rem, env(safe-area-inset-top, 0) + 0.75rem);left:max(1.125rem, env(safe-area-inset-left, 0) + 0.75rem)}
  .hero__social{position:absolute;top:max(1.125rem, env(safe-area-inset-top, 0) + 0.75rem);right:max(1.125rem, env(safe-area-inset-right, 0) + 0.75rem);gap:0.5rem}
  .menu-btn{width:2.5rem;height:2.5rem}
  .menu-btn svg{width:1.25rem;height:1.25rem}
  .hero__social a{width:2.5rem;height:2.5rem}
  .hero__social svg{width:0.9375rem;height:0.9375rem}
  /* dvh hero shrinks to the visible area, so bottom chrome only needs to
     respect the home-indicator inset — no lvh/svh delta. */
  .hero__logo{
    position:absolute;left:auto;
    right:max(1.125rem, env(safe-area-inset-right, 0) + 0.75rem);
    bottom:max(1.125rem, env(safe-area-inset-bottom, 0) + 0.75rem);
  }
  .hero__logo img{width:3rem}
  .side-nav{
    position:absolute;
    left:max(1.125rem, env(safe-area-inset-left, 0) + 0.75rem);
    bottom:max(1.5rem, env(safe-area-inset-bottom, 0) + 1.125rem);
    gap:0.625rem;
  }
  .side-nav .dot{width:0.5625rem;height:0.5625rem}
  .booking__inner,.newsletter__inner,.om__inner{grid-template-columns:1fr;display:grid}
  .booking__inner{gap:1.75rem}
  .newsletter__inner{gap:1.375rem}
  /* Om showet — display the portrait was meant as a backdrop on mobile too,
     but the section also hosts Pressebilleder; the portrait kept bleeding
     into the press grid behind the thumbnails. Drop it on small screens. */
  .om{display:block}
  .om__portrait-pic{display:none}
  .om__inner{position:relative;z-index:2;margin-bottom:1.125rem}
  .om__text{width:100%;max-width:none;text-align:center}
  .om__title{font-size:clamp(6rem,18vw,8.5rem);text-align:center;margin-bottom:1.2rem}
  .om__body{max-height:11.2em}
  .om__readmore{margin-top:.6rem}
  .presse__wrap{margin-top:2.5rem}
  .presse__title{text-align:center;margin-bottom:1.5rem}
  .presse__grid{grid-template-columns:1fr 1fr}
  /* Booking — show the mobile-only form heading, center everything. */
  .booking__formtitle--mobile{
    display:block;text-align:center;
    font-size:1.7rem;margin-bottom:.8rem;
  }
  .booking__info{text-align:center}
  .booking__lead{margin-left:auto;margin-right:auto}
  .contacts{grid-template-columns:1fr 1fr;justify-items:center}
  .contact{text-align:center}
  /* Newsletter — also fully centered on mobile. */
  .newsletter__left{text-align:center}
  .newsletter__form{align-items:center;margin-left:auto;margin-right:auto}
  .newsletter__form input[type=email]{width:100%}
  .newsletter__right{text-align:center}
  /* Streaming — image left, title+desc top-right, links full width below. */
  .downloads__grid{grid-template-columns:1fr;gap:2.25rem}
  .dlcard{
    grid-template-columns:8.75rem 1fr;
    grid-template-areas:
      "poster head"
      "links  links";
    gap:0.875rem 1.125rem;
    align-items:start;
  }
  .dlcard__poster{grid-area:poster;padding-bottom:160%}
  .dlcard__head{grid-area:head}
  .dlcard__links{grid-area:links}
  .dlcard__title{white-space:normal;font-size:1.25rem}
  .dlcard__desc{font-size:.88rem;max-width:none}
  .dlcard__label{margin-top:.4rem}
  /* Inputs at ≥1rem stop iOS from auto-zooming on focus (defensive — the
     viewport meta also disables user-scalable, but font-size makes the
     intent unambiguous and keeps the page accessible in webviews). */
  .booking__form input,.booking__form textarea,
  .newsletter__form input[type=email],
  .search input{font-size:16px}
  /* Tourplan — CTA goes top-right, status stacks under it; venue lines up
     vertically with status on the right column. */
  .tour-row{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "city  cta"
      "date  ."
      "venue status";
    gap:0.375rem 1rem;padding:1.375rem 0.625rem;margin:0 -0.625rem;align-items:start;
  }
  .tour-row__city{grid-area:city;font-size:1.7rem;line-height:1;font-weight:400;margin-bottom:0}
  .tour-row__date{grid-area:date;font-size:.88rem;line-height:1.3;margin-top:0.125rem}
  .tour-row__date small{display:inline;margin-left:0.375rem;color:var(--cream);font-size:.88rem;opacity:.9}
  .tour-row__venue{grid-area:venue;font-size:.88rem;margin-top:0.25rem;align-self:center}
  .tour-row__status{grid-area:status;justify-self:end;min-width:0;align-self:center;margin-top:0}
  .tour-row__cta{grid-area:cta;justify-self:end;min-width:0}
  .tour-link{font-size:.95rem;padding:0.5625rem 1rem}
  /* Tourplan rows fade in noticeably faster than the rest of the page. */
  .tour-row.reveal{transition-duration:.45s}
  .tourplan__head{align-items:center;gap:0.625rem;margin-bottom:1.125rem}
  .tourplan__main-title{font-size:clamp(2.6rem,11vw,3.6rem);flex:0 1 auto;min-width:0;line-height:.95;padding-top:.05em}
  .tourplan__controls{flex:0 0 100%;width:100%;gap:0.625rem;margin-left:0}
  .tourplan__head .toggle{height:2.75rem;padding:0.5rem 0.75rem;font-size:.78rem;gap:0.4375rem;flex-shrink:0;align-self:center}
  .tourplan__head .toggle input{width:0.875rem;height:0.875rem}
  .tourplan__head .search{flex:1 1 auto;width:auto;min-width:0}
  .subsection-title{font-size:clamp(2rem,6vw,2.6rem);margin-bottom:0.875rem}
  .tour-group{margin-top:2.25rem}
  .tour-group:first-of-type{margin-top:1.75rem}
  /* Newsletter art — sized via the @media (max-width:560px) override below. */
  .newsletter__art{width:min(60vw,22.5rem)}
  .footer__inner{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2.25rem}
  .footer__contacts{justify-content:center;gap:2.5rem}
  .footer .contact{text-align:center}
}
@media (max-width:560px){
  .wrap{padding:0 1.375rem}
  .tourplan__controls{flex-wrap:nowrap;gap:0.375rem}
  .tourplan__head .search input{padding-left:0.625rem;padding-right:2rem}
  .tourplan__head .search__icon{right:0.625rem}
  .presse__grid{grid-template-columns:1fr 1fr}
  .contacts,.booking__form{grid-template-columns:1fr}
  .footer__contacts{flex-direction:column;gap:1.875rem}
  /* Larger letter mark on the smallest screens. */
  .newsletter__art{width:min(70vw,23.75rem);top:65%}
  /* Streaming poster narrower again so there's room for the body column. */
  .dlcard{grid-template-columns:7.5rem 1fr;gap:0.875rem}
}

/* Fluid root font-size on very narrow phones — every rem scales together. */
@media (max-width:374px){
  html{font-size:4.22222267vw}
}

/* ===========================================================
   Reveal-on-scroll + Parallax
   =========================================================== */
.reveal{
  opacity:0;transform:translate3d(0,2.875rem,0);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal--left,
.reveal--right,
.reveal--scale{transform:translate3d(0,2.875rem,0)}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0);will-change:auto}
.is-anchor-scrolling{scroll-behavior:auto}
.is-anchor-scrolling .reveal{transition:none!important}

/* Fade-in-up entrance for hero content + fixed UI */
@keyframes fadeInUp{
  from{opacity:0;transform:translate3d(0,2.875rem,0)}
  to  {opacity:1;transform:translate3d(0,0,0)}
}
.hero__presenter,
.hero__title,
.hero__tour,
.hero__cta{
  opacity:0;
  animation:fadeInUp .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero__presenter{animation-delay:.15s}
.hero__title    {animation-delay:.28s}
.hero__tour     {animation-delay:.46s}
.hero__cta      {animation-delay:.60s}

.hero__topleft,
.hero__social,
.hero__logo,
.side-nav{
  opacity:0;
  animation:fadeInUp .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero__topleft{animation-delay:.20s}
.hero__social {animation-delay:.30s}
.hero__logo   {animation-delay:.40s}
.side-nav     {animation-delay:.50s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  [data-parallax]{transform:none!important}
  .hero__portrait{animation:none!important}
  .hero__presenter,.hero__title,.hero__tour,.hero__cta,
  .hero__topleft,.hero__social,.hero__logo,.side-nav{
    opacity:1!important;animation:none!important;transform:none!important;
  }
}