/* THIS MENU'S OWN GRAMMAR — and nothing the shared core already says.
   Colour, type, spacing, buttons and the focus ring all come from the vendored
   Aegis core loaded before this file. What remains here is what only a menu has:
   a printed page as an image, and a way to turn it. No token is declared and
   none is aliased — the core's --ag-* names are spoken directly, which is the
   estate's anti-mud law L6. */
* { box-sizing: border-box; }
html { background: var(--ag-paper); color: var(--ag-ink); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
/* Flex items with auto margins shrink to their content; keep every page block at its
   normal full width (capped by its own max-width), exactly as before the corner credit. */
body > header, body > main { width: 100%; box-sizing: border-box; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ag-surface);
  padding: var(--ag-space-3) var(--ag-space-4); z-index: 2; }
.skip-link:focus { left: var(--ag-space-2); }

.site-header { padding: var(--ag-space-8) max(var(--ag-space-4), env(safe-area-inset-left)) var(--ag-space-6);
  border-bottom: 1px solid var(--ag-soft); }

/* GUEST PAGES CARRY THE PROPERTY'S OWN IDENTITY (owner ruling, 25 Sep 2026).
   Topland, or the outlet, is the brand a guest sees. The house that built the site
   appears only as one small "Powered by" line in the page's bottom-right corner
   (owner, 25 Sep: "on the lower right, or we will use small logo instead"; the spot
   right under the list was "too dominant"), the way hotel booking engines credit
   their maker; the page is at least one screen tall so the credit sits in the
   corner, never mid-screen; the small new house logo may replace the text later; its sigil never sits in the masthead or in
   the tab icon of a guest page. Topland's own logo file fills .menu-brand when the
   owner supplies it. */
.menu-brand { display: flex; align-items: center; gap: var(--ag-space-4); }
.menu-brand > div { min-width: 0; }
@media (max-width: 560px) {
  .menu-brand { gap: var(--ag-space-3); }
}
.site-footer { padding: var(--ag-space-3) max(var(--ag-space-4), env(safe-area-inset-right))
  max(var(--ag-space-3), env(safe-area-inset-bottom)); text-align: right; }
.house-signature { margin: 0; font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--ag-muted); }
.outlet-header .back { margin-bottom: var(--ag-space-3); }

.index { max-width: 42rem; margin: auto; padding: var(--ag-space-4); }
.outlet-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ag-soft); }
.outlet-list li { border-bottom: 1px solid var(--ag-soft); }
.outlet-list a { min-height: 4rem; display: flex; align-items: center; justify-content: space-between;
  gap: var(--ag-space-4); padding: var(--ag-space-3) 0; font-size: 1.25rem; font-weight: 650;
  text-decoration: none; }
.outlet-list small { color: var(--ag-muted); font-size: .9rem; font-weight: 400; text-align: right; }

.book-nav { margin-top: var(--ag-space-4); overflow-x: auto; }
.book-nav ul { display: flex; width: max-content; gap: var(--ag-space-2); margin: 0; padding: 0; list-style: none; }
.book-nav a { white-space: nowrap; }

.outlet-menu { width: 100%; padding-bottom: var(--ag-space-8); }
.outlet-menu section { scroll-margin-top: var(--ag-space-4); }
.outlet-menu h2 { padding: var(--ag-space-6) var(--ag-space-4) var(--ag-space-2); font-size: 1.2rem; }
.menu-page { width: 100%; margin: 0 0 var(--ag-space-6); }
.menu-page > a { display: block; width: 100%; }
.menu-page img { display: block; width: 100%; height: auto; background: var(--ag-raised); }
.menu-page figcaption { padding: var(--ag-space-2) var(--ag-space-4) 0; font-size: .9rem; color: var(--ag-muted); }

/* ── THE FITTED READER — only once the script has said it works ──────────────
   Everything below is gated behind .reader-on, which only JavaScript adds. With
   no script the rules never apply and the page is the scrolling strip it has
   always been. A whole printed page is letterboxed into the screen minus the
   pager, so the page is as large as the glass allows: the reason this exists is
   that 9-point Thai at 1.7px per printed millimetre cannot be read. */
/* The compact reader header leaves its book, section links and the first page in
   one phone view. It applies only after the progressive reader has started;
   without JavaScript the full, familiar outlet header and scrolling pages stay
   available exactly as before. */
body.reader-active { height: 100dvh; overflow: hidden; }
body.reader-active > .outlet-header { flex: 0 0 auto; padding-top: var(--ag-space-3);
  padding-bottom: var(--ag-space-3); }
body.reader-active .outlet-header .back { margin-bottom: var(--ag-space-1); font-size: .875rem; }
body.reader-active .outlet-header .ag-kicker { margin: 0; font-size: .75rem; line-height: 1.1; }
body.reader-active .outlet-header .ag-title { margin: var(--ag-space-1) 0 0; font-size: clamp(1.25rem, 5vw, 1.65rem); line-height: 1.1; }
body.reader-active .outlet-header .ag-title span { font-size: .7em; }
body.reader-active .book-nav { margin-top: var(--ag-space-2); }
body.reader-active > main { flex: 1 1 auto; min-height: 0; }
.reader-on { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding-bottom: 0; }
.reader-on section { display: contents; }
.reader-on section h2 { display: none; }
.reader-on .menu-page { display: none; margin: 0; }
/* The current page occupies the grid's remaining row. Its link centres the real
   image and object sizing keeps the source aspect ratio: no fixed allowance, no
   page hidden under the pager, and no cropped artwork on a short phone. */
.reader-on .menu-page.is-current { grid-row: 1; display: flex; min-height: 0;
  align-items: center; justify-content: center; padding: 0 var(--ag-space-2); }
.reader-on .menu-page.is-current > a { display: flex; width: 100%; height: 100%;
  min-height: 0; align-items: center; justify-content: center; }
.reader-on .menu-page.is-current img { height: auto; width: auto; max-width: 100%; max-height: 100%; }
/* The high-resolution link is a caption on the scrolling page and clutter in the
   fitted one, where the guest has the zoom control instead. */
.reader-on .menu-page figcaption { display: none; }

/* ── ZOOM, AND WHY IT IS THE ONE THAT MATTERS ────────────────────────────────
   Fitting a page to the screen turned out to buy almost nothing. A portrait A4
   page on a 390px phone is bound by WIDTH, not height: it can be 374px wide and
   therefore 529px tall, and the old scrolling strip already drew it at 509px.
   Measured: 1.78 against 1.71 pixels per printed millimetre — a 4% gain on a
   page whose 9-point Thai needed several times that.
   So the fitted view is the NAVIGATION answer (one page at a time, turnable,
   numbered) and this is the READING answer: the page is drawn at twice the
   screen's width from the 2000px source and panned by scrolling, inside the
   site, instead of throwing the guest out to a bare .jpg and back-buttoning
   them to the top of a 93-page strip. */
.reader-on .menu-page.is-current.is-zoomed { overflow: auto; align-items: flex-start;
  justify-content: flex-start; padding: 0; -webkit-overflow-scrolling: touch; }
.reader-on .menu-page.is-current.is-zoomed > a { display: block; height: auto; width: auto;
  max-width: none; }
/* max-height is cleared here on purpose: the fitted page is capped by the glass,
   and the zoomed page is deliberately larger than it — that is the whole point
   of zooming. Leaving the cap in place silently held the zoom at the fitted size
   (measured 2.26 px/mm instead of 3.71) while the control still said it was on. */
.reader-on .menu-page.is-current.is-zoomed img { height: auto; width: 200%; max-width: none;
  max-height: none; object-fit: fill; }

.reader-bar { grid-row: 2; position: sticky; bottom: 0; z-index: 1; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--ag-space-3);
  padding: var(--ag-space-2) var(--ag-space-4) max(var(--ag-space-2), env(safe-area-inset-bottom));
  background: var(--ag-surface); border-top: 1px solid var(--ag-soft); }
.reader-count { margin: 0; text-align: center; font-variant-numeric: tabular-nums;
  font-family: var(--ag-ui); }

@media (min-width: 720px) {
  .outlet-menu:not(.reader-on) { max-width: 720px; margin: auto; }
  .outlet-header { max-width: 720px; margin: auto; }
}