/* ============================================================
   LOOPAGOLF — theme foundation
   ------------------------------------------------------------
   Tokens, base, layout, type, buttons, header, footer.
   Section layouts travel with their block, not with this file.

   Every token below reads from theme.json's generated custom
   properties with a literal fallback. That way the block editor's
   colour picker and the front end can never drift apart, and the
   stylesheet still stands on its own if theme.json changes.
   ============================================================ */

:root{
  /* colour — mirrors settings.color.palette in theme.json */
  --paper:     var(--wp--preset--color--cream,            #fad495);
  --paper-hi:  var(--wp--preset--color--cream-light,      #fdf1d4);
  --paper-dp:  var(--wp--preset--color--cream-tint,       #f5e0b4);
  --palm:      var(--wp--preset--color--palm,             #2c3a20);
  --ocean:     var(--wp--preset--color--ocean,            #0f3b46);
  --ocean-dp:  var(--wp--preset--color--ocean-deep,       #0a2b33);
  --ocean-bk:  var(--wp--preset--color--ocean-black,      #061c22);
  /* #c0461d, not #c4471e. The primary button is cream on terracotta, and at
     #c4471e that pair measures 4.38:1 — under the 4.5 a 19px non-bold label
     needs. Darkening the ground by two per cent takes it to 4.52 and the
     change is four points of red: the swatch is the same swatch. The
     alternative was white button text, which passes at 4.92 but costs the
     cream that everything else on the site is set in. */
  --terra:     var(--wp--preset--color--terracotta,       #c0461d);
  --terra-dp:  var(--wp--preset--color--terracotta-deep,  #9d360f);
  --olive:     var(--wp--preset--color--olive,            #4f4b0f);
  --olive-lt:  var(--wp--preset--color--olive-light,      #6f6a1c);
  --gold:      var(--wp--preset--color--gold,             #c9a227);
  --gold-lt:   var(--wp--preset--color--gold-light,       #e4c77e);

  /* derived, not in the palette because they carry transparency */
  --rule:    rgba(44,58,32,.24);
  --rule-dk: rgba(228,199,126,.24);
  --body:    rgba(15,59,70,.82);

  /* layout — mirrors settings.custom in theme.json */
  --wrap:        var(--wp--custom--wrap,        1240px);
  --wrap-narrow: var(--wp--custom--wrap-narrow, 860px);
  --gut:         var(--wp--custom--gutter,      clamp(20px,5vw,56px));
  --bar:         var(--wp--custom--bar,         72px);
  --ease:        var(--wp--custom--ease,        cubic-bezier(.19,1,.22,1));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:'Jost',system-ui,-apple-system,sans-serif;font-weight:300;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Room for the strip that rises along the bottom on phones — but only on a page
   that actually has one. Unconditionally, this left 72px of dead space under the
   footer on every page where the strip was switched off or the event had closed. */
body:has(.sticky){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
/* theme.json's blockGap is wanted inside groups, but WordPress also applies it
   between the TOP-LEVEL children of .wp-site-blocks — which put 24px of page
   background between the header part and <main>. Because the header is fixed and
   transparent, that gap read as a cream band across it, and it pushed the hero
   down far enough that the marquee along its floor fell below the fold. Sections
   own their own vertical rhythm here, so the top level needs no gap at all. */
.wp-site-blocks > * + *{margin-block-start:0}

/* The same gap applies again one level in, because <main> is a flow layout:
   :where(.is-layout-flow) > * gets margin-block-start, which showed as a band of
   page background between every pair of sections. Every Loopa section carries its
   own padding-block, so the gap is only ever a seam. Scoped to those sections by
   class, so a paragraph or group the client adds still gets normal spacing. */
[class*="wp-block-loopa-"]{margin-block-start:0}

/* ---------- one screenful ----------
   Wraps the event hero and the strip beneath it so the two together are exactly
   the height of the screen. Done with flex rather than by subtracting a fixed
   strip height from 100svh: the strip's real height depends on its own padding
   and on whether its cells wrap, and a guessed number was 29px out. The strip
   takes what it needs, the hero takes the rest.

   min-height, not height: on a phone the strip becomes three rows and the hero
   has a floor of its own, so the pair is allowed to grow past one screen rather
   than crushing the hero to fit. */
.loopa-screenful{
  min-height:100svh;
  display:flex;flex-direction:column;
}
.loopa-screenful > .loopa-hero{flex:1 1 auto}
.loopa-screenful > .loopa-glance{flex:0 0 auto}
/* Above a viewport tall enough to hold it, the pair is exactly one screen and the
   hero gives up its floor so flex can size it. Below that the min-height above
   still applies and the pair is allowed to run past the fold — better a scroll
   than a hero with its own content clipped out of it. */
@media (min-height:660px){
  .loopa-screenful{height:100svh}
  .loopa-screenful > .loopa-hero{min-height:0}
}

img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul{padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);width:100%}
.wrap--narrow{max-width:var(--wrap-narrow)}
.wrap--flush{padding-inline:0}   /* full-bleed bands that still respect --wrap */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--terra);color:var(--paper-hi);
  padding:12px 20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

/* The event numeral is a brand element, not a control — it is the one place
   terracotta is allowed outside an action. Olive carries every editorial label. */
.num{fill:var(--terra)}

/* ---------- type primitives ---------- */
.eyebrow{display:flex;align-items:center;gap:13px;font-size:11px;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--olive)}
.eyebrow::before{content:"";width:0;height:1px;background:currentColor;opacity:.6;flex:0 0 auto;
  transition:width 1.1s var(--ease) .15s}
.in .eyebrow::before,.eyebrow.in::before{width:clamp(24px,5vw,52px)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:0;height:1px;background:currentColor;opacity:.6;flex:0 0 auto;
  transition:width 1.1s var(--ease) .15s}
.in .eyebrow.center::after{width:clamp(24px,5vw,52px)}

.h2{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;color:var(--palm);line-height:.96;
  font-size:clamp(32px,6vw,64px);letter-spacing:.09em}
.h3{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;color:var(--palm);line-height:1;
  font-size:clamp(21px,2.8vw,30px);letter-spacing:.13em}
.lede{font-size:clamp(15px,1.55vw,17.5px);line-height:1.8;max-width:58ch}
.hair{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--rule) 12%,var(--rule) 88%,transparent)}

section{scroll-margin-top:calc(var(--bar) + 10px)}
.band{padding-block:clamp(64px,9.5vw,140px)}
/* Two bands of the same colour meeting read as one band, but pay for two lots of
   padding — up to 280px of empty ground with no visible boundary to justify it.
   Where the seam is invisible, both sides of it come in. */
.band--dark + .band--dark,
.band--tint + .band--tint{padding-block-start:clamp(28px,4vw,56px)}
.band--dark:has(+ .band--dark),
.band--tint:has(+ .band--tint){padding-block-end:clamp(28px,4vw,56px)}
.band--tint{background:var(--paper-dp)}
.band--dark{background:var(--ocean-dp);color:rgba(253,241,212,.78)}
.band--dark .h2,.band--dark .h3{color:var(--paper-hi)}
.band--dark .eyebrow{color:var(--gold)}
.band--dark .hair{background:linear-gradient(90deg,transparent,var(--rule-dk) 12%,var(--rule-dk) 88%,transparent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 clamp(24px,3vw,38px);
  font-family:'Bebas Neue',Impact,sans-serif;font-size:19px;letter-spacing:.2em;text-indent:.2em;
  text-decoration:none;cursor:pointer;border:1px solid var(--terra);background:var(--terra);
  color:var(--paper-hi);position:relative;overflow:hidden;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn::after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg)}
.btn:hover{background:var(--terra-dp);border-color:var(--terra-dp);transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(163,56,15,.3)}
.btn:hover::after{animation:sweep .85s var(--ease)}
.btn:active{transform:translateY(0)}
@keyframes sweep{to{left:150%}}
.btn--ghost{background:transparent;color:var(--palm);border-color:var(--rule)}
.btn--ghost:hover{background:transparent;color:var(--terra);border-color:var(--terra);box-shadow:none}
.btn--onPhoto{background:rgba(6,28,34,.3);color:#fdf1d4;border-color:rgba(253,241,212,.6)}
.btn--onPhoto:hover{background:rgba(253,241,212,.14);border-color:#fdf1d4;box-shadow:none}
.btn--onDark{background:transparent;color:var(--gold-lt);border-color:rgba(228,199,126,.5)}
.btn--onDark:hover{background:var(--gold-lt);color:var(--ocean-dp);border-color:var(--gold-lt);box-shadow:none}
.btn--sm{min-height:44px;font-size:16px;padding:0 20px}

/* ============ HEADER ============ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent}
.hdr .wrap{display:flex;align-items:center;gap:16px;min-height:var(--bar)}
.hdr.stuck{background:rgba(250,212,149,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);box-shadow:0 12px 34px -26px rgba(44,58,32,.7)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;padding-block:8px}
.brand svg{width:clamp(98px,14vw,130px);height:auto;color:#fdf1d4;display:block;
  filter:drop-shadow(0 2px 14px rgba(6,28,34,.5));transition:color .45s var(--ease),filter .45s var(--ease)}
.brand span{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:rgba(253,241,212,.8);
  padding-left:11px;border-left:1px solid rgba(253,241,212,.35);line-height:1;transition:color .45s var(--ease),border-color .45s var(--ease)}
.hdr.stuck .brand svg{color:var(--palm);filter:none}
/* The checkout bar carries one link out and nothing else, so it sits where the
   nav would have been rather than being centred in empty space. */
.hdr--checkout .hdr__back{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;text-decoration:none;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--olive);
  transition:color .3s var(--ease);
}
.hdr--checkout .hdr__back:hover{color:var(--terra)}
.hdr.stuck .brand span{color:var(--terra-dp);border-left-color:var(--rule)}
.nav{display:none;margin-left:auto;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{font-size:11.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#fdf1d4;
  text-decoration:none;opacity:.9;text-shadow:0 1px 10px rgba(6,28,34,.5);
  transition:opacity .3s var(--ease),color .3s var(--ease)}
.hdr.stuck .nav a{color:var(--palm);text-shadow:none;opacity:.84}
.nav a:hover{opacity:1;color:var(--terra)}

/* The account door, beside Register rather than inside the nav: one is where you
   go, the other is who you are. Same colours as the nav because gold fails over
   both of the bar's two backgrounds; the hairline does the separating. */
.hdr__auth{display:none;align-items:center;flex:0 0 auto;
  padding:10px 0 10px clamp(14px,2vw,24px);margin-left:clamp(4px,1vw,10px);
  border-left:1px solid rgba(253,241,212,.28);
  font-size:11.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:#fdf1d4;text-decoration:none;opacity:.9;text-shadow:0 1px 10px rgba(6,28,34,.5);
  transition:opacity .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.hdr__auth:hover{opacity:1;color:var(--terra)}
.hdr.stuck .hdr__auth{color:var(--palm);text-shadow:none;opacity:.84;
  border-left-color:var(--rule)}
.hdr.stuck .hdr__auth:hover{color:var(--terra-dp);opacity:1}
.hdr__actions{display:none}
/* With no nav to push things right, this is what does it. */
.hdr__auth--alone{margin-left:auto;border-left:0;padding-left:0}
.hdr .btn{margin-left:auto;display:none !important}
.hdr__account--alone{margin-left:auto}
.burger{margin-left:auto;width:46px;height:46px;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0}
.burger i{display:block;width:23px;height:1.5px;background:#fdf1d4;position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:23px;height:1.5px;background:#fdf1d4;
  transition:transform .4s var(--ease),top .3s var(--ease),background .2s}
.burger i::before{top:-7px}.burger i::after{top:7px}
.hdr.stuck .burger i,.hdr.stuck .burger i::before,.hdr.stuck .burger i::after{background:var(--palm)}
.menu-open .burger i{background:transparent !important}
.menu-open .burger i::before{top:0;transform:rotate(45deg);background:#fdf1d4 !important}
.menu-open .burger i::after{top:0;transform:rotate(-45deg);background:#fdf1d4 !important}

.drawer{position:fixed;inset:0;z-index:95;background:var(--ocean-bk);
  display:flex;flex-direction:column;justify-content:flex-start;gap:4px;
  padding:calc(var(--bar) + 24px) var(--gut) calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
.menu-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer a{font-family:'Bebas Neue',Impact,sans-serif;font-size:clamp(28px,8vw,42px);letter-spacing:.14em;
  color:var(--paper-hi);text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(228,199,126,.14)}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{margin-top:24px;width:100%}
.drawer .foot{margin-top:auto;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(253,241,212,.44)}

@media (max-width:380px){
  /* The mark remains identifiable on the narrowest phones; its wordmark must
     not compete with the menu close control for the same few pixels. */
  .menu-open .brand span{display:none}
}

/* ============ FOOTER ============ */
.ftr{background:var(--ocean-bk);color:rgba(253,241,212,.64);padding-block:clamp(46px,6vw,76px) 0}
.ftr__grid{display:grid;gap:clamp(30px,4vw,44px);grid-template-columns:1fr}
.ftr__brand svg{width:156px;height:auto;color:var(--paper-hi)}
.ftr__brand p{margin-top:15px;font-size:13px;line-height:1.7;max-width:34ch}
.ftr__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.ftr h3{font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.ftr li{margin-bottom:10px}
.ftr a{font-size:13px;letter-spacing:.05em;text-decoration:none;color:rgba(253,241,212,.74);transition:color .3s var(--ease)}
.ftr a:hover{color:var(--gold-lt)}
.ftr__base{margin-top:clamp(36px,5vw,56px);padding-block:22px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(228,199,126,.16);display:flex;flex-wrap:wrap;gap:8px 18px;
  justify-content:center;text-align:center;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(253,241,212,.55)}
.ftr__base a{font-size:11px;letter-spacing:.22em;text-transform:uppercase}

/* ============ STICKY CTA ============ */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,212,149,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--rule);transform:translateY(115%);transition:transform .5s var(--ease)}
.sticky.on{transform:none}
.sticky__txt{display:grid;gap:2px;min-width:0}
.sticky__txt b{font-family:'Bebas Neue',Impact,sans-serif;font-size:17px;letter-spacing:.13em;color:var(--palm);line-height:1}
.sticky__txt span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(15,59,70,.68)}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(22px);filter:blur(8px)}
.rv.in{opacity:1;transform:none;filter:blur(0);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease),filter 1.05s var(--ease);
  transition-delay:calc(var(--i,0) * 95ms)}
/* Photo wipe. The clip sits on the IMAGE, never on the observed container —
   a container collapsed by clip-path reports zero intersection, so the
   observer would never fire and the photo would stay hidden forever. */
.wipe img{clip-path:inset(0 0 100% 0)}
.wipe.in img{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--ease)}


/* ============ BREAKPOINTS — foundation only ============ */
/* ---------- target size ----------
   WCAG 2.2 AA (2.5.8) asks for 24x24 CSS pixels. The header nav sat at 20px
   and the footer links at 16-19px on every page of the site, because both are
   inline text with no box of its own. Measured, not assumed.

   The nav links are already centred in a 72px bar, so giving them a box costs
   no layout. The footer lists gain a few pixels of leading, which they wanted
   anyway at 13px on a dark ground. Nothing moves horizontally. */
.nav a{display:inline-flex;align-items:center;min-height:26px}
.ftr a{display:inline-flex;align-items:center;min-height:26px}
.ftr li{margin-bottom:4px}
.ftr__base a{min-height:26px}

/* On anything driven by a finger rather than a cursor, 26px is the floor and
   44px is what a thumb actually wants. */
@media (pointer:coarse){
  .nav a,.ftr a,.ftr__base a{min-height:44px}
  .ftr li{margin-bottom:0}
}

@media (min-width:600px){
  .ftr__cols{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .ftr__grid{grid-template-columns:1.1fr 1.6fr}
  .ftr__cols{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1080px){
  /* The global bar owns the viewport, not the 1240px content column. Equal
     outer tracks keep the navigation genuinely centred while the mark and the
     account action sit against matching page insets. */
  .hdr:not(.hdr--checkout) .wrap{
    max-width:none;padding-inline:clamp(30px,4vw,52px);
    display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr);
    gap:clamp(12px,1.5vw,24px)
  }
  .hdr:not(.hdr--checkout) .brand{grid-column:1;justify-self:start}
  .hdr:not(.hdr--checkout) .nav{
    grid-column:2;display:flex;margin-left:0;gap:clamp(10px,1.1vw,18px);
    white-space:nowrap
  }
  .hdr:not(.hdr--checkout) .nav a{
    white-space:nowrap;font-size:clamp(10px,.9vw,11.5px);letter-spacing:.17em
  }
  .hdr__actions{
    grid-column:3;display:flex;align-items:center;justify-content:flex-end;
    gap:clamp(8px,1vw,14px);min-width:0
  }
  .hdr__actions .hdr__auth{display:inline-flex;margin-left:0;white-space:nowrap}
  .hdr__actions .hdr__auth:first-child{border-left:0;padding-left:0}
  .hdr__actions .btn{margin-left:0;white-space:nowrap}
  .burger,.drawer{display:none}
  .hdr .btn.on{display:inline-flex !important}
  /* A signed-in player sees My Account as the only primary header action. It
     stays available over the hero and changes treatment with the bar. */
  .hdr .hdr__account{display:inline-flex !important;margin-left:0;
    background:rgba(6,28,34,.32);border-color:rgba(253,241,212,.62);color:var(--paper-hi)}
  .hdr.stuck .hdr__account{background:var(--terra);border-color:var(--terra);color:var(--paper-hi)}
  .sticky{display:none}
  body:has(.sticky){padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .hdr__auth{transition:none}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .wipe img{clip-path:none}
  .btn::after{display:none}
  .eyebrow::before,.eyebrow.center::after{transition:none;width:clamp(24px,5vw,52px)}
}


/* ============================================================
   SPLASH / COMING SOON — preserved verbatim.
   The live site still serves this. It uses its own --loopa-* token
   namespace, so it cannot collide with the foundation above. It is
   retired only once the splash moves onto the shared tokens.
   ============================================================ */

:root {
  --loopa-cream: #fad495;
  --loopa-cream-hi: #fdecc9;
  --loopa-paper: #f7e6c4;
  --loopa-ink: #2c3a20;
  --loopa-teal: #0f3b46;
  --loopa-terra: #c0461d;   /* see --terra above: 4.38 -> 4.52 with cream */
  --loopa-terra-deep: #a3380f;
  --loopa-rule: rgba(44, 58, 32, 0.28);
  --loopa-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.wp-block-cover.loopa-splash {
  position: relative;
  min-height: 100svh;
  margin: 0 !important;
  padding: 0;
  color: var(--loopa-ink);
  background: radial-gradient(120% 78% at 50% 0%, var(--loopa-cream-hi) 0%, var(--loopa-cream) 58%, #f4c87f 100%);
  isolation: isolate;
}

.loopa-splash > .wp-block-cover__image-background {
  z-index: 0 !important;
  object-position: center 56%;
  transform: scale(1.04);
  filter: saturate(0.96);
}

.loopa-splash > .wp-block-cover__background {
  z-index: 1 !important;
  opacity: 1 !important;
  background:
    linear-gradient(to bottom, var(--loopa-cream-hi) 0%, rgba(250, 212, 149, 0.99) 26%, rgba(250, 212, 149, 0.96) 38%, rgba(250, 212, 149, 0.64) 52%, rgba(250, 212, 149, 0.08) 70%, rgba(9, 36, 44, 0.52) 100%) !important;
}

.loopa-splash::after {
  content: "";
  position: fixed;
  inset: -120px;
  z-index: 10;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: loopa-grain 1.1s steps(5) infinite;
}

@keyframes loopa-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(4%, -5%); }
  60% { transform: translate(-3%, -3%); }
  80% { transform: translate(5%, 3%); }
  100% { transform: translate(0, 0); }
}

.loopa-splash > .wp-block-cover__inner-container {
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.loopa-splash-main {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  width: min(1120px, 100%);
  margin-inline: auto !important;
  padding: clamp(24px, 4svh, 50px) 24px clamp(56px, 14svh, 250px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6svh, 30px);
  text-align: center;
}

.loopa-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  color: var(--loopa-terra-deep);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.46em;
  text-transform: uppercase;
}

.loopa-kicker::before,
.loopa-kicker::after {
  content: "";
  width: clamp(26px, 7vw, 66px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.loopa-logo {
  margin: 0 !important;
}

.loopa-logo img {
  display: block;
  width: clamp(265px, min(56vw, 48svh), 620px);
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(44, 58, 32, 0.16));
}

.loopa-venue {
  width: min(620px, 92vw);
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.2svh, 13px);
  margin: 0 !important;
}

.loopa-venue .wp-block-separator {
  width: min(560px, 84vw);
  height: 1px;
  margin: 2px 0 !important;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--loopa-rule) 18%, var(--loopa-rule) 82%, transparent);
}

.loopa-venue-title {
  margin: 0 !important;
  color: var(--loopa-ink);
  font-family: var(--wp--preset--font-family--bebas-neue);
  font-size: clamp(32px, min(6.4vw, 8.2svh), 74px) !important;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.13em;
  text-indent: 0.13em;
  text-transform: uppercase;
}

.loopa-venue-place {
  margin: 0 !important;
  color: rgba(44, 58, 32, 0.72);
  font-size: clamp(11px, 1.35vw, 13px);
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.loopa-venue-dates {
  margin: 0 !important;
  color: var(--loopa-terra);
  font-family: var(--wp--preset--font-family--bebas-neue);
  font-size: clamp(19px, 2.7vw, 31px);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
}

.loopa-countdown {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.5svh, 16px);
  margin-block: clamp(4px, 1svh, 10px) 0 !important;
}

.count__lede,
.count__when,
.count__finished {
  margin: 0 !important;
  font-weight: 400;
  text-transform: uppercase;
}

.count__lede {
  color: rgba(44, 58, 32, 0.62);
  font-size: 11px;
  letter-spacing: 0.42em;
}

.clock {
  display: flex;
  align-items: stretch;
  gap: clamp(6px, 1.2vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.clock li {
  position: relative;
  min-width: clamp(64px, 11.5vw, 124px);
  padding: clamp(9px, 1.5svh, 16px) clamp(6px, 1vw, 14px) clamp(7px, 1.1svh, 12px);
  overflow: hidden;
  border: 1px solid var(--loopa-rule);
  background: rgba(253, 240, 214, 0.5);
  backdrop-filter: blur(3px);
  display: grid;
  justify-items: center;
  gap: 4px;
}

.clock li::after {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 1px solid rgba(196, 71, 30, 0.16);
}

.digits {
  display: flex;
  color: var(--loopa-ink);
  font-family: var(--wp--preset--font-family--bebas-neue);
  font-size: clamp(29px, min(5.4vw, 6.4svh), 62px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 0.9;
}

.digit {
  display: inline-block;
  min-width: 0.56em;
  text-align: center;
}

.digit.roll {
  animation: loopa-roll 0.5s var(--loopa-ease);
}

@keyframes loopa-roll {
  0% { transform: translateY(-58%); opacity: 0; filter: blur(5px); }
  55% { filter: blur(0); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

.clock .lbl {
  color: rgba(44, 58, 32, 0.55);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.count__when,
.count__finished {
  color: var(--loopa-terra-deep);
  font-size: clamp(11px, 1.15vw, 12.5px);
  letter-spacing: 0.22em;
}

.loopa-countdown.is-finished .clock,
.loopa-countdown.is-finished .count__when {
  display: none;
}

.loopa-splash .loopa-splash-footer {
  position: relative;
  z-index: 2;
  margin-top: auto !important;
  padding: 20px 24px calc(40px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(9, 36, 44, 0), rgba(9, 36, 44, 0.48) 34%, rgba(9, 36, 44, 0.84) 100%);
  color: #ffffff;
  font-size: clamp(11px, 1.05vw, 11.5px);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-align: center;
  text-shadow: 0 1px 3px rgba(6, 28, 34, 0.95);
  text-transform: uppercase;
}

.loopa-splash .loopa-splash-footer a {
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(246, 217, 162, 0.4);
  color: #f6d9a2;
  text-decoration: none;
}

.loopa-splash .loopa-splash-footer a:hover {
  border-color: #fff4de;
  color: #fff4de;
}

:focus-visible {
  outline: 2px solid var(--loopa-terra);
  outline-offset: 3px;
}

body.privacy-policy main.wp-block-group,
body.loopa-legal-page main.wp-block-group {
  width: min(100%, 880px);
  margin-inline: auto;
  padding-top: calc(var(--bar) + clamp(36px, 7vw, 76px)) !important;
  padding-bottom: clamp(52px, 9vw, 96px) !important;
}

body.privacy-policy .wp-block-post-title,
body.loopa-legal-page .wp-block-post-title {
  margin-bottom: 0.6rem;
  padding: 0 20px 0.75rem;
  border-bottom: 2px solid var(--loopa-teal);
  color: var(--loopa-teal);
  font-size: clamp(2rem, 7vw, 4.5rem);
  letter-spacing: 0.035em;
  line-height: 0.95;
}

.loopa-legal-copy {
  color: #26321e;
}

.loopa-legal-copy .loopa-legal-source {
  padding: clamp(8px, 2vw, 20px);
}

.loopa-legal-copy .loopa-legal-meta {
  margin-top: 0;
  color: rgba(44, 58, 32, 0.72);
  font-size: 0.88rem;
  letter-spacing: 0.035em;
}

.loopa-legal-copy .loopa-legal-intro {
  margin-top: 2rem;
  color: var(--loopa-teal);
  font-size: clamp(1.02rem, 1.5vw, 1.12rem);
  line-height: 1.8;
}

.loopa-legal-copy .wp-block-heading,
.loopa-legal-copy h2 {
  margin-top: clamp(2.1rem, 5vw, 3.2rem);
  margin-bottom: 0.7rem;
  color: var(--loopa-teal);
  font-size: clamp(1.45rem, 3.8vw, 2rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.loopa-legal-copy h2 {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding-top: 1rem;
  border-top: 1px solid rgba(44, 58, 32, 0.3);
}

.loopa-legal-copy h2 > span {
  color: var(--loopa-terra);
  font-size: 0.68em;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.loopa-legal-copy h3 {
  margin: 1.7rem 0 0.55rem;
  color: var(--loopa-teal);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.3;
}

.loopa-legal-copy p,
.loopa-legal-copy li {
  line-height: 1.75;
}

.loopa-legal-copy .wp-block-list {
  padding-left: 1.4rem;
}

.loopa-legal-copy li {
  margin-bottom: 0.55rem;
  padding-left: 0.25rem;
}

.loopa-legal-copy li::marker {
  color: var(--loopa-terra);
}

.loopa-legal-copy strong {
  color: #172012;
  font-weight: 500;
}

.loopa-legal-copy a {
  color: var(--loopa-terra);
  text-underline-offset: 0.2em;
}

.loopa-legal-copy .loopa-legal-emphasis {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--loopa-terra);
  background: rgba(255, 244, 222, 0.62);
  color: #172012;
  font-size: 0.92rem;
}

.loopa-legal-copy .loopa-legal-table {
  max-width: 100%;
  margin: 1.5rem 0;
  overflow-x: auto;
  border: 1px solid rgba(44, 58, 32, 0.35);
}

.loopa-legal-copy table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.loopa-legal-copy th,
.loopa-legal-copy td {
  min-width: 180px;
  padding: 0.85rem;
  border-right: 1px solid rgba(44, 58, 32, 0.25);
  border-bottom: 1px solid rgba(44, 58, 32, 0.25);
  text-align: left;
  vertical-align: top;
}

.loopa-legal-copy th {
  background: rgba(44, 58, 32, 0.08);
}

.loopa-legal-copy th:last-child,
.loopa-legal-copy td:last-child {
  border-right: 0;
}

.loopa-legal-copy tr:last-child td {
  border-bottom: 0;
}

.loopa-legal-copy td p,
.loopa-legal-copy th p {
  margin: 0;
}

@media (max-width: 600px) {
  .loopa-splash > .wp-block-cover__image-background {
    object-position: 58% 50%;
  }

  .loopa-splash > .wp-block-cover__background {
    background: linear-gradient(to bottom, var(--loopa-cream-hi) 0%, rgba(250, 212, 149, 0.99) 32%, rgba(250, 212, 149, 0.78) 50%, rgba(250, 212, 149, 0.08) 68%, rgba(9, 36, 44, 0.56) 100%) !important;
  }

  .loopa-splash-main {
    padding-bottom: clamp(60px, 18svh, 180px);
  }

  .clock {
    gap: 5px;
  }
}

@media (min-width: 782px) {
  .loopa-splash-main {
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .loopa-splash .loopa-splash-footer {
    padding-top: 12px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .loopa-splash::after,
  .digit.roll {
    animation: none;
  }

  * {
    scroll-behavior: auto !important;
  }
}