/* v.css — V volumes page. Minimal, light by default.
   Colours follow the system setting: white becomes black and
   black becomes white when the OS is in dark mode. */

:root{
  color-scheme: light dark;
  --v-bg: #fff;
  --v-fg: #000;
  --v-muted: rgba(0, 0, 0, .55);
  --v-line: rgba(0, 0, 0, .25);
  --v-arrow-hover-bg: #000;
  --v-arrow-hover-fg: #fff;
}

@media (prefers-color-scheme: dark){
  :root{
    --v-bg: #000;
    --v-fg: #fff;
    --v-muted: rgba(255, 255, 255, .6);
    --v-line: rgba(255, 255, 255, .3);
    --v-arrow-hover-bg: #fff;
    --v-arrow-hover-fg: #000;
  }
}

html{
  background: var(--v-bg);
}

body{
  background: var(--v-bg);
  color: var(--v-fg);
}

/* Header sits on a light page, so the brand, nav and language
   toggle flip to the page foreground (black in light mode,
   white in dark mode). The hamburger icon is a white image,
   so it is inverted on the light page. */
header .brand{
  color: var(--v-fg);
}

header .navigation .navigation-items a{
  color: var(--v-fg);
}

header .navigation .navigation-items a:before{
  background: var(--v-fg);
}

header .lang-toggle{
  color: var(--v-fg);
}

@media (max-width: 1040px){
  .menu-btn{
    filter: invert(1);
  }
}

@media (max-width: 1040px) and (prefers-color-scheme: dark){
  .menu-btn,
  header .menu-btn.active{
    filter: none;
  }
}

/* ----- Volumes ----- */

.volumes{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 60px;
  text-align: center;
}

/* The V mark: the black version on a light page, the white
   version on a dark page — the browser picks by system setting.
   The size is set on the img itself in px (not a percentage of
   the <picture>), so it holds in every browser. */
.volumes-mark{
  display: block;
  margin-bottom: 32px;
}

.volumes-mark img{
  display: block;
  height: 72px;
  width: auto;
  margin: 0 auto;
}

.volume-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 36px);
  width: 100%;
}

/* ----- Rotary volumes ----- */
/* Cards sit on a wheel: the current volume is front and centre,
   the neighbours peek out from behind it on either side, tilted.
   On an arrow press the wheel turns one step — the incoming card
   swings up and over in an arc, tilted, while the outgoing card
   sinks down behind on the other side. */

.volume-stage{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
  height: min(58vh, 560px);
}

/* The orbit ring: the path the volumes travel, seen from the
   horizon. Faint, behind the cards. */
.orbit-ring{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76%;
  height: 18%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--v-line);
  border-radius: 50%;
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}

/* Cards are placed by js/volumes.js on the ellipse — position,
   size and depth all come from the card's angle on the orbit,
   so there is no resting transform here to fight the animation. */
.volume-card{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 400px);
  height: 82%;
  margin: 0;
  line-height: 0;
  will-change: transform;
}

.volume-card img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Motion lives in js/volumes.js: one continuous rotation of the
   wheel, eased, driving every card along the ellipse together. */

.volume-title{
  margin-top: 28px;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  font-weight: 300;
  letter-spacing: .04em;
}

.volume-arrow{
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--v-line);
  background: transparent;
  color: var(--v-fg);
  font-size: 1.7rem;
  line-height: 1;
  padding-bottom: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.volume-arrow:hover{
  background: var(--v-arrow-hover-bg);
  color: var(--v-arrow-hover-fg);
  border-color: transparent;
}

.volume-arrow:focus-visible{
  outline: 2px solid var(--v-fg);
  outline-offset: 3px;
}

/* Title fades and lifts slightly on a volume change. */
.volume-title{
  transition: opacity .3s ease, transform .3s ease;
}

.volume-title.is-leaving{
  opacity: 0;
  transform: translateY(6px);
}

/* Lock horizontal scrolling: the wheel's cards travel past the
   stage edges, and without this the page widens and Safari
   re-centres it on every turn. `hidden` on the body alone does
   not hold on iOS — the lock has to be on the root as well, and
   `clip` (unlike `hidden`) creates no scroll container at all,
   so there is nothing to readjust. */
html,
body{
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

/* ----- Small screens: contain the wheel ----- */
/* On a phone the wheel shrinks to fit: a narrower centre card,
   a tighter ellipse, arrows overlaid on the stage edges, and a
   shorter stage so the title stays above the browser chrome. */
@media (max-width: 720px){
  .volumes{
    padding: 96px 16px 48px;
  }

  .volumes-mark{
    margin-bottom: 24px;
  }

  .volumes-mark img{
    height: 56px;
  }

  .volume-row{
    position: relative;
  }

  .volume-stage{
    max-width: none;
    height: min(48vh, 480px);
  }

  .volume-card{
    width: min(64%, 400px);
  }

  .orbit-ring{
    width: 52%;
  }

  /* Arrows sit on the stage edges so they are always tappable. */
  .volume-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--v-bg);
    background: color-mix(in srgb, var(--v-bg) 72%, transparent);
  }

  .volume-arrow.prev{ left: 4px; }
  .volume-arrow.next{ right: 4px; }
}

@media (prefers-reduced-motion: reduce){
  /* js/volumes.js jumps the wheel to its new position instead of
     animating it when reduced motion is set. */
  .volume-title{
    transition: opacity .2s ease;
  }

  .volume-title.is-leaving{
    transform: none;
  }
}