/* ============================================
   RHYS J P MCKENNA — GLOBAL CSS
   Paste into: Design > CSS Editor
   (replaces everything currently there)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=DM+Sans:wght@300;400;500&display=swap');

/* === BASE ===
   The black lives here, on the site itself. */
html, body {
  background-color: #0a0a0a !important;
  color: #f0ece4 !important;
  font-family: 'DM Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  cursor: crosshair;
}

::selection {
  background: #FF3D1F;
  color: #0a0a0a;
}

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #FF3D1F; }

a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #FF3D1F; }

/* === CARGO CONTAINERS ===
   Transparent, so pages never stack black boxes over each other. */
.main_container,
.content_container,
.page_container,
.page_background,
.backdrop {
  background-color: transparent !important;
  background-image: none !important;
}

/* === PAGES === */
.page,
.page.container,
.page.container.container_width {
  background-color: transparent !important;
}

/* === TYPOGRAPHY === */
h1 {
  font-family: 'Bodoni Moda SC', Georgia, serif !important;
  font-size: clamp(4rem, 13vw, 17rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 0.88 !important;
  color: #f0ece4 !important;
  text-transform: uppercase !important;
}

h2 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(0.65rem, 1vw, 0.9rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #f0ece4 !important;
}

h3, h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(0.55rem, 0.8vw, 0.75rem) !important;
  font-weight: 300 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #888880 !important;
  line-height: 1.9 !important;
}

p, bodycopy, .bodycopy {
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(0.6rem, 1vw, 0.85rem) !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em !important;
  color: #888880 !important;
  line-height: 1.9 !important;
  text-transform: uppercase !important;
}

/* === NAV (Cargo's built-in navigation, skips the overlay menu) === */
#navigation a, .navigation a, nav:not(.rm-menu) a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #888880 !important;
  transition: color 0.2s ease !important;
}
#navigation a:hover, nav:not(.rm-menu) a:hover { color: #FF3D1F !important; }
#navigation a.active, nav:not(.rm-menu) a.current { color: #f0ece4 !important; }

/* === OVERLAY MENU (the 5 words across the top) === */
.rm-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.1rem 2vw;
  padding-top: calc(1.1rem + env(safe-area-inset-top, 0px));
  background: none !important;
  pointer-events: none;
}

.rm-menu a {
  pointer-events: auto;
  font-family: 'Bodoni Moda SC', Georgia, serif !important;
  font-size: clamp(1rem, 2.2vw, 1.75rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  color: #f0ece4 !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.rm-menu a:hover,
.rm-menu a:focus-visible,
.rm-menu a.active {
  color: #FF3D1F !important;
  border-bottom-color: #FF3D1F;
  outline: none;
}

@media (max-width: 600px) {
  .rm-menu {
    padding: 0.9rem 4vw;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
  }
  .rm-menu a {
    font-size: 0.95rem !important;
    letter-spacing: 0.02em !important;
  }
}

/* === IMAGES === */
img {
  filter: brightness(0.9);
  transition: filter 0.4s ease;
}
img:hover { filter: brightness(1.05); }

/* === SITE MENU (Cargo's full-screen menu, if you use it) === */
#site-menu, .site-menu {
  background-color: #0a0a0a !important;
}
#site-menu a, .site-menu a {
  font-family: 'Bodoni Moda SC', Georgia, serif !important;
  font-size: clamp(2.5rem, 7vw, 6rem) !important;
  font-weight: 500 !important;
  color: #f0ece4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
#site-menu a:hover, .site-menu a:hover {
  color: #FF3D1F !important;
}

/* === FOOTER === */
#footer, footer {
  background-color: #0a0a0a !important;
  border-top: 1px solid #1c1c1c !important;
}

@media (prefers-reduced-motion: reduce) {
  a, .rm-menu a, img { transition: none !important; }
}

/* === PINNED MENU PAGE: LET CLICKS PASS THROUGH ===
   The pinned menu page can sit over the whole screen
   and swallow clicks meant for the page underneath.
   This makes its box click-through; the menu bar itself
   switches clicks back on (pointer-events:auto in its code). */
[pinned],
.pinned {
  pointer-events: none;
}

/* === CLICK-TO-ZOOM IMAGES ===
   Any image wrapped in <label class="rmx"> opens in a window
   over the page when clicked. Click the image or the dark
   area around it to close.
   Window size = max-width / max-height below.
   Speed = the 0.6s in the two animation lines.
   Sits over everything, including the menu bar. */
.rmx {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.rmx-bg {
  display: none;
}

.rmx input:checked ~ .rmx-bg {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 10, 0.85);
  cursor: zoom-out;
  animation: rmxFade 0.6s ease both;
}

.rmx input:checked + img {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  z-index: 10001 !important;
  width: auto !important;
  height: auto !important;
  max-width: 80vw !important;
  max-height: 85vh !important;
  object-fit: contain !important;
  filter: none !important;
  border: 1px solid rgba(240, 236, 228, 0.3);
  cursor: zoom-out;
  animation: rmxGrow 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rmxFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rmxGrow {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* Keeps the window full size when the page is zoomed out */
#rmz20:checked ~ .rmz-view .rmx input:checked + img,
#rmz20:checked ~ .rmz-view .rmx input:checked ~ .rmx-bg {
  zoom: 5;
}

#rmz50:checked ~ .rmz-view .rmx input:checked + img,
#rmz50:checked ~ .rmz-view .rmx input:checked ~ .rmx-bg {
  zoom: 2;
}

/* === NO BACKDROP — plain black everywhere ===
   Hides Cargo's backdrop effect (the lilac / blue glow). */
.backdrop {
  display: none !important;
}

/* === CARGO PRESETS (managed by Cargo, leave as is) === */
[data-css-preset] .container {
	margin-left: auto /*!content_right*/;
	margin-right: 0 /*!content_right*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_right*/;
}

[data-css-preset] body {
	background-color: transparent/*!body_bgcolor*/;
}

[data-css-preset] .content_padding {
	padding-top: 2.5rem /*!main_margin*/;
	padding-bottom: 2.5rem /*!main_margin*/;
	padding-left: 2.5rem /*!main_margin*/;
	padding-right: 2.5rem /*!main_margin*/;
}