/* Dan Ouellette — static rebuild of the Squarespace 7.1 site.
   Layout uses the same 24-column (desktop) / 8-column (mobile) grid as
   Squarespace's Fluid Engine, so block positions match the original. */

:root {
  --white: #fff;
  --black: #000;
  --accent: #ff5e1a;
  --dark-accent: #282828;
  --light-accent: #dad9d9;

  --max-page-width: 1400px;
  --page-padding: 4vw;

  --heading-font: "Marcellus", serif;
  --body-font: "PT Serif", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body-font);
  font-size: 1rem;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { display: block; }

/* ---------- Section themes (from the Squarespace theme) ---------- */

.theme-black, .theme-dark, .theme-dark-bold, .theme-light {
  --h1-color: var(--white); --h2-color: var(--white); --h3-color: var(--white); --h4-color: var(--white);
  --p-large-color: var(--white); --p-color: var(--white); --p-small-color: var(--white);
  --link-color: var(--accent);
  --button-bg: var(--accent); --button-text: var(--white);
}
.theme-black { --section-bg: var(--black); }
.theme-white {
  --section-bg: var(--white);
  --h1-color: var(--dark-accent); --h2-color: var(--dark-accent); --h3-color: var(--dark-accent); --h4-color: var(--black);
  --p-large-color: var(--black); --p-color: var(--dark-accent); --p-small-color: var(--dark-accent);
  --link-color: var(--accent);
  --button-bg: var(--dark-accent); --button-text: var(--white);
}
.theme-dark { --section-bg: var(--dark-accent); }
.theme-dark-bold {
  --section-bg: var(--dark-accent);
  --h1-color: var(--accent); --h2-color: var(--accent); --h3-color: var(--accent); --h4-color: var(--accent);
  --p-color: var(--accent); --p-small-color: var(--accent);
}
.theme-light {
  --section-bg: var(--light-accent);
  --h1-color: var(--dark-accent); --h2-color: var(--dark-accent); --h3-color: var(--dark-accent); --h4-color: var(--black);
  --p-large-color: var(--black); --p-color: var(--black); --p-small-color: var(--dark-accent);
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--black);
  padding: 2vw var(--page-padding);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-page-width);
  margin: 0 auto;
}
.site-title img { height: 50px; width: auto; }
.site-nav { display: flex; gap: 2vw; }
.site-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5em;
  padding: .1em 0;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
  transition: background-size .2s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background-size: 100% 1px; }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--white);
}
.menu-toggle span {
  display: block;
  width: 28px;
  height: 1px;
  margin: 7px 0;
  background: currentColor;
  transition: transform .2s, opacity .2s;
}
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 767px) {
  .site-header { padding: 6vw; }
  .site-title img { height: 36px; }
  .menu-toggle { display: block; }
  .site-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: var(--black);
  }
  .site-nav a { font-family: var(--heading-font); font-size: 2rem; }
  .menu-open .site-nav { display: flex; }
}

/* ---------- Sections & Fluid Engine grid ---------- */

.page-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--section-bg);
  overflow: hidden;
}
.page-section.h-medium { min-height: 66vh; }

/* Section dividers: the bottom edge is cut into a shape (--divider-clip)
   and the next section's background slides up underneath it. */
.page-section.has-divider {
  z-index: 1;
  padding-bottom: var(--divider-height);
  clip-path: var(--divider-clip);
}
.page-section.after-divider {
  margin-top: calc(-1 * var(--prev-divider-height));
  padding-top: var(--prev-divider-height);
}
.page-section.h-medium > .content-wrapper { padding-top: 6.6vmax; padding-bottom: 6.6vmax; }

.section-bg { position: absolute; inset: 0; }
.section-bg video { width: 100%; height: 100%; object-fit: cover; }
.content-wrapper { position: relative; }

.fe {
  --gap: 11px;
  --grid-gutter: calc(6vw - var(--gap));
  --cell-max-width: calc((var(--max-page-width) - var(--gap) * 7) / 8);
  display: grid;
  position: relative;
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  gap: var(--gap);
  overflow-x: clip;
}
.fe.no-gap { --gap: 0px; }

@media (min-width: 768px) {
  .fe {
    --grid-gutter: calc(var(--page-padding) - var(--gap));
    --cell-max-width: calc((var(--max-page-width) - var(--gap) * 23) / 24);
    --container-width: min(var(--max-page-width), calc(100vw - var(--page-padding) * 2));
    grid-template-rows: repeat(var(--rows-d), minmax(calc(var(--container-width) * .0215), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

.blk {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------- Text ---------- */

.txt { width: 100%; }
.txt h1, .txt h2, .txt h3, .txt h4 {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: -.02em;
}
.txt h1 { color: var(--h1-color); --v: 4; }
.txt h2 { color: var(--h2-color); --v: 2.8; }
.txt h3 { color: var(--h3-color); --v: 2.2; }
.txt h4 { color: var(--h4-color); --v: 1.6; }
.txt h1, .txt h2, .txt h3, .txt h4 { line-height: calc(1.2em * (1 + (1 - var(--v)) / 25)); }

.txt p { margin: 1rem 0; color: var(--p-color); --v: 1; line-height: 1.5em; }
.txt p.large { color: var(--p-large-color); --v: 1.4; }
.txt p.small { color: var(--p-small-color); --v: .9; }
.txt > :first-child { margin-top: 0; }
.txt > :last-child { margin-bottom: 0; }

.txt ul { margin: 1rem 0 0; padding-left: 40px; color: var(--p-color); }
.txt li > p { margin: .5em 0; }
.txt a { color: var(--link-color); }
.txt strong { font-weight: inherit; }

/* Squarespace's responsive type scale */
.txt h1, .txt h2, .txt h3, .txt h4, .txt p {
  font-size: calc((var(--v) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
}
@media (min-width: 768px) {
  .txt h1, .txt h2, .txt h3, .txt h4, .txt p {
    font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem),
                   max(calc((var(--v) - 1) * .012 * var(--max-page-width) + 1rem), calc(var(--v) * 1rem)));
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2em 2em;
  border-radius: 300px;
  background: var(--button-bg);
  color: var(--button-text);
  font-family: var(--body-font);
  font-size: 1rem;
  line-height: 1.2em;
  text-align: center;
  text-decoration: none;
  transition: opacity .1s linear;
}
.btn:hover { opacity: .8; }
.btn.stretch { width: 100%; height: 100%; padding: 0 2em; }
.btn.disabled { cursor: default; }
.btn.disabled:hover { opacity: 1; }

/* ---------- Images & video ---------- */

/* Media fills its grid area without pushing the rows taller,
   like Squarespace's fluid image/video blocks. */
.img, .vid, .embed { position: relative; width: 100%; height: 100%; }
.img > *, .vid > video, .embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.img img, .vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.img.fit img { object-fit: contain; }
.vid video { object-fit: contain; object-position: 50% 0; }
.embed > iframe { bottom: auto; height: auto; aspect-ratio: 16 / 9; }
.img a, .img button { display: block; }
.img button { padding: 0; border: 0; background: none; cursor: zoom-in; }
.embed iframe { border: 0; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  background: rgba(0, 0, 0, .92);
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }