/* ---------- fonts ---------- */
@font-face {
  font-family: 'DX Gaster';
  src: url('fonts/DxGaster-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #1a1a1a;
  color: #000;
  font-family: 'Gideon Roman', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

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

img { max-width: 100%; display: block; }

/* ---------- stage ---------- */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  container-type: size;
  container-name: stage;
}

/* every page stacks on top, only the active one is visible */
.page {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms ease;
}

.page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------- background ---------- */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Work pages use a zoomed, soft background of the same ceramics shown,
   matching the abstract backdrops in the design. */
#work-2 .bg img {
  transform: scale(1.18);
  transform-origin: 55% 55%;
}
#work-3 .bg img {
  transform: scale(1.28);
  transform-origin: 62% 58%;
}
#work-4 .bg img {
  /* horizontally flipped to match the Figma framing (vessel on the right).
     With a negative scaleX, the x origin must stay ~41–59% to keep the
     frame fully covered, so we bias right within that range. */
  transform: scale(-1.55, 1.55);
  transform-origin: 58% 42%;
}
#work-5 .bg img {
  /* lowered to match the Figma framing (vessel sits lower, airy stems above) */
  transform: scale(1.55) translateY(6%);
  transform-origin: 50% 50%;
}

/* ---------- site header (non-home pages) ---------- */
.site-header {
  position: absolute;
  top: 2.3cqh;
  left: 2.3cqh;
  font-family: 'Matemasie', 'Gideon Roman', sans-serif;
  font-size: 2.4cqh;
  color: #111;
  z-index: 3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* subtle light halo keeps the header legible over busy backgrounds */
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.75), 0 0 2px rgba(255, 255, 255, 0.6);
}

.site-header:hover { color: #5b1a1a; }

/* ---------- book card ---------- */
.book {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(70cqw, 95cqh);
  aspect-ratio: 1870 / 1266;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  z-index: 2;
  container-type: size;
  container-name: book;
  backdrop-filter: blur(2px);
}

.book--single {
  grid-template-columns: 1fr;
  /* Page 3 in the design floats the photo directly on the blurred
     background — no frosted card, just a soft drop shadow. */
  background: transparent;
  border: none;
  backdrop-filter: none;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
}

/* Work pages (2–6 in the design) float their photos directly on the
   blurred background — no frosted card, a small gap, individual shadows. */
#work-1 .book,
#work-3 .book,
#work-4 .book,
#work-5 .book {
  background: transparent;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
  gap: 2.6cqw;
}

#work-1 .book-half--photo,
#work-3 .book-half--photo,
#work-4 .book-half--photo,
#work-5 .book-half--photo {
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

.book-half {
  position: relative;
  overflow: hidden;
}

.book-half--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-half--photo {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

a.book-half--photo {
  cursor: pointer;
  transition: transform 600ms ease, filter 600ms ease;
}

a.book-half--photo:hover img {
  filter: brightness(1.04);
}

/* center photo treatment for book--single */
.book-photo-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.book-photo-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- home page ---------- */
/* Match the Figma crop (node 2:25): zoom the cover slightly and bias up */
#home .book-half--left img {
  transform: scale(1.08);
  transform-origin: 50% 38%;
}

.book--home .home-right {
  position: relative;
  background: transparent;
}

.home-nav {
  position: absolute;
  font-family: 'DX Gaster', 'Gideon Roman', Georgia, serif;
  font-size: 5.2cqh;
  color: #111;
  white-space: nowrap;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 200ms ease, transform 200ms ease;
}

.home-nav:hover {
  color: #5b1a1a;
  transform: translateX(2px);
}

.home-nav--work {
  /* original (1920,432) inside book starting (609,364), book 1870x1266
     within right half (start x=1544, w=935): (376/935, 68/1266) = (40.2%, 5.4%) */
  top: 5%;
  left: 40%;
}

.home-nav--about {
  /* (1911,1487) inside right half: (39.3%, 88.7%) */
  bottom: 5.5%;
  left: 39%;
}

.home-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  margin: 0;
  font-family: 'Matemasie', 'Gideon Roman', cursive;
  font-weight: 400;
  font-size: 8.5cqh;
  line-height: 1.1;
  text-align: center;
  color: #050505;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------- about page ---------- */
.about-right {
  position: relative;
  padding: 0;
}

.about-bio {
  position: absolute;
  /* centered in the right half, matching the Figma layout */
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  margin: 0;
  font-family: 'DX Gaster', 'Gideon Roman', Georgia, serif;
  font-size: 5.1cqh;
  line-height: 1.32;
  text-align: center;
  color: #111;
}

.about-contact {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: 92%;
  margin: 0;
  font-family: 'DX Gaster', 'Gideon Roman', Georgia, serif;
  font-size: 3.9cqh;
  text-align: center;
  color: #111;
}

.about-contact a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}

.about-contact a:hover { border-color: #5b1a1a; color: #5b1a1a; }

/* ---------- arrows ---------- */
.arrow {
  position: absolute;
  bottom: 4.5cqh;
  width: 2.1cqh;
  height: 2.1cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  color: #681109;
  cursor: pointer;
  opacity: 0;
  transition: opacity 350ms ease, transform 220ms ease, color 200ms ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.arrow svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* the "previous" arrow is the same shape, mirrored */
.arrow--left svg { transform: scaleX(-1); }

.arrow--right { right: 4cqw; }
.arrow--left  { left: 4cqw; }

/* arrows stay hidden until the viewer hovers over the page */
.page.is-active:hover .arrow { opacity: 1; }

.arrow:hover { color: #8a1818; }
.arrow--right:hover { transform: translateX(5px); }
.arrow--left:hover  { transform: translateX(-5px); }

/* touch devices have no hover state — always show the arrows there */
@media (hover: none) {
  .arrow { opacity: 1; }
}

/* ---------- portrait / small screen fallback ---------- */
@media (max-aspect-ratio: 3/4) {
  .book {
    width: 92cqw;
    aspect-ratio: 1870 / 1266;
  }
  .site-header { font-size: 3.2cqh; }
  .home-title { font-size: 8cqh; }
  .home-nav { font-size: 4.5cqh; }
}

/* very tall / narrow phones */
@media (max-width: 600px) and (orientation: portrait) {
  .home-title { font-size: 7cqh; }
}

/* keep focus styles for keyboard nav */
:focus-visible {
  outline: 2px solid #8a1818;
  outline-offset: 4px;
  border-radius: 2px;
}