/* ---------------------------------------------
   Site-wide base styles
--------------------------------------------- */

:root {
  --color-bg: #819179;      /* accent green */
  --color-cream: #fffde1;   /* accent cream */
  --color-divider: #7c9171;
  --font-roman: 'minion-3', Georgia, serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-roman);
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-bg);
}

img {
  max-width: 100%;
  display: block;
}

body.no-scroll {
  overflow: hidden;
}

/* Screen-reader-only text — for content (like the home hero's
   decorative video) that needs an accessible text equivalent
   without displaying visually. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------
   Page transitions — js/page-transition.js fetches
   internal links and swaps just the <main> content
   (fading it out, then in). The header element is
   never replaced, so its open/closed nav state and
   appearance just persist naturally across "pages"
   with no reload gap to flash.
--------------------------------------------- */

main {
  opacity: 0;
  transition: opacity 0.35s ease;
}

main.is-visible {
  opacity: 1;
}

main.is-leaving {
  opacity: 0;
}

/* If JS never runs, don't leave the page permanently invisible. */
.no-js main {
  opacity: 1;
}

/* ---------------------------------------------
   Site header (shared across pages)
--------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-cream);
  text-align: center;
  padding: 1.6rem 1rem;
}

/* Homepage has no header in its markup at all (see index.html); when
   navigating to/from it, js/page-transition.js mounts or unmounts the
   header on the fly and toggles these to slide it in/out instead of
   just popping. Unused (no-op) on every other page-to-page swap. */
.site-header--slide {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header--slide.site-header--hidden {
  transform: translateY(-100%);
}

/* Hamburger toggle, pinned top-left. js/nav.js toggles
   .is-open on .site-header, which morphs the three lines
   into an X and cross-fades the brand/nav below. */
/* Sized to roughly match .site-header__link's rendered line height
   (not just eyeballed independently) — otherwise the open/closed icon
   reads as noticeably bigger than the nav text next to it. */
.site-header__toggle {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 18px;
  height: 14px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}

.site-header__toggle-line {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-bg);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Offset = gap + line thickness, so the top/bottom lines land exactly
   on the middle line's position when they rotate into an X. */
.site-header.is-open .site-header__toggle-line:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.site-header.is-open .site-header__toggle-line:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .site-header__toggle-line:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Brand (name/role) and nav links occupy the same grid cell so
   they cross-fade in place instead of causing a layout jump —
   same stacking technique as the FAQ question/answer cross-fade. */
.site-header__center {
  position: relative;
  display: grid;
}

.site-header__brand,
.site-header__nav {
  grid-area: 1 / 1;
}

.site-header__brand {
  transition: opacity 0.4s ease;
}

.site-header.is-open .site-header__brand {
  opacity: 0;
  pointer-events: none;
}

.site-header__name {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: 0.25em;
  color: var(--color-bg);
  font-weight: 400;
}

.site-header__role {
  margin: 0.15em 0 0;
  font-size: clamp(0.85rem, 1.3vw, 1.1rem);
  font-style: italic;
  letter-spacing: 0.18em;
  color: var(--color-bg);
}

.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.site-header.is-open .site-header__nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-header__link {
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-bg);
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.site-header__link:hover,
.site-header__link.is-current {
  opacity: 1;
}

/* ---------------------------------------------
   On-load reveal — elements marked .reveal fade
   and glide into place once the page has loaded.
   js/reveal.js adds .is-visible with a stagger.
--------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s ease, transform 1s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Elements marked .stroke-draw "draw on" left-to-right via a
   clip-path reveal once js/reveal.js adds .is-visible, after
   the .reveal elements have settled in. Works for both stroked
   paths and filled shapes (unlike stroke-dashoffset). */

.stroke-draw {
  clip-path: inset(0 100% 0 0);
  /* Fast initial move that eases into a long, flat tail —
     matches an exponential ease-out (AE "easeOutExpo"-style
     keyframe curve: steep drop, then levels off toward 0). */
  transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shared fill for .stroke-draw vector assets (site-wide since
   more than one page uses this technique). */
.shape-stroke-fill {
  fill: var(--color-cream);
}

.stroke-draw.is-visible {
  clip-path: inset(0 0 0 0);
}

/* ---------------------------------------------
   Simple placeholder pages (FAQ, Contact) — just
   a centered label until real content is built.
--------------------------------------------- */

.placeholder {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.placeholder__label {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cream);
}

.placeholder__note {
  margin: 1rem 0 0;
  font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--color-cream);
  opacity: 0.85;
}