/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: rgba(0, 0, 0, 0.85);
  --color-secondary: rgba(0, 0, 0, 0.4);
  --color-links: rgba(1, 1, 1, 0.85);
  --color-white: #fff;
  --color-black: #000;

  /* Font Families */
  --font-body: "Diatype Variable", "Diatype", Icons, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-headings: 'legitima', Icons, serif;
  --font-thumbnails: "Monument Grotesk Mono", Icons, monospace;
}
/* ==========================================================================
   Global Styles
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: var(--color-white);
  color: var(--color-black);
}

* {
  -webkit-box-sizing:  border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[data-ce-host="true"] {
  -webkit-nbsp-mode: initial;
}

[data-ce-host="true"] a {
  cursor: pointer;
}
[data-ce-host="true"] a img {
  cursor: pointer;
}
a video {
  cursor: pointer;
}

i, em {
  text-shadow: 0 0 0 #fdfdfd;
  font-style: normal;
}

b, strong {
  font-weight: bolder;
}

sub, sup {
  position: relative;
  vertical-align: baseline;
}

sub { top: 0.3em; }

sup { top: -0.4em; }

s { text-decoration: line-through; }

img { border: 0; padding: 0; }

ul, ol {
  margin: 0;
  padding: 0 0 0 2.5em;
}

blockquote {
  margin: 0;
  padding: 0 0 0 2em;
}

hr {
  background: rgba(0, 0, 0, .15);
  border: 0;
  height: 1px;
  display: block;
}

.page a.active { color: #030303; }

a:active { opacity: 0.7; }

#toolset { display: none; }

/* ==========================================================================
   Typography
   ========================================================================== */

@font-face {
  font-family: 'legitima'; /* Changed to match the CSS variable */
  src: url('https://files.cargocollective.com/c2036491/Legitima-Italic.ttf') format('truetype');
  font-display: swap;
}

h1 {
  font-family: var(--font-headings);
  padding: 0;
  margin: 0;
  color: var(--color-primary);
  letter-spacing:0;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  font-size: 4.9rem;
}


[data-predefined-style="true"] h1 a {
  color: var(--color-primary);
}

[data-predefined-style="true"] h2 {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  padding: 0;
  margin: 0;
  color: var(--color-primary);
  font-size: 2.4rem;
  line-height: 1.2;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] h2 a {
  color: var(--color-primary);
}

[data-predefined-style="true"] small {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 2;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 100;
  color: var(--color-primary);
  font-variation-settings: 'slnt' 0, 'MONO' 0;
}
[data-predefined-style="true"] small b {
  font-weight: bold;
}

[data-predefined-style="true"] bodycopy {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-style: normal;
  line-height: 1.3;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
  text-shadow: 0 0 0 #fefefe;
}

[data-predefined-style="true"] bodycopy a {
  color: var(--color-links);
  text-decoration: none;
}

/* ==========================================================================
   Layout & Containers
   ========================================================================== */

#fullscreen-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: -1;
  padding-top: 61.54px;
}

.content img {
  float: none;
  margin-bottom: .5em;
}

[data-css-preset] .container {
  margin-left: 0 /*!content_left*/;
  margin-right: auto /*!content_left*/;
  text-align: c;
}

.container_width {
  position: sticky;
  top: 0;
  z-index: 1000;
}
/* This ensures the list items are stacked correctly */
.list-container {
  display: grid;
  gap: 1.5rem;
}

/* This creates the two columns within each list item */
.list-item {
  display: grid;
  grid-template-columns: 2fr 10fr;
  gap: 1.5rem;
}

/* THIS IS THE NEW FIX */
/* It forces the small tags to display correctly within the grid cells */
.list-item small {
  display: block !important;
}

/* This resets the display to make the columns work properly */
.list-item-col-1,
.list-item-col-2 {
    display: contents !important;
}

.mobile .page,
[data-css-preset].mobile .page {
  position: relative;
  min-height: 10px;
  max-width: 100%;
  width: 100%;
  background-color: transparent;
}

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

[data-css-preset] .content_padding {
  padding: 2.2rem;
}

.page {
  word-wrap: break-word;
}

.backdrop { width: 100%; }


/* ==========================================================================
   Buttons and Interactions
   ========================================================================== */

/* Button Link Structure */
/* Button Link Structure */
.my-button-link {
  padding: 10px 20px;
  background: #ffffff50;
  color: var(--color-white);
  width: 50%;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

/* Resets button's default styles */
.my-button-link button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
  cursor: inherit;
  font-family: var(--font-body); /* The font is now directly applied here */
}

[data-predefined-style="true"] bodycopy a:hover {
  color: rgba(49, 92, 252, 1);
}
/* ==========================================================================
   Dark-on-Light Theme (for white backgrounds)
   ========================================================================== */

/* This targets any .my-button inside our new theme container */
.dark-on-light-theme .my-button {
  background-color: #000; /* Solid black background */
  color: #FFFFFF;            /* White text */
  border: 2px solid #000000; /* Solid black border */
  padding: 12px 24px;
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for the new buttons */
.dark-on-light-theme .my-button:hover {
  background-color: #FFFFFF; /* On hover, flip to white background */
  color: #000000;            /* and black text */
}

/* The h1 tags will now correctly use your site's default dark color,
   but this rule ensures it just in case. */
.dark-on-light-theme h1 {
  color: var(--color-primary);
}
/* ==========================================================================
   Final Two-Column Collect Page Layout (Simplified & Centered)
   ========================================================================== */

/* The main container for the entire section. */
.collect-page-container {
  display: flex;
  max-width: 1400px;
  margin: 0rem auto;
  padding: 0rem;
  box-sizing: border-box;
}

/* Styles for each of the two columns. */
.collect-page-container .collect-column {
  flex: 1;
  padding: 0 2rem;
  box-sizing: border-box;
  /* Use CSS Grid to control alignment and spacing */
  display: grid;
  justify-items: center; /* This will now reliably center the buttons */
  align-content: start;
  grid-row-gap: 1.5rem; /* This replaces the flex-gap for spacing */
}

/* Creates the vertical dividing line on the first column. */
.collect-page-container .collect-column:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

/* Ensures headings use your site's primary color and are centered. */
.collect-page-container h1 {
  color: var(--color-primary) !important;
  font-family: var(--font-headings);
  font-size: 4.9rem;
  margin-bottom: 0; /* Margin is now handled by the grid gap */
  text-align: center;
}

/* The .buttons-wrapper rule has been completely removed. */

/* Styles are now applied directly to the button links. */
.collect-page-container .my-button-link {
  text-decoration: none;
  display: block;
  background: none;
  padding: 0;
  width: 60%; /* Link will fill the centered grid area */
  max-width: 350px; /* But not more than 350px */
}

/* The actual button styling, made highly specific. */
.collect-page-container .my-button {
  background-color: rgba(0, 0, 0, 1);
  color: #FFFFFF;
  border: 2px solid #000;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease-in-out;
  width: 100%;
}

/* Hover effect for the buttons. */
.collect-page-container .my-button:hover {
  background-color: #FFFFFF;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Mobile Responsive Styles
   ========================================================================== */
@media (max-width: 768px) {
  .collect-page-container {
    flex-direction: column;
  }

  .collect-page-container .collect-column:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
  
  .collect-page-container .collect-column {
    padding: 0;
  }
}
/* ==========================================================================
   Component-Specific Overrides (Fixes)
   ========================================================================== */

#mySuperUniqueContent [data-predefined-style="true"] small,
#unique-page-container [data-predefined-style="true"] small {
  color: var(--color-white) !important;
}

#mySuperUniqueContent [data-predefined-style="true"] small a,
#mySuperUniqueContent [data-predefined-style="true"] small a:link,
#mySuperUniqueContent [data-predefined-style="true"] small a:visited,
#mySuperUniqueContent [data-predefined-style="true"] small a:hover,
#mySuperUniqueContent [data-predefined-style="true"] small a:active {
  color: var(--color-white) !important;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
  
/* Consolidated Mobile Styles (768px and below) */
@media (max-width: 768px) {
  /* This ensures the list items are stacked correctly */
  .list-container > div[grid-col="2"],
  .list-container > div[grid-col="10"],
  .list-container > div[grid-col="3"],
  .list-container > div[grid-col="9"] {
    width: 100%;
  }
@media (max-width: 768px) {
  /* Set a minimum font size for bodycopy on mobile devices */
  [data-predefined-style="true"] bodycopy {
    font-size: clamp(1rem, 4vw, 2rem);
  }
}
@media (max-width: 768px) {
  /* Set a minimum font size for small on mobile devices */
  [data-predefined-style="true"] small {
    font-size: clamp(1rem, 4vw, 3rem);
  }
}
  .grid-container {
    max-width: 100%;
  }

  /*
   * We need a padding-top on the content to account for the fixed header.
   * I'm using a CSS variable to make this easy to adjust in the future.
   * The value `4.5rem` is a good starting point, but you might need to
   * adjust it based on the exact height of your menu button on mobile.
   */
  .page_container,
  .page {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}


@media screen and (max-width: 700px) {
  #foot span { line-height: 1; }
  #foot subheading { line-height: 0; }
}

#site_menu_button {
  color: var(--color-black) !important;
  line-height: 1;
  font-size: 40px;
  padding: 1px;
  background: rgba(33, 32, 46, 0);
  position: fixed;
  top: 1.0rem;
  right: 2rem;
  z-index: 9999;
  width: auto;
  height: auto;
}

body.mobile #site_menu_button {
  margin: 3px;
  font-size: 28px;
}

#site_menu_button.custom_icon {
  width: 40px;
  height: auto;
}

#site_menu_button.active {
  display: none; /* Keep original behavior */
}
/* --- Original Site Menu Styles --- */
#site_menu {
  font-family: "Diatype Mono Variable", Icons;
  background: rgba(20, 20, 20, 0.95);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  padding: 20px 30px 90px 30px;
  max-width: 400px;
  min-width: 300px;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  font-variation-settings: 'slnt' 0, 'MONO' 1;
}

body.mobile #site_menu {
  width: 100%;
}

#site_menu .page-link a {
  color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
  color: rgba(255, 255, 255, 0.75);
  font-weight: bold;
}

#site_menu a:active {
  opacity: .7;
}

#site_menu a.active {
  opacity: .4;
}

#site_menu .close {
  display: none;
  color: rgba(255, 255, 255, 0.4);
  line-height: 0.85em;
  font-size: 45px;
}

body.mobile #site_menu .close {
  display: block;
  font-size: 50px;
  line-height: 1em;
}

#site_menu .break {
  height: 28px;
}

#site_menu .indent {
  margin-left: 28px;
}

.sticky-logo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 80px;
  height: auto;

  mix-blend-mode: difference;
  /* Optional smoothing if PNG edges are aliased */
  image-rendering: -webkit-optimize-contrast;
}

/* =========================
   Noise Assembly: Patina Glass Menu
   ========================= */
:root{
  --glass-blur: 20px;
  --glass-tint-1: hsla(24, 22%, 12%, .42);   /* warm umber */
  --glass-tint-2: hsla(28, 18%, 16%, .34);   /* patina shadow */
  --edge-bronze: hsla(30, 30%, 64%, .28);    /* bronze edge */
  --edge-highlight: rgba(222, 210, 186, 0.18); /* subtle highlight */
}

#site_menu{
  position: fixed; inset: 0 0 0 auto;
  max-width: 420px; min-width: 300px;
  padding: 22px 30px 96px;
  color: rgba(255,255,255,.92);
  background:
    /* patina tone & depth */
    linear-gradient(160deg, var(--glass-tint-1), var(--glass-tint-2)),
    /* micro vignette toward top */
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.06), transparent 60%);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border-left: 1px solid var(--edge-bronze);
  box-shadow: -14px 0 34px rgba(0,0,0,.28);
  isolation: isolate;
  will-change: backdrop-filter, transform, opacity;
  transform: translateX(6px); /* slight parallax feel */
}

/* gentle inner sheen + patina speckle (no extra asset needed) */
#site_menu::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient( to right, rgba(255,255,255,.05), transparent 30% ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.015) 0 2px,
      rgba(0,0,0,.015) 2px 4px
    );
  mix-blend-mode: screen; opacity:.9;
}
#site_menu::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.07;
  background:
    radial-gradient(120px 60px at 0% 0%, var(--edge-highlight), transparent 60%),
    radial-gradient(160px 80px at 100% 100%, rgba(0,0,0,.25), transparent 60%);
}

/* Link styling with bronze glint underline */
#site_menu .page-link a,
#site_menu .set-link > a{
  color: rgba(255,255,255,.88);
  text-decoration: none;
  position: relative;
  transition: color .2s ease;
}
#site_menu .page-link a::after,
#site_menu .set-link > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: linear-gradient(90deg, transparent, #ffd7a0, transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s ease;
}
#site_menu .page-link a:hover,
#site_menu .set-link > a:hover{ color:#fff; }
#site_menu .page-link a:hover::after,
#site_menu .set-link > a:hover::after{ transform: scaleX(1); }

/* Open/close animation (toggle whatever class your menu uses when opening) */
.menu-open #site_menu{
  animation: menuGlassIn .35s ease forwards;
}
@keyframes menuGlassIn{
  from{ opacity:0; transform: translateX(24px); backdrop-filter: blur(4px) saturate(105%); }
  to  { opacity:1; transform: translateX(0);  backdrop-filter: blur(var(--glass-blur)) saturate(120%); }
}

/* Fallback if backdrop-filter isn’t supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #site_menu{ background: rgba(28,22,18,.92); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #site_menu{ transition:none; animation:none; transform:none; }
}