body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-rows: auto var(--nav-height) auto var(--footer-height);
  align-content: start;

  background-color: var(--bg-base-color);
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-gradient);
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg-gradient-top), var(--bg-gradient-mid), var(--bg-gradient-mid), var(--bg-gradient-bottom));
  opacity: var(--bg-gradient-opacity);
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-texture);
  pointer-events: none;
  background-image:
    url("textures/texture-09.jpg"),
    url("textures/texture-07.jpg"),
    url("textures/texture-05.jpg"),
    url("textures/texture-03.jpg"),
    url("textures/texture-01.jpg");
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat;
  background-position:
    20% 30%,
    75% 15%,
    50% 80%,
    10% 90%,
    0 0;
  background-size:
    contain,
    contain,
    contain,
    contain,
    300px 345px;
  background-blend-mode: multiply;
  opacity: var(--bg-texture-opacity);
}

.logo {
  width: var(--logo-width);
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  position: relative;
  z-index: var(--z-logo);
  /* 16 drop-shadows offset around a circle (cos/sin ratios per 22.5deg step)
     simulate a solid halo, since drop-shadow has no spread like box-shadow. */
  filter:
    drop-shadow(var(--logo-halo-radius) 0 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * 0.9239) calc(var(--logo-halo-radius) * 0.3827) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * 0.7071) calc(var(--logo-halo-radius) * 0.7071) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * 0.3827) calc(var(--logo-halo-radius) * 0.9239) 0 var(--logo-halo-color))
    drop-shadow(0 var(--logo-halo-radius) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * -0.3827) calc(var(--logo-halo-radius) * 0.9239) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * -0.7071) calc(var(--logo-halo-radius) * 0.7071) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * -0.9239) calc(var(--logo-halo-radius) * 0.3827) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * -1) 0 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * -0.9239) calc(var(--logo-halo-radius) * -0.3827) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * -0.7071) calc(var(--logo-halo-radius) * -0.7071) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * -0.3827) calc(var(--logo-halo-radius) * -0.9239) 0 var(--logo-halo-color))
    drop-shadow(0 calc(var(--logo-halo-radius) * -1) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * 0.3827) calc(var(--logo-halo-radius) * -0.9239) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * 0.7071) calc(var(--logo-halo-radius) * -0.7071) 0 var(--logo-halo-color))
    drop-shadow(calc(var(--logo-halo-radius) * 0.9239) calc(var(--logo-halo-radius) * -0.3827) 0 var(--logo-halo-color));
}

.nav {
  grid-column: 1;
  grid-row: 2;
  height: var(--nav-height);
  background-color: var(--nav-bg-color);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nav-link-gap);
  padding-inline-end: var(--nav-inline-padding-end);
  box-sizing: border-box;
}

.nav a,
.footer-nav a {
  font-family: var(--nav-link-font-family);
  font-size: var(--nav-link-font-size);
	font-weight: var(--nav-link-font-weight);
  letter-spacing: var(--nav-link-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
}

.nav a {
  color: var(--nav-link-color);
}

.footer-nav a {
  color: var(--footer-nav-link-color);
}

.backdrop {
  grid-column: 1;
  grid-row: 3;
  position: relative;
  background-color: var(--backdrop-color);
  z-index: var(--z-backdrop);
}

.content {
  grid-column: 1;
  grid-row: 3;
  padding-block: var(--content-padding);
  box-sizing: border-box;
  min-height: var(--page-portrait-height);
  position: relative;
  z-index: var(--z-content);
}

/* Portrait background lives on the shared .content wrapper — not the
   narrower, margined per-page #id-main box nested inside it — so it
   paints flush to the full grid-row-3 box, nav-to-footer, on every page.
   Padding on .content/.page-content doesn't shrink a background's paint
   area (default background-clip: border-box). */
.content::before {
  content: "";
  position: absolute;
  inset: 0;

  background-repeat: no-repeat;
  background-position: var(--page-portrait-position);
  background-size: auto var(--page-portrait-height);
  background-attachment: fixed;
  opacity: var(--page-portrait-opacity);

  z-index: -1;
}

.intro {
  width: min(var(--intro-max-width), calc(100% - 2 * var(--intro-inline-padding)));
  margin: var(--intro-space-above) auto;
  text-align: center;
  font-family: var(--intro-font-family);
  font-size: var(--intro-font-size);
  line-height: var(--intro-line-height);
  color: var(--intro-color);
}

.intro p {
  margin: 0;
  text-align: justify;
}

.page-content {
  width: 100%;
  box-sizing: border-box;
  margin-block: var(--intro-space-above);
  margin-inline: 0;
  padding-inline-start: var(--page-portrait-inset);
  font-family: var(--page-content-font-family);
  font-size: var(--page-content-font-size);
  line-height: var(--page-content-line-height);
  font-weight: normal;
  text-transform: none;
  color: var(--page-content-color);
  padding-right: 40px;
}

.page-content p {
  margin: 0;
  padding-bottom: 20px;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  font-family: var(--page-content-heading-font-family);
  font-size: var(--page-content-heading-font-size);
}
.page-content h3 {
	font-size: var(--page-content-heading3-font-size);
	font-weight: 400;
}

/* Per-page CSS stubs */
#index-section.content::before {
  background-image: var(--page-portrait-image-index);
}

#about-section.content::before {
  background-image: var(--page-portrait-image-about);
}

#products-section.content::before {
  background-image: var(--page-portrait-image-products);
}

#about-main {
}

#products-main {
}

.footer {
  grid-column: 1;
  grid-row: 4;
  height: var(--footer-height);
  background-color: var(--footer-bg-color);
  position: relative;
  z-index: var(--z-footer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--footer-inline-padding);
  box-sizing: border-box;
}

.footer-copyright {
  margin: 0;
  font-family: var(--nav-link-font-family);
  font-size: var(--footer-copyright-font-size);
  font-weight: normal;
  color: var(--footer-copyright-color);
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);
}

/* ==========================================================================
   Responsive breakpoints
   ==========================================================================
   CSS custom properties cannot be referenced inside an @media (...)
   condition, so breakpoint thresholds can't be tokenized in variables.css
   the way every other visual constant on this site is. Each breakpoint's
   pixel threshold therefore lives as a literal ONCE, on its own @media
   line, right here — nowhere else in the codebase repeats that number.
   Values used *inside* each block stay tokenized in variables.css as
   normal (e.g. --intro-font-size-phone), following the existing
   feature-grouped convention (--intro-*, --nav-*) rather than a new
   breakpoint-keyed group — only the raw threshold has to be a literal.

   All rules for a given breakpoint are consolidated into ONE block below
   (not scattered inline near each selector it overrides), so there is a
   single place to read "everything that changes at this breakpoint."
   This file is desktop-first: base rules above are the default/desktop
   layout, and @media (max-width: ...) blocks below override toward
   smaller viewports. Keep that ordering — narrower breakpoints later in
   source order — as more are added, so cascade order matches reading
   order.

   Breakpoints:
   - phone: max-width: 599px
   ========================================================================== */

@media (max-width: 599px) {
  .nav {
    justify-content: center;
    padding-inline: var(--nav-inline-padding-phone);
  }

  .intro {
    font-size: var(--intro-font-size-phone);
    margin: var(--intro-space-above-phone) auto;
    line-height: var(--intro-line-height-phone);
  }

  .page-content {
    margin-block: var(--intro-space-above-phone);
    padding-inline: var(--page-content-inline-padding-phone);
  }

	.intro p {
		margin: 0;
		text-align: center;
	}

  /* Background lives on .content::before, not .content itself (see base
     rule above) — phone override has to target the pseudo directly. Dim
     it further than desktop's 0.4. */
  .content::before {
    opacity: var(--page-portrait-opacity-phone);
  }

  .page-content h1,
  .page-content h2,
  .page-content h3,
  .page-content h4,
  .page-content h5,
  .page-content h6 {
    font-size: var(--page-content-heading-font-size-phone);
  }

  .footer {
    padding-inline: var(--footer-inline-padding-phone);
  }

  .footer-nav {
    display: none;
  }

  .footer-copyright {
    width: 100%;
  }
}