/* ==========================================================================
   The Prince Consort — site stylesheet
   Headless build · Search Engine Solutions Ltd
   Brand: #212d42 + white · Bodoni Moda (headings, hero) · DM Sans (body, UI)
   Designed for 375px and 1440px; fluid between.
   ========================================================================== */

/* For production, move this into <head> as:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="(same URL)" rel="stylesheet">                                  */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Brand — every tone below is derived from #212d42 and white */
  --navy:          #212d42;
  --navy-deep:     #1a2435;   /* navy + 20% black: hover on navy fills    */
  --navy-soft:     #374255;   /* navy + 10% white: raised surfaces on dark */
  --white:         #ffffff;
  --tint:          #f2f2f4;   /* 6% navy on white: alternate sections      */
  --line:          #dee0e3;   /* 15% navy on white: borders, dividers      */
  --text:          var(--navy);
  --ink-heading:   #394760;   /* softer navy for display type: 9.4:1 on white */
  --text-muted:    #596271;   /* 6.2:1 on white, 5.5:1 on --tint           */
  --text-on-dark:  var(--white);
  --muted-on-dark: #c8cbd0;   /* 8.3:1 on navy                             */
  --line-on-dark:  rgba(255, 255, 255, 0.18);

  /* Accent — CTAs, key icons, active states only.
     Currently mapped to the brand navy; swap here if an accent is agreed. */
  --accent:        var(--navy);
  --accent-hover:  var(--navy-deep);
  --accent-ink:    var(--white);

  /* Secondary accent — muted brass. Warmth against the navy on the inner
     pages: ornaments, kickers, icon rings, hairlines, hover details.
     Never a fill for large areas. Contrast noted against white / navy. */
  --brass:         #a8854e;   /* lines, ornaments, icons: 3.4:1 on white     */
  --brass-ink:     #7d6232;   /* brass as small text: 5.7:1 white, 5.1:1 tint */
  --brass-light:   #c9a86a;   /* brass on navy: 6.1:1                         */
  --brass-pale:    #e3cf9f;   /* highlights on navy, hero ornament: 9:1       */
  --brass-wash:    #f8f4ec;   /* warm paper, one or two surfaces per page     */
  --brass-line:    rgba(168, 133, 78, 0.35);

  /* Elevation — navy-tinted, always an offset and a soft blur */
  --shadow-1:    0 1px 2px rgba(26, 36, 53, 0.06), 0 8px 20px -10px rgba(26, 36, 53, 0.22);
  --shadow-2:    0 2px 4px rgba(26, 36, 53, 0.05), 0 20px 44px -22px rgba(26, 36, 53, 0.35);
  --shadow-3:    0 4px 10px rgba(26, 36, 53, 0.07), 0 40px 80px -34px rgba(26, 36, 53, 0.5);
  --shadow-navy: 0 4px 10px rgba(26, 36, 53, 0.12), 0 40px 80px -30px rgba(26, 36, 53, 0.75);

  /* Type */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale: min at 375px, max at 1440px */
  --fs-display: clamp(2.75rem, 1.782rem + 4.131vw, 5.5rem);
  --fs-h1:      clamp(2.5rem, 1.796rem + 3.005vw, 4.5rem);
  --fs-h2:      clamp(2rem, 1.56rem + 1.878vw, 3.25rem);
  --fs-h3:      clamp(1.5rem, 1.324rem + 0.751vw, 2rem);
  --fs-h4:      clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);
  --fs-lead:    clamp(1.125rem, 1.059rem + 0.282vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.978rem + 0.094vw, 1.0625rem);
  --fs-small:   0.875rem;   /* captions, legal, tags only — never body copy */
  --fs-eyebrow: 0.8125rem;

  --lh-body:  1.6;
  --lh-tight: 1.1;
  --measure:  68ch;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-section: clamp(4rem, 2.9rem + 4.7vw, 7.5rem);
  --gutter:    clamp(1rem, 0.56rem + 1.88vw, 2.25rem);  /* 16px at 375px */
  --max-width: 1200px;

  /* Shape and motion */
  --radius:    4px;
  --radius-lg: 8px;
  --ease:      cubic-bezier(0.25, 0.6, 0.3, 1);
  --t-fast:    0.2s;
  --t:         0.3s;
  --t-slow:    0.4s;

  /* Elevation — navy-tinted, used sparingly (sticky header, mobile panel) */
  --shadow: 0 10px 30px -12px rgba(33, 45, 66, 0.28);

  /* Layout */
  --header-h: 72px;
  --tap:      48px;   /* comfortably over the 44px floor */
  --z-header: 100;
  --z-panel:  110;
  --z-bar:    90;
}

@media (min-width: 1024px) {
  :root { --header-h: 88px; }
}


/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-m));
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-optical-sizing: auto;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

img,
picture,
video,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; }

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, figure, blockquote { margin: 0; }

ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark :focus-visible,
.section--navy :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--white); }

::selection { background: var(--navy); color: var(--white); }

html {
  scrollbar-color: #9ba1aa var(--tint);
  accent-color: var(--navy);
  caret-color: var(--navy);
}


/* ==========================================================================
   3. Typography
   Bodoni Moda for h1–h4 and hero; DM Sans for everything else.
   Bodoni hairlines thin out below ~20px, so small labels stay in DM Sans.
   ========================================================================== */

h1, h2, h3, h4,
.display,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 450;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink-heading);
}

.on-dark :is(h1, h2, h3, h4),
.section--navy :is(h1, h2, h3, h4),
.hero :is(h1, h2, h3, h4) { color: inherit; }

.display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.015em; }
h1, .h1  { font-size: var(--fs-h1); }
h2, .h2  { font-size: var(--fs-h2); line-height: 1.12; }
h3, .h3  { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0; }
h4, .h4  { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: 0; }

h5, h6, .h5 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
}

/* Italic Bodoni for a single emphasised word in a heading */
.display em,
h1 em, h2 em { font-style: italic; font-weight: 400; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;   /* short labels only — never headings */
  color: var(--text-muted);
}

.on-dark .eyebrow,
.section--navy .eyebrow,
.hero .eyebrow { color: var(--muted-on-dark); }

p,
li { max-width: var(--measure); }

.lead { font-size: var(--fs-lead); line-height: 1.55; }
.small { font-size: var(--fs-small); }
.muted { color: var(--text-muted); }

/* Vertical rhythm inside text blocks */
.prose > * + * { margin-top: var(--space-s); }
.prose > * + h2,
.prose > * + h3 { margin-top: var(--space-l); }
.prose ul,
.prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-3xs); }

/* Inline links */
a { color: inherit; }

.prose a,
.link {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t-fast) var(--ease),
              text-underline-offset var(--t-fast) var(--ease);
}

.prose a:hover,
.link:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.on-dark .prose a,
.on-dark .link,
.section--navy .prose a,
.section--navy .link { color: var(--white); }

/* Thin rule with a centred crest-style diamond — heritage divider */
.rule {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--line);
  margin-block: var(--space-l);
}
.rule::before,
.rule::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.rule span {
  width: 7px; height: 7px;
  background: var(--navy);
  transform: rotate(45deg);
}


/* ==========================================================================
   4. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--max-width) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(800px + (var(--gutter) * 2)); }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
.section--tint { background: var(--tint); }

.section--navy,
.on-dark {
  background: var(--navy);
  color: var(--text-on-dark);
}
.section--navy .muted,
.on-dark .muted { color: var(--muted-on-dark); }

/* Section intro: one entry point per section */
.section-head {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
  max-width: 720px;
}
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }

.stack { display: grid; gap: var(--space-m); }
.stack--s { gap: var(--space-s); }
.stack--l { gap: var(--space-l); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

/* Two-column split: text + image */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .split--reverse > :first-child { order: 2; }
  .split--wide-media { grid-template-columns: 5fr 7fr; }
}

/* Auto grids */
.grid { display: grid; gap: var(--space-l); }

@media (min-width: 640px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Framed image — thin offset border echoing a picture frame */
.frame {
  position: relative;
  border-radius: var(--radius);
}
.frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.frame--landscape img { aspect-ratio: 3 / 2; }
.frame::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  z-index: -1;
  pointer-events: none;
}
.section--navy .frame::after { border-color: var(--line-on-dark); }


/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap);
  padding: 0.75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t) var(--ease),
              background-size 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              transform var(--t) cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:active { transform: translateY(1px); }

.btn svg { width: 1.125em; height: 1.125em; flex-shrink: 0; }

/* Primary: accent fill on light backgrounds */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(26, 36, 53, 0.6);
}
.btn--primary:active { transform: translateY(0); box-shadow: none; }

/* Secondary: outline on light backgrounds */
.btn--outline {
  background: linear-gradient(var(--navy), var(--navy)) no-repeat 0 0 / 0% 100%;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:hover {
  background-size: 100% 100%;
  color: var(--white);
}

/* On navy / hero: white fill */
.btn--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.55);
}
.btn--light:active { transform: translateY(0); box-shadow: none; }

/* On navy / hero: white outline */
.btn--outline-light {
  background: linear-gradient(var(--white), var(--white)) no-repeat 0 0 / 0% 100%;
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}
.btn--outline-light:hover {
  background-size: 100% 100%;
  border-color: var(--white);
  color: var(--navy);
}

.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }

/* Text link with arrow — secondary routes */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: gap var(--t) var(--ease), text-decoration-thickness var(--t) var(--ease);
}
.text-link::after { content: "\2192"; }
.text-link:hover { gap: var(--space-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); }

@media (max-width: 479px) {
  .btn-row--stack-mobile { flex-direction: column; }
  .btn-row--stack-mobile .btn { width: 100%; }
}


/* ==========================================================================
   6. Header
   ========================================================================== */

/* Mobile hours strip — sits above the header, hidden from 1024px */
.hours-strip {
  background: var(--navy);
  color: var(--muted-on-dark);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-align: center;
  padding: var(--space-2xs) var(--gutter);
}
.hours-strip strong { color: var(--white); font-weight: 600; }

@media (min-width: 1024px) { .hours-strip { display: none; } }

/* ----- Site header (header.html) ------------------------------------- */
/* ===== Header tokens ================================================== */
:root {
  --pc-header-h: 68px;
}
@media (min-width: 768px)  { :root { --pc-header-h: 76px; } }
@media (min-width: 1360px) { :root { --pc-header-h: 88px; } }

html.pc-menu-open { overflow: hidden; }

.pc-header {
  --pc-ink: var(--white);
  --pc-logo-w: 136px;
  --pc-col-gap: 16px;
  --pc-link-pad: 12px;
  --pc-drop: 6px;
  --pc-ease: cubic-bezier(0.22, 0.7, 0.2, 1);

  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--pc-header-h);
  color: var(--pc-ink);
  transition: color 0.35s var(--pc-ease);
  animation: pc-header-in 0.8s 0.25s var(--pc-ease) both;
}
.pc-header[data-state="solid"] { --pc-ink: var(--navy); --pc-drop: 0px; }

/* First paint: settle into the right state without animating */
.pc-header.pc-no-anim,
.pc-header.pc-no-anim * { transition: none !important; }

@keyframes pc-header-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (min-width: 768px) {
  .pc-header { --pc-logo-w: 168px; --pc-col-gap: 24px; --pc-drop: 8px; }
}
@media (min-width: 1360px) {
  .pc-header { --pc-logo-w: 200px; --pc-col-gap: 28px; --pc-drop: 12px; }
}

/* Soft navy wash behind the transparent header — keeps links legible on the photo */
.pc-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  background: linear-gradient(180deg,
              rgba(26, 36, 53, 0.66) 0%,
              rgba(26, 36, 53, 0.3) 55%,
              rgba(26, 36, 53, 0) 100%);
  pointer-events: none;
  transition: opacity 0.45s var(--pc-ease);
}
.pc-header[data-state="solid"]::before { opacity: 0; }

/* White surface that drops in on scroll */
.pc-header__bg {
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--pc-ease), transform 0.5s var(--pc-ease);
  pointer-events: none;
}
.pc-header__bg::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.pc-header[data-state="solid"] .pc-header__bg { opacity: 1; transform: none; }

/* ===== Layout: 1fr | logo | 1fr keeps the logo on the viewport centre line == */
.pc-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pc-logo-w) minmax(0, 1fr);
  column-gap: var(--pc-col-gap);
  align-items: center;
  height: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  transform: translateY(var(--pc-drop));
  transition: transform 0.5s var(--pc-ease);
}

.pc-header__side {
  display: flex;
  align-items: center;
  min-width: 0;
}
.pc-header__side--end { justify-content: flex-end; }

/* ===== Toggle ======================================================== */
.pc-toggle {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-left: -12px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  cursor: pointer;
}
.pc-toggle__lines {
  display: grid;
  gap: 7px;
  width: 28px;
}
.pc-toggle__lines span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: width 0.3s var(--pc-ease);
}
.pc-toggle__lines span:nth-child(2) { width: 18px; }
.pc-toggle:hover .pc-toggle__lines span:nth-child(2) { width: 28px; }

/* ===== Split navigation (desktop only) ================================ */
.pc-nav {
  display: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.6s var(--pc-ease);
}
.pc-nav li { max-width: none; }
.pc-nav--start { margin-left: auto; }
.pc-nav--end { margin-right: auto; }

.pc-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--pc-link-pad);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.pc-nav a::after {
  content: "";
  position: absolute;
  left: var(--pc-link-pad);
  right: var(--pc-link-pad);
  bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.3s var(--pc-ease);
}
.pc-nav a:hover::after,
.pc-nav a[aria-current="page"]::after { transform: scaleX(1); }

@media (min-width: 1360px) {
  .pc-nav { display: flex; }
  .pc-toggle { display: none; }   /* the full nav is on show; the menu button is phones and tablets only */

  /* Four columns: the booking buttons sit in their own column at the far
     right, so the links-and-logo row is centred in the space beside them
     rather than on the viewport, where the buttons made it read off-centre. */
  .pc-header__inner { grid-template-columns: minmax(0, 1fr) var(--pc-logo-w) minmax(0, 1fr) auto; }
  .pc-header__side--end { display: contents; }
  .pc-header__actions { justify-self: end; margin-left: 0; }

  /* Overlay state: both groups glide into one centred row.
     Transform only, so nothing on the page reflows. */
  .pc-header[data-state="overlay"] .pc-nav--start {
    transform: translateX(calc(var(--pc-logo-w) / 2 + var(--pc-col-gap) + var(--pc-nav-shift, 0px)));
  }
  .pc-header[data-state="overlay"] .pc-nav--end {
    transform: translateX(calc(var(--pc-nav-shift, 0px) - (var(--pc-logo-w) / 2 + var(--pc-col-gap))));
  }
}

/* ===== Logo (white state only) ======================================= */
.pc-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pc-logo-w);
  height: calc(var(--pc-header-h) - 20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.94);
  transition: opacity 0.3s var(--pc-ease),
              transform 0.45s var(--pc-ease),
              visibility 0s linear 0.45s;
}
.pc-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pc-header[data-state="solid"] .pc-logo {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s var(--pc-ease) 0.12s,
              transform 0.55s var(--pc-ease) 0.12s,
              visibility 0s;
}
.pc-logo:hover { opacity: 0.82; }

/* ===== Booking actions =============================================== */
.pc-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s var(--pc-ease),
              color 0.3s var(--pc-ease),
              border-color 0.3s var(--pc-ease);
}

/* On dark (transparent header, menu panel) */
.pc-btn--primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.pc-btn--primary:hover { background: transparent; color: var(--white); }

.pc-btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.62);
  color: var(--white);
}
.pc-btn--secondary:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

/* On white (scrolled header) */
.pc-header[data-state="solid"] .pc-btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.pc-header[data-state="solid"] .pc-btn--primary:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}
.pc-header[data-state="solid"] .pc-btn--secondary {
  border-color: var(--navy);
  color: var(--navy);
}
.pc-header[data-state="solid"] .pc-btn--secondary:hover {
  background: var(--navy);
  color: var(--white);
}

.pc-header .pc-btn { display: none; }

/* Mobile: one round call button */
.pc-call {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  transition: background-color 0.3s var(--pc-ease), color 0.3s var(--pc-ease), border-color 0.3s var(--pc-ease);
}
.pc-call svg { width: 18px; height: 18px; }
.pc-call:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.pc-header[data-state="solid"] .pc-call:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

@media (min-width: 768px) {
  .pc-header .pc-btn { display: inline-flex; }
  .pc-call { display: none; }
}

/* Focus rings follow the ink colour in both states */
.pc-header :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pc-header .pc-btn:focus-visible { outline-color: var(--pc-ink); }

/* ===== Menu panel (native <dialog>) =================================== */
.pc-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: hidden;
}
.pc-menu::backdrop { background: transparent; }

.pc-menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 36, 0.55);
  opacity: 0;
  transition: opacity 0.4s var(--pc-ease);
}

.pc-menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  width: min(100%, 480px);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gutter) 2.5rem;
  background: var(--navy);
  transform: translateX(-100%);
  transition: transform 0.5s var(--pc-ease);
}
@media (min-width: 768px) {
  .pc-menu__panel { padding-inline: 3rem; }
}

.pc-menu.is-open .pc-menu__scrim { opacity: 1; }
.pc-menu.is-open .pc-menu__panel { transform: none; }

.pc-menu :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.pc-menu__top {
  display: flex;
  align-items: center;
  min-height: var(--pc-header-h);
  flex-shrink: 0;
}

.pc-menu__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-left: -12px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.3s var(--pc-ease);
}
.pc-menu__close svg { width: 22px; height: 22px; transition: transform 0.35s var(--pc-ease); }
.pc-menu__close:hover svg { transform: rotate(90deg); }

/* Primary links: Bodoni, large */
.pc-menu__primary,
.pc-menu__secondary {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pc-menu__primary li,
.pc-menu__secondary li { max-width: none; }

.pc-menu__primary li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--pc-ease), transform 0.5s var(--pc-ease);
}
.pc-menu.is-open .pc-menu__primary li {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.12s + var(--i, 0) * 0.045s);
}

.pc-menu__primary a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--white);
  text-decoration: none;
  transition: transform 0.35s var(--pc-ease), color 0.3s var(--pc-ease);
}
.pc-menu__primary a:hover { transform: translateX(6px); }
.pc-menu__primary a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.pc-menu__secondary {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-on-dark);
}
.pc-menu__secondary a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  color: var(--muted-on-dark);
  text-decoration: none;
  transition: color 0.3s var(--pc-ease);
}
.pc-menu__secondary a:hover,
.pc-menu__secondary a[aria-current="page"] { color: var(--white); }

.pc-menu__actions {
  display: grid;
  gap: 10px;
}
@media (min-width: 420px) {
  .pc-menu__actions { grid-template-columns: 1fr 1fr; }
}
.pc-menu__actions .pc-btn { min-height: 48px; }

.pc-menu__info {
  display: grid;
  gap: 1.5rem;
  margin-top: auto;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted-on-dark);
}
.pc-menu__label {
  margin-bottom: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--white);
}
.pc-menu__hours {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.pc-menu__hours dd { margin: 0; color: var(--white); }
.pc-menu__info p { max-width: none; }
.pc-menu__info a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-underline-offset 0.25s var(--pc-ease);
}
.pc-menu__info a:hover { text-underline-offset: 5px; }

@media (prefers-reduced-motion: reduce) {
  .pc-header { animation: none; }
  .pc-menu__primary li { opacity: 1; transform: none; }
}


/* Mobile booking bar — fixed to the viewport bottom under 1024px.
   Add padding-bottom to <body> via .has-action-bar so the footer isn't covered. */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--gutter) calc(var(--space-2xs) + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
}
.action-bar .btn { width: 100%; padding-inline: var(--space-xs); }

body.has-action-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

@media (min-width: 1024px) {
  .action-bar { display: none; }
  body.has-action-bar { padding-bottom: 0; }
}


/* ==========================================================================
   7. Hero
   Photo + navy gradient overlay. Text never sits on raw photo.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(88svh, 820px);
  padding-block: var(--space-2xl) var(--space-xl);
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(33, 45, 66, 0.94) 0%, rgba(33, 45, 66, 0.72) 40%, rgba(33, 45, 66, 0.15) 75%, rgba(33, 45, 66, 0.35) 100%);
}

@media (min-width: 900px) {
  .hero { align-items: center; padding-block: var(--space-2xl); }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(33, 45, 66, 0.92) 0%, rgba(33, 45, 66, 0.7) 42%, rgba(33, 45, 66, 0.1) 75%);
  }
}

.hero__content {
  display: grid;
  gap: var(--space-m);
  max-width: 620px;
}
.hero__content .lead { color: var(--muted-on-dark); max-width: 52ch; }

/* Shorter inner-page hero */
.hero--page { min-height: min(60svh, 560px); }

/* Plain navy hero for pages without a photo yet */
.hero--plain { min-height: auto; padding-block: var(--space-section); }
.hero--plain::before { display: none; }

/* Key facts row under hero copy (hours, dogs, parking) */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  margin-top: var(--space-2xs);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--muted-on-dark);
}
.hero__facts li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.hero__facts svg { width: 16px; height: 16px; color: var(--white); }


/* ----- Homepage hero (home.html) ------------------------------------- */
/* ===== Homepage hero ================================================= */
.pc-hero {
  --pc-hero-focus: 50% 42%;
  --pc-hero-focus-mobile: 50% 40%;

  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;   /* lockup sits in the middle of the photo */
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}

@media (max-width: 767px) {
  .pc-hero {
    height: 92vh;
    height: 92svh;
    min-height: 540px;
    max-height: 820px;
  }
}

.pc-hero__sentinel {
  position: absolute;
  top: max(28%, 180px);
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.pc-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}
.pc-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pc-hero-focus);
  animation: pc-hero-settle 2.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
@media (max-width: 767px) {
  .pc-hero__media img { object-position: var(--pc-hero-focus-mobile); }
}

/* Video heroes: the clip sits over the still, which stays as the poster,
   the no-video fallback and the reduced-motion version */
.pc-hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pc-hero-focus);
  background: transparent;
  animation: pc-hero-settle 2.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  pointer-events: none;
}
@media (max-width: 767px) {
  .pc-hero__video { object-position: var(--pc-hero-focus-mobile); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-hero__video { display: none; }
}

/* Contrast: a light veil at the top for the header, a deeper one under the lockup */
.pc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(26, 36, 53, 0.42) 0%, rgba(26, 36, 53, 0) 24%),
    radial-gradient(ellipse 62% 52% at 50% 54%, rgba(26, 36, 53, 0.62) 0%, rgba(26, 36, 53, 0.3) 60%, rgba(26, 36, 53, 0) 100%),
    linear-gradient(0deg, rgba(26, 36, 53, 0.55) 0%, rgba(26, 36, 53, 0.25) 35%, rgba(26, 36, 53, 0.2) 100%);
  pointer-events: none;
}

.pc-hero__content {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: calc(1200px + (var(--gutter) * 2));
  margin-inline: auto;
  /* Top padding = header height, so the lockup centres in the space below the header */
  padding: var(--pc-header-h, 72px) var(--gutter) 0;
  text-align: center;
}

/* The lockup: signwriter's small "The" over the name */
.pc-hero__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(3.25rem, 1.8rem + 6.2vw, 7.5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(17, 24, 36, 0.35);
}
.pc-hero__the {
  display: block;
  margin-bottom: 0.3em;
  font-size: max(1.25rem, 0.28em);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

.pc-hero__lead {
  max-width: 44ch;
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted-on-dark);
}

/* Phones only: the header shows a single call button there */
.pc-hero__actions {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 360px;
  margin-top: 0.5rem;
}
@media (min-width: 768px) {
  .pc-hero__actions { display: none; }
}

/* One orchestrated entrance */
.pc-rise {
  animation: pc-rise 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) both;
  animation-delay: var(--d, 0s);
}

@keyframes pc-hero-settle {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
@keyframes pc-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-hero__media img,
  .pc-rise { animation: none; }
}


/* ==========================================================================
   8. Panels and route tiles
   Bordered, not shadowed — no white-card-with-grey-shadow grids.
   ========================================================================== */

.panel {
  padding: var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.section--tint .panel { border-color: transparent; }
.section--navy .panel {
  background: var(--navy-soft);
  border-color: var(--line-on-dark);
}

/* Full-bleed photo tile with caption bar — homepage routes */
.route {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  padding: var(--space-l);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  background: var(--navy);
}
.route__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.route__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.route::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(33, 45, 66, 0.92) 0%, rgba(33, 45, 66, 0.5) 45%, rgba(33, 45, 66, 0.05) 80%);
  transition: background-color var(--t) var(--ease);
}
.route__body { display: grid; gap: var(--space-2xs); }
.route__body p { color: var(--muted-on-dark); }
.route__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-weight: 600;
  transition: gap var(--t) var(--ease);
}
.route__cta::after { content: "\2192"; }

.route:hover .route__media img { transform: scale(1.04); }
.route:hover .route__cta { gap: var(--space-xs); }

@media (min-width: 1024px) { .route { min-height: 480px; } }

/* Feature list with icon — rooms amenities, visit info */
.feature-list {
  display: grid;
  gap: var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .feature-list--2 { grid-template-columns: 1fr 1fr; } }

.feature-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-s);
  align-items: start;
  max-width: none;
}
.feature-list__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
}
.feature-list__icon svg { width: 20px; height: 20px; }
.section--navy .feature-list__icon { border-color: var(--white); color: var(--white); }

/* Opening hours table */
.hours {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.hours caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: var(--space-2xs);
}
.hours th,
.hours td {
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}
.hours td { text-align: right; }
.section--navy .hours th,
.section--navy .hours td { border-color: var(--line-on-dark); }


/* ==========================================================================
   9. Menu page
   ========================================================================== */

/* Sticky anchor bar — scrolls horizontally inside itself on mobile */
.menu-nav {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 1);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.menu-nav__list {
  display: flex;
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-xs) 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu-nav__list::-webkit-scrollbar { display: none; }
.menu-nav__list li { flex-shrink: 0; max-width: none; }

.menu-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-s);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
  transition: background-color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.menu-nav__link:hover { border-color: var(--navy); }
.menu-nav__link.is-active,
.menu-nav__link[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.menu-section { padding-block: var(--space-section); }
.menu-section + .menu-section { border-top: 1px solid var(--line); }

.menu-section__head {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
}
.menu-section__note { color: var(--text-muted); }

/* Category inside a section (e.g. Burgers within Mains) */
.menu-group + .menu-group { margin-top: var(--space-xl); }
.menu-group__title { margin-bottom: var(--space-m); }

.menu-list {
  display: grid;
  gap: var(--space-m) var(--space-2xl);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) { .menu-list { grid-template-columns: 1fr 1fr; } }

.menu-item { display: grid; gap: var(--space-3xs); max-width: none; }

/* Name ····· price */
.menu-item__line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
}
.menu-item__name {
  font-weight: 600;
  font-size: 1.0625rem;
}
.menu-item__line::after {
  content: "";
  order: 2;
  flex: 1;
  min-width: var(--space-s);
  border-bottom: 1px dotted var(--text-muted);
  transform: translateY(-4px);
}
.menu-item__price {
  order: 3;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-item__desc { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; max-width: 60ch; }

/* Dietary tags: V, VG, GF, VG opt */
.diet-tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-3xs); }
.diet-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: 6px;
  border: 1px solid var(--navy);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Key for dietary tags + allergen statement */
.menu-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.menu-key span { display: inline-flex; align-items: center; gap: var(--space-2xs); }

.notice {
  padding: var(--space-m);
  border-left: 3px solid var(--navy);
  background: var(--tint);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice > * + * { margin-top: var(--space-2xs); }


/* ==========================================================================
   10. Events
   ========================================================================== */

.event-list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }

.event {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-m);
  align-items: start;
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.event:first-child { border-top: 1px solid var(--line); }

@media (min-width: 768px) {
  .event { grid-template-columns: 96px 1fr auto; align-items: center; gap: var(--space-l); }
}

.event__date {
  display: grid;
  justify-items: center;
  padding: var(--space-2xs) 0;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  text-align: center;
  line-height: 1;
}
.event__day {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
}
.event__month {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Recurring events (monthly quiz) */
.event__date--recurring .event__day { font-size: 1.25rem; }

.event__body { display: grid; gap: var(--space-3xs); }
.event__meta { font-size: var(--fs-small); color: var(--text-muted); }

.event__action { grid-column: 2; }
@media (min-width: 768px) { .event__action { grid-column: auto; } }


/* ==========================================================================
   11. Reviews
   ========================================================================== */

.quote {
  display: grid;
  gap: var(--space-m);
  align-content: start;
  margin: 0;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  height: 0.5em;
  color: var(--accent);
}
.section--navy .quote__mark { color: var(--white); }

.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}
.quote figcaption {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.section--navy .quote figcaption { color: var(--muted-on-dark); }
.quote figcaption strong { color: inherit; font-weight: 600; }


/* ==========================================================================
   12. FAQ accordion (<details>)
   ========================================================================== */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 64px;
  padding-block: var(--space-s);
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
  cursor: pointer;
  transition: color var(--t) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t) var(--ease);
}
.faq__item[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq__item summary:hover { color: var(--text-muted); }

.faq__answer { padding-bottom: var(--space-m); color: var(--text-muted); }
.faq__answer > * + * { margin-top: var(--space-xs); }


/* ==========================================================================
   13. Gallery grid (fallback if not using a Wix gallery component)
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-s); } }

.gallery__item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease), opacity var(--t) var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--wide img { aspect-ratio: 2 / 1; }


/* ==========================================================================
   14. Forms
   ========================================================================== */

.form { display: grid; gap: var(--space-m); }

.form__row { display: grid; gap: var(--space-m); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--space-2xs); align-content: start; }

.field label,
.field legend {
  font-size: 0.9375rem;
  font-weight: 600;
}
.field .hint { font-size: var(--fs-small); color: var(--text-muted); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.75rem 0.875rem;
  border: 1px solid #a7adb8;    /* 3:1 against white for the field edge */
  border-radius: var(--radius);
  background: var(--white);
  font-size: 1rem;            /* 16px stops iOS zoom on focus */
  line-height: 1.4;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.textarea { min-height: 140px; resize: vertical; }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--navy); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(33, 45, 66, 0.18);
}

.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23212d42' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: #a32020; }
.field__error { font-size: var(--fs-small); color: #a32020; font-weight: 500; }

/* Radio / checkbox options as tappable chips (occasion picker) */
.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); border: 0; margin: 0; padding: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-s);
  border: 1px solid #a7adb8;
  border-radius: 999px;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.choice span:hover { border-color: var(--navy); }
.choice input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.choice input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }

.form__success {
  padding: var(--space-m);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
}


/* ==========================================================================
   15. Footer (agency-footer rules)
   ========================================================================== */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--muted-on-dark);
  padding-block: clamp(4.25rem, 3rem + 3.5vw, 6rem) var(--space-m);
  font-size: 0.9375rem;
  /* Deep navy into charcoal-navy, lifted by two soft muted-blue glows */
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(55, 66, 85, 0.5) 0%, rgba(55, 66, 85, 0) 70%),
    radial-gradient(60% 70% at 100% 0%, rgba(44, 58, 82, 0.55) 0%, rgba(44, 58, 82, 0) 70%),
    linear-gradient(180deg, #1d2739 0%, #19212f 55%, #151b26 100%);
}

/* Double hairline across the top: bookends the trust strip under the hero */
.site-footer::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 5px;
  border-block: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

/* Crown watermark: a faint filled crown with a soft outline, cropped off the
   bottom-left corner and faded out towards the content */
.pc-foot-mark {
  position: absolute;
  left: clamp(-260px, -15vw, -90px);
  bottom: clamp(-330px, -21vw, -130px);
  z-index: -1;
  width: clamp(380px, 48vw, 680px);
  height: auto;
  fill: none;
  stroke: rgba(255, 255, 255, 0.075);
  stroke-width: 0.06;   /* viewBox units: about 1-2px at the rendered sizes */
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 45% 62%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 62% at 45% 62%, #000 25%, transparent 100%);
}
.pc-foot-mark__fill { fill: rgba(255, 255, 255, 0.035); stroke: none; }
@media (max-width: 767px) {
  .pc-foot-mark { left: auto; right: -30vw; bottom: -10vw; width: 115vw; }
}

.site-footer__grid {
  --pc-foot-gap: clamp(2rem, 1rem + 2vw, 3rem);
  display: grid;
  gap: var(--space-xl);
  align-items: stretch;
}
@media (min-width: 768px)  { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) {
  .site-footer__grid { grid-template-columns: 1.1fr 1.05fr 1.15fr 1.2fr; gap: var(--pc-foot-gap); }
  /* Fine vertical dividers between the text columns, fading at both ends */
  .site-footer__grid > :nth-child(2),
  .site-footer__grid > :nth-child(3) { position: relative; }
  .site-footer__grid > :nth-child(2)::before,
  .site-footer__grid > :nth-child(3)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--pc-foot-gap) / -2);
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14) 18%, rgba(255, 255, 255, 0.14) 82%, transparent);
  }
}

.site-footer__title {
  margin-bottom: 1.125rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: 1.375rem;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--white);
}
.site-footer__title::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-top: 0.75rem;
  background: rgba(255, 255, 255, 0.4);
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
  transition: opacity var(--t) var(--ease);
}
.pc-foot-logo:hover { opacity: 0.8; }

/* Text links: a fine underline lifts into place on hover */
.pc-foot-list a,
.pc-foot-legal-links a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s var(--ease), text-underline-offset 0.35s var(--ease);
}
.pc-foot-list a:hover,
.pc-foot-legal-links a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.7);
  text-underline-offset: 4px;
}
.pc-foot-list__ic { transition: color 0.3s var(--ease), transform 0.35s var(--ease); }
.pc-foot-list li:hover .pc-foot-list__ic { color: var(--white); transform: translateX(2px); }

.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pc-foot-brand {
  display: grid;
  align-content: start;
  justify-items: center;   /* logo and social icons share one centre line */
  gap: 1.5rem;
  text-align: center;
}
.pc-foot-logo {
  display: block;
  width: min(280px, 100%);
  line-height: 0;
}
.pc-foot-logo img {
  display: block;
  width: 100%;
  height: auto;
  /* Turns the logo white on the navy footer. Delete this line if you
     supply a white version of the logo instead. */
  filter: brightness(0) invert(1);
}
.pc-foot-brand .social { margin-top: 0; }
.pc-foot-blurb {
  max-width: 30ch;
  margin-inline: auto;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted-on-dark);
  text-wrap: balance;
}

.pc-foot-list {
  display: grid;
  gap: 0;
  margin: -11px 0 0;   /* first line sits level with "Bar" in the hours column */
  padding: 0;
  list-style: none;
}
.pc-foot-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  max-width: none;
}
.pc-foot-list__ic { display: grid; margin-top: 13px; color: var(--muted-on-dark); }   /* centred on the first text line */
.pc-foot-list__ic svg { width: 18px; height: 18px; }
.pc-foot-list a {
  display: inline-block;
  padding-block: 11px;   /* 22px line + 22px padding = 44px tap target */
  line-height: 22px;
}

.pc-foot-hours { display: grid; gap: 1.25rem; }
.pc-foot-hours h3 {
  margin-bottom: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--white);
}
.pc-foot-hours dl {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.pc-foot-hours dd { margin: 0; color: var(--white); }

.pc-foot-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pc-foot-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
}

.site-footer .hours th,
.site-footer .hours td { border-color: var(--line-on-dark); padding-block: 6px; }
.site-footer .hours caption { color: var(--white); }

/* Map — stretches to the tallest neighbouring column */
.footer-map {
  position: relative;
  height: 100%;
  min-height: 280px;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
.footer-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.5) contrast(1.03);   /* quieter on the navy; full colour on hover */
  transition: filter 0.5s var(--ease);
}

/* Offset frame round the map, the same device as the photo frames */
.pc-foot-mapwrap {
  position: relative;
  isolation: isolate;
  height: 100%;
}
.pc-foot-mapwrap::after {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  pointer-events: none;
  transition: inset 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s var(--ease);
}
.pc-foot-mapwrap:hover::after { inset: 6px -6px -6px 6px; border-color: rgba(255, 255, 255, 0.45); }
.pc-foot-mapwrap:is(:hover, :focus-within) iframe { filter: none; }
@media (max-width: 599px) { .pc-foot-mapwrap::after { display: none; } }
@media (max-width: 767px) { .footer-map { min-height: 220px; } }

/* Social icons */
.social {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
  list-style: none;
  padding: 0;
}
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
  color: var(--white);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.social a:hover {
  opacity: 1;
  transform: translateY(-2px);
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* Light-ground variant (events section) */
.social--light { margin-top: 0; }
.social--light a { border-color: var(--pc-rule); color: var(--navy); }
.social--light a:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

.pc-follow {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.pc-follow p { max-width: 36ch; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }

.site-footer__bottom {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  margin-top: clamp(3rem, 2.4rem + 2.5vw, 4.5rem);
  padding-top: var(--space-s);
  text-align: center;
}
.site-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 15%, rgba(255, 255, 255, 0.16) 85%, transparent);
}

.footer-legal {
  max-width: none;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--muted-on-dark);
}
.site-footer .footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--ease);
}
.site-footer .footer-legal a:hover { color: var(--white); opacity: 1; }


/* ==========================================================================
   16. Homepage sections (home.html)
   One motion language: soft rise, mask reveal for photos, ornaments that
   draw outward from the centre. All of it switches off for reduced motion.
   ========================================================================== */

:root {
  --pc-rule: #9ba1aa;                                 /* 45% navy on white */
  --pc-ease-soft: cubic-bezier(0.22, 0.7, 0.2, 1);
  --pc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pc-sec-pad: clamp(4.5rem, 2.9rem + 6.8vw, 9rem);
}

/* ----- Section rhythm ---------------------------------------------------- */
.pc-sec {
  --orn-bg: var(--white);
  padding-block: var(--pc-sec-pad);
}
.pc-sec--tint { --orn-bg: var(--tint); background: var(--tint); }
.pc-sec--navy {
  --orn-bg: var(--navy);
  background: var(--navy);
  color: var(--white);
}
.pc-sec--snug-top { padding-top: clamp(3rem, 2.2rem + 3.4vw, 5.5rem); }

/* ----- Kicker: italic Bodoni with a short lead-in rule ------------------- */
.pc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text-muted);
}
.pc-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.pc-kicker--bare::before { display: none; }
.pc-sec--navy .pc-kicker { color: var(--muted-on-dark); }

.pc-head {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}
.pc-head h2 { max-width: 22ch; }
.pc-head--center {
  justify-items: center;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.pc-head--center h2 {
  max-width: 22ch;
  font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
}
.pc-head--center p { margin-inline: auto; }

/* ----- Ornament: line · ring · star · ring · line ------------------------ */
.pc-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--navy);
}
.pc-sec--navy .pc-orn { color: var(--white); }

.pc-orn__line {
  position: relative;
  display: block;
  width: min(120px, 22vw);
  height: 1px;
  background: currentColor;
  transform-origin: right center;
}
.pc-orn__line:last-child { transform-origin: left center; }
.pc-orn__line::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--orn-bg, var(--white));
  transform: translateY(-50%);
}
.pc-orn__line:first-child::before { left: -4px; }
.pc-orn__line:last-child::before  { right: -4px; }

.pc-orn__mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.pc-orn__mark--crown {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linejoin: round;
}

/* Left-aligned variant for paragraph groups */
.pc-orn--start { justify-content: flex-start; }
.pc-orn--start .pc-orn__line:first-child { display: none; }
.pc-orn--start .pc-orn__line { width: 64px; }

/* Double hairline — frames the at-a-glance strip */
.pc-rule2 {
  height: 5px;
  border-block: 1px solid var(--pc-rule);
  transform-origin: center;
}

/* ----- Photos: framed, masked, with a slow hover zoom -------------------- */
.pc-framed { position: relative; isolation: isolate; }
.pc-framed::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  z-index: -1;
  border: 1px solid var(--pc-rule);
  border-radius: var(--radius);
  pointer-events: none;
}
.pc-framed--left::after { inset: 14px 14px -14px -14px; }
.pc-sec--navy .pc-framed::after { border-color: var(--line-on-dark); }

@media (max-width: 599px) {
  .pc-framed::after { display: none; }
}

.pc-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: var(--ratio, 4 / 5);
  background: var(--navy-soft);
}
.pc-photo__zoom {
  position: absolute;
  inset: 0;
  transition: transform 0.8s var(--pc-ease-soft);
}
.pc-photo:hover .pc-photo__zoom { transform: scale(1.035); }
.pc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

/* Holding panel until client photography arrives — swap for an <img> */
.pc-photo__todo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--muted-on-dark);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px),
    linear-gradient(160deg, #2c3a52 0%, #1a2435 100%);
}
.pc-photo__todo span { max-width: 26ch; }
.pc-photo__todo .pc-ic { width: 26px; height: 26px; color: var(--white); }

/* ----- Shared bits ------------------------------------------------------- */
.pc-ic {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--navy);
}
.pc-ic svg { width: 100%; height: 100%; }
.pc-sec--navy .pc-ic { color: var(--white); }

.pc-copy {
  display: grid;
  gap: 1.125rem;
  min-width: 0;
  max-width: 34rem;
  container-type: inline-size;
}
.pc-copy > h2 {
  margin-bottom: 0.125rem;
  font-size: var(--fs-h2);
  font-size: clamp(1.875rem, 0.25rem + 6.4cqi, 2.5rem);
}
.pc-copy > .pc-kicker { margin-bottom: -0.375rem; }
.pc-copy > p { max-width: 62ch; }

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
@media (max-width: 479px) {
  .pc-actions { flex-direction: column; }
  .pc-actions .btn { width: 100%; }
}

/* Text link: underline wipes away to the right on hover */
.pc-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 10px) / 100% 1px;
  transition: background-size 0.35s var(--pc-ease-soft);
}
.pc-link:hover {
  background-position: 100% calc(100% - 10px);
  background-size: 0% 1px;
}

/* Two-column split; ratio flips for image-first sections */
.pc-split {
  display: grid;
  gap: clamp(2.75rem, 1.5rem + 4.5vw, 6.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .pc-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .pc-split--media-first { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}


/* ----- At a glance ------------------------------------------------------- */
.pc-facts {
  /* Sits straight under the hero; a hairline of air keeps the double rule legible as a frame */
  padding-top: 10px;
  background: var(--white);
}
.pc-facts .pc-rule2 { border-left: 0; border-right: 0; }

.pc-facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pc-facts__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  max-width: none;
  padding: 1.5rem 0.75rem;
  font-weight: 500;
  text-align: center;
}
.pc-facts__label { display: block; }
.pc-facts__list li:nth-child(even) { border-left: 1px solid var(--line); }
.pc-facts__list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
.pc-facts .pc-ic { width: 28px; height: 28px; }

@media (min-width: 768px) {
  .pc-facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-facts__list li {
    flex-direction: row;
    justify-content: center;
    gap: 0.875rem;
    padding: 1.875rem 1rem;
  }
  .pc-facts__list li:nth-child(n + 3) { border-top: 0; }
  .pc-facts__list li + li { border-left: 1px solid var(--line); }
}


/* ----- Welcome ----------------------------------------------------------- */

.pc-welcome { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.pc-welcome .pc-photo { --ratio: 4 / 3; }
/* Phones: photo above the copy, so the page alternates photo / text down the bands */
@media (max-width: 959px) {
  .pc-welcome .pc-framed { order: -1; }
}
@media (min-width: 960px) {
  .pc-welcome .pc-photo { --ratio: 1 / 1; }
}

/* Paragraph group divider (the small ornament between the two thoughts) */
.pc-copy .pc-orn--start { margin-block: 0.5rem; }


/* ----- Food and drink ---------------------------------------------------- */

.pc-tiles {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.75rem;
}
@media (min-width: 600px) and (max-width: 959px) {
  .pc-tiles { grid-template-columns: 1fr 1fr; }
}

.pc-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--navy);
}
.pc-tile .pc-ic { grid-row: span 2; margin-top: 2px; }
.pc-tile h3 { font-size: var(--fs-h4); }
.pc-tile p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }


/* ----- Rooms (navy band) ------------------------------------------------- */
.pc-rooms .pc-copy > p { color: var(--muted-on-dark); }

.pc-amenities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.pc-amenities li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: none;
  font-size: 0.9375rem;
}
.pc-amenities .pc-ic {
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
}

.pc-aside-quote {
  display: grid;
  gap: 0.625rem;
  margin: 1.75rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-on-dark);
}
.pc-aside-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}
.pc-aside-quote figcaption { font-size: var(--fs-small); color: var(--muted-on-dark); }


/* ----- Functions and wakes ----------------------------------------------- */
.pc-functions .pc-photo { --ratio: 4 / 3; }
@media (min-width: 768px) {
  .pc-functions .pc-photo { --ratio: 21 / 9; }
}
.pc-functions__media { margin-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }

.pc-duo {
  display: grid;
  gap: 2.25rem;
  max-width: 64rem;
  margin-inline: auto;
}
.pc-duo__item { display: grid; gap: 0.875rem; align-content: start; }
.pc-duo__item h3 { font-size: var(--fs-h3); }
.pc-duo__item p { max-width: 44ch; }

/* Divider: horizontal ornament on phones, vertical rule with a diamond above 800px */
.pc-duo__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--navy);
}
.pc-duo__divider span {
  display: block;
  width: 72px;
  height: 1px;
  background: var(--pc-rule);
}
.pc-duo__divider i {
  display: block;
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: rotate(45deg);
}

@media (min-width: 800px) {
  .pc-duo {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 3vw, 4.5rem);
  }
  .pc-duo__divider { flex-direction: column; align-self: stretch; }
  .pc-duo__divider span { width: 1px; height: auto; flex: 1; }
}

.pc-functions__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}


/* ----- Events ------------------------------------------------------------ */
.pc-events {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 960px) {
  .pc-events {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(3rem, 1rem + 5vw, 6.5rem);
    align-items: start;
  }
}

.pc-event-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pc-rule);
}

.pc-event {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 1.25rem 1.375rem;
  max-width: none;
  padding-block: 2rem;
  border-bottom: 1px solid var(--pc-rule);
}
@media (min-width: 720px) {
  .pc-event {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}

.pc-date {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.375rem;
  aspect-ratio: 1;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  line-height: 1;
  text-align: center;
  transition: background-color 0.35s var(--pc-ease-soft), color 0.35s var(--pc-ease-soft);
}
.pc-date__day {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: 500;
}
.pc-date__day--word { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.pc-date__mon {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pc-date .pc-ic { width: 26px; height: 26px; color: inherit; }
.pc-event:hover .pc-date { background: var(--navy); color: var(--white); }

.pc-event__body { display: grid; gap: 0.5rem; }
.pc-event__body h3 { font-size: var(--fs-h4); }
.pc-event__when { font-weight: 600; font-size: 0.9375rem; }
.pc-event__body p:last-child { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; }

.pc-event__action { grid-column: 2; }
@media (min-width: 720px) {
  .pc-event__action { grid-column: auto; }
}


/* ----- Reviews ----------------------------------------------------------- */
.pc-reviews__head { display: grid; justify-items: center; gap: 1.5rem; }

.pc-feature {
  max-width: 54rem;
  margin: clamp(2.25rem, 1.8rem + 2vw, 3.5rem) auto;
  text-align: center;
}
.pc-feature blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
  text-wrap: balance;
}
.pc-feature figcaption {
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.pc-quotes {
  display: grid;
  margin: clamp(2.75rem, 2rem + 3vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.pc-quotes li {
  display: grid;
  gap: 0.875rem;
  align-content: start;
  max-width: none;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
}
.pc-quotes blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}
.pc-quotes figcaption { font-size: var(--fs-small); color: var(--text-muted); }
.pc-quotes figure { margin: 0; display: grid; gap: 0.875rem; }

@media (min-width: 900px) {
  .pc-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-quotes li {
    padding: 0.25rem clamp(1.5rem, 0.5rem + 2vw, 3rem);
    border-top: 0;
  }
  .pc-quotes li:first-child { padding-left: 0; }
  .pc-quotes li:last-child { padding-right: 0; }
  .pc-quotes li + li { border-left: 1px solid var(--line); }
}

.pc-reviews__more { display: flex; justify-content: center; margin-top: 2.5rem; }


/* ----- Scroll reveals ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .pc-js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--pc-ease-soft), transform 0.9s var(--pc-ease-soft);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .pc-js [data-reveal].is-in { opacity: 1; transform: none; }

  /* Photos: wipe up from a lower edge while the frame settles */
  .pc-js [data-reveal="mask"] {
    opacity: 1;
    transform: none;
    clip-path: inset(16% 0 0 0 round var(--radius));
    transition: clip-path 1.1s var(--pc-ease-soft);
  }
  .pc-js [data-reveal="mask"] .pc-photo__zoom > * {
    transform: scale(1.08);
    transition: transform 1.4s var(--pc-ease-soft);
  }
  .pc-js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
  .pc-js [data-reveal="mask"].is-in .pc-photo__zoom > * { transform: none; }

  /* Ornaments draw outward from the centre */
  .pc-js [data-reveal="line"] { opacity: 1; transform: none; }
  .pc-js [data-reveal="line"] .pc-orn__line,
  .pc-js [data-reveal="line"] .pc-duo__divider span {
    transform: scale(0);
    transition: transform 1s var(--pc-ease-soft) 0.15s;
  }
  .pc-js [data-reveal="line"] .pc-orn__mark,
  .pc-js [data-reveal="line"] .pc-duo__divider i {
    opacity: 0;
    transform: rotate(-90deg) scale(0.4);
    transition: opacity 0.5s var(--pc-ease-soft), transform 0.8s var(--pc-ease-soft);
  }
  .pc-js [data-reveal="line"].is-in .pc-orn__line,
  .pc-js [data-reveal="line"].is-in .pc-duo__divider span { transform: none; }
  .pc-js [data-reveal="line"].is-in .pc-orn__mark { opacity: 1; transform: none; }
  .pc-js [data-reveal="line"].is-in .pc-duo__divider i { opacity: 1; transform: rotate(45deg); }

  .pc-js .pc-rule2[data-reveal] {
    opacity: 1;
    transform: scaleX(0);
    transition: transform 1.2s var(--pc-ease-soft);
  }
  .pc-js .pc-rule2[data-reveal].is-in { transform: none; }
}


/* ----- Bands: photo fills one half edge to edge, copy in the other ------ */
.pc-band {
  --orn-bg: var(--white);
  display: grid;
}
.pc-band--tint { --orn-bg: var(--tint); background: var(--tint); }

.pc-band__media { position: relative; }
.pc-band__media .pc-photo {
  --ratio: 4 / 3;
  --radius: 0px;
  height: 100%;
  border-radius: 0;
}

.pc-band__body {
  display: flex;
  align-items: center;
  padding: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) var(--gutter);
}
.pc-band__body > .pc-copy,
.pc-band__stack { width: 100%; max-width: 34rem; }
.pc-band__stack { display: grid; }
.pc-band__stack > .pc-copy { max-width: none; }

@media (min-width: 960px) {
  .pc-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(560px, 44vw, 760px);
  }
  .pc-band--media-right .pc-band__media { order: 2; }
  .pc-band__media .pc-photo {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .pc-band__body {
    padding-block: clamp(4.5rem, 2rem + 4vw, 7rem);
    padding-inline: clamp(3rem, 1rem + 4.5vw, 6.5rem);
  }
  /* Outer edge of the copy lines up with the 1200px content edge */
  .pc-band--media-left .pc-band__body  { padding-right: max(var(--gutter), calc(50vw - 600px)); }
  .pc-band--media-right .pc-band__body { padding-left:  max(var(--gutter), calc(50vw - 600px)); }
}

/* Angled photo edge (food band), as in the concept */
@media (min-width: 960px) {
  .pc-band--angled.pc-band--media-right .pc-band__media { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
  .pc-band--angled.pc-band--media-left .pc-band__media  { clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); }
}

/* ----- Banner: full-width photo with the copy over a navy gradient ------ */
.pc-banner {
  position: relative;
  isolation: isolate;
  display: grid;
}
.pc-banner__media {
  --ratio: 4 / 3;
  --radius: 0px;
  margin: 0;
  border-radius: 0;
}
.pc-banner__media:hover .pc-photo__zoom,
.pc-cta-strip__media:hover .pc-photo__zoom { transform: none; }
.pc-banner__inner { padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); }

@media (min-width: 960px) {
  .pc-banner {
    align-items: center;
    min-height: clamp(580px, 46vw, 760px);
  }
  .pc-banner__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
  }
  .pc-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,
                rgba(26, 36, 53, 0.96) 0%,
                rgba(26, 36, 53, 0.88) 34%,
                rgba(26, 36, 53, 0.45) 62%,
                rgba(26, 36, 53, 0.1) 100%);
  }
  .pc-banner__inner {
    width: 100%;
    padding-block: clamp(4.5rem, 2rem + 4vw, 7rem);
  }
  /* Placeholder caption sits in the clear right half until the photo arrives */
  .pc-banner .pc-photo__todo { padding-left: 50%; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Banner photo settles from a slow zoom as it scrolls in */
  .pc-js [data-reveal="zoom"] { opacity: 1; transform: none; }
  .pc-js [data-reveal="zoom"] .pc-photo__zoom > * {
    transform: scale(1.1);
    transition: transform 1.8s var(--pc-ease-out);
  }
  .pc-js [data-reveal="zoom"].is-in .pc-photo__zoom > * { transform: none; }
}

/* ----- Booking strip: slim full-width photo band with one action ------- */
.pc-cta-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.pc-cta-strip__media {
  --radius: 0px;
  position: absolute;
  inset: 0;
  z-index: -2;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.pc-cta-strip__media img { object-position: 50% 40%; }
.pc-cta-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(26, 36, 53, 0.86);
}
.pc-cta-strip__inner {
  display: grid;
  gap: 1.75rem;
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem);
}
.pc-cta-strip h2 {
  max-width: 20ch;
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
}
.pc-cta-strip__copy p {
  max-width: 46ch;
  margin-top: 0.75rem;
  color: var(--muted-on-dark);
}
.pc-cta-strip__actions {
  display: grid;
  justify-items: start;
  gap: 0.875rem;
}
.pc-cta-strip__note {
  font-size: 0.9375rem;
  color: var(--muted-on-dark);
}
.pc-cta-strip__note a {
  color: var(--white);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-underline-offset 0.25s var(--pc-ease-soft);
}
.pc-cta-strip__note a:hover { text-underline-offset: 5px; }
.pc-cta-strip .social { margin-top: 0.25rem; }
@media (min-width: 800px) { .pc-cta-strip .social { justify-content: flex-end; } }

@media (min-width: 800px) {
  .pc-cta-strip::after {
    background: linear-gradient(90deg,
                rgba(26, 36, 53, 0.94) 0%,
                rgba(26, 36, 53, 0.8) 45%,
                rgba(26, 36, 53, 0.55) 100%);
  }
  .pc-cta-strip__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
  }
  .pc-cta-strip__actions { justify-items: end; text-align: right; }
}

/* Calmer display type on light grounds: Bodoni's sturdier text cut rather
   than its hairline display cut, which shimmers on white at large sizes */
h2, h3, h4,
.pc-feature blockquote,
.pc-quotes blockquote,
.pc-aside-quote blockquote {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
}


/* ----- Refinement layer: ink, layering, hover and reveal variety ------- */

/* Dark surfaces keep white display type */
.pc-sec--navy :is(h2, h3, h4),
.pc-hero__title { color: inherit; }

/* Hero: title, ornament and lead read as one centred lockup */
.pc-hero__content { justify-items: center; }
.pc-hero__title,
.pc-hero__lead { width: 100%; margin-inline: auto; text-align: center; }
.pc-hero__lead { max-width: 40ch; }

.pc-hero__orn {
  --orn-bg: transparent;
  color: rgba(255, 255, 255, 0.78);
}
.pc-hero__orn .pc-orn__line {
  width: min(72px, 16vw);
  animation: pc-hero-draw 1.1s 0.5s var(--pc-ease-out) both;
}
.pc-hero__orn .pc-orn__mark {
  width: 14px;
  height: 14px;
  animation: pc-hero-mark 0.9s 0.45s var(--pc-ease-out) both;
}
@keyframes pc-hero-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pc-hero-mark {
  from { opacity: 0; transform: rotate(-90deg) scale(0.4); }
  to   { opacity: 1; transform: none; }
}

/* Frames: the offset rule tightens towards the photo on hover */
.pc-framed::after {
  transition: inset 0.6s var(--pc-ease-out), border-color 0.4s var(--pc-ease-soft);
}
.pc-framed:hover::after { inset: 8px -8px -8px 8px; border-color: var(--navy); }
.pc-framed--left:hover::after { inset: 8px 8px -8px -8px; }
.pc-sec--navy .pc-framed:hover::after { border-color: rgba(255, 255, 255, 0.5); }

/* Food panels: links, with a rule that draws across on hover */
.pc-tile {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.pc-tile .pc-ic { grid-row: span 3; transition: transform 0.4s var(--pc-ease-out); }
.pc-tile::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--pc-ease-out);
}
.pc-tile__more {
  justify-self: start;
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size 0.4s var(--pc-ease-out);
}
.pc-tile:hover::before,
.pc-tile:focus-visible::before { transform: scaleX(1); }
.pc-tile:hover .pc-ic { transform: translateY(-3px); }
.pc-tile:hover .pc-tile__more,
.pc-tile:focus-visible .pc-tile__more { background-size: 100% 1px; }


/* Events: each row lifts onto a white panel on hover */
.pc-event-list { isolation: isolate; }
.pc-event { position: relative; }
.pc-event::before {
  content: "";
  position: absolute;
  inset: 0 -0.75rem;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 18px 40px -28px rgba(26, 36, 53, 0.45);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.35s var(--pc-ease-soft), transform 0.5s var(--pc-ease-out);
}
.pc-event:hover::before { opacity: 1; transform: none; }
.pc-event .pc-date { transition: background-color 0.35s var(--pc-ease-soft), color 0.35s var(--pc-ease-soft), transform 0.5s var(--pc-ease-out); }
.pc-event:hover .pc-date { transform: translateX(4px); }
@media (min-width: 720px) {
  .pc-event::before { inset: 0 -1.5rem; }
}

/* Reviews: Google widget between the Tripadvisor quotes */
.pc-gwidget {
  min-height: 320px;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.pc-quotes-label {
  margin-inline: auto;
  margin-top: clamp(3rem, 2.4rem + 2.5vw, 4.5rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--text-muted);
}
.pc-quotes-label + .pc-quotes { margin-top: 1.5rem; }

@media (prefers-reduced-motion: no-preference) {
  /* Headings come into focus rather than simply rising */
  .pc-js h2[data-reveal] {
    filter: blur(6px);
    transition: opacity 0.9s var(--pc-ease-soft), transform 1s var(--pc-ease-out), filter 0.9s var(--pc-ease-soft);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .pc-js h2[data-reveal].is-in { filter: none; }

  /* Kicker rules draw in after the label */
  .pc-js .pc-kicker[data-reveal]::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s var(--pc-ease-out) 0.25s;
  }
  .pc-js .pc-kicker[data-reveal].is-in::before { transform: none; }

  /* Photos wipe in from their own side */
  .pc-js [data-reveal="mask"][data-from="left"]   { clip-path: inset(0 36% 0 0 round var(--radius)); }
  .pc-js [data-reveal="mask"][data-from="right"]  { clip-path: inset(0 0 0 36% round var(--radius)); }
  .pc-js [data-reveal="mask"][data-from="centre"] { clip-path: inset(0 34% 0 34% round var(--radius)); }
  .pc-js [data-reveal="mask"][data-from].is-in    { clip-path: inset(0 0 0 0 round var(--radius)); }

  /* Trust strip: each icon draws itself stroke by stroke, the four staggered,
     and the label settles in once its icon is mostly drawn */
  .pc-js [data-reveal="draw"] { opacity: 1; transform: none; }
  .pc-js .pc-draw svg > * {
    stroke-dasharray: 1 1.05;
    stroke-dashoffset: 1.02;
    stroke-opacity: 0;
    transition: stroke-dashoffset 0.95s var(--pc-ease-out), stroke-opacity 0.15s linear;
    transition-delay: calc(var(--i, 0) * 180ms + var(--s, 0) * 110ms);
  }
  .pc-js .is-in .pc-draw svg > * { stroke-dashoffset: 0; stroke-opacity: 1; }
  .pc-js [data-reveal="draw"] .pc-facts__label {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.6s var(--pc-ease-soft), transform 0.7s var(--pc-ease-out);
    transition-delay: calc(var(--i, 0) * 180ms + 420ms);
  }
  .pc-js [data-reveal="draw"].is-in .pc-facts__label { opacity: 1; transform: none; }

  /* Footer crown watermark draws itself in once */
  .pc-js .pc-foot-mark :is(path, circle):not(.pc-foot-mark__fill) {
    stroke-dasharray: 1 1.05;
    stroke-dashoffset: 1.02;
    transition: stroke-dashoffset 2.2s cubic-bezier(0.16, 1, 0.3, 1) calc(0.2s + var(--s, 0) * 0.35s);
  }
  .pc-js .pc-foot-mark__fill { opacity: 0; transition: opacity 1.6s ease 1.1s; }
  .pc-js .site-footer.is-in .pc-foot-mark :is(path, circle) { stroke-dashoffset: 0; }
  .pc-js .site-footer.is-in .pc-foot-mark__fill { opacity: 1; }
}


/* ==========================================================================
   19. Menus page (menus.html)
   ========================================================================== */

/* Anchors land below the fixed header and the sticky category bar */
html:has(.pc-mnav) { scroll-padding-top: calc(var(--pc-header-h, 72px) + 60px); }
html.pc-lightbox-open { overflow: hidden; }

/* ----- Inner-page hero system: every page except the homepage ----------- */
/* One height, one lockup, one overlay, one entrance. A page varies only its
   photo, its words and whether it carries a CTA row. */
.pc-hero.pc-hero--page {
  height: auto;
  min-height: clamp(460px, 60svh, 620px);
  max-height: none;
}
.pc-hero--page::after {
  background:
    linear-gradient(180deg, rgba(26, 36, 53, 0.52) 0%, rgba(26, 36, 53, 0.18) 28%, rgba(26, 36, 53, 0.22) 62%, rgba(26, 36, 53, 0.8) 100%),
    radial-gradient(ellipse 70% 62% at 50% 52%, rgba(26, 36, 53, 0.58) 0%, rgba(26, 36, 53, 0) 100%);
}
.pc-hero--page .pc-hero__content {
  gap: 1.125rem;
  padding-block: calc(var(--pc-header-h, 72px) + 2.25rem) 3.75rem;
}
.pc-hero--page .pc-hero__title {
  font-size: clamp(2.875rem, 1.7rem + 4.6vw, 5.75rem);
  line-height: 1;
}
.pc-hero--page .pc-hero__lead { max-width: 46ch; text-wrap: balance; }
.pc-hero--page .pc-hero__ctas { margin-top: 0.5rem; }

/* Brass ornament under every inner-page title */
.pc-hero--page .pc-hero__orn { color: var(--brass-light); }
.pc-hero--page .pc-hero__orn .pc-orn__line::before { border-color: var(--brass-light); background: transparent; }

/* The baseline: a brass rule along the foot of the hero that draws out
   from the centre once the lockup has landed */
.pc-hero__seam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(201, 168, 106, 0) 0%, var(--brass-light) 22%, var(--brass-pale) 50%, var(--brass-light) 78%, rgba(201, 168, 106, 0) 100%);
  transform-origin: center;
  animation: pc-seam 1.4s 0.75s var(--pc-ease-out) both;
  pointer-events: none;
}
@keyframes pc-seam { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pc-hero__seam { animation: none; } }

/* ----- Category bar ------------------------------------------------------ */
.pc-mnav {
  position: sticky;
  top: var(--pc-header-h, 72px);
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px -22px rgba(26, 36, 53, 0.5);
}
.pc-mnav__list {
  display: flex;
  gap: 0.75rem;
  max-width: calc(1200px + (var(--gutter) * 2));
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 1.5rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2rem), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2rem), transparent);
}
.pc-mnav__list::-webkit-scrollbar { display: none; }
.pc-mnav__list li { flex-shrink: 0; max-width: none; }
.pc-mnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 1.375rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.pc-mnav a:hover { border-color: var(--navy); }
.pc-mnav__list { position: relative; }
.pc-mnav a { position: relative; z-index: 1; }
.pc-mnav a[aria-current] { border-color: transparent; color: var(--white); }
/* Navy marker that slides under the current section's pill */
.pc-mnav__marker {
  position: absolute;
  top: 0.75rem;
  left: 0;
  height: 44px;
  width: 0;
  border-radius: 999px;
  background: var(--navy);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), width 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s var(--ease);
}
.pc-mnav__marker.is-on { opacity: 1; }
@media (min-width: 1180px) {
  .pc-mnav__list { justify-content: center; -webkit-mask-image: none; mask-image: none; }
}

/* ----- Menu sections ----------------------------------------------------- */
.pc-msec { padding-block: clamp(3.5rem, 2.4rem + 4vw, 6rem); }
.pc-msec--snug { padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem); }
.pc-msec--tint { --orn-bg: var(--tint); background: var(--tint); }

.pc-msec__head {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.pc-msec__head h2 { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem); }
.pc-msec__head > .pc-kicker { margin-bottom: -0.375rem; }
.pc-msec__head--center { justify-items: center; margin-inline: auto; text-align: center; }
.pc-msec__note { max-width: 58ch; color: var(--text-muted); }
.pc-sec--navy .pc-msec__note { color: var(--muted-on-dark); }
.pc-msec__extra { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--text-muted); }
.pc-actions--center { justify-content: center; }

.pc-msplit { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .pc-msplit {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 1rem + 4vw, 5.5rem);
    align-items: start;
  }
  .pc-msplit--even { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
  .pc-msplit--even .pc-msec__head { margin-bottom: 0; }
}

/* Dishes: name, then a muted line of what it comes with */
.pc-dishes {
  display: grid;
  column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) { .pc-dishes--2 { grid-template-columns: 1fr 1fr; } }
.pc-dish {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  max-width: none;
  padding-block: 1.05rem;
  border-top: 1px solid var(--line);
}
.pc-dish__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}
.pc-dish__desc { max-width: 54ch; font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }
.pc-msec--tint .pc-dishes,
.pc-msec--tint .pc-dish { border-color: #d9dbe0; }

.diet-tag { text-decoration: none; cursor: help; }

/* Side panel (sharing, salad bowls, children's) */
.pc-mpanel {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--tint);
}
.pc-msec--tint .pc-mpanel { background: var(--white); }
.pc-mpanel h3 { font-size: var(--fs-h4); }
.pc-mpanel .pc-dishes { border-bottom: 0; }
.pc-mpanel .pc-dish:first-child { border-top: 0; padding-top: 0.25rem; }
.pc-mpanel__more { padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }

/* Choice groups (light bites) */
.pc-choices { display: grid; gap: 2.75rem; }
@media (min-width: 860px) {
  .pc-choices {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(3rem, 1rem + 5vw, 6rem);
    row-gap: 3.25rem;
  }
}
.pc-choice { display: grid; gap: 0.75rem; align-content: start; padding-top: 1.5rem; border-top: 1px solid var(--navy); }
.pc-choice h3 { font-size: var(--fs-h4); }
.pc-choice__with { max-width: 50ch; font-size: 0.9375rem; color: var(--text-muted); }

.pc-options { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.pc-options li {
  position: relative;
  max-width: none;
  padding: 0.375rem 0 0.375rem 1.25rem;
  line-height: 1.5;
}
.pc-options li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: calc(0.375rem + 0.75em - 2.5px);
  width: 5px;
  height: 5px;
  background: var(--navy);
  transform: rotate(45deg);
}
.pc-options .diet-tag { margin-left: 0.375rem; vertical-align: 1px; }
.pc-options--cols { display: block; columns: 2 15rem; column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
.pc-options--cols li { break-inside: avoid; }


/* ----- Before you order -------------------------------------------------- */
.pc-mintro__grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .pc-mintro__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 1rem + 5vw, 6.5rem); align-items: center; }
}
.pc-serving {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 24px 48px -36px rgba(26, 36, 53, 0.45);
}
.pc-serving__title { font-size: var(--fs-h4); }
.pc-serving__times {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.pc-serving__times dt { color: var(--text-muted); }
.pc-serving__times dd { margin: 0; font-weight: 500; }
@media (max-width: 519px) {
  .pc-serving__times { grid-template-columns: 1fr; gap: 0; }
  .pc-serving__times dd { margin-bottom: 0.625rem; }
}
.pc-serving__notes {
  display: grid;
  gap: 0.625rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.pc-serving__notes p { display: flex; align-items: center; gap: 0.625rem; }

/* ----- Full menu pages --------------------------------------------------- */
.pc-fullmenus { display: grid; gap: 3rem; }
@media (min-width: 760px) {
  .pc-fullmenus { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 1rem + 3vw, 4rem); align-items: start; }
}
.pc-fullmenu { display: grid; gap: 1.25rem; margin: 0; }
.pc-fullmenu--single { max-width: 1040px; margin-inline: auto; }
.pc-fullmenu__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  cursor: zoom-in;
}
.pc-fullmenu__open img {
  display: block;
  width: 100%;
  height: auto;           /* never cropped */
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-fullmenu__open:hover img { transform: scale(1.02); }
.pc-fullmenu__hint {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(26, 36, 53, 0.7);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s var(--ease);
}
.pc-fullmenu__hint svg { width: 16px; height: 16px; }
.pc-fullmenu__open:hover .pc-fullmenu__hint { transform: translateY(-3px); background: var(--navy-deep); }
.pc-fullmenu figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: 1.25rem;
  color: var(--ink-heading);
}
.pc-fullmenu figcaption .pc-link { font-family: var(--font-body); font-size: 0.9375rem; color: var(--text); }

/* ----- Menus page: photo spots, compositions and hover detail ----------- */

/* Placeholder until the named photo is added; the <img> covers it when present */
.pc-photo__todo code {
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--white);
  word-break: break-all;
}
.pc-photo__todo + img { position: absolute; inset: 0; }

/* Dish rows: a fine navy rule draws across on hover */
.pc-dish { position: relative; }
.pc-dish::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-dish:hover::before { transform: scaleX(1); }
.pc-mpanel .pc-dish:first-child::before { display: none; }

/* Option bullets turn on hover */
.pc-options li::before { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.pc-options li:hover::before { transform: rotate(225deg) scale(1.35); }

/* Light-bite groups: the top rule thickens from the left on hover */
.pc-choice { position: relative; }
.pc-choice::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-choice:hover::before { transform: scaleX(1); }

/* Panels lift slightly on hover */
.pc-mpanel { transition: box-shadow 0.4s var(--ease), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.pc-mpanel:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(26, 36, 53, 0.45); }

/* Sharing panel with a photo across the top */
.pc-mpanel--photo { padding: 0; overflow: hidden; gap: 0; }
.pc-mpanel__photo { --ratio: 16 / 10; border-radius: 0; }
.pc-mpanel__body { display: grid; gap: 1rem; padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }

/* Feature: pinned photo beside a list (mains, drinks) */
.pc-mfeature { display: grid; gap: 2.25rem; }
.pc-mfeature__media .pc-photo { --ratio: 16 / 10; }
@media (min-width: 960px) {
  .pc-mfeature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 1rem + 5vw, 6rem);
    align-items: start;
  }
  .pc-mfeature--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pc-mfeature--reverse .pc-mfeature__media { order: 2; }
  .pc-mfeature__media {
    position: sticky;
    top: calc(var(--pc-header-h, 72px) + 4.5rem);
  }
  .pc-mfeature__media .pc-photo { --ratio: 4 / 5; }
}

/* Photo strip: three photos edge to edge, varied widths */
.pc-mstrip { background: var(--white); }
.pc-mstrip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pc-mstrip__track::-webkit-scrollbar { display: none; }
.pc-mstrip__item {
  --ratio: auto;
  height: clamp(240px, 26vw, 440px);
  aspect-ratio: auto;
  border-radius: 0;
  scroll-snap-align: start;
}
@media (min-width: 760px) {
  .pc-mstrip__track {
    grid-auto-flow: row;
    grid-template-columns: 1.25fr 1fr 1.25fr;
    overflow: visible;
  }
}

/* Sunday band (photo and navy, angled edge) */
.pc-band.pc-sec--navy { --orn-bg: var(--navy); }
.pc-msunday .pc-band__body > .pc-msec__head { max-width: 34rem; margin-bottom: 0; }
.pc-msunday .pc-band__media .pc-photo { --ratio: 16 / 10; }

/* Children's: heading with the photo beneath it */
.pc-mchildren__lead { display: grid; gap: 2rem; }
.pc-mchildren__lead .pc-msec__head { margin-bottom: 0; }
.pc-mchildren__lead .pc-photo { --ratio: 16 / 10; }

/* Drinks: ruled rows beside the photo */
.pc-drinklist { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.pc-drinkrow {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 1.125rem;
  align-items: start;
  max-width: none;
  padding-block: 1.375rem;
  border-top: 1px solid var(--line);
}
.pc-drinkrow::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-drinkrow:hover::before { transform: scaleX(1); }
.pc-drinkrow .pc-ic {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--pc-rule);
  border-radius: 50%;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-drinkrow:hover .pc-ic { background: var(--navy); border-color: var(--navy); color: var(--white); transform: rotate(-8deg); }
.pc-drinkrow h3 { margin-bottom: 0.25rem; font-size: 1.25rem; }
.pc-drinkrow p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }

/* Full menu cards: a soft navy veil invites the tap */
.pc-fullmenu__open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 36, 53, 0);
  transition: background-color 0.4s var(--ease);
  pointer-events: none;
}
.pc-fullmenu__open:hover::after { background: rgba(26, 36, 53, 0.12); }
.pc-fullmenu__hint { z-index: 1; }

/* Category pills: a quiet lift on hover */
.pc-mnav a:not([aria-current]):hover { background: var(--tint); }

@media (prefers-reduced-motion: reduce) {
  .pc-mpanel:hover { transform: none; }
  .pc-mnav__marker { transition: opacity 0.2s linear; }
}


/* ----- Menu viewer (native <dialog>) ------------------------------------- */
.pc-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(17, 24, 36, 0.96);
  color: var(--white);
  opacity: 0;
  transition: opacity 0.3s var(--ease), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
.pc-lightbox[open] { opacity: 1; }
@starting-style { .pc-lightbox[open] { opacity: 0; } }
.pc-lightbox::backdrop { background: transparent; }
.pc-lightbox :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.pc-lightbox__bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
  padding: 0 var(--gutter);
  background: rgba(17, 24, 36, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pc-lightbox__caption {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: 1.125rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-lightbox__count { font-family: var(--font-body); font-size: 0.875rem; color: var(--muted-on-dark); }
.pc-lightbox__tools { display: flex; gap: 0.375rem; flex-shrink: 0; }
.pc-lb-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pc-lb-btn:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.pc-lb-btn svg { width: 20px; height: 20px; }
.pc-lb-btn .pc-lb-zoom-out { display: none; }
.pc-lightbox.is-single [data-lb-prev],
.pc-lightbox.is-single [data-lb-next] { display: none; }
.pc-lightbox.is-zoomed .pc-lb-zoom-in { display: none; }
.pc-lightbox.is-zoomed .pc-lb-zoom-out { display: inline-grid; }
.pc-lb-btn > span { display: inline-grid; }

.pc-lightbox__stage {
  position: absolute;
  inset: 64px 0 0 0;
  display: grid;
  place-items: center;
  padding: 1rem var(--gutter) var(--gutter);
  overflow: auto;
  overscroll-behavior: contain;
}
.pc-lightbox__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 64px - 2rem);
  border-radius: 2px;
  background: var(--white);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  cursor: zoom-in;
  animation: pc-lb-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-lightbox.is-zoomed .pc-lightbox__stage { place-items: start center; }
.pc-lightbox.is-zoomed .pc-lightbox__stage img {
  max-width: none;
  max-height: none;
  width: max(100%, 1400px);   /* readable on phones: pan to read */
  cursor: zoom-out;
}
@keyframes pc-lb-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@media (max-width: 479px) {
  .pc-lightbox__caption .pc-lightbox__count { display: none; }
  .pc-lightbox__tools { gap: 0.25rem; }
  .pc-lightbox__tools [data-lb-full] { display: none; }   /* still on each page card as "Open full size" */
}
@media (prefers-reduced-motion: reduce) {
  .pc-lightbox__stage img { animation: none; }
}


/* ==========================================================================
   20. Rooms page (rooms.html)
   ========================================================================== */

.pc-hero__jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-top: 0.25rem;
}
.pc-hero__jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  transition: text-decoration-color 0.3s var(--ease), text-underline-offset 0.35s var(--ease);
}
.pc-hero__jump a:hover { text-decoration-color: var(--white); text-underline-offset: 3px; }

/* ----- Welcome with the booking card ------------------------------------ */
.pc-rintro { padding-block: clamp(4rem, 2.8rem + 4.5vw, 7rem) clamp(3rem, 2.2rem + 3vw, 5rem); }
.pc-rintro__grid { display: grid; gap: 2.75rem; }
@media (min-width: 960px) {
  .pc-rintro__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(3rem, 1rem + 6vw, 7rem);
    align-items: center;
  }
}
.pc-rintro__lead {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink-heading);
}

.pc-bookcard {
  display: grid;
  gap: 1rem;
  padding: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--muted-on-dark);
  box-shadow: 0 30px 60px -36px rgba(26, 36, 53, 0.7);
}
.pc-bookcard__title {
  font-size: var(--fs-h3);
  color: var(--white);
}
.pc-bookcard .btn--primary { background: var(--white); border-color: var(--white); color: var(--navy); }
.pc-bookcard .btn--primary:hover { background: var(--tint); border-color: var(--tint); }
.pc-bookcard__or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.pc-bookcard__or::before,
.pc-bookcard__or::after { content: ""; flex: 1; height: 1px; background: var(--line-on-dark); }
.pc-bookcard__phone {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
  min-height: 44px;
  color: var(--white);
  text-decoration: none;
}
.pc-bookcard__phone .pc-ic {
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
  color: var(--white);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-bookcard__phone strong { display: block; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-bookcard__phone small { display: block; font-size: 0.875rem; color: var(--muted-on-dark); }
.pc-bookcard__phone:hover .pc-ic { background: var(--white); color: var(--navy); transform: rotate(-12deg); }

/* ----- In every room: drawn icons on a ruled strip ---------------------- */
.pc-ramen { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.pc-ramen__title {
  margin-bottom: 1.25rem;
  font-size: var(--fs-h4);
  text-align: center;
}
.pc-ramen__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}
.pc-ramen__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  max-width: none;
  padding: 1.5rem 0.75rem;
  font-weight: 500;
  text-align: center;
}
.pc-ramen__list li:nth-child(even) { border-left: 1px solid var(--line); }
.pc-ramen__list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
.pc-ramen__list .pc-ic { width: 30px; height: 30px; }
@media (min-width: 768px) {
  .pc-ramen__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-ramen__list li { flex-direction: row; justify-content: center; gap: 0.875rem; padding: 1.75rem 1rem; }
  .pc-ramen__list li:nth-child(n + 3) { border-top: 0; }
  .pc-ramen__list li + li { border-left: 1px solid var(--line); }
}

/* ----- Room showcase: layered photos and an editorial column ------------- */
.pc-room { padding-block: clamp(3.5rem, 2.4rem + 4.5vw, 7rem); }
.pc-room + .pc-room { background: var(--tint); }
.pc-room__grid { display: grid; gap: 2.25rem; }
@media (min-width: 960px) {
  .pc-room__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3.5rem, 1rem + 6vw, 7.5rem);
    align-items: center;
  }
  .pc-room--flip .pc-room__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pc-room--flip .pc-room__media { order: 2; }
}

.pc-room__media { position: relative; isolation: isolate; }
.pc-room__main .pc-photo { --ratio: 4 / 3; }
.pc-room__detail { display: none; }

@media (min-width: 960px) {
  .pc-room__media { padding: 0 14% 12% 0; }
  .pc-room--flip .pc-room__media { padding: 0 0 12% 14%; }
  .pc-room__main .pc-photo { --ratio: 5 / 4; }
  /* Second, smaller photo layered over the corner */
  .pc-room__detail {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 44%;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 30px 60px -32px rgba(26, 36, 53, 0.55);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pc-room + .pc-room .pc-room__detail { background: var(--tint); }
  .pc-room--flip .pc-room__detail { right: auto; left: 0; }
  .pc-room__detail .pc-photo { --ratio: 1 / 1; }
  .pc-room__detail .pc-photo__todo { gap: 0.5rem; padding: 0.75rem; font-size: 0.8125rem; }
  .pc-room__detail .pc-photo__todo code { font-size: 0.6875rem; }
  .pc-room__media:hover .pc-room__detail { transform: translate(-10px, -10px); }
  .pc-room--flip .pc-room__media:hover .pc-room__detail { transform: translate(10px, -10px); }
}

.pc-room__body {
  display: grid;
  gap: 1.125rem;
  min-width: 0;
  max-width: 32rem;
  container-type: inline-size;
}
.pc-room__body > .pc-kicker { margin-bottom: -0.375rem; }
.pc-room__body h2 { font-size: clamp(2rem, 1.6rem + 1.7vw, 2.875rem); }
.pc-room__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text);
}
.pc-room__body > p:not(.pc-kicker):not(.pc-room__lead) { color: var(--text-muted); }

/* Room facts: a compact two-column list with ringed icons */
.pc-room__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1.25rem;
  margin: 0.5rem 0 0;
  padding: 1.375rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.pc-room + .pc-room .pc-room__facts { border-color: #d9dbe0; }
.pc-room__facts li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: none;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.pc-room__facts li:first-child { grid-column: 1 / -1; font-weight: 600; font-size: 1rem; }
.pc-room__facts .pc-ic {
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid var(--pc-rule);
  border-radius: 50%;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pc-room__facts li:first-child .pc-ic { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pc-room__facts li:hover .pc-ic { background: var(--navy); border-color: var(--navy); color: var(--white); }

.pc-room__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
}
.pc-room__call {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 2rem calc(100% - 9px) / 0% 1px;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-room__call .pc-ic { width: 20px; height: 20px; }
.pc-room__call:hover { background-size: calc(100% - 2rem) 1px; }
@media (max-width: 479px) {
  .pc-room__cta { flex-direction: column; align-items: stretch; }
  .pc-room__cta .btn { width: 100%; }
  .pc-room__call { justify-content: center; }
}

/* ----- Guest review ----------------------------------------------------- */
.pc-rquote { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.pc-rquote__fig { display: grid; justify-items: center; gap: 1.5rem; max-width: 46rem; margin: 0 auto; text-align: center; }
.pc-rquote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.625rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-heading);
  text-wrap: balance;
}
.pc-rquote figcaption { font-size: var(--fs-small); color: var(--text-muted); }

/* ----- Downstairs: hours beside a short intro --------------------------- */
.pc-rdown { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); background: var(--tint); }
.pc-rdown__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .pc-rdown__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 1rem + 5vw, 6rem); align-items: center; }
}
.pc-rdown__head { display: grid; gap: 1rem; }
.pc-rdown__head > .pc-kicker { margin-bottom: -0.375rem; }
.pc-rdown__head h2 { max-width: 20ch; font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); }
.pc-rdown__head p:not(.pc-kicker) { color: var(--text-muted); }
.pc-rdown__head p:last-child { color: var(--text); }
.pc-rdown__hours {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--white);
}
/* Side by side only where the card is full width; stacked beside the intro */
@media (min-width: 560px) and (max-width: 899px) { .pc-rdown__hours { grid-template-columns: 1fr 1fr; } }
.pc-rdown__hours h3 { margin-bottom: 0.625rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.pc-rdown__hours dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1rem;
  margin: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.pc-rdown__hours dt { min-width: 7.5rem; color: var(--text-muted); white-space: nowrap; }
.pc-rdown__hours dd { margin: 0; white-space: nowrap; }


/* ==========================================================================
   21. Functions page (functions.html)
   ========================================================================== */

.pc-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
@media (max-width: 479px) {
  .pc-hero__ctas { flex-direction: column; width: 100%; max-width: 340px; }
  .pc-hero__ctas .btn { width: 100%; }
}

/* ----- Intro: two layered photos with an editorial column --------------- */
.pc-fintro { padding-block: clamp(4rem, 2.8rem + 4.5vw, 7.5rem); }
.pc-fintro__grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .pc-fintro__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(3.5rem, 1rem + 6vw, 7rem);
    align-items: center;
  }
}
.pc-fintro__media { position: relative; isolation: isolate; }
.pc-fintro__main .pc-photo { --ratio: 4 / 3; }
.pc-fintro__inset { display: none; }
@media (min-width: 960px) {
  .pc-fintro__media { padding: 0 0 16% 18%; }
  .pc-fintro__main .pc-photo { --ratio: 4 / 5; }
  .pc-fintro__inset {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 48%;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 30px 60px -32px rgba(26, 36, 53, 0.55);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pc-fintro__inset .pc-photo { --ratio: 4 / 3; }
  .pc-fintro__inset .pc-photo__todo { gap: 0.5rem; padding: 0.75rem; font-size: 0.8125rem; }
  .pc-fintro__inset .pc-photo__todo code { font-size: 0.6875rem; }
  .pc-fintro__media:hover .pc-fintro__inset { transform: translate(10px, -10px); }
}
.pc-fintro__lead {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink-heading);
}

/* ----- Occasions: an index of rows, with a photo that follows focus ----- */
.pc-occ { padding-block: clamp(4rem, 2.8rem + 4.5vw, 7rem); background: var(--tint); --orn-bg: var(--tint); }
.pc-occ__head { display: grid; justify-items: center; gap: 1rem; margin-bottom: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem); text-align: center; }
.pc-occ__head h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.875rem); }
.pc-occ__grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .pc-occ__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 1rem + 5vw, 6rem); align-items: center; }
}
.pc-occ__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #d9dbe0; }
.pc-occ__row {
  position: relative;
  display: grid;
  gap: 0.75rem;
  max-width: none;
  padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border-top: 1px solid #d9dbe0;
}
@media (min-width: 640px) {
  .pc-occ__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; }
}
.pc-occ__row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-occ__row.is-active::before { transform: scaleX(1); }
.pc-occ__text { display: grid; gap: 0.375rem; }
.pc-occ__text h3 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-occ__row.is-active .pc-occ__text h3 { transform: translateX(6px); }
.pc-occ__text p { max-width: 46ch; font-size: 0.9375rem; color: var(--text-muted); }

.pc-occ__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}
.pc-occ__arrow {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-occ__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3.5px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}
.pc-occ__cta:hover .pc-occ__arrow,
.pc-occ__cta:focus-visible .pc-occ__arrow { width: 44px; }

.pc-occ__stack { display: none; }
@media (min-width: 960px) {
  .pc-occ__stack {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--navy-soft);
  }
  .pc-occ__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transition: opacity 0.5s var(--ease), clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pc-occ__frame.is-active { opacity: 1; clip-path: inset(0 0 0 0); }
  .pc-occ__frame .pc-photo { --ratio: auto; height: 100%; aspect-ratio: auto; border-radius: 0; }
}

/* ----- Wakes: calm, narrow, centred ------------------------------------- */
.pc-fwakes { padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); }
.pc-fwakes .pc-orn { --orn-bg: var(--navy); }
.pc-fwakes__inner {
  display: grid;
  justify-items: center;
  gap: 1.125rem;
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}
.pc-fwakes__inner > .pc-kicker { margin-bottom: -0.375rem; }
.pc-fwakes__inner h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.pc-fwakes__inner p:not(.pc-kicker) { color: var(--muted-on-dark); }
.pc-fwakes .pc-actions { justify-content: center; }

/* ----- Good to know: facts and labelled placeholders ------------------- */
.pc-finfo { padding-block: clamp(4rem, 2.8rem + 4.5vw, 7rem); }
.pc-finfo__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.pc-finfo__head > .pc-kicker { margin-bottom: -0.375rem; }
.pc-finfo__head h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.875rem); }
.pc-finfo__grid {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) { .pc-finfo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pc-finfo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc-finfo__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.625rem;
  max-width: none;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  background: var(--white);
  transition: background-color 0.35s var(--ease);
}
.pc-finfo__card .pc-ic {
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-bottom: 0.25rem;
  border: 1px solid var(--pc-rule);
  border-radius: 50%;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-finfo__card h3 { font-size: 1.375rem; }
.pc-finfo__card p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }
.pc-finfo__card:not(.pc-tbc):hover { background: var(--tint); }
.pc-finfo__card:not(.pc-tbc):hover .pc-ic { background: var(--navy); border-color: var(--navy); color: var(--white); transform: rotate(-8deg); }

/* Placeholder cards: obviously unfinished, easy to find (search pc-tbc) */
.pc-tbc { background: repeating-linear-gradient(135deg, #fafafb 0 10px, #f3f4f6 10px 20px); }
.pc-tbc .pc-ic { border-style: dashed; color: var(--text-muted); }
.pc-tbc h3 { color: var(--text-muted); }
.pc-tbc__note {
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--pc-rule);
  border-radius: 3px;
  font-size: 0.875rem;
  background: var(--white);
}

/* ----- Enquiry ---------------------------------------------------------- */
.pc-fenq {
  padding-block: clamp(4rem, 2.8rem + 4.5vw, 7rem);
  background:
    radial-gradient(60% 80% at 0% 100%, rgba(155, 161, 170, 0.18) 0%, rgba(155, 161, 170, 0) 70%),
    var(--tint);
}
.pc-fenq__grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .pc-fenq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(3rem, 1rem + 5vw, 6rem); align-items: start; }
  .pc-fenq__intro { position: sticky; top: calc(var(--pc-header-h, 72px) + 2rem); }
}
.pc-fenq__intro { display: grid; gap: 1rem; align-content: start; }
.pc-fenq__intro > .pc-kicker { margin-bottom: -0.375rem; }
.pc-fenq__intro h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.pc-fenq__intro > p:not(.pc-kicker) { color: var(--text-muted); }
.pc-fenq__phone {
  display: inline-grid;
  grid-template-columns: 48px auto;
  align-items: center;
  gap: 0.875rem;
  justify-self: start;
  margin-top: 0.75rem;
  color: var(--text);
  text-decoration: none;
}
.pc-fenq__phone .pc-ic {
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s var(--ease);
}
.pc-fenq__phone small { display: block; font-size: 0.875rem; color: var(--text-muted); }
.pc-fenq__phone strong { display: block; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-fenq__phone:hover .pc-ic { transform: rotate(-12deg); background: var(--navy-deep); }

.pc-fenq__form {
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 30px 60px -40px rgba(26, 36, 53, 0.45);
}
.pc-fenq__form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pc-fenq__form legend { margin-bottom: 0.5rem; padding: 0; }
.pc-fenq__form .hint { font-weight: 400; }
.pc-fenq__submit { justify-self: start; min-width: 200px; }
@media (max-width: 479px) { .pc-fenq__submit { justify-self: stretch; } }
.pc-fenq__status {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.5;
  background: var(--tint);
}
.pc-fenq__status.is-notice { border: 1px solid var(--pc-rule); }
.pc-fenq__status.is-sent { background: var(--navy); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .pc-occ__frame { transition: opacity 0.2s linear; clip-path: none; }
}


/* ==========================================================================
   22. Events page (events.html)
   ========================================================================== */


/* ----- Masthead --------------------------------------------------------- */
.pc-evlist { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(4rem, 2.8rem + 4.5vw, 7rem); }
.pc-evlist:focus { outline: none; }
.pc-evmast {
  display: grid;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 860px) {
  .pc-evmast { grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; }
  .pc-evmast p { text-align: right; }
}
.pc-evmast h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.875rem); }
.pc-evmast p { color: var(--text-muted); }
.pc-evmast__follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}
@media (min-width: 860px) { .pc-evmast__follow { justify-content: flex-end; } }
.pc-evmast__fb {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.pc-evmast__fbicon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--pc-rule);
  border-radius: 50%;
  color: var(--navy);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-evmast__fbicon svg { width: 18px; height: 18px; fill: currentColor; }
.pc-evmast__fb:hover .pc-evmast__fbicon { background: var(--navy); border-color: var(--navy); color: var(--white); transform: translateY(-2px); }
.pc-evmast__rule {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  margin-top: 0.5rem;
}
.pc-evmast__rule span {
  display: block;
  height: 1px;
  background: var(--navy);
  transform-origin: left center;
}
.pc-evmast__rule span + span { background: var(--pc-rule); }
@media (prefers-reduced-motion: no-preference) {
  .pc-js .pc-evmast__rule span { transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
  .pc-js .pc-evmast__rule span + span { transition-delay: 0.15s; }
  .pc-js .pc-evmast__rule.is-in span { transform: none; }
}

/* ----- Magazine grid ---------------------------------------------------- */
.pc-evgrid { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
@media (min-width: 760px) {
  .pc-evgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-evcard--lead,
  .pc-evcard--wide { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .pc-evgrid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "lead lead lead lead lead lead lead lead side1 side1 side1 side1"
      "lead lead lead lead lead lead lead lead side2 side2 side2 side2"
      "wide wide wide wide wide wide wide wide fol fol fol fol";
  }
  .pc-evcard--lead { grid-area: lead; }
  .pc-evgrid > .pc-evcard--side:nth-of-type(2) { grid-area: side1; }
  .pc-evgrid > .pc-evcard--side:nth-of-type(3) { grid-area: side2; }
  .pc-evcard--wide { grid-area: wide; }
  .pc-evfollow { grid-area: fol; }
}

/* Card: whole card is clickable through the title link */
.pc-evcard {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.125rem;
  min-width: 0;
}
.pc-evcard__media { position: relative; overflow: hidden; border-radius: var(--radius); }
.pc-evcard__media .pc-photo { --ratio: 16 / 10; border-radius: var(--radius); }
.pc-evcard__media .pc-photo__zoom { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.pc-evcard__body { display: grid; gap: 0.5rem; }
.pc-evcard__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
}
.pc-evcard__cat::before { content: ""; width: 22px; height: 1px; background: currentColor; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.pc-evcard__title { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.2; }
.pc-evcard__title a { color: inherit; text-decoration: none; }
.pc-evcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.pc-evcard__title a:focus-visible { outline: none; }
.pc-evcard:has(a:focus-visible) { outline: 2px solid var(--navy); outline-offset: 6px; border-radius: var(--radius); }
.pc-evcard__when { font-size: 0.9375rem; font-weight: 600; }
.pc-evcard__teaser { max-width: 52ch; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }
.pc-evcard__more {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  min-height: 32px;
  font-weight: 600;
  font-size: 0.9375rem;
}

.pc-evcard:hover .pc-evcard__media .pc-photo__zoom { transform: scale(1.04); }
.pc-evcard:hover .pc-evcard__cat::before { width: 40px; }
.pc-evcard:hover .pc-occ__arrow,
.pc-evcard:has(a:focus-visible) .pc-occ__arrow { width: 44px; }

/* Lead story: large photo, larger title */
.pc-evcard--lead .pc-evcard__media .pc-photo { --ratio: 4 / 3; }
.pc-evcard--lead .pc-evcard__title { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem); }
@media (min-width: 1080px) {
  .pc-evcard--lead .pc-evcard__media .pc-photo { --ratio: 16 / 11; }
}

/* Side stories: stacked beside the lead, ruled apart */
@media (min-width: 1080px) {
  .pc-evcard--side { gap: 0.875rem; }
  .pc-evcard--side .pc-evcard__media .pc-photo { --ratio: 16 / 9; }
  .pc-evcard--side + .pc-evcard--side { padding-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); border-top: 1px solid var(--line); }
}

/* Wide story: horizontal on tablet up */
@media (min-width: 760px) {
  .pc-evcard--wide {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    align-items: center;
    padding-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    border-top: 1px solid var(--line);
  }
}

/* Follow panel */
.pc-evfollow {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  padding: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  border-radius: var(--radius);
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(55, 66, 85, 0.65) 0%, rgba(55, 66, 85, 0) 70%),
    var(--navy);
  color: var(--muted-on-dark);
}
@media (min-width: 760px) and (max-width: 1079px) { .pc-evfollow { grid-column: 1 / -1; } }
.pc-evfollow h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); color: var(--white); }
.pc-evfollow__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
  color: var(--white);
}
.pc-evfollow__icon svg { width: 20px; height: 20px; fill: currentColor; }

/* Slim, text-only card (live sport: no imagery, kept low-key) */
.pc-evcard--slim {
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  border-top: 1px solid var(--line);
}
.pc-evcard__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--pc-rule);
  border-radius: 50%;
  color: var(--navy);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-evcard__icon svg { width: 22px; height: 22px; }
.pc-evcard--slim:hover .pc-evcard__icon { background: var(--navy); border-color: var(--navy); color: var(--white); transform: rotate(-8deg); }
.pc-evcard--slim .pc-evcard__title { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
@media (min-width: 760px) {
  .pc-evcard--slim .pc-evcard__body {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 2rem;
  }
  .pc-evcard--slim .pc-evcard__body > :not(.pc-evcard__more) { grid-column: 1; }
  .pc-evcard--slim .pc-evcard__more { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}


/* ----- Detail views ----------------------------------------------------- */
/* Without JavaScript every detail sits below the listing; with it, one shows at a time */
.pc-evdetail { padding-block: clamp(3rem, 2.2rem + 3.5vw, 5.5rem) clamp(4rem, 2.8rem + 4.5vw, 7rem); border-top: 1px solid var(--line); }
.pc-evdetail:focus { outline: none; }
.pc-ev-ready .pc-evdetail { border-top: 0; }
.pc-ev-ready .pc-evdetail.is-open { animation: pc-evdetail-in 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pc-evdetail-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pc-evdetail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  margin-bottom: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.pc-evdetail__backarrow {
  position: relative;
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-evdetail__backarrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3.5px;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: rotate(45deg);
}
.pc-evdetail__back:hover .pc-evdetail__backarrow { width: 40px; }

.pc-evdetail__grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .pc-evdetail__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(3rem, 1rem + 5vw, 6rem); align-items: start; }
  .pc-evdetail__side { position: sticky; top: calc(var(--pc-header-h, 72px) + 2rem); }
}
.pc-evdetail__main { display: grid; gap: 1.125rem; min-width: 0; }
.pc-evdetail__main > .pc-kicker { margin-bottom: -0.375rem; }
.pc-evdetail__main h2 { font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem); }
.pc-evdetail__photo { margin-block: 0.75rem; }
.pc-evdetail__photo .pc-photo { --ratio: 16 / 9; }
.pc-evdetail__body { display: grid; gap: 1rem; max-width: 62ch; }
.pc-evdetail__body p:first-child {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink-heading);
}

.pc-evdetail__side { display: grid; gap: 1.75rem; }
.pc-evdetail__facts {
  display: grid;
  margin: 0;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--tint);
}
.pc-evdetail__facts dt {
  padding-top: 0.875rem;
  border-top: 1px solid #d9dbe0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.pc-evdetail__facts dt:first-child { padding-top: 0; border-top: 0; }
.pc-evdetail__facts dd { margin: 0.125rem 0 0.875rem; font-weight: 600; }
.pc-evdetail__facts dd:last-child { margin-bottom: 0; }
.pc-evdetail__ctas { display: grid; gap: 0.75rem; }
.pc-evdetail__ctas .btn { width: 100%; }
.pc-evdetail__moretitle {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: 1.25rem;
  color: var(--ink-heading);
}
.pc-evdetail__more ul { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.pc-evdetail__more li { max-width: none; border-top: 1px solid var(--line); }
.pc-evdetail__more a {
  display: grid;
  gap: 0.125rem;
  padding-block: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-evdetail__more a span { font-size: 0.875rem; font-weight: 400; color: var(--text-muted); }
.pc-evdetail__more a:hover { padding-left: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .pc-ev-ready .pc-evdetail.is-open { animation: none; }
}


/* ==========================================================================
   23. Our Story page (our-story.html)
   ========================================================================== */


/* ----- Opening statement: large type, two columns below ----------------- */
.pc-sopen { padding-block: clamp(4rem, 2.8rem + 5vw, 8rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.pc-sopen__statement {
  max-width: 24ch;
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3.5rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.012em;
}
.pc-sopen__cols {
  display: grid;
  gap: 2.25rem;
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  padding-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 860px) {
  .pc-sopen__cols { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 1rem + 5vw, 6rem); }
}
.pc-sopen__col { display: grid; gap: 0.875rem; align-content: start; }
.pc-sopen__col h3 { font-size: var(--fs-h4); }
.pc-sopen__col p { color: var(--text-muted); }
.pc-sopen__name {
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--tint);
}
.pc-sopen__name p { color: var(--text); }

/* ----- The building: framed frontage with a crest inset ----------------- */
.pc-sbuild { padding-block: clamp(4rem, 2.8rem + 4.5vw, 7rem); background: var(--tint); }
.pc-sbuild__grid { display: grid; gap: 2.75rem; }
@media (min-width: 960px) {
  .pc-sbuild__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(3.5rem, 1rem + 6vw, 7rem);
    align-items: center;
  }
}
.pc-sbuild__media { position: relative; isolation: isolate; }
.pc-sbuild__main .pc-photo { --ratio: 4 / 3; --focus: 50% 40%; }
.pc-sbuild__crest { display: none; }
@media (min-width: 960px) {
  .pc-sbuild__media { padding: 0 12% 14% 0; }
  .pc-sbuild__main .pc-photo { --ratio: 1 / 1; }
  .pc-sbuild__crest {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 42%;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--tint);
    box-shadow: 0 30px 60px -32px rgba(26, 36, 53, 0.55);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pc-sbuild__crest .pc-photo { --ratio: 1 / 1; }
  .pc-sbuild__crest .pc-photo__todo { gap: 0.5rem; padding: 0.75rem; font-size: 0.8125rem; }
  .pc-sbuild__crest .pc-photo__todo code { font-size: 0.6875rem; }
  .pc-sbuild__media:hover .pc-sbuild__crest { transform: translate(-10px, -10px); }
}
.pc-sbuild__copy { display: grid; gap: 1rem; min-width: 0; }
.pc-sbuild__copy > .pc-kicker { margin-bottom: -0.375rem; }
.pc-sbuild__copy h2 { max-width: 18ch; font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); }
.pc-sbuild__copy > p:not(.pc-kicker) { color: var(--text-muted); }

/* Architectural features: a ruled list */
.pc-feat { margin: 0.25rem 0 0; padding: 0; list-style: none; border-bottom: 1px solid #d9dbe0; }
.pc-feat li {
  position: relative;
  max-width: none;
  padding: 0.875rem 0 0.875rem 1.5rem;
  border-top: 1px solid #d9dbe0;
  line-height: 1.5;
}
.pc-feat li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(0.875rem + 0.75em - 3px);
  width: 6px;
  height: 6px;
  background: var(--navy);
  transform: rotate(45deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-feat li:hover::before { transform: rotate(225deg) scale(1.3); }
.pc-feat__name { font-weight: 600; }
.pc-feat__desc { color: var(--text-muted); }

.pc-squote { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding-left: 1.25rem; border-left: 1px solid var(--navy); }
.pc-squote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-heading);
}
.pc-squote figcaption { font-size: var(--fs-small); color: var(--text-muted); }

/* ----- Timeline: a rule that draws across, dates on it ------------------ */
.pc-stl { --orn-bg: var(--navy); padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); }
.pc-stl__head { display: grid; justify-items: center; gap: 1rem; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem); text-align: center; }
.pc-stl__head h2 { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); }
.pc-stl__head p { color: var(--muted-on-dark); }

ol.pc-tl {
  position: relative;
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0 0 0 2rem;
  list-style: none;
}
/* The line itself: vertical on phones, horizontal on wide screens */
.pc-tl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
  transform-origin: top center;
}
.pc-tl__item { position: relative; display: grid; gap: 0.25rem; max-width: none; }
.pc-tl__dot {
  position: absolute;
  left: calc(-2rem + 1px);
  top: 0.55rem;
  width: 9px;
  height: 9px;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: var(--navy);
  transition: background-color 0.3s var(--ease), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-tl__item:hover .pc-tl__dot { background: var(--white); transform: scale(1.35); }
.pc-tl__year {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1;
  color: var(--white);
}
.pc-tl__text { max-width: 34ch; font-size: 0.9375rem; line-height: 1.55; color: var(--white); }
.pc-tl__src { font-size: 0.8125rem; font-style: italic; color: var(--muted-on-dark); }

@media (min-width: 1100px) {
  ol.pc-tl {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 2.25rem 0 0;
  }
  .pc-tl::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; transform-origin: left center; }
  .pc-tl__dot { left: 0; top: calc(-2.25rem - 4px); }
  .pc-tl__year { font-size: clamp(1.625rem, 1rem + 1vw, 2rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .pc-js .pc-tl::before { transform: scaleY(0); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .pc-js .pc-tl.is-in::before { transform: none; }
  .pc-js .pc-tl__dot { transform: scale(0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(0.2s + var(--i, 0) * 120ms), background-color 0.3s var(--ease); }
  .pc-js .pc-tl__item.is-in .pc-tl__dot { transform: none; }
  .pc-js .pc-tl__item.is-in:hover .pc-tl__dot { transform: scale(1.35); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  .pc-js .pc-tl::before { transform: scaleX(0); }
}

/* ----- The pub today: an asymmetric grid of linked panels --------------- */
.pc-today { padding-block: clamp(4rem, 2.8rem + 4.5vw, 7rem); }
.pc-today__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.pc-today__head > .pc-kicker { margin-bottom: -0.375rem; }
.pc-today__head h2 { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); }
.pc-today__grid { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
@media (min-width: 700px) { .pc-today__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) {
  .pc-today__grid { grid-template-columns: 7fr 5fr; }
  /* Right-hand column sits lower. `translate` leaves the grid rows alone,
     so the cards can't overlap, and composes with the reveal transform. */
  .pc-today__grid { --pc-today-off: clamp(3rem, 1rem + 4vw, 6rem); padding-bottom: var(--pc-today-off); }
  .pc-today__item--2,
  .pc-today__item--4 { translate: 0 var(--pc-today-off); }
}
.pc-today__link { display: grid; gap: 1rem; color: inherit; text-decoration: none; }
.pc-today__media { overflow: hidden; border-radius: var(--radius); }
.pc-today__media .pc-photo { --ratio: 3 / 2; }
.pc-today__item--2 .pc-today__media .pc-photo,
.pc-today__item--3 .pc-today__media .pc-photo { --ratio: 4 / 3; }
.pc-today__media .pc-photo__zoom { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.pc-today__link:hover .pc-photo__zoom { transform: scale(1.04); }
.pc-today__body { display: grid; gap: 0.5rem; }
.pc-today__body h3 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); }
.pc-today__body p { max-width: 48ch; font-size: 0.9375rem; color: var(--text-muted); }
.pc-today__more { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 36px; font-weight: 600; font-size: 0.9375rem; }
.pc-today__link:hover .pc-occ__arrow,
.pc-today__link:focus-visible .pc-occ__arrow { width: 44px; }

/* ----- Atmosphere: an image mosaic around a guest quote ----------------- */
.pc-satmo { padding-bottom: clamp(4rem, 2.8rem + 4.5vw, 7rem); }
.pc-satmo__grid { display: grid; gap: 1rem; }
.pc-satmo__a .pc-photo,
.pc-satmo__b .pc-photo,
.pc-satmo__c .pc-photo { --ratio: 4 / 3; }
.pc-satmo__b { display: none; }
.pc-satmo__quote {
  display: grid;
  align-content: center;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
}
.pc-satmo__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-style: italic;
  line-height: 1.35;
}
.pc-satmo__quote figcaption { font-size: var(--fs-small); color: var(--muted-on-dark); }
@media (min-width: 860px) {
  .pc-satmo__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 1.25rem;
  }
  .pc-satmo__a { grid-column: 1 / 8; grid-row: 1 / 3; }
  .pc-satmo__a .pc-photo { --ratio: auto; height: 100%; aspect-ratio: auto; min-height: 420px; }
  .pc-satmo__b { display: block; grid-column: 8 / 13; grid-row: 1; }
  .pc-satmo__quote { grid-column: 8 / 13; grid-row: 2; }
  .pc-satmo__c { grid-column: 1 / 13; }
  .pc-satmo__c .pc-photo { --ratio: 21 / 8; }
}

/* ----- Closing invitation ---------------------------------------------- */
.pc-sclose { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); background: var(--tint); --orn-bg: var(--tint); }
.pc-sclose__inner { display: grid; justify-items: center; gap: 1.125rem; text-align: center; }
.pc-sclose__inner h2 { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); }
.pc-sclose__inner p { color: var(--text-muted); }
.pc-sclose .pc-actions { justify-content: center; }


/* ==========================================================================
   24. Contact page (contact.html)
   ========================================================================== */


.pc-contact {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4rem, 2.8rem + 4.5vw, 7rem);
  background:
    radial-gradient(60% 70% at 100% 100%, rgba(155, 161, 170, 0.2) 0%, rgba(155, 161, 170, 0) 70%),
    var(--tint);
}
.pc-contact__grid {
  position: relative;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 960px) {
  .pc-contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 0.5rem + 1.6vw, 2.5rem);
    align-items: start;
  }
  .pc-contact__grid > .pc-ccard { position: sticky; top: calc(var(--pc-header-h, 72px) + 1.5rem); }
}

/* ----- Contact card: navy gradient, inner frame, faint star ------------- */
.pc-ccard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--white);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(165deg, var(--navy-soft) 0%, var(--navy) 42%, var(--navy-deep) 100%);
  box-shadow: 0 40px 80px -44px rgba(26, 36, 53, 0.7);
}
.pc-ccard::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--radius) - 2px);
  pointer-events: none;
}
.pc-ccard::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  z-index: -1;
  width: 280px;
  height: 280px;
  opacity: 0.05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 1c.6 5.6 4.4 9.4 11 11-6.6 1.6-10.4 5.4-11 11-.6-5.6-4.4-9.4-11-11 6.6-1.6 10.4-5.4 11-11z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.pc-ccard__inner {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
}
.pc-ccard__head { display: grid; gap: 0.375rem; }
.pc-ccard__kicker {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18;
  font-style: italic;
  font-size: 1rem;
  color: var(--muted-on-dark);
}
.pc-ccard__head h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); color: var(--white); }

/* Contact methods */
.pc-ccard__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.pc-ccard__list li { max-width: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.pc-cline {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding-block: 0.875rem;
  color: var(--white);
  text-decoration: none;
}
.pc-cline__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-cline__ic svg { width: 19px; height: 19px; }
.pc-cline__body { display: grid; gap: 0.125rem; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.pc-cline__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.pc-cline__value { font-size: 1.0625rem; font-weight: 500; line-height: 1.45; }
.pc-cline__value--num { font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.pc-cline__value--email { overflow-wrap: anywhere; }
.pc-cline:hover .pc-cline__ic,
.pc-cline:focus-visible .pc-cline__ic { background: var(--white); border-color: var(--white); color: var(--navy); transform: rotate(-10deg); }
.pc-cline:hover .pc-cline__body,
.pc-cline:focus-visible .pc-cline__body { transform: translateX(4px); }
.pc-cline:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }

.pc-ccard__orn { --orn-bg: transparent; color: rgba(255, 255, 255, 0.5); }
.pc-ccard__orn .pc-orn__line { width: min(88px, 20vw); }
.pc-ccard__orn .pc-orn__mark { width: 14px; height: 14px; }

/* Opening hours */
.pc-ccard__hours { display: grid; gap: 1.125rem; }
.pc-ccard__sub {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.375rem;
  color: var(--white);
}
.pc-ccard__sub .pc-ic { width: 20px; height: 20px; color: var(--white); }
.pc-ccard__hgrid { display: grid; gap: 1.25rem; }
@media (min-width: 600px) and (max-width: 959px) {
  .pc-ccard__hgrid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.pc-ccard__hgrid h4 {
  margin-bottom: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.pc-hours { margin: 0; }
.pc-hours > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.4375rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
}
.pc-hours dt { position: relative; white-space: nowrap; }
.pc-hours dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pc-hours > .is-today { color: var(--white); font-weight: 600; }
.pc-hours > .is-today dt { padding-left: 0.875rem; }
.pc-hours > .is-today dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  transform: translateY(-50%);
}

/* Socials */
.pc-ccard__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pc-ccard__social p { font-size: 0.9375rem; color: var(--muted-on-dark); }
.pc-ccard__social .social { margin-top: 0; }

/* ----- Enquiry form card ------------------------------------------------- */
.pc-cform {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 30px 60px -40px rgba(26, 36, 53, 0.45);
  scroll-margin-top: calc(var(--pc-header-h, 72px) + 1.5rem);
}
/* Accent rule along the top edge, drawn in when the card arrives */
.pc-cform::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--navy);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .pc-js .pc-cform::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s; }
  .pc-js .pc-cform.is-in::before { transform: none; }
}
.pc-cform__head { display: grid; gap: 0.75rem; margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.pc-cform__head > .pc-kicker { margin-bottom: -0.25rem; }
.pc-cform__head h2 { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); }
.pc-cform__head p:not(.pc-kicker) { font-size: 0.9375rem; color: var(--text-muted); }

.pc-cform .input,
.pc-cform .select,
.pc-cform .textarea { background-color: #fbfbfc; }
.pc-cform .input:focus,
.pc-cform .select:focus,
.pc-cform .textarea:focus { background-color: var(--white); }
.pc-cform .select:invalid { color: var(--text-muted); }
.pc-cform .select option { color: var(--text); }
.pc-cform .field label { transition: color 0.25s var(--ease); }
.pc-cform .field:focus-within label { color: var(--navy); }
.pc-cform .field.is-invalid .input,
.pc-cform .field.is-invalid .select,
.pc-cform .field.is-invalid .textarea { background-color: #fff8f8; }

.pc-cform__tip { font-size: 0.875rem; color: var(--text-muted); }
.pc-cform__tip a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.pc-cform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.25rem;
}
.pc-cform__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.875rem; min-width: 210px; }
.pc-cform__arrow {
  position: relative;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-cform__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.pc-cform__submit:hover .pc-cform__arrow,
.pc-cform__submit:focus-visible .pc-cform__arrow { width: 28px; }
.pc-cform__submit:active { transform: translateY(1px); }
.pc-cform__submit:disabled { cursor: progress; opacity: 0.75; }
.pc-cform__submit:disabled .pc-cform__arrow { width: 0; opacity: 0; }
.pc-cform__alt { font-size: 0.9375rem; color: var(--text-muted); }
.pc-cform__alt a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--pc-rule);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s var(--ease);
}
.pc-cform__alt a:hover { text-decoration-color: var(--navy); }
@media (max-width: 479px) {
  .pc-cform__submit { width: 100%; }
  .pc-cform__foot { justify-content: center; }
}

.pc-cform__status {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.5;
  background: var(--tint);
}
.pc-cform__status.is-notice { border: 1px solid var(--pc-rule); }
.pc-cform__status.is-sent { background: var(--navy); color: var(--white); }
.pc-cform__status a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }


/* ==========================================================================
   25. Inner-page elevation pass (every page except home.html)
   Scoped to <body class="pc-inner"> so the approved homepage, header and
   footer render exactly as before. Adds the brass accent, the depth system
   and the shared inner-page hero, then the per-page compositions.
   ========================================================================== */

/* ----- Browser surfaces: selection, caret, scrollbar, focus -------------- */
.pc-inner ::selection { background: var(--brass-pale); color: var(--navy-deep); }
.pc-inner .pc-sec--navy ::selection { background: var(--brass-light); color: var(--navy-deep); }
.pc-inner input,
.pc-inner textarea,
.pc-inner select { caret-color: var(--brass-ink); }
.pc-inner :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.pc-inner .pc-sec--navy :focus-visible { outline-color: var(--brass-light); }
@supports (scrollbar-color: red blue) {
  .pc-inner { scrollbar-color: var(--navy-soft) var(--tint); scrollbar-width: thin; }
}

/* ----- Accent: kickers, ornaments, icons, links, arrows ----------------- */
.pc-inner main .pc-kicker { color: var(--brass-ink); }
.pc-inner main .pc-kicker::before { background: var(--brass); }
.pc-inner main .pc-sec--navy .pc-kicker,
.pc-inner main .pc-band--navy .pc-kicker { color: var(--brass-light); }
.pc-inner main .pc-sec--navy .pc-kicker::before { background: var(--brass-light); }

.pc-inner main .pc-orn { color: var(--brass); }
.pc-inner main .pc-sec--navy .pc-orn,
.pc-inner main .pc-fwakes .pc-orn,
.pc-inner main .pc-stl .pc-orn { color: var(--brass-light); }

.pc-inner main .pc-ic { color: var(--brass-ink); }
.pc-inner main .pc-sec--navy .pc-ic { color: var(--brass-light); }
.pc-inner main .pc-photo__todo .pc-ic { color: var(--brass-light); }

/* Ringed icons (rooms facts, drinks, functions, events, enquiry phone) */
.pc-inner main :is(.pc-room__facts, .pc-drinkrow, .pc-finfo__row, .pc-ramen__list) .pc-ic,
.pc-inner main .pc-evcard__icon,
.pc-inner main .pc-fenq__phone .pc-ic { border-color: var(--brass-line); }
.pc-inner main .pc-room__facts li:first-child .pc-ic { background: var(--navy); border-color: var(--navy); color: var(--brass-pale); }
.pc-inner main :is(.pc-room__facts li, .pc-drinkrow, .pc-finfo__row, .pc-evcard--slim):hover .pc-ic,
.pc-inner main .pc-evcard--slim:hover .pc-evcard__icon { background: var(--navy); border-color: var(--navy); color: var(--brass-pale); }

/* Text links underline in brass */
.pc-inner main .pc-link { text-decoration-color: var(--brass); }
.pc-inner main .pc-link:hover { text-decoration-color: var(--navy); }

/* Arrows that lengthen on hover pick up brass */
.pc-inner main .pc-occ__arrow { color: var(--brass-ink); }
.pc-inner main .pc-sec--navy .pc-occ__arrow { color: var(--brass-light); }

/* Buttons: a brass keyline appears on hover, the pub-sign detail */
.pc-inner main .btn--primary:hover,
.pc-inner main .btn--primary:focus-visible { box-shadow: inset 0 0 0 1px var(--brass-light), 0 12px 24px -14px rgba(26, 36, 53, 0.55); }
.pc-inner main .btn--outline:hover { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--brass-light); }
.pc-inner main .btn--light:hover { box-shadow: inset 0 0 0 1px var(--brass), 0 12px 24px -14px rgba(0, 0, 0, 0.45); }
.pc-inner main .btn--outline-light:hover { border-color: var(--brass-light); background: rgba(201, 168, 106, 0.12); color: var(--white); }

/* ----- Depth: shared surfaces ------------------------------------------- */
/* White cards: a hairline gradient border (brass at the top-left edge
   fading to the usual rule) and a soft, offset shadow */
.pc-inner main :is(.pc-serving, .pc-mpanel, .pc-fenq__form, .pc-cform, .pc-rdown__hours, .pc-sopen__name) {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--pc-card-bg, var(--white)), var(--pc-card-bg, var(--white))) padding-box,
    linear-gradient(150deg, rgba(168, 133, 78, 0.55) 0%, rgba(168, 133, 78, 0.12) 38%, var(--line) 100%) border-box;
  box-shadow: var(--shadow-2);
}
.pc-inner main .pc-msec--tint .pc-mpanel,
.pc-inner main .pc-mpanel { --pc-card-bg: var(--white); }
.pc-inner main .pc-rdown__hours { --pc-card-bg: var(--white); }
.pc-inner main .pc-sopen__name { --pc-card-bg: var(--brass-wash); }

/* Navy cards: a brass highlight along the top edge and a deeper drop */
.pc-inner main :is(.pc-bookcard, .pc-evfollow, .pc-satmo__quote, .pc-ccard) {
  box-shadow:
    inset 0 1px 0 rgba(227, 207, 159, 0.45),
    var(--shadow-navy);
}

/* Floating photos: offset keyline in brass, shadow on the inset frames */
.pc-inner main .pc-framed::after { border-color: var(--brass-line); }
.pc-inner main .pc-framed:hover::after { border-color: var(--brass); }
.pc-inner main .pc-sec--navy .pc-framed::after { border-color: rgba(201, 168, 106, 0.45); }
.pc-inner main .pc-sec--navy .pc-framed:hover::after { border-color: var(--brass-light); }

/* Photo placeholders: warmer, so they sit with the brass */
.pc-inner main .pc-photo__todo code { border-color: rgba(201, 168, 106, 0.45); color: var(--brass-pale); }

/* ----- Section seams --------------------------------------------------- */
/* Navy bands open with a brass hairline, so the page has a rhythm of
   light → rule → dark instead of a hard cut */
.pc-inner main .pc-sec--navy:not(.pc-hero),
.pc-inner main .pc-fwakes,
.pc-inner main .pc-stl { position: relative; }
.pc-inner main .pc-sec--navy:not(.pc-hero)::before,
.pc-inner main .pc-fwakes::before,
.pc-inner main .pc-stl::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 106, 0) 0%, var(--brass-light) 50%, rgba(201, 168, 106, 0) 100%);
  opacity: 0.8;
  pointer-events: none;
}
/* The booking strip at the foot of a page keeps its photo; the hairline sits above it */
.pc-inner main .pc-cta-strip { position: relative; }
.pc-inner main .pc-cta-strip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 106, 0) 0%, var(--brass-light) 50%, rgba(201, 168, 106, 0) 100%);
  pointer-events: none;
}
.pc-inner main .pc-cta-strip h2 { color: var(--white); }

/* ----- Shared hover: cards lift ---------------------------------------- */
@media (hover: hover) {
  .pc-inner main :is(.pc-serving, .pc-rdown__hours, .pc-sopen__name) { transition: transform 0.5s var(--pc-ease-out), box-shadow 0.5s var(--pc-ease-out); }
  .pc-inner main :is(.pc-serving, .pc-rdown__hours, .pc-sopen__name):hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
}

/* ======================================================================
   Menus
   ====================================================================== */
/* Category bar: brass underline follows the current pill */
.pc-inner main .pc-mnav { box-shadow: 0 12px 28px -22px rgba(26, 36, 53, 0.6); }
.pc-inner main .pc-mnav__marker { background: var(--navy); box-shadow: inset 0 -2px 0 var(--brass-light); }
.pc-inner main .pc-mnav a:not([aria-current]):hover { border-color: var(--brass); background: var(--brass-wash); }

/* Dish rows: the drawn rule and the V marker are brass */
.pc-inner main .pc-dish::before,
.pc-inner main .pc-choice::before,
.pc-inner main .pc-drinkrow::before { background: var(--brass); }
.pc-inner main .pc-dish:hover .pc-dish__name { color: var(--navy-deep); }
.pc-inner main .diet-tag { border-color: var(--brass); color: var(--brass-ink); background: var(--brass-wash); }
.pc-inner main .pc-sec--navy .diet-tag { border-color: var(--brass-light); color: var(--brass-pale); background: transparent; }

/* Side panels: paper-warm, lifted, with a brass rule under the title */
.pc-inner main .pc-mpanel { --pc-card-bg: var(--brass-wash); transition: transform 0.5s var(--pc-ease-out), box-shadow 0.5s var(--pc-ease-out); }
.pc-inner main .pc-mpanel:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.pc-inner main .pc-mpanel > h3 { padding-bottom: 0.75rem; border-bottom: 1px solid var(--brass-line); }
.pc-inner main .pc-mpanel--photo { --pc-card-bg: var(--white); }
.pc-inner main .pc-mpanel--photo > h3 { border-bottom: 0; }

/* Serving-times card: brass dividers between rows */
.pc-inner main .pc-serving__times dt { color: var(--brass-ink); font-weight: 600; }

/* Photo strip: a navy band with the middle photo lifted */
.pc-inner main .pc-mstrip {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
}
.pc-inner main .pc-mstrip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 106, 0) 0%, var(--brass-light) 50%, rgba(201, 168, 106, 0) 100%);
  opacity: 0.8;
}
.pc-inner main .pc-mstrip__track {
  gap: 1rem;
  max-width: calc(1200px + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
  align-items: center;
}
.pc-inner main .pc-mstrip__item { height: clamp(220px, 24vw, 400px); border-radius: var(--radius); box-shadow: var(--shadow-navy); }
@media (min-width: 760px) {
  .pc-inner main .pc-mstrip__track { grid-template-columns: 1fr 1.15fr 1fr; gap: 1.25rem; }
  .pc-inner main .pc-mstrip__item:nth-child(2) { height: clamp(260px, 30vw, 480px); outline: 1px solid rgba(201, 168, 106, 0.45); outline-offset: 6px; }
}

/* Sunday roast band: brass kicker and ornament already apply; add the keyline frame */
.pc-inner main .pc-msunday .pc-band__media .pc-photo { box-shadow: var(--shadow-navy); }

/* The printed menu: paper on a desk */
.pc-inner main .pc-fullmenu__open { box-shadow: var(--shadow-3); }
.pc-inner main .pc-fullmenu__hint { background: var(--navy); box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.5); }

/* ======================================================================
   Rooms
   ====================================================================== */
.pc-inner main .pc-bookcard { background: linear-gradient(165deg, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-deep) 100%); }
.pc-inner main .pc-bookcard__title { color: var(--white); }
.pc-inner main .pc-bookcard__or { color: var(--brass-light); }
.pc-inner main .pc-bookcard .btn--primary { background: var(--white); color: var(--navy); }
.pc-inner main .pc-bookcard .btn--primary:hover { background: var(--brass-pale); border-color: var(--brass-pale); box-shadow: none; }
.pc-inner main .pc-bookcard__phone .pc-ic { color: var(--brass-light); }

/* In every room: brass icons, hairline rules */
.pc-inner main .pc-ramen__title { color: var(--brass-ink); }
.pc-inner main .pc-ramen__list li { border-color: var(--brass-line); }
.pc-inner main .pc-ramen__list .pc-ic { color: var(--brass-ink); }

/* Room compositions: the detail photo is a print pinned over the corner;
   it straightens and lifts on hover */
@media (min-width: 960px) {
  .pc-inner main .pc-room__detail {
    padding: 8px;
    background: var(--white);
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--brass-line);
    transform: rotate(-2deg);
    transition: transform 0.7s var(--pc-ease-out), box-shadow 0.7s var(--pc-ease-out);
  }
  .pc-inner main .pc-room--flip .pc-room__detail { transform: rotate(2deg); }
  .pc-inner main .pc-room__media:hover .pc-room__detail { transform: translate(-10px, -12px) rotate(0deg); }
  .pc-inner main .pc-room--flip .pc-room__media:hover .pc-room__detail { transform: translate(10px, -12px) rotate(0deg); }
  .pc-inner main .pc-room__main .pc-photo { box-shadow: var(--shadow-2); }
}
.pc-inner main .pc-room__facts li:first-child { color: var(--navy); }
.pc-inner main .pc-rquote blockquote::before { color: var(--brass); }

/* Downstairs: hours card lifted */
.pc-inner main .pc-rdown__hours h3 { color: var(--brass-ink); }

/* ======================================================================
   Functions
   ====================================================================== */
@media (min-width: 960px) {
  .pc-inner main .pc-fintro__inset {
    padding: 8px;
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--brass-line);
    transform: rotate(2deg);
  }
  .pc-inner main .pc-fintro__media:hover .pc-fintro__inset { transform: translate(10px, -12px) rotate(0deg); }
  .pc-inner main .pc-fintro__main .pc-photo { box-shadow: var(--shadow-2); }
  .pc-inner main .pc-occ__stack { box-shadow: var(--shadow-navy); outline: 1px solid var(--brass-line); outline-offset: 8px; }
}
.pc-inner main .pc-fintro__lead { color: var(--ink-heading); }
.pc-inner main .pc-occ__row::before { background: var(--brass); }
.pc-inner main .pc-occ__cta { color: var(--navy); }
.pc-inner main .pc-fwakes {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}

/* Good to know: a single floating fact sheet instead of a grid of cards */
.pc-inner main .pc-finfo__sheet {
  display: grid;
  margin: 0;
  padding: clamp(0.5rem, 0.2rem + 1.2vw, 1.25rem) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  list-style: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(150deg, rgba(168, 133, 78, 0.55) 0%, rgba(168, 133, 78, 0.12) 38%, var(--line) 100%) border-box;
  box-shadow: var(--shadow-2);
}
@media (min-width: 900px) {
  .pc-inner main .pc-finfo__sheet {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  }
}
.pc-inner main .pc-finfo__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  max-width: none;
  padding-block: 1.125rem;
  border-top: 1px solid var(--line);
}
.pc-inner main .pc-finfo__row:first-child { border-top: 0; }
@media (min-width: 900px) {
  .pc-inner main .pc-finfo__row:nth-child(4) { border-top: 0; }
}
.pc-inner main .pc-finfo__row .pc-ic {
  width: 44px;
  height: 44px;
  padding: 10px;
  grid-row: span 2;
  border: 1px solid var(--brass-line);
  border-radius: 50%;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.45s var(--pc-ease-out);
}
.pc-inner main .pc-finfo__row h3 { font-size: 1.25rem; }
.pc-inner main .pc-finfo__row p { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }
.pc-inner main .pc-finfo__row:hover .pc-ic { transform: rotate(-8deg); }
.pc-inner main .pc-finfo__row.pc-tbc { background: none; }
.pc-inner main .pc-finfo__row.pc-tbc .pc-ic { border-style: dashed; color: var(--text-muted); }
.pc-inner main .pc-finfo__row.pc-tbc h3 { color: var(--text-muted); }
.pc-inner main .pc-finfo__row.pc-tbc .pc-tbc__note {
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--pc-rule);
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, #fafafb 0 10px, #f3f4f6 10px 20px);
}

/* Enquiry: brass focus glow */
.pc-inner main :is(.input, .select, .textarea):focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(168, 133, 78, 0.22); }
.pc-inner main .pc-fenq__phone .pc-ic { background: var(--navy); color: var(--brass-pale); }
.pc-inner main .pc-fenq__phone:hover .pc-ic { background: var(--navy-deep); }

/* ======================================================================
   Events
   ====================================================================== */
.pc-inner main .pc-evmast__rule span + span { background: var(--brass); }
.pc-inner main .pc-evmast__fbicon { border-color: var(--brass-line); }
.pc-inner main .pc-evmast__fb:hover .pc-evmast__fbicon { background: var(--navy); border-color: var(--navy); color: var(--brass-pale); }

/* Cards: the photo is the raised element; it lifts and a navy wash with
   the category sweeps up from the bottom edge on hover */
.pc-inner main .pc-evcard__media {
  box-shadow: var(--shadow-2);
  transition: transform 0.6s var(--pc-ease-out), box-shadow 0.6s var(--pc-ease-out);
}
.pc-inner main .pc-evcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(26, 36, 53, 0.65) 0%, rgba(26, 36, 53, 0) 55%);
  opacity: 0;
  transform: translateY(18%);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--pc-ease-out);
  pointer-events: none;
}
.pc-inner main .pc-evcard__media::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  height: 1px;
  background: var(--brass-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--pc-ease-out) 0.1s;
  pointer-events: none;
}
.pc-inner main .pc-evcard:hover .pc-evcard__media { transform: translateY(-6px); box-shadow: var(--shadow-3); }
.pc-inner main .pc-evcard:hover .pc-evcard__media::after { opacity: 1; transform: none; }
.pc-inner main .pc-evcard:hover .pc-evcard__media::before { transform: scaleX(1); }
.pc-inner main .pc-evcard__cat { color: var(--brass-ink); }
.pc-inner main .pc-evcard__cat::before { background: var(--brass); }
.pc-inner main .pc-evcard:hover .pc-evcard__cat::before { width: 36px; }
.pc-inner main .pc-evcard--lead .pc-evcard__title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.pc-inner main .pc-evcard__when { color: var(--navy); }
.pc-inner main .pc-evcard__more { color: var(--navy); }

/* Follow panel: a gradient surface with the brass highlight */
.pc-inner main .pc-evfollow { background: linear-gradient(165deg, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-deep) 100%); }
.pc-inner main .pc-evfollow__icon { border-color: rgba(201, 168, 106, 0.5); color: var(--brass-pale); }
.pc-inner main .pc-evfollow .btn--light:hover { background: var(--brass-pale); border-color: var(--brass-pale); box-shadow: none; }

/* Sport card: the brass ringed icon */
.pc-inner main .pc-evcard--slim { border-color: var(--brass-line); }

/* Detail view: the photo floats, the facts sit on paper */
.pc-inner main .pc-evdetail__photo .pc-photo { box-shadow: var(--shadow-3); }
.pc-inner main .pc-evdetail__facts {
  padding: 1.25rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--brass-wash), var(--brass-wash)) padding-box,
    linear-gradient(150deg, rgba(168, 133, 78, 0.55) 0%, rgba(168, 133, 78, 0.12) 38%, var(--line) 100%) border-box;
  box-shadow: var(--shadow-1);
}
.pc-inner main .pc-evdetail__facts dt { color: var(--brass-ink); }
.pc-inner main .pc-evdetail__backarrow { color: var(--brass-ink); }

/* ======================================================================
   Our story
   ====================================================================== */
/* The opening statement begins with a short brass rule, carrying the hero's baseline into the page */
.pc-inner main .pc-sopen__statement { position: relative; padding-top: 1.75rem; }
.pc-inner main .pc-sopen__statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--brass);
  transform-origin: left center;
}
.pc-js.pc-inner main .pc-sopen__statement[data-reveal]::before { transform: scaleX(0); transition: transform 1s var(--pc-ease-out) 0.2s; }
.pc-js.pc-inner main .pc-sopen__statement[data-reveal].is-in::before { transform: none; }
.pc-inner main .pc-sopen__col h3 { color: var(--navy); }
.pc-inner main .pc-sopen__cols { border-top-color: var(--brass-line); }

/* The building: brass diamonds on the feature list, brass rule on the quote */
.pc-inner main .pc-feat li::before { background: var(--brass); }
.pc-inner main .pc-feat { border-bottom-color: var(--brass-line); }
.pc-inner main .pc-feat li { border-top-color: var(--line); }
.pc-inner main .pc-squote { border-left-color: var(--brass); }
.pc-inner main .pc-squote figcaption { color: var(--brass-ink); }
@media (min-width: 960px) {
  .pc-inner main .pc-sbuild__crest {
    padding: 8px;
    background: var(--white);
    box-shadow: var(--shadow-3), inset 0 0 0 1px var(--brass-line);
    transform: rotate(2deg);
  }
  .pc-inner main .pc-sbuild__media:hover .pc-sbuild__crest { transform: translate(-10px, -12px) rotate(0deg); }
}
.pc-inner main .pc-sbuild__main .pc-photo { box-shadow: var(--shadow-2); }

/* Timeline: brass rule and dots, years in white */
.pc-inner main .pc-stl {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.pc-inner main ol.pc-tl::before { background: linear-gradient(90deg, var(--brass-light), rgba(201, 168, 106, 0.35)); }
@media (max-width: 1099px) {
  .pc-inner main ol.pc-tl::before { background: linear-gradient(180deg, var(--brass-light), rgba(201, 168, 106, 0.35)); }
}
.pc-inner main .pc-tl__dot { border-color: var(--brass-light); background: var(--navy); }
.pc-inner main .pc-tl__item:hover .pc-tl__dot { background: var(--brass-light); }
.pc-inner main .pc-tl__src { color: var(--brass-light); }
.pc-inner main .pc-stl__head p { color: var(--muted-on-dark); }

/* Today: the four panels lift; the arrow is brass */
.pc-inner main .pc-today__media { box-shadow: var(--shadow-2); transition: transform 0.6s var(--pc-ease-out), box-shadow 0.6s var(--pc-ease-out); }
.pc-inner main .pc-today__link:hover .pc-today__media { transform: translateY(-6px); box-shadow: var(--shadow-3); }
.pc-inner main .pc-today__more { color: var(--navy); }

/* Atmosphere: quote panel on a gradient with a brass opening mark */
.pc-inner main .pc-satmo__quote { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-deep) 100%); }
.pc-inner main .pc-satmo__quote::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a86a'%3E%3Cpath d='M12 1c.6 5.6 4.4 9.4 11 11-6.6 1.6-10.4 5.4-11 11-.6-5.6-4.4-9.4-11-11 6.6-1.6 10.4-5.4 11-11z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.pc-inner main .pc-satmo__quote figcaption { color: var(--brass-light); }
.pc-inner main .pc-satmo__grid .pc-photo { box-shadow: var(--shadow-2); }

/* ======================================================================
   Contact
   ====================================================================== */
.pc-inner main .pc-ccard::before { border-color: rgba(201, 168, 106, 0.3); }
.pc-inner main .pc-ccard::after { opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a86a'%3E%3Cpath d='M12 1c.6 5.6 4.4 9.4 11 11-6.6 1.6-10.4 5.4-11 11-.6-5.6-4.4-9.4-11-11 6.6-1.6 10.4-5.4 11-11z'/%3E%3C/svg%3E"); }
.pc-inner main .pc-ccard__kicker { color: var(--brass-pale); }
.pc-inner main .pc-cline__ic { border-color: rgba(201, 168, 106, 0.5); color: var(--brass-pale); }
.pc-inner main .pc-cline:hover .pc-cline__ic,
.pc-inner main .pc-cline:focus-visible .pc-cline__ic { background: var(--brass-pale); border-color: var(--brass-pale); color: var(--navy-deep); }
.pc-inner main .pc-cline__label { color: var(--brass-pale); }
.pc-inner main .pc-ccard__orn { color: var(--brass-light); }
.pc-inner main .pc-ccard__hgrid h4 { color: var(--brass-pale); }
.pc-inner main .pc-hours > .is-today dt::before { background: var(--brass-light); }
.pc-inner main .pc-ccard__social .social a:hover { background: var(--brass-pale); border-color: var(--brass-pale); color: var(--navy-deep); }
.pc-inner main .pc-cform::before { height: 2px; background: linear-gradient(90deg, var(--brass), var(--brass-light)); }
.pc-inner main .pc-cform__arrow { color: var(--brass-pale); }
.pc-inner main .pc-cform__alt a { text-decoration-color: var(--brass); }
.pc-inner main .pc-cform__status.is-sent { background: var(--navy); box-shadow: inset 0 1px 0 rgba(227, 207, 159, 0.45); }

/* ----- Homepage: the same accent, no layout change ----------------------- */
.pc-inner main .pc-hero__orn { color: var(--brass-light); }
.pc-inner main .pc-hero__orn .pc-orn__line::before { border-color: var(--brass-light); background: transparent; }
.pc-inner main .pc-rule2 { border-color: var(--brass); }
.pc-inner main .pc-duo__divider span { background: var(--brass-line); }
.pc-inner main .pc-duo__divider .pc-orn__mark { fill: var(--brass); }
.pc-inner main .pc-tile::before { background: var(--brass); }
.pc-inner main .pc-date__mon { color: var(--brass-ink); }
.pc-inner main .pc-event:hover .pc-date { background: var(--navy); color: var(--white); box-shadow: inset 0 0 0 1px var(--brass-light); }
.pc-inner main .pc-event:hover .pc-date__mon { color: var(--brass-pale); }
.pc-inner main .pc-amenities .pc-ic { border-color: rgba(201, 168, 106, 0.45); color: var(--brass-pale); }
.pc-inner main .pc-quotes-label { color: var(--brass-ink); }

/* ----- Background layer: a faint brass star behind each page's opening section ----- */
.pc-inner main :is(.pc-welcome, .pc-mintro, .pc-rintro, .pc-fintro, .pc-evlist, .pc-sopen, .pc-contact) {
  position: relative;
  overflow: clip;   /* clip, not hidden: keeps the contact card's sticky positioning working */
}
.pc-inner main :is(.pc-welcome, .pc-mintro, .pc-rintro, .pc-fintro, .pc-evlist, .pc-sopen, .pc-contact)::after {
  content: "";
  position: absolute;
  top: -110px;
  right: -160px;
  z-index: 0;
  width: clamp(260px, 36vw, 540px);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a8854e'%3E%3Cpath d='M12 1c.6 5.6 4.4 9.4 11 11-6.6 1.6-10.4 5.4-11 11-.6-5.6-4.4-9.4-11-11 6.6-1.6 10.4-5.4 11-11z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
@media (max-width: 599px) {
  .pc-inner main :is(.pc-welcome, .pc-mintro, .pc-rintro, .pc-fintro, .pc-evlist, .pc-sopen, .pc-contact)::after { top: -80px; right: -130px; }
}
.pc-inner main :is(.pc-welcome, .pc-mintro, .pc-rintro, .pc-fintro, .pc-evlist, .pc-sopen, .pc-contact) > .container { position: relative; z-index: 1; }

/* Rooms with a single photo: no corner reserved for a detail print */
@media (min-width: 960px) {
  .pc-inner main .pc-room__media--single,
  .pc-inner main .pc-room--flip .pc-room__media--single { padding: 0; }
  .pc-inner main .pc-room__media--single .pc-room__main .pc-photo { --ratio: 4 / 3; --focus: 50% 45%; }
}

/* Functions enquiry: phone, email and socials beside the form */
.pc-inner main .pc-fenq__ways { display: grid; gap: 1rem; margin-top: 0.75rem; }
.pc-inner main .pc-fenq__ways .pc-fenq__phone { margin-top: 0; }
.pc-inner main .pc-fenq__phone--email strong { font-size: 1.0625rem; overflow-wrap: anywhere; }
.pc-inner main .pc-fenq__social {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--brass-line);
}
.pc-inner main .pc-fenq__social p { font-size: 0.9375rem; color: var(--text-muted); }
.pc-inner main .pc-fenq__social .social--light a { border-color: var(--brass-line); }
.pc-inner main .pc-fenq__social .social--light a:hover { background: var(--navy); border-color: var(--navy); color: var(--brass-pale); }

/* ----- Reduced motion: no lifts, tilts or sweeps ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pc-inner main :is(.pc-serving, .pc-rdown__hours, .pc-sopen__name, .pc-mpanel):hover { transform: none; }
  .pc-inner main .pc-evcard:hover .pc-evcard__media,
  .pc-inner main .pc-today__link:hover .pc-today__media { transform: none; }
  .pc-inner main .pc-evcard__media::after { transition: opacity 0.2s linear; transform: none; }
  .pc-inner main :is(.pc-room__detail, .pc-fintro__inset, .pc-sbuild__crest) { transform: none; }
  .pc-js.pc-inner main .pc-sopen__statement[data-reveal]::before { transform: none; transition: none; }
}


/* ==========================================================================
   17. Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 200;
  padding: var(--space-xs) var(--space-s);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: none; }

.text-center { text-align: center; }
.text-center p { margin-inline: auto; }
.mt-s  { margin-top: var(--space-s); }
.mt-m  { margin-top: var(--space-m); }
.mt-l  { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }

/* Image placeholder until client photography arrives */
.img-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, var(--tint) 0 12px, #e9eaee 12px 24px);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--space-s);
}


/* ==========================================================================
   18. Motion preferences
   ========================================================================== */

@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;
  }
}