/* ============================================================================
   ST ANDREWS FRESHERS GUIDE — STYLES
   You can tweak colours below. The rest controls layout — edit with care.
   ============================================================================ */

:root {
  --navy:        #0a2240;   /* St Andrews deep blue */
  --navy-soft:   #14305a;
  --blue:        #1f5dab;
  --blue-bright: #2e7bd6;
  --sand:        #f4efe6;   /* warm paper background */
  --sand-deep:   #e7ddc9;
  --stone:       #6b7280;
  --ink:         #1c2433;
  --cream:       #fbf8f2;
  --gold:        #c8a44d;
  --green:       #2e8b57;
  --white:       #ffffff;
  --radius:      16px;
  --shadow:      0 12px 40px rgba(10, 34, 64, 0.10);
  --shadow-sm:   0 4px 16px rgba(10, 34, 64, 0.08);
  --serif:       "Fraunces", "Georgia", "Times New Roman", serif;
  --sans:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* One shared easing curve so every hover/reveal feels calm and consistent. */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sand);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); line-height: 1.2; color: var(--navy); font-weight: 600; font-optical-sizing: auto; }

a { color: var(--blue); }

img { max-width: 100%; }

/* Text selection in the brand colours - a tiny touch of warmth. */
::selection { background: var(--navy); color: var(--cream); }

/* Visible keyboard focus for links, buttons and inputs. Only shows for
   keyboard users (:focus-visible), so it never appears on mouse clicks. */
:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On dark/navy backgrounds and the hero photo, blue-on-navy is hard to see —
   use gold there for contrast. */
.bg-navy :focus-visible,
.hero :focus-visible { outline-color: var(--gold); }

/* Respect users who've asked for less motion: drop the scroll animation and
   the reveal-on-scroll fade-ups, and make sure nothing stays hidden. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section__head { max-width: 720px; margin-bottom: 44px; }
.section__head h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; }
.section__head p { font-size: 18px; color: var(--stone); }
/* Optional credit chip under a page intro, naming who wrote the page. A span,
   not a paragraph, so the intro's own type rules don't apply to it. */
.byline {
  display: inline-block; margin-top: 20px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: #8a6d2f; background: rgba(200, 164, 77, 0.14);
  border: 1px solid rgba(200, 164, 77, 0.45);
  border-radius: 999px; padding: 7px 16px;
}
.bg-navy .byline { color: var(--gold); background: rgba(200, 164, 77, 0.16); border-color: rgba(200, 164, 77, 0.5); }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 14px;
}

/* ---- NAV --------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 242, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sand-deep);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav__brand { display: flex; align-items: center; text-decoration: none; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark__city { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--navy); letter-spacing: -0.01em; }
.wordmark__sub {
  font-family: var(--sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #9a7a2e; margin-top: 4px;
}

/* burger button */
.burger {
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
  background: var(--white); border: 1px solid var(--sand-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s, border-color .15s;
}
.burger:hover { border-color: var(--blue); }
.burger span {
  display: block; width: 22px; height: 2.4px; background: var(--navy); border-radius: 2px;
  transform-origin: center; transition: transform .25s ease, opacity .2s ease;
}
.burger--open span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.burger--open span:nth-child(2) { opacity: 0; }
.burger--open span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

/* dropdown menu panel */
.nav__scrim { position: fixed; inset: 64px 0 0; background: rgba(10,34,64,0.25); z-index: 40; }
.menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 45;
  background: var(--cream); border-bottom: 1px solid var(--sand-deep);
  box-shadow: var(--shadow); overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .2s ease;
}
.menu--open { max-height: calc(100vh - 64px); opacity: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.menu .wrap { padding-top: 16px; padding-bottom: 22px; }
.menu__home {
  display: block; font-family: var(--serif); font-weight: 700; color: var(--navy);
  text-decoration: none; padding: 10px 12px; border-bottom: 1px solid var(--sand-deep); margin-bottom: 6px;
}
/* One block per section: a heading that links to the section hub, then its
   pages laid out two-up (one-up on phones). */
.menu__section { margin-top: 10px; }
.menu__section-title {
  display: block; text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--blue);
  padding: 8px 12px 6px;
}
.menu__section-title:hover { color: var(--blue-bright); text-decoration: underline; }
.menu__links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu__standalone { margin-top: 14px; border-top: 1px solid var(--sand-deep); padding-top: 12px; }
@media (max-width: 640px) { .menu__links { grid-template-columns: 1fr; } }
.menu__link {
  display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 12px;
  text-decoration: none; transition: background .14s;
}
.menu__link:hover { background: var(--sand); }
.menu__ic {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px;
  background: var(--navy); color: var(--gold); display: grid; place-items: center;
}
.menu__label { display: block; color: var(--navy); font-family: var(--serif); font-weight: 700; font-size: 16px; }
.menu__blurb { display: block; color: var(--stone); font-size: 13px; line-height: 1.4; margin-top: 2px; }

/* Live page-view + Instagram stats shown above "Home" at the top of the open menu. */
.menu__stats {
  padding: 4px 12px 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--sand-deep);
}
.menu__stats-label {
  display: block; font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 4px;
}
.menu__stats-rows { display: flex; flex-direction: column; gap: 6px; }
.menu__stats-count {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--navy);
}
.menu__stats-count svg { color: var(--gold); flex-shrink: 0; }
.menu__stats-updated {
  display: inline-block; margin-top: 10px; font-size: 13px; color: var(--blue);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.menu__stats-updated:hover { border-bottom-color: var(--blue); }

/* ---- UPDATES LOG --------------------------------------------------------- */
.updatelist { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.updateitem { display: flex; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--sand-deep); }
.updateitem:last-child { border-bottom: none; padding-bottom: 0; }
.updateitem__date {
  flex-shrink: 0; width: 150px; font-family: var(--sans); font-weight: 700;
  font-size: 13px; color: var(--blue); padding-top: 2px;
}
.updateitem__body { margin: 0; color: #45413a; }
@media (max-width: 600px) {
  .updateitem { flex-direction: column; gap: 4px; }
  .updateitem__date { width: auto; }
}

/* ---- HERO -------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--navy);
  /* Layers top→bottom: darkening overlay · blue accent glow · YOUR PHOTO ·
     navy fallback gradient. Drop a wide landscape shot at images/shared/hero.jpg
     (e.g. West Sands) and it appears behind the text automatically. */
  background-image:
    linear-gradient(105deg, rgba(9,28,56,0.74) 0%, rgba(9,28,56,0.46) 48%, rgba(9,28,56,0.12) 100%),
    linear-gradient(to top, rgba(9,28,56,0.55) 0%, rgba(9,28,56,0) 42%),
    url("images/shared/hero.jpg"),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-soft) 60%, #0f2a4d 100%);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center 14%, center;
  background-repeat: no-repeat;
  color: var(--cream);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(600px 300px at 20% 100%, #000, transparent);
  pointer-events: none;
}
/* Lift the copy up into the brighter sky band, and keep the .wrap's 24px
   side padding (a shorthand `padding: x 0 y` here would zero it out, which
   made the text run flush to the screen edges on phones). */
.hero__inner { position: relative; padding-top: 56px; padding-bottom: 88px; max-width: 760px; }
.hero h1 { color: var(--white); font-size: clamp(38px, 6vw, 64px); letter-spacing: -0.01em; text-shadow: 0 2px 28px rgba(6,18,38,0.55), 0 1px 4px rgba(6,18,38,0.45); }
.hero__tagline { font-size: clamp(18px, 2.4vw, 23px); color: #e4ecf7; margin: 22px 0 14px; text-shadow: 0 1px 16px rgba(6,18,38,0.6); }
.hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--gold); color: var(--navy); box-shadow: 0 8px 24px rgba(200,164,77,0.35); }
.btn--primary:hover { background: #d8b65f; }
.btn--ghost { background: rgba(255,255,255,0.08); color: var(--cream); border: 1px solid rgba(255,255,255,0.25); }
.btn--ghost:hover { background: rgba(255,255,255,0.16); }

.hero__stats { display: flex; gap: 38px; margin-top: 54px; flex-wrap: wrap; }
.hero__stat .num { font-family: var(--serif); font-size: 34px; color: var(--gold); }
.hero__stat .lbl { font-size: 14px; color: #aebfd6; }

/* ---- SECTION BACKGROUNDS ---------------------------------------------- */
.bg-cream { background: var(--cream); }
.bg-sand { background: var(--sand); }
.bg-navy { background: var(--navy); color: var(--cream); }
.bg-navy h2, .bg-navy h3 { color: var(--white); }
.bg-navy .section__head p { color: #aebfd6; }
.bg-navy .eyebrow { color: var(--gold); }

/* ---- CARDS ------------------------------------------------------------- */
.cards { display: grid; gap: 22px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .cards--2, .cards--3 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 21px; margin-bottom: 6px; }
.card .vibe { font-size: 14px; color: var(--blue); font-weight: 600; margin-bottom: 12px; }
.card .tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--navy);
  background: var(--sand-deep); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.card p { font-size: 15px; color: #3a4456; }

/* Gold "category" pill used above each fashion show's name. */
.showtag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #9a7a2e;
  background: rgba(200, 164, 77, 0.16); border: 1px solid rgba(200, 164, 77, 0.45);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}

.note {
  margin-top: 26px; padding: 16px 20px; border-left: 4px solid var(--gold);
  background: rgba(200,164,77,0.10); border-radius: 8px; font-size: 15px; color: #45413a;
}

/* ---- CHOOSE HELP LIST -------------------------------------------------- */
.help { margin-top: 30px; background: var(--navy); color: var(--cream); border-radius: var(--radius); padding: 30px 32px; }
.help h3 { color: var(--white); margin-bottom: 16px; }
.help ul { list-style: none; display: grid; gap: 12px; }
.help li { padding-left: 28px; position: relative; font-size: 15px; color: #d7e1f0; }
.help li::before { content: "→"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

/* ---- PACKING CHECKLIST ------------------------------------------------- */
.packing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .packing-grid { grid-template-columns: 1fr; } }
.packlist h3 { font-size: 18px; margin-bottom: 14px; }
.check {
  display: flex; align-items: flex-start; gap: 11px; padding: 9px 0;
  cursor: pointer; font-size: 15px; color: #344; user-select: none;
  border-bottom: 1px solid var(--sand-deep);
}
.check:last-child { border-bottom: none; }
.check input { display: none; }
.check .box {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--blue);
  flex-shrink: 0; margin-top: 2px; display: grid; place-items: center;
  transition: background .12s, border-color .12s;
}
.check .box::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 800; opacity: 0; transition: opacity .12s; }
.check input:checked + .box { background: var(--blue); }
.check input:checked + .box::after { opacity: 1; }
.check input:checked ~ .label { color: var(--stone); text-decoration: line-through; }
.pack-progress { margin-top: 12px; font-size: 14px; color: var(--stone); }

/* Two info panels below the checklists: what's provided (green) and what's
   banned (amber) - reusing the pros/cons colours for a consistent feel. */
.packextra { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
@media (max-width: 820px) { .packextra { grid-template-columns: 1fr; } }
.packbox {
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.packbox h3 { font-size: 19px; margin-bottom: 6px; }
.packbox > p { font-size: 14px; color: var(--stone); margin-bottom: 14px; }
.packbox ul { list-style: none; display: grid; gap: 10px; }
.packbox li { position: relative; padding-left: 26px; font-size: 14.5px; color: #3a4456; }
.packbox--have { border-left: 4px solid #2e9e6a; }
.packbox--have li::before { content: "✓"; position: absolute; left: 0; color: #2e9e6a; font-weight: 800; }
.packbox--avoid { border-left: 4px solid #c0612e; }
.packbox--avoid li::before { content: "✕"; position: absolute; left: 0; color: #c0612e; font-weight: 800; }

/* ---- TRADITIONS (accordion) ------------------------------------------- */
.trad { display: grid; gap: 16px; }
.trad__item {
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.trad__btn {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.trad__btn h3 { font-size: 21px; }
.trad__when { font-size: 13px; color: var(--blue); font-weight: 600; margin-top: 4px; display: block; }
.trad__chev { font-size: 22px; color: var(--blue); transition: transform .2s; flex-shrink: 0; }
.trad__item.open .trad__chev { transform: rotate(45deg); }
/* Grid-rows trick: animates open/closed for ANY content height, including
   photos - no fixed max-height to clip against. */
.trad__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.trad__item.open .trad__body { grid-template-rows: 1fr; }
.trad__bodyinner { overflow: hidden; padding: 0 26px; }
.trad__item.open .trad__bodyinner { padding-bottom: 26px; }
.trad__body p { font-size: 16px; color: #3a4456; margin-bottom: 14px; }
/* Photos inside a tradition */
.trad__imgwrap { position: relative; margin: 2px 0 16px; border-radius: 12px; overflow: hidden; }
.trad__img { width: 100%; display: block; }
.trad__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 2px 0 16px; }
@media (max-width: 560px) { .trad__gallery { grid-template-columns: 1fr; } }
.trad__gallery figure { margin: 0; }
.trad__gallery img { width: 100%; border-radius: 12px; display: block; }
.trad__gallery figcaption { margin-top: 8px; font-size: 13px; color: var(--stone); font-style: italic; }
.trad__tip {
  background: rgba(31,93,171,0.08); border-radius: 10px; padding: 14px 18px;
  font-size: 15px; color: var(--navy);
}
.trad__tip strong { color: var(--blue); }
.trad__readmore {
  display: inline-block; margin-top: 14px; color: var(--blue); font-weight: 600;
  font-size: 15px; text-decoration: none;
}
.trad__readmore:hover { text-decoration: underline; }

/* ---- FEELINGS ---------------------------------------------------------- */
.feel__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.feel__tab {
  padding: 11px 20px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 600;
  background: rgba(255,255,255,0.08); color: #cdd9ec; border: 1px solid rgba(255,255,255,0.18);
  transition: all .15s;
}
.feel__tab:hover { background: rgba(255,255,255,0.16); }
.feel__tab.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.feel__panel {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius); padding: 36px;
}
.feel__panel h3 { color: var(--white); font-size: 26px; margin-bottom: 16px; }
.feel__panel > p { font-size: 17px; color: #cdd9ec; margin-bottom: 24px; }
.feel__try { display: grid; gap: 12px; }
.feel__try .t {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,255,255,0.06); padding: 13px 18px; border-radius: 10px;
  font-size: 15px; color: #e3eaf6;
}
.feel__try .t::before { content: "✓"; color: var(--gold); font-weight: 800; }

/* ---- VISION ------------------------------------------------------------ */
.status {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 999px; margin-top: 14px;
}
.status--soon { background: rgba(46,139,87,0.15); color: var(--green); }
.status--prog { background: rgba(46,123,214,0.15); color: var(--blue); }
.status--plan { background: var(--sand-deep); color: var(--stone); }

.card--glow {
  border-color: rgba(46,139,87,0.4);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(46,139,87,0.25), 0 0 24px rgba(46,139,87,0.25);
}

@media (max-width: 540px) { .signup__form { flex-direction: column; } }

/* ---- DISCLAIMER + FOOTER ---------------------------------------------- */
.disclaimer {
  margin-top: 30px; font-size: 14px; color: var(--stone); font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px;
}
.footer { background: var(--navy); color: #aebfd6; padding: 50px 0; text-align: center; }
.footer .brand { font-family: var(--serif); color: var(--white); font-size: 18px; margin-bottom: 10px; }
.footer p { font-size: 14px; margin: 6px 0; }
.footer .built { color: var(--gold); margin-top: 16px; font-style: italic; }
.footer__about { margin-top: 18px; }
.footer__about a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 1px; }
.footer__about a:hover { border-bottom-color: var(--gold); }
/* Instagram link in the footer */
.footer__ig {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  color: var(--cream); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 8px 16px; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.footer__ig:hover { background: rgba(255,255,255,0.10); border-color: var(--gold); }
.footer__ig svg { color: var(--gold); }

/* The .ganotice rules that were here styled a second, older cookie bar. Both
   it and the component that rendered it are gone — consent.js draws the only
   banner now, and styles itself. See the note in app.src.jsx. */

/* Hall page: a recommendation aside pointing to an external resource. */
.note--shoutout .admincard__link { margin-top: 10px; }

/* ---- HOME PHOTO BAND (uses images/shared/hero2.jpg) ------------------- */
.photoband {
  position: relative;
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(9,28,56,0.78) 0%, rgba(9,28,56,0.5) 55%, rgba(9,28,56,0.3) 100%),
    url("images/shared/hero2.jpg"),
    linear-gradient(160deg, var(--navy), #0f2a4d);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  color: var(--cream);
}
.photoband__inner { padding: 92px 24px; }
.photoband h2 {
  color: #fff; font-size: clamp(26px, 4vw, 40px); max-width: 640px; line-height: 1.18;
  text-shadow: 0 2px 22px rgba(6,18,38,0.5);
}
.photoband p {
  color: #e4ecf7; font-size: 18px; max-width: 560px; margin-top: 14px;
  text-shadow: 0 1px 14px rgba(6,18,38,0.55);
}

/* ---- HOME "NEW GUIDE" PROMO BAND (uses the dating red-sky photo) -------- */
/* A full-bleed announcement band for a freshly-published guide. The whole
   band is one big link; the CTA is a span styled as a button (can't nest <a>). */
/* The photo behind the band comes from `home.newGuide.image` in content.js,
   applied inline - so changing which guide is featured never means editing
   CSS. What's here is the navy fallback it sits on. */
.newguide {
  display: block;
  position: relative;
  background-color: var(--navy);
  background-image: linear-gradient(160deg, var(--navy), #0f2a4d);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--cream);
}
.newguide__inner { display: block; text-decoration: none; padding: 84px 24px; }
.newguide__badge {
  display: inline-block; font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); background: var(--gold);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.newguide h2 {
  color: #fff; font-size: clamp(28px, 4.5vw, 44px); max-width: 640px; line-height: 1.14;
  text-shadow: 0 2px 22px rgba(6,18,38,0.5);
}
.newguide p {
  color: #e9eef7; font-size: 18px; max-width: 560px; margin-top: 14px;
  text-shadow: 0 1px 14px rgba(6,18,38,0.55);
}
.newguide__cta { margin-top: 26px; }
.newguide:hover .newguide__cta { background: #d8b65f; transform: translateY(-2px); }

/* ---- WELLBEING --------------------------------------------------------- */
.urgentgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .urgentgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .urgentgrid { grid-template-columns: 1fr; } }
.urgent {
  background: var(--white); border: 1px solid var(--sand-deep); border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.urgent--red { border-left-color: #c0392b; }
.urgent h3 { font-size: 19px; margin-bottom: 8px; }
.urgent p { font-size: 14px; color: #3a4456; flex: 1; }
.urgent__contacts { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.urgent__cta {
  display: inline-block; background: var(--navy); color: var(--gold); text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 9px 16px; border-radius: 999px; transition: background .15s;
}
.urgent__cta:hover { background: var(--navy-soft); }
.urgent--red .urgent__cta { background: #c0392b; color: #fff; }
.urgent__cta--static { background: var(--sand-deep); color: var(--navy); cursor: default; }
.urgent__sub { font-size: 13px; color: var(--blue); text-decoration: none; }
.urgent__sub:hover { text-decoration: underline; }

.feelings-link {
  display: block; margin: 22px 0 8px; padding: 16px 22px; border-radius: 12px;
  background: rgba(31,93,171,0.08); color: var(--navy); text-decoration: none;
  font-weight: 600; font-size: 16px; transition: background .15s;
}
.feelings-link:hover { background: rgba(31,93,171,0.14); }

.support__contacts { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.support__link { font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; }
.support__link:hover { text-decoration: underline; }

.wb-closing {
  margin-top: 34px; background: var(--navy); color: #e4ecf7; border-radius: var(--radius);
  padding: 30px 34px; font-size: 18px; line-height: 1.6; text-align: center;
  border-left: 4px solid var(--gold);
}

/* ---- REVEAL ANIMATION -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================================
   MULTI-PAGE ADDITIONS
   ============================================================================ */

.wrap--narrow { max-width: 820px; }
.nav__brand { text-decoration: none; }
.page__title { font-size: clamp(30px, 5vw, 46px); margin-bottom: 16px; }

/* ---- ABOUT (home) ------------------------------------------------------ */
.about { max-width: 760px; }
.about h2 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 16px; }
.about p { font-size: 18px; color: #3a4456; }

/* ---- ABOUT US (page) --------------------------------------------------- */
.about__para { font-size: 18px; color: #3a4456; line-height: 1.7; margin-bottom: 18px; }
.about__sub { font-family: var(--serif); font-size: 22px; color: var(--navy); margin: 30px 0 10px; }
/* Founders photo on the About page — centred, rounded, soft shadow. */
.about__photo { margin: 8px auto 14px; max-width: 380px; text-align: center; }
.about__photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.about__photo figcaption { margin-top: 12px; font-family: var(--serif); font-style: italic; color: var(--stone); font-size: 15px; }
/* Our personal Instagram links, centred just under the photo. */
.about__socials { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto 34px; }
.about__social {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none;
  background: rgba(31,93,171,0.08); padding: 6px 14px; border-radius: 999px;
  transition: background .2s var(--ease);
}
.about__social:hover { background: rgba(31,93,171,0.16); }
.about__social svg { color: var(--blue); }

/* ---- HOME NAV GRID ----------------------------------------------------- */
.navgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .navgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .navgrid { grid-template-columns: 1fr; } }
.navtile {
  display: block; text-decoration: none; background: var(--white);
  border: 1px solid var(--sand-deep); border-radius: var(--radius); padding: 26px 24px;
  box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.navtile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue); }
.navtile__icon {
  display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 12px;
  background: var(--navy); color: var(--gold); margin-bottom: 16px;
}
.navtile h3 { font-size: 19px; margin-bottom: 8px; }
.navtile p { font-size: 14px; color: var(--stone); line-height: 1.55; }
.navtile__go { display: inline-block; margin-top: 14px; color: var(--blue); font-weight: 600; font-size: 14px; }

/* ---- HOME "START HERE" FEATURED CARDS ---------------------------------- */
.featured { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .featured { grid-template-columns: 1fr; } }
.featurecard {
  position: relative; display: block; text-decoration: none; background: var(--white);
  border: 1px solid var(--sand-deep); border-radius: var(--radius); padding: 30px 30px 26px;
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.featurecard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }
.featurecard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue); }
.featurecard__icon {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--navy); color: var(--gold); margin-bottom: 16px;
}
.featurecard__tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--blue); background: rgba(31,93,171,0.10); padding: 4px 11px; border-radius: 999px; margin-bottom: 12px;
}
.featurecard h3 { font-size: 25px; margin-bottom: 8px; }
.featurecard p { font-size: 15px; color: #3a4456; }
.featurecard__go { display: inline-block; margin-top: 16px; color: var(--blue); font-weight: 600; font-size: 15px; }

/* ---- BREADCRUMB -------------------------------------------------------- */
.crumb { font-size: 14px; color: var(--stone); margin-bottom: 22px; }
.crumb a { color: var(--blue); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb__sep { margin: 0 8px; opacity: 0.5; }

/* ---- CLICKABLE CARD ---------------------------------------------------- */
.card--link { display: block; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue); }
.card__go { display: inline-block; margin-top: 14px; color: var(--blue); font-weight: 600; font-size: 14px; }
.card__bestfor { margin-top: 12px; font-size: 14px; color: var(--navy); }

/* ---- GETTING HERE: OPTIONS --------------------------------------------- */
.options { display: grid; gap: 20px; }
.option {
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.option--hi { border-color: var(--gold); box-shadow: 0 10px 30px rgba(200,164,77,0.18); }
.option__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.option__top h3 { font-size: 23px; }
.option__tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--blue); background: rgba(31,93,171,0.10); padding: 4px 11px; border-radius: 999px; margin-bottom: 8px;
}
.option--hi .option__tag { color: var(--navy); background: rgba(200,164,77,0.22); }
.option__meta { text-align: right; }
.option__time { font-size: 14px; color: var(--stone); margin-bottom: 4px; }
.option__price { font-size: 15px; font-weight: 600; color: var(--navy); max-width: 280px; }
.option p { font-size: 15px; color: #3a4456; margin-bottom: 18px; }
.option__pc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }
@media (max-width: 600px) { .option__pc { grid-template-columns: 1fr; } .option__meta { text-align: left; } }
.pros, .cons { list-style: none; display: grid; gap: 7px; }
.pros li, .cons li { font-size: 14px; padding-left: 24px; position: relative; color: #3a4456; }
.pros li::before { content: "✓"; position: absolute; left: 0; color: #2e9e6a; font-weight: 800; }
.cons li::before { content: "✕"; position: absolute; left: 0; color: #c0612e; font-weight: 800; }
.option__link { font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; }
.option__link:hover { text-decoration: underline; }

/* ---- YOUNG SCOT CALLOUT ------------------------------------------------ */
.youngscot {
  margin-top: 28px; background: var(--navy); color: var(--cream);
  border-radius: var(--radius); padding: 34px 36px;
}
.youngscot h3 { color: var(--white); font-size: 24px; margin-bottom: 12px; }
.youngscot > p { color: #cdd9ec; font-size: 16px; margin-bottom: 18px; }
.ys__steps { margin: 0 0 24px 20px; display: grid; gap: 9px; }
.ys__steps li { color: #3a4456; font-size: 15px; padding-left: 6px; }
/* Inside the dark Young Scot box the same steps need light text. */
.youngscot .ys__steps li { color: #d7e1f0; }
.ys__links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ys__more { color: var(--gold); font-size: 14px; font-weight: 600; text-decoration: none; }
.ys__more:hover { text-decoration: underline; }

/* ---- GENERIC NUMBERED-PROCESS CALLOUT (e.g. driving page's four stages) - */
.process {
  margin-top: 28px; background: var(--navy); color: var(--cream);
  border-radius: var(--radius); padding: 34px 36px;
}
.process h3 { color: var(--white); font-size: 24px; margin-bottom: 12px; }
.process > p { color: #cdd9ec; font-size: 16px; margin-bottom: 18px; }
.process__steps { margin: 0 0 4px 20px; display: grid; gap: 9px; }
.process__steps li { color: #d7e1f0; font-size: 15px; padding-left: 6px; }

/* ---- HALL DETAIL ------------------------------------------------------- */
.hall__nick { color: var(--blue); font-weight: 600; font-size: 16px; margin-bottom: 18px; }
.hall__lead { font-size: 18px; color: #3a4456; line-height: 1.7; margin-bottom: 30px; }

/* ---- HALL PHOTO GALLERY + LIGHTBOX ------------------------------------- */
/* Thumbnails in a responsive grid; click to open the fullscreen lightbox.
   `--one` (single photo) shows one wide image; `--many` is a 3-up grid. */
.hallgal { margin: 0 0 32px; }
.hallgal__grid { display: grid; gap: 10px; }
.hallgal__grid--one { grid-template-columns: 1fr; }
.hallgal__grid--many { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .hallgal__grid--many { grid-template-columns: repeat(2, 1fr); } }
.hallgal__thumbwrap { position: relative; }
.hallgal__thumb {
  padding: 0; border: none; cursor: pointer; background: var(--sand);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3; display: block; width: 100%;
}
.hallgal__grid--one .hallgal__thumb { aspect-ratio: 16 / 10; }
.hallgal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease; }
.hallgal__thumb:hover img { transform: scale(1.05); }
.hallgal__thumb:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 18, 36, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: lb-fade 0.18s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__fig { margin: 0; max-width: 1100px; max-height: 100%; display: flex;
  flex-direction: column; align-items: center; gap: 12px; }
.lightbox__imgwrap { position: relative; max-width: 100%; }
.lightbox__fig img { max-width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); display: block; }
.lightbox__fig figcaption { color: #e8edf5; font-size: 14px; text-align: center;
  display: flex; gap: 14px; align-items: baseline; justify-content: center; flex-wrap: wrap; }
.lightbox__count { color: #9fb0c8; font-variant-numeric: tabular-nums; }
.lightbox__close {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 26px; line-height: 1;
}
.lightbox__close:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 34px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 28px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
}

.factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
@media (max-width: 640px) { .factgrid { grid-template-columns: 1fr; } }
.fact { background: var(--white); border: 1px solid var(--sand-deep); border-radius: 12px; padding: 18px 20px; }
.fact__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.fact__value { font-size: 15px; color: #3a4456; }
.bestfor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; }
@media (max-width: 640px) { .bestfor { grid-template-columns: 1fr; } }
.bestfor__item { border-radius: 12px; padding: 20px 22px; }
.bestfor__item h4 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
.bestfor__item p { font-size: 15px; }
.bestfor__item--good { background: rgba(46,158,106,0.10); }
.bestfor__item--good h4 { color: #2e9e6a; }
.bestfor__item--watch { background: rgba(192,97,46,0.10); }
.bestfor__item--watch h4 { color: #c0612e; }
.hall__nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--sand-deep); padding-top: 22px; }
.hall__nav a { color: var(--blue); text-decoration: none; font-weight: 600; font-size: 15px; }
.hall__nav a:hover { text-decoration: underline; }

.halltour { margin: 8px 0 34px; }
.halltour h3 { font-size: 22px; margin-bottom: 4px; }
.halltour .date__tabs { margin: 14px 0 20px; padding-bottom: 16px; }
.halltour__count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px; background: rgba(0,0,0,0.08); }
.date__tab.active .halltour__count { background: rgba(255,255,255,0.2); }

/* ---- FEATURED SOCIETIES (societies directory grid + detail page) ------- */
.soccard { padding-top: 0; overflow: hidden; }
.soccard__img { display: block; width: calc(100% + 52px); margin: 0 -26px 18px; height: 150px; object-fit: cover; }
.socdetail__logo { display: block; max-width: 340px; width: 100%; height: auto; margin: 6px 0 26px; }
/* On society pages the eyebrow tag sits in dark body text like everything
   else, rather than the blue accent used elsewhere. */
.socdetail .eyebrow { color: var(--navy); }

/* ---- FEELINGS help note + breadcrumb on dark --------------------------- */
.bg-navy .crumb { color: #8ca0bd; }
.bg-navy .crumb a { color: var(--gold); }
.bg-navy .page__title { color: var(--white); }
.feel__help {
  margin-top: 26px; font-size: 15px; color: #cdd9ec; font-style: italic;
  border-left: 4px solid var(--gold); padding: 14px 20px; background: rgba(255,255,255,0.05); border-radius: 8px;
}

/* ---- DISCLAIMER light variant ------------------------------------------ */
.disclaimer--light { border-color: var(--sand-deep); color: var(--stone); }

/* ---- COUNTDOWN --------------------------------------------------------- */
.countdown {
  margin: 30px 0 6px; display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: rgba(8,22,44,0.42); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px; padding: 16px 22px; backdrop-filter: blur(2px);
}
.countdown__units { display: flex; gap: 14px; }
.cd { text-align: center; min-width: 52px; }
.cd__num { font-family: var(--serif); font-size: 34px; color: var(--gold); line-height: 1; }
.cd__lbl { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #aebfd6; margin-top: 6px; }
.countdown__cap { font-size: 14px; color: #cdd9ec; max-width: 110px; line-height: 1.3; }
.countdown--done {
  margin: 30px 0 6px; display: inline-block; background: rgba(200,164,77,0.18);
  border: 1px solid var(--gold); color: var(--cream); border-radius: 14px;
  padding: 16px 22px; font-size: 17px; font-weight: 600;
}
@media (max-width: 460px) { .cd__num { font-size: 27px; } .cd { min-width: 42px; } }

/* ---- ADMIN PAGE -------------------------------------------------------- */
.adminlist { display: grid; gap: 20px; }
.admincard {
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  padding: 28px 30px; box-shadow: var(--shadow-sm);
}
.admincard__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.admincard__head h3 { font-size: 23px; }
.admincard__head .tag { margin-bottom: 0; }
.admincard__body { font-size: 16px; color: #3a4456; margin-bottom: 18px; }
.subopts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
@media (max-width: 700px) { .subopts { grid-template-columns: 1fr; } }
.subopt { background: var(--sand); border: 1px solid var(--sand-deep); border-radius: 12px; padding: 18px 20px; }
.subopt__tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--blue); background: rgba(31,93,171,0.10); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
}
.subopt h4 { font-family: var(--serif); font-size: 17px; color: var(--navy); margin-bottom: 7px; line-height: 1.25; }
.subopt p { font-size: 14px; color: #3a4456; }
.tips { list-style: none; display: grid; gap: 10px; margin-bottom: 6px; }
.tips li { position: relative; padding-left: 26px; font-size: 15px; color: #3a4456; }
.tips li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.admincard__steps { margin: 0 0 16px 20px; display: grid; gap: 9px; }
.admincard__steps li { color: #3a4456; font-size: 15px; padding-left: 6px; }
.admincard__link { display: inline-block; margin-top: 16px; color: var(--blue); font-weight: 600; font-size: 15px; text-decoration: none; }
.admincard__link:hover { text-decoration: underline; }

/* ---- COST TABLE (converting-licence page) ------------------------------ */
.costtable { display: grid; gap: 2px; background: var(--sand-deep); border-radius: var(--radius); overflow: hidden; margin-top: 4px; }
.costtable__row { display: grid; grid-template-columns: 2fr 0.8fr 1.3fr; gap: 10px; background: var(--white); padding: 13px 20px; font-size: 14px; color: #3a4456; align-items: center; }
.costtable__row--head { background: var(--navy); color: var(--cream); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 560px) { .costtable__row { grid-template-columns: 1.6fr 0.7fr 1fr; padding: 12px 14px; font-size: 12.5px; } }

/* ---- LICENCE COUNTRY FINDER (converting-licence page) ------------------ */
/* The search box that asks where your licence is from. The country list it
   searches lives in licence-countries.js, not here. */
.lfinder { margin-top: 4px; }
.lfinder__label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
}
.lfinder__box { position: relative; }
.lfinder__icon {
  position: absolute; left: 18px; top: 26px; transform: translateY(-50%);
  width: 20px; height: 20px; fill: none; stroke: #8a93a6; stroke-width: 2;
  stroke-linecap: round; pointer-events: none;
}
.lfinder__input {
  width: 100%; font-family: var(--sans); font-size: 17px; color: var(--ink);
  background: var(--white); border: 2px solid var(--sand-deep); border-radius: 14px;
  padding: 15px 50px 15px 50px; box-shadow: var(--shadow-sm);
  transition: border-color 0.18s var(--ease);
}
.lfinder__input::placeholder { color: #9aa3b2; }
.lfinder__input:hover { border-color: #d9cdb4; }
.lfinder__input:focus { border-color: var(--blue); }
.lfinder__clear {
  position: absolute; right: 14px; top: 26px; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: var(--sand-deep); color: var(--navy);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.lfinder__clear:hover { background: #d9cdb4; }

/* The dropdown. Sits over whatever follows it, so it needs the z-index. */
.lfinder__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px);
  list-style: none; background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: 14px; box-shadow: var(--shadow); max-height: 340px; overflow-y: auto;
}
.lfinder__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px; cursor: pointer; border-bottom: 1px solid var(--sand);
}
.lfinder__opt:last-child { border-bottom: 0; }
.lfinder__opt.is-active { background: var(--sand); }
.lfinder__optname { font-size: 16px; font-weight: 500; color: var(--ink); min-width: 0; }
.lfinder__optpill {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
/* Colour-coded by route, and reused on the result card below: green = nothing
   to do, blue = postal swap, gold = you'll be sitting tests. */
.lfinder__optpill--gb,
.lfinder__optpill--northern-ireland,
.lfinder__optpill--eu-eea { color: #1f6b45; background: rgba(46, 139, 87, 0.14); }
.lfinder__optpill--crown,
.lfinder__optpill--designated { color: var(--blue); background: rgba(31, 93, 171, 0.11); }
.lfinder__optpill--other { color: #7f5c12; background: rgba(200, 164, 77, 0.22); }
.lfinder__none { padding: 16px 18px; font-size: 14px; color: #6b7280; }

.lfinder__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.lfinder__quicklabel { font-size: 13px; color: #6b7280; margin-right: 2px; }
.lfinder__chip {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy);
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: 999px;
  padding: 6px 13px; cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.lfinder__chip:hover { background: var(--sand); border-color: var(--navy); }
.lfinder__checked { margin-top: 12px; font-size: 13px; color: #8a93a6; }
.lfinder__checked a { color: var(--blue); text-decoration: none; }
.lfinder__checked a:hover { text-decoration: underline; }
.lfinder--empty p { font-size: 15px; color: #3a4456; }

/* The answer card. */
.lfresult {
  margin-top: 22px; background: var(--white); border: 1px solid var(--sand-deep);
  border-left: 5px solid var(--blue); border-radius: var(--radius);
  padding: 26px 30px; box-shadow: var(--shadow-sm);
  animation: lfpop 0.28s var(--ease) both;
}
@keyframes lfpop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lfresult--gb, .lfresult--northern-ireland, .lfresult--eu-eea { border-left-color: var(--green); }
.lfresult--crown, .lfresult--designated { border-left-color: var(--blue); }
.lfresult--other { border-left-color: var(--gold); }
.lfresult__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lfresult__country { font-family: var(--serif); font-size: 15px; font-weight: 600; color: #6b7280; }
.lfresult__badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; background: var(--sand-deep); color: var(--navy);
}
.lfresult--gb .lfresult__badge,
.lfresult--northern-ireland .lfresult__badge,
.lfresult--eu-eea .lfresult__badge { color: #1f6b45; background: rgba(46, 139, 87, 0.14); }
.lfresult--crown .lfresult__badge,
.lfresult--designated .lfresult__badge { color: var(--blue); background: rgba(31, 93, 171, 0.11); }
.lfresult--other .lfresult__badge { color: #7f5c12; background: rgba(200, 164, 77, 0.22); }
.lfresult__title { font-size: 24px; margin-bottom: 10px; }
.lfresult__verdict { font-size: 18px; font-weight: 600; color: var(--navy); line-height: 1.45; margin-bottom: 14px; }
.lfresult__body { font-size: 16px; color: #3a4456; margin-bottom: 18px; }
.lfresult__note {
  font-size: 15px; color: #3a4456; background: var(--sand); border: 1px solid var(--sand-deep);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 18px;
}
.lfresult__note strong { color: var(--navy); }
.lfresult__foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.lfresult__foot .admincard__link { margin-top: 0; }
.lfresult__reset {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: #6b7280;
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.lfresult__reset:hover { color: var(--navy); }

/* The two reference lists, built from the same file the search box uses. */
.lflists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .lflists { grid-template-columns: 1fr; } }
.lflist {
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.lflist__title { font-size: 18px; margin-bottom: 4px; }
.lflist__count { font-size: 13px; color: #8a93a6; margin-bottom: 14px; }
.lflist__names { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.lflist__names li {
  font-size: 13px; color: #3a4456; background: var(--sand);
  border: 1px solid var(--sand-deep); border-radius: 999px; padding: 4px 11px;
}

@media (max-width: 560px) {
  .lfinder__input { font-size: 16px; padding: 14px 46px 14px 46px; }
  .lfinder__icon { left: 16px; top: 25px; }
  .lfinder__clear { top: 25px; }
  .lfresult { padding: 22px 20px; }
  .lfresult__title { font-size: 21px; }
  .lfresult__verdict { font-size: 16.5px; }
}

/* ---- TOWN MAP (illustrative sketch, converting-licence page) ----------- */
.townmap { margin-top: 6px; background: var(--sand); border: 1px solid var(--sand-deep); border-radius: var(--radius); padding: 26px 28px; }
.townmap__svg { width: 100%; height: auto; display: block; max-width: 560px; margin: 0 auto; }
.townmap__street { fill: none; stroke: #b9c3d6; stroke-width: 3; stroke-linecap: round; }
.townmap__street--minor { stroke-dasharray: 4 4; stroke-width: 2; }
.townmap__label { font-size: 10px; fill: #5b6579; font-family: var(--sans); }
.townmap__label--muted { fill: #8a93a6; font-style: italic; }
.townmap__pin { cursor: pointer; }
.townmap__pin circle { fill: var(--navy); stroke: var(--cream); stroke-width: 2; transition: r 0.15s var(--ease); }
.townmap__pin--postbox circle { fill: #b7472a; }
.townmap__pin.is-active circle { r: 11.5; }
.townmap__pin:focus { outline: none; }
.townmap__pin:focus circle { stroke: var(--gold); stroke-width: 3; }
.townmap__pinicon { fill: none; stroke: var(--white); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.townmap__pin--postbox .townmap__pinicon { fill: var(--white); stroke: none; }
.townmap__legend { display: flex; gap: 22px; margin-top: 16px; font-size: 13px; color: #3a4456; }
.townmap__swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--navy); }
.townmap__swatch--postbox { background: #b7472a; }
.townmap__card { margin-top: 18px; background: var(--white); border: 1px solid var(--sand-deep); border-radius: 12px; padding: 18px 20px; }
.townmap__card h4 { font-family: var(--serif); color: var(--navy); font-size: 17px; margin-bottom: 4px; }
.townmap__addr { font-size: 14px; color: #6b7280; margin-bottom: 8px; }
.townmap__card p { font-size: 14px; color: #3a4456; }
.townmap__directions { display: inline-block; margin-top: 10px; color: var(--blue); font-weight: 600; font-size: 14px; text-decoration: none; }
.townmap__directions:hover { text-decoration: underline; }
.townmap__note { margin-top: 16px; font-size: 13px; color: #8a93a6; }
.townmap__note a { color: var(--blue); text-decoration: none; }
.townmap__note a:hover { text-decoration: underline; }

/* ---- FRESHERS: dates, placeholder banner, timeline --------------------- */
.freshers__dates { font-size: 16px; color: var(--blue); font-weight: 600; margin-bottom: 18px; }
.placeholder-banner {
  background: rgba(200,164,77,0.12); border: 1px dashed var(--gold); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 8px;
}
.placeholder-banner__tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8a6d22; background: rgba(200,164,77,0.3); padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}
.placeholder-banner p { font-size: 15px; color: #5a4f33; }

/* ---- FRESHERS: under-18s reassurance panel ----------------------------- */
.u18 {
  margin: 22px 0 8px; background: rgba(31, 93, 171, 0.06);
  border: 1px solid rgba(31, 93, 171, 0.22); border-left: 5px solid var(--blue);
  border-radius: var(--radius); padding: 26px 30px;
}
.u18__tag {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: #fff; background: var(--blue);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
}
.u18 h3 { font-size: clamp(21px, 3vw, 26px); margin-bottom: 10px; }
.u18 > p { font-size: 16px; color: #3a4456; margin-bottom: 16px; line-height: 1.65; }
.u18__list { list-style: none; display: grid; gap: 11px; }
.u18__list li { position: relative; padding-left: 30px; font-size: 15px; color: #3a4456; }
.u18__list li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: #2e9e6a; font-weight: 800; font-size: 16px;
}

.timeline { position: relative; margin-left: 8px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--sand-deep); }
.tl { position: relative; padding: 0 0 22px 34px; }
.tl:last-child { padding-bottom: 0; }
.tl__dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid var(--cream); }
.tl__day { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); }
.tl__label { font-family: var(--serif); font-size: 19px; color: var(--navy); margin: 2px 0 5px; }
.tl__body p { font-size: 15px; color: #3a4456; }

/* ---- FRESHERS: the official night-by-night line-up --------------------- */
/* A date rail down the left with that day's events beside it. Days with two
   events (Fayre + club night, ceilidh + jazz) stack inside the same row, so
   the date is never repeated. Collapses to a stacked list on phones. */
.lineup { display: grid; gap: 4px; }
.lineup__day {
  display: grid; grid-template-columns: 116px 1fr; gap: 20px;
  padding: 18px 0; border-top: 1px solid var(--sand-deep);
}
.lineup__day:last-child { border-bottom: 1px solid var(--sand-deep); }
.lineup__date {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--blue); padding-top: 4px;
}
.lineup__events { display: grid; gap: 20px; }
.lineup__ev h3 { font-family: var(--serif); font-size: 20px; color: var(--navy); }
.lineup__meta {
  display: inline-block; margin: 5px 0 7px; font-size: 13px; font-weight: 600;
  color: var(--stone); background: var(--sand); border-radius: 999px; padding: 3px 11px;
}
.lineup__ev p { font-size: 15px; color: #3a4456; line-height: 1.6; }
@media (max-width: 620px) {
  .lineup__day { grid-template-columns: 1fr; gap: 10px; }
  .lineup__date { padding-top: 0; }
}
/* Buy-tickets button and the pointer across to the nightlife page. */
.lineup__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.lineup__cross { font-size: 15px; font-weight: 600; color: var(--blue); text-decoration: none; }
.lineup__cross:hover { text-decoration: underline; }

/* ---- BUDGET: monthly snapshot + price grid ----------------------------- */
.budget { background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.budget__row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 24px; border-bottom: 1px solid var(--sand-deep); }
.budget__row:last-child { border-bottom: none; }
.budget__label { font-size: 16px; font-weight: 600; color: var(--navy); display: flex; flex-direction: column; }
.budget__detail { font-size: 13px; font-weight: 400; color: var(--stone); margin-top: 3px; }
.budget__amount { font-family: var(--serif); font-size: 20px; color: var(--blue); white-space: nowrap; }

.pricegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .pricegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pricegrid { grid-template-columns: 1fr; } }
.pricecard { background: var(--white); border: 1px solid var(--sand-deep); border-radius: 12px; padding: 20px; text-align: center; box-shadow: var(--shadow-sm); }
.pricecard__cost { font-family: var(--serif); font-size: 28px; color: var(--navy); }
.pricecard__item { font-size: 15px; font-weight: 600; color: var(--blue); margin: 4px 0 8px; }
.pricecard__detail { font-size: 13px; color: var(--stone); line-height: 1.45; }

.tips--cols { grid-template-columns: 1fr 1fr; gap: 12px 28px; }
@media (max-width: 700px) { .tips--cols { grid-template-columns: 1fr; } }

/* ---- STUDY SPOTS: categories + image cards ----------------------------- */
.cathead { margin: 40px 0 20px; }
.cathead__title { font-size: clamp(24px, 3.5vw, 32px); }
.cathead__blurb { color: var(--stone); font-size: 16px; margin-top: 6px; max-width: 620px; }
/* For a blurb doing real explaining rather than a one-line lead-in. */
.cathead__blurb--wide { max-width: 780px; }

.spots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .spots { grid-template-columns: 1fr; } }
.spot {
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.spot__img, .spot__ph { width: 100%; height: 200px; object-fit: cover; display: block; }
/* Date-idea photos run taller than the standard spot image so faces, the cow,
   etc. aren't cropped out. Scoped to the dating grid only. Per-photo framing
   is set with each idea's `imagePos` (object-position) in content.js. */
.spots--date .spot__img { height: 440px; }
@media (max-width: 820px) { .spots--date .spot__img { height: 420px; } }
.spot__ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #fff; text-align: center; padding: 16px;
}
.spot__ph--library { background: linear-gradient(150deg, var(--navy), var(--blue)); }
.spot__ph--cafe { background: linear-gradient(150deg, #6b4a2b, var(--gold)); }
.spot__ph-ic { font-size: 34px; }
.spot__ph-name { font-family: var(--serif); font-size: 20px; font-weight: 700; }
.spot__ph-hint { font-size: 11px; opacity: 0.7; font-family: var(--sans); letter-spacing: 0.02em; }
.spot__body { padding: 22px 24px; }
.spot__body h3 { font-size: 20px; margin-bottom: 8px; }
.spot__body p { font-size: 15px; color: #3a4456; }

/* ---- LIVE BANDS: photo gallery + Instagram handle chips ----------------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
@media (max-width: 820px) { .gallery { grid-template-columns: 1fr; } }
.gallery__fig {
  margin: 0; background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.gallery__fig img { width: 100%; height: 230px; object-fit: cover; display: block; }
/* Screenshot-style figures (logos, chats): show the whole image, not a crop. */
.gallery--figs .gallery__fig img { object-fit: contain; background: var(--white); padding: 10px; }
.gallery__fig figcaption { padding: 12px 16px 15px; font-size: 13.5px; color: var(--stone); line-height: 1.5; }

.ig-chip {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--blue); background: rgba(31,93,171,0.08); padding: 4px 12px;
  border-radius: 999px; text-decoration: none; margin-bottom: 12px;
  transition: background .2s var(--ease);
}
.ig-chip:hover { background: rgba(31,93,171,0.16); }

/* ---- DATING: price-tier headings --------------------------------------- */
.pricetier { display: flex; align-items: baseline; gap: 13px; margin: 32px 0 16px; flex-wrap: wrap; }
.pricetier__cost { font-family: var(--serif); font-weight: 700; font-size: 23px; color: #9a7a2e; letter-spacing: 2px; }
.pricetier__label { font-family: var(--serif); font-size: 21px; color: var(--navy); }

/* ---- DATING: carbonara recipe card ------------------------------------- */
.recipe {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px;
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  padding: 30px 32px; box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) { .recipe { grid-template-columns: 1fr; gap: 22px; } }
.recipe__col h4 { font-family: var(--serif); font-size: 18px; color: var(--navy); margin-bottom: 14px; }
.recipe__ingredients { list-style: none; display: grid; gap: 9px; }
.recipe__ingredients li { position: relative; padding-left: 22px; font-size: 15px; color: #3a4456; }
.recipe__ingredients li::before { content: "•"; position: absolute; left: 4px; color: var(--gold); font-weight: 800; font-size: 18px; line-height: 1; }
.recipe__method { margin: 0; padding-left: 20px; display: grid; gap: 13px; }
.recipe__method li { font-size: 15px; color: #3a4456; padding-left: 4px; line-height: 1.6; }
.recipe__method li::marker { color: var(--blue); font-weight: 700; }
.recipe__soon { margin-top: 16px; font-size: 14px; color: var(--stone); font-style: italic; }
/* The cheeky #hashtag next to the carbonara heading - keeps the student voice. */
.recipe__tag {
  display: inline-block; margin-left: 12px; vertical-align: middle;
  font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.01em;
  color: #9a7a2e; background: rgba(200, 164, 77, 0.16);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 540px) { .recipe__tag { display: block; margin: 10px 0 0; width: fit-content; } }
/* An italic, hand-written-feeling caption under a date-idea photo. */
.spot__cap { font-size: 13px; font-style: italic; color: var(--stone); line-height: 1.45; margin-bottom: 10px; }

/* The carbonara recipe with a photo of it actually being made alongside. */
.recipe-feature { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.recipe-feature .recipe { margin-top: 0; }
.recipe-feature__fig { margin: 0; }
.recipe-feature__fig img {
  width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid var(--sand-deep); box-shadow: var(--shadow-sm);
}
.recipe-feature__fig figcaption { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--stone); line-height: 1.45; }
@media (max-width: 760px) {
  .recipe-feature { grid-template-columns: 1fr; gap: 22px; }
  .recipe-feature__fig { max-width: 340px; }
}

/* ---- DATING SUBTABS ---------------------------------------------------- */
/* The pill row that switches between the four dating sections. Lives on a
   cream background, so it's the inverse of the navy feel__tabs. Also reused
   by the Niche activities page (same .date__tabs / .date__tab / .date__panel). */
.date__tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 30px 0 32px; padding-bottom: 22px;
  border-bottom: 1px solid var(--sand-deep);
}
.date__tab {
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  background: var(--white); color: var(--navy); border: 1px solid var(--sand-deep);
  transition: transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.date__tab:hover { border-color: var(--blue); transform: translateY(-1px); }
.date__tab.active {
  background: var(--navy); color: var(--cream); border-color: var(--navy);
  box-shadow: var(--shadow-sm);
}

/* Each panel fades in when you switch tabs (React remounts it via key). */
.date__panel { animation: dateFade .4s var(--ease); }
@keyframes dateFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .date__panel { animation: none; } }

/* Real-talk tab: portrait photo beside the prose, stacking on mobile. */
.date__split { display: grid; grid-template-columns: 0.85fr 1fr; gap: 40px; align-items: start; }
.date__photo { margin: 0; }
.date__photo img { max-height: 560px; }
.date__prose h2 { margin-bottom: 18px; }
.date__prose p { font-size: 16.5px; line-height: 1.7; color: #3a4456; margin-bottom: 16px; max-width: 640px; }
.date__prose--wide p { max-width: 720px; }
.date__pull {
  margin-top: 22px; padding: 20px 24px; border-left: 4px solid var(--gold);
  background: var(--sand); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--navy);
}
@media (max-width: 820px) {
  .date__split { grid-template-columns: 1fr; gap: 24px; }
  .date__photo img { max-height: 420px; }
}

/* Finding-someone tab: prose above, an opinion callout below. */
.date__meet { display: grid; gap: 30px; }
.date__callout {
  background: var(--navy); color: var(--cream); border-radius: var(--radius);
  padding: 30px 34px; box-shadow: var(--shadow-sm); max-width: 760px;
}
.date__callout h3 { color: var(--white); font-size: 23px; margin: 12px 0 14px; }
.date__callout p { font-size: 15.5px; line-height: 1.65; color: #cdd9ec; margin-bottom: 14px; }
.date__callout p:last-child { margin-bottom: 0; }
.date__callout-tag {
  display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy);
  background: var(--gold); padding: 4px 12px; border-radius: 999px;
}

/* ---- ROOM DECORATING --------------------------------------------------- */
/* These room photos are tall portraits - show them whole (posters at the top,
   plant in the middle) rather than centre-cropping them like a normal pagefig. */
.roomfig { max-width: 460px; margin: 12px auto 30px; }
.pagefig.roomfig img { max-height: none; }
.roomfig figcaption { text-align: center; }

/* ---- PUB REVIEW STICKER -------------------------------------------------- */
/* A small angled "badge" near the top of a pub review page, e.g. "Leo's
   favourite". Add `sticker: "…"` to a pub in pubDetails in content.js. */
.pubdetail { position: relative; }
.sticker {
  position: absolute; top: -6px; right: 8px;
  transform: rotate(-9deg);
  display: inline-block; font-family: var(--sans);
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--navy); background: var(--gold);
  padding: 8px 18px; border-radius: 6px;
  box-shadow: var(--shadow-sm);
  border: 1px dashed rgba(10, 34, 64, 0.35);
  z-index: 2;
}
@media (max-width: 640px) {
  .sticker { position: static; display: inline-block; transform: rotate(-6deg); margin-bottom: 14px; }
}

/* Space consecutive sub-sections (e.g. "The Guinness", "The building…",
   "Sport and live music") apart. The first block keeps its natural spacing
   under the section heading; each following block gets a gap above it. */
.pubblock + .pubblock { margin-top: 34px; }

/* ---- PUB REVIEW PHOTOS -------------------------------------------------- */
/* Some pub photos are tall portraits, and the graffiti one you actually need
   to read - so show them whole and a bit smaller instead of centre-cropping
   them like a normal pagefig. Add `full: true` to a photo in content.js. */
.pagefig.pubfig { max-width: 420px; margin: 12px auto 30px; }
.pagefig.pubfig img { max-height: none; object-fit: contain; }
.pubfig figcaption { text-align: center; }

/* ---- PUB REVIEW VIDEO -------------------------------------------------- */
/* A tall phone-shot clip (e.g. splitting the G) shown inline. Same centred,
   uncropped treatment as a pubfig, with rounded corners and a caption. */
.pagefig.pubvideo { max-width: 340px; margin: 12px auto 30px; }
.pubvideo video {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  background: #000;
}
.pubvideo figcaption { text-align: center; }

/* ---- PUB REVIEW QUOTE ---------------------------------------------------*/
/* A single standout line from a named "character" - a regular, a friend, a
   quote overheard at the bar. Add a `quote: { text, author, tag }` to a pub
   in content.js and it appears between Real Talk and Find your people. */
.pubquote {
  margin: 6px 0 30px; padding: 28px 32px; text-align: center;
  background: rgba(200, 164, 77, 0.12);
  border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  border-radius: var(--radius);
}
.pubquote p {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.6vw, 24px); line-height: 1.5; color: var(--navy);
  margin: 0 0 12px;
}
.pubquote p::before, .pubquote p::after { content: none; }
.pubquote cite {
  display: block; font-style: normal; font-family: var(--sans);
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #8a6d2f;
}
.pubquote__tag { font-weight: 500; text-transform: none; letter-spacing: normal; }
.pubquote__tag::before { content: " · "; }

/* With a photo, the quote becomes a testimonial: face on the left, words on
   the right (stacks on mobile). Ties the quote to the person who said it. */
.pubquote--withphoto {
  display: flex; align-items: center; gap: 28px; text-align: left;
  padding: 24px 30px;
}
.pubquote--withphoto .pubquote__body { flex: 1; }
.pubquote--withphoto p { font-size: clamp(18px, 2.2vw, 22px); }
.pubquote__fig { margin: 0; flex: 0 0 200px; }
.pubquote__fig img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; box-shadow: var(--shadow-sm);
}
.pubquote__fig figcaption {
  margin-top: 8px; font-size: 12px; line-height: 1.4;
  color: var(--stone); text-align: center;
}
@media (max-width: 600px) {
  .pubquote--withphoto { flex-direction: column; gap: 18px; text-align: center; padding: 24px; }
  .pubquote--withphoto .pubquote__body { text-align: center; }
  .pubquote__fig { flex-basis: auto; width: 100%; max-width: 280px; }
}

/* A longer, multi-paragraph testimonial (no photo) reads better left-aligned
   and a touch smaller than a one-line pull-quote. */
.pubquote--long { text-align: left; padding: 30px 34px; }
.pubquote--long p {
  font-style: normal; font-size: 17px; font-weight: 400; line-height: 1.7; margin: 0 0 16px;
}
.pubquote--long cite { text-align: left; }

/* ---- NICHE ACTIVITIES -------------------------------------------------- */
/* Each activity opens with a lede: heading + intro on the left, an uncropped
   portrait photo on the right (stacks on mobile). */
.act-lede { display: grid; grid-template-columns: 1fr 0.82fr; gap: 40px; align-items: start; margin-bottom: 8px; }
.act-lede__body .eyebrow { display: block; margin-bottom: 10px; }
.act-lede__title { font-size: clamp(24px, 3.5vw, 32px); margin-bottom: 16px; }
.act-lede__body p { font-size: 16.5px; line-height: 1.7; color: #3a4456; max-width: 620px; }
.act-lede__fig { margin: 0; }
.act-lede__fig img {
  width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid var(--sand-deep); box-shadow: var(--shadow-sm);
}
.act-lede__fig figcaption { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--stone); line-height: 1.45; }
/* Stacked ledes (the hickory page uses three) need breathing room between them. */
.act-lede + .act-lede { margin-top: 48px; }
/* `flip` swaps the columns: photo left, text right. */
.act-lede--flip { grid-template-columns: 0.82fr 1fr; }
.act-lede--flip .act-lede__body { order: 2; }
.act-lede--flip .act-lede__fig { order: 1; }
@media (max-width: 820px) {
  .act-lede { grid-template-columns: 1fr; gap: 22px; }
  .act-lede__fig { max-width: 420px; }
  .act-lede--flip { grid-template-columns: 1fr; }
  .act-lede--flip .act-lede__body, .act-lede--flip .act-lede__fig { order: 0; }
}

/* A standalone readable paragraph under a cathead within an activity. */
.act-prose { font-size: 16px; line-height: 1.7; color: #3a4456; max-width: 720px; }
.act-prose + .act-prose { margin-top: 16px; }
.act-prose--spaced { margin-top: 44px; }

/* "Perfect for …" tag row at the foot of an activity. */
.act-perfect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.act-perfect__label { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 16px; margin-right: 2px; }
.act-perfect__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.act-perfect__tag {
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  background: var(--sand); border: 1px solid var(--sand-deep);
  padding: 6px 13px; border-radius: 999px;
}

/* The labelled points ("The experience", "The ritual", …). */
.pointlist { display: grid; gap: 14px; margin-top: 4px; }
.pointlist__item {
  background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: 12px; padding: 16px 20px; box-shadow: var(--shadow-sm);
}
.pointlist__label { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 17px; }
.pointlist__item p { font-size: 15px; color: #3a4456; margin-top: 4px; line-height: 1.6; }

/* Harbour menu: a price list beside the photo of the board. */
.act-menuwrap { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
/* Named .pricelist, not .menu, to avoid colliding with the nav dropdown's
   .menu (which is max-height:0/overflow:hidden when closed). */
.pricelist {
  background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.pricelist__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 18px; border-bottom: 1px solid var(--sand-deep);
}
.pricelist__row:last-child { border-bottom: none; }
.pricelist__name { font-weight: 600; color: var(--ink); font-size: 15px; }
.pricelist__detail { display: block; font-size: 12.5px; color: var(--stone); font-weight: 400; margin-top: 2px; }
.pricelist__price { font-family: var(--serif); font-weight: 700; color: #9a7a2e; white-space: nowrap; font-size: 15px; }
.act-menuwrap__fig { margin: 0; }
.act-menuwrap__fig img {
  width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid var(--sand-deep); box-shadow: var(--shadow-sm);
}
.act-menuwrap__fig figcaption { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--stone); line-height: 1.45; }
@media (max-width: 760px) {
  .act-menuwrap { grid-template-columns: 1fr; gap: 22px; }
  .act-menuwrap__fig { max-width: 340px; }
}

/* Link out to the harbour café video - a quiet ghost button. */
.act-video {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 15px;
  color: var(--navy); background: var(--white); border: 1px solid var(--sand-deep);
  text-decoration: none; transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.act-video:hover { border-color: var(--blue); transform: translateY(-1px); }

/* ---- BALLS ------------------------------------------------------------- */
/* A narrow, portrait figure under the intro. The 3:4 frame matches the photo's
   native ratio, so the full outfit - shoes included - shows without cropping. */
.ballhero { margin: 8px auto 8px; max-width: 520px; }
.ballhero img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center;
  display: block; border-radius: var(--radius); border: 1px solid var(--sand-deep);
  box-shadow: var(--shadow-sm);
}
.ballhero figcaption {
  margin-top: 12px; text-align: center; font-family: var(--serif); font-style: italic;
  color: var(--stone); font-size: 15px; line-height: 1.5;
}
/* Same frame, but sitting mid-page between the black-tie intro and the two
   dress lists, so it needs room to breathe on both sides. */
.ballhero--dress { margin: 22px auto 36px; }

/* The five events. auto-fit keeps every card a comfortable width - 3-up on
   desktop, 2-up on tablet, 1-up on phones - with no float to fight. */
.evgrid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.evcard {
  background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--gold);
}
.evcard h3 { font-family: var(--serif); font-size: 22px; color: var(--navy); margin-bottom: 9px; }
.evcard p { font-size: 15px; color: #3a4456; line-height: 1.6; }
/* Money and tickets reuse the events card, topped in blue instead of gold so
   the two grids read as separate sections rather than one long run of cards. */
.evcard--cost { border-top-color: var(--blue); }

/* Black-tie guide: two even columns (guys / girls) that stack on mobile. */
.dressgrid { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .dressgrid { grid-template-columns: 1fr; } }
.dresscard {
  background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm);
}
.dresscard h3 { font-family: var(--serif); font-size: 20px; color: var(--navy); margin-bottom: 16px; }
/* The misconception cards reuse .dresscard but hold a paragraph rather than a
   bulleted list, so the body text needs matching to .dresslist li by hand. */
.mythcard__body { font-size: 15px; color: #3a4456; line-height: 1.6; }
.dresslist { list-style: none; display: grid; gap: 15px; }
.dresslist li { position: relative; padding-left: 24px; font-size: 15px; color: #3a4456; line-height: 1.6; }
.dresslist li::before {
  content: ""; position: absolute; left: 5px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}

/* ---- GOLF: Swilcan Bridge figure --------------------------------------- */
.golffig { margin: 4px auto 30px; max-width: 460px; text-align: center; }
.golffig img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--sand-deep); box-shadow: var(--shadow-sm); display: block; }
.golffig figcaption { margin-top: 12px; font-family: var(--serif); font-style: italic; color: var(--stone); font-size: 15px; line-height: 1.5; }

/* Smaller, floated to the right so the Old Course text wraps around it. */
.oldcourse { display: flow-root; }
.golffig--side { float: right; width: 40%; max-width: 300px; margin: 6px 0 16px 30px; }
/* Same, but floated to the left - used to alternate photo sides down a list. */
.golffig--left { float: left; margin: 6px 30px 16px 0; }
.golffig--side figcaption { font-size: 14px; }
/* Fashion-show photos have wildly different aspect ratios, so frame them all
   to one uniform shape (crop to fill) - keeps the column tidy and symmetric. */
.golffig--show { width: 320px; max-width: 42%; }
.golffig--show img {
  aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: center;
}
@media (max-width: 640px) {
  .golffig--side { float: none; width: 100%; max-width: 100%; margin: 6px auto 24px; }
  .golffig--show { width: 100%; max-width: 100%; }
  .golffig--show img { aspect-ratio: 3 / 2; }
  /* With the float gone, stack each show as: heading -> photo -> cards, so
     the photo sits under its OWN title rather than above it. */
  .showrow { display: flex; flex-direction: column; }
  .showrow .golffig--show { order: 2; }
  .showrow .cards { order: 3; }
  /* Don't Walk is a tall portrait; on the short mobile crop, nudge the frame
     down so the models sit centred rather than under a band of stage lights. */
  .show-dont-walk img { object-position: center 72%; }
}

/* ---- PAGE PHOTOS (halls, traditions, arrival) --------------------------- */
/* A full-width page photo with an optional caption + photographer credit. */
.pagefig { margin: 6px 0 30px; }
.pagefig img {
  width: 100%; max-height: 420px; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--sand-deep);
  box-shadow: var(--shadow-sm);
}
.pagefig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--stone); line-height: 1.5; }
.pagefig__imgwrap, .spot__imgwrap { position: relative; }

/* ---- PHOTO CREDIT BADGE ------------------------------------------------- */
/* A quiet ⓘ in the photo's corner; clicking it reveals the photographer
   credit. The credits are required by the photo licences - keep them. */
.credit { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; }
.credit__btn {
  width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(10, 34, 64, 0.45); color: rgba(255, 255, 255, 0.92);
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 13px;
  display: grid; place-items: center; line-height: 1; padding: 0;
  transition: background .2s var(--ease);
}
.credit__btn:hover { background: rgba(10, 34, 64, 0.8); }
.credit__pop {
  background: rgba(10, 34, 64, 0.9); color: #e8eef7; font-size: 12px;
  padding: 4px 10px; border-radius: 8px; line-height: 1.5; max-width: 320px;
}

/* Photo banner inside an option card (gyms, getting-here). */
.option__img {
  position: relative; margin: 2px 0 18px; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--sand-deep);
}
.option__img img { width: 100%; height: 250px; object-fit: cover; display: block; }
@media (max-width: 600px) { .option__img img { height: 190px; } }

/* ======================================================================== */
/*  NIGHTLIFE PAGE                                                          */
/*  The site's most-read page, so it gets its own treatment: a dark opener, */
/*  an interactive venue map, and a few bespoke blocks. Everything here is  */
/*  scoped to nightlife classes so it can't leak into other pages.          */
/* ======================================================================== */

/* Dark opener. A soft gold glow suggests a night sky without a photo. */
.nightlife-hero { position: relative; overflow: hidden; }
.nightlife-hero::before {
  content: ""; position: absolute; top: -180px; right: -140px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(200,164,77,0.20) 0%, rgba(200,164,77,0) 68%);
  pointer-events: none;
}
.nightlife-hero .wrap { position: relative; }

/* Dark-section overrides so shared blocks read correctly on navy. */
.bg-navy .cathead__blurb { color: #b8c6dc; }
.bg-navy .note { background: rgba(200,164,77,0.14); color: #e6dcc4; border-left-color: var(--gold); }
/* The quote block is built for cream backgrounds - lift its text on navy. */
.bg-navy .pubquote { background: rgba(255,255,255,0.06); }
.bg-navy .pubquote p { color: #eef3fa; }
.bg-navy .pubquote cite { color: var(--gold); }
.bg-navy .pubquote__fig figcaption { color: #a9bad4; }

/* A PORTRAIT photo (Miguel on the nightlife page). The frame is 3:4 to match
   the source, so it fills without cropping, and the block is roomier than the
   default so a tall photo sits comfortably next to the words. Independent of
   which side it's on - see --photoright below. */
.pubquote--portrait { align-items: stretch; gap: 32px; padding: 30px 34px; }
.pubquote--portrait .pubquote__fig { flex: 0 0 240px; align-self: center; }
.pubquote--portrait .pubquote__fig img { aspect-ratio: 3 / 4; }

/* Flips the photo to the RIGHT of the words. Order only - the frame's shape
   comes from --portrait (or the 4:3 default). */
.pubquote--photoright .pubquote__fig { order: 2; }
.pubquote--photoright .pubquote__body { order: 1; }

@media (max-width: 760px) {
  /* Stack on mobile. A left-hand photo leads with the face; a right-hand one
     keeps the words first, matching the reading order on desktop. */
  .pubquote--portrait { flex-direction: column; gap: 22px; }
  .pubquote--portrait .pubquote__fig { flex-basis: auto; width: 100%; max-width: 240px; align-self: flex-start; }
}
/* A multi-paragraph testimonial stays left-aligned on mobile - the shared
   rule centres short pull-quotes, which is unreadable at this length. */
@media (max-width: 600px) {
  .pubquote--long.pubquote--withphoto,
  .pubquote--long.pubquote--withphoto .pubquote__body { text-align: left; }
}

/* ---- PHOTOS ------------------------------------------------------------ */
/* A missing file falls back to the placeholder below, so a bad path is
   obvious rather than showing a broken image. */
.nightimg { margin: 0; overflow: hidden; border-radius: 12px; }
.nightimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nightimg figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--stone); }

/* The hero shot under the page title on the dark opener. */
.nightimg--hero { margin: 4px 0 26px; box-shadow: 0 18px 50px rgba(0,0,0,0.38); }
.nightimg--hero img { width: 100%; height: clamp(240px, 42vw, 420px); object-position: center 42%; }
.nightimg--hero figcaption { color: #a9bad4; text-align: center; }

/* A full-width photo sitting under a section heading. */
.nightimg--wide { margin: 2px 0 26px; }
.nightimg--wide img { width: 100%; height: clamp(200px, 34vw, 340px); object-position: center 40%; }
.nightph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 160px; border-radius: 12px; overflow: hidden; text-align: center; padding: 18px;
  background: linear-gradient(150deg, #10294b 0%, #1c3a63 55%, #24406a 100%);
  border: 1px solid rgba(200,164,77,0.28);
}
.nightph__glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,164,77,0.32) 0%, rgba(200,164,77,0) 70%);
}
.nightph__label {
  position: relative; font-family: var(--serif); font-size: 18px; color: rgba(251,248,242,0.92);
}
.nightph__hint {
  position: relative; font-size: 11px; color: rgba(200,164,77,0.85);
  word-break: break-all; max-width: 100%;
}

/* ---- INTERACTIVE VENUE MAP --------------------------------------------- */
.vmap {
  background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
}
.vmap__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vmap__filter {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 15px; border-radius: 999px; color: #3a4456;
  background: var(--sand); border: 1px solid var(--sand-deep);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.vmap__filter:hover { border-color: var(--blue); color: var(--blue); }
.vmap__filter.is-on { background: var(--navy); border-color: var(--navy); color: var(--cream); }

.vmap__stage { background: var(--sand); border-radius: 12px; padding: 10px; }
.vmap__svg { width: 100%; height: auto; display: block; }
.vmap__street { fill: none; stroke: #c2cbdb; stroke-width: 3.5; stroke-linecap: round; }
.vmap__street--minor { stroke-width: 2.4; stroke-dasharray: 5 5; }
/* NB: font sizes here are in the SVG's own viewBox units, not screen pixels -
   the map scales to its container, so these end up roughly 1.5-2x on screen. */
.vmap__road { font-size: 7px; font-family: var(--sans); fill: #6b7280; }
.vmap__road--minor { font-size: 6px; }
.vmap__road--muted { fill: #9aa3b4; font-style: italic; }

.vmap__pin { cursor: pointer; }
.vmap__pin:focus { outline: none; }
.vmap__halo { fill: rgba(31,93,171,0.14); opacity: 0; transition: opacity .18s var(--ease); }
.vmap__pin:hover .vmap__halo,
.vmap__pin:focus .vmap__halo,
.vmap__pin.is-active .vmap__halo { opacity: 1; }
.vmap__dot { fill: var(--blue); stroke: var(--white); stroke-width: 2.5; transition: r .15s var(--ease); }
.vmap__pin--union .vmap__dot { fill: var(--gold); }
.vmap__pin--pub   .vmap__dot { fill: #2e8b57; }
.vmap__pin--food  .vmap__dot { fill: #c0612e; }
.vmap__pin.is-active .vmap__dot { r: 9.5; }
.vmap__pin:focus .vmap__dot { stroke: var(--navy); stroke-width: 3; }
.vmap__pinname {
  font-size: 7px; font-weight: 600; font-family: var(--sans);
  fill: var(--navy); pointer-events: none;
  /* Draw the halo behind the glyphs so names stay readable over streets. */
  paint-order: stroke; stroke: var(--sand); stroke-width: 2.5px; stroke-linejoin: round;
}
.vmap__pin.is-active .vmap__pinname { fill: var(--blue); }

.vmap__prompt { margin-top: 16px; font-size: 14px; color: var(--stone); font-style: italic; }
.vmap__card {
  margin-top: 16px; background: var(--sand); border: 1px solid var(--sand-deep);
  border-radius: 12px; padding: 18px 20px;
}
.vmap__cardtag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 9px;
  color: var(--blue); background: rgba(31,93,171,0.12);
}
.vmap__cardtag--union { color: #8a6d1f; background: rgba(200,164,77,0.22); }
.vmap__cardtag--pub   { color: #1f6b43; background: rgba(46,139,87,0.14); }
.vmap__cardtag--food  { color: #a04d22; background: rgba(192,97,46,0.14); }
.vmap__card h4 { font-family: var(--serif); font-size: 19px; color: var(--navy); margin-bottom: 3px; }
.vmap__addr { font-size: 13px; color: var(--stone); margin-bottom: 9px; }
.vmap__card p { font-size: 14.5px; color: #3a4456; }
.vmap__dirs { display: inline-block; margin-top: 11px; color: var(--blue); font-weight: 600; font-size: 14px; text-decoration: none; }
.vmap__dirs:hover { text-decoration: underline; }
.vmap__note { margin-top: 14px; font-size: 12.5px; color: #9aa3b4; }
/* Hidden by default; the narrow-screen rule below switches it on. Declared
   before the media query so the media query wins the cascade. */
.vmap__scrollhint { display: none; margin-top: 10px; font-size: 12.5px; color: var(--stone); font-style: italic; }

/* On a narrow screen, shrinking the whole map to fit makes the labels
   unreadable - so hold a minimum width and let the stage scroll sideways
   instead, which keeps everything legible at the same proportions. */
@media (max-width: 620px) {
  .vmap { padding: 16px; }
  .vmap__stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vmap__svg { min-width: 560px; }
  .vmap__pinname { font-size: 8px; stroke-width: 3px; }
  .vmap__road { font-size: 7.5px; }
  .vmap__road--minor { font-size: 6.5px; }
  .vmap__scrollhint { display: block; }
}

/* ---- HOW A NIGHT RUNS (timeline) --------------------------------------- */
.nightrun { list-style: none; display: grid; gap: 0; position: relative; margin-left: 4px; }
.nightrun::before {
  content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px;
  width: 2px; background: linear-gradient(to bottom, var(--gold), rgba(200,164,77,0.25));
}
.nightrun__step { position: relative; padding: 0 0 26px 38px; }
.nightrun__step:last-child { padding-bottom: 0; }
.nightrun__step::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--cream); border: 3px solid var(--gold);
}
.nightrun__time {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8a6d1f;
}
.nightrun__step h3 { font-size: 20px; margin: 2px 0 6px; }
.nightrun__step p { font-size: 15px; color: #3a4456; }
/* Steps that have a photo put it alongside the text on wider screens. */
.nightrun__step--photo { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: start; }
.nightrun__photo img { width: 100%; height: 170px; object-position: center 35%; }
@media (max-width: 720px) {
  .nightrun__step--photo { grid-template-columns: 1fr; gap: 14px; }
  .nightrun__photo img { height: 200px; }
}

/* ---- CLUB-NIGHT VENUES (on the dark band) ------------------------------ */
.venues { display: grid; gap: 20px; }
.venue {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius); overflow: hidden;
}
/* Only venues with a photo get the two-column treatment. */
.venue--photo { display: grid; grid-template-columns: 240px 1fr; gap: 0; }
.venue--hi { border-color: rgba(200,164,77,0.55); background: rgba(200,164,77,0.08); }
.venue__photo { border-radius: 0; min-height: 100%; }
.venue__photo.nightph { border: none; border-right: 1px solid rgba(255,255,255,0.12); }
.venue__body { padding: 24px 26px; }
.venue__tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.venue__body h3 { font-size: 23px; margin-bottom: 10px; }
.venue__body > p { font-size: 15px; color: #cdd9ec; margin-bottom: 16px; }
.venue__facts { display: grid; gap: 8px; }
.venue__fact { display: grid; grid-template-columns: 108px 1fr; gap: 12px; align-items: baseline; }
.venue__fact dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #8ca0bd;
}
.venue__fact dd { font-size: 14px; color: #dbe4f1; }
@media (max-width: 760px) {
  .venue--photo { grid-template-columns: 1fr; }
  .venue__photo { min-height: 150px; }
  .venue__photo.nightph { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .venue__fact { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- THE BIG NIGHTS ---------------------------------------------------- */
.bignights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .bignights { grid-template-columns: 1fr; } }
.bignight {
  position: relative; background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
}
.bignight:first-child { border-color: var(--gold); box-shadow: 0 10px 30px rgba(200,164,77,0.18); }
.bignight__rank {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--navy); background: rgba(200,164,77,0.22);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 12px;
}
.bignight h3 { font-size: 24px; margin-bottom: 3px; }
.bignight__when { display: block; font-size: 13px; color: var(--stone); margin-bottom: 12px; }
.bignight p { font-size: 15px; color: #3a4456; }
.bignight__hist {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--sand-deep);
  font-size: 13.5px; color: #5b6579;
}
.bignight__hist strong { color: var(--navy); }

/* ---- PLATINUM PASS ----------------------------------------------------- */
.platinum {
  margin-top: 30px; background: var(--navy); color: var(--cream);
  border-radius: var(--radius); padding: 32px 34px; border: 1px solid rgba(200,164,77,0.4);
}
.platinum h3 { color: var(--white); font-size: 24px; margin-bottom: 12px; }
.platinum > p { color: #cdd9ec; font-size: 16px; margin-bottom: 16px; }
.platinum ul { list-style: none; display: grid; gap: 11px; margin-bottom: 16px; }
.platinum li { position: relative; padding-left: 28px; font-size: 15px; color: #d7e1f0; }
.platinum li::before { content: "★"; position: absolute; left: 0; color: var(--gold); }
.platinum__caveat { font-size: 14px; color: #a9bad4; font-style: italic; }

/* ---- THE WATER MANOEUVRE ----------------------------------------------- */
.water {
  position: relative; margin-top: 30px; background: #eaf3fa;
  border: 1px solid #c9dcec; border-radius: var(--radius); padding: 30px 32px;
}
.water__drop { position: absolute; top: 22px; right: 26px; font-size: 30px; opacity: 0.5; }
.water h3 { font-size: 23px; margin-bottom: 10px; padding-right: 44px; }
.water > p { font-size: 16px; color: #35485c; margin-bottom: 16px; }
.water__steps { margin: 0 0 16px 20px; display: grid; gap: 9px; }
.water__steps li { font-size: 15px; color: #35485c; padding-left: 6px; }
.water__caveat { font-size: 14px; color: #5b7186; font-style: italic; }

/* A freshers'-line-up card Miguel specifically rates. */
.card--pick { border-color: var(--gold); box-shadow: 0 8px 24px rgba(200,164,77,0.16); }