/* ==========================================================================
   Layout: the frame, sections, grid, header, mobile menu, and section
   label bars described in docs/grid.md.
   Requires tokens.css and typography.css.
   ========================================================================== */

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

html {
  scroll-padding-top: var(--header-height);   /* in-page links land below the pinned header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-page);
}

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-16); top: calc(-1 * var(--space-60)); z-index: 100;
  padding: var(--space-8) var(--space-16);
  background: var(--color-black); color: var(--color-smoke);
}
.skip-link:focus { top: var(--space-16); }

/* Focus outline: shown only to keyboard users. site.js adds .is-keyboard to
   <html> when someone presses Tab and removes it on any click or tap, so
   mouse and touch users never see an outline in any browser. Without
   JavaScript, the browser decides (keyboard focus only). Black, 2px. */
:focus { outline: none; }
.is-keyboard :focus-visible,
.no-js :focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; }


/* ---------- The frame ----------
   .frame sets the width between the two vertical lines. The lines themselves
   are drawn once for the whole page (body::after) so they run unbroken
   behind the header and over the footer. */

.frame {
  width: min(100% - 2 * var(--frame-inset), var(--frame-max));
  margin-inline: auto;
}

body::after {
  content: "";
  position: fixed; inset: 0; z-index: 50;
  width: min(100% - 2 * var(--frame-inset), var(--frame-max));
  margin-inline: auto;
  border-inline: var(--line-width) solid var(--color-line);
  pointer-events: none;
}

/* No lines below 600px */
@media (max-width: 599px) {
  body::after { display: none; }
}


/* ---------- Sections ---------- */

.section {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--color-surface);
}
.section--light { background: var(--color-light-gray); }
.section--sand  { background: var(--color-sand); }
.section--black { background: var(--color-black); color: var(--color-smoke); }

/* Bleeding: pull an element past the section's 20px padding to the frame line. */
.bleed-left  { margin-left:  calc(-1 * var(--section-pad-x)); }
.bleed-right { margin-right: calc(-1 * var(--section-pad-x)); }
.bleed-x     { margin-inline: calc(-1 * var(--section-pad-x)); }

/* Running text never exceeds 540px */
.measure { max-width: var(--text-max); }


/* ---------- Grid ----------
   12 columns on desktop, 3 on tablet, 2 on small tablet, 1 on mobile.
   Below desktop, items span the full width unless a component says otherwise. */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
}
.grid > * { grid-column: 1 / -1; }

@media (min-width: 901px) {
  .span-4  { grid-column: span 4; }
  .span-6  { grid-column: span 6; }
  .span-8  { grid-column: span 8; }
  .span-12 { grid-column: 1 / -1; }
}


/* ---------- Header ----------
   Pinned to the top, translucent Smoke with a background blur, 72px tall.
   Its contents align to the frame lines. */

.site-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-height);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(var(--header-blur));
          backdrop-filter: blur(var(--header-blur));
  border-bottom: var(--line-width) solid var(--color-line);
}

.site-header__inner {
  display: flex; align-items: center; gap: var(--space-24);
  height: 100%;
}
/* Below 600px there are no lines, so the header gets the standard 20px padding. */
@media (max-width: 599px) {
  .site-header__inner { padding-inline: var(--section-pad-x); }
}

.site-header__logo { flex: none; width: 181px; }
.site-header__logo img { width: 100%; height: auto; }

.site-nav { margin-inline: auto; }          /* centered between logo and Contact */
.site-nav__list { display: flex; gap: var(--space-40); margin: 0; padding: 0; list-style: none; }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.header-contact { flex: none; }   /* styled as .button.button--small (components.css) */


/* ---------- Mobile menu ----------
   Below 901px the nav collapses behind a two-line menu button and opens as
   a full-height panel. Without JavaScript the button is hidden and the links
   stay visible in the header, so the site is always navigable. */

.menu-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 900px) {
  .js .site-nav, .js .header-contact { display: none; }

  .js .menu-toggle {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 44px; margin-left: auto;   /* 40 × 44 tap target; the lines run its full width, ending on the frame */
    padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  }
  .menu-toggle__lines { position: relative; width: 40px; height: 8px; }
  .menu-toggle__lines::before,
  .menu-toggle__lines::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1.5px;
    background: currentColor; transition: transform .25s ease, top .25s ease;
  }
  .menu-toggle__lines::before { top: 0; }
  .menu-toggle__lines::after  { top: calc(100% - 1.5px); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__lines::after  { top: calc(50% - 0.75px); transform: rotate(-45deg); }

  .js .mobile-menu {
    display: block;
    position: fixed; top: var(--header-height); left: 0; right: 0; z-index: 55;
    height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    background: var(--color-smoke);
    visibility: hidden; opacity: 0;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .js .mobile-menu.is-open { visibility: visible; opacity: 1; transition: opacity .2s ease; }

  .mobile-menu__list { margin: 0; padding: 0; list-style: none; }
  .mobile-menu__list a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
    min-height: var(--space-60);
    padding-inline: var(--section-pad-x);
    border-bottom: var(--line-width) solid var(--color-line);
    font-family: var(--font-sans);
    font-size: var(--text-menu-size);
    font-weight: var(--text-menu-weight);
    line-height: var(--text-menu-leading);
    letter-spacing: var(--text-menu-tracking);
    color: inherit; text-decoration: none;
  }

  /* No JavaScript: keep the links visible, wrapping under the logo if needed. */
  .no-js .site-header { height: auto; min-height: var(--header-height); }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: var(--space-16); }
  .no-js .site-nav__list { flex-wrap: wrap; gap: var(--space-8) var(--space-24); }
}

body.menu-open { overflow: hidden; }


/* ---------- Section label bar ----------
   60px tall including its lines (40px on mobile): green marker, label,
   dot field (fills the space between), and an animated texture strip that
   spans the two rightmost columns and bleeds to the frame line. */

.section-label {
  --dots-offset: 0px;                      /* set by site.js for the parallax */
  display: flex; align-items: stretch;
  height: var(--label-bar-height);
  padding-left: var(--section-pad-x);
  background: var(--color-light-gray);
  border-block: var(--line-width) solid var(--color-line);
  margin-top: calc(-1 * var(--line-width));   /* adjoining lines collapse into one */
  position: relative; z-index: 1;             /* the top line paints over the section above (e.g. a hero image) */
  overflow: hidden;
}

.section-label__text {
  display: flex; align-items: center; gap: 10px; flex: none;
  margin: 0;
  text-transform: uppercase;
}
.section-label__text::before {
  content: ""; width: 10px; height: 10px; flex: none;
  background: var(--color-green);
}

.section-label__dots {
  flex: 1; min-width: 0;
  margin-inline: var(--space-40);
  background-image: url("../assets/patterns/dot-tile.svg");
  background-size: 16.3684px 15.3333px;
  background-repeat: repeat;
  background-position: 0 calc(4px + var(--dots-offset));
}

.section-label__texture {
  flex: none;
  width: var(--label-texture-width);
}

/* Texture width: the two rightmost of 12 columns plus the 20px bleed on desktop.
   Tablet and mobile values are provisional. */
.section-label { --label-texture-width: 25%; }
@media (min-width: 901px) {
  .section-label {
    --label-texture-width: calc((100% - var(--section-pad-x) - 11 * var(--gutter)) / 12 * 2 + var(--gutter) + var(--section-pad-x));
  }
}
@media (max-width: 390px) {
  .section-label__dots { margin-inline: var(--space-24); }
}


/* ---------- Footer ----------
   Black, running the full screen width; its content stays between the frame
   lines. The logo mark sits centered behind the text in Smoke at 10%
   opacity. Text is H6 in Green (7.8:1 contrast on black).
   From 811px: contact on the left, tagline centered, links on the right
   (stacked), copyright centered at the bottom. Below that, everything
   stacks and is centered, and the links sit side by side on one line. */

.site-footer {
  background: var(--color-black);
  color: var(--color-green);
}

.site-footer__inner {
  position: relative;
  display: grid; gap: var(--space-40);
  justify-items: center; text-align: center;
  padding: var(--space-60) var(--section-pad-x) var(--space-20);
  line-height: 1.5;
}
.site-footer__inner > * { position: relative; }   /* text above the mark */
.site-footer p, .site-footer ul { margin: 0; }

/* Logo mark: site/assets/logos/logo-mark.svg used as a mask, so it takes the
   color set here without a separate file. */
.site-footer__inner > .site-footer__mark {
  position: absolute; inset: 0; margin: auto;
  width: min(1083px, 90%); height: auto; aspect-ratio: 2400 / 720;
  background: rgb(249 249 249 / 0.1);               /* Smoke at 10% */
  -webkit-mask: url("../assets/logos/logo-mark.svg") center / contain no-repeat;
          mask: url("../assets/logos/logo-mark.svg") center / contain no-repeat;
}

.site-footer__contact { font-style: normal; }
.site-footer__name { text-transform: uppercase; }
.site-footer a { color: inherit; text-underline-offset: 3px; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-16) var(--space-24); padding: 0; list-style: none; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__copyright { padding-top: var(--space-20); }

@media (min-width: 811px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 360px;
  }
  .site-footer__inner { justify-items: stretch; text-align: left; }
  .site-footer__tagline { text-align: center; }
  .site-footer__links { flex-direction: column; gap: var(--space-20); justify-self: end; text-align: right; }
  .site-footer__copyright { grid-column: 1 / -1; align-self: end; text-align: center; padding-top: 0; }
}

@media (max-width: 599px) {
  .site-footer__inner { width: 100%; }        /* no frame lines below 600px */
}