/*
 * Look v3 (round 3 look, owner 18 Oct 2026; on for Kyoto 21 Oct 2026, Tokyo
 * waits for the owner's decision). Linked by BaseLayout in place of
 * src/styles/journal.css when city.json has "look": "v3"; scripts/city/stage.mjs
 * copies this folder into public/ for those cities only, so a city without
 * the switch (Tokyo) builds byte for byte as before. Record: reports/look-v3.md.
 *
 * Three parts: the Libre Caslon Text faces, the journal stylesheet as the
 * look-v3 worker rewrote it, and the scoped component rules the worker changed
 * (MapApp, /events/, /live-music/), restated here under a selector that
 * outranks Astro's scoped [data-astro-cid] rules.
 */

/* Libre Caslon Text (SIL OFL 1.1, /fonts/OFL-LibreCaslonText.txt): page titles
   and big numbers only. One latin subset per style. */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/libre-caslon-text-normal-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/libre-caslon-text-normal-700-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/libre-caslon-text-italic-400-latin.woff2) format('woff2');
}

/*
 * Journal look (SITE_STYLE = 'journal' in src/lib/features.ts).
 *
 * Linked by BaseLayout only in journal mode, and every rule is scoped under
 * html[data-style="journal"], so setting SITE_STYLE = 'classic' restores the
 * previous look exactly. Page markup is untouched: this file restyles the
 * existing classes of the shared shell, post pages, the guides hub and the
 * neighbourhood guides. The interactive map (.app-wrap) keeps its own tokens.
 *
 * Type: Newsreader (Google Fonts) for headlines, dek lines and article text;
 * Inter stays for navigation, labels and small UI text; the logo stays
 * Playfair Display.
 */

html[data-style="journal"] {
  --paper:        #fcfbf9;
  --paper-deep:   #f6f5f3;
  --ink:          #2a2622;
  --ink-soft:     #45403a;
  --muted:        #66625d;
  --border:       #e6e3df;
  --border-tag:   #e0ddd8;
  --border-hover: #d3cfca;
  --bg-subtle:    #f6f5f3;
  --white:        #ffffff;
  --red-ink:      #b3212d;
  --radius:       6px;
  --radius-tag:   4px;
  --shadow-sm:    none;
  --shadow:       none;
  --serif:        'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --serif-read:   'Newsreader', 'Newsreader Fallback Georgia', 'Newsreader Fallback Noto', 'Newsreader Fallback Times', Georgia, 'Times New Roman', serif;
  background: var(--paper);
}

/* The map application takes the same palette, radius and flat look. */
html[data-style="journal"] .app-wrap {
  --ink:       #2a2622;
  --ink-soft:  #45403a;
  --muted:     #66625d;
  --border:    #e6e3df;
  --bg-subtle: #f6f5f3;
  --white:     #ffffff;
  --radius:    6px;
  --shadow-sm: none;
  --shadow:    none;
}

html[data-style="journal"] body {
  background: var(--paper);
  color: var(--ink);
}

html[data-style="journal"] ::selection { background: #f4d6d2; }

/* ------------------------------------------------------------------ */
/* Shell: header and footer                                            */
/* ------------------------------------------------------------------ */

/* Solid paper rather than 94% paper over a 10px backdrop blur: the blur was
   barely visible and made phones repaint the sticky header on every scroll
   frame (Oct 2026). */
html[data-style="journal"] .site-header {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--ink);
}

html[data-style="journal"] .nav-links a {
  color: var(--ink-soft);
  border-radius: 0;
  padding: 0.4rem 0.7rem;
}

html[data-style="journal"] .nav-links a:hover {
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--border);
}

html[data-style="journal"] .nav-links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

html[data-style="journal"] .lang-switch a:hover,
html[data-style="journal"] .lang-current { background: transparent; }
html[data-style="journal"] .lang-current { text-decoration: underline; text-underline-offset: 4px; }

html[data-style="journal"] .nav-menu-btn {
  background: transparent;
  border-color: var(--border);
  border-radius: 2px;
}

html[data-style="journal"] .nav-menu-list {
  background: var(--paper);
  border-color: var(--ink);
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(30, 28, 25, 0.12);
}

html[data-style="journal"] .nav-menu-list a { border-radius: 0; }
html[data-style="journal"] .nav-menu-list a[aria-current="page"] { color: var(--red-ink); }

html[data-style="journal"] .site-footer {
  background: var(--paper-deep);
  border-top: 1px solid var(--ink);
}

html[data-style="journal"] .footer-tagline {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1rem;
}

html[data-style="journal"] .footer-col-title {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

html[data-style="journal"] .footer-col a { color: var(--ink-soft); font-size: 0.85rem; }
html[data-style="journal"] .footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Serif headings for every content page outside the map application.
   Page-specific rules below set sizes and weights. */
/* Page titles are set in the serif and section headings in Inter: see the
   round 3 section at the end of this file. */

/* Breadcrumbs, wherever a page has them */
html[data-style="journal"] .crumbs { font-size: 0.78rem; }
html[data-style="journal"] .crumb-sep { color: var(--muted); }

/* ------------------------------------------------------------------ */
/* Post pages (PostLayout, src/pages/[...slug].astro, French guides)   */
/* ------------------------------------------------------------------ */

/* Headline first, then the photo: the usual order for a magazine story. */
html[data-style="journal"] .article { display: flex; flex-direction: column; max-width: 720px; }
html[data-style="journal"] .article > * { order: 3; }
html[data-style="journal"] .article > .crumbs { order: 0; }
html[data-style="journal"] .article > .article-header { order: 1; }
html[data-style="journal"] .article > .hero-figure { order: 2; }

html[data-style="journal"] .article-header { margin-bottom: 2rem; }

html[data-style="journal"] .meta-neighborhood,
html[data-style="journal"] .meta-human {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

html[data-style="journal"] .meta-neighborhood { color: var(--red-ink); }
html[data-style="journal"] .meta-human { color: var(--ink-soft); }

html[data-style="journal"] .article-title {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}

html[data-style="journal"] .article-desc {
  font-family: var(--serif-read);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink-soft);
  border-left: 0;
  padding-left: 0;
}

html[data-style="journal"] .byline {
  margin-top: 1.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

html[data-style="journal"] .byline a { color: var(--ink); }
html[data-style="journal"] .byline a:hover { color: var(--red-ink); }

html[data-style="journal"] .hero-figure { margin: 0 0 2.5rem; }
html[data-style="journal"] .hero-img { border-radius: 0; height: auto; aspect-ratio: 16 / 10; max-height: 480px; }
html[data-style="journal"] .hero-credit { text-align: left; font-size: 0.74rem; }

html[data-style="journal"] .prose {
  font-family: var(--serif-read);
  font-size: 1.2rem;
  line-height: 1.68;
  color: var(--ink);
}

html[data-style="journal"] .prose h2 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2.75rem 0 0.8rem;
}

html[data-style="journal"] .prose h3 {
  font-family: var(--font);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 2rem 0 0.5rem;
}

html[data-style="journal"] .prose strong { font-weight: 650; color: var(--ink); }

html[data-style="journal"] .prose a {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--red) 60%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html[data-style="journal"] .prose a:hover { color: var(--red-ink); text-decoration-color: var(--red); }

html[data-style="journal"] .prose blockquote {
  background: transparent;
  border-left: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink-soft);
  padding: 0.1rem 0 0.1rem 1.25rem;
}

html[data-style="journal"] .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* Tables and figures stay in the UI face for legibility at small sizes. */
html[data-style="journal"] .prose .table-wrap {
  font-family: var(--font);
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}

html[data-style="journal"] .prose thead th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  background: transparent;
  border-bottom: 1px solid var(--ink);
}

html[data-style="journal"] .prose tbody tr:nth-child(even) td { background: transparent; }
html[data-style="journal"] .prose tbody td { border-bottom-color: var(--border); }

html[data-style="journal"] .prose .post-figure img { border-radius: 0; }
html[data-style="journal"] .prose .post-figure figcaption { font-family: var(--font); }

/* "Places in this guide" gallery */
html[data-style="journal"] .prose .post-gallery { font-family: var(--font); border-top: 1px solid var(--ink); }
html[data-style="journal"] .prose .post-gallery h2 { font-size: 1.5rem; }
html[data-style="journal"] .post-gallery-card { border: 0; border-radius: 0; background: transparent; }
html[data-style="journal"] .post-gallery-card:hover { transform: none; }
html[data-style="journal"] .post-gallery-card:hover .post-gallery-name { text-decoration: underline; text-underline-offset: 3px; }
html[data-style="journal"] .post-gallery-name { font-family: var(--serif-read); font-size: 1.05rem; font-weight: 600; padding: 0.55rem 0 0; }
html[data-style="journal"] .post-gallery-meta,
html[data-style="journal"] .post-gallery-credit { padding-left: 0; padding-right: 0; }

/* Map link and hotel block after the story */
html[data-style="journal"] .map-cta {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 1rem 0;
}

html[data-style="journal"] .map-cta:hover { box-shadow: none; }
html[data-style="journal"] .map-cta:hover .map-cta-title { text-decoration: underline; text-underline-offset: 4px; }
html[data-style="journal"] .map-cta-icon { background: transparent; border: 0; width: 28px; color: var(--ink-soft); }
html[data-style="journal"] .map-cta-title { font-family: var(--serif-read); font-size: 1.15rem; }
html[data-style="journal"] .map-cta-arrow { color: var(--ink); }

html[data-style="journal"] .hotel-block {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  padding: 1.25rem 0 0;
}

html[data-style="journal"] .hotel-block-title { font-size: 1.5rem; font-weight: 600; }

/* Related reading (RelatedPosts) and the translated editions' list */
html[data-style="journal"] .related { border-top: 1px solid var(--ink); }
html[data-style="journal"] .related-title,
html[data-style="journal"] .related-tr-title { font-family: var(--serif-read); font-size: 1.5rem; font-weight: 600; }
html[data-style="journal"] .related-link { border-radius: 0; background: transparent; border-left: 0; border-right: 0; border-top: 0; padding-left: 0; padding-right: 0; }
html[data-style="journal"] .related-list { gap: 0; }
html[data-style="journal"] .related-link:hover { background: transparent; box-shadow: none; transform: none; }
html[data-style="journal"] .related-post-title { font-family: var(--serif-read); font-size: 1.15rem; }
html[data-style="journal"] .related-badge {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  background: transparent;
}
html[data-style="journal"] .related-tr { border-top-color: var(--ink); }
html[data-style="journal"] .related-tr-list a { font-family: var(--serif-read); font-size: 1.15rem; }

/* ------------------------------------------------------------------ */
/* Guides hub (/guides/)                                               */
/* ------------------------------------------------------------------ */

html[data-style="journal"] .g-head {
  max-width: none;
  text-align: left;
  margin: 0 0 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 3px double var(--ink);
}

html[data-style="journal"] .g-eyebrow {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--red-ink);
  margin-bottom: 0.3rem;
}

html[data-style="journal"] .g-title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

html[data-style="journal"] .g-sub {
  font-family: var(--serif-read);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 680px;
}

html[data-style="journal"] .g-head + .g-section .g-cat { border-top: 0; padding-top: 0; }

html[data-style="journal"] .g-cat {
  font-size: 1.5rem;
  font-weight: 600;
  padding: 0.6rem 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--ink);
  margin-bottom: 1.25rem;
}

html[data-style="journal"] .g-badge,
html[data-style="journal"] .g-count {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
}

html[data-style="journal"] .g-grid { gap: 2rem 1.75rem; }

html[data-style="journal"] .g-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

html[data-style="journal"] .g-card:hover { box-shadow: none; transform: none; }
html[data-style="journal"] .g-card:hover .g-card-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

html[data-style="journal"] .g-card .g-card-img {
  width: 100%;
  margin: 0 0 0.6rem;
  border: 0;
}

html[data-style="journal"] .g-card-hood {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--red-ink);
}

html[data-style="journal"] .g-card-name {
  font-family: var(--serif-read);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

html[data-style="journal"] .g-card-desc { font-size: 0.86rem; color: var(--ink-soft); }
html[data-style="journal"] .g-card-date { padding-top: 0.25rem; }

html[data-style="journal"] .g-foot { border-top-color: var(--ink); justify-content: flex-start; gap: 1.75rem; }

/* ------------------------------------------------------------------ */
/* Buttons that are really links: plain underlined text in this look  */
/* (guides hub footer, neighbourhood actions and footers)              */
/* ------------------------------------------------------------------ */

html[data-style="journal"] :is(.g-foot, .hood-actions, .hood-foot) :is(.btn-dark, .btn-light) {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.2rem 0;
  color: var(--ink);
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 5px;
}

html[data-style="journal"] :is(.g-foot, .hood-actions, .hood-foot) .btn-dark {
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}

html[data-style="journal"] :is(.g-foot, .hood-actions, .hood-foot) :is(.btn-dark, .btn-light):hover {
  background: transparent;
  color: var(--red-ink);
}

/* ------------------------------------------------------------------ */
/* Neighbourhood guides (/neighbourhoods/<slug>/)                      */
/* ------------------------------------------------------------------ */

html[data-style="journal"] .hood { max-width: 740px; }

html[data-style="journal"] .hood-hero { border-radius: 0; }
html[data-style="journal"] .hood-hero-credit { text-align: left; }

html[data-style="journal"] .hood-kicker {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--red-ink);
  margin-bottom: 0.2rem;
}

html[data-style="journal"] .hood-title {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: 0.6rem;
}

html[data-style="journal"] .hood-tagline {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--ink);
}

html[data-style="journal"] :is(.hood-intro, .hood-body-para, .hood-prose-para) {
  font-family: var(--serif-read);
  font-size: 1.18rem;
  line-height: 1.68;
  color: var(--ink);
}

html[data-style="journal"] .hood-intro::first-letter {
  font-size: 3.4em;
  float: left;
  line-height: 0.85;
  padding: 0.08em 0.1em 0 0;
  font-weight: 500;
}

html[data-style="journal"] .hood-getting-there {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0.9rem 0;
}

html[data-style="journal"] .gt-label {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

html[data-style="journal"] .gt-text { font-size: 0.92rem; }

html[data-style="journal"] .hood-stats {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  gap: 0 2rem;
}

html[data-style="journal"] .hood-stats .stat { background: transparent; padding: 0.4rem 0 0.8rem; flex: 0 1 auto; }
html[data-style="journal"] .hood-stats .stat-wide { flex: 1 1 auto; }
html[data-style="journal"] .stat-label {
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

html[data-style="journal"] .hood-minimap { border-radius: 0; border: 1px solid var(--border); }
html[data-style="journal"] .hood-minimap:hover { box-shadow: none; transform: none; border-color: var(--ink); }
html[data-style="journal"] .minimap-hint { border-radius: 0; box-shadow: none; background: color-mix(in srgb, var(--paper) 90%, transparent); }

html[data-style="journal"] .hood-prose-title,
html[data-style="journal"] .hood .section-label,
html[data-style="journal"] .hotel-title {
  font-family: var(--serif-read);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: none;
  color: var(--ink);
}

html[data-style="journal"] .hood .section-label {
  padding-top: 0.6rem;
  border-top: 1px solid var(--ink);
  margin-bottom: 1.1rem;
}

html[data-style="journal"] :is(.best-card, .nearby-card, .guide-card, .itin-card) {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

html[data-style="journal"] :is(.best-card, .nearby-card, .guide-card, .itin-card):hover { box-shadow: none; transform: none; }
html[data-style="journal"] :is(.best-card, .nearby-card, .guide-card, .itin-card):hover :is(.best-name, .nearby-name, .guide-card-name, .itin-name) { text-decoration: underline; text-underline-offset: 3px; }

html[data-style="journal"] .best-grid { gap: 0 1.75rem; }
html[data-style="journal"] .nearby-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1.25rem; align-items: start; }
html[data-style="journal"] .nearby-card { border-bottom: 0; padding-top: 0; }
html[data-style="journal"] .nearby-name { font-size: 1.05rem; }
html[data-style="journal"] .guides-grid { gap: 0; }

html[data-style="journal"] .best-thumb { border-radius: 0; }

html[data-style="journal"] :is(.best-label, .spot-cat, .guide-card-read) {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 0.92rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

html[data-style="journal"] .best-label { color: var(--red-ink); }
html[data-style="journal"] .guide-card-read { color: var(--ink-soft); }

html[data-style="journal"] :is(.best-name, .nearby-name, .spot-name, .guide-card-name, .itin-name) {
  font-family: var(--serif-read);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
}

html[data-style="journal"] .spot-grid { gap: 1.75rem 1.5rem; }

html[data-style="journal"] .spot-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

html[data-style="journal"] .spot-card:hover { box-shadow: none; transform: none; }
html[data-style="journal"] .spot-card:hover .spot-name { text-decoration: underline; text-underline-offset: 3px; }
html[data-style="journal"] .spot-thumb { height: auto; aspect-ratio: 3 / 2; }
html[data-style="journal"] .spot-body { padding: 0.6rem 0 0; }
html[data-style="journal"] .spot-desc { color: var(--ink-soft); }

html[data-style="journal"] .itin-duration { background: transparent; padding: 0; border-radius: 0; }

html[data-style="journal"] .hotel-index a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }

html[data-style="journal"] .hood-foot { border-top-color: var(--ink); justify-content: flex-start; gap: 1.75rem; }

@media (max-width: 700px) {
  html[data-style="journal"] .nearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  html[data-style="journal"] .spot-grid { gap: 0; }
  html[data-style="journal"] .spot-card { border-bottom: 1px solid var(--border); padding: 0.75rem 0; }
  html[data-style="journal"] .spot-thumb { aspect-ratio: auto; }
  html[data-style="journal"] .spot-body { padding: 0 0 0 0.9rem; }
  html[data-style="journal"] .hero-figure { margin-left: -1rem; margin-right: -1rem; }
  html[data-style="journal"] .hero-credit { padding: 0 1rem; }
  html[data-style="journal"] .prose { font-size: 1.12rem; }
}

/* ------------------------------------------------------------------ */
/* French hub (/fr/)                                                   */
/* ------------------------------------------------------------------ */

html[data-style="journal"] .fr-eyebrow {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--red-ink);
}

html[data-style="journal"] .fr-head { padding-bottom: 1.25rem; border-bottom: 3px double var(--ink); }
html[data-style="journal"] .fr-title { font-weight: 500; letter-spacing: -0.02em; }
html[data-style="journal"] .fr-lead { font-family: var(--serif-read); font-size: 1.2rem; line-height: 1.55; }
html[data-style="journal"] .fr-hub .fr-lead a,
html[data-style="journal"] .fr-hub .fr-more a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
html[data-style="journal"] .fr-grid { gap: 2rem 1.75rem; }
html[data-style="journal"] .fr-card { border: 0; border-radius: 0; background: transparent; }
html[data-style="journal"] .fr-card:hover { transform: none; }
html[data-style="journal"] .fr-card:hover .fr-card-title { text-decoration: underline; text-underline-offset: 4px; }
html[data-style="journal"] .fr-card-body { padding: 0.6rem 0 0; }
html[data-style="journal"] .fr-kicker {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--red-ink);
}
html[data-style="journal"] .fr-card-title { font-family: var(--serif-read); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
html[data-style="journal"] .fr-card-desc { color: var(--ink-soft); }
html[data-style="journal"] .fr-more { border-top-color: var(--ink); }
html[data-style="journal"] .fr-h2 { font-weight: 600; font-size: 1.5rem; }

/* ------------------------------------------------------------------ */
/* Photo galleries (PhotoGallery) and collection pages                 */
/* ------------------------------------------------------------------ */

html[data-style="journal"] .photo-gallery-title { font-family: var(--serif-read); font-size: 1.4rem; font-weight: 600; }
html[data-style="journal"] .photo-link { border-radius: 0; }
html[data-style="journal"] .hood-figure img { border-radius: 0; }

/* The owner's own photos and notes (Oct 2026): the place and venue photo
   strip, the "Own photo" badge and "Daniel's take" in the paper palette. */
html[data-style="journal"] .photo-strip .photo-gallery-title { font-size: 1.15rem; font-style: italic; font-weight: 400; color: var(--ink-soft); }
html[data-style="journal"] .owner-badge { border-radius: 0; background: var(--red-ink); }
html[data-style="journal"] .daniel-take {
  background: transparent;
  border-left: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 1rem 0 1.1rem;
}
html[data-style="journal"] .dt-label { font-family: var(--serif-read); font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: var(--red-ink); }
html[data-style="journal"] .dt-label a { color: inherit; }
html[data-style="journal"] .dt-date { color: var(--muted); }
html[data-style="journal"] .dt-text p { font-family: var(--serif-read); font-size: 1.15rem; line-height: 1.6; color: var(--ink); }
html[data-style="journal"] .detail-take { background: transparent; border-radius: 0; border-left-color: var(--red-ink); }
html[data-style="journal"] .take-text { font-family: var(--serif-read); font-size: 0.98rem; color: var(--ink); }
html[data-style="journal"] .take-more { color: var(--red-ink); }

html[data-style="journal"] .col { max-width: 740px; }
html[data-style="journal"] .col-hero img { border-radius: 0; }
html[data-style="journal"] .col-hero-credit { text-align: left; }

html[data-style="journal"] .col-kicker {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--red-ink);
  margin-bottom: 0.2rem;
}

html[data-style="journal"] .col-title {
  font-size: clamp(2.2rem, 5.5vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 0.6rem;
}

html[data-style="journal"] .col-tagline {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.4;
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--ink);
}

html[data-style="journal"] .col-intro { font-family: var(--serif-read); font-size: 1.18rem; line-height: 1.68; color: var(--ink); }

html[data-style="journal"] .col-stats {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  gap: 0 2rem;
}

html[data-style="journal"] .col-stats .stat { background: transparent; padding: 0.6rem 0; flex: 0 1 auto; }

html[data-style="journal"] .col .section-label {
  font-family: var(--serif-read);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  padding-top: 0.6rem;
  border-top: 1px solid var(--ink);
  margin-bottom: 1.1rem;
}

html[data-style="journal"] :is(.col-actions, .col-foot) .btn-dark {
  background: transparent;
  border-radius: 0;
  padding: 0.2rem 0;
  color: var(--ink);
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

html[data-style="journal"] :is(.col-actions, .col-foot) .btn-dark:hover { background: transparent; color: var(--red-ink); }
html[data-style="journal"] .col-foot { border-top-color: var(--ink); justify-content: flex-start; }

html[data-style="journal"] .col-glance {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.8rem 0 1rem;
}
html[data-style="journal"] .glance-title { font-family: var(--serif-read); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; }
html[data-style="journal"] .glance-asof { font-family: var(--serif-read); font-style: italic; font-size: 0.95rem; }
html[data-style="journal"] .glance-text { font-family: var(--serif-read); font-size: 1.05rem; color: var(--ink); }

html[data-style="journal"] .more-row { gap: 1.5rem 1.25rem; }
html[data-style="journal"] .more-card { border: 0; border-radius: 0; background: transparent; padding: 0; overflow: visible; }
html[data-style="journal"] .more-card:hover { box-shadow: none; }
html[data-style="journal"] .more-card:hover .more-name { text-decoration: underline; text-underline-offset: 3px; }
html[data-style="journal"] .more-card .more-thumb { width: 100%; margin: 0 0 0.35rem; }
html[data-style="journal"] .more-name { font-family: var(--serif-read); font-size: 1.15rem; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Light touches elsewhere: the about page and place pages             */
/* ------------------------------------------------------------------ */

html[data-style="journal"] .about .eyebrow,
html[data-style="journal"] .place-cat {
  font-family: var(--serif-read);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--red-ink);
}

html[data-style="journal"] .about .about-lead { font-family: var(--serif-read); font-size: 1.3rem; line-height: 1.5; color: var(--ink-soft); }
html[data-style="journal"] .about .about-section h2 { font-size: 1.5rem; font-weight: 600; }
html[data-style="journal"] .about .about-section a {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--red) 60%, transparent);
  text-underline-offset: 3px;
}
html[data-style="journal"] .about .about-photo,
html[data-style="journal"] .about .about-photo img { border-radius: 0; }
html[data-style="journal"] .about .about-photo figcaption { font-family: var(--serif-read); font-style: italic; font-size: 0.9rem; }

/* The map's dates box used a hard-coded cool grey; match the paper palette. */
html[data-style="journal"] #trip-panel { background: var(--bg-subtle); }

/* Place pages (Sept 2026): the guide passages, the events, the neighbourhood
   note and the section titles follow the neighbourhood guides' serif look. */
html[data-style="journal"] .place .section-label {
  font-family: var(--serif-read);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: none;
  color: var(--ink);
  padding-top: 0.6rem;
  border-top: 1px solid var(--ink);
  margin-bottom: 1.1rem;
}
html[data-style="journal"] .place .passage { border-left: 0; padding-left: 0; }
html[data-style="journal"] .place .passage-text { font-family: var(--serif-read); font-size: 1.12rem; line-height: 1.65; color: var(--ink); }
html[data-style="journal"] .place .passage-from { font-family: var(--serif-read); font-style: italic; font-size: 0.95rem; }
html[data-style="journal"] .place .hood-kicker { font-family: var(--serif-read); font-style: italic; font-weight: 400; font-size: 1.08rem; color: var(--red-ink); }
html[data-style="journal"] .place :is(.hood-intro, .hood-summary) { font-family: var(--serif-read); font-size: 1.05rem; color: var(--ink); }
html[data-style="journal"] .place .nearby-card-snippet { font-family: var(--serif-read); font-size: 0.88rem; }
html[data-style="journal"] .place .more-name { font-family: var(--serif-read); font-size: 1.02rem; font-weight: 600; }
html[data-style="journal"] .place :is(.section-more a, .hood-summary a, .passage-from a) { color: var(--red-ink); }
html[data-style="journal"] .place .nearby-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
@media (max-width: 560px) {
  html[data-style="journal"] .place .nearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Touch screens (Oct 2026): the buttons this look turns into text links
   (guides hub, neighbourhood and collection pages) keep a 44px hit area. */
@media (pointer: coarse) {
  html[data-style="journal"] :is(.g-foot, .hood-actions, .hood-foot, .col-actions, .col-foot) :is(.btn-dark, .btn-light) {
    padding-block: 0.7rem;
  }
}

/* Place pages (Oct 2026): the address and hours box under the title reads as
   a ruled note, like the facts elsewhere in this look. */
html[data-style="journal"] .place .place-key {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0.1rem 0 0.5rem;
}
html[data-style="journal"] .place .key-today { font-family: var(--serif-read); font-size: 1.12rem; font-weight: 600; }
html[data-style="journal"] .place .key-addr { font-family: var(--serif-read); font-size: 1.05rem; }
html[data-style="journal"] .place .key-label,
html[data-style="journal"] .place .key-season { font-family: var(--serif-read); font-style: italic; font-size: 0.95rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* "On the map" block on the events and live music pages (src/components/MapCta.astro).
   Phones: a rule above it and no box, so it costs the list as little height as possible. */
html[data-style="journal"] .onmap {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--ink);
  padding: 0.6rem 0 0;
}
html[data-style="journal"] .onmap-line { font-family: var(--serif-read); font-size: 0.98rem; line-height: 1.35; color: var(--ink); }
html[data-style="journal"] .onmap-tile { background: #efe9df; }
@media (min-width: 700px) {
  html[data-style="journal"] .onmap { border-bottom: 1px solid var(--border); padding: 0.75rem 0; }
  html[data-style="journal"] .onmap-line { font-size: 1.02rem; }
}

/* ================================================================== */
/* Round 3 look (owner, 18 Oct 2026: "I like the round 3 look")        */
/*                                                                      */
/* White paper, near-black ink, light grey hairlines, 6px corners (4px  */
/* on filter tags), no shadows, Inter for navigation and section        */
/* headings, a serif (Libre Caslon Text) for page titles and big        */
/* numbers only. Red stays on the logo, active nav, primary buttons and */
/* small labels (--red-ink). The tokens are at the top of this file and */
/* in BaseLayout; docs/features/design.md has the table. Map pins are   */
/* changed on .marker-pin only, never on .map-marker (MapLibre owns its */
/* transform). Mockup this came from: mockups/look-reskin-2026-10/.     */
/* ================================================================== */

/* ---- Headings: serif for page titles only, Inter semibold elsewhere ----- */
html[data-style="journal"] :is(h2, h3, h4, .ev-h2, .evc-title, .side-title, .map-about-title, .hl-name, .card-name) {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.005em;
  word-spacing: normal;
  color: var(--ink);
}
html[data-style="journal"] :is(h1, .ev-title, .article-title) {
  font-family: var(--serif);
  font-weight: 700;
  word-spacing: 0.08em;
  color: var(--ink);
}
html[data-style="journal"] .ev-title { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.12; }
html[data-style="journal"] main h1 { line-height: 1.15; letter-spacing: -0.01em; }
html[data-style="journal"] main h1 em,
html[data-style="journal"] main h1[class*="tagline"],
html[data-style="journal"] .fp-h1,
html[data-style="journal"] .hero-line { font-weight: 400; }
html[data-style="journal"] .fp-h1 { font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem); }
html[data-style="journal"] .app-wrap .m-search-input { border: 0; background: transparent; }
html[data-style="journal"] .app-wrap .m-search { border: 0; background: transparent; }
html[data-style="journal"] .side-title { font-size: 1.3rem; }

/* ---- Header and navigation: Inter, one hairline, red active underline --- */
html[data-style="journal"] .site-header {
  background: var(--white);
  border-top: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
html[data-style="journal"] .nav-links a,
html[data-style="journal"] .lang-switch a,
html[data-style="journal"] .lang-current,
html[data-style="journal"] .nav-menu-list a,
html[data-style="journal"] .app-nav-links a {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
html[data-style="journal"] .nav-links a { padding: 0.55rem 0.7rem; }
html[data-style="journal"] .nav-links a:hover { text-decoration: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--border-hover); }
html[data-style="journal"] .nav-links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--red);
}
html[data-style="journal"] .lang-switch a,
html[data-style="journal"] .lang-current { font-size: 0.8rem; letter-spacing: 0.04em; }
html[data-style="journal"] .lang-current { text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); }
html[data-style="journal"] .nav-menu-list a { border-radius: 4px; }

/* ---- Eyebrows and small labels: letter-spaced red ----------------------- */
html[data-style="journal"] .eyebrow,
html[data-style="journal"] .hl-cat,
html[data-style="journal"] .detail-cat,
html[data-style="journal"] .meta-neighborhood {
  color: var(--red-ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ---- Buttons: 6px, one primary ------------------------------------------ */
html[data-style="journal"] :is(.btn-primary, .onmap-btn, .plan-open, .m-done) {
  border-radius: 6px;
  box-shadow: none;
  background: var(--red-fill);
  color: #fff;
  border: 1px solid var(--red-fill);
  text-transform: none;
  letter-spacing: 0.01em;
}
html[data-style="journal"] :is(.btn-secondary, select, .sub-copy, .evc-select) {
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: none;
}
html[data-style="journal"] .btn-secondary { font-weight: 500; }
html[data-style="journal"] .onmap-tile { border-radius: 6px; }
html[data-style="journal"] .onmap-btn { padding-right: 1rem; }
html[data-style="journal"] .onmap-btn,
html[data-style="journal"] .onmap-btn * { box-shadow: none; }

/* ---- Hairlines between sections ----------------------------------------- */
html[data-style="journal"] :is(.ev-section-head, .evc-head) { border-top: 1px solid var(--border); padding-top: 1.1rem; }
html[data-style="journal"] :is(.ev-year, .ev-highlights, .evc) { border-top: 0; }
html[data-style="journal"] .ev-gigs,
html[data-style="journal"] .onmap { border-color: var(--border); border-radius: 6px; }

/* ---- Events: stat tiles, season note, cards ------------------------------ */
html[data-style="journal"] .ev-stats div {
  background: var(--bg-subtle);
  color: var(--ink);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}
html[data-style="journal"] .ev-stats div * { color: inherit; opacity: 1; }
html[data-style="journal"] .ev-stats dt {
  font-family: var(--font);
  font-variant: all-small-caps;
  text-transform: none;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--muted);
}
html[data-style="journal"] .ev-stats dd {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: 0;
  color: var(--ink);
}
html[data-style="journal"] .ev-season {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 6px;
}
html[data-style="journal"] .hl-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
  overflow: hidden;
}
html[data-style="journal"] .hl-img { border-radius: 0; }
html[data-style="journal"] :is(.year-month, .ev-row, .evc-day) { border-radius: 6px; }
html[data-style="journal"] .year-month { background: var(--white); border: 1px solid var(--border); box-shadow: none; }
html[data-style="journal"] .year-month.is-current { background: var(--white); color: var(--ink); box-shadow: inset 0 -3px 0 var(--red); }
html[data-style="journal"] .year-month.is-current,
html[data-style="journal"] .year-month.is-current * { background: var(--white); color: var(--ink); }
html[data-style="journal"] .year-month.is-current .ym-label { color: var(--red-ink); }

/* ---- Filter tags: 4px, light grey border, small coloured square --------- */
html[data-style="journal"] :is(.chip, .evtype, .evc-chip, .tagchip, .mchip, .onmap-pill) {
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border-tag);
  box-shadow: none;
  font-weight: 500;
}
html[data-style="journal"] .tagchip { border-color: var(--border-tag); color: var(--ink-soft); font-weight: 400; }
html[data-style="journal"] :is(.chip.active, .evtype[aria-pressed="true"], .evc-chip[aria-pressed="true"], .tagchip.active, .tagchip[aria-pressed="true"]) {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
html[data-style="journal"] :is(.chip-icon, .evtype-swatch, .evc-dot) {
  border-radius: 2px;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
html[data-style="journal"] .chip .saved-count,
html[data-style="journal"] .evc-n,
html[data-style="journal"] .evtype-n { border-radius: 3px; }
html[data-style="journal"] .chip-heart { color: var(--red); }

/* ---- Map panel ------------------------------------------------------------ */
html[data-style="journal"] .sidebar { background: var(--white); border-right: 1px solid var(--border); box-shadow: none; }
html[data-style="journal"] .app-wrap .m-bar,
html[data-style="journal"] .app-wrap .m-search,
html[data-style="journal"] .app-wrap .m-pills > *,
html[data-style="journal"] .app-wrap .m-seg,
html[data-style="journal"] .app-wrap .m-icon-btn { border-radius: 6px; box-shadow: none; }
html[data-style="journal"] .app-wrap .m-bar,
html[data-style="journal"] .app-wrap .m-pills > * { background: var(--white); border: 1px solid var(--border); }
html[data-style="journal"] .app-wrap .m-search { border-radius: 0; }
html[data-style="journal"] .app-wrap .m-sheet { border-radius: 12px 12px 0 0; box-shadow: 0 -1px 6px rgba(0,0,0,.06); }
html[data-style="journal"] .app-wrap .sheet-handle { box-shadow: none; }
html[data-style="journal"] .side-head { border-bottom: 0; }
html[data-style="journal"] .m-count { font-family: var(--font); }

/* The dates control: light grey border, small-caps label, solid Apply */
html[data-style="journal"] .sidebar :is(.trip-panel, form.trip-panel) {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
}
html[data-style="journal"] .trip-panel-label {
  font-family: var(--font);
  font-variant: all-small-caps;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
}
html[data-style="journal"] .trip-panel-label svg { display: none; }
html[data-style="journal"] .trip-summary { font-variant: all-small-caps; letter-spacing: 0.08em; color: var(--muted); }
html[data-style="journal"] .trip-field-label {
  font-variant: all-small-caps;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--muted);
}
html[data-style="journal"] .stay-date-input,
html[data-style="journal"] .stay-filter-select,
html[data-style="journal"] .search-input,
html[data-style="journal"] .evc-search {
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: none;
}
html[data-style="journal"] .trip-apply,
html[data-style="journal"] .trip-apply:not(:disabled) {
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  box-shadow: none;
  font-weight: 600;
}
html[data-style="journal"] .trip-apply:disabled { background: var(--ink); color: #fff; border-color: var(--ink); opacity: .85; }
html[data-style="journal"] .trip-note,
html[data-style="journal"] .trip-status { color: var(--muted); }

/* Places / Events / Live music segmented control */
html[data-style="journal"] .show-seg {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
html[data-style="journal"] .show-opt {
  background: transparent;
  border-radius: 4px;
  box-shadow: none;
  color: var(--ink);
}
html[data-style="journal"] .show-opt[aria-pressed="true"],
html[data-style="journal"] .show-opt.active,
html[data-style="journal"] .show-opt[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}
html[data-style="journal"] .show-n { border-radius: 3px; background: rgba(0,0,0,.08); color: inherit; }

/* Cards in the list: soft corners, hairline between */
html[data-style="journal"] .place-card { border-radius: 6px; box-shadow: none; border-bottom: 1px solid var(--border); }
html[data-style="journal"] .card-dot { border-radius: 6px; background: var(--cat-soft, #f1f1ef); }
html[data-style="journal"] .card-thumb { border-radius: 6px; }
html[data-style="journal"] .card-hood { color: var(--red-ink); letter-spacing: 0.1em; }
html[data-style="journal"] .heart { box-shadow: none; }

/* ---- Map pins: current teardrop shape, 15% smaller, ringed, muted -------
   Only .marker-pin (and the event tile) is touched. .map-marker keeps
   MapLibre's transform. Sizes: 34 -> 29px, far dot 18 -> 15px. */
html[data-style="journal"] .marker-pin {
  width: 29px;
  height: 29px;
  background: color-mix(in srgb, var(--cat, #6b7280) 92%, #8c8c8c);
  border: 2px solid #fff;
  box-shadow: none;
  font-size: 13px;
}
html[data-style="journal"] .zoom-far .marker-pin {
  width: 15px;
  height: 15px;
  border-width: 1.5px;
  font-size: 0;
}
html[data-style="journal"] .map-marker:hover .marker-pin,
html[data-style="journal"] .map-marker.marker-hover .marker-pin { box-shadow: none; }
html[data-style="journal"] .map-marker.marker-active .marker-pin,
html[data-style="journal"] .zoom-far .map-marker.marker-active .marker-pin {
  box-shadow: none;
  width: 29px;
  height: 29px;
  font-size: 13px;
}
html[data-style="journal"] .marker-pin::before { border-radius: 4px; }
html[data-style="journal"] .pin-count { box-shadow: none; }
html[data-style="journal"] .event-pin { box-shadow: none; filter: saturate(0.88); }

/* Slightly paler map; controls softly rounded, at most a very faint shadow */
html[data-style="journal"] .app-wrap .maplibregl-canvas { filter: saturate(0.7) contrast(0.96) brightness(1.03); }
html[data-style="journal"] .maplibregl-ctrl-group { border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid var(--border); background: var(--white); }
html[data-style="journal"] .maplibregl-ctrl-attrib { border-radius: 4px; box-shadow: none; background: color-mix(in srgb, var(--white) 85%, transparent); }
html[data-style="journal"] .maplibregl-ctrl-group button { border-radius: 0; }
html[data-style="journal"] .stay-mini-btn,
html[data-style="journal"] .sc-label { border-radius: 6px; box-shadow: none; }

/* ---- Live music list --------------------------------------------------------- */
html[data-style="journal"] main input[type="search"],
html[data-style="journal"] main input[type="text"] {
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--border);
}
html[data-style="journal"] main :is(button, summary, label)[class*="gig"],
html[data-style="journal"] main [class*="gig"] :is(button, select) { border-radius: 6px; }
html[data-style="journal"] main [class*="gl-"] :is(button, select, input) { border-radius: 6px; border-color: var(--border); background: var(--white); }
html[data-style="journal"] main [class*="gig"] [class*="tag"],
html[data-style="journal"] main [class*="gig"] [class*="genre"],
html[data-style="journal"] main [class*="gig"] [class*="badge"] { border-radius: 4px; }
html[data-style="journal"] main [class*="gig"] [class*="thumb"],
html[data-style="journal"] main [class*="gig"] [class*="mono"],
html[data-style="journal"] main [class*="gig"] img { border-radius: 6px; }

/* ---- Footer ---------------------------------------------------------------- */
html[data-style="journal"] .site-footer { background: var(--white); border-top: 1px solid var(--border); }
html[data-style="journal"] .footer-col-title { font-family: var(--font); letter-spacing: 0.12em; }

/* Shared shell: 6px on inputs and buttons */
html[data-style="journal"] :is(input, select, textarea, button, summary, dialog, .map-faq-item, .nav-menu-list) { border-radius: 6px; }
html[data-style="journal"] .evc-chip.evc-select { font-size: 1rem; padding: 0.35rem 0.8rem; }
html[data-style="journal"] .evc-arrow { border: 1px solid var(--border); background: var(--white); border-radius: 6px; }

/* ---- Late fixes: body copy stays Inter, no double rule on the homepage --- */
html[data-style="journal"] :is(.fp-feature-dek, .onmap-line, .onmap-line *, .onmap-extra) { font-family: var(--font); font-style: normal; }
html[data-style="journal"] .fp-mast { border-bottom: 1px solid var(--border); }
html[data-style="journal"] .fp-mast-title, html[data-style="journal"] .fp-mast h1 { font-weight: 400; }

/* ---- Scoped component rules of the round 3 look ----
   html:root[data-look="v3"][data-style="journal"] is (0,3,1), enough to beat a
   scoped rule of up to three compound selectors (each gets a [data-astro-cid]). */

/* MapApp.astro */
html:root[data-look="v3"][data-style="journal"] .side-title { font-family: var(--serif); font-size: 1.3rem; letter-spacing: -0.005em; }
html:root[data-look="v3"][data-style="journal"] #trip-panel { border-radius: var(--radius); }
html:root[data-look="v3"][data-style="journal"] .trip-field-label { font-size: 0.8rem; font-variant: all-small-caps; letter-spacing: 0.12em; }
html:root[data-look="v3"][data-style="journal"] .trip-apply { border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); font-weight: 600; }
html:root[data-look="v3"][data-style="journal"] .trip-apply:disabled { background: var(--ink); color: #fff; opacity: 0.85; }
html:root[data-look="v3"][data-style="journal"] .show-seg { gap: 2px; padding: 2px; background: var(--white); border-radius: var(--radius); }
html:root[data-look="v3"][data-style="journal"] .show-opt { border-radius: var(--radius); }
html:root[data-look="v3"][data-style="journal"] .show-opt[aria-pressed="true"] { background: var(--ink); color: var(--white); box-shadow: none; }
@media (max-width: 899px) {
  html:root[data-look="v3"][data-style="journal"] .m-sheet-body .evtype { border-radius: var(--radius); }
  html:root[data-look="v3"][data-style="journal"] .m-hotel-item { border-radius: var(--radius); }
  html:root[data-look="v3"][data-style="journal"] .m-hotel-item.hotel-fix { border-radius: var(--radius) var(--radius) 0 0; }
}

/* events/index.astro */
html:root[data-look="v3"][data-style="journal"] .ev-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -0.015em; }
html:root[data-look="v3"][data-style="journal"] .ev-stats div { background: var(--bg-subtle); color: var(--ink); border-radius: var(--radius); }
html:root[data-look="v3"][data-style="journal"] .ev-stats dt { font-weight: 600; font-variant: all-small-caps; text-transform: none; opacity: 1; color: var(--muted); }
html:root[data-look="v3"][data-style="journal"] .ev-stats dd { font-family: var(--serif); font-size: 2.3rem; font-weight: 700; letter-spacing: normal; }
html:root[data-look="v3"][data-style="journal"] .ev-h2 { font-weight: 600; letter-spacing: -0.005em; }
html:root[data-look="v3"][data-style="journal"] .year-month a,
html:root[data-look="v3"][data-style="journal"] .year-month > span { border-radius: var(--radius); }
html:root[data-look="v3"][data-style="journal"] .year-month.is-current a { background: var(--white); border-color: var(--border); color: var(--ink); box-shadow: inset 0 -3px 0 var(--red); }
html:root[data-look="v3"][data-style="journal"] .year-month.is-current a:hover { border-color: var(--red); }
html:root[data-look="v3"][data-style="journal"] .year-month.is-current .ym-label { color: var(--red-ink); opacity: 1; }
html:root[data-look="v3"][data-style="journal"] .year-month.is-current .ym-unit { color: var(--ink-soft); opacity: 1; }
html:root[data-look="v3"][data-style="journal"] .hl-name { font-weight: 600; letter-spacing: -0.005em; }
@media (max-width: 760px) {
  html:root[data-look="v3"][data-style="journal"] .ev-stats dd { font-size: 1.7rem; }
}

/* live-music/index.astro */
html:root[data-look="v3"][data-style="journal"] .lm-title { letter-spacing: -0.01em; }

/* ---- Softer colours (owner, 22 Oct 2026: "make the colours not so vibrant") ----
   Category colours from traditional Japanese pigments instead of the stock web
   palette, and a warm ink (above) instead of near-black for text and selected
   controls. Mockups: reports/mockups/look-v3-colours/. */
html[data-look="v3"] .cat-shrine { --cat: #b9402d; }
html[data-look="v3"] .cat-park { --cat: #5f7a3a; }
html[data-look="v3"] .cat-viewpoint { --cat: #2f5277; }
html[data-look="v3"] .cat-food { --cat: #c56a2c; }
html[data-look="v3"] .cat-cafe { --cat: #6b4a36; }
html[data-look="v3"] .cat-nightlife { --cat: #5e3a5a; }
html[data-look="v3"] .cat-museum { --cat: #3b7385; }
html[data-look="v3"] .cat-shopping { --cat: #b25a6e; }
html[data-look="v3"] .cat-market { --cat: #a7832f; }
html[data-look="v3"] .cat-landmark { --cat: #5f5e58; }
html[data-look="v3"] .cat-neighborhood { --cat: #3f7c69; }
html[data-look="v3"] .cat-daytrip { --cat: #7d7a3d; }
html[data-look="v3"] .cat-special { --cat: #8b2f3c; }
html[data-look="v3"] .cat-bath { --cat: #283c5e; }
html[data-look="v3"] .evcat-festival { --cat-color: #b9402d; }
html[data-look="v3"] .evcat-market { --cat-color: #a7832f; }
html[data-look="v3"] .evcat-exhibition { --cat-color: #3b7385; }
html[data-look="v3"] .evcat-garden { --cat-color: #5f7a3a; }
html[data-look="v3"] .evcat-food { --cat-color: #c56a2c; }
html[data-look="v3"] .evcat-illumination { --cat-color: #6f5f93; }
html[data-look="v3"] .evcat-performance { --cat-color: #b25a6e; }
html[data-look="v3"] .evcat-anime { --cat-color: #2f7d7a; }
html[data-look="v3"] .evcat-sports { --cat-color: #4f6378; }
html[data-look="v3"] .event-pin { filter: none; }