/*
 * Type and spacing follow the reference site's theme settings:
 *   rem = 15px, page padding 6vw, max page width 1400px, grid gap 11px,
 *   desktop row = container width * 0.0215, mobile row = 24px.
 * Font sizes use the same responsive formula, driven by a per-element --v
 * (the theme's size value, e.g. 1.2 for normal text, 5.7 for h1).
 */
:root {
  --bg: hsl(0, 0%, 0%);
  --fg: hsl(0, 0%, 98.04%);
  --muted: hsla(0, 0%, 98.04%, .6);
  --field: hsl(0, 0%, 78%);
  --ph: #1c1c1c;
  --ph-line: #2e2e2e;
  --gutter: 6vw;
  --max-width: 1400px;
  --gap: 11px;
  --container: min(1500px, calc(100vw - var(--gutter) * 2));
  --row: calc(var(--container) * 0.0215);
  --heading: "Syne", sans-serif;
  /* The reference uses aktiv-grotesk (Adobe Fonts). Geist is the closest free match by measured
     glyph widths and letterforms. */
  --body: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --button: "Archivo Black", sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  --v: 1.2;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* responsive type */
body, .site-title, .header-nav a, h1, h2, h3, h4, p, label, legend, input, textarea {
  font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v) - 1) * 0.012 * var(--max-width) + 1rem), calc(var(--v) * 1rem)));
}
h1, h2, h3, h4, .site-title, .footer-mark {
  font-family: var(--heading);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: calc(1em * (1 + (1 - var(--v)) / 25));
  margin: 0;
}
h1 { --v: 5.7; }
h2 { --v: 2.5; }
h3 { --v: 2; }
h4 { --v: 1.7; }
p { --v: 1.2; margin: 0; line-height: 1.1em; }
p a { text-decoration: underline; text-underline-offset: auto; }
.small, .small p { --v: 1; }

.skip { position: absolute; left: -9999px; top: 0; padding: 8px 12px; font-family: var(--button); font-size: 13.272px; text-decoration: underline; background: var(--fg); color: var(--bg); z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------- header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  transition: transform .3s ease;
}
.header.is-hidden { transform: translateY(-100%); }
.header-inner {
  max-width: calc(var(--max-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 2.6vw var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.header-nav { display: flex; flex-wrap: wrap; gap: .9vw; }
.header-nav a { --v: 1.2; line-height: 1.1; padding: .1em 0; }
.header-nav a[aria-current] {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 calc(100% - .1em);
}
.site-title { --v: 1.7; line-height: 1em; padding: .1em 0; white-space: nowrap; text-align: center; word-spacing: .25em; }
.header-social { display: flex; justify-content: flex-end; gap: 13px; }
.header-social svg, .menu-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; justify-self: end; }
.burger span { display: block; width: 28px; height: 1px; background: var(--fg); margin: 7px 0; transition: transform .25s ease; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px;
}
.menu-overlay[hidden] { display: none; }
.menu-overlay nav { display: flex; flex-direction: column; align-items: center; gap: 2vmin; }
.menu-overlay nav a { font-size: 8.5vmin; line-height: 1.2; }
.menu-social { display: flex; gap: 20px; }

/* ------------------------------------------------- fluid grid sections */
.fe {
  display: grid;
  grid-template-columns:
    minmax(calc(var(--gutter) - var(--gap)), 1fr)
    repeat(24, minmax(0, calc((1500px - var(--gap) * 23) / 24)))
    minmax(calc(var(--gutter) - var(--gap)), 1fr);
  grid-template-rows: repeat(var(--rows-d), minmax(var(--row), auto));
  gap: var(--gap);
}
/* section padding: custom (none), small, medium */
.pad-s { padding: 3.3vmax 0; min-height: 33vh; align-content: center; }
.pad-m { padding: 6.6vmax 0; min-height: 66vh; align-content: center; }
.fe.hero { --gap: 5px; }
.blk { grid-area: var(--d); min-width: 0; margin: 0; }

.blk-img { display: block; overflow: hidden; }
.blk-img .ph { width: 100%; height: 100%; }
/* photos keep their own shape inside the slot, anchored left (as on the reference) */
.blk-img img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

.ph {
  background: var(--ph);
  background-image: linear-gradient(135deg, transparent 49.6%, var(--ph-line) 49.6%, var(--ph-line) 50.4%, transparent 50.4%),
                    linear-gradient(45deg, transparent 49.6%, var(--ph-line) 49.6%, var(--ph-line) 50.4%, transparent 50.4%);
  display: flex; align-items: center; justify-content: center;
  color: #777; font-family: var(--body); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  min-height: 60px;
}
.ph span { background: var(--ph); padding: 4px 10px; }

.blk-cap { font-weight: 700; align-self: start; }
.blk-cap a { text-decoration: underline; }
.blk-quote { align-self: start; }
.blk-quote.center { text-align: center; }

/* hero */
.slideshow { position: relative; z-index: 2; }
.slides { position: relative; width: 100%; height: 100%; }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; }
.slide.is-active { opacity: 1; }
.slide .ph, .slide img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.slide .ph { width: 64%; margin: 0 auto; }
.slideshow button {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--fg); font-size: 28px; cursor: pointer; padding: 10px;
  opacity: 0; transition: opacity .2s;
}
.slideshow:hover button { opacity: .7; }
.slideshow button:hover { opacity: 1; }
.ss-prev { left: 0; }
.ss-next { right: 0; }

/* ---------------------------------------------------------- contact page */
.page-title { align-self: center; }
.text h2 { margin-bottom: 1.6rem; }

.contact-form { display: flex; flex-direction: column; gap: 15px; }
.contact-form fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
.contact-form legend { padding: 0; margin-bottom: 4px; line-height: 1.1; }
.contact-form fieldset legend + label, .contact-form fieldset label { --v: 1; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; line-height: 1.1; }
.req { font-size: 15px; opacity: .7; margin-left: .3em; }
.contact-form input, .contact-form textarea {
  width: 100%;
  font-family: var(--body);
  --v: 1.2;
  color: #000; background: var(--field);
  border: 1px solid #000; border-radius: 0;
  padding: 10px;
  transition: transform .15s ease;
}
.contact-form input { height: 42px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; transform: scale(1.01); }
.contact-form textarea { resize: vertical; height: 100px; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.contact-form button {
  align-self: flex-start;
  margin-top: 6px;
  font-family: var(--button); font-weight: 500; font-size: 1rem; line-height: normal;
  background: transparent; color: hsl(0, 0%, 86.27%);
  border: 2px solid hsl(0, 0%, 86.27%); border-radius: 0;
  padding: 19.5px 32.565px; cursor: pointer;
  transition: opacity .2s;
}
.contact-form button:hover { opacity: .8; }
.contact-form button:disabled { opacity: .5; cursor: wait; }
.form-status { min-height: 1.2em; }

.stub { max-width: var(--max-width); margin: 0 auto 10vw; padding: 0 var(--gutter); color: var(--muted); }

/* --------------------------------------------------------------- footer */
/* Same grid as the page sections (see build.py for placements). */
.footer { padding: .1vmax 0; }
.footer-rule { align-self: center; }
.footer-rule hr { border: 0; height: 1px; background: var(--fg); margin: 0; }
.footer .blk { align-self: center; }
.copyright, .footer-mark { text-align: center; }
.footer-mark { --v: 2.5; }
.footer-social { display: flex; justify-content: center; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 48px; }
.footer-social svg { width: 29px; height: 29px; fill: currentColor; display: block; }

/* Hamburger menu wherever the nav no longer fits beside the name (as the reference theme does). */
@media (max-width: 899px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .header-nav, .header-social { display: none; }
  .site-title { text-align: left; }
  .burger { display: block; }
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 767px) {
  :root { --gutter: 6vw; --row: 24px; }
  body, .site-title, .header-nav a, h1, h2, h3, h4, p, label, legend, input, textarea, .footer-mark {
    font-size: calc((var(--v) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
  }
  .site-title { --v: 1.1; }
  .fe {
    grid-template-columns:
      minmax(calc(var(--gutter) - var(--gap)), 1fr)
      repeat(8, minmax(0, calc((1500px - var(--gap) * 7) / 8)))
      minmax(calc(var(--gutter) - var(--gap)), 1fr);
    grid-template-rows: repeat(var(--rows-m), minmax(var(--row), auto));
  }
  .blk { grid-area: var(--m); }
  .header-inner { grid-template-columns: 1fr auto; padding: 6vw var(--gutter); }
  .slideshow button { display: none; }
  .page-title { align-self: start; }
  .footer .footer-social-wrap { align-self: start; margin-top: -12px; }
}