/* ============================================================
   31-shinzan — DEPTH LAYER
   Loaded last, after site.css, media.css and modern.css.

   WHY THIS SITE NEEDED A DIFFERENT ANSWER FROM ITS NEIGHBOURS.
   Every other thin page in the estate had unused photographs sitting
   on disk. This one had none: all five were already on the page, so
   nothing could be added by simply showing more. The depth here comes
   from three places instead, and not one of them is a new claim:

     1. The menu sheet the shop publishes on its own Google listing was
        being used as a 1:1 thumbnail in a four-up grid. It is a
        legible document. It is now transcribed in full beside the
        photograph it was read from, so the reader can check every line
        against the source without leaving the page.
     2. Verified facts already in data/tabelog-31-50.json that the page
        never surfaced: the day-by-day hours, cash-only payment, the
        budget band, and the walk from all three Sannomiya stations.
     3. A real type scale. h3 did not exist on this page. A section
        heading, a menu category, a dish name and a price now sit in
        four visibly different registers.

   IDENTITY UNTOUCHED: Shippori Antique display, M PLUS 1 Code body,
   kelp-green #9db863 accent, radius 0. Nothing below sets a colour or
   a family that site.css did not already define.

   Reference for token discipline: `notion` (per the brief's table) for
   the restraint, and `editorial-grid-magazine` from ui-ux-pro-max for
   the asymmetric figure/caption rhythm. Neither was copied as a look:
   this is a ramen counter under a railway viaduct, not a workspace app.
   ============================================================ */

:root {
  /* ---- Type registers ----
     The page had h1, h2 and body. Everything between a section heading
     and a paragraph was doing its work with weight alone, which is why
     a price and a dish name read as the same thing. Five steps, one
     ratio (1.2), all fluid. */
  --d-micro: 0.72rem;   /* the tracked label above a block           */
  --d-small: 0.85rem;   /* captions, provenance, notes               */
  --d-body:  1rem;
  --d-dish:  clamp(0.98rem, 0.95rem + 0.2vw, 1.08rem);
  --d-h3:    clamp(1.12rem, 1rem + 0.6vw, 1.45rem);
  --d-lede:  clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --d-huge:  clamp(2.4rem, 1.4rem + 4.6vw, 4.2rem);

  --d-gap:   clamp(1.5rem, 4vw, 2.75rem);
}

/* ---- The level that was missing ---------------------------------
   h3 count on this page before today: zero. Section headings sat
   directly on top of undifferentiated lists. */
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--d-h3);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.d-micro {
  display: block;
  font-size: var(--d-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.d-lede { font-size: var(--d-lede); line-height: 1.9; max-width: 34em; }
.d-note { font-size: var(--d-small); line-height: 1.75; color: var(--muted); }

/* ---- Full-bleed band --------------------------------------------
   The page was a single 1096px column from top to bottom. One band
   that breaks the column is the cheapest structural variety there is.
   100vw rather than 100% because the band must ignore .wrap. */
.d-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: 100vw;
}

/* ---- Editorial lead figure ---------------------------------------
   A photograph with a caption that says where it came from. The
   caption is not decoration here: these are the shop's Google Maps
   photographs, not the owner's own, and saying so on the picture is
   more honest than one line in the footer. */
.d-fig { margin: 0; }
.d-fig figcaption,
.d-cap {
  margin-top: 0.7rem;
  font-size: var(--d-small);
  line-height: 1.7;
  color: var(--muted);
  max-width: 46em;
}
.d-fig figcaption b { color: var(--text); font-weight: 700; }

/* Portrait, landscape and document ratios, so a column of photographs
   is never four identical squares. */
.d-ratio-3x2 { aspect-ratio: 3 / 2; }
.d-ratio-4x5 { aspect-ratio: 4 / 5; }
.d-ratio-5x7 { aspect-ratio: 5 / 7; }

/* ---- Asymmetric split --------------------------------------------
   Deliberately not 1fr 1fr. An even split reads as a table; an uneven
   one reads as a page. Single column below 860px, because these
   customers are standing outside the shop on a phone. */
.d-split { display: grid; gap: var(--d-gap); align-items: start; }
@media (min-width: 860px) {
  .d-split { grid-template-columns: 1.15fr 0.85fr; }
  .d-split.is-flipped { grid-template-columns: 0.85fr 1.15fr; }
  .d-split.is-flipped > :first-child { order: 2; }
}

/* ---- The shop's own words ----------------------------------------
   Handwritten across the menu sheet, in marker, beside an arrow
   pointing at the tsukemen. It is the shop explaining its own
   signature dish better than we could, so it is set as the shop said
   it and attributed to the sheet it is written on. */
.d-quote {
  margin: 0;
  padding: 1.4rem 0 0 1.25rem;
  border-left: 2px solid var(--accent);
}
.d-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1.55;
  letter-spacing: 0.03em;
}
.d-quote footer {
  margin-top: 0.9rem;
  padding: 0;
  border: 0;
  font-size: var(--d-small);
  color: var(--muted);
}

/* ---- Fact strip ---------------------------------------------------
   Three verified numbers, set at a size that says they matter. Hairline
   dividers rather than boxes: this site's radius is 0 and a rounded
   card would be a borrowed idea from another shop's stylesheet. */
.d-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .d-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.d-fact {
  padding: 1.1rem 1rem 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .d-fact + .d-fact { padding-left: 1.25rem; border-left: 1px solid var(--line); }
}
.d-fact dt {
  font-size: var(--d-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.d-fact dd {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.d-fact dd small { display: block; font-size: var(--d-small); font-weight: 400; color: var(--muted); }

/* ---- The menu -----------------------------------------------------
   .menu-grid is named for motion-init.js, whose GROUPS selector
   already staggers the children of that class. Reusing the name gets
   the arrival animation without adding a second motion file.

   Two columns from 720px. A menu is read in columns on paper and there
   is no reason for a screen to be worse at it. */
.menu-grid { display: grid; gap: 2.25rem; }
@media (min-width: 720px) { .menu-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 3rem; } }

.menu-cat > h3 {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--accent);
  margin-bottom: 0.35rem;
}
.menu-cat .cat-note {
  margin: 0.55rem 0 0.2rem;
  font-size: var(--d-small);
  color: var(--muted);
}

.d-rows { list-style: none; margin: 0; padding: 0; }
.d-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line);
}
.d-row .n { font-size: var(--d-dish); font-weight: 500; }
.d-row .d { flex: 1 1 auto; min-width: 1.5rem; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.d-row .p {
  font-size: var(--d-dish);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The house sets are starred on the shop's own sheet. The star is the
   shop's mark, not ours, so it is reproduced rather than invented. */
.d-row.is-star .n { font-weight: 700; }
.d-row.is-star .p { color: var(--accent); }
.d-row .sub { display: block; font-size: var(--d-small); font-weight: 400; color: var(--muted); line-height: 1.6; }

/* ---- Hours table --------------------------------------------------
   site.css has always carried a proper table treatment for .hours. The
   pages were using a <dl>, which that CSS cannot reach, so seven
   distinct opening times collapsed into four vague lines. Markup now
   matches the stylesheet that was written for it. */
.hours { font-variant-numeric: tabular-nums; }
.hours caption {
  text-align: left;
  font-size: var(--d-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  padding-bottom: 0.6rem;
}
.hours tbody tr.late td { color: var(--accent); }

/* ---- Numbered route ----------------------------------------------
   No .steps rule existed on this site. Three stations, three walks,
   and the JR one is measured in seconds. */
.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; }
.steps li {
  counter-increment: st;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
/* The counter spans both rows; the name and the walk both sit in the
   second column. Without the explicit placement the <span> lands in the
   2rem counter column on the next row and renders one character per
   line, which is exactly what the first render showed. */
.steps li::before {
  content: counter(st);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--accent);
}
.steps b { grid-column: 2; grid-row: 1; display: block; font-size: var(--d-dish); }
.steps span { grid-column: 2; grid-row: 2; color: var(--muted); font-size: var(--d-small); line-height: 1.7; }

/* ---- Photograph pair ---------------------------------------------
   Two photographs, different shapes, different weights. The four-up
   square grid this replaces gave every picture the same importance,
   which is padding wearing a grid's clothes. */
.d-pair { display: grid; gap: 0.75rem; }
@media (min-width: 720px) { .d-pair { grid-template-columns: 1.25fr 0.75fr; gap: 1rem; align-items: end; } }

/* ---- Section rhythm ----------------------------------------------
   Alternating grounds so the page does not read as five identical
   stacked blocks. --bg-2 is the site's own second surface. */
.d-ground { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- Reveal for the new blocks -----------------------------------
   site.css owns .rv and media.js owns the four-second failsafe. These
   elements simply opt in, so the no-JS page is the ordinary page. */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .d-fig img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .d-fig:hover img { transform: scale(1.02); }
}

/* ---- Layout safety ------------------------------------------------
   A full-bleed child inside a page that also scrolls horizontally is
   the classic cause of a 400px-wide 390px phone. */
body { overflow-x: hidden; }
.wrap > * { min-width: 0; }

/* ---- Opening band --------------------------------------------------
   The hero was a full viewport of type with the photograph below the
   fold. On a phone outside the shop that is a screen of words before
   any evidence the place exists. The headline block now sizes to its
   content and the shopfront runs full width directly beneath it, so
   the first screen carries both. */
.hero { min-height: auto; padding: calc(var(--nav-h) + 3rem) 0 2.25rem; }
.d-band-fig { aspect-ratio: 4 / 3; }
@media (min-width: 720px) { .d-band-fig { aspect-ratio: 21 / 9; } }
.d-band-fig img { object-position: center 42%; }
.d-band-cap { padding-top: 0.7rem; }

/* ---- The shop's own star ------------------------------------------
   Three items on the sheet are marked with a hand-inked star. The note
   under the menu refers to that mark, so the mark has to be on the
   page: a note explaining a symbol the reader cannot see is worse than
   no note. Reproduced, not invented. */
.d-row.is-star .n::before {
  content: "★";
  margin-right: 0.4em;
  font-size: 0.82em;
  color: var(--accent);
}

/* ---- The menu sheet is a document, not a picture -------------------
   object-fit: cover crops, and cropping a price list loses lines. The
   frame takes the photograph's own ratio so the whole sheet is inside
   it, and `contain` guarantees it even if the file is ever re-cropped. */
.d-ratio-doc { aspect-ratio: 140 / 163; }
.d-doc img { object-fit: contain; background: var(--bg-3); }

/* ---- Document beside its transcription -----------------------------
   FIRST DESKTOP RENDER WAS WRONG and the screenshot showed why: the
   asymmetric split gave the photograph the wide column and the menu the
   narrow one, so dish names broke mid-word ("特製醤油そ / ば") beside a
   picture that needed no room. The evidence is a rail; the prices are
   the content. Photograph capped at 340px, transcription takes the rest.
   Below 900px it is one column, photograph first: see the sheet, then
   read what it says. */
.menu-doc { display: grid; gap: var(--d-gap); align-items: start; }
@media (min-width: 900px) {
  .menu-doc { grid-template-columns: minmax(260px, 330px) 1fr; }
}

/* The ラーメン block is twelve rows and the other three are two to eight.
   Left to auto-placement, row 1 takes the height of the tallest block and
   the short one beside it sits above a hole the size of a paragraph.
   Pinning the long block down the first column makes the other three
   stack against it. */
@media (min-width: 720px) {
  .menu-grid { align-items: start; }
  .menu-grid > .menu-cat:first-child { grid-column: 1; grid-row: 1 / span 3; }
}

/* ---- Provenance line inside a caption ------------------------------
   RENDER BUG, caught by looking at the English page: the caption text
   ends in a full stop and the provenance <span> followed it inline, so
   it read "…carries the cafe'u mark.Photograph from the shop's Google
   Maps page." Japanese hid it because 。 carries its own trailing space.
   The provenance is a separate statement and now sits on its own line
   in all three languages. */
figcaption .d-note { display: block; margin-top: 0.35rem; }