/* NOMIMICHI（のみみち） — night-alley zine stylesheet
   One column, one lantern. Dark only: the site IS the night. */

/* ---------------------------------------------------------------- tokens */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #100e0b;            /* night asphalt */
  --bg-raise: #1a1611;      /* counter wood */
  --ink: #f4ede1;           /* paper-lantern light */
  --ink-dim: #a89a87;       /* cigarette smoke */
  --lantern: #ff8a3d;       /* the amber glow */
  --aka: #e6432e;           /* red chochin */
  --line: #2c261e;          /* alley shadow */
  --line-strong: #3a3226;
  --glow: rgb(255 138 61 / 0.35);
  --scrim: rgb(16 14 11 / 0.72);
  --font-display: "Bebas Neue", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: -apple-system, "Helvetica Neue", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", Meiryo, sans-serif;
  --header-h: 3.5rem;
  --chips-h: 3.5rem;
  --gutter: 1.25rem;
  --r: 0.875rem;
  color-scheme: dark;
}

/* ----------------------------------------------------------------- reset */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: clip;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
img { max-width: 100%; }
button { font: inherit; }

::selection { background: rgb(230 67 46 / 0.5); color: #fff; }

a { color: var(--lantern); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: #ffa76b; }

:focus-visible {
  outline: 2px solid var(--lantern);
  outline-offset: 2px;
  border-radius: 2px;
}

main {
  max-width: 42.5rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------- header + wordmark */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
  padding: 0 var(--gutter);
  background: rgb(16 14 11 / 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
  color: var(--ink);
}
.wordmark:hover { color: var(--ink); }
.wordmark-latin {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wordmark-ja {
  display: block;
  font-size: 0.5625rem;
  color: var(--lantern);
  letter-spacing: 0.5em;
  text-align-last: justify;
  margin-top: 0.1875rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
.site-nav .lang-toggle {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  color: var(--ink);
}
.site-nav .lang-toggle:hover { border-color: var(--lantern); color: var(--lantern); }

/* ------------------------------------------------------------------ hero */

.hero {
  --alley-w: 32rem;        /* banner max width; its height follows the 680x215 viewBox */
  --alley-gap: 1.125rem;
  position: relative;
  padding: 2.5rem 0 2.25rem;
}
.alley-banner {            /* line art hung above the sign, like a noren */
  display: block;
  width: 100%;
  max-width: var(--alley-w);
  height: auto;
  margin-bottom: var(--alley-gap);
  color: var(--ink-dim);
  opacity: 0.85;
}
.hero::before {          /* lantern light spilling from above + one far-off red chochin */
  content: "";
  position: absolute;
  inset: -3.5rem -40vw auto;
  height: 26rem;
  background:
    radial-gradient(ellipse 46% 62% at 38% 0%, rgb(255 138 61 / 0.14), transparent 70%),
    radial-gradient(circle 5.5rem at 78% 24%, rgb(230 67 46 / 0.1), transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.hero h1 {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 15vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.hero h1 > span { display: block; }
.hero h1 > span + span { margin-top: 0.625rem; }
.hero-ja {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3.2vw, 1.375rem);
  line-height: 1;
  color: var(--lantern);
  letter-spacing: 0.5em;
  text-align-last: justify;
}
.tagline {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.subtag {
  margin-top: 0.625rem;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* ----------------------------------------------------------------- chips */

.chips {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  display: flex;
  gap: 0.5rem;
  height: var(--chips-h);
  align-items: center;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: rgb(16 14 11 / 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.125rem, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.125rem, #000 calc(100% - 1.5rem), transparent);
}
.chips::-webkit-scrollbar { display: none; }
/* City links sit above the sticky area/vibe rows and scroll away with the hero. */
.chips-cities {
  position: static;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
a.chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.chips-tags {
  top: calc(var(--header-h) + var(--chips-h));
  border-bottom: 1px solid var(--line);
}

.chip {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0 1.0625rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-raise);
  color: var(--ink-dim);
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease;
}
.chip:hover { color: var(--ink); border-color: var(--ink-dim); }
.chip.is-active {         /* the chip lights up */
  background: var(--lantern);
  border-color: var(--lantern);
  color: #1c1006;
  font-weight: 700;
  box-shadow: 0 0 16px var(--glow);
}

/* ----------------------------------------------------------------- cards */

.cards { padding: 0.75rem 0 1rem; }

.card::before {           /* the michi: a stretch of road before every stop */
  content: "";
  display: block;
  width: 2px;
  height: 2.375rem;
  margin: 0 auto 2.375rem;
  background: repeating-linear-gradient(180deg,
    var(--line-strong) 0 0.375rem, transparent 0.375rem 0.8125rem);
}
.card.is-hidden { display: none; }

.card > a {
  display: block;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 180ms ease, transform 180ms ease;
}
.card > a:active { transform: scale(0.99); }
.card > a:hover { border-color: var(--line-strong); }
.card > a:hover h2 { color: var(--lantern); }

.card img,
.card-noimg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.card img { background: var(--bg-raise); }

.card-noimg {             /* no photo yet: hang a chochin instead */
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--ink);
  text-shadow: 0 0 14px rgb(0 0 0 / 0.5);
  background:
    radial-gradient(circle 4.375rem at 50% 44%, #d6402c 62%, #8e2417 78%, transparent 79%),
    radial-gradient(circle 7rem at 50% 44%, rgb(230 67 46 / 0.35), transparent 70%),
    radial-gradient(ellipse 90% 90% at 50% 110%, #17130e, var(--bg) 80%);
}

.card-body {
  position: relative;
  margin-top: -4.25rem;
  padding: 1.125rem 1.125rem 1.375rem;
  background: linear-gradient(180deg,
    rgb(16 14 11 / 0) 0, var(--scrim) 1.9rem, var(--bg-raise) 4.25rem);
}
.card-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.65);
  transition: color 160ms ease;
}
.card-ja {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-transform: none;
  margin-left: 0.25rem;
}
.card-meta {
  margin-top: 0.4375rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}
.card-area { color: var(--lantern); font-weight: 700; }
.card-yen { color: var(--ink); }
.card-hook {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #d9cfbf;
}

/* soft funnel: the last stop on the road */
.funnel-card {
  position: relative;
  margin-top: 4.75rem;
  padding: 1.375rem 1.25rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.funnel-card::before {    /* its stretch of road sits above the box, not inside */
  position: absolute;
  top: -4.75rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
.funnel-card strong { color: var(--ink); }
.funnel-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  padding: 0 1.25rem;
  border: 1px solid rgb(255 138 61 / 0.45);
  border-radius: 999px;
  color: var(--lantern);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.funnel-link:hover {
  color: var(--lantern);
  background: rgb(255 138 61 / 0.08);
  box-shadow: 0 0 16px var(--glow);
}

.empty-state {
  padding: 4.5rem 0 3rem;
  text-align: center;
  color: var(--ink-dim);
}
.empty-state p { margin-bottom: 0.875rem; }
.empty-ja {
  font-size: 1.25rem;
  letter-spacing: 0.4em;
  color: var(--lantern);
}

/* ------------------------------------------------------------- spot page */

.spot { padding-top: 1.5rem; }

.closed-banner {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(230 67 46 / 0.45);
  border-radius: 0.625rem;
  background: rgb(230 67 46 / 0.12);
  font-size: 0.9375rem;
}

.spot-photos {
  display: flex;
  gap: 0.5rem;
  margin: 0 calc(-1 * var(--gutter)) 1.75rem;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.spot-photos::-webkit-scrollbar { display: none; }
.spot-photo {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
}
.spot-photo:not(:only-child) { flex-basis: 88%; }
.spot-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--bg-raise);
}
.spot-photo figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.875rem;
  padding-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}
.photo-credit { margin-right: auto; }
.photo-action-form { display: inline; margin: 0; }
.photo-action {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-dim);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.photo-action:hover { color: var(--lantern); }
.add-photo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 24rem;
  min-height: 3rem;
  margin-top: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.add-photo-btn:hover { border-color: var(--lantern); color: var(--lantern); }

.spot-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.375rem, 9vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.spot-name-ja {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}
.spot-meta {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cash-badge {
  display: inline-block;
  padding: 0.125rem 0.5625rem;
  border: 1px solid rgb(230 67 46 / 0.55);
  border-radius: 999px;
  background: rgb(230 67 46 / 0.12);
  color: #f2604d;
  font-weight: 700;
}

.spot-blurb { margin-top: 1.75rem; }
.spot-blurb p { margin-bottom: 1.25em; line-height: 1.75; }

.etiquette {
  margin: 1.875rem 0;
  padding: 0.9375rem 1.125rem 1.0625rem;
  border-left: 3px solid var(--lantern);
  border-radius: 0 0.625rem 0.625rem 0;
  background: var(--bg-raise);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.etiquette-label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lantern);
}

.spot-facts:not(:has(dt)) { display: none; }
.spot-facts {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  gap: 0.625rem 1rem;
  margin: 2rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spot-facts dt {
  padding-top: 0.1875em;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.spot-facts dd { font-size: 0.9375rem; line-height: 1.6; }

.maps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 24rem;
  min-height: 3rem;
  padding: 0.625rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--lantern);
  color: #1c1006;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 26px rgb(255 138 61 / 0.28);
  transition: filter 160ms ease, transform 160ms ease;
}
.maps-btn:hover { color: #1c1006; filter: brightness(1.08); }
.maps-btn:active { transform: translateY(1px); }

.backlink { margin-top: 2.5rem; font-size: 0.9375rem; }
.backlink a { color: var(--ink-dim); text-decoration: none; }
.backlink a:hover { color: var(--lantern); }

/* -------------------------------------------- prose (how-to, about) */

.prose {
  max-width: 65ch;
  padding-top: 2.5rem;
}
.prose h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.625rem, 10vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.prose .lede {
  margin-top: 1rem;
  font-size: 1.1875rem;
  line-height: 1.6;
}
.prose h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-top: 1.625rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.prose p { margin-bottom: 1.1em; }
.prose em { font-style: italic; }  /* links own the lantern color */

.glossary dt {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.glossary dt span[lang="ja"] {
  margin-left: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lantern);
}
.glossary dd { margin-top: 0.375rem; color: #ddd3c3; line-height: 1.7; }

.rules {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
}
.rules li {
  position: relative;
  margin-bottom: 1.125rem;
  padding-left: 2.625rem;
  counter-increment: rule;
}
.rules li::before {       /* real sequence: rule one is order-a-drink-first */
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 0.0625rem;
  width: 1.75rem;
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1.1;
  text-align: center;
  color: var(--lantern);
  border-bottom: 2px solid rgb(255 138 61 / 0.35);
}

.phrases {
  width: 100%;
  margin: 0.5rem 0 1rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
}
.phrases th {
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-dim);
}
.phrases td {
  padding: 0.5625rem 0.75rem 0.5625rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.phrases td:first-child { font-weight: 700; }
.phrases td[lang="ja"] { color: var(--ink-dim); white-space: nowrap; }
.phrases td:last-child { color: #d9cfbf; }

.promise { margin: 0; padding-left: 1.25rem; }
.promise li { margin-bottom: 0.75rem; }
.promise li::marker { color: var(--lantern); }

.cta-line { margin-top: 2.75rem; font-size: 1.125rem; }
.cta-line a { font-weight: 700; }

/* ----------------------------------------------------------- error pages */

.error-page {
  padding: 4.5rem 0 3rem;
  text-align: center;
}
.error-page p { margin-bottom: 0.75rem; }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(6.5rem, 30vw, 9.5rem);
  line-height: 1;
  color: var(--lantern);
  text-shadow: 0 0 60px var(--glow);
}
.error-page [lang="ja"] { color: var(--ink-dim); letter-spacing: 0.1em; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: 5rem;
  padding: 2.25rem var(--gutter) 3.25rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-footer nav { margin: 0.625rem 0; }
.site-footer a { color: var(--ink-dim); }
.site-footer a:hover { color: var(--lantern); }
.footer-legal { font-size: 0.75rem; }
/* App Store badge: Apple's artwork untouched; min 40px tall, clear space ≥ ¼ of its height. */
.app-badge { display: inline-block; margin: 0.75rem 0 0.25rem; line-height: 0; }
.app-badge img { height: 40px; width: auto; }
.app-badge-hero { margin-top: 1.5rem; }
.app-badge-hero img { height: 48px; }

/* ----------------------------------------------------------------- admin */

.page-admin main { max-width: 46rem; }

.admin-login {
  max-width: 21rem;
  margin: 0 auto;
  padding-top: 3.5rem;
}
.admin-login h1 {
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.admin-login label { display: block; margin-bottom: 1rem; }

.form-error,
.flash {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
}
.form-error {
  border: 1px solid rgb(230 67 46 / 0.45);
  background: rgb(230 67 46 / 0.12);
}
.flash {
  border: 1px solid rgb(255 138 61 / 0.4);
  background: rgb(255 138 61 / 0.08);
}

.admin-list, .admin-form { padding-top: 1.75rem; }
.admin-form h1 { margin-bottom: 1.25rem; font-size: 1.5rem; font-weight: 700; }

.admin-bar {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.admin-bar h1 {
  margin-right: auto;
  font-size: 1.5rem;
  font-weight: 700;
}
.admin-logout { font-size: 0.8125rem; color: var(--ink-dim); }
.admin-who { font-size: 0.8125rem; color: var(--ink-dim); }

.btn,
.admin-login button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.375rem 1.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: var(--lantern);
  color: #1c1006;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter 160ms ease;
}
.btn:hover, .admin-login button:hover { color: #1c1006; filter: brightness(1.08); }
.btn-danger {
  background: transparent;
  border: 1px solid rgb(230 67 46 / 0.55);
  color: #f2604d;
  margin-top: 1.5rem;
}
.btn-danger:hover { color: #f2604d; background: rgb(230 67 46 / 0.1); filter: none; }

.login-divider {
  margin: 1.25rem 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}
.btn-google {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.btn-google:hover { background: var(--bg-raise); filter: none; }

.admin-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.admin-table th {
  padding: 0.5rem 0.875rem 0.5rem 0;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-dim);
}
.admin-table td {
  padding: 0.6875rem 0.875rem 0.6875rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-table small { color: var(--ink-dim); }

.badge {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-live {             /* the lantern is lit */
  border-color: rgb(255 138 61 / 0.5);
  background: rgb(255 138 61 / 0.1);
  color: var(--lantern);
}
.badge-hidden { color: var(--ink-dim); }
.badge-closed {
  border-color: rgb(230 67 46 / 0.5);
  background: rgb(230 67 46 / 0.1);
  color: #f2604d;
}

.admin-form fieldset {
  margin: 0 0 1.25rem;
  padding: 1rem 1rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
}
.admin-form legend {
  padding: 0 0.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lantern);
}
.admin-form label {
  display: block;
  margin-bottom: 0.875rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}

.admin-form input:not([type="checkbox"]):not([type="file"]),
.admin-form select,
.admin-form textarea,
.admin-login input {
  display: block;
  width: 100%;
  margin-top: 0.3125rem;
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background: var(--bg-raise);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;                 /* 16px stops iOS zoom */
  accent-color: var(--lantern);
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus,
.admin-login input:focus { border-color: var(--lantern); }
.admin-form textarea { resize: vertical; line-height: 1.6; }

.admin-form .check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
}
.admin-form .check input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--lantern);
}

.admin-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.admin-photos figure { position: relative; }
.admin-photos img {
  display: block;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
}
.photo-del {
  position: absolute;
  top: -0.4375rem;
  right: -0.4375rem;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border: 1px solid rgb(230 67 46 / 0.6);
  border-radius: 50%;
  background: var(--bg);
  color: #f2604d;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}
.photo-del:hover { background: rgb(230 67 46 / 0.2); }

/* ------------------------------------------------------------ venue agent */

.agent-form { max-width: 40rem; margin-bottom: 2rem; }
.agent-recent { font-size: 1rem; margin: 1.5rem 0 0.75rem; }
.agent-report { margin: 0 0 1.5rem; padding: 0.875rem 1rem; border: 1px solid var(--lantern); border-radius: 0.625rem; background: var(--bg-raise); font-size: 0.9375rem; }
.agent-report p, .agent-report li { margin-bottom: 0.375rem; }
.agent-report ul { padding-left: 1.25rem; }
.agent-warn { color: #f2a14d; }

/* ------------------------------------------------------------ /admin/users */

.page-admin-wide main { max-width: 64rem; }
.admin-users td { vertical-align: top; }
.admin-users .nowrap { white-space: nowrap; }
.admin-users .btn { min-height: 2rem; padding: 0.25rem 0.875rem; font-size: 0.8125rem; }
.admin-users form { margin: 0; }
.user-ident { display: block; white-space: nowrap; }
.admin-note { margin-top: 0.875rem; color: var(--ink-dim); }

/* ------------------------------------------------------------ /admin/stats */

.stats-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.75rem;
}
.stats-tile {
  padding: 1rem 1.125rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.625rem;
  background: var(--bg-raise);
}
.stats-tile-label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.stats-tile-value {
  margin-top: 0.25rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
}

.stats-section { margin-bottom: 1.75rem; }
.stats-section h2 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.stats-section h2 small { font-weight: 400; color: var(--ink-dim); }

.stats-daily { display: flex; flex-direction: column; gap: 0.3125rem; }
.stats-bar-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.stats-bar-label { width: 3rem; flex: 0 0 auto; color: var(--ink-dim); }
.stats-bar-track {
  flex: 1 1 auto;
  height: 0.625rem;
  border-radius: 0.625rem;
  background: var(--line);
  overflow: hidden;
}
.stats-bar-fill {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--lantern);
}
.stats-bar-count { width: 2rem; flex: 0 0 auto; text-align: right; color: var(--ink-dim); }
.stats-bar-today .stats-bar-label { color: var(--ink); font-weight: 700; }
.stats-bar-today .stats-bar-fill { box-shadow: 0 0 8px var(--glow); }

.admin-table th.num, .admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.stats-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
}

/* ------------------------------------------------------------- beer michi */
/* The whole sheet routes its accent through --lantern, so re-pointing that
   one token turns chips, cards, links and buttons beer-gold for free. */

.page-beer {
  --lantern: #f0b429;
  --glow: rgb(240 180 41 / 0.35);
}

.page-beer .hero::before {   /* gold spill instead of the lantern-and-chochin */
  background:
    radial-gradient(ellipse 46% 62% at 38% 0%, rgb(240 180 41 / 0.15), transparent 70%),
    radial-gradient(circle 5.5rem at 78% 24%, rgb(240 180 41 / 0.08), transparent 100%);
}

.page-beer .card-noimg {     /* a glass of beer, not a red chochin */
  position: relative;
  isolation: isolate;        /* keeps the ::before/::after glass behind the text, nothing else */
  font-size: 1.375rem;
  letter-spacing: 0.28em;
  background:
    /* faint ambient bleed, restrained to match the mark's own size */
    radial-gradient(circle 4.5rem at 50% 44%, rgb(240 180 41 / 0.18), transparent 75%),
    radial-gradient(ellipse 90% 90% at 50% 110%, #17130e, var(--bg) 80%);
}
.page-beer .card-noimg::before,   /* the glass: a clipped taper, not a blob */
.page-beer .card-noimg::after {   /* the foam: a pale cap sitting on the rim */
  content: "";
  position: absolute;
  left: 50%;
  z-index: -1;                /* behind the ビール text, above the card's own background */
}
.page-beer .card-noimg::before {
  top: calc(44% - 1.85rem);
  width: 3.6rem;
  height: 4.4rem;
  transform: translateX(-50%);
  clip-path: polygon(8% 0%, 92% 0%, 82% 100%, 18% 100%);
  background:
    linear-gradient(100deg, transparent 36%, rgb(255 255 255 / 0.22) 45%, transparent 55%),
    linear-gradient(180deg, #f8cf72 0%, #f0b429 42%, #d99a1f 78%, #b97f14 100%);
}
.page-beer .card-noimg::after {
  top: calc(44% - 2.55rem);
  width: 4rem;
  height: 1.2rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #fffaf0 0%, #f6e3ad 100%);
}

.beer-band { padding-top: 0; }
.beer-band.is-empty { display: none; }

.band-head {
  position: relative;
  margin: 4.75rem 0 0;
  padding-top: 2.375rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--lantern);
}
.band-head::before {         /* the road keeps going, just further */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2.375rem;
  background: repeating-linear-gradient(180deg,
    var(--line-strong) 0 0.375rem, transparent 0.375rem 0.8125rem);
}
.band-sub {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-dim);
}
/* the first card after a band heading already has its own road stub */
.band-head + .card::before { margin-top: 2.375rem; }

.funnel-beer { border-color: rgb(240 180 41 / 0.45); }
.funnel-beer strong { color: var(--lantern); }

/* home-page and spot-page entry points (they live outside .page-beer) */
.beer-entry {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgb(240 180 41 / 0.4);
  border-radius: var(--r);
  background: linear-gradient(100deg, rgb(240 180 41 / 0.1), rgb(240 180 41 / 0.02));
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.beer-entry:hover {
  color: var(--ink);
  border-color: #f0b429;
  box-shadow: 0 0 18px rgb(240 180 41 / 0.3);
}
.beer-entry-mark {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0b429;
}
.beer-entry-text { font-size: 0.875rem; line-height: 1.5; color: var(--ink-dim); }
.beer-entry-text b { display: block; color: var(--ink); font-size: 0.9375rem; }

.beer-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin-top: 1rem;
  padding: 0 0.875rem;
  border: 1px solid rgb(240 180 41 / 0.45);
  border-radius: 999px;
  background: rgb(240 180 41 / 0.08);
  color: #f0b429;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}
.beer-badge:hover { color: #f0b429; background: rgb(240 180 41 / 0.16); }

.site-nav .nav-beer { color: #f0b429; }
.site-nav .nav-beer:hover { color: #ffc94d; }

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 23.4rem) {
  /* tiny phones / fallback-font insurance: keep the header on one line */
  .wordmark-latin { font-size: 1.25rem; }
  .site-nav a { padding: 0 0.3125rem; font-size: 0.78125rem; }
  .site-nav .lang-toggle { padding: 0 0.5625rem; }
}

/* The 4-item nav (with the beer link added) no longer fits at full label
   length, wider than the ≤23.4rem tightening above reaches — but EN and JA
   overflow by different amounts at different widths (measured with
   Playwright: EN is clear by 390px, JA is not), so each gets its own
   ceiling rather than one shared threshold that would needlessly relabel
   EN above the width it actually needs it. Both labels are always real
   text nodes (the short one starts `hidden` in markup) so this is a
   display toggle, not a content swap — screen readers and text selection
   still see exactly one real label, never neither/both. */
@media (max-width: 23.5rem) {
  /* EN: full labels overflow at 320px (+34px) and 375px (+14px) but not
     390px (0px, already clear) — ceiling set to clear 375px without
     reaching 390px. */
  html[lang="en"] .site-nav .nav-long { display: none; }
  html[lang="en"] .site-nav .nav-short { display: inline; }
}

@media (max-width: 24.4rem) {
  /* JA: full labels overflow at 320px (+92px), 375px (+75px) AND 390px
     (+60px) — needs relief all the way up to 390px. */
  html[lang="ja"] .site-nav .nav-long { display: none; }
  html[lang="ja"] .site-nav .nav-short { display: inline; }
}

@media (max-width: 39.99rem) {
  .cards { margin: 0 calc(-1 * var(--gutter)); }
  .card > a {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .card-body { padding-inline: var(--gutter); }
  .funnel-card { margin-inline: var(--gutter); }
  .spot-photos img { border-radius: 0.625rem; }
}

@media (min-width: 68.75rem) {
  /* のみみち leaves the lockup and hangs vertical in the margin */
  .hero-ja {
    position: absolute;
    /* anchored to .hero, so clear the banner block above the h1 */
    top: calc(2.75rem + var(--alley-w) * 215 / 680 + var(--alley-gap));
    right: -5.75rem;
    margin: 0;
    writing-mode: vertical-rl;
    text-align-last: auto;
    font-size: 1.375rem;
    letter-spacing: 0.55em;
    opacity: 0.9;
  }
  .hero h1 > span + span { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .spot-photos { scroll-snap-type: none; }
}

/* -------------------------------------------- visitor sign-in, account, upload */

.signin { max-width: 26rem; }
.provider-list { display: grid; gap: 0.625rem; margin-top: 1.75rem; }
.btn-provider { width: 100%; min-height: 3rem; gap: 0.625rem; }
.provider-logo { width: 1.25rem; height: 1.25rem; flex: none; }
/* Apple's guidelines allow only a white or black button: white on this dark page. */
.btn-apple { background: #fff; color: #000; }
.btn-apple:hover { color: #000; }
.btn-google { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.btn-line { background: #06c755; color: #fff; }
.btn-line:hover { color: #fff; }
.btn-x { background: #000; border: 1px solid var(--line-strong); color: #fff; }
.btn-x:hover { color: #fff; }
.email-signin { display: grid; gap: 0.5rem; margin-top: 1.25rem; }
.upload-credit { font-size: 0.875rem; color: var(--ink-dim); }
.smoking-suggest { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--ink-dim); }
.smoking-unknown { color: var(--ink-dim); }
.review-card.review-card-text { grid-template-columns: 1fr; }
.upload-credit a { color: var(--lantern); }
.email-signin label, .form-field label { font-size: 0.875rem; color: var(--ink-dim); }
.email-signin input, .form-field input[type=text], .form-field textarea, .form-field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.625rem;
  background: var(--bg-raise);
  color: var(--ink);
  font: inherit;
}
.email-signin input:focus-visible, .form-field input:focus-visible,
.form-field textarea:focus-visible { outline: 2px solid var(--lantern); outline-offset: 1px; }
.login-note { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--ink-dim); }
.upload-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-field { display: grid; gap: 0.375rem; }
.form-field input[type=file] { color: var(--ink-dim); font-size: 0.9375rem; }
.check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; }
.check input { margin-top: 0.3rem; accent-color: var(--lantern); }
.inline-form { display: inline-block; margin: 0 0.5rem 0.5rem 0; }
.my-photos { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.my-photos li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.status { font-size: 0.8125rem; padding: 0.0625rem 0.5rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-dim); }
.status-live { border-color: rgb(255 138 61 / 0.6); color: var(--lantern); }
.status-reason { font-size: 0.8125rem; color: var(--ink-dim); }
.report-thumb { max-width: 16rem; border-radius: 0.625rem; margin: 1rem 0; }
.legal h3 { margin-top: 1.5rem; font-size: 1.0625rem; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.5rem; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1.25rem; font-size: 0.9375rem; }
.admin-tabs a { color: var(--ink-dim); text-decoration: none; }
.admin-tabs a[aria-current] { color: var(--lantern); font-weight: 700; }
.review-card { display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.review-card img { width: 100%; border-radius: 0.625rem; }
.review-body p { margin-bottom: 0.375rem; font-size: 0.9375rem; }
.review-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; }
.review-actions form { margin: 0; }
.reject-form { display: flex; gap: 0.375rem; }
.reject-form input { min-height: 2.75rem; padding: 0 0.625rem; border: 1px solid var(--line-strong); border-radius: 0.625rem; background: var(--bg-raise); color: var(--ink); }
.admin-photos figure.is-hidden img { opacity: 0.35; }
.admin-photos figcaption { font-size: 0.75rem; color: var(--ink-dim); }
@media (max-width: 40rem) { .review-card { grid-template-columns: 1fr; } }

/* --- Property "Nearby" pages (templates/near.html) --- */
.near { max-width: 46rem; margin: 0 auto; padding: 1rem 16px 2rem; }
.near-head h1 { margin: 0.5rem 0 0.25rem; }
.near-address, .near-credit { margin: 0.15rem 0; color: var(--muted, #b7aa95); }
.near-credit { font-size: 0.85rem; }
.near-map { height: 45vh; min-height: 220px; margin: 1rem 0; border-radius: 10px; }
.near-section h2 { margin: 1.5rem 0 0.5rem; }
.near-list { list-style: none; margin: 0; padding: 0; }
.near-item { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between;
  padding: 0.7rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.near-main { min-width: 0; }
.near-name { font-weight: 600; display: block; }
.near-name-ja { display: block; font-size: 0.85rem; color: var(--muted, #b7aa95); }
.near-meta { display: block; font-size: 0.85rem; color: var(--muted, #b7aa95); }
.near-note { margin: 0.25rem 0 0; font-size: 0.9rem; }
.near-go { flex: none; white-space: nowrap; }
.near-empty { margin: 2rem 0; }
.near-foot { margin-top: 2rem; font-size: 0.85rem; color: var(--muted, #b7aa95); }
.near-pick { display: inline-block; padding: 0 0.4em; border-radius: 4px; background: #e0893b; color: #1c1006; font-weight: 600; font-size: 0.75rem; }