/* ══════════════════════════════════════════════
   ZANJI — PUBLIC / LAYOUT
   Floating header, mobile menu, sub-navs, footer
   ══════════════════════════════════════════════ */

.z-shell { max-width:var(--z-shell); margin:0 auto; padding:0 1.25rem; width:100%; }

/* ── Floating header ────────────────────────── */
.z-navwrap {
  position:fixed;
  top:var(--z-nav-top);
  left:0; right:0;
  z-index:300;
  padding:0 clamp(.75rem,3vw,2.5rem);
  pointer-events:none;
  transition:top .3s ease;
}
.z-navwrap.is-scrolled { top:10px; }

.z-nav {
  pointer-events:auto;
  max-width:var(--z-shell);
  margin:0 auto;
  min-height:var(--z-nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.6rem .6rem .6rem 1.4rem;
  border-radius:10px;
  background:rgba(13,11,8,.9);
  border:1px solid rgba(242,237,228,.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  transition:background .3s ease, box-shadow .3s ease;
}
.z-navwrap.is-scrolled .z-nav {
  background:rgba(13,11,8,.97);
  box-shadow:0 14px 40px rgba(0,0,0,.6);
}

/* Brand lockup */
.z-brand { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.z-brand-mark {
  width:34px; height:34px;
  border:1px solid rgba(200,146,42,.55);
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--z-display);
  font-size:.95rem;
  color:var(--z-amber);
  line-height:1;
  user-select:none;
  transition:background .25s ease, color .25s ease;
}
.z-brand:hover .z-brand-mark { background:var(--z-amber); color:var(--z-black); }
.z-brand-word {
  font-family:var(--z-display);
  font-size:1.4rem;
  letter-spacing:.06em;
  color:var(--z-cream);
  line-height:1;
}
.z-brand-sub {
  font-size:.56rem;
  font-weight:500;
  line-height:1.35;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(242,237,228,.42);
  max-width:9rem;
  padding-left:.6rem;
  border-left:1px solid rgba(242,237,228,.12);
}

/* Links */
.z-nav-links { display:flex; align-items:center; gap:2rem; }
.z-nav-link {
  position:relative;
  font-family:var(--z-body);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(242,237,228,.68);
  padding:4px 0;
  transition:color .2s;
}
.z-nav-link::after {
  content:'';
  position:absolute; left:0; bottom:-1px;
  height:2px; width:0;
  background:var(--z-amber);
  transition:width .3s ease;
}
.z-nav-link:hover,.z-nav-link.active { color:var(--z-amber); }
.z-nav-link:hover::after,.z-nav-link.active::after { width:100%; }

.z-nav-cta { flex-shrink:0; }

/* Burger */
.z-burger {
  display:none;
  width:42px; height:42px;
  border:1px solid rgba(242,237,228,.14);
  border-radius:999px;
  background:transparent;
  color:var(--z-cream);
  place-items:center;
  cursor:pointer;
}
.z-burger i { font-size:20px; line-height:1; }

/* Mobile panel */
.z-mobile-menu {
  pointer-events:auto;
  display:none;
  max-width:var(--z-shell);
  margin:.5rem auto 0;
  padding:1rem 1.25rem 1.25rem;
  border-radius:10px;
  background:rgba(13,11,8,.97);
  border:1px solid rgba(242,237,228,.08);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.z-mobile-menu.open { display:block; animation:zFadeIn .2s ease; }
.z-mobile-menu .z-nav-link { display:block; padding:.6rem 0; font-size:.78rem; }
.z-mobile-menu .z-pill { width:100%; justify-content:space-between; margin-top:.75rem; }

@media (max-width:1080px) {
  .z-nav-links { gap:1.25rem; }
  .z-brand-sub { display:none; }
}
@media (max-width:900px) {
  .z-nav-links,.z-nav-cta { display:none; }
  .z-burger { display:grid; }
  :root { --z-nav-h:58px; }
}

/* ── Sticky page sub-nav (filters / tabs) ───── */
.z-subnav {
  position:sticky;
  top:var(--z-subnav-top);
  z-index:120;
  background:rgba(28,25,18,.95);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(200,146,42,.1);
  border-bottom:1px solid rgba(200,146,42,.12);
  overflow-x:auto;
}
.z-subnav::-webkit-scrollbar { height:0; }
.z-subnav-inner {
  max-width:var(--z-shell);
  margin:0 auto;
  padding:.9rem 1.25rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:max-content;
}

/* ── Footer (editorial split layout) ────────── */
.z-foot {
  background:var(--z-black);
  border-top:1px solid rgba(242,237,228,.08);
  overflow:hidden;
}

.z-foot-grid {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:clamp(420px,52vw,620px);
}

/* Left column */
.z-foot-main {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3.5rem);
  position:relative;
  z-index:2;
}

.z-foot-toplinks {
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem 2rem;
  margin-bottom:1.75rem;
}
.z-foot-toplinks a {
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(242,237,228,.82);
  transition:color .2s;
}
.z-foot-toplinks a:hover { color:var(--z-amber); }

.z-foot-rule {
  width:100%;
  max-width:28rem;
  border:none;
  border-top:1px solid rgba(242,237,228,.14);
  margin:0 0 2rem;
}

.z-foot-title {
  font-family:var(--z-display);
  font-size:clamp(2.4rem,6.2vw,4.75rem);
  line-height:.92;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--z-cream);
  margin:0 0 1.75rem;
  max-width:14ch;
}
.z-foot-title-sub {
  display:block;
  margin-top:.35em;
  color:rgba(242,237,228,.72);
}

.z-foot-contact {
  margin-bottom:1.75rem;
}
.z-foot-contact p {
  margin:0 0 .35rem;
  font-size:.82rem;
  line-height:1.6;
  color:rgba(242,237,228,.62);
}
.z-foot-contact a { transition:color .2s; }
.z-foot-contact a:hover { color:var(--z-amber); }

.z-foot-social {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-bottom:1.75rem;
}
.z-foot-social-btn {
  width:38px; height:38px;
  border-radius:999px;
  background:rgba(242,237,228,.92);
  color:var(--z-black);
  display:grid; place-items:center;
  transition:transform .2s ease, background .2s ease;
}
.z-foot-social-btn i { font-size:16px; line-height:1; }
.z-foot-social-btn:hover {
  background:var(--z-amber);
  transform:translateY(-2px);
}

.z-foot-cta { margin-bottom:auto; }
.z-foot-pill.z-pill--ghost {
  background:rgba(242,237,228,.04);
  border-color:rgba(242,237,228,.28);
  color:var(--z-cream);
}
.z-foot-pill.z-pill--ghost .z-pill-ico {
  background:rgba(242,237,228,.92);
  color:var(--z-black);
}

.z-foot-meta {
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:1.25rem;
}
.z-foot-meta p {
  margin:0 0 .35rem;
  font-size:.58rem;
  letter-spacing:.06em;
  color:rgba(242,237,228,.28);
  line-height:1.7;
}
.z-foot-meta a {
  color:rgba(242,237,228,.42);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s;
}
.z-foot-meta a:hover { color:var(--z-amber); }

/* Right column — two sketches side by side */
.z-foot-visual {
  position:relative;
  min-height:clamp(300px,34vw,440px);
  overflow:hidden;
}

.z-foot-visual-stack {
  position:absolute;
  inset:clamp(1.25rem,4vw,2.75rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;
  gap:clamp(.5rem,2vw,1.25rem);
  align-items:end;
  justify-items:center;
}

.z-foot-layer {
  width:auto;
  max-width:78%;
  height:auto;
  max-height:72%;
  pointer-events:none;
  object-fit:contain;
  object-position:center bottom;
}

.z-foot-layer--left {
  grid-column:1;
  transform:rotate(-2deg);
  opacity:.92;
}
.z-foot-layer--right {
  grid-column:2;
  transform:rotate(1deg);
  opacity:1;
}

@media (max-width:900px) {
  .z-foot-grid { grid-template-columns:1fr; min-height:0; }
  .z-foot-visual {
    order:-1;
    height:clamp(210px,56vw,300px);
    min-height:0;
    max-height:none;
  }
  .z-foot-visual-stack {
    inset:0.5rem clamp(0.5rem,3vw,1.25rem) 0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:clamp(0.15rem,1.5vw,0.75rem);
  }
  .z-foot-layer {
    flex:1 1 0;
    min-width:0;
    width:auto;
    max-width:none;
    height:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center bottom;
  }
  .z-foot-layer--left {
    object-position:left bottom;
    transform:rotate(-2deg);
  }
  .z-foot-layer--right {
    object-position:right bottom;
    transform:rotate(1deg);
  }
  .z-foot-title { max-width:none; }
}

@media (max-width:480px) {
  .z-foot-visual {
    height:clamp(180px,50vw,240px);
  }
  .z-foot-visual-stack {
    inset:0.35rem 0.35rem 0;
    gap:0;
  }
  .z-foot-layer--left { transform:rotate(-2deg) translateX(4%); }
  .z-foot-layer--right { transform:rotate(1deg) translateX(-4%); }
}

/* Legacy chip — kept for other pages if referenced */
.z-foot-link { font-size:.78rem; color:rgba(242,237,228,.5); transition:color .2s; }
.z-foot-link:hover { color:var(--z-amber); }
.z-social-chip {
  width:36px; height:36px;
  border:1px solid rgba(200,146,42,.3);
  border-radius:999px;
  display:grid; place-items:center;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  color:rgba(200,146,42,.7);
  transition:all .25s ease;
}
.z-social-chip:hover { border-color:var(--z-amber); color:var(--z-black); background:var(--z-amber); }