/* v3 look for the pages that keep their older layout (guides, What's on, About, area and category pages, privacy).
   The older stylesheet works from colour and font settings, so redefining those here re-colours everything at once;
   the rules after that tidy the parts that need more than a colour change. Light only, like the rest of v3. */
body.v3skin {
  --bg: #fffcf7;
  --surface: #ffffff;
  --surface-2: #f6f2ec;
  --ink: #083967;
  --ink-2: #24364b;
  --muted: #52647a;
  --line: #d5dce3;
  --accent: #083967;
  --accent-ink: #c4305b;
  --accent-soft: #fdebf0;
  --coral: #c4305b;
  --coral-soft: #fdebf0;
  --sun: #c4305b;
  --sun-soft: #fdebf0;
  --sun-ink: #c4305b;
  --free: #083967;
  --heart: #c8325e;
  --star: #c8325e;
  --shadow: 0 10px 30px rgba(8, 56, 102, 0.08);
  --shadow-lg: 0 24px 50px rgba(8, 56, 102, 0.16);
  color-scheme: light;
  background: var(--fam-paper);
  color: var(--fam-navy);
  font-family: var(--fam-body);
}
body.v3skin h1, body.v3skin h2, body.v3skin h3 { font-family: var(--fam-display); font-weight: 500; letter-spacing: 0; color: var(--fam-navy); }
body.v3skin h1 { font-weight: 600; }
body.v3skin a { color: inherit; }
body.v3skin .wrap { max-width: 1280px; padding-left: var(--fam-pad); padding-right: var(--fam-pad); }
body.v3skin > .fhead, body.v3skin > .flocbar { position: relative; }

/* Buttons and pills in the older layouts become v3 pills */
body.v3skin .hbtn { height: 44px; padding: 0 18px; border-radius: 22px; background: var(--fam-white); color: var(--fam-navy); box-shadow: inset 0 0 0 1.5px var(--fam-navy); font: 700 15px/20px var(--fam-body); }
body.v3skin .hbtn:hover { box-shadow: inset 0 0 0 1.5px var(--fam-rose); color: var(--fam-rose); }
body.v3skin .hbtn.primary { background: var(--fam-navy); color: var(--fam-white); box-shadow: none; }
body.v3skin .hbtn.primary:hover { background: #0b4a85; color: var(--fam-white); }
body.v3skin .chip, body.v3skin .pill, body.v3skin .tag { border-radius: 18px; font-family: var(--fam-body); }
body.v3skin .chip[aria-pressed="true"], body.v3skin .cat[aria-pressed="true"] { background: var(--fam-navy); color: var(--fam-white); }
body.v3skin input, body.v3skin select, body.v3skin textarea { font-family: var(--fam-body); color: var(--fam-navy); }
body.v3skin input[type="email"], body.v3skin input[type="text"], body.v3skin input[type="url"], body.v3skin input[type="search"], body.v3skin textarea, body.v3skin select { border: 1px solid var(--fam-muted); border-radius: 10px; }

/* Cards */
body.v3skin .card, body.v3skin .vcard, body.v3skin .gcard, body.v3skin .gitem { border-radius: 14px; }
body.v3skin .card { border: 1px solid var(--fam-border); box-shadow: none; }
body.v3skin .gitem h3, body.v3skin .gcard h3 { font-weight: 500; }
body.v3skin .gitem h3 a:hover, body.v3skin .gcard h3 a:hover { color: var(--fam-rose); }
body.v3skin .gmeta, body.v3skin .sub, body.v3skin .crumbs, body.v3skin .crumbs a { color: var(--fam-muted); }

/* Section headings: the navy rule under them, as on the v3 homepage */
body.v3skin .sec-head { border-bottom: 2px solid var(--fam-navy); padding-bottom: 14px; margin-bottom: 22px; }
body.v3skin .sec-head h2 { font-size: 32px; line-height: 38px; }

/* Guide articles: comfortable reading width and v3 type */
body.v3skin article h1, body.v3skin .ahead h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.1; }
body.v3skin .kicker, body.v3skin .eyebrow { color: var(--fam-rose); font-family: var(--fam-body); font-weight: 700; letter-spacing: 0.06em; }
body.v3skin .abody, body.v3skin .article-body, body.v3skin .prose { font-size: 18px; line-height: 1.7; color: #24364b; }
body.v3skin .abody h2, body.v3skin .article-body h2, body.v3skin .prose h2 { font-size: 30px; line-height: 1.2; margin-top: 1.6em; }
body.v3skin .abody a, body.v3skin .article-body a, body.v3skin .prose a { color: var(--fam-navy); font-weight: 700; text-decoration-color: var(--fam-rose); text-underline-offset: 3px; }
body.v3skin .abody a:hover, body.v3skin .article-body a:hover, body.v3skin .prose a:hover { color: var(--fam-rose); }
body.v3skin blockquote { border-left: 4px solid var(--fam-rose); background: var(--fam-blush); border-radius: 0 12px 12px 0; }
body.v3skin .ahero img, body.v3skin .ahero { border-radius: 16px; }
body.v3skin .minisign, body.v3skin .signup, body.v3skin .nl { border-radius: 16px; }
body.v3skin .minisign button, body.v3skin .signup button { background: var(--fam-rose); color: var(--fam-white); border-radius: 24px; }

/* What's on: date blocks in rose, like the email */
body.v3skin .ev .date, body.v3skin .edate, body.v3skin .dateblock { background: var(--fam-blush); color: var(--fam-navy); border-radius: 12px; }

/* The older bottom bar and season pill are replaced by the v3 header and phone menu */
body.v3skin .bnav, body.v3skin .season-pill, body.v3skin header .bar { display: none !important; }
body.v3skin { padding-bottom: 0 !important; }

/* What's on: the seasonal box in v3 pink rather than the older orange */
body.v3skin .season { background: var(--fam-blush); box-shadow: inset 0 0 0 1px #f6c9d6; }
body.v3skin .season .evl .ev { background: var(--fam-white); }
body.v3skin .ev { border-radius: 14px; }
/* Consent bar in v3 colours */
body.v3skin .consent, body.v3skin #consent { border-radius: 16px; font-family: var(--fam-body); }

/* Guide pages: the article on the left, a sticky side panel on the right, everything after them full width */
body.v3skin article.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 64px; align-items: start; }
body.v3skin article.article > .lhead, body.v3skin article.article > .ahero { grid-column: 1 / -1; }
body.v3skin article.article > .prose { grid-column: 1; max-width: 720px; }
body.v3skin article.article > .gaside { grid-column: 2; grid-row: 3; position: sticky; top: 24px; display: grid; gap: 16px; }
body.v3skin .ahero { margin: 28px 0 36px; }
body.v3skin .ahero img { width: 100%; max-height: 520px; object-fit: cover; }
.gabox { background: var(--fam-white); border: 1px solid var(--fam-border); border-radius: 16px; padding: 20px 22px; }
.gabox h2 { margin: 0 0 10px !important; font: 500 20px/24px var(--fam-display) !important; }
.gabox ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 20px; }
.gabox ol a { color: var(--fam-navy); text-decoration: none; font-weight: 600; }
.gabox ol a:hover { color: var(--fam-rose); text-decoration: underline; }
.gaplaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gaplaces li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--fam-border); font-size: 15px; line-height: 20px; }
.gaplaces li:last-child { border-bottom: 0; }
.gaplaces a { color: var(--fam-navy); font-weight: 700; text-decoration: none; }
.gaplaces a:hover { color: var(--fam-rose); }
.gaplaces span { flex: none; color: var(--fam-muted); font-size: 14px; }
.gall2 { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--fam-navy); }
.gashare { padding: 14px; }
body.v3skin .gplaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; margin-top: 8px; }
body.v3skin .gplaces .fcard h3 { font-size: 22px; line-height: 28px; }
body.v3skin .fcard h3 a { text-decoration: none; }
@media (max-width: 1100px) {
  body.v3skin article.article { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 36px; }
  body.v3skin .gplaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  body.v3skin article.article { display: block; }
  body.v3skin article.article > .gaside { position: static; margin: 28px 0 0; }
  .gabox:first-child { display: none; }
  body.v3skin .gplaces { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
.gashare .fbtn { width: 100%; }

/* Pictures inside a guide's text, with the credit underneath */
body.v3skin .aimg { margin: 28px 0; }
body.v3skin .aimg img { display: block; width: 100%; height: auto; border-radius: 14px; }
body.v3skin .aimg figcaption { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--fam-muted); }
body.v3skin .aimg.tall { max-width: 360px; }