/* The shared styles own the brand palette and site furniture. */
.lancaster-page {
  --coral: inherit;
  --lanc-green: #1f2a28;
  --lanc-gold: #f2d37a;
  --pub-dark: var(--lanc-green);
  --pub-hero: var(--slate);
  --pub-heading: var(--slate);
  --pub-button: var(--slate);
  --pub-accent: var(--coral);
  --pub-highlight: var(--coral);
  --pub-label: var(--slate);
  --pub-strip: var(--slate);
  --lanc-gutter: 16px;
  color: var(--black);
}
/* The three effects below replace the shared section reveals on this page. */
.lancaster-page main .rise { transform: none; transition: none; }
.lanc-wrap { width: min(100%, 1280px); margin-inline: auto; padding-inline: var(--lanc-gutter); }
.lancaster-page main h2 { font: 400 clamp(52px, 7.2vw, 100px)/.98 var(--serif); letter-spacing: -.035em; }
.lancaster-page main h3 { font-family: var(--serif); }
.lancaster-page main .eyebrow {
  display: flex; align-items: center; gap: 12px; width: fit-content;
  padding: 0; margin: 0 0 24px; background: transparent; color: inherit;
  font: 400 12px/1.5 'Anton', sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.lancaster-page main .label-number { padding: 0 12px 0 0; border-right: 1px solid currentColor; font: inherit; }
.lancaster-page main p { text-wrap: pretty; }
.lancaster-page main :focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.lancaster-page .menu-toggle { min-width: 44px; min-height: 44px; }

/* 1. One photograph, linked to the hero's exit from the viewport. */
.lanc-hero {
  position: relative; isolation: isolate; overflow: clip; display: grid; align-items: center;
  min-height: calc(100svh - 100px); background: var(--black); color: var(--cream);
  view-timeline-name: --lanc-hero; view-timeline-axis: block;
}
.lanc-hero-image { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 54% 56%; transform: scale(1.08); }
.lanc-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #141414db, #141414b8 58%, #141414ad); }
.lanc-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--lanc-green), #14141400 90%); opacity: .35; }
.lanc-hero-content { padding-block: 64px 48px; }
.lanc-hero h1 { max-width: 960px; font: 400 clamp(54px, 7.7vw, 112px)/.97 var(--serif); letter-spacing: -.035em; }
.lanc-hero h1 em { color: var(--lanc-gold); }
.lanc-strap { max-width: 550px; margin-top: 28px; font-size: 17px; line-height: 1.65; }
.lanc-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 48px; min-height: 56px; margin-top: 28px; padding: 14px 24px; background: var(--coral); color: var(--black); font-weight: 700; }
.lanc-cta span { font-size: 24px; line-height: 1; }
.lanc-cta:hover { background: var(--cream); text-decoration: none; }
.lanc-hero-note { margin-top: 16px; font-size: 12px; line-height: 1.6; }
@keyframes lanc-hero-scale { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes lanc-hero-darken { from { opacity: .35; } to { opacity: .9; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lanc-hero-image { animation: lanc-hero-scale linear both; animation-timeline: --lanc-hero; animation-range: exit 0% exit 100%; }
    .lanc-hero-shade { animation: lanc-hero-darken linear both; animation-timeline: --lanc-hero; animation-range: exit 0% exit 100%; }
  }
}

/* 2. Each reason catches a little lower, leaving the card edges visible. */
.lanc-pitch { position: relative; z-index: 2; background: var(--lanc-green); color: var(--cream); padding-top: 76px; margin-bottom: -48px; }
.lanc-pitch-heading h2 { max-width: 750px; }
.lanc-pitch-heading > p:last-child { margin-top: 24px; font-size: 20px; }
.lanc-reasons { list-style: none; padding: 0; margin: 48px 0 0; }
.lanc-reason {
  position: sticky; top: calc(16px + var(--card) * 14px); z-index: var(--card);
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px;
  min-height: 220px; padding: 28px 20px; margin-bottom: 28svh;
  border: 1px solid var(--sage); background: var(--lanc-green);
  box-shadow: 0 -12px 24px #14141426;
}
.lanc-reason:last-child { margin-bottom: 0; border-bottom: 5px solid var(--coral); }
.lanc-numeral { font: 400 54px/1 'Anton', sans-serif; letter-spacing: -.02em; color: var(--coral); }
.lanc-reason h3 { font-size: clamp(34px, 5.2vw, 72px); line-height: 1.05; letter-spacing: -.025em; }
.lanc-reason p { margin-top: 20px; max-width: 660px; font-size: 16px; line-height: 1.65; }

/* A cream title plate crosses the first photograph's upper edge. */
.lanc-local { background: var(--cream); padding-top: 124px; }
.lanc-local-intro { position: relative; z-index: 1; }
.lanc-local-copy { max-width: 590px; font-size: 17px; line-height: 1.7; }
.lanc-local h2 { position: relative; width: fit-content; padding: 28px 20px 20px 0; margin-bottom: -32px; background: var(--cream); color: var(--slate); }

/* 3. The native row is also the no-script and reduced-motion layout. */
.lanc-gallery { padding-bottom: 56px; }
.lanc-photo-window { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-color: var(--slate) var(--cream); scrollbar-width: thin; padding-block: 0 16px; }
.lanc-photo-track { display: flex; gap: 16px; width: max-content; padding-inline: var(--lanc-gutter); }
.lanc-photo-track figure { flex: 0 0 auto; width: min(78vw, 420px); scroll-snap-align: center; }
.lanc-photo-track img { width: 100%; height: 440px; object-fit: cover; }
.lanc-welcome { background: var(--coral); color: var(--black); }
.lanc-welcome .lanc-wrap { padding-block: 56px 104px; }
.lanc-welcome h2 { color: #fff; max-width: 690px; }
.lanc-welcome-heading > p { margin-top: 24px; max-width: 540px; font-size: 17px; line-height: 1.65; }
.lanc-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 24px; }
.lanc-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; border-top: 1px solid #14141440; padding-top: 20px; }
.lanc-steps .lanc-numeral { color: var(--black); font-size: 32px; }
.lanc-steps h3 { font-size: 30px; line-height: 1.1; margin-bottom: 8px; }
.lanc-steps p { font-size: 15px; line-height: 1.55; }

.lanc-register { background: var(--cream); padding-bottom: 80px; }
.lanc-grid { display: grid; gap: 40px; }
.lanc-register-copy { padding-top: 52px; }
.lanc-register h2 { color: var(--slate); margin-bottom: 24px; }
.lanc-register-copy > p:last-child { max-width: 440px; font-size: 18px; line-height: 1.7; }
.lanc-form { position: relative; grid-row: 1; margin-top: -48px; padding: 28px 20px; background: var(--cream); border: 1px solid #3f4b4940; box-shadow: 0 20px 48px #1414141f; }
.lanc-form label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 8px; }
.lanc-form .row { margin-bottom: 20px; }
.lanc-form .two { display: grid; gap: 20px; }
.lanc-form input[type=text],.lanc-form input[type=email],.lanc-form input[type=tel] { width: 100%; min-height: 52px; border: 1px solid var(--slate); border-radius: 0; padding: 12px; background: transparent; color: var(--black); font: 16px/1.5 var(--sans); }
.lanc-form .tick { display: flex; gap: 12px; align-items: flex-start; padding: 18px 0; border-block: 1px solid #3f4b4940; font-size: 14px; font-weight: 400; line-height: 1.6; }
.lanc-form .tick input { flex: 0 0 24px; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--lanc-green); }
.lanc-form .tick b { display: block; margin-bottom: 6px; }
.lanc-form button { width: 100%; min-height: 56px; border: 0; border-radius: 0; padding: 14px; background: var(--lanc-green); color: var(--cream); font: 700 17px/1.4 var(--sans); cursor: pointer; }
.lanc-form button:hover { background: var(--slate); }
.lanc-form button:disabled { opacity: .65; cursor: wait; }
.lanc-small { font-size: 13px; color: var(--slate); margin-top: 16px; line-height: 1.6; }
.lanc-small a { display: inline-block; min-height: 44px; padding-top: 10px; text-decoration: underline; }
.lanc-msg { margin-top: 12px; font-size: 15px; font-weight: 700; }
.lanc-msg:empty { display: none; }
.lanc-msg.bad { padding: 12px; border-left: 4px solid var(--coral); color: var(--black); }
.lanc-done { display: none; padding: 40px 0; }
.lanc-done h3 { font-size: 44px; line-height: 1.1; margin-bottom: 16px; }
.lanc-hp { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lanc-section { padding-block: 56px; }
.lanc-menu { background: var(--cream); }
.lanc-menu .lanc-wrap { border-top: 1px solid #3f4b4940; padding-top: 48px; }
.lancaster-page .lanc-section h2 { font-size: clamp(42px, 5.2vw, 68px); max-width: 820px; }
.lanc-menu h2 { color: var(--slate); }
.lanc-menu h2 + p { margin-top: 20px; max-width: 580px; font-size: 17px; }
#lanc-menu { margin-top: 32px; }
.lanc-menu h3 { font: 400 16px/1.5 'Anton', sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 32px 0 12px; color: var(--slate); }
.lanc-dish { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid #3f4b4940; break-inside: avoid; }
.lanc-dish span { color: var(--slate); font-size: 14px; display: block; margin-top: 4px; }
.lanc-dish em { font-style: normal; white-space: nowrap; }
.lanc-family { background: var(--slate); color: var(--cream); }
.lanc-pubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-top: 32px; }
.lanc-pubs a { display: block; padding-bottom: 16px; border-bottom: 1px solid var(--sage); }
.lanc-pubs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.lanc-pubs b { display: block; margin-top: 16px; font: 400 clamp(24px, 2.5vw, 34px)/1.1 var(--serif); }
.lanc-pubs span { display: block; margin-top: 8px; font-size: 13px; }

@media (min-width: 700px) {
  .lancaster-page { --lanc-gutter: 32px; }
  .lanc-hero-content { padding-block: 72px; }
  .lanc-hero-note { font-size: 13px; }
  .lanc-pitch { padding-top: 104px; }
  .lanc-pitch-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .lanc-pitch-heading .eyebrow { grid-column: 1 / -1; }
  .lanc-pitch-heading > p:last-child { margin-left: 32px; }
  .lanc-reasons { margin-top: 64px; }
  .lanc-reason { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 40px; min-height: 340px; padding: 48px; top: calc(24px + var(--card) * 20px); margin-bottom: 32svh; }
  .lanc-reason .lanc-numeral { font-size: 100px; }
  .lanc-reason p { font-size: 18px; }
  .lanc-local { padding-top: 152px; }
  .lanc-local-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .lanc-local-intro .eyebrow { grid-column: 1; }
  .lanc-local-copy { grid-column: 2; grid-row: 1 / 3; padding-bottom: 72px; }
  .lanc-local h2 { grid-column: 1; grid-row: 2; align-self: end; padding-top: 16px; margin-bottom: -48px; }
  .lanc-photo-track figure { width: clamp(300px, 34vw, 520px); }
  .lanc-photo-track img { height: clamp(400px, 76svh, 680px); }
  .lanc-gallery.is-scroll-linked { height: calc(100svh + var(--lanc-travel)); padding: 0; view-timeline-name: --lanc-gallery; view-timeline-axis: block; }
  .is-scroll-linked .lanc-gallery-pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: flex-start; padding-top: 0; }
  .is-scroll-linked .lanc-photo-window { width: 100%; overflow: hidden; scroll-snap-type: none; }
  .is-scroll-linked .lanc-photo-track { transform: translateX(var(--lanc-x, 0px)); }
  .lanc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
  .lanc-grid { grid-template-columns: 1fr 1.2fr; gap: 48px; }
  .lanc-form { grid-row: auto; padding: 32px; }
  .lanc-register-copy { padding-top: 72px; }
  .lanc-register { padding-bottom: 104px; }
  .lanc-pubs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  #lanc-menu { columns: 2; column-gap: 56px; }
  .lanc-menu h3 { break-after: avoid; }
}
@media (min-width: 1000px) {
  .lancaster-page { --lanc-gutter: 48px; }
  .lanc-hero-content { padding-block: 64px; }
  .lanc-welcome-heading { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 64px; }
  .lanc-welcome-heading > p { margin: 0; }
  .lanc-form .two { grid-template-columns: 1fr 1fr; gap: 16px; }
  .lanc-form { padding: 40px; }
}
@keyframes lanc-photo-travel { to { transform: translateX(calc(-1 * var(--lanc-travel))); } }
@supports (animation-timeline: view()) {
  @media (min-width: 700px) and (prefers-reduced-motion: no-preference) {
    .is-scroll-linked .lanc-photo-track { animation: lanc-photo-travel linear both; animation-timeline: --lanc-gallery; animation-range: contain 0% contain 100%; }
  }
}
@media (max-width: 699px) {
  .lanc-local h2 { margin-bottom: 24px; padding-top: 0; }
  .lanc-local-copy { padding-bottom: 32px; }
  /* The whole registration card crosses the band on narrow screens. */
  .lanc-register > .lanc-grid {
    position: relative; top: -48px; width: calc(100% - 32px); margin-bottom: -48px;
    padding: 28px 20px; gap: 32px; background: var(--cream);
    border: 1px solid #3f4b4940; box-shadow: 0 20px 48px #1414141f;
  }
  .lanc-register-copy { padding-top: 0; }
  .lanc-form { grid-row: auto; margin-top: 0; padding: 0; border: 0; box-shadow: none; }
}
/* Short viewports and reduced motion must never trap or obscure the content. */
@media (max-height: 540px) { .lanc-reason { position: relative; top: auto; margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) {
  html:has(.lancaster-page) { scroll-behavior: auto; }
  .lancaster-page *, .lancaster-page *::before, .lancaster-page *::after { animation: none !important; transition: none !important; }
  .lanc-hero-image { transform: none !important; }
  .lanc-hero-shade { opacity: .55 !important; }
  .lanc-reason { position: relative; top: auto; margin-bottom: 20px; }
  .lanc-gallery.is-scroll-linked { height: auto; padding-bottom: 56px; }
  .is-scroll-linked .lanc-gallery-pin { position: static; height: auto; }
  .is-scroll-linked .lanc-photo-window { overflow-x: auto; scroll-snap-type: x mandatory; }
  .is-scroll-linked .lanc-photo-track { transform: none !important; }
}

/* Join the Insiders: a button after each section, and a bar on phones while the form is out of view. */
.lanc-cta-row { margin: 40px 0 0; }
.lanc-cta-row.on-coral .lanc-cta { background: var(--black); color: var(--cream); }
.lanc-cta-row.on-coral .lanc-cta:hover { background: var(--cream); color: var(--black); }
.lanc-local .lanc-cta-row { margin: 8px 0 56px; }
.lanc-sticky { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 14px 22px; background: var(--coral); color: var(--black); font-weight: 700; box-shadow: 0 10px 30px #00000040; transform: translateY(140%); transition: transform .3s ease; }
.lanc-sticky span { font-size: 22px; line-height: 1; }
.lanc-sticky.is-on { transform: none; }
@media (min-width: 900px) { .lanc-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .lanc-sticky { transition: none; } }

.lanc-address { margin-top: 18px; font-family: Anton, var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }

/* The Lancaster's own colours (Andy, 14 Oct 2026: match the pub). From the SR Signs scheme
   15843-SCHEME5 and the TMDP mood board: Farrow & Ball Eating Room Red, Railings, Pointing,
   Green Smoke. The red and ink are sampled from the sign artwork. */
.lancaster-page {
  --lanc-red: #723736;
  --lanc-red-light: #d99a90;
  --lanc-ink: #242628;
  --lanc-pointing: #eeeadf;
  --lanc-smoke: #67705f;
  --lanc-green: var(--lanc-ink);
  --lanc-gold: var(--lanc-red-light);
  --cream: var(--lanc-pointing);
  --pub-dark: var(--lanc-ink);
}
.lanc-mark { display: block; width: 116px; height: auto; margin-bottom: 26px; }
.lanc-cta, .lanc-sticky { background: var(--lanc-red); color: var(--lanc-pointing); }
.lanc-cta:hover { background: var(--lanc-pointing); color: var(--lanc-red); }
.lanc-numeral { color: var(--lanc-red-light); }
.lanc-reason:last-child { border-bottom-color: var(--lanc-red); }
.lanc-welcome { background: var(--lanc-red); color: var(--lanc-pointing); }
.lanc-welcome h2, .lanc-welcome h3, .lanc-welcome p, .lanc-welcome .lanc-numeral { color: var(--lanc-pointing); }
.lanc-welcome li { border-color: #eeeadf40; }
.lanc-cta-row.on-coral .lanc-cta { background: var(--lanc-ink); color: var(--lanc-pointing); }
.lanc-msg.bad { border-left-color: var(--lanc-red); }
.lanc-family { background: var(--lanc-smoke); }
@media (min-width: 900px) { .lanc-mark { width: 150px; } }
/* On phones the Join bar sits along the bottom, so the Ask us anything button moves up above it while the bar shows. */
.lanc-sticky, .lanc-sticky:hover { text-decoration: none; }
.lanc-sticky { box-shadow: 0 0 0 1px #eeeadf66, 0 10px 30px #00000040; }
@media (max-width: 899px) {
  .tlpc-ask-btn { transition: bottom .3s ease; }
  body:has(.lanc-sticky.is-on) .tlpc-ask-btn { bottom: 86px; }
}