/*
  Shared site stylesheet
  ----------------------
  This file is used by both sfphotography and seeingsanfrancisco.

  Organization:
  1. Design settings and browser defaults
  2. Shared header/navigation
  3. Shared image behavior
  4. Home and gallery-viewer layout
  5. Text pages
  6. Gallery image lists, captions, and viewer controls
  7. Footer/top link
  8. Motion preferences
  9. Shared touch layout
  10. Tablet touch layout
  11. iPhone landscape layout
  12. Desktop pointer layout

  The most important rule of thumb is that each physical thing should be
  controlled in one place. For example, image border/reveal behavior is under
  "Shared image behavior"; page spacing is under "Home and gallery-viewer
  layout"; gallery controls are under "Gallery viewer controls".

  Values near the top are intended as user-editable settings. Rules farther
  down should usually describe structure rather than act as tuning surfaces.

  JavaScript dependencies:
  - page.html adds .is-loaded to .home-image and .gallery-image.
  - page.html toggles .site-nav.is-open when the hamburger is clicked.
  - page.html toggles body.mobile-menu-open so Home/gallery images hide while
    the menu is open.
  - page.html toggles .is-open on .nav-dropdown and .submenu-dropdown for
    click/tap menu behavior.
  - page.html toggles .is-active on the current gallery-list item.
*/

/*
--------------------------------------------
1. Design settings and browser defaults
--------------------------------------------
*/

:root {
  /* Site colors supplied by cfg.yaml/build.py. */
  --page-background: #c2c2c2;
  --text-color: #111111;
  --muted-text: #333333;

  /*
    Image display settings:
    --image-border-width and --image-border-color come from cfg.yaml.
  */
  --home-image-max-width: 980px;
  --image-border-color: #1a1a1a;
  --image-border-width: 4px;

  /*
    Legacy/default viewer spacing used before a responsive zone override
    applies. v5 phone/tablet/desktop viewer layouts override Home/gallery
    spacing with --touch-* or --desktop-* zone variables farther below.
  */
  --viewer-side-padding: 24px;
  --viewer-bottom-padding: 62px;
  --viewer-mobile-side-padding: 12px;
  --viewer-mobile-bottom-padding: 58px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-background);
  color: var(--text-color);
  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/*
--------------------------------------------
2. Shared header/navigation
--------------------------------------------
*/

.site-header {
  padding: 22px 24px 28px;
  text-align: center;
}

.site-title {
  margin: 0 0 18px;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.nav-link,
.nav-separator {
  font-size: 15px;
}

.nav-link {
  display: inline-block;
}

.nav-dropdown,
.submenu-dropdown {
  position: relative;
}

.dropdown-button,
.submenu-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}

.dropdown-button {
  padding: 0;
}

.submenu-button {
  width: 100%;
  text-align: left;
}

.dropdown-list,
.submenu-list {
  display: none;
  position: absolute;
  min-width: 120px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--page-background);
  text-align: left;
  box-shadow: 0 6px 14px rgb(0 0 0 / 18%);
  z-index: 10;
}

.dropdown-list {
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

.submenu-list {
  left: 100%;
  top: -8px;
}

.nav-dropdown:hover > .dropdown-list,
.nav-dropdown:focus-within > .dropdown-list,
.submenu-dropdown:hover > .submenu-list,
.submenu-dropdown:focus-within > .submenu-list {
  display: block;
}

.dropdown-link {
  display: block;
  padding: 5px 14px;
  white-space: nowrap;
  font-size: 15px;
}

/*
--------------------------------------------
3. Shared image behavior
--------------------------------------------
*/

.home-image,
.gallery-image {
  display: block;
  height: auto;
  border: var(--image-border-width) solid transparent;
  box-shadow: inset 0 0 0 var(--image-border-width) transparent;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.home-image.is-loaded,
.gallery-image.is-loaded {
  border-color: var(--image-border-color);
  box-shadow: inset 0 0 0 var(--image-border-width) var(--image-border-color);
  opacity: 1;
}

.home-image {
  width: min(100%, var(--home-image-max-width));
}

.gallery-image {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
}

/*
--------------------------------------------
4. Home and gallery-viewer layout
--------------------------------------------
*/

.home-body,
.gallery-viewer-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.gallery-viewer-body {
  overflow: hidden;
}

/*
  This shared rule aligns the Home image and gallery-viewer image region.
  The header padding below controls space between title/navigation and image.
*/
.home-body .site-header,
.gallery-viewer-body .site-header {
  flex: 0 0 auto;
  padding-bottom: 42px;
}

.home-body .home-main,
.gallery-viewer-body .gallery-main {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 var(--viewer-side-padding) var(--viewer-bottom-padding);
}

.gallery-viewer-body .gallery-main {
  touch-action: none;
}

/*
--------------------------------------------
5. Text pages
--------------------------------------------
*/

.text-page-body {
  background: #f1f1f1;
}

.text-page-main {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 8px 24px 70px;
}

.text-page-content {
  font-size: 17px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.text-page-content h2 {
  margin: 0 0 28px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
}

.text-page-content p {
  margin: 0 0 22px;
}

.text-page-content a {
  text-decoration: underline;
}

.text-page-content blockquote {
  margin: 0 0 22px 32px;
  font-size: 17px;
}

.text-page-content hr {
  width: 38px;
  margin: 34px auto;
  border: 0;
  border-top: 1px solid #777777;
}

.text-page-gallery {
  margin-top: 44px;
}

/*
--------------------------------------------
6. Gallery image lists, captions, and viewer controls
--------------------------------------------
*/

/* Gallery pages and text-page galleries share this base list layout. */

.gallery-main {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 0 24px 70px;
}

.gallery-title {
  margin: 0 0 28px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
}

.gallery-list {
  display: grid;
  gap: 75px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Standalone gallery viewer turns the list into one active slide at a time. */

.gallery-viewer-body .gallery-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gallery-viewer-body .gallery-list {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-viewer-body .gallery-list > li {
  display: none;
  width: 100%;
  height: 100%;
}

.gallery-viewer-body .gallery-list > li.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-viewer-body .gallery-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: default;
}

.gallery-viewer-body .gallery-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gallery-viewer-body .image-caption,
.gallery-viewer-body .site-footer {
  display: none;
}

/* Gallery figures and hover/tap captions. */

.gallery-figure {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  cursor: pointer;
}

.image-caption {
  position: absolute;
  right: calc(var(--image-border-width) + 10px);
  bottom: calc(var(--image-border-width) + 10px);
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 6px 10px;
  background: rgb(34 34 34 / 88%);
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.gallery-figure:hover .image-caption,
.gallery-figure.is-caption-visible .image-caption {
  opacity: 1;
}

/* Gallery viewer controls. Responsive sections below reposition this row. */

.gallery-controls {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 9px;
  max-width: calc(100vw - 44px);
  color: #000000;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}

.gallery-controls-status {
  flex: 0 0 100%;
  margin-right: 0;
  white-space: nowrap;
}

.gallery-controls-title {
  display: inline-block;
  white-space: nowrap;
}

.gallery-controls-buttons {
  display: flex;
  gap: 7px;
}

.gallery-controls-button {
  min-width: 32px;
  min-height: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  padding: 1px 8px 2px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.1);
  color: #111111;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  line-height: 1.2;
}

.gallery-controls-button:disabled {
  color: #777777;
  cursor: default;
}

/*
--------------------------------------------
7. Footer/top link
--------------------------------------------
*/

.site-footer {
  padding: 18px 64px 24px;
  color: var(--muted-text);
  font-size: 15px;
}

.site-footer-title {
  display: none;
}

.top-link {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 20;
  color: #000000;
  font-size: 14px;
  line-height: 1.2;
}

.top-link a,
.top-link a:hover,
.top-link a:focus {
  text-decoration: none;
}

.text-page-body .top-link {
  position: static;
  margin: 0 auto 24px;
  text-align: center;
}

/*
--------------------------------------------
8. Motion preferences
--------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
  .home-image,
  .gallery-image,
  .image-caption {
    transition: none;
  }
}

/*
--------------------------------------------
9. Shared touch layout
--------------------------------------------
This is the base v5 touch model. It covers iPhone portrait and supplies the
common hamburger/menu/image-zone/control-row mechanics that tablet and
phone-landscape overrides adjust below.

Depends on page.html JavaScript for:
- .site-nav.is-open
- body.mobile-menu-open
- .nav-dropdown.is-open and .submenu-dropdown.is-open
*/

@media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  :root {
    /*
      Zone variables:
      header zone + image zone + controls zone = full visible viewport.
      The image zone is computed later with 100dvh minus the two reserved zones.
    */
    --touch-header-zone: 9dvh;
    --touch-gallery-header-zone: 7dvh;
    --touch-controls-zone: 12dvh;
    --touch-side-zone: clamp(12px, 4vw, 28px);
    --touch-controls-bottom: 2dvh;
    --touch-title-size: 16px;
    --touch-nav-size: 14px;
    --touch-controls-size: 13px;
    --touch-controls-title-size: 15px;
    --touch-button-size: 17px;
    --touch-button-min-width: 24px;
    --touch-button-min-height: 25px;
  }

  .home-body,
  .gallery-viewer-body {
    height: 100dvh;
  }

  .site-header {
    padding: 12px 12px 14px;
    text-align: center;
    position: relative;
  }

  .home-body .site-header,
  .gallery-viewer-body .site-header {
    flex: 0 0 var(--touch-header-zone);
    height: var(--touch-header-zone);
    padding-bottom: 0;
  }

  .site-title {
    margin-bottom: 0;
    padding: 0 44px;
    font-size: var(--touch-title-size);
  }

  .mobile-menu-button {
    position: absolute;
    left: 12px;
    top: 11px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 28px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }

  .mobile-menu-line {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: #111111;
  }

  .site-nav {
    display: none;
    width: max-content;
    max-width: calc(100vw - 24px);
    margin: 42px 0 0;
    text-align: left;
  }

  .site-nav.is-open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
  }

  .nav-link,
  .nav-separator {
    font-size: var(--touch-nav-size);
  }

  .nav-separator {
    display: none;
  }

  .dropdown-list {
    position: static;
    min-width: 0;
    width: auto;
    max-width: none;
    margin-top: 7px;
    transform: none;
    text-align: left;
    box-shadow: none;
  }

  .submenu-list {
    position: absolute;
    left: 100%;
    top: -86px;
    min-width: 0;
    width: max-content;
    max-width: none;
    max-height: calc(100vh - 34px);
    overflow-y: auto;
    margin-top: 0;
    text-align: left;
    box-shadow: 0 6px 14px rgb(0 0 0 / 18%);
  }

  .nav-dropdown.is-open > .dropdown-list,
  .submenu-dropdown.is-open > .submenu-list {
    display: block;
  }

  .nav-dropdown:not(.is-open) > .dropdown-list,
  .submenu-dropdown:not(.is-open) > .submenu-list {
    display: none;
  }

  .dropdown-link,
  .submenu-button {
    text-align: left;
  }

  .home-body.mobile-menu-open .home-main,
  .gallery-viewer-body.mobile-menu-open .gallery-main {
    visibility: hidden;
  }

  .gallery-main {
    padding-left: 0;
    padding-right: 0;
  }

  .home-body .home-main,
  .gallery-viewer-body .gallery-main {
    flex: 0 0 calc(100dvh - var(--touch-header-zone) - var(--touch-controls-zone));
    height: calc(100dvh - var(--touch-header-zone) - var(--touch-controls-zone));
    align-items: center;
    justify-content: center;
    padding: 0 var(--touch-side-zone);
  }

  .home-image,
  .gallery-viewer-body .gallery-image {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .gallery-controls {
    left: auto;
    right: 14px;
    bottom: var(--touch-controls-bottom);
    transform: none;
    display: flex;
    align-items: center;
    width: calc(100vw - 28px);
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: calc(100vw - 28px);
    font-size: var(--touch-controls-size);
    text-align: right;
  }

  .gallery-controls-status {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
    text-align: left;
  }

  .gallery-controls-title {
    display: none;
  }

  .gallery-controls-buttons {
    display: flex;
    gap: 7px;
  }

  .gallery-controls-button {
    min-width: var(--touch-button-min-width);
    min-height: var(--touch-button-min-height);
    padding-left: 5px;
    padding-right: 5px;
    font-size: var(--touch-button-size);
  }

  .site-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .top-link {
    right: 14px;
    bottom: 14px;
  }
}

/*
--------------------------------------------
10. Tablet touch layout
--------------------------------------------
Tablet touch layouts inherit the shared touch mechanics and opt into the v5
three-column bottom row:

  counter ~ gallery id     site title     navigation buttons

Home uses a two-column document footer:

  copyright                site title
*/

@media (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1366px) {
  .site-header {
    padding: 18px 22px 18px;
  }

  .site-title {
    padding: 0 70px;
  }

  .mobile-menu-button {
    left: 22px;
    top: 17px;
    gap: 6px;
    width: 44px;
    height: 38px;
  }

  .mobile-menu-line {
    width: 30px;
    height: 3px;
  }

  .site-nav {
    max-width: calc(100vw - 44px);
    margin-top: 58px;
  }

  .nav-list {
    gap: 12px;
  }

  .dropdown-link {
    padding: 7px 18px;
  }

  .submenu-list {
    top: -120px;
    max-height: calc(100dvh - 44px);
  }

  .text-page-main {
    max-width: 880px;
  }

  .text-page-content,
  .text-page-content blockquote {
    font-size: 20px;
  }

  .text-page-content h2 {
    font-size: 22px;
  }

  .gallery-controls {
    right: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: calc(100vw - 48px);
    justify-content: stretch;
    max-width: calc(100vw - 48px);
    gap: 12px;
    text-align: center;
  }

  .gallery-controls-status {
    grid-column: 1;
    justify-self: start;
    margin-right: 0;
    text-align: left;
  }

  .gallery-controls-title {
    display: inline-block;
    grid-column: 2;
    justify-self: center;
    font-size: var(--touch-controls-title-size);
  }

  .gallery-controls-buttons {
    grid-column: 3;
    justify-self: end;
  }

  .gallery-viewer-body .site-header {
    flex-basis: var(--touch-gallery-header-zone);
    height: var(--touch-gallery-header-zone);
  }

  .home-body .site-header {
    flex-basis: var(--touch-gallery-header-zone);
    height: var(--touch-gallery-header-zone);
  }

  .home-body .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .home-body .site-footer {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: var(--touch-controls-bottom);
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    padding: 0;
    font-size: var(--touch-controls-title-size);
    line-height: 1.2;
  }

  .home-body .site-footer-copy {
    text-align: left;
  }

  .home-body .site-footer-title {
    display: inline;
    text-align: right;
  }

  .gallery-viewer-body .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .gallery-controls-button {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Tablet portrait values. Tuned against an 8.3-inch iPad Mini. */

@media (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1366px) and (orientation: portrait) {
  :root {
    --touch-header-zone: 10dvh;
    --touch-gallery-header-zone: 6dvh;
    --touch-controls-zone: 10dvh;
    --touch-side-zone: clamp(32px, 6vw, 76px);
    --touch-controls-bottom: 2.5dvh;
    --touch-title-size: 25px;
    --touch-nav-size: 20px;
    --touch-controls-size: 18px;
    --touch-controls-title-size: 20px;
    --touch-button-size: 18px;
    --touch-button-min-width: 36px;
    --touch-button-min-height: 34px;
  }

  .site-header {
    padding-top: 24px;
  }
}

/* Tablet landscape values. Tuned against a 12.9-inch iPad Pro. */

@media (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1366px) and (orientation: landscape) {
  :root {
    --touch-header-zone: 8dvh;
    --touch-gallery-header-zone: 5dvh;
    --touch-controls-zone: 10dvh;
    --touch-side-zone: clamp(40px, 5vw, 86px);
    --touch-controls-bottom: 3dvh;
    --touch-title-size: 25px;
    --touch-nav-size: 20px;
    --touch-controls-size: 18px;
    --touch-controls-title-size: 20px;
    --touch-button-size: 18px;
    --touch-button-min-width: 36px;
    --touch-button-min-height: 34px;
  }
}

/*
--------------------------------------------
11. iPhone landscape layout
--------------------------------------------
Landscape phones have tablet-like width but phone-like height. This override
comes after tablet landscape so short iPhones do not inherit tablet-scale
controls or spacing.
*/

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  :root {
    --touch-header-zone: 9dvh;
    --touch-gallery-header-zone: 7dvh;
    --touch-controls-zone: 13dvh;
    --touch-side-zone: clamp(12px, 4vw, 28px);
    --touch-controls-bottom: 2.5dvh;
    --touch-title-size: 16px;
    --touch-nav-size: 14px;
    --touch-controls-size: 14px;
    --touch-controls-title-size: 14px;
    --touch-button-size: 18px;
    --touch-button-min-width: 24px;
    --touch-button-min-height: 25px;
  }

  .site-header {
    padding: 12px 12px 14px;
  }

  .mobile-menu-button {
    left: 12px;
    top: 11px;
    gap: 4px;
    width: 32px;
    height: 28px;
  }

  .mobile-menu-line {
    width: 22px;
    height: 2px;
  }

  .site-nav {
    max-width: calc(100vw - 24px);
    margin-top: 42px;
  }

  .gallery-controls {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    gap: 8px;
  }

  .gallery-controls-title {
    font-size: var(--touch-controls-title-size);
  }

  .gallery-controls-button {
    min-width: var(--touch-button-min-width);
    min-height: var(--touch-button-min-height);
    padding-left: 5px;
    padding-right: 5px;
    font-size: var(--touch-button-size);
  }
}

/*
--------------------------------------------
12. Desktop pointer layout
--------------------------------------------
Desktop uses the same v5 horizontal viewer idea as the 12.9-inch iPad:
hamburger navigation, centered image zone, and a bottom document/control row.

Depends on page.html JavaScript for hamburger toggling and menu item toggling.
*/

@media (hover: hover) and (pointer: fine) {
  :root {
    --desktop-header-zone: 8dvh;
    --desktop-gallery-header-zone: 5dvh;
    --desktop-controls-zone: 10dvh;
    --desktop-side-zone: clamp(40px, 5vw, 86px);
    --desktop-controls-bottom: 3dvh;
    --desktop-nav-size: 20px;
    --desktop-controls-size: 18px;
    --desktop-controls-title-size: 20px;
    --desktop-button-size: 18px;
  }

  .home-body,
  .gallery-viewer-body {
    height: 100dvh;
  }

  .site-header {
    padding: 18px 22px 18px;
    text-align: center;
    position: relative;
  }

  .home-body .site-header,
  .gallery-viewer-body .site-header {
    flex: 0 0 var(--desktop-header-zone);
    height: var(--desktop-header-zone);
    padding-bottom: 0;
  }

  .home-body .site-header,
  .gallery-viewer-body .site-header {
    flex-basis: var(--desktop-gallery-header-zone);
    height: var(--desktop-gallery-header-zone);
  }

  .mobile-menu-button {
    position: absolute;
    left: 22px;
    top: 17px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 38px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }

  .mobile-menu-line {
    display: block;
    width: 30px;
    height: 3px;
    margin: 0 auto;
    background: #111111;
  }

  .site-nav {
    display: none;
    width: max-content;
    max-width: calc(100vw - 44px);
    margin: 58px 0 0;
    text-align: left;
  }

  .site-nav.is-open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }

  .nav-link,
  .nav-separator,
  .dropdown-link,
  .submenu-button {
    font-size: var(--desktop-nav-size);
  }

  .nav-separator {
    display: none;
  }

  .dropdown-list {
    position: static;
    min-width: 0;
    width: auto;
    max-width: none;
    margin-top: 7px;
    transform: none;
    text-align: left;
    box-shadow: none;
  }

  .submenu-list {
    position: absolute;
    left: 100%;
    top: -120px;
    min-width: 0;
    width: max-content;
    max-width: none;
    max-height: calc(100dvh - 44px);
    overflow-y: auto;
    margin-top: 0;
    text-align: left;
    box-shadow: 0 6px 14px rgb(0 0 0 / 18%);
  }

  .nav-dropdown.is-open > .dropdown-list,
  .submenu-dropdown.is-open > .submenu-list {
    display: block;
  }

  .nav-dropdown:not(.is-open) > .dropdown-list,
  .submenu-dropdown:not(.is-open) > .submenu-list {
    display: none;
  }

  .home-body.mobile-menu-open .home-main,
  .gallery-viewer-body.mobile-menu-open .gallery-main {
    visibility: hidden;
  }

  .home-body .home-main,
  .gallery-viewer-body .gallery-main {
    flex: 0 0 calc(100dvh - var(--desktop-gallery-header-zone) - var(--desktop-controls-zone));
    height: calc(100dvh - var(--desktop-gallery-header-zone) - var(--desktop-controls-zone));
    align-items: center;
    justify-content: center;
    padding: 0 var(--desktop-side-zone);
  }

  .home-image,
  .gallery-viewer-body .gallery-image {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .home-body .site-title,
  .gallery-viewer-body .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .home-body .site-footer {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: var(--desktop-controls-bottom);
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    padding: 0;
    font-size: var(--desktop-controls-title-size);
    line-height: 1.2;
  }

  .home-body .site-footer-copy {
    text-align: left;
  }

  .home-body .site-footer-title {
    display: inline;
    text-align: right;
  }

  .gallery-controls {
    left: 24px;
    right: 24px;
    bottom: var(--desktop-controls-bottom);
    transform: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: auto;
    max-width: none;
    justify-content: stretch;
    gap: 12px;
    font-size: var(--desktop-controls-size);
    text-align: center;
  }

  .gallery-controls-status {
    grid-column: 1;
    justify-self: start;
    margin-right: 0;
    text-align: left;
  }

  .gallery-controls-title {
    display: inline-block;
    grid-column: 2;
    justify-self: center;
    font-size: var(--desktop-controls-title-size);
  }

  .gallery-controls-buttons {
    grid-column: 3;
    justify-self: end;
  }

  .gallery-controls-button {
    min-width: 36px;
    min-height: 34px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: var(--desktop-button-size);
  }
}