* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  /* dvh (dynamic viewport height) tracks the actually-visible area on
     mobile/tablet Safari, where 100vh is the layout viewport as if the
     address bar/toolbar were hidden - that mismatch is what made the page
     taller than the screen and scrollable. vh is kept first as a fallback
     for browsers that don't support dvh. */
  height: 100vh;
  height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #1a1a1a;
  background: #fff;
}

#app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

.panel {
  position: relative;
}

/* Left panel: title + menu */
#menu-panel {
  flex: 0 0 364px;
  padding: 40px 32px;
  border-right: 1px solid #eee;
  overflow-y: auto;
}

#menu-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

#site-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 40px;
}

/* Collapse toggle only exists on small touch devices (hover: none and
   max-width: 720px) - see the @media block below. On mouse-driven layouts
   and large touch devices it stays hidden and inert. */
#menu-toggle-btn {
  display: none;
  flex: none;
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: #1a1a1a;
  cursor: pointer;
}

#site-title-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Only shown on small touch, as the close control for the full-screen
   slide-in menu overlay - see the @media block below. */
#mobile-menu-close-btn {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #1a1a1a;
}

/* Scoped to real hover-capable devices only - on touch, :hover sticks after
   a tap instead of clearing, which left the title looking permanently grey. */
@media (hover: hover) {
  #site-title-link:hover {
    color: #888;
  }
}

#menu-item-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 24px 0;
}

#menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-list li {
  margin-bottom: 14px;
}

#menu-list button {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.95rem;
  color: #1a1a1a;
  cursor: pointer;
  letter-spacing: 0.02em;
}

#menu-list button:hover,
#menu-list button.active {
  color: #888;
}

/* #menu-description reuses .markdown but sits inside #menu-panel, which
   already supplies its own padding - .markdown's padding/max-width would
   otherwise needlessly narrow it further. */
/* Only ever shown on non-touch/large-touch ("wide screen") - small touch
   uses #image-list-description instead, so no media scoping is needed. */
#menu-description {
  max-width: none;
  padding: 0;
  font-size: calc(1rem - 1pt);
}

#site-copyright {
  margin-top: 12rem;
  font-size: 0.75rem;
  color: #999;
}

/* Right panel: image / information */
#image-panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

#close-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #1a1a1a;
}

#close-btn:hover {
  background: #fff;
}

#image-stage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  /* Let JS claim horizontal swipes for image navigation while still
     allowing vertical scrolling (needed on the stacked mobile layout). */
  touch-action: pan-y;
}

/* flex-grow: 0 keeps the image at its own natural/max size (never stretched
   to fill leftover space, which would leave a gap between the visible
   picture and the caption below it). flex-shrink: 1 + min-height: 0 only
   kicks in when the image's natural size plus the caption's height would
   together overflow #image-stage - it shrinks just the image, so the
   caption (flex-shrink: 0 below) always stays fully visible instead of
   being pushed off the bottom. */
#image-el {
  flex: 0 1 auto;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

#image-caption {
  flex: none;
  margin-top: 16px;
  text-align: center;
  max-width: 640px;
}

#image-caption-title {
  font-weight: 600;
  margin-bottom: 4px;
}

#image-caption-description {
  color: #555;
  font-size: 0.9rem;
}

/* Home state: static HomePage.jpg with no click/arrow-key navigation -
   shown before anything has been selected. On small touch, the copyright
   line renders below the image (see #home-copyright); it stays hidden on
   non-touch/large-touch, where the copyright already shows in the Menu
   panel instead. */
#home-stage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

#home-image {
  flex: 0 1 auto;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

#home-copyright {
  flex: none;
  margin-top: 16px;
  font-size: 0.75rem;
  color: #999;
  text-align: center;
}

/* Tap-zone hints: replace the desktop hover cursor cue on touch devices,
   which have no hover state to show w-resize/e-resize. Purely decorative -
   pointer-events: none so taps pass straight through to the click handler
   on #image-stage underneath. */
.tap-hint {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: #1a1a1a;
  font-size: 1.4rem;
  line-height: 1;
  pointer-events: none;
  z-index: 5;
}

.tap-hint-prev {
  left: 12px;
}

.tap-hint-next {
  right: 12px;
}

/* A set with only one image has nothing to navigate to. */
.single-image .tap-hint {
  display: none !important;
}

/* Small touch devices (phones, at or below the 720px stacking breakpoint)
   get the drop-down-only menu and a vertically scrollable image list instead
   of the desktop's single image + arrow-key/click/swipe navigation - there's
   no single image view here to hint tap zones on, so no tap-hint arrows
   (see the large-touch @media block below for those). Large touch devices
   (tablets, touchscreen laptops) above the breakpoint fall through to the
   plain desktop styling. */
@media (hover: none) and (max-width: 720px) {
  #menu-toggle-btn {
    display: block;
  }

  #menu-panel.collapsed #menu-panel-body {
    display: none;
  }

  /* No "closed" state to return to on touch - the Menu drop-down is always
     available and never replaces the currently displayed set/info page. */
  #close-btn {
    display: none !important;
  }

  /* Open menu: a full-screen overlay that slides in from the right and
     replaces everything on display, rather than an inline drop-down. Its own
     X (below) closes it, revealing whatever was on display before. */
  #menu-panel:not(.collapsed) #menu-panel-body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    background: #fff;
    overflow-y: auto;
    padding: 0 32px 32px;
    animation: mobile-menu-slide-in 0.25s ease;
  }

  #mobile-menu-close-btn {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
  }

  /* Menu item title + description sit in their own framed, shaded block
     above the image list, with a small gap before the first image. */
  #image-list-header {
    background: #f2f2f2;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
  }

  /* Per-image captions: title is 2pt smaller than the desktop equivalent and
     grey; description is 3pt smaller. */
  .image-list-caption-title {
    font-size: calc(1rem - 2pt);
    color: #666;
  }

  .image-list-caption-description {
    font-size: calc(1rem - 3pt);
  }

  /* Touch drop-down menu list: centered grey text on a light grey
     background. Selection isn't indicated, so plain colour is enough. */
  #menu-list {
    text-align: center;
    background: #f2f2f2;
    border-radius: 6px;
    padding: 12px 8px;
  }

  #menu-list button {
    color: #666;
  }

  /* Home state: Title/Menu stay as normal, with HomePage.jpg starting right
     at the top of the image panel (no gap, no separate "boxed panel" look)
     and filling the screen's width, followed by the copyright message.
     Scrolls if the image is tall enough to need it, rather than being
     height-capped. */
  #home-stage {
    justify-content: flex-start;
    padding: 0 16px 24px;
  }

  #home-image {
    width: 100%;
    height: auto;
  }

  #home-copyright {
    margin-top: 16px;
  }

  /* No visible dividing line under the header while the Home state is
     showing - the image should read as starting right where the (now
     borderless) header ends, not inside a distinct panel below it. */
  #menu-panel.home {
    border-bottom: none;
  }

  /* #image-panel's default (desktop) alignment vertically centers whichever
     child is on display - fine for a single current image, but it left the
     home image and Information text floating mid-panel instead of starting
     at the top. Top-align instead; #image-list already fills the full
     height itself, so this doesn't affect it. */
  #image-panel {
    align-items: flex-start;
  }

  /* #info-content and #info-copyright are wrapped in #info-stage (mirroring
     #home-stage) so they stack vertically as one flex item - without the
     wrapper, #image-panel's row layout put them side by side instead. */
  #info-stage {
    width: 100%;
  }

  /* Collapsed menu panel (Home state, or a set/info page on display) has no
     visible body - drop its bottom padding so whatever follows (the set's
     title, an Information page, or the home image) sits close under the
     header instead of leaving a large empty gap. */
  #menu-panel.collapsed {
    padding-bottom: 8px;
  }
}

@keyframes mobile-menu-slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Large touch devices (tablets, touchscreen laptops above the 720px
   breakpoint) otherwise behave exactly like a mouse-driven PC, but get
   slightly smaller image name/description text than the PC default, and
   show the tap-hint arrows in place of the PC's hover cursor cue (there's
   no hover state on touch to show w-resize/e-resize with). */
@media (hover: none) and (min-width: 721px) {
  #image-caption-title {
    font-size: calc(1rem - 2pt);
  }

  #image-caption-description {
    font-size: calc(0.9rem - 2pt);
  }

  .tap-hint {
    display: flex;
  }
}

#image-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 8px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#image-list-header {
  align-self: flex-start;
  width: 100%;
}

#image-list-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}

#image-list-description {
  line-height: 1.6;
  font-size: calc(1rem - 2pt);
}

/* No extra space between the description and the first image - only the
   description's own text (paragraph margins) separates them. */
#image-list-description > :first-child {
  margin-top: 0;
}

#image-list-description > :last-child {
  margin-bottom: 0;
}

.image-list-item {
  margin-bottom: 40px;
  text-align: center;
}

.image-list-item:last-of-type {
  margin-bottom: 0;
}

.image-list-img {
  width: 100%;
  height: auto;
  user-select: none;
}

.image-list-caption {
  margin-top: 16px;
}

.image-list-caption-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.image-list-caption-description {
  color: #555;
}

#image-list-copyright {
  margin-top: 40px;
  font-size: 0.75rem;
  color: #999;
}

/* Small-touch-only: shown after an Information page's text (see app.js) so
   the copyright follows the content instead of preceding it. */
#info-copyright {
  padding: 0 40px 40px;
  font-size: 0.75rem;
  color: #999;
}

.markdown {
  max-width: 640px;
  padding: 40px;
  line-height: 1.6;
}

/* Base/small-touch size - matches #image-list-description's
   calc(1rem - 2pt). Wide screen (non-touch/large-touch) is 1pt bigger and
   top-left aligned instead of centered - see the media block below. */
#info-content {
  font-size: calc(1rem - 2pt);
}

/* Wide screen only (non-touch, or large touch above 720px) - Information
   page content sits top-left in the panel, inset by ten character
   widths/heights, instead of centered like the small-touch layout. */
@media (hover: hover), (hover: none) and (min-width: 721px) {
  #info-stage {
    align-self: flex-start;
    margin-right: auto;
  }

  #info-content {
    font-size: calc(1rem - 1pt);
    padding-top: 10em;
    padding-left: 10ch;
  }
}

/* Contact form (content/Menu06/MenuDescription.md) - submission handling is
   in app.js. */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  max-width: 420px;
}

.contact-honeypot {
  display: none;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-field label {
  font-size: 0.85rem;
  color: #555;
}

.contact-field input,
.contact-field textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #1a1a1a;
  background: #fff;
}

.contact-field textarea {
  resize: vertical;
}

#contact-form button {
  align-self: flex-start;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  background: #1a1a1a;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

#contact-form button:hover {
  background: #333;
}

#contact-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

#contact-form-status {
  font-size: 0.85rem;
  min-height: 1.2em;
}

#contact-form-status.success {
  color: #2a7a2a;
}

#contact-form-status.error {
  color: #b3261e;
}

.hidden {
  display: none !important;
}

/* Responsive: stack panels on narrow / mobile viewports.
   Provisional layout only - mobile navigation is still "to be discussed" in the spec. */
@media (max-width: 720px) {
  #app {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  #menu-panel {
    flex: none;
    border-right: none;
    border-bottom: 1px solid #eee;
  }

  #image-panel {
    min-height: 60vh;
  }

  #image-el {
    max-height: 60vh;
  }
}