/* ============================================================
   44-jitokko — DEPTH LAYER
   Loaded last: after site.css, media.css and uplift.css.

   THE ONE DECISION THAT MATTERS ON THIS SITE.
   The page shipped with four Wikimedia stock photographs of generic
   grilled chicken, correctly labelled （イメージ写真）, and with four
   photographs of the actual branch sitting unused on disk. One of them,
   photo-04.jpg, has the shop's own signage in frame:

       みやざき地鶏 / 炙り焼き専門店 / 鶏ごて王 GOTE-OU 三宮店

   which identifies this branch and no other. A franchise prospect whose
   page shows its own door beats one showing satay skewers from Pattaya,
   so the stock is off the page and the real photographs carry it.
   The files stay on disk; nothing was deleted.

   EXCLUDED ON PURPOSE: photo-05.jpg's sibling, photo-01.jpg, is a
   perfectly legible lunch menu with eleven real prices — and its header
   reads 〜ごて王総本店ランチ〜. That is the OTHER branch. The dossier is
   explicit that the two must never be merged, so those prices are not on
   this page and the 品書き stays honestly 確認中. See the page comment.

   IDENTITY UNTOUCHED: Stick display, Noto Sans JP body, flame orange
   #e08a30, radius 4px, wrap 1080px. Nothing below sets a colour or a
   family site.css did not already define; the spacing and type steps
   come from uplift.css.

   Reference per the brief: `starbucks` for food warmth, plus
   `editorial-grid-magazine` from ui-ux-pro-max for the asymmetric
   figure-and-caption rhythm. `dark-mode-oled` and `cyberpunk-ui`, which
   is what that database actually returns for "charcoal chicken izakaya
   dark", were ignored for the reason the brief predicted.
   ============================================================ */

:root {
  --d-micro: 0.74rem;
  --d-small: 0.86rem;
  --d-gap: clamp(1.5rem, 4vw, 2.75rem);
}

/* ---- The missing level -------------------------------------------
   h3 count before today: zero. */
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  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: var(--s-3);
}
.d-note { font-size: var(--d-small); line-height: 1.75; color: var(--muted); }
.d-lede { font-size: var(--t-lg); line-height: 1.85; max-width: 34em; }

/* ---- Opening ------------------------------------------------------
   A full viewport of type before any photograph is the wrong first
   screen for a shop whose customer is standing in Kitanagasa-dori
   holding a phone. The hero now sizes to its content and the door is
   immediately under it. */
.hero { min-height: auto; padding: calc(var(--nav-h) + var(--s-10)) 0 var(--s-8); }
@media (min-width: 900px) {
  .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--d-gap); align-items: center; }
  .hero .eyebrow, .hero h1, .hero-sub, .hero-ctas { grid-column: 1; }
  .hero-media { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; align-self: center; }
}

/* ---- Figures ------------------------------------------------------
   Every photograph on this page is now a real photograph of the branch,
   and every one of them carries where it came from. */
.d-fig { margin: 0; }
.d-fig figcaption,
.d-cap {
  margin-top: var(--s-3);
  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; }

.d-ratio-3x2 { aspect-ratio: 3 / 2; }
.d-ratio-4x5 { aspect-ratio: 4 / 5; }
.d-ratio-9x16 { aspect-ratio: 9 / 16; }
.d-ratio-wide { aspect-ratio: 16 / 9; }

/* ---- Full-bleed band ---------------------------------------------- */
.d-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: 100vw; }
.d-band-fig { aspect-ratio: 4 / 3; }
@media (min-width: 720px) { .d-band-fig { aspect-ratio: 21 / 9; } }
.d-band-cap { padding-top: var(--s-3); }

/* ---- Asymmetric split --------------------------------------------- */
.d-split { display: grid; gap: var(--d-gap); align-items: start; }
@media (min-width: 860px) {
  .d-split { grid-template-columns: 0.95fr 1.05fr; }
  .d-split.is-flipped { grid-template-columns: 1.05fr 0.95fr; }
}

/* ---- What the sign says -------------------------------------------
   The shopfront photograph carries four lines of the shop's own
   signage. Setting them as type, beside the photograph they were read
   from, is the cheapest true depth available to a franchise branch that
   publishes nothing else. Not a claim: a transcription, and the
   evidence is in the frame. */
.d-sign {
  margin: 0;
  padding: var(--s-5) 0 0 var(--s-4);
  border-left: 2px solid var(--accent);
}
.d-sign p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.5vw, 1.95rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.d-sign footer {
  margin-top: var(--s-3);
  font-size: var(--d-small);
  color: var(--muted);
}

/* ---- Fact strip ---------------------------------------------------- */
.d-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .d-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.d-fact { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) {
  .d-fact + .d-fact { padding-left: var(--s-5); 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: var(--s-1);
}
.d-fact dd {
  font-size: var(--t-lg); font-weight: 700; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.d-fact dd small { display: block; font-size: var(--d-small); font-weight: 400; color: var(--muted); }

/* ---- Still to come ------------------------------------------------
   The branch publishes no menu and no closing day, and this page will
   not invent either. What it can do is stop presenting the gap as two
   dead rows in a price list and present it as what it actually is: the
   short list of things we will collect from the owner in one visit.
   That list doubles as the ask in the meeting. */
.d-todo { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .d-todo { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-8); } }
.d-todo li {
  list-style: none;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}
.d-todo b { display: block; font-size: var(--t-base); font-weight: 700; margin-bottom: var(--s-1); }
.d-todo span { display: block; font-size: var(--d-small); color: var(--muted); line-height: 1.7; }
.d-todo .tag {
  display: inline-block;
  margin-bottom: var(--s-2);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--d-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* ---- Route --------------------------------------------------------
   The counter spans both rows so the walking note sits under the
   station name rather than in the 2rem numeral column. */
.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 var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.steps li::before {
  content: counter(st);
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.15rem; line-height: 1.6;
  color: var(--accent);
}
.steps b { grid-column: 2; grid-row: 1; font-size: var(--t-base); }
.steps span { grid-column: 2; grid-row: 2; color: var(--muted); font-size: var(--d-small); line-height: 1.7; }

/* ---- Section rhythm ------------------------------------------------ */
.d-ground { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

@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); }
}

body { overflow-x: hidden; }
.wrap > * { min-width: 0; }

/* ---- 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; }