@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-italic-400.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
:root {
  --paper: #f7e9d0;
  --paper-light: #fcf4e6;
  --green: #213318;
  --terra: #ca5341;
  --ink: #213318;
  --line: rgba(33, 51, 24, .28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
}
a { color: inherit; }

/* ---------- Language page ---------- */
.landing {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px 48px;
  text-align: center;
}
.landing .logo { width: min(78vw, 300px); height: auto; display: block; }
.landing h1 {
  font-family: "Cinzel", serif; font-weight: 500; letter-spacing: .08em;
  color: var(--green); font-size: 15px; margin: 18px 0 28px; text-transform: uppercase;
}
.langs { display: flex; flex-direction: column; gap: 12px; width: min(100%, 340px); }
.lang {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--paper-light); text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.lang:active { transform: scale(.98); }
.lang.preferred { border-color: var(--terra); box-shadow: 0 0 0 1px var(--terra) inset; }
.lang-name { font-family: "Cinzel", serif; font-size: 20px; color: var(--green); letter-spacing: .06em; }
.lang-sub { font-style: italic; font-size: 16px; color: var(--terra); margin-top: 2px; }

/* ---------- Menu viewer ---------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: rgba(247, 233, 208, .96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.bar-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; max-width: 760px; margin: 0 auto;
}
.home { font-family: "Cinzel", serif; font-size: 14px; letter-spacing: .06em; color: var(--green); text-decoration: none; white-space: nowrap; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg a {
  font-family: "Cinzel", serif; font-size: 12px; letter-spacing: .04em;
  padding: 7px 9px; text-decoration: none; color: var(--green); min-width: 36px; text-align: center;
}
.seg a.on { background: var(--green); color: var(--paper-light); }
.chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 8px; max-width: 760px; margin: 0 auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; font-family: "Cinzel", serif; font-size: 12px; letter-spacing: .03em;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--terra); background: var(--paper-light);
}
.hint { text-align: center; font-style: italic; font-size: 14px; color: var(--terra); margin: 10px 0 4px; }
.pages { max-width: 760px; margin: 0 auto; padding: 0 0 24px; }
.pages figure { margin: 0; scroll-margin-top: 92px; }
.pages img { display: block; width: 100%; height: auto; background: var(--paper); }
.to-top {
  display: block; text-align: center; padding: 18px; font-family: "Cinzel", serif; font-size: 13px;
  color: var(--green); text-decoration: none;
}
@media (min-width: 761px) {
  .pages figure + figure { margin-top: 12px; }
  .pages img { box-shadow: 0 1px 6px rgba(0,0,0,.12); }
}