/* The typefaces are served from this site. They used to come from Google, which
   cost every page two DNS lookups, two TLS handshakes and a render-blocking
   stylesheet from a third party before a single line of text could be drawn.
   These are the variable fonts with the weight axis alone: the optical size
   axis doubles the file and its effect is invisible at the sizes used here.
   font-display: swap so the words appear immediately in the fallback and
   change over when the face arrives. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/newsreader-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/newsreader-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/inter-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/inter-italic.woff2") format("woff2-variations");
}

/* Wheresnik · quiet, editorial, photographic.
   Palette: paper, ink, navy (from the wordmark). One accent only. */

:root {
  --paper: #f6f3ee;
  --paper-2: #ebe6dd;
  --ink: #1b1b1b;
  --ink-2: #4a4a48;
  --ink-3: #8a8884;
  --navy: #152d52;
  --navy-2: #0f2140;
  --rule: rgba(27, 27, 27, 0.14);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1280px;
  /* The reading column. Every page that runs text beside photographs uses this
     width, so the words and the pictures share both edges. */
  --read: 980px;
  --gutter: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* A full-bleed band is sized in viewport units, and on a desktop 100vw counts
   the vertical scrollbar that the page itself put there, so the document ends
   up a dozen pixels wider than the window and a horizontal scrollbar appears.
   clip rules that out without the side effects that overflow hidden has. */
body {
  overflow-x: clip;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p a, .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
p a:hover, .prose a:hover { text-decoration-color: var(--navy); }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(34px, 4.6vw, 60px); }
h2 { font-size: clamp(26px, 3vw, 38px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
.it { font-family: var(--serif); font-style: italic; }
.eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.muted { color: var(--ink-2); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 62ch; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter);
  max-width: var(--max); margin: 0 auto;
}
.brand img { height: 44px; width: auto; }
.site-nav { margin-left: auto; display: flex; gap: clamp(14px, 2vw, 28px); align-items: center; font-size: 13px; letter-spacing: 0.02em; }
.site-nav a { color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.nav-cta { color: var(--paper); background: var(--navy); padding: 9px 16px; border-radius: 999px; border: 0; font-size: 13px; white-space: nowrap; }
.nav-cta:hover { background: var(--navy-2); color: var(--paper); }

/* On a phone the sections move to a second line under the wordmark, the way a
   masthead carries them. Everything stays visible and reachable with one tap:
   no menu to open, and nothing hidden behind an icon. The booking button keeps
   the first line, beside the name. */
@media (max-width: 820px) {
  .site-header { flex-wrap: wrap; gap: 0 14px; padding: 14px var(--gutter) 0; }
  .brand img { height: 36px; }
  .nav-cta { margin-left: auto; padding: 8px 15px; }
  .site-nav {
    order: 3; width: 100%; margin: 13px 0 0; padding-top: 2px;
    flex-wrap: wrap; gap: 0 18px;
    border-top: 1px solid var(--rule);
  }
  .site-nav a { padding: 11px 0; }
  .site-nav a.is-active { border-bottom-color: var(--navy); color: var(--ink); }
}
@media (max-width: 360px) {
  .site-nav { gap: 0 13px; font-size: 12.5px; }
}

/* Hero: the business-card device. A full photo cut by a paper band carrying the name. */
.hero { position: relative; min-height: 72vh; display: grid; align-items: center; color: var(--paper); overflow: hidden; }
.hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.band { position: relative; z-index: 1; background: var(--paper); color: var(--ink); text-align: center; padding: clamp(22px, 3vw, 34px) var(--gutter); width: 100%; }
.band-name { margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 0.38em; text-transform: uppercase; text-indent: 0.38em; }
.band-sub { margin: 6px 0 0; font-size: clamp(12px, 1.1vw, 14px); letter-spacing: 0.06em; color: var(--ink-2); }
.hook-line { padding-block: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 40px); }
.hook-line h1 { max-width: 24ch; font-size: clamp(30px, 3.6vw, 48px); }
.hook-line .line2 { display: block; font-style: italic; font-weight: 300; color: var(--ink-2); }
.hook-line .hero-sub { color: var(--ink-2); }
.hero-inner { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(40px, 6vw, 80px); max-width: var(--max); margin: 0 auto; width: 100%; }
.hero h1 { color: var(--paper); max-width: 22ch; font-size: clamp(32px, 4vw, 54px); }
.hero h1 .line2 { display: block; font-style: italic; font-weight: 300; }
.hero-sub { margin: 22px 0 0; font-size: 14px; color: rgba(246,243,238,0.85); display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.hero-caption { position: absolute; right: var(--gutter); bottom: 18px; z-index: 1; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246,243,238,0.85); text-shadow: 0 1px 8px rgba(0,0,0,.35); }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font-size: 13px; letter-spacing: 0.02em; border: 1px solid currentColor; transition: background .2s, color .2s; }
.btn-light { color: var(--paper); border-color: rgba(246,243,238,0.7); }
.btn-light:hover { background: var(--paper); color: var(--navy); }
.btn-navy { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-2); }
.btn-ghost { color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* Sections */
.section { padding-block: clamp(56px, 8vw, 110px); }
.section-tight { padding-block: clamp(36px, 5vw, 64px); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head .more { font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 2px; white-space: nowrap; }
.section-head .more:hover { color: var(--ink); border-color: var(--ink); }

/* Floors grid: edge to edge, no gaps */
.floors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.floors a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.floors img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.floors a:hover img { transform: scale(1.04); }
.floors .floor-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px 12px;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(21,45,82,0) 0%, rgba(21,45,82,0.72) 55%, rgba(21,45,82,0.9) 100%);
  display: flex; flex-direction: column; gap: 2px;
}
.floors .floor-cap .h { font-family: var(--serif); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.1; }
.floors .floor-cap .p { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; opacity: .75; }
@media (max-width: 1100px) { .floors { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .floors { grid-template-columns: repeat(2, 1fr); } .floors .floor-cap { padding: 10px 10px 8px; } .floors .floor-cap .p { font-size: 9px; } }

/* Marquee variant */
.marquee { overflow: hidden; position: relative; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 90s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track a { display: block; width: clamp(160px, 18vw, 260px); aspect-ratio: 1; flex: none; overflow: hidden; }
.marquee-track img { width: 100%; height: 100%; object-fit: cover; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Three doors */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.door { display: block; }
.door .thumb { aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2); margin-bottom: 16px; }
.door .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.door:hover .thumb img { transform: scale(1.03); }
.door h3 { margin-bottom: 8px; }
.door p { margin: 0; color: var(--ink-2); font-size: 14px; }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } .door .thumb { aspect-ratio: 16/10; } }

/* Hook band */
.hook { background: var(--navy); color: var(--paper); }
.hook .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hook h2 { color: var(--paper); font-size: clamp(28px, 3.4vw, 44px); max-width: 22ch; }
.hook h2 em { font-weight: 300; }
.hook p { color: rgba(246,243,238,0.8); margin: 0 0 20px; }
.hook .steps { list-style: none; margin: 0; padding: 0; counter-reset: s; font-size: 14px; color: rgba(246,243,238,0.9); }
.hook .steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(246,243,238,0.18); }
.hook .steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); font-size: 18px; opacity: .6; }
@media (max-width: 820px) { .hook .wrap { grid-template-columns: 1fr; } }

/* Partners row */
.partners { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.partners .wrap { display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: center; justify-content: center; padding-top: 22px; padding-bottom: 22px; }
.partners a:hover span { color: var(--ink); border-bottom: 1px solid var(--rule); }
.partners span { font-family: var(--serif); font-size: 15px; color: var(--ink-2); letter-spacing: 0.01em; white-space: nowrap; }
.partners .eyebrow { margin: 0; width: 100%; text-align: center; }

/* Inspection page (also used by programme pages) */
/* The opening has to fit on the screen. The photograph is a portrait sitting in
   a half-width column, so left to itself it stands taller than the window: at
   1920 the column is 960 wide and a 3:4 frame makes the hero 1280 tall, and
   the reader starts the piece already scrolling.

   The height has to be taken off the photograph, never off the section. A
   max-height on the section caps its box and nothing else: the photograph goes
   on drawing itself at full height, out of the bottom of a box that no longer
   reaches it, and lands on top of the opening paragraph. Holding the picture
   absolutely inside the cell keeps it out of the height calculation
   altogether, so the cell is whatever the row is, and object-fit crops the
   picture to it. */
.insp-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.insp-hero .photo { background: var(--paper-2); position: relative; overflow: hidden; max-height: 88vh; }
.insp-hero .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insp-hero .intro { padding: clamp(32px, 5vw, 72px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.insp-hero h1 { max-width: 14ch; }
.insp-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.ct-plate { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; padding: 13px 18px 13px 13px; max-width: 46ch; background: var(--navy); color: var(--paper); transition: background .2s; }
.ct-plate:hover { background: var(--navy-2); }
.ct-plate-mark { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; background: var(--paper); color: var(--navy); display: grid; place-items: center; font-family: var(--serif); font-size: 17px; line-height: 1; }
.ct-plate-body { display: block; }
.ct-plate-line { display: block; font-size: 14px; line-height: 1.3; }
.ct-plate-note { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: rgba(246, 243, 238, 0.7); }
.ct-plate-arrow { margin-left: auto; padding-left: 8px; transition: transform .2s; }
.ct-plate:hover .ct-plate-arrow { transform: translateX(3px); }
@media (max-width: 420px) { .ct-plate { padding: 12px; gap: 11px; } .ct-plate-mark { width: 30px; height: 30px; font-size: 15px; } }

.insp-dek { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-2); margin: 26px 0 0; max-width: 40ch; }
@media (max-width: 820px) { .insp-hero { grid-template-columns: 1fr; } .insp-hero .photo { aspect-ratio: 4/3; } }

.prose { font-family: var(--serif); font-size: 19px; line-height: 1.6; max-width: 64ch; }

/* The body of an inspection.

   The text and the photographs start on the same vertical line. Centring the
   text column instead left it floating in the middle of the page while every
   row of photographs stayed left, which is a disagreement the eye picks up
   immediately. The body also runs narrower than the rest of the site, so the
   gap to the right of a line of text reads as a margin and not as a hole, and
   the text grows with the window rather than sitting at one size on every
   screen from a laptop to a large monitor.

   A band is pulled out to the window edge by a negative margin measured from
   its container, so it has to be told the body's own width. Measuring it from
   the site-wide one put every band a few hundred pixels off and opened a
   horizontal scrollbar. */
.insp-body {
  max-width: var(--read);
  padding-top: clamp(44px, 5vw, 80px);
}
.insp-body .prose, .page-body .prose { max-width: none; font-size: 20px; line-height: 1.72; }
.insp-body .prose > p, .page-body .prose > p,
.insp-body .prose > h2, .page-body .prose > h2,
.insp-body .prose > h3, .page-body .prose > h3,
.insp-body .prose > ul, .page-body .prose > ul,
.insp-body .prose > ol, .page-body .prose > ol,
.insp-body .prose > blockquote,
.page-body .prose > blockquote { max-width: none; margin-left: 0; margin-right: 0; }
/* Both edges of a paragraph line up with both edges of the photographs above
   it. Hyphenation comes with that: justified text without it opens rivers of
   white down the column. Headings stay ragged, since a justified heading of
   three words pulls its letters apart. */
.insp-body .prose > p, .page-body .prose > p,
.insp-body .prose > ul, .page-body .prose > ul,
.insp-body .prose > ol, .page-body .prose > ol { text-align: justify; hyphens: auto; }
.insp-body .prose > h2, .page-body .prose > h2,
.insp-body .prose > h3, .page-body .prose > h3 { text-align: left; hyphens: none; }

/* A page head sits over the same column as the body under it, and its standfirst
   runs the full width of that column. Held at 50ch it broke early and left the
   rest of the line empty, which is what Nik saw on Independents. */
.page-body, .page-head { max-width: var(--read); }
.page-head .dek { max-width: none; }
/* Redundant inside the reading column, and it was fighting it. */
.page-body .measure, .insp-body .measure { max-width: none; }
/* The drop cap overshoots its line box, so without this it touches the hero. */
.insp-body .prose > p:first-of-type { margin-top: .4em; }
.insp-body .ph-row { width: 100%; margin-inline: 0; }
/* The one photograph that closes a piece stays centred. Pulled left like
   everything else it sat 480px wide in a 980px column with a hole beside it,
   and it is the only element on the page that is deliberately alone. */
.insp-body .ph { max-width: 480px; margin-inline: auto; }
.insp-body .ph-band {
  margin-left: calc(-1 * (var(--gutter) + (100vw - min(100vw, var(--read))) / 2));
}
/* The photograph runs to the window edge; its caption belongs on the same line
   as the text, so it is pushed back in by exactly what the margin above pulled
   the figure out by. This has to be a margin. Everything here is border-box,
   so a padding would be counted inside the caption's own max-width and would
   squeeze the words into a column one or two of them wide, which is what
   happened the first time. */
.insp-body .ph-band figcaption {
  padding: 0;
  margin-left: calc(var(--gutter) + (100vw - min(100vw, var(--read))) / 2);
  max-width: calc(min(100vw, var(--read)) - 2 * var(--gutter));
}
.prose p { margin: 0 0 1.2em; }
.prose p:first-of-type::first-letter { font-size: 3.2em; float: left; line-height: .85; padding: 6px 10px 0 0; color: var(--navy); }
.prose h2 { margin: 1.6em 0 .6em; font-size: 28px; }

.five { background: var(--paper-2); padding: clamp(28px, 4vw, 48px); margin: 48px 0; }
.five ol { list-style: none; margin: 0; padding: 0; counter-reset: f; }
.five li { counter-increment: f; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.five li:first-of-type { border-top: 0; }
.five li::before { content: counter(f); font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--navy); }
.five li strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; margin-bottom: 4px; }
.five .more { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-2); }

/* The practical questions, under the five. Kept open on the page: a reader
   skims them and a machine can lift one, which a collapsed panel prevents. */
.asked { max-width: 68ch; margin: 56px 0; }
.asked h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 6px 0 24px; }
.asked dl { margin: 0; border-top: 1px solid var(--rule); }
.asked-item { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.asked dt { font-family: var(--serif); font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.asked dd { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.asked dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.asked-foot { margin: 20px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 600px) {
  .asked dt { font-size: 18px; }
  .asked dd { font-size: 16px; }
}

.book-box { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 48px 0; }
.book-box > div { background: var(--paper); padding: clamp(22px, 3vw, 36px); }
.book-box h3 { margin-bottom: 10px; }
.book-box p { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; }
@media (max-width: 760px) { .book-box { grid-template-columns: 1fr; } }

/* Photographs inside an inspection: a plate in the text column, a pair that
   runs past it, and a band edge to edge. Everything is shot 3:4. */
.ph, .ph-row, .ph-band { margin: 3.4em 0; }
.ph img { width: 100%; max-width: 480px; }
.ph figcaption, .ph-row figcaption, .ph-band figcaption { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-top: 10px; max-width: 560px; }

/* A portrait shot 3:4 grows fast. Two of them across 1160px stand 750px tall,
   which on a large screen means one pair fills the window and the piece reads
   as a slideshow. The widths below are the heights the page can carry. */
.ph-row { width: min(calc(100vw - 2 * var(--gutter)), 1160px); display: grid; gap: 26px; }
.ph-row-2 { grid-template-columns: repeat(2, 1fr); width: min(calc(100vw - 2 * var(--gutter)), 880px); }
.ph-row-3 { grid-template-columns: repeat(3, 1fr); }
.ph-row-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ph-row figure { margin: 0; }
.ph-row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ph-row figcaption { margin-top: 9px; }

.ph-band { width: 100vw; margin-left: calc(-1 * (var(--gutter) + (100vw - min(100vw, var(--max))) / 2)); }
.ph-band img { width: 100%; aspect-ratio: 3 / 2; max-height: min(74vh, 820px); object-fit: cover; }
.ph-band figcaption { padding: 0 var(--gutter); max-width: 62ch; }

@media (max-width: 760px) {
  .ph-band img { aspect-ratio: 4 / 3; max-height: none; }
  .ph-row { gap: 18px; }
  .ph-row-3, .ph-row-4 { grid-template-columns: repeat(2, 1fr); }
  /* Three across becomes two across, which leaves the third photograph alone
     in the left half with a hole beside it. It takes the whole width instead. */
  .ph-row-3 figure:last-child { grid-column: 1 / -1; }
  .ph-row-3 figure:last-child img { aspect-ratio: 4 / 3; }
}

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 48px 0; }
.gallery:empty { display: none; }
.gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; }
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* Generic page */
/* Vertical rhythm only. These classes sit on the same element as .wrap, and a
   padding shorthand here sets the left and right to zero as well, which wiped
   out the gutter .wrap gives: the heading and the photo grid under it ran to
   the window edge on a phone and sat 56px outside the text column on a large
   screen. padding-block leaves the horizontal padding where it was. */
.page-head { padding-block: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 36px); }
.page-head h1 { max-width: 20ch; }
.page-head .dek { font-family: var(--serif); font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); max-width: 50ch; margin: 18px 0 0; }

/* Interstitial */
.interstitial { min-height: 80vh; display: grid; place-items: center; text-align: center; }
.interstitial .card { max-width: 48ch; padding: 0 var(--gutter); }
.interstitial h1 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 14px; }
.interstitial p { color: var(--ink-2); }
.interstitial .count { font-family: var(--serif); font-size: 15px; color: var(--ink-3); margin-top: 28px; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); margin-top: clamp(56px, 8vw, 110px); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 48px var(--gutter) 24px; display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1.6fr; gap: 32px; font-size: 13px; color: var(--ink-2); }
.footer-col > a { display: block; padding: 3px 0; color: var(--ink-2); }
.footer-col a:hover { color: var(--ink); }
.footer-col p a { text-decoration: underline; text-underline-offset: 3px; }
.footer-col p { margin: 0 0 10px; }
.footer-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.footer-lede { font-family: var(--serif); font-size: 17px; color: var(--ink); max-width: 28ch; }
.footer-mark { margin-bottom: 14px; }
.footer-legal { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 28px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-inner { grid-template-columns: 1fr; } }

/* Destinations as volumes on a shelf.
   The cover is the brand device off Nik's cards: a photograph cut straight
   across by a paper band carrying the wordmark, the volume and the name. The
   destination's colour is kept to a narrow spine down the left edge, because
   four saturated fields side by side fought each other and fought the paper.
   Three across, not five: inside a 980px column five covers come out 145px
   wide, and a photograph at that size is mush, which is what Nik saw on
   22 October 2026. */
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 38px); align-items: start; }
.volume { display: block; }
.cover {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(21,45,82,.10), 0 10px 24px -14px rgba(21,45,82,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
.volume:hover .cover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(21,45,82,.12), 0 18px 34px -16px rgba(21,45,82,.45); }
/* The plate is square, which is the crop the floors were cut to and the only
   one that keeps a pair of shoes whole. A landscape floor forced into a 3:4
   cover loses a shoe off the side, which is what the first attempt did. */
.cover > img { position: absolute; left: 0; right: 0; top: 0; width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* The spine. A book is identified by its edge before its face. */
.cover::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 11px; z-index: 2;
  background: var(--tone, var(--navy));
  box-shadow: inset -1px 0 0 rgba(0,0,0,.28), inset 2px 0 0 rgba(255,255,255,.14);
}
.vol-band {
  /* The plate is square on a 3:4 cover, so the band wants the bottom quarter.
     It is anchored to the bottom and sized by its content, never pinned at
     75%: a two line name such as North Africa and Arabia needs more than a
     quarter, and pinned it pushed the foot line straight out of the band. */
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 25%; z-index: 2;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 12px 12px 22px; text-align: center;
}
.vol-eyebrow { margin: 0 0 7px; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }
.vol-title { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.04; margin: 0 0 7px; color: var(--ink); }
.vol-foot { margin: 0; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.vol-line { margin: 14px 4px 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 760px) { .shelf { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 460px) { .shelf { grid-template-columns: 1fr; } .vol-line { margin-bottom: 8px; } }

/* Imprint: typographic grid replacing the partner-logos row until the official kit arrives */
.imprint { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(40px, 5vw, 72px) 0; }
.imprint .eyebrow { text-align: center; margin: 0 0 clamp(24px, 3vw, 40px); }
.imprint-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.imprint-cell { background: var(--paper); padding: clamp(22px, 2.5vw, 32px) 18px; text-align: center; display: flex; flex-direction: column; gap: 6px; min-height: 110px; justify-content: center; transition: background .2s; }
.imprint-cell:hover { background: var(--paper-2); }
.imprint-name { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 22px); color: var(--ink); line-height: 1.1; letter-spacing: -0.005em; }
.imprint-sub { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.imprint-more .imprint-name { color: var(--ink-2); font-style: italic; }
@media (max-width: 1000px) { .imprint-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .imprint-grid { grid-template-columns: repeat(2, 1fr); } .imprint-cell { min-height: 90px; } }

/* Preferred partners: slim row on paper, small dark marks */
.partners-row { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: clamp(28px, 3.5vw, 44px); }
.partners-row .eyebrow { text-align: center; margin: 0 0 clamp(20px, 2.5vw, 32px); }
.partner-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(36px, 6vw, 88px); row-gap: 24px; }
.partner-logos a { opacity: .55; transition: opacity .25s; display: flex; align-items: center; }
.partner-logos a:hover { opacity: 1; }
.partner-logos img { height: clamp(22px, 1.8vw, 28px); width: auto; display: block; }
.partner-logos .all { opacity: .55; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--rule); padding: 4px 0; }
.partner-logos .all:hover { opacity: 1; border-color: var(--ink); }
.partner-logos .all .serif { font-family: var(--serif); font-style: italic; }

/* Programme covers: the hotel photograph carries the name --------------- */
.prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.prog-card {
  position: relative; display: block; overflow: hidden;
  background: var(--ink); aspect-ratio: 4 / 5;
}
.prog-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block;
  transition: transform .7s cubic-bezier(.2, .6, .2, 1);
}
.prog-card:hover img { transform: scale(1.035); }
.prog-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,12,20,.52) 0%, rgba(8,12,20,.40) 42%, rgba(8,12,20,.74) 100%);
}
/* A programme whose photograph has not arrived yet, and the closing card. */
.prog-card.is-plain { background: var(--navy); }
.prog-card.is-plain::after { background: none; box-shadow: inset 0 0 0 1px rgba(246,243,238,.12); }
.prog-card.is-plain:hover { background: var(--navy-2); }
.prog-card.is-more .prog-name { font-size: clamp(20px, 1.8vw, 26px); max-width: 16ch; }
.prog-card.is-more .prog-line { max-width: 30ch; }
.prog-label {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(18px, 2.4vw, 30px); color: var(--paper);
}
.prog-card:not(.is-plain) .prog-label { text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.prog-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; margin-bottom: 15px; }
.prog-name {
  font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: .005em;
  font-size: clamp(23px, 2.1vw, 31px); max-width: 13ch;
}
.prog-rule { width: 34px; height: 1px; background: rgba(246,243,238,.45); margin: 18px 0 15px; }
.prog-line { font-size: 12.5px; line-height: 1.5; color: rgba(246,243,238,.9); max-width: 26ch; }
@media (max-width: 980px) { .prog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prog-grid { grid-template-columns: 1fr; } .prog-card { aspect-ratio: 3 / 2; } }

/* The note that reassures about loyalty programmes ---------------------- */
.note-direct {
  display: flex; gap: 14px; align-items: flex-start; max-width: 76ch;
  border: 1px solid var(--rule); border-left: 2px solid var(--navy);
  padding: clamp(16px, 2vw, 22px); margin: clamp(30px, 4vw, 48px) 0;
}
.note-direct svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--navy); margin-top: 2px; }
.note-direct p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.note-direct strong { color: var(--ink); font-weight: 600; }

/* Why it is worth going through me ------------------------------------- */
.reasons {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin: clamp(24px, 3vw, 40px) 0 0;
}
.reason { background: var(--paper); padding: clamp(24px, 3vw, 36px); }
.reason-icon { width: 34px; height: 34px; color: var(--navy); margin-bottom: 18px; }
.reason h3 { font-size: clamp(19px, 1.8vw, 24px); margin-bottom: 11px; max-width: 26ch; }
.reason p { margin: 0; font-size: 14px; line-height: 1.68; color: var(--ink-2); }
@media (max-width: 720px) { .reasons { grid-template-columns: 1fr; } }

/* The agency behind the booking ---------------------------------------- */
.ct-affil {
  text-align: center; background: var(--paper-2); border: 1px solid var(--rule);
  padding: clamp(30px, 4vw, 54px) clamp(20px, 4vw, 56px);
  margin: clamp(24px, 4vw, 48px) 0;
}
.ct-affil .eyebrow { margin-bottom: clamp(20px, 2.6vw, 30px); }
.ct-lockup {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 24px); flex-wrap: wrap;
}
.ct-lockup-mark { width: clamp(34px, 3.4vw, 44px); height: auto; }
.ct-lockup-join {
  font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-3);
}
.ct-lockup-logo {
  width: clamp(102px, 11vw, 132px); height: auto;
}
.ct-lockup-name {
  font-family: var(--serif); font-size: clamp(25px, 2.6vw, 34px); line-height: 1.1; color: var(--ink);
}
.ct-affil-since {
  margin: 16px 0 0; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.ct-affil-body {
  margin: clamp(20px, 2.6vw, 30px) auto 0; max-width: 62ch;
  font-size: 14px; line-height: 1.7; color: var(--ink-2); text-align: left;
}
@media (max-width: 560px) { .ct-affil-body { text-align: left; } }

/* A run of questions and answers takes no drop cap. */
/* A page in several prose blocks would otherwise start a drop cap in each
   one. The piece gets a single drop cap at the top; every block after it
   carries .plain. */
.prose.qa p:first-of-type::first-letter,
.prose.plain p:first-of-type::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; line-height: inherit; }
.prose.qa p { margin: 0 0 1.1em; }
.prose.qa strong { font-weight: 600; }

/* Four doors instead of three, once the independents have a section. */
.doors-4 { grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
.doors-4 .door h3 { font-size: clamp(18px, 1.5vw, 21px); }
.doors-4 .door p { font-size: 13px; }
@media (max-width: 1080px) { .doors-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .doors-4 { grid-template-columns: 1fr; } }

/* The opening band carries the line alone. The name is already in the header,
   and on the business card the band had no header above it to answer to. */
.band.band-line { padding: clamp(14px, 1.6vw, 19px) var(--gutter); }
.band.band-line .band-sub {
  margin: 0; color: var(--ink);
  font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.26em;
  text-transform: uppercase; text-indent: 0.26em;
}

/* A long place name has to fit the phone, so the caption wraps inside the gutters. */
.hero-caption { max-width: calc(100% - 2 * var(--gutter)); text-align: right; line-height: 1.4; }
@media (max-width: 480px) { .hero-caption { font-size: 10px; letter-spacing: 0.06em; } }

/* Independents: the photographs on their own, before the inspections exist. */
.section-tight { padding-top: clamp(34px, 5vw, 64px); }
.plates-head { margin-bottom: clamp(20px, 2.6vw, 30px); }
.plates {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 1.8vw, 26px);
}
.plate-item { margin: 0; width: calc((100% - 2 * clamp(12px, 1.8vw, 26px)) / 3); }
.plate-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--paper-2); }
.plate-item figcaption {
  margin-top: 9px; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.plates-foot {
  margin: clamp(22px, 3vw, 34px) 0 0; font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--ink-2); max-width: 54ch;
}
@media (max-width: 1000px) { .plate-item { width: calc((100% - clamp(12px, 1.8vw, 26px)) / 2); } }
@media (max-width: 600px) { .plate-item { width: 100%; } }

/* The enquiry form. The only route into Nik's inbox that works on a phone
   with no mail client configured, which is what a mailto: link quietly fails
   to do. The address stays visible beside it for anyone who prefers it. */
.enquiry { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); margin: clamp(40px, 6vw, 72px) 0; }
.enquiry-intro h2 { margin: 6px 0 14px; }
.enquiry-intro p { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.enquiry-direct { margin-top: 18px; font-size: 14px; }
.enquiry-direct a { border-bottom: 1px solid var(--rule); }
.enquiry-form .field { margin-bottom: 16px; }
.enquiry-form label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.enquiry-form label .opt { text-transform: none; letter-spacing: 0; color: var(--ink-3); font-size: 11px; }
.enquiry-form input, .enquiry-form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 2px;
  padding: 11px 12px; transition: border-color .15s ease;
}
.enquiry-form textarea { resize: vertical; min-height: 128px; font-family: var(--serif); }
.enquiry-form input:focus, .enquiry-form textarea:focus { outline: 0; border-color: var(--navy); }
.enquiry-form button { margin-top: 6px; }
.enquiry-form button[disabled] { opacity: .55; }
.enquiry-note { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); min-height: 1.2em; }
.enquiry-note.is-bad { color: #8a2b2b; }
.enquiry-done { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) { .enquiry { grid-template-columns: 1fr; } }

/* The line under a programme's benefit list saying whose terms these are.
   The list is the agency's wording made precise; the credibility comes from
   saying so rather than from presenting it as Nik's own promise. */
.prog-source { max-width: 62ch; margin: 18px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* The programme card used to print the first benefit alone, which read as
   though breakfast were the whole offer. It now carries four of them as
   keywords and says how many there are in total, so the card is honest about
   its own abbreviation and the click is an invitation instead of a guess. */
.prog-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; margin-top: 2px; }
.prog-tags span { font-size: 13px; line-height: 1.5; opacity: .92; }
/* The separator trails its own word, so a wrapped line never opens on a dot. */
.prog-tags span:not(:last-child)::after { content: " ·"; margin-right: 7px; opacity: .6; }
.prog-more {
  margin-top: 12px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px; opacity: .85;
}
.prog-card:hover .prog-more { opacity: 1; }
.prog-card.is-more .prog-tags, .prog-card.is-more .prog-more { display: none; }
@media (max-width: 560px) { .prog-tags span { font-size: 12.5px; } }

/* A stay booked through Nik has one way in, so the foot box is one column.
   Why it works that way is explained once, on the Independents page. */
.book-box.is-single { grid-template-columns: 1fr; }

/* The enquiry button on About says the three languages the enquiries are
   answered in, which is what the page claims a few lines below it. The
   separators are dimmed so the button still reads as one control. */
.btn-tri { white-space: normal; text-align: center; }
.btn-tri .tri-sep { opacity: .45; margin: 0 2px; }
@media (max-width: 420px) { .btn-tri { font-size: 14px; } }

/* Two photographs closing a piece, side by side across the full text width.
   A single plate was 480px inside a 980px column, so once the text was
   justified to the photographs it sat left with a hole beside it. */
.ph-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin: 3.4em 0; }
.ph-pair figure { margin: 0; }
.ph-pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ph-pair figcaption { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-top: 9px; }
.insp-body .ph-pair { width: 100%; margin-inline: 0; }
@media (max-width: 760px) { .ph-pair { gap: 18px; } }