:root {
  color-scheme: dark;
  --bg: #16120f;
  --panel: #1f1a16;
  --ink: #f1e8da;
  --body: #d6cbbb;
  --muted: #a39480;
  --faint: #6f6356;
  --amber: #d9a441;
  --hair: #342b24;
  --danger: #ef8a6f;
  --serif: Fraunces, Georgia, "Hiragino Mincho ProN", serif;
  --sans: Inter, system-ui, -apple-system, "Hiragino Sans", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: var(--amber); }

/* ---------------------------------------------------------------- hero */
/* env(safe-area-inset-top): inside the Hub Home Screen app the status bar is transparent and the
   page runs under it (0 in a normal browser tab). */
.hero { max-width: 760px; margin: 0 auto; padding: calc(88px + env(safe-area-inset-top)) 16px 40px; text-align: center; }
.kicker { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 9vw, 84px); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.intro { margin: 22px auto 0; max-width: 560px; font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--body); }
.citynav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; }
.citynav a { padding: 7px 14px; border: 1px solid var(--hair); border-radius: 999px; font-size: 14px; color: var(--body); text-decoration: none; }
.citynav a:hover { border-color: var(--amber); color: var(--ink); }
.citynav a span { color: var(--faint); margin-left: 6px; }

/* ---------------------------------------------------------------- cities & bars */
.city { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.cityhead { display: flex; align-items: baseline; gap: 14px; margin: 72px 0 8px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.cityhead h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 40px; color: var(--ink); letter-spacing: -.01em; }
.cityhead .jp { font-family: var(--serif); font-size: 22px; color: var(--faint); }

.bar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 40px; padding: 44px 0; border-bottom: 1px solid var(--hair); scroll-margin-top: calc(60px + env(safe-area-inset-top)); }
.bar:last-child { border-bottom: 0; }
.bar-text { position: sticky; top: 24px; align-self: start; }
.bar-num { font-family: var(--serif); font-style: italic; color: var(--amber); font-size: 17px; }
.bar h3 { margin: 4px 0 6px; font-family: var(--serif); font-weight: 600; font-size: 32px; line-height: 1.1; color: var(--ink); }
.meta { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }
.meta a { color: var(--muted); text-underline-offset: 3px; }
.meta a:hover { color: var(--amber); }
.tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--amber); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); vertical-align: 2px; }
.desc { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--body); white-space: pre-line; }

.cover { position: relative; margin: 0 0 10px; border-radius: 10px; overflow: hidden; cursor: zoom-in; background: var(--panel); }
.cover img { width: 100%; height: auto; max-height: 640px; object-fit: cover; }
.grid { columns: 3 150px; column-gap: 10px; }
.tile { position: relative; break-inside: avoid; margin: 0 0 10px; border-radius: 8px; overflow: hidden; background: var(--panel); cursor: zoom-in; }
.tile img { width: 100%; height: auto; }
/* Phone videos are 9:16, which towers over the 3:4 photos beside it; crop the thumbnail to 3:4 like them. */
.tile.video img { aspect-ratio: 3 / 4; object-fit: cover; }
.cover.video img { aspect-ratio: 3 / 4; }
.play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.play::after { content: ""; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='white'/%3E%3C/svg%3E") center/24px no-repeat; }
.credit { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 4px; background: rgba(0,0,0,.6); font-size: 11px; color: #ddd; pointer-events: none; }

/* ---------------------------------------------------------------- lightbox */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0a0806; color: var(--ink); }
.lightbox[open] { display: grid; grid-template-columns: 56px minmax(0,1fr) 56px; align-items: center; }
.lightbox::backdrop { background: rgba(0,0,0,.7); }
/* One-finger drags belong to the swipe code (app.js); pinch-zoom stays with the browser.
   Once zoomed in, one finger pans the picture again. */
.lightbox { touch-action: pinch-zoom; overscroll-behavior: contain; overflow: hidden; }
.lightbox.zoomed { touch-action: auto; }
/* Stop the page behind the open lightbox from scrolling or rubber-banding on iOS. */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox figure { margin: 0; height: 100dvh; display: grid; grid-template-rows: minmax(0,1fr) auto; padding: 48px 0 12px; }
/* The photo is pinned to the box, so it scales to fit the window instead of opening at full size */
.lb-media { position: relative; min-height: 0; will-change: transform; }
.lb-media img, .lb-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
/* A video is sized to its own shape (--ar, set in app.js) and centred, so its controls sit on
   the picture rather than at the bottom of an empty frame. cq units are the .lb-media box. */
.lb-media { container-type: size; }
.lb-media video { margin: auto; width: min(100cqw, calc(100cqh * var(--ar, .5625))); height: min(100cqh, calc(100cqw / var(--ar, .5625))); }
.lightbox figcaption { padding: 12px 8px 0; text-align: center; font-size: 14px; color: var(--muted); }
.lightbox figcaption strong { color: var(--ink); font-weight: 600; }
.lightbox button { background: none; border: 0; color: var(--ink); font-size: 40px; line-height: 1; cursor: pointer; opacity: .75; height: 100%; }
.lightbox button:hover { opacity: 1; }
.lb-close { position: absolute; top: 8px; right: 12px; height: auto !important; font-size: 34px !important; z-index: 2; }

/* ---------------------------------------------------------------- preface & outro */
.prose { max-width: 640px; margin: 0 auto; padding: 0 16px; font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--body); white-space: pre-line; }
#preface { margin-top: 8px; font-size: 16.5px; font-style: italic; color: var(--muted); }
.outro { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hair); }
body.editing .prose { min-height: 3.3em; }
.prose:empty::before { content: attr(data-placeholder); color: var(--faint); font-style: italic; }

/* ---------------------------------------------------------------- footer */
.foot { max-width: 1120px; margin: 40px auto 0; padding: 32px 16px 64px; border-top: 1px solid var(--hair); text-align: center; font-size: 13px; color: var(--faint); }

/* ---------------------------------------------------------------- edit mode */
.editbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: #2a2118; border-bottom: 1px solid var(--amber); font-size: 13.5px; color: var(--body); }
.editbar strong { color: var(--amber); }
.editbar a { margin-left: auto; font-weight: 600; }
.savestate { color: var(--muted); }
.savestate.err { color: var(--danger); }
body.editing [data-field] { outline: 1px dashed var(--faint); outline-offset: 4px; border-radius: 3px; cursor: text; }
body.editing [data-field]:focus { outline: 1px solid var(--amber); }
body.editing .tile, body.editing .cover { cursor: default; }
.tools { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; align-items: center; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.tools select { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 3px 4px; background: #2a2118; color: var(--ink); border: 1px solid var(--hair); border-radius: 5px; }
.tools button, .tools .key { font: inherit; font-size: 11px; padding: 3px 6px; background: #2a2118; color: var(--ink); border: 1px solid var(--hair); border-radius: 5px; cursor: pointer; white-space: nowrap; }
.tools .key { cursor: default; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.tools button.on { border-color: var(--amber); color: var(--amber); }
.hiddenphotos { max-width: 1120px; margin: 60px auto 0; padding: 0 16px; }
.hiddenphotos h2 { font-family: var(--serif); color: var(--ink); margin: 0; }
.hiddenphotos .note { color: var(--muted); margin: 4px 0 18px; }
.hiddenphotos .grid { columns: 6 140px; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .hero { padding-top: calc(56px + env(safe-area-inset-top)); }
  .bar { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 0; }
  .bar-text { position: static; }
  .bar h3 { font-size: 28px; }
  .cover img { max-height: 70svh; }
  .cityhead h2 { font-size: 32px; }
  .grid { columns: 2 120px; column-gap: 8px; }
  .tile { margin-bottom: 8px; }
  .lightbox[open] { grid-template-columns: minmax(0,1fr); }
  .lightbox figure { padding: 52px 8px 12px; }
  .lb-prev, .lb-next { display: none; }
}

/* ---------------------------------------------------------------- rating & what we ordered */
.stars { display: flex; align-items: center; gap: 2px; margin: 0 0 8px; font-size: 18px; line-height: 1; color: var(--faint); }
.star { position: relative; display: inline-block; padding: 0 1px; }
.star.on { color: var(--amber); }
/* Half star: the glyph painted amber on its left half only. */
.star.half { background: linear-gradient(90deg, var(--amber) 50%, var(--faint) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.editing-stars .star { padding: 2px 3px; }
.editing-stars button { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; background: none; border: 0; cursor: pointer; }
.editing-stars button.left { left: 0; }
.editing-stars button.right { right: 0; }
.editing-stars button:hover, .editing-stars button:focus-visible { background: rgba(241, 232, 218, .14); outline: none; }
.editing-stars button.left:hover, .editing-stars button.left:focus-visible { border-radius: 4px 0 0 4px; }
.editing-stars button.right:hover, .editing-stars button.right:focus-visible { border-radius: 0 4px 4px 0; }
.stars-hint { margin-left: 8px; font-size: 12.5px; color: var(--faint); }
.ordered { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hair); }
.ordered h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.ordered ul { margin: 0; padding: 0; list-style: none; }
.ordered li { position: relative; padding: 3px 0 3px 18px; font-family: var(--serif); font-size: 16.5px; color: var(--body); }
.ordered li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 1px; background: var(--amber); }
.ordered-edit { min-height: 1.6em; font-family: var(--serif); font-size: 16.5px; line-height: 1.7; white-space: pre-line; }
.ordered-edit:empty::before { content: attr(data-placeholder); color: var(--faint); font-style: italic; }
/* Half-star tap targets need room under a finger. */
@media (pointer: coarse) { .editing-stars { font-size: 30px; } .editing-stars .star { padding: 2px 5px; } }
/* noflair's mark on the bars the app recommended, sitting on the meta line like .tag. */
.noflair { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: -3px; color: var(--amber); }
.noflair svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
/* On phones it would wrap onto a second line with its left margin showing, so give it its own line. */
@media (max-width: 480px) { .noflair { display: flex; width: fit-content; margin: 4px 0 0; } }