/* ===========================================================
   HOW TO EDIT THIS SITE (no coding experience needed)
   -----------------------------------------------------------
   - Text content lives in index.html and contact.html.
   - Anything wrapped like [THIS] is a placeholder — open the
     HTML file in Notepad, find it, and type your real text in
     its place (including the square brackets, delete those).
   - Colors and spacing live here in style.css. You generally
     don't need to touch this file unless you want to change
     the look.
   =========================================================== */

:root {
  --ink: #21201c;
  --paper: #ffffff;
  --line: #e4e4e0;
  --accent: #5d6b52;
  --muted: #6f6a5e;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  line-height: 1.6;
  font-size: 18px;
}

/* ---------- Top frame ---------- */
/* A full-width bar pinned to the very top of the window. The
   logo sits centered inside it. Everything else on the page
   scrolls underneath the whole bar, not just under the logo. */

.site-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  box-shadow: 0 2px 12px rgba(33, 32, 28, 0.1);
  padding: 1.5rem 0;
  transition: padding 0.25s ease;
}

/* Once the page is scrolled, the whole frame gets shorter and
   the logo inside it shrinks along with it. */
.site-frame.is-scrolled {
  padding: 0.65rem 0;
}

.site-logo img {
  display: block;
  height: 320px;
  width: auto;
  transition: height 0.25s ease;
}

.site-frame.is-scrolled .site-logo img {
  height: 150px;
}

/* ---------- Hamburger menu ---------- */
/* Sits inside the frame, at the right-hand side. */

.menu-toggle {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}

.menu-toggle:hover {
  background: rgba(33, 32, 28, 0.05);
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-panel {
  position: fixed;
  right: 1.25rem;
  z-index: 999;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--paper);
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(33, 32, 28, 0.12);

  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, top 0.25s ease;
}

.menu-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Page layout ---------- */

main {
  max-width: 700px;
  margin: 0 auto;
  /* Fallback spacing if JavaScript is off; normally overridden
     by site.js, which measures the frame's real height so this
     can't drift out of sync with the logo's actual size. */
  padding: 35rem 6vw 6rem;
}

/* Links inside the hamburger's dropdown panel */
.menu-panel a {
  color: var(--muted);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.menu-panel a:hover,
.menu-panel a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.menu-panel a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

h1 {
  font-size: 2.1rem;
  line-height: 1.25;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem;
}

p {
  margin: 0 0 1.25rem;
  max-width: 62ch;
}

/* ---------- Overlapping video display ---------- */
/* Two videos stacked so the bottom-right corner of the first
   tucks under the top-left corner of the second, like two
   photos laid on a desk. Both autoplay and loop on their own. */

.video-stack {
  position: relative;
  width: 85%;
  margin: 3rem auto 4rem;
  padding-bottom: 34%;
}

.video-stack video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(33, 32, 28, 0.15);
}

.video-stack .video-primary {
  position: relative;
  width: 60%;
  z-index: 1;
}

.video-stack .video-secondary {
  position: absolute;
  width: 60%;
  right: 0;
  bottom: 0;
  z-index: 2;
}

@media (max-width: 560px) {
  .video-stack {
    width: 100%;
    padding-bottom: 0;
  }
  .video-stack .video-primary,
  .video-stack .video-secondary {
    position: static;
    width: 100%;
    margin-bottom: 1.25rem;
  }
}

/* ---------- Contact page / form embed ---------- */

.form-embed {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2rem;
}

.form-embed iframe {
  display: block;
  width: 100%;
  min-height: 700px;
  border: none;
}

/* ---------- Footer ---------- */

footer.site-footer {
  padding: 2.5rem 6vw;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}