html { scroll-behavior: smooth; }
body { margin: 0; background: #f3f2f2; }
img { max-width: 100%; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }
.h1:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h2:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h3:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h4:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h5:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h6:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h7:hover{background: color-mix(in srgb, #f5b800 16%, transparent) !important;}
.h8:hover{background: color-mix(in srgb, #fdfaf3 12%, transparent) !important;}
.h9:hover{background: color-mix(in srgb, #f5b800 16%, transparent) !important;}
.h10:hover{background: color-mix(in srgb, #f5b800 16%, transparent) !important;}
.h11:hover{background: color-mix(in srgb, #fdfaf3 12%, transparent) !important;}
.h12:hover{color: #f5b800 !important;}
.h13:hover{color: #f5b800 !important;}
.h14:hover{color: #f5b800 !important;}
.h15:hover{color: #f5b800 !important;}
.h16:hover{color: #f5b800 !important;}
.h17:hover{color: #f5b800 !important;}
.h18:hover{color: #f5b800 !important;}
.h19:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h20:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h21:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h22:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h23:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h24:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h25:hover{color: #f5b800 !important;}
.h26:hover{color: #f5b800 !important;}
.h27:hover{color: #f5b800 !important;}
.h28:hover{color: #f5b800 !important;}
.h29:hover{color: #f5b800 !important;}
.h30:hover{color: #f5b800 !important;}
.h31:hover{color: #f5b800 !important;}
.h32:hover{color: #f5b800 !important;}
.h33:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h34:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h35:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h36:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h37:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h38:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h39:hover{color: #f5b800 !important;}
.h40:hover{color: #f5b800 !important;}
.h41:hover{color: #f5b800 !important;}
.h42:hover{color: #f5b800 !important;}
.h43:hover{color: #f5b800 !important;}
.h44:hover{color: #f5b800 !important;}
.h45:hover{color: #f5b800 !important;}
.h46:hover{color: #f5b800 !important;}
.h47:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h48:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h49:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h50:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h51:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h52:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h53:hover{color: #f5b800 !important;}
.h54:hover{background: color-mix(in srgb, #f5b800 16%, transparent) !important;}
.h55:hover{color: #f5b800 !important;}
.h56:hover{color: #f5b800 !important;}
.h57:hover{color: #f5b800 !important;}
.h58:hover{color: #f5b800 !important;}
.h59:hover{color: #f5b800 !important;}
.h60:hover{color: #f5b800 !important;}
.h61:hover{color: #f5b800 !important;}
.h62:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h63:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h64:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h65:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h66:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h67:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h68:hover{color: #f5b800 !important;}
.h69:hover{background: color-mix(in srgb, #f5b800 16%, transparent) !important;}
.h70:hover{color: #f5b800 !important;}
.h71:hover{color: #f5b800 !important;}
.h72:hover{color: #f5b800 !important;}
.h73:hover{color: #f5b800 !important;}
.h74:hover{color: #f5b800 !important;}
.h75:hover{color: #f5b800 !important;}
.h76:hover{color: #f5b800 !important;}
.h77:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h78:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h79:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h80:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h81:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h82:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h83:hover{color: #f5b800 !important;}
.h84:hover{color: #f5b800 !important;}
.h85:hover{color: #f5b800 !important;}
.h86:hover{color: #f5b800 !important;}
.h87:hover{color: #f5b800 !important;}
.h88:hover{color: #f5b800 !important;}
.h89:hover{color: #f5b800 !important;}
.h90:hover{color: #f5b800 !important;}
.h91:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h92:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h93:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h94:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h95:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h96:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h97:hover{color: #f5b800 !important;}
.h98:hover{color: #f5b800 !important;}
.h99:hover{color: #f5b800 !important;}
.h100:hover{color: #f5b800 !important;}
.h101:hover{color: #f5b800 !important;}
.h102:hover{color: #f5b800 !important;}
.h103:hover{color: #f5b800 !important;}
.h104:hover{color: #f5b800 !important;}
.h105:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h106:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h107:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h108:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h109:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h110:hover{color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important;}
.h111:hover{color: #f5b800 !important;}
.h112:hover{color: #f5b800 !important;}
.h113:hover{color: #f5b800 !important;}
.h114:hover{color: #f5b800 !important;}
.h115:hover{color: #f5b800 !important;}
.h116:hover{color: #f5b800 !important;}
.h117:hover{color: #f5b800 !important;}
.h118:hover{color: #f5b800 !important;}

/* --- header: sticky + mobile menu --- */
.site-header { position: sticky; top: 0; z-index: 100; }
.nav-toggle { display: none; }

@media (max-width: 1100px) {
  .site-header { position: sticky; top: 0; }
  .header-row { flex-wrap: wrap !important; justify-content: space-between !important; gap: 12px !important; }
  .header-row > a:first-child { flex: 0 1 auto !important; }
  .nav-toggle { margin-left: auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm, 4px);
    padding: 10px 14px; min-height: 44px; cursor: pointer;
    font-family: var(--font-heading); font-weight: 600; font-size: 13px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text);
  }
  .nav-toggle-bars { display: grid; gap: 4px; width: 20px; }
  .nav-toggle-bars span { display: block; height: 2px; background: var(--color-accent-700); border-radius: 2px; }
  .nav-toggle[aria-expanded="true"] { background: #f3ede2; }
  .site-nav {
    display: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 3;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 6px 0 10px !important;
    border-top: 1px solid var(--color-divider);
    margin-top: 10px;
  }
  .site-nav.open { display: flex !important; }
  .site-nav > a {
    font-size: 16px !important;
    padding: 14px 2px !important;
    min-height: 48px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--color-divider) !important;
  }
  .site-nav > a.btn {
    justify-content: center;
    margin-top: 14px;
    border-bottom: none !important;
    min-height: 50px;
    font-size: 15px !important;
  }
}

/* --- mobile header alignment: brand and MENU on one row --- */
@media (max-width: 1100px) {
  .header-row { align-items: center !important; row-gap: 0 !important; }
  .header-row > a:first-child { flex: 1 1 auto !important; min-width: 0; gap: 10px !important; }
  .header-row > a:first-child img { width: 54px !important; }
  .header-row > a:first-child > span > span:first-child { font-size: 19px !important; letter-spacing: -0.01em !important; }
  .header-row > a:first-child > span > span:last-child { font-size: 9px !important; letter-spacing: 0.12em !important; margin-top: 3px !important; }
  .nav-toggle { flex: 0 0 auto; margin-left: 12px; padding: 9px 12px; }
}
@media (max-width: 520px) {
  .header-row > a:first-child img { width: 46px !important; }
  .header-row > a:first-child > span > span:first-child { font-size: 17px !important; }
  .header-row > a:first-child > span > span:last-child { font-size: 8px !important; letter-spacing: 0.1em !important; }
  .nav-toggle { padding: 9px 11px; gap: 8px; }
  .nav-toggle-label { display: none; }
  .nav-toggle-bars { width: 22px; }
}

/* --- sticky header + overlay dropdown (mobile) --- */
body > div:first-child { overflow-x: clip !important; }
.site-header { position: sticky !important; top: 0; z-index: 200; }

@media (max-width: 1100px) {
  .header-bar { position: relative; }
  .site-nav {
    position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    width: auto !important; flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding: 4px clamp(16px, 4vw, 48px) 18px !important;
    background: #fbfaf8;
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
    box-shadow: 0 18px 34px -18px rgba(36, 26, 18, 0.45);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    z-index: 210;
  }
}

/* intrinsic width/height attrs are for CLS only — let CSS aspect-ratio drive height */
img[width] { height: auto; }

/* --- gallery lightbox --- */
.lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(20, 13, 9, 0.94); display: flex; align-items: center; justify-content: center; padding: clamp(48px, 7vw, 72px) clamp(14px, 5vw, 80px); }
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb-img { max-width: 100%; max-height: calc(100vh - 190px); width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8); }
.lb-cap { color: #e9e0d2; font-size: 13.5px; line-height: 1.6; text-align: center; max-width: 640px; }
.lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #a8977f; font-size: 12px; letter-spacing: 0.12em; }
.lightbox button { position: absolute; background: rgba(253, 250, 243, 0.1); border: 1px solid rgba(253, 250, 243, 0.28); color: #fdfaf3; cursor: pointer; border-radius: 999px; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background 0.15s ease; }
.lightbox button:hover { background: rgba(245, 184, 0, 0.24); border-color: #f5b800; }
.lb-close { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 26px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; padding-bottom: 4px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
@media (max-width: 620px) {
  .lightbox { padding: 60px 10px 70px; }
  .lb-img { max-height: calc(100vh - 210px); }
  .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 26px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}

/* --- hero: text left, large image right --- */
.hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; }
.hero-shot { order: -1; }
.hero-copy { padding: clamp(34px, 6vw, 72px) clamp(20px, 5vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.hero-shot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #1a120c; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: clamp(420px, 60vh, 600px); }
  .hero-shot { order: 0; }
  .hero-copy { padding-left: max(clamp(20px, 5vw, 48px), calc((100vw - 1240px) / 2 + clamp(20px, 5vw, 48px))); padding-right: clamp(28px, 4vw, 56px); }
  .hero-shot { height: auto; align-self: center; }
}
}