/* The shared header, full-screen MENU and footer of skyllamaspodcast.com: one look on every page (Sławek, Oct 4 2026).
   Loaded by every page, the 2026 pages and the older WordPress pages alike. Everything is scoped to .site-head, .mnav and
   .site-foot (no global rules), so it sits safely next to the older pages' own styles. Markup: site/partials/. */
@font-face{font-family:Outfit;src:url(/assets/fonts/outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(/assets/fonts/nunito-sans.woff2) format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans.woff2) format("woff2");font-weight:100 1000;font-display:swap}

.site-head,.site-head *,.mnav,.mnav *,.site-foot,.site-foot *{box-sizing:border-box}
.site-head,.mnav,.site-foot{font:400 17px/1.6 "Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:normal;-webkit-font-smoothing:antialiased;text-align:left}
.site-head :is(p,ul,ol,h2,address,figure),.mnav :is(p,ul,ol,h2,address),.site-foot :is(p,ul,ol,h2,address){margin:0;padding:0}
.site-head img,.mnav img,.site-foot img{display:block;max-width:100%;height:auto}
.site-head svg,.mnav svg,.site-foot svg{display:block}
.site-head .wrap,.site-foot .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.site-head a:focus-visible,.mnav a:focus-visible,.site-foot a:focus-visible,.menu-btn:focus-visible{outline:3px solid #dcc492;outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:#123e54;padding:10px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Header (the original layout: socials and Log in, MENU and Book today on the left, the logo in the middle,
   the studio tour card on the right, a gold rule underneath) */
.site-head{background:#1f3d52;color:#fff;position:relative;z-index:50}
.site-head .wrap{max-width:1360px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-top:20px;padding-bottom:24px;position:relative}
.site-head .wrap::after{content:"";position:absolute;left:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);bottom:0;height:6px;background:#b2975a}
.site-head{padding-bottom:0}
/* One calm row on desktop (Sławek, Oct 4: "the header is too busy"): socials, phone and email live in the footer and menu */
.hd-left,.hd-right{display:flex;align-items:center;align-self:center}
.hd-right{justify-items:end;text-align:right}
.hd-top{display:flex;align-items:center;gap:12px;font-size:14px}
.hd-social{display:flex;align-items:center;gap:12px}
.hd-social a{display:grid;place-items:center;color:#fff}
.hd-social svg{width:15px;height:15px;fill:currentColor}
.hd-social span{margin-left:2px}
.hd-social a:hover{color:#dcc492}
.hd-row{display:flex;align-items:center;gap:22px;align-self:center;min-height:56px}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 0;border:0;background:transparent;cursor:pointer;color:#fff;
  font:700 14px/1 "DM Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.menu-btn svg{width:24px;height:24px}
.btn-pill{display:inline-block;padding:7px 20px;border:1.5px solid #fff;border-radius:20px;font:700 14px/1.2 "DM Sans",sans-serif;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:#fff;transition:background .2s,color .2s}
.btn-pill:hover{background:#fff;color:#000}
.hd-links{display:flex;flex-wrap:wrap;font:500 13.5px/1.3 "DM Sans",sans-serif;letter-spacing:.03em;text-transform:uppercase}
.hd-links a{color:#b2975a;text-decoration:none}
.hd-links a+a{margin-left:10px;padding-left:10px;border-left:1px solid #b2975a;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.hd-links a:hover{color:#dcc492}
.logo{display:block;justify-self:center}
.logo-big{width:clamp(160px,13vw,196px)}
.logo-small{display:none}
.hd-right{justify-self:end}
.hd-contact{display:flex;gap:18px;font-size:14px}
.site-head .hd-contact a{color:#fff;text-decoration:none}
.site-head .hd-contact a:hover{color:#dcc492}
.hd-sub{color:#b2975a;justify-content:flex-end}
.acct{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.acct img{width:52px;transform-origin:50% 90%;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.acct:hover img,.acct:focus-visible img{transform:rotate(-8deg) scale(1.06)}
.acct:hover img{animation:llama-wave .9s ease-in-out}
@keyframes llama-wave{0%,100%{transform:rotate(0) scale(1.06)}25%{transform:rotate(-9deg) scale(1.06)}55%{transform:rotate(6deg) scale(1.06)}80%{transform:rotate(-4deg) scale(1.06)}}
.acct-h{font:800 18px/1 Outfit,sans-serif;text-transform:uppercase}
.acct:hover .acct-h{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.tour-slim{display:inline-flex;align-items:center;gap:10px;padding:7px 20px;border:1.5px solid #fff;border-radius:20px;font:700 13px/1.1 "DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff;transition:background .2s,color .2s}
.tour-slim::after{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.tour-slim:hover{background:#fff;color:#1f3d52}
.acct-mini{display:none}
.hd-phone{display:none}
@media (max-width:1100px){
  .site-head{position:sticky;top:0}
  .site-head .wrap{grid-template-columns:1fr auto;gap:14px;padding-top:10px;padding-bottom:10px}
  .site-head .wrap::after{display:none}
  .site-head{border-bottom:3px solid #b2975a}
  .hd-left{order:2;display:block;padding:0}
  .hd-top,.hd-right,.hd-left .btn-pill,.hd-left .hd-links{display:none}
  .logo{justify-self:start}
  .logo-big{display:none}
  .logo-small{display:block;width:150px}
  .menu-btn{padding:9px 14px;border:1.5px solid #fff;min-height:42px}
  /* Phone: the header keeps only the logo and MENU; Book today, the tour and Log in sit in a slim row just below it
     (it scrolls away with the page; Sławek, Oct 4: the header looked busy) */
  .hd-phone{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px clamp(16px,4vw,40px);background:#16303f;color:#fff;
    font:700 12.5px/1 "DM Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase}
  .hd-phone a{color:#fff;text-decoration:none;white-space:nowrap}
  .hd-phone .btn-pill{padding:7px 14px;font-size:12.5px}
  .acct-mini{display:flex;align-items:center;gap:7px}
  .acct-mini img{width:26px;height:auto;display:block}
  body.menu-open .hd-phone{visibility:hidden}
}
/* Full-screen menu (as on the original site) */
.mnav{position:fixed;inset:0;z-index:60;background:#101f2b;color:#fff;overflow:auto}
.mnav[hidden]{display:none}
.mnav-in{min-height:100%;max-width:1360px;margin:0 auto;padding:110px clamp(16px,4vw,40px) 48px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.mnav-list{list-style:none;display:grid;gap:2px;align-self:center}
.mnav-list a{display:inline-block;padding:4px 0;font:800 clamp(34px,5.2vw,62px)/1.08 Outfit,sans-serif;text-transform:uppercase;text-decoration:none;color:#fff}
.mnav-list a:hover,.mnav-list a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.mnav-side{display:grid;gap:18px;justify-items:start;max-width:280px}
.mnav-side img{width:240px}
.mnav-tour{font:500 13.5px/1.3 "DM Sans",sans-serif;text-transform:uppercase;color:#b2975a}
.mnav-tour a{margin-left:6px;font-weight:700;color:#b2975a;text-underline-offset:3px}
.mnav-mail{font-size:15px}
.mnav-mail a{text-decoration:none}
.mnav-mail a:hover{text-decoration:underline}
body.menu-open{overflow:hidden}
body.menu-open .site-head{z-index:70;background:transparent;border-bottom-color:transparent}
body.menu-open .site-head .wrap::after,body.menu-open .hd-top,body.menu-open .hd-left .btn-pill,body.menu-open .hd-left .hd-links,body.menu-open .hd-right{visibility:hidden}
body.menu-open .menu-btn{position:fixed;top:18px;right:clamp(16px,4vw,40px);z-index:70;padding:10px 16px;border:1.5px solid #fff;background:#101f2b}
@media (max-width:700px){.mnav-in{grid-template-columns:1fr;padding-top:90px;align-items:start}.mnav-side img{width:170px}}

/* Footer (the original gold band: "Record today", contact, links) */
.site-foot{background:#af9861 url(/assets/img/pattern-satellites.webp) top center/760px repeat;color:#111;font-size:15px}
.foot-top{display:grid;grid-template-columns:1.6fr repeat(3,1fr) 1.1fr;gap:32px;padding:clamp(56px,7vw,90px) 0 44px}
@media (max-width:1060px){.foot-top{grid-template-columns:1fr 1fr 1fr}.foot-cta{grid-column:1/-1}}
@media (max-width:600px){.foot-top{grid-template-columns:1fr 1fr}.foot-contact{grid-column:1/-1}}
.site-foot .foot-cta h2{font:800 clamp(44px,5vw,64px)/.95 Outfit,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#000;margin:0}
.foot-cta p{margin-top:16px;max-width:36ch}
.foot-mail{text-transform:uppercase;font-size:14px}
.site-foot h2{font:500 22px/1.2 Outfit,sans-serif;text-transform:uppercase;color:#000;margin-bottom:14px}
.site-foot ul{list-style:none;display:grid;gap:9px}
.site-foot a{text-decoration:none;color:#111}
.site-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.site-foot ul a{font-weight:700}
.foot-contact address{font-style:normal;line-height:1.6}
.foot-contact p{margin-top:10px}
.social{display:flex;gap:8px;margin-top:16px}
.social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(0,0,0,.4);color:#111}
.social a:hover{background:#000;color:#fff}
.social svg{width:18px;height:18px;fill:currentColor}
.foot-trust{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:18px 0;border-top:1px solid rgba(0,0,0,.25);font-size:14px}
.foot-trust span{display:flex;align-items:center;gap:8px}
.foot-trust span::before{content:"";width:6px;height:6px;background:#111;transform:rotate(45deg)}
.foot-trust a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;padding:18px 0 26px;border-top:1px solid rgba(0,0,0,.25);font-size:13.5px}
.foot-name{font:800 14px/1 Outfit,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.foot-credit{display:grid;gap:2px;text-align:right}
@media (max-width:700px){.foot-credit{text-align:left}}

.foot-btn{display:inline-flex;align-items:center;gap:12px;min-height:46px;margin-top:22px;padding:11px 22px;border:2px solid #000;background:#fff;color:#000!important;
  font:700 14px/1.1 "DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none!important;transition:background .2s,color .2s}
.foot-btn::after{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.foot-btn:hover{background:#000;color:#fff!important}

/* Hold the shared parts steady against the older pages' theme styles */
.site-head a,.mnav a,.site-foot a{color:inherit}
.site-head .hd-social a,.site-head .acct,.site-head .tour-slim{color:#fff}
.site-head .tour-slim:hover{color:#1f3d52}
.site-head .hd-links a{color:#b2975a;white-space:nowrap}
.site-head .logo-small{display:none}
.site-head .logo-big{display:block}
@media (max-width:1100px){.site-head .logo-big{display:none}.site-head .logo-small{display:block}}
.site-foot .skl-family ul{display:inline;margin:0;padding:0;list-style:none}
.site-foot .skl-family li{display:inline-block;margin:2px 10px;padding:0}
.site-foot .skl-family li::before{content:none}
@media (max-width:680px){.site-foot .skl-family-k{display:block}}
@media (prefers-reduced-motion:reduce){.acct img,.acct:hover img{animation:none;transition:none;transform:none}}

/* Scrolling gold ticker (as on the original site). Stops for visitors who turn motion off. */
.ticker{overflow:hidden;background:#123e54;color:#fff;border-top:3px solid #b2975a;border-bottom:3px solid #b2975a;padding:14px 0}
.ticker-track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font:800 clamp(16px,1.8vw,22px)/1 Outfit,sans-serif;text-transform:uppercase;white-space:nowrap;letter-spacing:.01em}
.ticker span::after{content:"";width:12px;height:12px;background:#b2975a;transform:rotate(45deg)}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
