/* ==========================================================================
   LAYOUT  (structure shared by every page)
   1. Shell   2. Header   3. Brand   4. Navigation   5. Footer   6. Fixed background
   Note: header, nav and footer are styled as elements so older pages
   (privacy.html) keep working without markup changes.
   ========================================================================== */

/* 1. SHELL  (centred content width) -------------------------------------- */
/* Pages can change the side gap by setting --shell-inset on a section. */
.shell{--shell-inset:9.4%;width:min(var(--shell-max),calc(100% - var(--shell-inset)));margin-inline:auto}
@media (max-width: 600px) { .shell{--shell-inset:40px} }

/* 2. HEADER -------------------------------------------------------------- */
header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;height:var(--header-height);border-bottom:1px solid #e3eace29}

/* 3. BRAND  (logo drawn as a mask so it takes the --paper colour) -------- */
/* Paths are relative to this file, so assets are one folder up. */
.brand{position:relative;display:block;width:124px;height:50px;overflow:hidden;background:var(--paper);mask-image:url('../assets/logo.png');mask-mode:luminance;mask-size:226px 226px;mask-position:-53px -86px;mask-repeat:no-repeat}
.brand img{position:absolute;left:-53px;top:-86px;width:226px;height:226px;max-width:none;opacity:0}

/* 4. NAVIGATION  (js: main.js initNavigation toggles .open) -------------- */
nav{display:flex;align-items:center;gap:38px;font-size:13px;letter-spacing:.07em}
nav a,nav button{padding:10px 0}
nav button{background:none;border:0}
nav a:hover,nav button:hover{color:var(--moss)}
.menu-toggle{display:none}
@media (max-width: 600px) {
  .menu-toggle{display:flex;align-items:center;gap:14px;min-height:44px;padding:9px 12px;background:transparent;border:1px solid #77836a;font-size:12px}
  nav{display:none;position:absolute;top:68px;right:0;z-index:5;flex-direction:column;align-items:stretch;gap:12px;width:200px;padding:18px 22px;background:#101a17f5;border:1px solid var(--line)}
  nav.open{display:flex}
  nav a,nav button{display:flex;align-items:center;min-height:44px}
  nav button{text-align:left}
}

/* 5. FOOTER -------------------------------------------------------------- */
footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0 56px;border-top:1px solid var(--line);font-size:11px}
.signature{display:flex;align-items:center;gap:22px}
.footer-brand{letter-spacing:.27em;text-transform:uppercase}
.footer-tag{padding-left:24px;border-left:1px solid var(--line);color:var(--muted);letter-spacing:.06em}
.footer-links{display:flex;align-items:center;gap:22px;color:var(--muted)}
.footer-links a:not([aria-disabled]):hover{color:var(--moss)}
@media (max-width: 950px) { footer{flex-wrap:wrap} }
@media (max-width: 600px) {
  footer{padding-bottom:35px}
  .signature{gap:16px;flex-wrap:wrap}
  .footer-tag{padding-left:16px}
  .footer-links{gap:20px;flex-wrap:wrap}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px}
}

/* 6. FIXED BACKGROUND  (html: .world-background / .privacy-background) --- */
/* Each page sets only z-index and the artwork. --bg-h is set by js/main.js
   initBackgroundLock() on touch devices so the image never rescales while the
   phone's address bar slides in and out. Desktop ignores it (falls back to 100lvh). */
.world-background,.privacy-background{position:fixed;inset:0 0 auto;height:100vh;height:100lvh;height:max(100lvh,var(--bg-h,0px));pointer-events:none;transform:translateZ(0);backface-visibility:hidden}