/* ================================
   TROLLEY GUIDE — Newspaper Redesign v2
   Fixed px sizing (bypasses any root font-size scaling).
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Crimson+Text:wght@400;600&display=swap');

.pubsngrubs-trolley-guide {
  --ink: #241a10;
  --paper: #fbf5ea;
  --panel: #fefcf7;
  --brown: #8b5a2b;
  --brown-dark: #6b4423;
  --gold: #c8963e;
  --green-dark: #1e3028;
  --rule: rgba(139,90,43,.35);

  font-family: 'Crimson Text', Georgia, serif;
  font-size: 20px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  max-width: 100%;
  margin: 0 auto;
  padding: 110px 18px 60px;
  position: relative;
}
@media (max-width: 767px) {
  .pubsngrubs-trolley-guide { padding: 90px 16px 40px; font-size: 19px; }
}

.pubsngrubs-trolley-guide * { box-sizing: border-box; }

.pubsngrubs-trolley-guide .masthead { max-width: 720px; margin: 0 auto 8px; text-align: center; }
.pubsngrubs-trolley-guide .masthead-rule { border: none; border-top: 3px double var(--brown); margin: 0 0 16px; }
.pubsngrubs-trolley-guide .intro-flourish { font-size: 34px; color: var(--gold); text-align: center; margin: 8px 0; }
.pubsngrubs-trolley-guide h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.1;
  color: var(--brown);
  margin: 0 0 12px;
}
@media (max-width: 480px) { .pubsngrubs-trolley-guide h1 { font-size: 30px; } }
.pubsngrubs-trolley-guide .subtitle { font-style: italic; font-size: 18px; color: var(--brown-dark); margin: 0 0 8px; font-weight: 600; line-height: 1.5; }
.pubsngrubs-trolley-guide .subtitle.kicker { font-style: normal; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--brown); }

.pubsngrubs-trolley-guide .col { max-width: 68ch; margin: 0 auto; }

.pubsngrubs-trolley-guide h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  color: var(--brown);
  margin: 48px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rule);
}
.pubsngrubs-trolley-guide h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--brown-dark);
  margin: 30px 0 14px;
}

.pubsngrubs-trolley-guide p { font-size: 1em; line-height: 1.8; margin: 0 0 28px; text-align: left; }
.pubsngrubs-trolley-guide p.lede::first-letter {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 3.2em;
  float: left;
  line-height: 0.85;
  padding: 4px 10px 0 0;
  color: var(--brown);
}
.pubsngrubs-trolley-guide strong { color: var(--brown); font-weight: 700; }
.pubsngrubs-trolley-guide em { color: var(--brown-dark); }

.pubsngrubs-trolley-guide .divider { text-align: center; color: var(--brown); font-size: 22px; margin: 44px 0; letter-spacing: 0.3em; }

.pubsngrubs-trolley-guide .panel { background: linear-gradient(135deg, #f9f6f0, #f2ece0); border: 2px solid var(--brown); border-radius: 14px; padding: 24px 22px; margin: 30px 0; }
.pubsngrubs-trolley-guide .panel h3 { margin-top: 0; }
.pubsngrubs-trolley-guide .panel--soft { background: linear-gradient(135deg, #fff9e6, #fef4d6); border-style: dashed; border-color: var(--gold); font-style: italic; }
.pubsngrubs-trolley-guide .panel--schedule { background: linear-gradient(135deg, #fff2e6, #ffeedd); border-color: #d2691e; }
.pubsngrubs-trolley-guide .panel--schedule h3 { color: #d2691e; text-align: center; }
.pubsngrubs-trolley-guide .panel--tip { background: linear-gradient(135deg, #e8f4f0, #ddeee8); border: none; border-left: 5px solid var(--green-dark); border-radius: 0 12px 12px 0; }
.pubsngrubs-trolley-guide .panel--tip h3 { color: var(--green-dark); }
.pubsngrubs-trolley-guide .panel--dark { background: linear-gradient(135deg, #1a1205, #2c1e0a); color: #f5ead8; border-color: var(--brown); }
.pubsngrubs-trolley-guide .panel--dark h2, .pubsngrubs-trolley-guide .panel--dark h3 { color: var(--gold); }
.pubsngrubs-trolley-guide .panel--dark p { color: #f0e2c8; }
.pubsngrubs-trolley-guide .panel--dark strong { color: var(--gold); }
.pubsngrubs-trolley-guide .fact-rail { border-left: 3px solid var(--brown); padding-left: 18px; margin: 16px 0; color: #e8d5b0; font-size: 18px; line-height: 1.75; }

.pubsngrubs-trolley-guide .schedule-facts { display: flex; flex-direction: column; gap: 14px; font-size: 18px; }
.pubsngrubs-trolley-guide .schedule-fact { display: flex; align-items: flex-start; gap: 10px; }
.pubsngrubs-trolley-guide .schedule-fact .icon { font-size: 22px; flex-shrink: 0; }
.pubsngrubs-trolley-guide .schedule-note { margin: 16px 0 0; font-size: 16px; color: var(--brown-dark); border-top: 1px solid rgba(210,105,30,.3); padding-top: 14px; text-align: center; line-height: 1.6; }
.pubsngrubs-trolley-guide .schedule-note a { color: #d2691e; font-weight: 600; }

.pubsngrubs-trolley-guide .route-list { margin: 14px 0 0; padding: 0; list-style: none; font-size: 18px; }
.pubsngrubs-trolley-guide .route-list li { position: relative; padding-left: 28px; margin: 16px 0; line-height: 1.7; }
.pubsngrubs-trolley-guide .route-list li::before { content: '◆'; position: absolute; left: 0; color: var(--brown); }
.pubsngrubs-trolley-guide .panel--dark .route-list li::before { color: var(--gold); }

.pubsngrubs-trolley-guide blockquote.local-voice { background: var(--panel); border: 2px solid var(--brown); border-radius: 12px; padding: 34px 26px 22px; margin: 30px 0; position: relative; font-size: 19px; }
.pubsngrubs-trolley-guide blockquote.local-voice::before { content: '"'; position: absolute; top: -6px; left: 20px; font-family: 'Playfair Display', serif; font-size: 60px; color: var(--gold); background: var(--panel); padding: 0 8px; line-height: 1; }
.pubsngrubs-trolley-guide blockquote.local-voice p { font-style: italic; margin-bottom: 8px; line-height: 1.7; }
.pubsngrubs-trolley-guide blockquote.local-voice cite { font-style: normal; font-size: 16px; color: var(--brown-dark); }

.pubsngrubs-trolley-guide .cta-panel { background: linear-gradient(135deg, #fff9e6, #fef4d6); border: 2px solid var(--gold); border-radius: 14px; padding: 30px 24px; margin: 32px 0; text-align: center; box-shadow: 0 6px 18px rgba(200,150,62,0.22); font-size: 18px; }
.pubsngrubs-trolley-guide .cta-panel h3 { color: var(--brown); margin-top: 0; }
.pubsngrubs-trolley-guide .cta-panel p { font-size: 18px; margin-bottom: 12px; }
.pubsngrubs-trolley-guide .cta-sub { font-size: 15px; color: var(--brown-dark); font-style: italic; margin-top: 12px; }
.pubsngrubs-trolley-guide .identity-checks { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; max-width: 420px; margin-inline: auto; line-height: 2.1; font-size: 18px; }
.pubsngrubs-trolley-guide .identity-checks li::before { content: '✔ '; color: var(--brown); }

.pubsngrubs-trolley-guide .btn {
  display: inline-block;
  background: var(--brown);
  color: var(--panel);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 18px;
  padding: 16px 34px;
  min-height: 52px;
  border-radius: 8px;
  border: 2px solid var(--gold);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform .15s, background .2s;
}
.pubsngrubs-trolley-guide .btn:hover { background: var(--brown-dark); transform: translateY(-2px); }

.pubsngrubs-trolley-guide figure { margin: 30px 0; }
.pubsngrubs-trolley-guide .media-frame { border: 3px double var(--brown); border-radius: 10px; padding: 10px; background: linear-gradient(135deg, #f5f2ea, #ebe6dc); }
.pubsngrubs-trolley-guide figcaption { margin-top: 12px; font-style: italic; color: var(--brown-dark); font-size: 17px; text-align: center; line-height: 1.6; }
.pubsngrubs-trolley-guide .video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; }
.pubsngrubs-trolley-guide .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pubsngrubs-trolley-guide .media-frame img { width: 100%; height: auto; border-radius: 6px; display: block; }
.pubsngrubs-trolley-guide .photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .pubsngrubs-trolley-guide .photo-grid { grid-template-columns: repeat(3, 1fr); } }

.pubsngrubs-trolley-guide .bottom-border { margin-top: 54px; text-align: center; padding-top: 28px; border-top: 3px double var(--gold); font-style: italic; color: var(--brown-dark); font-size: 17px; line-height: 1.6; }

@media (min-width: 1000px) {
  .pubsngrubs-trolley-guide { padding-top: 130px; font-size: 21px; }
  .pubsngrubs-trolley-guide .col { max-width: 70ch; }
  .pubsngrubs-trolley-guide h1 { font-size: 46px; }
  .pubsngrubs-trolley-guide h2 { font-size: 33px; }
}

#png-trl-overlay { display: none; position: fixed; inset: 0; background: rgba(14,31,22,.84); z-index: 99999; justify-content: center; align-items: center; padding: 16px; backdrop-filter: blur(4px); }
#png-trl-modal { background: #0e1f16; border-radius: 20px; width: 100%; max-width: 860px; height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 40px rgba(14,31,22,.22); border: 1px solid rgba(200,150,62,.2); position: relative; }
#png-trl-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 22px; background: #1e3028; border-bottom: 1px solid rgba(200,150,62,.22); flex-shrink: 0; }
#png-trl-modal-title { color: #c8963e; font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; }
#png-trl-modal-close { background: none; border: none; color: #f7f0e3; font-size: 26px; cursor: pointer; padding: 0 4px; line-height: 1; opacity: .65; transition: opacity .15s; }
#png-trl-modal-close:hover { opacity: 1; color: #c8963e; }
#png-trl-spinner { position: absolute; inset: 58px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0e1f16; z-index: 2; transition: opacity .3s; }
#png-trl-spinner.gone { opacity: 0; pointer-events: none; }
.png-trl-spin-ring { width: 38px; height: 38px; border: 3px solid rgba(200,150,62,.25); border-top-color: #c8963e; border-radius: 50%; animation: png-trl-spin .8s linear infinite; margin-bottom: 14px; }
@keyframes png-trl-spin { to { transform: rotate(360deg); } }
#png-trl-spinner p { color: #f7f0e3; font-size: 15px; opacity: .65; margin: 0; }
#png-trl-blocked { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; color: #f7f0e3; flex: 1; }
#png-trl-blocked a { background: #c8963e; color: #0e1f16; padding: 13px 26px; border-radius: 40px; font-weight: 700; text-decoration: none; margin-top: 16px; display: inline-block; }
#png-trl-iframe { flex: 1; width: 100%; border: none; display: block; position: relative; z-index: 1; }