/* =========================================================================
   The Stag & Hounds — inner pages
   Loaded after site.css. Layouts for Menus, What's On, Our Story, History,
   Burrough Hill, Loyalty Club, Find Us and the 404 page.
   ========================================================================= */

/* --- Page hero ----------------------------------------------------------
   The home page hero, shorter: a page title rather than a front door. */

.hero--page {
	min-height: min(64vh, 620px);
	padding-bottom: clamp(56px, 6vw, 96px);
}
/* The hero redefines --sec for its own padding, so the gap below it is set
   on whatever follows instead, using the page's --sec. */
.bento--first { padding-top: var(--sec); }
.hero--page .hero__inner { max-width: 820px; }
.hero--page h1 { font-size: clamp(30px, 3.4vw, 50px); }   /* a step below the home page title, never above it */
.hero--page .hero__lead { max-width: 40rem; }

/* --- Chapter menu (History) ---------------------------------------------
   Sticks under the site header so readers can jump between the three
   stories at any point down a long page. */

.chapters {
	position: sticky; top: var(--hdr-h, 70px); z-index: 60;
	background: rgba(251,249,244,.94);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	margin: 0 0 var(--sec);
}
.chapters__inner {
	max-width: var(--box); margin-inline: auto; padding: 0 var(--gutter);
	display: flex; gap: 8px 36px; flex-wrap: wrap;
}
.chapters a {
	display: inline-flex; align-items: baseline; gap: 10px;
	padding: 16px 0 14px; text-decoration: none;
	font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-2); border-bottom: 2px solid transparent;
}
.chapters a span { font-family: var(--display); font-size: 14px; letter-spacing: 0; color: var(--claret); }
.chapters a:hover,
.chapters a.is-current { color: var(--ink); border-bottom-color: var(--claret); }

/* Anchored sections land below both the site header and the chapter menu. */
[id] { scroll-margin-top: 140px; }

/* --- Shared text tiles -------------------------------------------------- */

.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; }
.tile--claret h3 { color: #fff; }
.tile--claret blockquote,
.quote-tile p {
	font-family: var(--display); font-size: clamp(20px, 1.75vw, 26px); line-height: 1.4;
	color: #fff; margin: 0;
}
.quote-tile--wide { text-align: center; align-items: center; }
.quote-tile--wide p { max-width: 30em; }
.joke { font-style: italic; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 6px; }

/* --- Our Story placements ---------------------------------------------- */

.t-os-photo   { grid-column: 1 / 6;  grid-row: 1 / 3; min-height: 520px !important; }
.t-os-copy    { grid-column: 6 / 13; grid-row: 1 / 3; }

.t-ls-copy    { grid-column: 1 / 8;  grid-row: 1 / 2; }
.t-ls-img     { grid-column: 8 / 13; grid-row: 1 / 2; }

.t-ph-quote   { grid-column: 1 / 6;  grid-row: 1 / 2; }
.t-ph-img     { grid-column: 1 / 6;  grid-row: 2 / 3; }
.t-ph-copy    { grid-column: 6 / 13; grid-row: 1 / 3; }

.t-nc-copy    { grid-column: 1 / 8;  grid-row: 1 / 3; }
.t-nc-a       { grid-column: 8 / 13; grid-row: 1 / 2; }
.t-nc-b       { grid-column: 8 / 13; grid-row: 2 / 3; }
.t-nc-quote   { grid-column: 1 / 13; grid-row: 3 / 4; }

.t-more-head  { grid-column: 1 / 4;   grid-row: 1 / 2; justify-content: flex-start; }
.t-more-a     { grid-column: 4 / 7;   grid-row: 1 / 2; }
.t-more-b     { grid-column: 7 / 10;  grid-row: 1 / 2; }
.t-more-c     { grid-column: 10 / 13; grid-row: 1 / 2; }

/* --- History placements ------------------------------------------------- */

.t-hi-copy    { grid-column: 1 / 8;   grid-row: 1 / 2; }
.t-hi-img     { grid-column: 8 / 13;  grid-row: 1 / 2; }
.t-royal      { grid-column: 1 / 7;   grid-row: 2 / 3; }
.t-barred     { grid-column: 7 / 13;  grid-row: 2 / 3; }
.t-grants     { grid-column: 1 / 8;   grid-row: 3 / 4; }
.t-grants-img { grid-column: 8 / 13;  grid-row: 3 / 4; }
.t-cont       { grid-column: 1 / 8;   grid-row: 4 / 5; }
.t-cont-img   { grid-column: 8 / 13;  grid-row: 4 / 5; }

/* The brewery text is long. Its extra height goes to the photo row (the only
   flexible track), so the four figure tiles stay compact instead of
   stretching into tall, mostly empty boxes. */
#parish-brewery { grid-template-rows: auto auto 1fr; }
.t-pb-copy    { grid-column: 1 / 7;   grid-row: 1 / 4; }
.t-pb-a       { grid-column: 7 / 10;  grid-row: 1 / 2; min-height: 170px; }
.t-pb-b       { grid-column: 10 / 13; grid-row: 1 / 2; min-height: 170px; }
.t-pb-c       { grid-column: 7 / 10;  grid-row: 2 / 3; min-height: 170px; }
.t-pb-d       { grid-column: 10 / 13; grid-row: 2 / 3; min-height: 170px; }
.t-pb-img     { grid-column: 7 / 13;  grid-row: 3 / 4; }

.t-end-card   { grid-column: 1 / 6;   grid-row: 1 / 2; }
.t-end-book   { grid-column: 6 / 13;  grid-row: 1 / 2; }

/* --- Myles & Pam --------------------------------------------------------
   A quieter layout than the rest of the page: one reading column beside the
   framed memorial, which stays in view while the story is read. No playful
   tile mosaic for a wartime memorial. */

.memorial {
	max-width: var(--box); margin-inline: auto;
	padding: 0 var(--gutter) var(--sec);
	display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap);
	align-items: start;
}
.memorial__figure {
	position: sticky; top: 150px; margin: 0;
	border-radius: var(--r); overflow: hidden; background: var(--sand);
}
.memorial__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.memorial__figure figcaption { padding: 16px 22px 20px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.memorial__text {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	padding: clamp(30px, 3.4vw, 60px);
}
.memorial__text .sub { font-family: var(--display); font-size: clamp(18px, 1.5vw, 22px); color: var(--claret); margin-top: -.2em; }
.memorial__text h3 { margin-top: 1.9em; font-size: 23px; }
.memorial__text p { color: var(--ink-2); }
.memorial__text .eyebrow { color: var(--gold-text); }   /* the rule above was turning the chapter label grey */
.memorial__text p.lede { color: var(--ink); }
.memorial__text .closing { font-family: var(--display); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink); margin: 1.6em 0 0; padding-top: 1.4em; border-top: 1px solid var(--line); }

/* --- Burrough Hill placements ------------------------------------------ */

.t-fig-a { grid-column: 1 / 4;   grid-row: 1 / 2; min-height: 170px; }
.t-fig-b { grid-column: 4 / 7;   grid-row: 1 / 2; min-height: 170px; }
.t-fig-c { grid-column: 7 / 10;  grid-row: 1 / 2; min-height: 170px; }
.t-fig-d { grid-column: 10 / 13; grid-row: 1 / 2; min-height: 170px; }

.t-cp-copy { grid-column: 1 / 7;   grid-row: 1 / 2; }
.t-cp-film { grid-column: 7 / 13;  grid-row: 1 / 2; }

.t-wk-copy { grid-column: 1 / 8;   grid-row: 1 / 2; }
.t-wk-tips { grid-column: 8 / 13;  grid-row: 1 / 2; }

.t-dg-img  { grid-column: 1 / 6;   grid-row: 1 / 2; }
.t-dg-copy { grid-column: 6 / 13;  grid-row: 1 / 2; }

.t-sk-copy { grid-column: 1 / 7;   grid-row: 1 / 2; }
.t-sk-img  { grid-column: 7 / 13;  grid-row: 1 / 2; }

.t-vs-copy { grid-column: 1 / 7;   grid-row: 1 / 4; }
.t-vs-a    { grid-column: 7 / 13;  grid-row: 1 / 2; }
.t-vs-b    { grid-column: 7 / 13;  grid-row: 2 / 3; }
.t-vs-c    { grid-column: 7 / 13;  grid-row: 3 / 4; }

.t-fn-img  { grid-column: 1 / 6;   grid-row: 1 / 2; }
.t-fn-copy { grid-column: 6 / 13;  grid-row: 1 / 2; }

/* The client's hill footage: shown at its own 16:9 and only loaded when
   played (it is ~29MB), with the hill still as the poster. The video fills the tile,
   cropped, so it matches the height of the text beside it. */
.film { display: flex; flex-direction: column; background: var(--ink); min-height: 0 !important; }
.film::after { content: none !important; }
.film video { display: block; width: 100%; flex: 1; min-height: 320px; height: 100%; object-fit: cover; background: var(--ink); }
.film > figcaption { position: static; text-shadow: none; padding: 14px 20px; color: #e8e1d2; }

.tips { list-style: none; margin: 0; padding: 0; }
.tips li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid rgba(255,255,255,.2); color: #f6e9e2; font-size: 16px; line-height: 1.55; }
.tips li:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.tips li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: #f0c3a8; }

/* Village stories: whole-tile links into the History page. */
.story-link { display: block; min-height: 150px; text-decoration: none; color: #fff; }
.story-link > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.story-link:hover > img { transform: scale(1.04); }
.story-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,27,16,.78), rgba(20,27,16,.15)); }
.story-link__body { position: absolute; left: 24px; bottom: 20px; right: 24px; z-index: 2; display: flex; flex-direction: column; }
.story-link .tile__label { color: #f0c3a8; margin-bottom: 6px; }
.story-link__title { font-family: var(--display); font-size: 22px; }
.story-link__title::after { content: " \2192"; }

.finale { font-family: var(--display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; color: #fff; margin: .6em 0 1em; }

/* --- Menus page ---------------------------------------------------------- */

.t-mi-copy    { grid-column: 1 / 5;   grid-row: 1 / 2; }
.t-mi-offer-a { grid-column: 5 / 9;   grid-row: 1 / 2; }
.t-mi-offer-b { grid-column: 9 / 13;  grid-row: 1 / 2; }
.t-mi-a       { grid-column: 1 / 5;   grid-row: 2 / 3; min-height: 300px !important; }
.t-mi-b       { grid-column: 5 / 9;   grid-row: 2 / 3; min-height: 300px !important; }
.t-mi-c       { grid-column: 9 / 13;  grid-row: 2 / 3; min-height: 300px !important; }
#intro .offer { font-size: clamp(21px, 1.8vw, 26px); }

.t-key            { grid-column: 1 / 13;  grid-row: 1 / 2; padding-block: 18px !important; }
.t-starters       { grid-column: 1 / 8;   grid-row: 2 / 3; }
.t-starters-img   { grid-column: 8 / 13;  grid-row: 2 / 3; }
.t-mains          { grid-column: 1 / 13;  grid-row: 3 / 4; }
.t-nibbles        { grid-column: 1 / 6;   grid-row: 4 / 5; }
.t-puddings       { grid-column: 6 / 13;  grid-row: 4 / 5; }
.t-sandwiches     { grid-column: 1 / 8;   grid-row: 5 / 6; }
.t-sandwiches-img { grid-column: 8 / 13;  grid-row: 5 / 6; }

.t-mh-head     { grid-column: 1 / 13; grid-row: 1 / 2; }
.t-mh-egg-img  { grid-column: 1 / 6;  grid-row: 2 / 3; }
.t-mh-egg      { grid-column: 6 / 13; grid-row: 2 / 3; }
.t-mh-pie      { grid-column: 1 / 8;  grid-row: 3 / 4; }
.t-mh-pie-img  { grid-column: 8 / 13; grid-row: 3 / 4; }
.t-mh-saus-img { grid-column: 1 / 6;  grid-row: 4 / 5; }
.t-mh-saus     { grid-column: 6 / 13; grid-row: 4 / 5; }
.t-mh-head h2  { margin-bottom: .3em; }
.t-mh-head p:last-child { margin: 0; }

.t-su-img    { grid-column: 1 / 6;  grid-row: 1 / 2; }
.t-su-roasts { grid-column: 6 / 13; grid-row: 1 / 2; }
.t-su-also   { grid-column: 1 / 13; grid-row: 2 / 3; }

.t-dr-copy { grid-column: 1 / 7;  grid-row: 1 / 2; }
.t-dr-img  { grid-column: 7 / 13; grid-row: 1 / 2; }
.t-dr-wine { grid-column: 1 / 13; grid-row: 2 / 3; }

.t-mb-book { grid-column: 1 / 8;  grid-row: 1 / 2; }
.t-mb-img  { grid-column: 8 / 13; grid-row: 1 / 2; }

/* Menu lists */
.menu-tile { justify-content: flex-start; }
.menu-h { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; color: var(--claret); margin: 0 0 .5em; }
.menu-h::after { content: ""; display: block; width: 40px; height: 2px; background: var(--ink); margin-top: 10px; }
.menu-h--sub { font-size: 22px; margin-top: .9em; }
.menu-h--sub::after { width: 28px; margin-top: 8px; }
.menu-note { font-size: 14.5px; color: var(--ink-2); margin: -.1em 0 .8em; }
.key { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.key strong { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--claret); margin-right: 10px; }

.mlist { list-style: none; margin: 0; padding: 0; }
.mlist li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.mlist li > span { flex: 1; font-size: 16px; font-weight: 500; }
.mlist small { display: block; font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--ink-2); margin-top: 4px; }
.mlist b { font-weight: 500; color: var(--claret); white-space: nowrap; }
.mlist b::before { content: "£"; font-size: .78em; margin-right: 1px; }
.mlist--tight li { padding: 9px 0; }
.mlist--tight li > span { font-size: 14.5px; font-weight: 400; }
.diet { font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: #966116; margin-left: 9px; }

/* Long lists run in two columns across a full-width tile. */
.t-mains .mlist, .t-su-also .mlist { columns: 2; column-gap: clamp(32px, 4vw, 64px); }
.t-nibbles .mlist small, .t-puddings .mlist small { font-size: 13.5px; }

.wines { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 54px); }
.wines .menu-h--sub { margin-top: 0; }

.ask { color: var(--claret); margin-top: 6px; }
.arrow--light { color: #fff; }
.arrow--light:hover { color: #f0c3a8; }

/* --- Loyalty Club ---------------------------------------------------- */

.t-lc-head  { grid-column: 1 / 13;  grid-row: 1 / 2; }
.t-lc-a     { grid-column: 1 / 4;   grid-row: 2 / 3; }
.t-lc-b     { grid-column: 4 / 7;   grid-row: 2 / 3; }
.t-lc-c     { grid-column: 7 / 10;  grid-row: 2 / 3; }
.t-lc-d     { grid-column: 10 / 13; grid-row: 2 / 3; }
.t-lc-join  { grid-column: 1 / 8;   grid-row: 1 / 2; min-height: 420px; }
.t-lc-img   { grid-column: 8 / 13;  grid-row: 1 / 2; }
.t-lc-terms { grid-column: 1 / 13;  grid-row: 1 / 2; }
.t-lc-head h2 { margin: 0; }
.t-lc-terms p { max-width: 62em; margin-bottom: 0; }

/* Numbered steps: the order matters (join, earn, collect, spend). */
.step { justify-content: flex-start; }
.step__n {
	width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
	font-size: 13px; font-weight: 600; border: 1px solid var(--line); color: var(--ink-2);
	margin: 0 0 26px;
}
.tile--claret .step__n { border-color: rgba(255,255,255,.4); color: #fff; }
.step .tile__label { margin: 12px 0 8px; }
.step p:last-child { margin: 0; font-size: 16px; }
.tile--claret.step p:last-child { color: #f6e9e2; }

/* --- Find Us -------------------------------------------------------------- */

.t-fu-address { grid-column: 1 / 4;   grid-row: 1 / 2; }
.t-fu-phone   { grid-column: 4 / 7;   grid-row: 1 / 2; }
.t-fu-email   { grid-column: 7 / 10;  grid-row: 1 / 2; }
.t-fu-book    { grid-column: 10 / 13; grid-row: 1 / 2; }
.t-fu-hours   { grid-column: 1 / 7;   grid-row: 1 / 2; }
.t-fu-door    { grid-column: 7 / 13;  grid-row: 1 / 2; }
.t-fu-map     { grid-column: 1 / 13;  grid-row: 1 / 2; min-height: 460px; background: var(--sand); }
.t-fu-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.contact { justify-content: flex-start; min-height: 230px; }
.contact .tile__label { margin-bottom: 12px; }
.contact__big { display: block; font-family: var(--display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; text-decoration: none; color: var(--ink); margin: 0 0 8px; }
a.contact__big:hover { color: var(--claret); }
/* Sans, not Cinzel: Cinzel has no lower case, and an address in capitals
   reads as if it must be typed that way. */
.contact__big--email { font-family: var(--sans); font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; overflow-wrap: anywhere; }
.contact .muted { font-size: 16px; }
.contact .arrow { margin-top: auto; }
.tile--claret .contact__big { color: #fff; }
.t-fu-book .row { margin-top: auto; }

.state--lg { font-size: 14px; margin: -.2em 0 1.4em; }
.hours--lg { font-size: 15.5px; }
.hours--lg th, .hours--lg td { padding: 12px 22px 12px 0; }
.hours--lg td:first-child { font-weight: 500; color: var(--ink); }
.hours--lg tr[data-today] td { color: var(--claret); }

/* --- What's On ------------------------------------------------------------ */

.t-wo-head        { grid-column: 1 / 13;  grid-row: 1 / 2; }
.t-wo-tue         { grid-column: 1 / 5;   grid-row: 2 / 3; }
.t-wo-ewfl        { grid-column: 5 / 9;   grid-row: 2 / 3; }
.t-wo-sun         { grid-column: 9 / 13;  grid-row: 2 / 3; }
.t-wo-sun-img     { grid-column: 1 / 13;  grid-row: 3 / 4; min-height: 340px !important; }
.t-wo-sun-img > img { object-position: center 45%; }
.t-wo-coming-head { grid-column: 1 / 5;   grid-row: 1 / 2; }
.t-wo-quiz        { grid-column: 5 / 8;   grid-row: 1 / 2; }
.t-wo-music       { grid-column: 8 / 11;  grid-row: 1 / 2; }
.t-wo-brew        { grid-column: 11 / 13; grid-row: 1 / 2; }
.t-wo-on-img      { grid-column: 1 / 7;   grid-row: 1 / 2; min-height: 420px !important; }
.t-wo-on-copy     { grid-column: 7 / 13;  grid-row: 1 / 2; }
.t-wo-follow      { grid-column: 1 / 9;   grid-row: 1 / 2; }
.t-wo-call        { grid-column: 9 / 13;  grid-row: 1 / 2; justify-content: center; }
.t-wo-head h2     { margin-bottom: .3em; }
.t-wo-head p:last-child { margin: 0; }

.event { justify-content: flex-start; }
.event h3 { font-size: 21px; }   /* same as every other card title */
.event__when { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--claret); margin: 0 0 12px; }
.tile--claret .event__when { color: #f0c3a8; }
.event p:not(.event__when) { font-size: 16px; }
.event .arrow { margin-top: auto; }
.event .offer__times { margin-top: 4px; }
/* Planned, but not yet dated: a dashed edge says "pencilled in". */
.event--tbc { border: 1px dashed var(--line-strong, #d6cfb8) !important; background: transparent; justify-content: flex-end; min-height: 200px; }
.event--tbc .event__when { color: var(--ink-3); }

/* --- 404 ----------------------------------------------------------------- */

.hero--404 { min-height: calc(100vh - 80px); padding-bottom: var(--sec); }
.err-code { font-family: var(--display); font-size: clamp(80px, 11vw, 150px); line-height: .9; color: #e9bf83; margin: 0 0 .2em; }
.err-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.25); }
.hero .err-links a { color: #fff; text-decoration: none; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.hero .err-links a:hover { color: #e9bf83; }
.err-call { font-size: 14px; color: rgba(251,246,236,.85); margin-top: 18px; }
.hero .err-call a { color: #e9bf83; }

/* --- Christmas ------------------------------------------------------------ */

.t-xd-head     { grid-column: 1 / 5;   grid-row: 1 / 2; }
.t-xd-starters { grid-column: 5 / 13;  grid-row: 1 / 2; }
.t-xd-mains    { grid-column: 1 / 13;  grid-row: 2 / 3; }
.t-xd-desserts { grid-column: 1 / 7;   grid-row: 3 / 4; }
.t-xd-notes    { grid-column: 7 / 13;  grid-row: 3 / 4; }

.t-fs-head   { grid-column: 1 / 5;   grid-row: 1 / 2; }
.t-fs-start  { grid-column: 5 / 13;  grid-row: 1 / 2; }
.t-fs-follow { grid-column: 1 / 13;  grid-row: 2 / 3; }
.t-fs-finish { grid-column: 1 / 8;   grid-row: 3 / 4; }
.t-fs-notes  { grid-column: 8 / 13;  grid-row: 3 / 4; }

.mlist--cols { columns: 2; column-gap: clamp(32px, 4vw, 64px); }
.mlist--cols li:first-child { padding-top: 0; }

.xmas-price { display: flex; flex-wrap: wrap; gap: 6px 26px; font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); margin: .2em 0 .8em; color: #f6e9e2; }
.xmas-price strong { font-weight: 400; color: #fff; font-size: 1.35em; }
.xmas-fine { font-size: 13.5px; color: #f0cfc4; margin: 0; }
.xmas-finish { font-family: var(--display); font-size: clamp(19px, 1.6vw, 23px); margin: 0 0 1.2em; }
.key--stack { padding-top: 16px; border-top: 1px solid var(--line); }
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { position: relative; padding: 10px 0 10px 20px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.notes li:last-child { border-bottom: 1px solid var(--line); }
.notes li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--claret); }

/* =========================================================================
   Responsive (inner pages) — same steps as site.css: 1024px and 640px.
   ========================================================================= */

@media (max-width: 1024px) {
	/* Chapter menus scroll sideways rather than wrapping onto two lines. */
	.chapters__inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 26px; }
	.chapters__inner::-webkit-scrollbar { display: none; }
	.chapters a { white-space: nowrap; }

	.memorial { grid-template-columns: 1fr; }
	.memorial__figure { position: static; }
	.memorial__figure img { aspect-ratio: 4 / 3; object-position: center 30%; }

	.t-os-photo { min-height: 380px !important; }
	#parish-brewery { grid-template-rows: none; }
	.t-pb-img, .t-br-img, .t-wo-sun-img { min-height: 320px !important; }
	.film video { min-height: 280px; }
	.t-fu-map { min-height: 380px; }
	.contact { min-height: 0; }
	.event--tbc { min-height: 150px; }
	.hero--404 { min-height: min(88vh, 760px); }

	/* The odd one out in a set of three would sit alone with a gap beside
	   it in a two-column grid, so it takes the full row instead. The story
	   links read as banners anyway, and the map wants the width. */
	.t-wo-sun, .t-wo-brew, .t-wo-call, .t-fu-map, .story-link { grid-column: 1 / -1 !important; }
}

@media (max-width: 640px) {
	.hero--page { padding-bottom: 48px; }
	.hero--page h1 { font-size: clamp(28px, 8vw, 38px); }
	.chapters a { padding: 13px 0 11px; font-size: 11px; }

	.t-os-photo { min-height: 300px !important; }
	.t-pb-img, .t-br-img, .t-wo-sun-img, .t-mi-a, .t-mi-b, .t-mi-c, .t-wo-on-img { min-height: 240px !important; }
	.film video { min-height: 210px; }
	.t-fu-map { min-height: 320px; }

	.t-mains .mlist, .t-su-also .mlist { columns: 1; }
	.mlist--cols { columns: 1; }
	.wines { grid-template-columns: 1fr; gap: 30px; }
	.mlist li > span { font-size: 15.5px; }

	.memorial__text { padding: 26px 22px; }
	.memorial__text h3 { font-size: 21px; }

	.story-link { min-height: 130px; }
	.quote-tile p, .tile--claret blockquote { font-size: 21px; }
	.lede { font-size: 17.5px; }

	.hero--404 { min-height: 0; padding-bottom: 56px; }
	.err-links { gap: 10px 20px; }
}