@charset "UTF-8";

/* The menu pages are the supplied PDF rendered to images, so the typography
   and line breaks match the print original exactly. No webfont is served —
   the text lives in the artwork. The readable transcript sits alongside each
   page in .visually-hidden for screen readers, search and copy-paste. */

:root {
  --rolex-green: #016247;
  --gold: #927a43;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --rule: #dcdcdc;
  --paper: #ffffff;
  --desk: #e9e9e7;

  --sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial,
    "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- menu pages (image) ---------- */

/* 1 ページ = 1 画面。紙面が途中で見切れないように、各ページを画面内に収めて
   スクロールスナップで次のページへ送る。
   紙（.paper）は画面の高さいっぱいに伸ばし、紙面画像はその中で上下中央に置く。
   紙の高さはページごとに違うので、余白側を伸ばして見え方を揃えている。
   ただし上下を完全に埋めると紙の縁が消えてページの区切りが分からなくなるので、
   --edge の分だけ台（--desk）を覗かせて縁を見せている。 */

.reader {
  --gutter: 0.875rem;
  --edge: 0.75rem;
  background: var(--desk);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  justify-content: center;
  padding: var(--edge) var(--gutter);
}

/* 紙面を画面の中央に置くための枠。上下は --edge を残して画面の端近くまで伸ばす。
   縁のリング（＝ページの区切り）は .page 側に移してある。 */
.paper {
  position: relative;
  width: 100%;
  max-width: 30rem;
  height: 100%;
  /* grid にすると行が auto = 高さが不定になり、.page の max-height:100% が
     none 扱いになって画面の低いとき（横向きなど）に紙面が見切れる。
     flex なら item の % 高さがコンテナの content box（高さ確定）で解決される。 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 紙の見た目（白地と縁のリング）は .paper ではなく紙面画像そのものに乗せる。
   .paper に乗せて .page を width:100% にすると、画面が低くて max-height:100% が
   効いたときに幅だけ 100% のまま残って画像が横に伸びる（実際に踏んだ：
   1200x2243 の縦長紙面が 457x711 で表示され、比率 0.535 → 0.643 に歪んだ）。
   幅・高さとも auto にして max-* だけで抑えると、ブラウザが縦横比を保ったまま
   小さいほうの制約に合わせてくれる。紙の縁も画像にぴったり付く。 */
.page {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 5px rgba(0, 0, 0, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.07);
}

/* 次のページがあることを示す控えめな山形。紙の内側に出す（.slide 側に置くと
   紙の縁と重なって汚くなる）。最後のページには出さない。 */
.slide:not(:last-child) .paper::after {
  content: "";
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  opacity: 0.5;
  animation: nudge 2.4s ease-in-out infinite;
}

@keyframes nudge {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
    opacity: 0.5;
  }
  50% {
    transform: rotate(45deg) translate(0.14rem, 0.14rem);
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide:not(:last-child) .paper::after {
    animation: none;
  }
}

@media (max-width: 26.25em) {
  .reader {
    --gutter: 0.5rem;
    --edge: 0.5rem;
  }
}

/* ---------- index (staff use) ---------- */

.sheet {
  max-width: 30rem;
  margin: 0 auto;
  padding: 3.5rem 1.75rem 5rem;
}

.masthead {
  text-align: center;
}

.masthead__logo {
  display: block;
  width: 8.75rem;
  height: auto;
  margin: 0 auto;
}

.menu-nav {
  margin-top: 3.5rem;
  display: grid;
  gap: 0.875rem;
}

.menu-nav__link {
  display: block;
  padding: 1.25rem 1rem;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}

.menu-nav__link:hover,
.menu-nav__link:focus-visible {
  border-color: var(--rolex-green);
  color: var(--rolex-green);
}

.colophon {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ink-soft);
}

/* ---------- print ---------- */

@media print {
  .reader {
    background: none;
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
  }

  .slide,
  .paper {
    height: auto;
    padding: 0;
    display: block;
  }

  .paper {
    max-width: none;
    box-shadow: none;
  }

  .slide:not(:last-child) .paper::after {
    display: none;
  }

  .page {
    width: 100%;
    max-width: 100%;
    max-height: none;
    box-shadow: none;
  }

  .slide + .slide {
    break-before: page;
  }
}