/* ============================================================
   ORU KULTUURISAAL
   Suund: soe lambivalgus. Sügav espressoöö, kask ja messing,
   üks meepruun aktsent. Õhuline, keskjoondatud, ornamentaalne.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
/* Editors paste bare URLs. One unbreakable 400px token is enough to give the
   whole page a horizontal scrollbar on a phone, so let long words break. */
body{overflow-wrap:break-word}

:root{
  --night:#150C09;
  --bark:#22150F;
  --bark-2:#301E16;
  --brand:#492B21;
  --honey:#E3BC7E;
  --honey-2:#F2D6A6;
  --honey-d:#855A1D;
  --honey-ink:#241300;
  --cream:#F8F2E8;
  --cream-2:#F0E7D8;
  --cream-3:#E3D6C1;
  --dim:#C3B09A;
  --ink:#241811;
  --muted:#645040;
  --line:rgba(73,43,33,.17);
  --line-d:rgba(227,188,126,.24);
  --gut:clamp(20px,5vw,80px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,.7,.24,1);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
}

html{scroll-behavior:smooth;scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  font-size:clamp(1rem,.25vw + .95rem,1.06rem);
  line-height:1.78;color:var(--ink);background:var(--cream);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ---------- display ---------- */
.d1,.d2,.d3,.d4,h1,h2,h3{
  font-family:var(--serif);font-weight:400;line-height:1.08;
  letter-spacing:0;text-wrap:balance;
  /* Fraunces: optical sizes on, softened terminals. Lower stroke contrast than
     the previous Bodoni, so headings stay legible at card size too. */
  font-optical-sizing:auto;font-variation-settings:"SOFT" 50,"WONK" 0;
}
.d1{font-size:clamp(3rem,10.2vw,8rem);line-height:1;letter-spacing:-.01em}
.d2{font-size:clamp(2rem,5vw,3.95rem);line-height:1.1;letter-spacing:-.005em}
.d3{font-size:clamp(1.5rem,2.9vw,2.4rem);line-height:1.18;letter-spacing:.035em}
.d4{font-size:clamp(1.14rem,1.4vw,1.38rem);line-height:1.3;letter-spacing:.02em;font-weight:500}
.it{display:block;font-style:italic;color:var(--honey-d);font-weight:400}
.on-dark .it,.dark .it,.bark .it,.brandbg .it{color:var(--honey)}

/* ---------- widely tracked labels ---------- */
.label{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:clamp(.63rem,.15vw + .6rem,.7rem);
  letter-spacing:.4em;text-transform:uppercase;
  color:var(--honey-d);margin-bottom:1.15rem;
}
.on-dark .label,.dark .label,.bark .label,.brandbg .label{color:var(--honey)}

.lede{
  font-size:clamp(1.02rem,.4vw + .96rem,1.18rem);
  font-weight:300;line-height:1.82;color:var(--muted);max-width:64ch;
}
.on-dark .lede,.dark .lede,.bark .lede,.brandbg .lede{color:var(--dim)}
.tc .lede{margin-inline:auto}

p+p{margin-top:1.15em}
a{color:inherit}
strong,b{font-weight:600}

/* ---------- ornament: brand ring between two hairlines ---------- */
.orn{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,20px);
  margin-block:clamp(20px,2.8vw,38px)}
.orn i{display:block;height:1px;width:clamp(32px,7vw,88px);
  background:linear-gradient(90deg,transparent,var(--honey-d))}
.orn i+i{background:linear-gradient(90deg,var(--honey-d),transparent)}
.orn svg{flex:none;color:var(--honey-d)}
.on-dark .orn i,.dark .orn i,.bark .orn i{background:linear-gradient(90deg,transparent,var(--honey))}
.on-dark .orn i+i,.dark .orn i+i,.bark .orn i+i{background:linear-gradient(90deg,var(--honey),transparent)}
.on-dark .orn svg,.dark .orn svg,.bark .orn svg{color:var(--honey)}
.orn.tight{margin-block:clamp(13px,1.8vw,20px)}

/* ---------- focus ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--honey-d);outline-offset:4px}
.on-dark :focus-visible,.dark :focus-visible,.bark :focus-visible{outline-color:var(--honey)}

.skip{position:fixed;left:var(--gut);top:-120px;z-index:999;background:var(--honey);
  color:var(--honey-ink);padding:.9em 1.5em;font-weight:600;letter-spacing:.1em;
  font-size:.74rem;text-transform:uppercase;transition:top .2s var(--ease)}
.skip:focus-visible{top:14px}
.sr,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* WordPress core markup (pagination, search form, menus) uses this class and
   assumes the theme hides it. Without the rule its labels render as visible
   English text in the middle of the page. */
.screen-reader-text:focus{position:static;width:auto;height:auto;clip:auto;clip-path:none;
  margin:0;padding:.6em 1em}

/* ---------- pagination ---------- */
.pagination{margin-top:clamp(44px,5vw,76px)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .9em;text-decoration:none;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line);color:var(--muted);
  transition:border-color .4s var(--ease),color .4s var(--ease),background-color .4s var(--ease)}
.pagination a.page-numbers:hover{border-color:var(--honey-d);color:var(--ink)}
.pagination .page-numbers.current{background:var(--honey-d);border-color:var(--honey-d);color:var(--honey-ink)}
.pagination .page-numbers.dots{border-color:transparent;min-width:auto;padding:0 .3em}
.on-dark .pagination .page-numbers,.dark .pagination .page-numbers,.bark .pagination .page-numbers{
  border-color:var(--line-d);color:var(--dim)}
.on-dark .pagination a.page-numbers:hover,.dark .pagination a.page-numbers:hover,.bark .pagination a.page-numbers:hover{
  border-color:var(--honey);color:var(--cream)}
.dark .pagination .page-numbers.current,.on-dark .pagination .page-numbers.current,.bark .pagination .page-numbers.current{
  background:var(--honey);border-color:var(--honey);color:var(--honey-ink)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,9.6vw,162px)}
.sec-t{padding-top:clamp(72px,9.6vw,162px)}
.sec-b{padding-bottom:clamp(72px,9.6vw,162px)}
.tc{text-align:center}
.on-dark,.dark{background:var(--night);color:var(--cream)}
.bark{background:var(--bark);color:var(--cream)}
.brandbg{background:var(--brand);color:var(--cream)}
.cream2{background:var(--cream-2)}

.grid{display:grid;gap:clamp(20px,2.6vw,38px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.autofit{grid-template-columns:repeat(auto-fit,minmax(min(100%,278px),1fr))}
@media (max-width:920px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

.shead{max-width:76ch;margin-inline:auto;text-align:center;margin-bottom:clamp(40px,5.2vw,78px)}
.shead .lede{margin-inline:auto}
.shead .btns{justify-content:center;margin-top:clamp(26px,3vw,40px)}

.rule{height:1px;border:0;margin:0;background:var(--line)}
.on-dark .rule,.dark .rule,.bark .rule{background:var(--line-d)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:.71rem;
  letter-spacing:.22em;text-transform:uppercase;
  padding:1.3em 2.15em;border:1px solid transparent;text-decoration:none;
  cursor:pointer;position:relative;overflow:hidden;background:transparent;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.85em}
.btn::before{content:"";position:absolute;inset:0;z-index:0;
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn svg{flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(5px)}

.btn-p{background:var(--honey);color:var(--honey-ink);border-color:var(--honey)}
.btn-p::before{background:var(--cream)}
.btn-p:hover{border-color:var(--cream)}

.btn-o{color:var(--honey);border-color:rgba(227,188,126,.4)}
.btn-o::before{background:var(--honey)}
.btn-o:hover{color:var(--honey-ink);border-color:var(--honey)}

.btn-d{color:var(--brand);border-color:rgba(73,43,33,.3)}
.btn-d::before{background:var(--brand)}
.btn-d:hover{color:var(--cream);border-color:var(--brand)}
.btns{display:flex;flex-wrap:wrap;gap:14px}

.tlink{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:.67rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--honey-d);padding-bottom:.5em;position:relative}
.on-dark .tlink,.dark .tlink,.bark .tlink,.brandbg .tlink{color:var(--honey)}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;opacity:.45;transform-origin:left;transform:scaleX(.28);
  transition:transform .5s var(--ease),opacity .5s var(--ease)}
.tlink:hover::after{transform:scaleX(1);opacity:1}
.tlink svg{transition:transform .45s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}

.prose a{color:var(--honey-d);text-decoration:none;border-bottom:1px solid rgba(133,90,29,.42);
  overflow-wrap:anywhere;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.prose a:hover{color:var(--ink);border-color:var(--ink)}
.on-dark .prose a,.dark .prose a,.bark .prose a{color:var(--honey);border-color:rgba(227,188,126,.42)}
.on-dark .prose a:hover,.dark .prose a:hover,.bark .prose a:hover{color:var(--cream);border-color:var(--cream)}

/* Post and event bodies are written in the WordPress editor, so this has to
   cope with whatever the editor emits: headings, figures, captions, lists,
   embeds. Without it a news story renders as one unbroken column of text with
   full-bleed images between the paragraphs. */
.prose>*+*{margin-top:1.15em}
.prose p{line-height:1.8;font-weight:300}
.prose h2,.prose h3,.prose h4{font-family:var(--serif);font-weight:400;line-height:1.24;
  margin-top:1.8em;letter-spacing:.01em}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.85rem)}
.prose h3{font-size:clamp(1.15rem,1.9vw,1.45rem)}
.prose h4{font-size:1.08rem}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:.5em}
.prose li{line-height:1.75;font-weight:300}
.prose ul{list-style:none;padding-left:1.1em}
.prose ul>li{position:relative}
.prose ul>li::before{content:"";position:absolute;left:-1.1em;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--honey-d)}
.on-dark .prose ul>li::before,.dark .prose ul>li::before,.bark .prose ul>li::before{background:var(--honey)}
.prose img{height:auto;max-height:min(72vh,700px);object-fit:contain;margin-inline:auto}
.prose figure{margin:1.9em 0}
.prose figure img{width:100%}
.prose figcaption{margin-top:.8em;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.6}
.on-dark .prose figcaption,.dark .prose figcaption,.bark .prose figcaption{color:var(--dim)}
.prose blockquote{margin:1.9em 0;padding-left:1.3em;border-left:2px solid var(--honey-d);
  font-family:var(--serif);font-size:1.12rem;font-style:italic;color:var(--muted)}
.prose iframe,.prose video{width:100%;aspect-ratio:16/9;height:auto;border:0}
.prose .wp-block-embed__wrapper{position:relative}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem}
.prose th,.prose td{padding:.6em .8em;border-bottom:1px solid var(--line);text-align:left}
.on-dark .prose th,.on-dark .prose td,.dark .prose th,.dark .prose td{border-color:var(--line-d)}
.prose .aligncenter{margin-inline:auto;display:block}
.prose .alignleft{float:left;margin:.4em 1.6em .9em 0;max-width:48%}
.prose .alignright{float:right;margin:.4em 0 .9em 1.6em;max-width:48%}
.prose::after{content:"";display:block;clear:both}
@media (max-width:640px){
  .prose .alignleft,.prose .alignright{float:none;margin-inline:auto;max-width:100%}
}

/* ============================ HEADER ============================ */
.top{background:var(--night);color:var(--dim);font-size:.71rem;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:1px solid rgba(227,188,126,.1)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;flex-wrap:wrap;padding-block:7px}
/* Navigation targets must clear 24px for touch (WCAG 2.5.8). On an inline
   link vertical padding grows the hit area without changing the layout. */
.top a{text-decoration:none;transition:color .3s var(--ease);
  padding-block:.45em;display:inline-block;line-height:1.25}
.top a:hover{color:var(--honey)}
.top-l,.top-r{display:flex;align-items:center;gap:clamp(11px,1.5vw,24px);flex-wrap:wrap}
.top-r a{color:var(--cream)}
.dot{width:3px;height:3px;background:currentColor;opacity:.45;flex:none;border-radius:50%}
@media (max-width:820px){.hide-s{display:none!important}}

.hdr{position:sticky;top:0;z-index:120;background:rgba(21,12,9,.92);
  -webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);
  color:var(--cream);border-bottom:1px solid rgba(227,188,126,.12);
  transition:box-shadow .5s var(--ease)}
.hdr.stuck{box-shadow:0 20px 50px -34px #000}
.hdr>.wrap{display:flex;align-items:center;gap:clamp(14px,2vw,34px);min-height:78px}
.brandlink{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none;margin-right:auto}
.brandlink{padding-block:7px;min-height:44px}
.brandlink img{width:clamp(152px,14vw,214px);height:auto}
.mark{width:32px;height:32px;flex:none;display:none}
@media (min-width:1120px){.mark{display:block}}

.nav{display:flex;align-items:center;gap:clamp(8px,1.35vw,26px)}
.nav a{text-decoration:none;font-size:.68rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;padding:.6em .05em;position:relative;white-space:nowrap;
  color:rgba(248,242,232,.72);transition:color .35s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.15em;height:1px;
  background:var(--honey);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)}
.nav a:hover{color:var(--cream)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--honey)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr .btn-hd{padding:1em 1.5em;font-size:.66rem;flex:none}
@media (max-width:1240px){.nav,.hdr .btn-hd{display:none}}

.navtog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.burger{display:none;flex:none;width:48px;height:48px;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid rgba(227,188,126,.28);margin-left:auto}
.burger .bar{display:block;width:19px;height:1px;background:var(--cream);position:relative;
  transition:background .25s var(--ease)}
.burger .bar::before,.burger .bar::after{content:"";position:absolute;left:0;width:19px;height:1px;
  background:var(--cream);transition:transform .4s var(--ease)}
.burger .bar::before{top:-6px}.burger .bar::after{top:6px}
.navtog:checked~.hdr .burger .bar{background:transparent}
.navtog:checked~.hdr .burger .bar::before{transform:translateY(6px) rotate(45deg)}
.navtog:checked~.hdr .burger .bar::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1240px){.burger{display:flex}}

.mnav{display:none;background:var(--night);border-top:1px solid rgba(227,188,126,.12);
  max-height:calc(100dvh - 122px);overflow-y:auto;overscroll-behavior:contain}
.navtog:checked~.hdr .mnav{display:block}
@media (min-width:1241px){.navtog:checked~.hdr .mnav{display:none}}
.mnav ul{padding-block:10px 6px}
.mnav ul a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  text-decoration:none;color:var(--cream);padding:.86em 0;
  border-bottom:1px solid rgba(227,188,126,.1);
  font-family:var(--serif);font-weight:400;font-size:1.42rem;letter-spacing:.03em;
  transition:color .3s var(--ease)}
.mnav ul a em{font-family:var(--sans);font-style:normal;font-size:.6rem;letter-spacing:.24em;
  color:var(--honey);opacity:.7}
.mnav ul a:hover{color:var(--honey)}
.mnav .btn{display:flex;width:100%;margin-block:20px 26px}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:clamp(600px,94svh,1000px);display:flex;align-items:center;
  background:var(--night);color:var(--cream);overflow:hidden;isolation:isolate;text-align:center}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 42%;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
/* Global veil stays light enough that the room still reads. The text gets
   its own local scrim (.hero-in::before) so small type keeps its contrast
   without flattening the whole photograph. */
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(100% 92% at 50% 48%,rgba(46,27,19,0) 0%,rgba(46,27,19,0) 55%,rgba(30,17,12,.45) 100%),
    linear-gradient(to bottom,rgba(21,12,9,.66) 0%,rgba(21,12,9,0) 20%,rgba(21,12,9,0) 56%,rgba(24,14,10,.5) 86%,var(--night) 100%)}
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(52% 42% at 50% 26%,rgba(227,188,126,.22),transparent 72%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(96px,13vw,150px)}
.hero-in{max-width:1000px;margin-inline:auto;position:relative}
.hero-in::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-20% -18%;
  background:radial-gradient(54% 62% at 50% 52%,rgba(38,21,14,.9) 0%,rgba(38,21,14,.84) 40%,
              rgba(38,21,14,.6) 64%,rgba(38,21,14,.24) 82%,transparent 95%)}

.hero-badge{width:clamp(62px,7vw,84px);height:clamp(62px,7vw,84px);margin:0 auto clamp(24px,3vw,38px);
  border-radius:50%;border:1px solid rgba(227,188,126,.45);display:flex;align-items:center;
  justify-content:center;background:rgba(21,12,9,.5)}
.hero-badge svg{width:52%;height:auto;color:var(--cream)}

.hero-eyebrow{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,18px);
  font-size:clamp(.62rem,.15vw + .59rem,.7rem);letter-spacing:.44em;text-transform:uppercase;
  color:var(--honey);font-weight:600;margin-bottom:clamp(22px,3vw,36px)}
.hero-eyebrow span{opacity:.95}
.hero-eyebrow,.hero-place,.hero .d1{text-shadow:0 2px 10px rgba(21,12,9,.9),0 4px 30px rgba(21,12,9,.7)}
.hero-eyebrow svg{flex:none;opacity:.85}

.hero .d1{margin-bottom:.06em}
.hero-place{font-size:clamp(.63rem,.15vw + .6rem,.71rem);letter-spacing:.32em;
  text-transform:uppercase;color:#DCC9B2;line-height:2.1}
.hero .btns{justify-content:center;margin-top:clamp(30px,4vw,46px)}

.scroll-cue{position:absolute;left:50%;bottom:clamp(20px,3.4vw,40px);transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);font-weight:600;
  transition:color .35s var(--ease)}
.scroll-cue:hover{color:var(--honey)}
.scroll-cue i{display:block;width:1px;height:clamp(30px,4vw,46px);
  background:linear-gradient(to bottom,var(--honey),transparent);opacity:.7}
@media (max-height:620px){.scroll-cue{display:none}}

/* ============================ STATS ============================ */
.stats{border-block:1px solid var(--line-d)}
.stats ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.stats ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats li{text-align:center;padding:clamp(30px,4vw,58px) clamp(12px,1.6vw,26px);
  border-left:1px solid var(--line-d)}
.stats li:first-child{border-left:0}
@media (max-width:760px){
  .stats li:nth-child(odd){border-left:0}
  .stats li:nth-child(-n+2){border-bottom:1px solid var(--line-d)}
}
.stats b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:1;letter-spacing:.02em;color:var(--honey)}
.stats span{display:block;margin-top:14px;font-size:.63rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim);font-weight:600}
.stats.light{border-color:var(--line)}
.stats.light li{border-color:var(--line)}
.stats.light b{color:var(--brand)}
.stats.light span{color:var(--muted)}

/* ============================ FEATURE ROWS ============================ */
.feat{display:grid;gap:clamp(30px,5vw,84px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:940px){.feat{grid-template-columns:minmax(0,1fr)}}
.feat.rev .feat-m{order:1}
@media (max-width:940px){.feat.rev .feat-m{order:0}}
.feat-m{position:relative}
.feat-m .ph,.feat-m img{width:100%;height:auto}
/* A portrait poster at this width would otherwise be over 1200px tall. */
.feat-m img{max-height:min(76vh,780px);object-fit:contain;margin-inline:auto}
.feat-m .frame{position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(227,188,126,.28);transform:translate(14px,14px);z-index:-1}
@media (max-width:640px){.feat-m .frame{transform:translate(8px,8px)}}
.feat-m .cap{margin-top:14px;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.on-dark .feat-m .cap,.dark .feat-m .cap,.bark .feat-m .cap{color:var(--dim)}
.feat-b .btns{margin-top:clamp(26px,3vw,40px)}
.feat-b .lede{margin-top:1.1rem}

/* checklist */
.chk{margin-top:clamp(24px,2.8vw,36px);display:grid;gap:0}
.chk li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:1.05em 0;border-top:1px solid var(--line);font-size:.98rem;font-weight:300;line-height:1.7}
.chk li:last-child{border-bottom:1px solid var(--line)}
.on-dark .chk li,.dark .chk li,.bark .chk li{border-color:var(--line-d)}
.chk svg{flex:none;margin-top:.5em;color:var(--honey-d)}
.on-dark .chk svg,.dark .chk svg,.bark .chk svg{color:var(--honey)}

/* ============================ QUOTE ============================ */
.quote{max-width:24ch;margin-inline:auto;text-align:center}
.quote blockquote{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.34;letter-spacing:.02em;
  color:var(--cream);max-width:20ch;margin-inline:auto}
.quote.wide blockquote,.quote.wide{max-width:34ch}
.quote cite{display:block;margin-top:clamp(22px,3vw,34px);font-style:normal;
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--honey);font-weight:600}

/* ============================ CARDS ============================ */
.card{background:transparent;border:1px solid var(--line);display:flex;flex-direction:column;
  overflow:hidden;transition:border-color .5s var(--ease),transform .5s var(--ease),background-color .5s var(--ease)}
.on-dark .card,.dark .card,.bark .card{border-color:var(--line-d);background:rgba(48,30,22,.4)}
a.card{text-decoration:none}
a.card:hover{transform:translateY(-4px);border-color:var(--honey-d)}
.on-dark a.card:hover,.dark a.card:hover,.bark a.card:hover{border-color:var(--honey)}
.card-m{overflow:hidden;background:var(--cream-3)}
.card-m .ph{aspect-ratio:16/10;transition:transform .9s var(--ease)}
.card:hover .card-m .ph{transform:scale(1.05)}

/* Featured images come from WordPress, so their shape is whatever the poster
   or photo happened to be: 16:9 press photos next to portrait A3 posters.
   Without a frame a tall poster runs to its full natural height and drags its
   whole grid row with it. Give every card the same frame and fit the image
   inside it rather than cropping: a poster that gets its text cut off is
   worse than one with a little space beside it. The gap is filled with the
   same image, blurred, so the card still reads as one piece. */
.card-m{--frame:4/3}
.card-m img{position:relative;z-index:1;width:100%;height:100%;
  aspect-ratio:var(--frame);object-fit:contain;
  transition:transform .9s var(--ease)}
.card-m::before{content:"";position:absolute;inset:-8%;z-index:0;
  background:var(--thumb,none) center/cover no-repeat;
  filter:blur(22px) saturate(.7) brightness(.5)}
.on-dark .card-m,.dark .card-m,.bark .card-m{background:#1d120d}
.card:hover .card-m img{transform:scale(1.04)}

/* Single column: nothing to keep level, so let a poster be a poster. */
@media (max-width:640px){
  .card-m{--frame:auto}
  .card-m img{height:auto;max-height:78vh;object-fit:contain}
}
.card-b{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;flex:1}
.card-b .meta{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.8em;flex-wrap:wrap;font-weight:600}
.on-dark .card-b .meta,.dark .card-b .meta,.bark .card-b .meta{color:var(--honey);opacity:.85}
.card-b p{font-size:.95rem;font-weight:300;color:var(--muted);line-height:1.72}
.on-dark .card-b p,.dark .card-b p,.bark .card-b p{color:var(--dim)}
.card-b .tlink{margin-top:auto;padding-top:8px}

/* tiny outlined tag */
.tag{display:inline-flex;align-items:center;gap:.5em;font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;font-weight:600;color:var(--honey-d);
  border:1px solid rgba(133,90,29,.32);padding:.42em .8em;width:-moz-fit-content;width:fit-content}
.on-dark .tag,.dark .tag,.bark .tag{color:var(--honey);border-color:rgba(227,188,126,.32)}

/* numbered service cards */
.svc{position:relative;padding:clamp(26px,2.8vw,38px);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .5s var(--ease),background-color .5s var(--ease),transform .5s var(--ease)}
.svc:hover{border-color:var(--honey-d);background:var(--cream-2);transform:translateY(-3px)}
.svc .n{font-family:var(--serif);font-size:.9rem;letter-spacing:.1em;color:var(--honey-d);
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:4px}
.svc p{font-size:.95rem;font-weight:300;color:var(--muted);line-height:1.72}

/* price cards */
.price{position:relative;border:1px solid var(--line-d);padding:clamp(28px,3.2vw,44px);
  display:flex;flex-direction:column;text-align:center;background:rgba(48,30,22,.34)}
.price.hi{border-color:var(--honey);background:rgba(227,188,126,.07)}
.price :is(h2,h3){margin-bottom:.5em}
.price .desc{font-size:.93rem;font-weight:300;color:var(--dim);min-height:3.2em;line-height:1.7}
.price .amt{display:flex;align-items:baseline;justify-content:center;
  margin-block:clamp(22px,2.6vw,32px) 0;font-family:var(--serif);font-weight:400;
  letter-spacing:.01em;line-height:1;color:var(--honey)}
/* Bodoni's euro sign has wide crossbars. Sat on the baseline next to a 67px
   numeral it reads as a strikethrough, so lift it into a superscript and
   space it in its OWN em, not the parent's. */
.price .amt .cur{font-size:clamp(1.05rem,1.35vw,1.32rem);line-height:1;opacity:.85;
  position:relative;top:-1.5em;margin-right:.55em}
.price .amt .num{font-size:clamp(3rem,5vw,4.2rem)}
.price .per{display:block;margin-top:12px;font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim);font-weight:600}
.price .note{margin-top:clamp(20px,2.4vw,28px);padding-top:20px;
  border-top:1px solid var(--line-d);font-size:.86rem;font-weight:300;color:var(--dim);line-height:1.7}

/* terms */
.terms{display:grid;gap:0;max-width:96ch;margin-inline:auto}
.terms li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding:1.25em 0;
  border-top:1px solid var(--line);font-size:.97rem;font-weight:300;line-height:1.74}
.terms li:last-child{border-bottom:1px solid var(--line)}
.terms .k{font-family:var(--serif);font-size:.9rem;color:var(--honey-d);flex:none;
  padding-top:.15em;letter-spacing:.08em}

/* ============================ EVENTS ============================ */
.nextev{border:1px solid var(--line-d);padding:clamp(30px,4vw,64px);text-align:center;
  background:rgba(48,30,22,.4);max-width:1000px;margin-inline:auto}
.nextev .datebig{font-family:var(--serif);font-size:clamp(3.4rem,8vw,6.4rem);line-height:1;
  letter-spacing:.02em;color:var(--honey)}
.nextev .datesub{margin-top:10px;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--dim);font-weight:600}
.nextev :is(h2,h3){margin-top:clamp(20px,2.6vw,32px)}
.nextev .lede{margin-inline:auto;margin-top:1.1rem}
.nextev .btns{justify-content:center;margin-top:clamp(26px,3vw,38px)}

.evlist{max-width:1080px;margin-inline:auto}
details.ev{border-top:1px solid var(--line)}
details.ev:last-of-type{border-bottom:1px solid var(--line)}
details.ev summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:clamp(96px,11vw,158px) minmax(0,1fr) auto;gap:clamp(14px,2vw,30px);
  align-items:center;padding:clamp(18px,2.1vw,26px) 0;
  transition:padding-inline .5s var(--ease),background-color .5s var(--ease)}
details.ev summary::-webkit-details-marker{display:none}
details.ev summary:hover{background:var(--cream-2);padding-inline:clamp(10px,1.4vw,20px)}
details.ev .dt{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--honey-d)}
details.ev .ti{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.24;letter-spacing:.025em}
details.ev .pm{flex:none;width:24px;height:24px;position:relative;color:var(--honey-d)}
details.ev .pm::before,details.ev .pm::after{content:"";position:absolute;background:currentColor;
  left:50%;top:50%;transition:transform .45s var(--ease)}
details.ev .pm::before{width:13px;height:1px;transform:translate(-50%,-50%)}
details.ev .pm::after{width:1px;height:13px;transform:translate(-50%,-50%)}
details.ev[open] .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
details.ev .body{padding:0 0 clamp(24px,2.8vw,34px);max-width:80ch;color:var(--muted);
  font-size:.97rem;font-weight:300;line-height:1.8}
details.ev .body p+p{margin-top:.95em}
@media (max-width:760px){
  details.ev summary{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"d p" "t t";row-gap:8px}
  details.ev .dt{grid-area:d}details.ev .ti{grid-area:t}details.ev .pm{grid-area:p}
}

/* ============================ COLLECTIVES ============================ */
.kol{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,4vw,64px);align-items:center;
  padding-block:clamp(38px,5vw,74px);border-top:1px solid var(--line)}
.kol:first-of-type{border-top:0;padding-top:0}
@media (max-width:880px){.kol{grid-template-columns:minmax(0,1fr)}}
.kol.rev .kol-m{order:1}
@media (max-width:880px){.kol.rev .kol-m{order:0}}
.kol .prose{color:var(--muted);font-size:.99rem;font-weight:300;line-height:1.8}
.kol .prose p+p{margin-top:.9em}
.kol :is(h2,h3){margin-bottom:.5em}
.kol .when{display:inline-flex;align-items:center;gap:.7em;margin-top:20px;
  border:1px solid var(--line);padding:.7em 1.1em;font-size:.8rem;font-weight:400;color:var(--ink)}
.kol .when svg{flex:none;color:var(--honey-d)}
.kol .ctc{margin-top:22px;display:grid;gap:9px;font-size:.9rem}
.kol .ctc div{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.kol .ctc dt{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--honey-d);
  min-width:76px;flex:none;font-weight:600}
.kol .ctc a{color:var(--ink);border-bottom:1px solid rgba(133,90,29,.4);text-decoration:none}
.kol .ctc a:hover{border-color:var(--ink)}
.kol .btns{margin-top:24px}

/* ============================ GALLERY ============================ */
.gal{display:grid;gap:clamp(10px,1.2vw,18px);grid-template-columns:repeat(12,minmax(0,1fr))}
.gal figure{position:relative;overflow:hidden;background:var(--cream-3);margin:0}
.gal .ph{height:100%;transition:transform 1s var(--ease)}
.gal figure:hover .ph{transform:scale(1.05)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:46px 18px 16px;
  background:linear-gradient(to top,rgba(21,12,9,.95) 30%,rgba(21,12,9,.7) 62%,transparent);
  color:var(--cream);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.6;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.gal .s8{grid-column:span 8}.gal .s6{grid-column:span 6}
.gal .s4{grid-column:span 4}.gal .s3{grid-column:span 3}
.gal .r2 .ph{aspect-ratio:4/5}
.gal .r1 .ph{aspect-ratio:4/3}
.gal .rw .ph{aspect-ratio:16/9}
@media (max-width:900px){
  .gal{grid-template-columns:repeat(6,minmax(0,1fr))}
  .gal .s8,.gal .s6{grid-column:span 6}.gal .s4,.gal .s3{grid-column:span 3}
}
@media (max-width:560px){
  .gal{grid-template-columns:minmax(0,1fr)}
  .gal .s8,.gal .s6,.gal .s4,.gal .s3{grid-column:span 1}
  .gal .ph{aspect-ratio:4/3!important}
}

/* ============================ CONTACT ============================ */
.ctc-grid{display:grid;gap:clamp(30px,4vw,66px);
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}
@media (max-width:940px){.ctc-grid{grid-template-columns:minmax(0,1fr)}}
.ctc-list{display:grid;gap:0}
.ctc-list a,.ctc-list div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  align-items:start;padding:1.3em 0;border-top:1px solid var(--line-d);text-decoration:none}
.ctc-list>:last-child{border-bottom:1px solid var(--line-d)}
.ctc-list svg{flex:none;color:var(--honey);margin-top:.35em}
.ctc-list dt{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--honey);
  margin-bottom:7px;font-weight:600;opacity:.85}
.ctc-list dd{font-family:var(--serif);font-weight:400;font-size:clamp(1.02rem,1.4vw,1.28rem);
  letter-spacing:.025em;line-height:1.4;color:var(--cream)}
.ctc-list a:hover dd{color:var(--honey)}

.routes{display:grid;gap:0;margin-top:32px}
.routes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding:1.2em 0;
  border-top:1px solid var(--line-d);font-size:.96rem;font-weight:300;line-height:1.74;color:var(--dim)}
.routes li:last-child{border-bottom:1px solid var(--line-d)}
.routes b{display:block;color:var(--honey);font-weight:600;font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:7px}
.routes .ic{width:36px;height:36px;border:1px solid var(--line-d);display:flex;
  align-items:center;justify-content:center;flex:none;color:var(--honey);border-radius:50%}

.mapcard{border:1px solid var(--line-d);padding:clamp(24px,2.8vw,38px);background:rgba(48,30,22,.34)}
.mapcard svg{width:100%;height:auto}

/* hours */
.hours{border:1px solid var(--line);padding:clamp(28px,3.2vw,44px)}
.hours ul{margin-top:20px}
.hours li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:.95em 0;border-bottom:1px solid var(--line);font-size:.96rem;font-weight:300}
.hours li:first-child{border-top:1px solid var(--line)}
.hours li span{color:var(--muted);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600}
.hours li b{font-family:var(--serif);font-weight:400;font-size:1.1rem;letter-spacing:.02em;
  white-space:nowrap}

/* news "read more" */
.nx{margin-top:auto}
.nx summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.7em;
  font-weight:600;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--honey);padding-bottom:.4em;width:-moz-fit-content;width:fit-content}
.nx summary::-webkit-details-marker{display:none}
.nx summary::after{content:"+";font-size:1rem;line-height:1}
.nx[open] summary::after{content:"\2212"}
.nx summary:hover{color:var(--cream)}
.nxb{margin-top:16px;font-size:.92rem;font-weight:300;line-height:1.76;color:var(--dim)}
.nxb p+p{margin-top:.85em}

/* ============================ FORM ============================ */
.formbox{border:1px solid var(--line);padding:clamp(28px,3.4vw,50px)}
.form{display:grid;gap:22px}
.f2{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:680px){.f2{grid-template-columns:minmax(0,1fr)}}
.field label{display:block;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--honey-d);margin-bottom:10px;font-weight:600}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:.8em 0;font-size:1rem;font-weight:300;color:inherit;
  transition:border-color .4s var(--ease);border-radius:0;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23855A1D' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2em center;padding-right:2em}
.field textarea{resize:vertical;min-height:126px;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--honey-d)}
/* Dropping the outline here would leave a keyboard user with nothing but a 1px
   border tint to show where they are, so keep the ring for focus-visible. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--honey-d);outline-offset:3px}
.on-dark .field :focus-visible,.dark .field :focus-visible,.bark .field :focus-visible{outline-color:var(--honey)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.5}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.fmsg{padding:1.2em 1.4em;border-left:2px solid var(--honey-d);background:rgba(133,90,29,.09);
  font-size:.94rem;font-weight:300;display:none}
.fmsg.on{display:block}
.fnote{font-size:.82rem;font-weight:300;color:var(--muted);line-height:1.7}

/* ============================ FOOTER ============================ */
.ftr{background:var(--night);color:var(--dim);font-size:.92rem;font-weight:300}
.ftr-top{display:grid;gap:clamp(32px,4vw,60px);
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  padding-block:clamp(56px,7vw,96px)}
@media (max-width:940px){.ftr-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftr-brand{grid-column:1/-1}}
@media (max-width:580px){.ftr-top{grid-template-columns:minmax(0,1fr)}}
.ftr img.wm{width:min(250px,72%);height:auto;margin-bottom:28px}
.ftr :is(h2,h4){font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--honey);
  margin-bottom:22px;font-family:var(--sans);font-weight:600}
.ftr a{text-decoration:none;transition:color .3s var(--ease)}
.ftr a:hover{color:var(--honey)}
.ftr ul{display:grid;gap:4px}
.ftr ul a{display:inline-block;padding-block:4px;line-height:1.3}
.ftr .adr{display:grid;gap:10px;max-width:36ch;line-height:1.75}
.ftr .adr a{color:var(--cream)}
.soc{display:flex;gap:11px;margin-top:28px}
.soc a{width:44px;height:44px;border:1px solid var(--line-d);display:flex;align-items:center;
  justify-content:center;color:var(--cream);border-radius:50%;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.soc a:hover{background:var(--honey);color:var(--honey-ink);border-color:var(--honey)}
/* Both funder logos are full-colour marks with dark elements (and the EU
   emblem, which must not be recoloured), so they sit on a light plaque
   instead of being filtered into grey boxes. */
.funders{padding-block:clamp(26px,3.2vw,42px)}
.funders :is(h2,h4){margin-bottom:18px}
.funders .row{display:flex;align-items:stretch;gap:clamp(14px,1.8vw,24px);flex-wrap:wrap}
.funder{background:var(--cream);display:flex;align-items:center;justify-content:center;
  padding:clamp(13px,1.5vw,20px) clamp(18px,2.2vw,30px);
  border:1px solid rgba(248,242,232,.14);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),background-color .55s var(--ease)}
.funder img{height:clamp(29px,3.1vw,44px);width:auto;display:block}
/* the LEADER lockup carries a lot of internal white space, so it needs a
   little more height to read at the same optical size as Kodukant */
.funder--leader img{height:clamp(36px,3.9vw,55px)}
a.funder:hover{transform:translateY(-4px);background:#fff;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.75)}
@media (max-width:520px){.funder{flex:1 1 100%}}
.ftr details{padding-block:24px}
.ftr summary{cursor:pointer;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--honey);font-weight:600;display:flex;align-items:center;gap:12px;list-style:none}
.ftr summary::-webkit-details-marker{display:none}
.ftr summary::after{content:"+";font-size:1rem;line-height:1}
.ftr details[open] summary::after{content:"\2212"}
.ftr details .in{padding-top:20px;font-size:.8rem;line-height:1.85;max-width:104ch;
  display:grid;gap:18px;color:rgba(195,176,154,.82)}
.ftr-btm{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-block:28px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  border-top:1px solid var(--line-d)}

/* ============================ PAGE HEADS + ROUTER ============================ */
.page-h{padding-block:clamp(60px,8vw,124px) clamp(40px,4.6vw,68px);
  background:var(--night);color:var(--cream);position:relative;overflow:hidden;text-align:center}
.page-h::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0%,rgba(227,188,126,.13),transparent 72%)}
.page-h .wrap{position:relative}
.page-h .inner{max-width:78ch;margin-inline:auto}
.crumb{display:flex;align-items:center;justify-content:center;gap:.8em;font-size:.6rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:26px;font-weight:600}
.crumb a{text-decoration:none;display:inline-block;padding-block:.45em}
.crumb a:hover{color:var(--honey)}
.page-h .lede{margin-top:1.4rem;margin-inline:auto}

/* ---------- reveal ---------- */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-2{transition-delay:.1s}
html.js .rv-3{transition-delay:.2s}
html.js .rv-4{transition-delay:.3s}
html.js .rv-5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{.hdr,.top,.mnav,.burger,.skip,.scroll-cue{display:none!important}}

/* On narrow screens the text column is a small share of the photo, so the
   percentage-based scrim no longer covers it. Darken deliberately here. */
@media (max-width:820px){
  /* Narrow screens still need more cover than desktop, but the darkening is
     warm and the top of the frame stays open so the flags and sky read. */
  .hero-veil{background:
    radial-gradient(130% 80% at 50% 50%,rgba(46,27,19,0) 0%,rgba(38,21,14,.3) 52%,rgba(30,17,12,.68) 100%),
    linear-gradient(to bottom,rgba(21,12,9,.62) 0%,rgba(21,12,9,.05) 18%,rgba(24,14,10,.3) 58%,rgba(21,12,9,.75) 88%,var(--night) 100%)}
  .hero-in::before{inset:-10% -36%;
    background:radial-gradient(74% 60% at 50% 54%,rgba(38,21,14,.88) 0%,rgba(38,21,14,.76) 48%,
                rgba(38,21,14,.34) 78%,transparent 94%)}
  .hero-bg{background-position:52% 46%}
}

/* ---------- small phones ---------- */
@media (max-width:520px){
  .btns{flex-direction:column;align-items:stretch}
  .btn{width:100%;padding-inline:1.2em;overflow-wrap:anywhere}
  .hours li{flex-wrap:wrap;gap:2px 14px}
  .hours li b{white-space:normal}
  .ctc-list dd,.kol .ctc a{overflow-wrap:anywhere}
  .hero-eyebrow{letter-spacing:.3em;flex-wrap:wrap}
}
/* ---------- ultrawide ---------- */
@media (min-width:2000px){
  :root{--maxw:1680px;--gut:clamp(80px,6vw,160px)}
  body{font-size:1.12rem}
}

/* ============================================================
   MOTION
   One orchestrated entrance per page, plus a few restrained
   interactions. Everything here is additive: with JS off or
   reduced-motion on, the page is complete and still.
   ============================================================ */

/* scroll progress, drawn on the header's bottom edge */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:3;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--honey-d),var(--honey));
  will-change:transform}

/* header condenses once you leave the hero */
.hdr>.wrap{transition:min-height .55s var(--ease)}
.hdr.stuck>.wrap{min-height:62px}
.brandlink img{transition:width .55s var(--ease)}
.hdr.stuck .brandlink img{width:clamp(134px,11.5vw,180px)}

/* incoming page */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html.js main#main{animation:pageIn .5s var(--ease) both}
@media (prefers-reduced-motion:reduce){html.js main#main{animation:none}}

/* hero entrance, staggered */
html.js .hero .rv{transition-duration:1.1s}
.hero-badge{transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)!important}
html.js .hero-badge:not(.in){transform:translateY(22px) scale(.82)}
html.js .hero-badge.in{transform:none}
/* drawn by default so the ring is complete without JS; only the
   JS-enhanced pre-reveal state hides it */
.hero-badge svg ellipse{stroke-dasharray:230;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s var(--ease) .25s}
html.js .hero-badge:not(.in) svg ellipse{stroke-dashoffset:230}

/* the ring ornament draws itself when its section arrives */
.orn svg ellipse{stroke-dasharray:34;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s var(--ease) .15s,transform 1.2s var(--ease)}
html.js .rv:not(.in) .orn svg ellipse,
html.js .orn.rv:not(.in) svg ellipse{stroke-dashoffset:34}

/* hero parallax layer */
.hero-bg{will-change:transform}

/* smooth accordion */
details.ev .body{overflow:hidden}
html.js details.ev .body-in{display:block}
html.js details.ev[data-anim] .body{transition:height .45s var(--ease)}

/* stat numbers land rather than snap */
.stats b{font-variant-numeric:tabular-nums}

/* interactive polish */
.card-m{position:relative}
.card-m::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(21,12,9,.35),transparent 55%);
  opacity:0;transition:opacity .6s var(--ease)}
.card:hover .card-m::after{opacity:1}
.gal figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(227,188,126,0);transition:box-shadow .6s var(--ease)}
.gal figure:hover::after{box-shadow:inset 0 0 0 1px rgba(227,188,126,.55)}
.svc{position:relative;overflow:hidden}
.svc::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--honey-d);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.svc:hover::after{transform:scaleX(1)}
.price{transition:transform .55s var(--ease),border-color .55s var(--ease)}
.price:hover{transform:translateY(-4px);border-color:var(--honey)}
.soc a{transition:background-color .35s var(--ease),color .35s var(--ease),
  border-color .35s var(--ease),transform .35s var(--ease)}
.soc a:hover{transform:translateY(-3px)}
.ctc-list a svg,.routes .ic{transition:transform .45s var(--ease)}
.ctc-list a:hover svg{transform:translateX(3px)}
.scroll-cue i{animation:cueDrift 2.6s var(--ease) infinite}
@keyframes cueDrift{0%,100%{transform:scaleY(1);opacity:.7}50%{transform:scaleY(.6);opacity:1}}

@media (prefers-reduced-motion:reduce){
  html.js .page.active{animation:none}
  .hero-badge svg ellipse,.orn svg ellipse{stroke-dashoffset:0!important;transition:none!important}
  html.js .hero-badge:not(.in){transform:none}
  .scroll-cue i{animation:none}
  .progress{display:none}
  html.js details.ev[data-anim] .body{transition:none}
}


/* ============================================================
   .ph = photo element. Each data URI is declared exactly ONCE
   in a class below, so a picture reused across several pages
   costs nothing extra. role="img" + aria-label is equivalent to
   an image with alt text. Renders with JavaScript disabled.
   ============================================================ */
.ph{display:block;width:100%;aspect-ratio:var(--ar,3/2);background-image:var(--src);
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  background-color:var(--cream-3);-webkit-print-color-adjust:exact;print-color-adjust:exact}

/* The hero photo is a bright daylight exterior, so the outlined button and the
   scroll cue need their own backing to stay legible wherever they land on it. */
.hero .btn-o{background:rgba(24,14,10,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hero .btn-o:hover{background:var(--honey)}
.hero .scroll-cue{text-shadow:0 2px 10px rgba(21,12,9,.95)}
.hero .scroll-cue i{box-shadow:0 0 10px rgba(21,12,9,.8)}

/* ---------- footer: grant records ----------
   Two short labelled records instead of two unbroken paragraphs. Collapsed by
   default; when open they sit side by side and stack on a phone. */
.ftr .grants .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(22px,3.4vw,56px);max-width:none}
.ftr .grant{margin:0}
.ftr .grant dt{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--honey);
  font-weight:600;line-height:1.6;margin-bottom:14px}
.ftr .grant dd{margin:0 0 10px;font-size:.8rem;line-height:1.65;color:var(--dim);max-width:62ch}
.ftr .grant dd span{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--cream);opacity:.72;margin-bottom:2px}

/* ---------- photos restored from old carousels ---------- */
.prose .oru-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:12px;margin-top:1.9em}
.prose .oru-gallery figure{margin:0}
.prose .oru-gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;max-height:none}

/* ---------- next event: every date of a run ---------- */
.nextev-when{margin-top:.9rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--honey);font-weight:600;line-height:1.7}

/* The grants toggle is a navigation target too: keep it at least 44px tall. */
.ftr details.grants{padding-block:10px}
.ftr details.grants>summary{min-height:44px;padding-block:12px;display:flex;align-items:center;gap:.8em}

/* ---------- language switch ----------
   Both languages always visible, the current one filled, so the way back to
   Estonian is as obvious as the way to English. */
.lang{display:inline-flex;align-items:center;border:1px solid rgba(227,188,126,.34);border-radius:2px;flex:none}
.lang a{display:inline-flex;align-items:center;min-height:28px;padding:.5em .72em;line-height:1.2;
  font-size:.71rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--cream)}
.lang a[aria-current]{background:var(--honey);color:var(--honey-ink)}
.lang a:not([aria-current]):hover{color:var(--honey)}
/* Where the main nav collapses into the menu button, the switch moves into the
   sticky bar beside it: always within reach, and the utility bar above stays
   two rows on a phone instead of three. */
.lang--hdr{display:none}
@media (max-width:1240px){
  .top .lang{display:none}
  .lang--hdr{display:inline-flex}
}
@media (max-width:359px){
  .brandlink img,.hdr.stuck .brandlink img{width:124px}
  .lang--hdr a{padding-inline:.55em}
}

/* Card title links: Fraunces has a shorter content box than Bodoni, which left a
   one-line title link 23px tall. Inline padding grows the target, not the layout. */
.card-b .d4 a{padding-block:.14em}