/* ============================================================
   World of Penguins — layout.css
   Header / nav / footer / page scaffolding
   ============================================================ */

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:74px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.12rem;line-height:1}
.brand .mark{width:30px;height:30px;flex:0 0 auto}
.brand-logo{height:46px;width:auto;display:block;flex:0 0 auto}
@media (max-width:600px){.brand-logo{height:36px}}
.footer-logo{height:40px;width:auto;display:block;margin-bottom:.2rem}
.brand b{font-weight:700}
.brand span{color:var(--accent-deep)}
.nav-links{display:none;align-items:center;gap:2rem}
.nav-links a{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:500;color:var(--ink);position:relative;padding-block:6px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .3s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-cta{display:none}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:2px solid var(--ink)}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin-inline:auto;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-menu{position:fixed;inset:74px 0 0;background:var(--bg);z-index:55;transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;padding:2rem var(--gutter);gap:.25rem;overflow-y:auto}
.mobile-menu.is-open{transform:none}
.mobile-menu a{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;font-weight:600;padding-block:14px;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:1.5rem}
body.menu-lock{overflow:hidden}

@media (min-width:980px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex;font-size:.68rem;letter-spacing:.1em;padding:9px 20px;border-width:2px}
  .nav-toggle{display:none}
  .mobile-menu{display:none}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:#fff;padding-block:clamp(56px,7vw,88px) 32px}
.footer-top{display:grid;gap:2.5rem;grid-template-columns:1fr}
.footer-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.3rem}
.footer-brand .mark{width:34px;height:34px}
.footer-brand span{color:var(--accent)}
.footer-blurb{color:#b8b8b8;margin-top:1rem;max-width:40ch;font-size:.98rem}
.footer-cols{display:grid;gap:2rem;grid-template-columns:1fr 1fr}
.footer-col h2{font-family:var(--display);text-transform:uppercase;font-size:.8rem;letter-spacing:.12em;color:var(--accent);margin-bottom:1rem;font-weight:600}
.footer-col a,.footer-col address{display:block;color:#cfcfcf;font-size:.95rem;padding-block:6px;font-style:normal;line-height:1.5}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid #2d2d2d;color:#8f8f8f;font-size:.85rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-legal a{color:#8f8f8f}
.footer-legal a:hover{color:#fff}

@media (min-width:760px){
  .footer-top{grid-template-columns:1.4fr 2fr}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding-block:clamp(52px,7vw,96px) clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.page-hero .crumbs{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);font-family:var(--display);margin-bottom:1.25rem;display:flex;gap:.5rem;flex-wrap:wrap}
.page-hero .crumbs a:hover{color:var(--accent-deep)}
.page-hero h1{max-width:16ch;margin-bottom:1.2rem}
.page-hero .lead{max-width:60ch}
.region-tag{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;font-weight:600;color:var(--accent-deep);margin-bottom:1.1rem}