/* Shared geometry for every SPACEVIVOR public page.
   Change these values here; page CSS only controls spacing inside the content area. */
:root {
  --sv-min-width: 280px;
  --sv-header-inset-top: max(60px, env(safe-area-inset-top, 0px));
  --sv-frame-top: var(--sv-header-inset-top);
  --sv-frame-side: max(50px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --sv-frame-bottom: max(55px, env(safe-area-inset-bottom, 0px));
  --sv-logo-offset: 20px;
  --sv-logo-preferred-width: 230px;
  --sv-header-logo-top: 40px;
  --sv-header-logo-shift: 0%;
  --sv-header-menu-top: 27px;
  --sv-content-offset-top: 120px;
  --sv-logo-width: min(var(--sv-logo-preferred-width), calc(max(100vw, var(--sv-min-width)) - var(--sv-content-left) - var(--sv-menu-right) - var(--sv-menu-width) - 20px));
  --sv-menu-offset: 30px;
  --sv-menu-width: 41px;
  --sv-menu-height: 40px;
  --sv-menu-icon-width: 21px;
  --sv-content-left: calc(var(--sv-frame-side) + var(--sv-logo-offset));
  --sv-menu-right: calc(var(--sv-frame-side) + var(--sv-menu-offset));
  --sv-content-right: calc(var(--sv-menu-right) + (var(--sv-menu-width) - var(--sv-menu-icon-width)) / 2);
  --sv-menu-center-right: calc(var(--sv-menu-right) + var(--sv-menu-width) / 2);
  /* Viewport-top photography leaves room for the complete menu button. */
  --sv-about-photo-offset: 30px;
  --sv-photo-menu-gap: 10px;
  --sv-about-controls-space: calc(var(--sv-menu-right) + var(--sv-menu-width) + var(--sv-about-photo-offset) + var(--sv-photo-menu-gap));
  --sv-detail-photo-max-width: 940px;
  --sv-scroll-top-size: 50px;
  --sv-scroll-top-right: calc(var(--sv-menu-center-right) - var(--sv-scroll-top-size) / 2);
  --sv-scroll-top-bottom: calc(var(--sv-frame-bottom) + 16px);
  --sv-detail-info-top: max(var(--sv-content-top), 36dvh);
  --sv-detail-photo-clearance: max(0px, calc(var(--sv-menu-right) + var(--sv-menu-width) + var(--sv-photo-menu-gap) - var(--sv-content-right)));
  /* After the gallery reaches its maximum width, use part of its spare column space on the right. */
  --sv-detail-photo-wide-inset: max(0px, calc((100% - var(--sv-detail-photo-clearance) - var(--sv-detail-photo-max-width)) * .35));
  --sv-content-top: calc(var(--sv-header-inset-top) + var(--sv-content-offset-top));
  --sv-content-bottom: calc(var(--sv-frame-bottom) + 40px);
}

/* The public layout never shrinks below 280px, including fixed overlays.
   Below that width the document can scroll horizontally instead of compressing. */
html { min-width: var(--sv-min-width); }
body.sv-site {
  min-width: var(--sv-min-width);
  overflow-x: clip;
}
.sv-intro,
.sv-nav,
.sv-site::before { min-width: var(--sv-min-width); }

/* Apply once to the page's outer content wrapper. Headers, filters, forms and
   grids then share its edges without their own outer padding or max-width. */
.sv-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow-wrap: anywhere;
  margin-inline: 0;
  padding-left: var(--sv-content-left);
  padding-right: var(--sv-content-right);
}
.sv-page-content {
  padding-top: var(--sv-content-top);
  padding-bottom: var(--sv-content-bottom);
  min-height: 100vh;
  min-height: 100dvh;
}
/* About's viewport-height photo is full bleed; its text uses the same left edge. */
.sv-content-start { padding-left: var(--sv-content-left); }

.sv-site .sv-header-logo,
.sv-nav__top {
  top: calc(var(--sv-header-inset-top) + var(--sv-header-logo-top));
  transform: translateY(var(--sv-header-logo-shift));
  left: var(--sv-content-left);
}
.sv-header-logo__image,
.sv-nav__logo { width: var(--sv-logo-width); }
.sv-menu-toggle.sv-menu-button {
  top: calc(var(--sv-header-inset-top) + var(--sv-header-menu-top));
  left: calc(max(100%, var(--sv-min-width)) - var(--sv-menu-right) - var(--sv-menu-width));
  right: auto;
  width: var(--sv-menu-width);
  height: var(--sv-menu-height);
}
.sv-menu-button span { width: var(--sv-menu-icon-width); }

.sv-frame__line,
.sv-nav::before,
.sv-nav::after { left: var(--sv-frame-side); right: var(--sv-frame-side); }
/* Fixed frame lines use the same minimum canvas as the document. */
.sv-frame__line {
  right: auto;
  width: calc(max(100%, var(--sv-min-width)) - var(--sv-frame-side) * 2);
}
.sv-frame__line--top,
.sv-nav::before { top: var(--sv-frame-top); }
.sv-frame__line--bottom,
.sv-nav::after { bottom: var(--sv-frame-bottom); }
.sv-nav__content {
  position: absolute;
  top: var(--sv-content-top);
  bottom: calc(var(--sv-frame-bottom) + 90px);
  left: var(--sv-content-left);
  right: var(--sv-content-right);
}

/* Content-page bottom lines follow the document, with the same outer insets.
   Home, About and the fullscreen menu keep their viewport frame. */
.sv-site:not(.sv-home):not(.sv-about-page) { padding-bottom: var(--sv-frame-bottom); }
.sv-site:not(.sv-home):not(.sv-about-page) .sv-frame__line--bottom { display: none; }
.sv-site:not(.sv-home):not(.sv-about-page) > .sv-page-content {
  min-height: calc(100vh - var(--sv-frame-bottom) - 1px);
  min-height: calc(100dvh - var(--sv-frame-bottom) - 1px);
  padding-bottom: max(0px, calc(var(--sv-content-bottom) - var(--sv-frame-bottom)));
}
.sv-site:not(.sv-home):not(.sv-about-page)::after {
  content: '';
  display: block;
  height: 1px;
  margin-inline: var(--sv-frame-side);
  background: rgba(50, 48, 45, .25);
  pointer-events: none;
}
.sv-site.sv-menu-open::after { visibility: hidden; }

/* Desktop portfolio photos scroll underneath the fixed viewport frame.
   Mobile keeps the ordinary bottom line after all gallery content. */
@media (min-width: 1001px) {
  .sv-site.sv-portfolio-detail-page:not(.sv-home) { padding-bottom: 0; }
  .sv-site.sv-portfolio-detail-page:not(.sv-home) .sv-frame__line--bottom { display: block; }
  .sv-site.sv-portfolio-detail-page:not(.sv-home)::after { display: none; }
  .sv-site.sv-portfolio-detail-page:not(.sv-home) > .sv-page-content {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: var(--sv-content-bottom);
  }
}

/* Mobile About ends with its contact links and a line in document flow. */
@media (max-width: 1000px) {
  .sv-site.sv-about-page { padding-bottom: max(30px, var(--sv-frame-bottom)); }
  .sv-about-page .sv-frame__line--bottom { display: none; }
  .sv-about-page .sv-page-content {
    min-height: calc(100vh - max(30px, var(--sv-frame-bottom)) - 1px);
    min-height: calc(100dvh - max(30px, var(--sv-frame-bottom)) - 1px);
    padding-bottom: max(0px, calc(var(--sv-content-bottom) - var(--sv-frame-bottom)));
  }
  .sv-site.sv-about-page::after {
    content: '';
    display: block;
    height: 1px;
    margin-inline: var(--sv-frame-side);
    background: rgba(50, 48, 45, .25);
    pointer-events: none;
  }
}

/* Home photography and frame lines stay full bleed; counters share content edges. */
.sv-hero__hud {
  left: var(--sv-frame-side);
  right: var(--sv-frame-side);
  bottom: var(--sv-frame-bottom);
}
.sv-hero__counter {
  padding-left: calc(var(--sv-content-left) - var(--sv-frame-side));
  padding-right: calc(var(--sv-content-right) - var(--sv-frame-side));
}
@media (max-height: 650px) {
  .sv-nav__content { top: calc(var(--sv-header-inset-top) + 85px); bottom: calc(var(--sv-frame-bottom) + 20px); }
}
/* Mobile puts the header row above the top frame line. The page content
   keeps its own inset so moving the line does not push every page down. */
@media (max-width: 1000px) {
  :root {
    --sv-header-inset-top: max(40px, env(safe-area-inset-top, 0px));
    --sv-frame-top: calc(var(--sv-header-inset-top) + var(--sv-menu-height) + 20px);
    --sv-frame-side: max(30px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --sv-frame-bottom: max(35px, env(safe-area-inset-bottom, 0px));
    --sv-logo-preferred-width: 210px;
    --sv-logo-offset: 10px;
    --sv-menu-offset: 10px;
    --sv-header-logo-top: calc(var(--sv-menu-height) / 2);
    --sv-header-logo-shift: -50%;
    --sv-header-menu-top: 0px;
    --sv-content-offset-top: 108px;
    --sv-scroll-top-size: 40px;
    --sv-scroll-top-right: var(--sv-content-right);
    --sv-scroll-top-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  /* Stacked contact and interview forms use the same inset on both sides. */
  :is(.sv-contact-page, .sv-interview-page) > .sv-page-content { --sv-content-right: var(--sv-content-left); }
  .sv-nav__content { bottom: calc(var(--sv-frame-bottom) + 40px); }
}
@media (max-width: 500px) {
  :root {
    --sv-header-inset-top: max(24px, env(safe-area-inset-top, 0px));
    --sv-frame-top: calc(var(--sv-header-inset-top) + var(--sv-menu-height) + 16px);
    --sv-frame-side: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --sv-frame-bottom: max(25px, env(safe-area-inset-bottom, 0px));
    --sv-logo-preferred-width: 180px;
    --sv-logo-offset: 0px;
    --sv-menu-offset: 0px;
    --sv-content-offset-top: 96px;
  }
}
/* Short mobile landscape screens need room between the header and counters. */
@media (max-width: 1000px) and (max-height: 500px) {
  :root {
    --sv-header-inset-top: max(16px, env(safe-area-inset-top, 0px));
    --sv-frame-top: calc(var(--sv-header-inset-top) + var(--sv-menu-height) + 12px);
    --sv-frame-side: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --sv-frame-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    --sv-logo-preferred-width: 180px;
    --sv-logo-offset: 0px;
    --sv-menu-offset: 0px;
    --sv-content-offset-top: 80px;
  }
  .sv-nav__content {
    top: var(--sv-content-top);
  }
  .sv-nav__menu { gap: 10px; }
}

/* Native form controls must be allowed to shrink inside their content column. */
.sv-content :where(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}

/* Text pages scroll beneath a solid header. Desktop full-bleed photography
   remains visible behind its frame; home photography is always full bleed. */
.sv-site:not(.sv-home):not(.sv-about-page):not(.sv-portfolio-detail-page)::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: var(--sv-content-top);
  background: var(--sv-bg);
  z-index: 80;
  pointer-events: none;
}
@media (max-width: 1000px) {
  .sv-about-page::before,
  .sv-portfolio-detail-page::before {
    content: '';
    position: fixed;
    inset: 0 0 auto;
    height: var(--sv-content-top);
    background: var(--sv-bg);
    z-index: 80;
    pointer-events: none;
  }
  .sv-portfolio-detail-page::before {
    height: calc(var(--sv-frame-top) + 1px + 10px);
  }
}
html {
  scroll-padding-top: calc(var(--sv-content-top) + 16px);
  scroll-padding-bottom: var(--sv-content-bottom);
}

/* Mobile page titles use a larger space above than below at every breakpoint. */
@media (max-width: 1000px) {
  :root.sv-titled-page {
    --sv-title-space-before: 64px;
    --sv-title-space-after: 32px;
    --sv-content-top: calc(var(--sv-frame-top) + 1px + var(--sv-title-space-before));
  }
  .sv-site .sv-page-content .sv-page-title {
    font-family: "Tinos", serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: .14em;
  }
}
@media (max-width: 500px) {
  :root.sv-titled-page {
    --sv-title-space-before: 48px;
    --sv-title-space-after: 24px;
  }
}