/* Shared by every page, including the guide: fonts, colours, menu, footer, Listen pop-up. */
@font-face{font-family:"Open Sauce";src:url(../fonts/OpenSauceSans-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Open Sauce";src:url(../fonts/OpenSauceSans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Open Sauce";src:url(../fonts/OpenSauceSans-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --paper:#F8F7F3; --tint:#EFEEE8; --rule:#DCDAD3; --ink:#121517; --text:#33383A; --mute:#6A6E6F;
  --red:#B41F2B; --rose:#E07A72; --night:#0B0F11; --night-2:#171B1D; --bone:#F5F5F1; --dim:#9FA3A2; --good:#2E6B45;
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --body:"Open Sauce","Helvetica Neue",Arial,system-ui,sans-serif;
  color-scheme:light;
}
svg.i{width:18px;height:18px;flex:none}
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--bone);color:var(--ink);font-weight:700;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.drawer[hidden]{display:none}
body.locked{overflow:hidden}
.backpill{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:90;padding:11px 16px;border-radius:999px;border:1px solid rgba(245,245,241,.25);background:rgba(11,15,17,.88);color:var(--bone);font:700 13px/1 var(--body);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.3)}
/* top navigation, always on a dark cover */
.nav{position:absolute;inset:0 0 auto;z-index:20;padding-top:env(safe-area-inset-top,0px);color:var(--bone)}
.nav .wrap{display:flex;align-items:center;gap:30px;height:80px}
.nav .logo img{height:34px;width:auto}
.nav .links{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav .links a{color:var(--bone);text-decoration:none;font:600 14.5px/1 var(--body);opacity:.82}
.nav .links a:hover,.nav .links a[aria-current]{opacity:1}
.nav .links a[aria-current]{box-shadow:0 2px 0 var(--rose)}
.nav .listen{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--bone);color:var(--ink)!important;opacity:1!important;font-weight:700!important}
.nav .listen:hover{background:var(--red);color:var(--bone)!important}
.nav .menu{display:none;margin-left:auto;background:none;border:1px solid rgba(245,245,241,.35);border-radius:999px;padding:9px 14px;cursor:pointer;color:var(--bone);font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:8px}
.drawer{position:fixed;inset:0;z-index:60;background:var(--night);color:var(--bone);padding:calc(24px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 30px max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;animation:fade .25s ease}
.drawer .x{align-self:flex-end;background:none;border:0;color:var(--bone);font-size:34px;line-height:1;cursor:pointer}
.drawer a{color:var(--bone);text-decoration:none;font:400 46px/1.15 var(--display);text-transform:uppercase;padding:8px 0;border-bottom:1px solid rgba(245,245,241,.12)}
.drawer a[aria-current]{color:var(--rose)}
@media (max-width:860px){.nav .links{display:none}.nav .menu{display:inline-flex}}

/* footer */
.foot{background:var(--night);color:var(--dim)}
.foot .wrap{padding-block:64px calc(40px + env(safe-area-inset-bottom,0px))}
.foot .top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(245,245,241,.12)}
.foot img{height:40px;width:auto;margin-bottom:18px}
.foot p{margin:0;font-size:15px;max-width:34ch}
.foot h2{margin:0 0 14px;font:700 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.foot ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:2}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--bone)}
.foot .bot{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:24px;font-size:13.5px}
.foot .bot span:last-child{margin-left:auto}
@media (max-width:860px){.foot .top{grid-template-columns:1fr 1fr}.foot .top>div:first-child{grid-column:1/-1}}

/* listen pop-up */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(11,15,17,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal .box{width:min(420px,100%);background:var(--paper);border-radius:20px;padding:28px;box-shadow:0 40px 90px rgba(0,0,0,.35);animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:translateY(12px) scale(.97);opacity:0}}
.modal .eyebrow{color:var(--red)}
.modal h3{font:400 40px/1 var(--display);text-transform:uppercase;margin:8px 0 4px;color:var(--ink)}
.modal p{margin:0 0 18px;color:var(--mute);font-size:15px}
.modal .opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1px solid var(--rule);margin-top:8px;text-decoration:none;font-weight:700;color:var(--ink)}
.modal .opt:hover{border-color:var(--ink)}
.modal .opt svg{width:24px;height:24px}
.modal .opt small{display:block;font-weight:400;color:var(--mute);font-size:13px}
.modal .x{float:right;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--mute)}
@media (max-width:600px){.foot .bot span:last-child{margin-left:0}}

/* Photo slices (home hero, guide covers): three photos cut on a diagonal. Side by side on a laptop,
   stacked bands across the screen on a phone. --p (0 to 1, set from scroll) moves each layer at its own rate. */
.slices{position:absolute;inset:-4% -8%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);transform:skewX(-9deg)}
.sl{position:relative;overflow:hidden;background:var(--night-2);opacity:0;transform:translateY(6%);animation:rise 1.2s cubic-bezier(.2,.75,.15,1) forwards}
.sl:nth-child(2){animation-delay:.12s}.sl:nth-child(3){animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
.sl .drift{position:absolute;inset:0;transform:translateY(calc(var(--p,0) * var(--out,0px)));will-change:transform}
.sl .ph{position:absolute;inset:-8% -16%;background-size:cover;background-position:var(--pos,50% 50%);transform:skewX(9deg) translateY(calc(var(--p,0) * var(--in,0px))) scale(calc(1.06 + var(--p,0) * .06));will-change:transform}
.sl:nth-child(1) .drift{--out:-90px}.sl:nth-child(1) .ph{--in:50px}
.sl:nth-child(2) .drift{--out:70px}.sl:nth-child(2) .ph{--in:-40px}
.sl:nth-child(3) .drift{--out:-150px}.sl:nth-child(3) .ph{--in:70px}
@media (max-width:640px){
  .slices{inset:-7% -4% 18%;grid-template-columns:none;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;transform:skewY(-7deg)}
  .sl{transform:translateX(-10%)}.sl:nth-child(2){transform:translateX(10%)}
  .sl .drift{transform:translateX(calc(var(--p,0) * var(--out,0px)))}
  .sl .ph{inset:-18% -6%;background-position:var(--mpos,var(--pos,50% 50%));transform:skewY(7deg) translateX(calc(var(--p,0) * var(--in,0px))) scale(calc(1.06 + var(--p,0) * .06))}
  .sl:nth-child(1) .drift{--out:-60px}.sl:nth-child(2) .drift{--out:50px}.sl:nth-child(3) .drift{--out:-80px}
  .sl:nth-child(1) .ph{--in:30px}.sl:nth-child(2) .ph{--in:-26px}.sl:nth-child(3) .ph{--in:40px}
}
@media (prefers-reduced-motion:reduce){.sl{opacity:1;transform:none;animation:none}}