/* Osaka: コテコテ signboard. Osaka Metro navy for ink, Tsutenkaku yellow and takoyaki-stand
   vermilion for the loud bits, a rounded pop face for the title, and diagonal hazard stripes
   instead of Tokyo's screentone. Layout is shared; only tokens and a few signs change. */
:root[data-city="osaka"] {
  --ground: #fbf3e4;
  --surface: #fffaf1;
  --ink: #0d2a5c;
  --ink-soft: #4d5872;
  --rule: #d6ccb8;
  --stamp: #e2421f;
  --signal: #ffd200;
  --ticket: #dcebf6;
  --font-display: "Mochiy Pop One", "Dela Gothic One", "BIZ UDPGothic", sans-serif;

  --tone-color: rgb(13 42 92 / 0.1);
  --tone: repeating-linear-gradient(-45deg, var(--tone-color) 0 3px, transparent 3px 9px);
}

/* The title as a shop sign: navy letters, a fat yellow outline-shadow, vermilion drop. */
:root[data-city="osaka"] .title {
  letter-spacing: 0.01em;
  text-shadow:
    2px 2px 0 var(--signal), -2px 2px 0 var(--signal), 2px -2px 0 var(--signal), -2px -2px 0 var(--signal),
    0 3px 0 var(--signal), 3px 0 0 var(--signal);
}
:root[data-city="osaka"] .title::before {
  transform: translate(0.07em, 0.12em);
  background: var(--stamp);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}

/* The masthead's top rule becomes a black-and-yellow hazard band. */
:root[data-city="osaka"] .masthead { border-top: 0; padding-top: 22px; }
:root[data-city="osaka"] .masthead::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--signal) 10px 20px);
}

/* Osaka Metro's mark is a blue circle: so is the edition roundel. */
:root[data-city="osaka"] .edition-code { border-color: #0072bc; color: #0072bc; }

:root[data-city="osaka"] .cities a[aria-current] { background: var(--stamp); border-color: var(--stamp); }
:root[data-city="osaka"] .linestrip { height: 8px; gap: 4px; }
:root[data-city="osaka"] .linestrip span { border-radius: 4px; }
:root[data-city="osaka"] .btn-ink:hover { background: #1b3d7a; }