/* GlamBon site chrome: fonts, navigation, footer, "Keep reading".
   Loaded on every page (via $navbar), after each page's own styles.
   Everything is anchored on #nav / #gb-menu / #gbf / #gb-more so article styles can't leak in,
   and uses its own --gbc-* colours so pages that redefine --ink / --cream don't change it. */

/* ── Fonts (self-hosted) ── */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Same face, scaled to the size the article layouts were drawn for (they were set in a small-x-height serif) */
@font-face { font-family: 'GB Display'; font-style: normal; font-display: swap; font-weight: 200 800; size-adjust: 84%;
  src: url(/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'GB Display'; font-style: normal; font-display: swap; font-weight: 200 800; size-adjust: 84%;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/outfit-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/outfit-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/assets/fonts/bebas-neue-latin-400-normal.woff2) format('woff2'); }

/* Colour variables the old shared nav defined; many pages still rely on them, so they stay exactly as they were */
:root { --ink: #0e0b09; --cream: #f5f0e8; --gold: #c9a84c; --rose: #d4637a; --blush: #f0d9d9; --charcoal: #2a2520; --muted: #8a7f76; }

/* The custom cursor is gone: normal cursors everywhere */
html body { cursor: auto !important; }

/* ── NAV ── */
#nav, #gb-menu, #gbf, #gb-more {
  --gbc-porcelain: #F4F2F6; --gbc-ink: #1D1430; --gbc-ink-2: #5B5168; --gbc-rose: #D4637A; --gbc-rose-deep: #B4485F;
  --gbc-blush: #F7DDE2; --gbc-plum: #2E1A3D; --gbc-line: rgba(29,20,48,.12);
  --gbc-display: 'Bricolage Grotesque', 'Outfit', system-ui, sans-serif; --gbc-text: 'Outfit', system-ui, sans-serif;
  --gbc-gutter: clamp(1.25rem, 4vw, 3.5rem);
}
#nav, #nav *, #gb-menu, #gb-menu *, #gbf, #gbf *, #gb-more, #gb-more * { box-sizing: border-box; }
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 64px;
  display: flex; align-items: center; gap: 2rem; margin: 0;
  /* same content column as the pages: max 1320px including gutters */
  padding: 0 max(var(--gbc-gutter), calc((100% - 1320px) / 2 + var(--gbc-gutter))) !important;
  /* !important: older article scripts set these inline on scroll (transparent + multiply hid the logo) */
  background: rgba(244,242,246,.92) !important; -webkit-backdrop-filter: saturate(1.4) blur(14px) !important; backdrop-filter: saturate(1.4) blur(14px) !important;
  border-bottom: 1px solid var(--gbc-line); box-shadow: none !important;
  mix-blend-mode: normal !important;
  font: 400 15px/1 var(--gbc-text); color: var(--gbc-ink);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
#nav.gbn-hidden { transform: translateY(-100%); }
#nav .nav-logo {
  font: 400 1.9rem/1 'Bebas Neue', var(--gbc-text) !important; letter-spacing: .1em !important; color: var(--gbc-ink) !important;
  text-decoration: none; margin: 0; padding: 0; flex: none; position: relative; top: 1px;
}
#nav .nav-logo span { color: var(--gbc-rose) !important; }
#nav .nav-links { display: flex; gap: clamp(1rem, 2vw, 1.9rem); list-style: none; margin: 0 0 0 auto; padding: 0; }
#nav .nav-links li { margin: 0; padding: 0; list-style: none; }
#nav .nav-links li::before, #nav .nav-links li::marker { content: none; }
#nav .nav-links a {
  display: inline-block; position: relative; padding: .4rem 0; margin: 0;
  font: 500 .9rem/1 var(--gbc-text) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--gbc-ink-2) !important; text-decoration: none !important; border: 0; background: none;
}
#nav .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; width: auto; height: 2px; border-radius: 2px;
  background: var(--gbc-rose); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
#nav .nav-links a:hover { color: var(--gbc-ink) !important; }
#nav .nav-links a:hover::after, #nav .nav-links a[aria-current]::after { transform: scaleX(1); width: auto; }
#nav .nav-links a[aria-current] { color: var(--gbc-ink) !important; }
#nav .gbn-cta {
  flex: none; display: inline-flex; align-items: center; padding: .62rem 1.05rem; border-radius: 999px; margin: 0;
  background: var(--gbc-ink); color: var(--gbc-porcelain) !important; font: 500 .85rem/1 var(--gbc-text); text-decoration: none; letter-spacing: 0;
  transition: background .2s;
}
#nav .gbn-cta:hover { background: var(--gbc-rose-deep); }
#nav .nav-hamburger {
  display: none; position: static; margin: 0 0 0 auto; flex: none; width: 44px; height: 44px; padding: 12px 10px;
  background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: space-between;
}
#nav .nav-hamburger span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--gbc-ink); margin: 0; }
#nav .nav-hamburger span:nth-child(2) { width: 65%; margin-left: auto; }
#nav .nav-issue { display: none !important; }
#nav a:focus-visible, #nav button:focus-visible, #gb-menu a:focus-visible, #gb-menu button:focus-visible,
#gbf a:focus-visible, #gb-more a:focus-visible { outline: 2px solid var(--gbc-rose); outline-offset: 3px; border-radius: 4px; }

/* Mobile menu */
#gb-menu {
  position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; justify-content: center;
  padding: 5rem var(--gbc-gutter) 3rem; background: var(--gbc-porcelain); color: var(--gbc-ink);
  transform: translateX(100%); visibility: hidden;
  transition: transform .45s cubic-bezier(.77,0,.175,1), visibility 0s linear .45s;
}
#gb-menu.open { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.77,0,.175,1); }
#gb-menu .mobile-nav-close { position: absolute; top: 10px; right: calc(var(--gbc-gutter) - 10px); width: 44px; height: 44px; padding: 12px;
  background: none; border: 0; cursor: pointer; opacity: 1 !important; pointer-events: auto !important; line-height: 0; color: var(--gbc-ink); }
#gb-menu .mobile-nav-close svg { stroke: currentColor; width: 20px; height: 20px; }
#gb-menu .mobile-nav-logo { font: 400 2.4rem/1 'Bebas Neue', var(--gbc-text); letter-spacing: .1em; color: var(--gbc-ink); margin: 0 0 2rem; }
#gb-menu .mobile-nav-logo span { color: var(--gbc-rose); }
#gb-menu .mobile-nav-links { display: flex; flex-direction: column; gap: 0; width: 100%; }
#gb-menu .mobile-nav-links a {
  display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--gbc-line);
  font: 700 clamp(1.7rem, 7vw, 2.4rem)/1.1 var(--gbc-display); letter-spacing: -.02em; color: var(--gbc-ink); text-decoration: none;
}
#gb-menu .mobile-nav-links a::after { content: '→'; font: 400 1.1rem/1 var(--gbc-text); color: var(--gbc-rose); }
#gb-menu .mobile-nav-links a[aria-current] { color: var(--gbc-rose-deep); }
#gb-menu .mobile-nav-issue { margin-top: 2rem; font: 400 .9rem/1.5 var(--gbc-text); color: var(--gbc-ink-2); letter-spacing: 0; text-transform: none; }
#gb-menu .mobile-nav-issue a { color: var(--gbc-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1080px) {
  #nav .nav-links, #nav .gbn-cta { display: none !important; }
  #nav .nav-hamburger { display: flex !important; }
}
@media (max-width: 767px) { #nav { height: 58px; } #nav .nav-logo { font-size: 1.7rem !important; } }
@media (prefers-reduced-motion: reduce) { #nav, #gb-menu, #gb-menu.open { transition: none; } }

/* Old cursor elements, if a page still prints them */
.cursor, .cursor-dot, .cursor-ring, .custom-cursor, #cursor, #cursorDot, #cursorRing, #curDot, #curRing { display: none !important; }

/* ── KEEP READING ── */
#gb-more { background: var(--gbc-porcelain); color: var(--gbc-ink); padding: clamp(3rem, 7vw, 5rem) 0; margin: 0; border-top: 1px solid var(--gbc-line); }
#gb-more .gbm-inner { max-width: 1320px; margin: 0 auto; padding: 0 var(--gbc-gutter); }
#gb-more .gbm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
#gb-more h2 { font: 700 clamp(1.6rem, 3vw, 2.3rem)/1.05 var(--gbc-display); letter-spacing: -.02em; color: var(--gbc-ink); margin: 0; padding: 0; text-transform: none; border: 0; }
#gb-more h2::before, #gb-more h2::after { content: none; }
#gb-more .gbm-all { font: 500 .95rem/1 var(--gbc-text); color: var(--gbc-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gbc-rose); white-space: nowrap; }
#gb-more .gbm-all:hover { color: var(--gbc-rose-deep); }
#gb-more .gbm-by { display: flex; align-items: center; gap: 1rem; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); padding: 1rem 1.25rem; border-radius: 18px; background: #fff; border: 1px solid var(--gbc-line); }
#gb-more .gbm-by img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; margin: 0; max-width: none; }
#gb-more .gbm-by p { margin: 0; font: 400 1rem/1.5 var(--gbc-text); color: var(--gbc-ink-2); }
#gb-more .gbm-by a { color: var(--gbc-ink); font-weight: 600; text-decoration: none; }
#gb-more .gbm-by a:hover { color: var(--gbc-rose-deep); }
#gb-more .gbm-by .gbm-by-all { display: inline-block; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gbc-rose); white-space: nowrap; }
#gb-more .gbm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); margin: 0; padding: 0; }
#gb-more .gbm-card { display: block; color: var(--gbc-ink); text-decoration: none; margin: 0; padding: 0; background: none; border: 0; }
#gb-more .gbm-media { display: block; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: var(--gbc-blush); margin: 0 0 .9rem; }
#gb-more .gbm-media img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; max-width: none; border-radius: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
#gb-more .gbm-card:hover .gbm-media img { transform: scale(1.035); }
#gb-more .gbm-tag { display: inline-flex; align-items: center; gap: .5em; font: 500 .82rem/1 var(--gbc-text); color: var(--tag, var(--gbc-rose-deep)); letter-spacing: 0; text-transform: none; }
#gb-more .gbm-tag::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
#gb-more h3 { font: 700 1.3rem/1.15 var(--gbc-display); letter-spacing: -.015em; color: var(--gbc-ink); margin: .6rem 0 .5rem; padding: 0; text-wrap: balance; text-transform: none; }
#gb-more .gbm-card:hover h3 { color: var(--gbc-rose-deep); }
#gb-more .gbm-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font: 400 .82rem/1.4 var(--gbc-text); color: var(--gbc-ink-2); margin: 0; }
@media (max-width: 860px) { #gb-more .gbm-grid { grid-template-columns: 1fr; } #gb-more .gbm-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; align-items: start; }
  #gb-more .gbm-media { aspect-ratio: 1; border-radius: 14px; margin: 0; } #gb-more h3 { font-size: 1.08rem; margin-top: .4rem; } #gb-more .gbm-meta { display: none; } }

/* ── FOOTER ── */
#gbf { background: var(--gbc-ink); color: #E9E2EF; padding: clamp(3rem, 7vw, 5rem) 0 1.75rem; margin: 0; font: 400 15px/1.6 var(--gbc-text); text-align: left; }
#gbf .gbf-inner { max-width: 1320px; margin: 0 auto; padding: 0 var(--gbc-gutter); }
#gbf .gbf-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); padding: 0 0 clamp(2rem, 5vw, 3rem); margin: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
#gbf .gbf-logo { display: inline-block; font: 400 3rem/1 'Bebas Neue', var(--gbc-text); letter-spacing: .08em; color: #fff; text-decoration: none; margin: 0 0 1rem; }
#gbf .gbf-logo span { color: var(--gbc-rose); }
#gbf .gbf-about { font: 400 .95rem/1.65 var(--gbc-text); color: #BFB2CC; max-width: 38ch; margin: 0; }
#gbf .gbf-title { font: 600 .82rem/1 var(--gbc-text); letter-spacing: 0; text-transform: none; color: #F2A5B5; margin: .4rem 0 1rem; padding: 0; }
#gbf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
#gbf li { margin: 0; padding: 0; list-style: none; }
#gbf li::before, #gbf li::marker { content: none; }
#gbf a { color: #E9E2EF; text-decoration: none; font: 400 .95rem/1.4 var(--gbc-text); letter-spacing: 0; text-transform: none; }
#gbf ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gbc-rose); }
#gbf .gbf-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 1.5rem 0 0; margin: 0; font: 400 .82rem/1.5 var(--gbc-text); color: #A597B3; }
#gbf .gbf-bottom a { font-size: .82rem; color: #A597B3; }
#gbf .gbf-bottom a:hover { color: #fff; }
@media (max-width: 900px) { #gbf .gbf-top { grid-template-columns: 1fr 1fr; } #gbf .gbf-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { #gbf .gbf-top { grid-template-columns: 1fr; } }

/* Hero band added under text-only article heroes */
.gb-hero-figure { position: relative; z-index: 1; }