/* ---------- tokens ---------- */
:root {
  --ink: #232422;
  --ink-2: #474943;
  --ink-3: #4E504A;

  /* Fog: three barely-different pale greys, one per series; --tint follows the series in view */
  --t-table: #EFEFED;
  --t-people: #F4F4F3;
  --t-street: #E8E9E8;
  --d-table: #DCDDDA;
  --d-people: #E3E3E1;
  --d-street: #D3D5D2;
  --tint: var(--t-table);
  --tint-deep: var(--d-table);

  --on-ink: #FFFFFF;   /* text on the charcoal pill */
  --option-bg: #FFFFFF;
  --error: #9A3326;
  --ok: #3F5A47;

  --serif-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --edge: clamp(16px, 2.6vw, 40px);

  /* corners: soft and round everywhere except the photographs themselves */
  --r-pill: 999px;
  --r-card: 24px;
  --r-menu: 18px;
  --r-soft: 12px;
  --r-caption: 20px;
}
body[data-book="table"]    { --tint: var(--t-table);    --tint-deep: var(--d-table); }
body[data-book="people"]   { --tint: var(--t-people);   --tint-deep: var(--d-people); }
body[data-book="street"]   { --tint: var(--t-street);   --tint-deep: var(--d-street); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) transparent; }
@media (min-width: 761px) { html { scroll-snap-type: y proximity; } }
body {
  margin: 0;
  background: var(--tint);
  color: var(--ink);
  font: 400 1rem/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ink);
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; }
::selection { background: var(--tint-deep); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: var(--r-pill); font-family: var(--sans); }
.skip:focus { top: 12px; }

/* ---------- small pale chrome: tabs, pills, menu ---------- */
.tab {
  display: inline-block; margin: 0;
  background: var(--tint); color: var(--ink);
  transition: background-color .8s var(--ease-out);
  border-radius: var(--r-pill);
}
.tab--name, .tab--btn { height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
.tab--name {
  padding: 0 18px;
  font: 400 1.2rem/1 var(--serif-display); text-decoration: none; letter-spacing: .01em;
}
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--on-ink); text-decoration: none; border: 0; cursor: pointer;
  padding: 13px 18px 13px 20px; border-radius: var(--r-pill);
  font: 500 .95rem/1 var(--sans);
  transition: box-shadow .4s var(--ease-out), opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.pill svg { transition: transform .4s var(--ease-out); }
.pill:hover { box-shadow: 0 10px 24px -12px rgba(20, 22, 20, .6); }
.pill:hover svg { transform: translateX(3px); }

.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--edge);
  padding-top: calc(var(--edge) + env(safe-area-inset-top, 0px));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.top-left { display: flex; align-items: flex-start; gap: 6px; }
.tab--btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 0 16px; text-decoration: none;
  font: 500 .9rem/1 var(--sans);
}
.tab--btn::-webkit-details-marker { display: none; }
.tab--btn svg { transition: transform .4s var(--ease-out); }
.tab--book:hover svg { transform: translateX(3px); }
.tab--btn:hover { text-decoration: underline; text-underline-offset: .25em; }
/* on the booking section the Book tab shows it is the current place */
body.at-end .tab--book { background: var(--ink); color: var(--on-ink); }

/* series menu */
.menu { position: relative; }
.menu[open] summary svg { transform: rotate(180deg); }
.menu-list {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  background: var(--tint); padding: 6px; display: grid; gap: 2px;
  border-radius: var(--r-menu);
  box-shadow: 0 18px 40px -22px rgba(20, 22, 20, .45);
  transition: background-color .8s var(--ease-out);
}
.menu-list a {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 10px 14px; border-radius: var(--r-soft); text-decoration: none; font: 400 1rem/1.2 var(--serif);
}
.menu-list a span { font: 500 .74rem/1.6 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.menu-list a:hover, .menu-list a[aria-current="true"] { background: var(--tint-deep); }
.menu-list a:hover span, .menu-list a[aria-current="true"] span { color: var(--ink); }

/* where you are: one small tab, bottom right */
.where {
  position: fixed; z-index: 20; right: var(--edge); bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  padding: 9px 16px 10px; font: 500 .78rem/1.35 var(--sans); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: background-color .8s var(--ease-out), opacity .4s var(--ease-out);
}
.where b { font-weight: 600; color: var(--ink); margin-right: .6em; }
.where:empty, body.at-end .where, body:not(.past-hero) .where { opacity: 0; }

/* ---------- frames ---------- */
.frame {
  position: relative; height: 100svh; min-height: 520px;
  scroll-snap-align: start;
  overflow: hidden;
}
.shot { margin: 0; position: absolute; inset: 0; overflow: hidden; background: var(--tint-deep); }
.shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform 1.8s var(--ease-out), filter 1.8s var(--ease-out);
}
/* arrival: frames below the fold start slightly enlarged and settle as they come into view */
.js .frame.pre .shot img { transform: scale(1.06); filter: saturate(.85); }

.tab--cap {
  position: absolute; left: var(--edge); bottom: var(--edge); z-index: 2;
  max-width: min(46ch, calc(100% - 2 * var(--edge)));
  padding: 9px 18px 10px; border-radius: var(--r-caption);
  font: italic 400 .98rem/1.35 var(--serif);
  transition: background-color .8s var(--ease-out), transform 1s var(--ease-out);
}
.tab--cap .pl { font: 500 .74rem/1 var(--sans); font-style: normal; letter-spacing: .04em; color: var(--ink-2); margin-right: .55em; font-variant-numeric: tabular-nums; }
.js .frame.pre .tab--cap { transform: translateY(10px); }

/* two portraits side by side */
.frame--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--tint); }
.frame--pair .half { position: relative; overflow: hidden; }
.frame--pair .tab--cap { bottom: var(--edge); }
.frame--pair .half + .half .tab--cap { left: var(--edge); }

/* solo: one portrait, centred whole on the series grey */
.frame--solo { background: var(--tint); }
.frame--solo .shot { inset: clamp(76px, 10vh, 104px) 0 clamp(76px, 10vh, 104px); background: transparent; }
.frame--solo .shot img { object-fit: contain; }

/* split: a tint panel beside the cover portrait (series openers) */
.frame--split { display: grid; grid-template-columns: 1fr 1fr; background: var(--tint); transition: background-color .8s var(--ease-out); }
.frame--split .half { position: relative; overflow: hidden; }
.panel {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(96px, 12vh, 140px) clamp(32px, 6vw, 96px) clamp(40px, 9vh, 96px);
}
.panel h2 {
  margin: 0 0 .3em;
  font: 400 clamp(2.8rem, 6vw, 6rem)/.95 var(--serif-display); letter-spacing: -.015em; text-wrap: balance;
}
.panel .blurb { margin: 0 0 2em; max-width: 34ch; font-size: 1.08rem; color: var(--ink-2); }
.plates { margin: 0; padding: 0; list-style: none; max-width: 40ch; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.plates li {
  display: grid; grid-template-columns: 2.2em 1fr; padding: .5em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font: italic 400 .95rem/1.4 var(--serif);
}
.plates li span { font: 500 .74rem/1.9 var(--sans); font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- hero ---------- */
.hero-card {
  position: absolute; z-index: 2; left: var(--edge); bottom: var(--edge);
  width: min(560px, calc(100% - 2 * var(--edge)));
  background: var(--t-table); border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
}
.hero-card h1 { margin: 0 0 .25em; font: 400 clamp(2.8rem, 5.4vw, 5.2rem)/.95 var(--serif-display); letter-spacing: -.015em; }
.hero-card p { margin: 0 0 1.5em; max-width: 30ch; font-size: 1.08rem; line-height: 1.45; color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 500 .95rem/1 var(--sans); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow svg { transition: transform .4s var(--ease-out); }
.link-arrow:hover svg { transform: translateY(3px); }

/* ---------- enquire ---------- */
.enquire { min-height: 100svh; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--t-table); }
.enquire-inner {
  flex: 1; width: min(100%, 1280px); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 7vw, 120px);
  padding: clamp(110px, 14vh, 160px) clamp(24px, 6vw, 96px) clamp(56px, 8vh, 96px);
}
.enquire h2 { margin: 0 0 .35em; font: 400 clamp(2.6rem, 5vw, 4.8rem)/.98 var(--serif-display); letter-spacing: -.015em; }
.enquire .lede { margin: 0; max-width: 38ch; font-size: 1.08rem; color: var(--ink-2); }
.enquire h3 { margin: 2em 0 .6em; font: 700 1.25rem/1.25 var(--serif); color: var(--ink); }
.services { margin: 0; display: grid; gap: 14px; }
.services dt { font: 500 .86rem/1.4 var(--sans); color: var(--ink-2); }
.services dd { margin: 2px 0 0; color: var(--ink-2); max-width: 40ch; }
.contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.contact .k { display: inline-block; width: 6.5em; font: 500 .8rem/1 var(--sans); color: var(--ink-3); }

.enquiry-wrap { align-self: end; min-width: 0; }
.enquiry { display: grid; gap: 18px; }
.sent {
  display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px);
  background: var(--tint-deep); border-radius: var(--r-card);
}
.sent h3 { margin: 0; font: 700 1.25rem/1.25 var(--serif); }
.sent h3:focus { outline: none; }
.sent p { margin: 0; color: var(--ink); max-width: 46ch; }
.sent .addr { color: var(--ink); font-weight: 700; user-select: all; }
.sent-body {
  margin: 0; padding: 16px 18px; max-height: 18em; overflow: auto;
  background: var(--tint); border-radius: var(--r-soft);
  font: 400 .95rem/1.55 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere;
}
.sent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.link-plain { background: none; border: 0; padding: 0; cursor: pointer; font: 500 .95rem/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }
.enquiry .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field > span { font: 500 .78rem/1 var(--sans); letter-spacing: .03em; color: var(--ink-2); }
.field .req { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1.02rem/1.4 var(--serif); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 38%, transparent);
  padding: 8px 0 9px; border-radius: 0; transition: border-color .25s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7em; }
.field select { appearance: none; padding-right: 26px; }
.field--select { position: relative; }
.field--select::after { /* chevron drawn in the text colour, so it follows any palette */
  content: ""; position: absolute; right: 2px; bottom: 13px; width: 16px; height: 16px; pointer-events: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field select option { background: var(--option-bg); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; font-style: italic; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: color-mix(in srgb, var(--ink) 60%, transparent); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 1px 0 var(--error); }
.form-error { margin: 0; color: var(--error); font: 500 .9rem/1.4 var(--sans); }
.pill--send { justify-self: start; margin-top: 8px; }
.pill--send.is-sent { background: var(--ok); }

.foot {
  width: min(100%, 1280px); margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 24px clamp(24px, 6vw, 96px) 36px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font: 400 .85rem/1.4 var(--sans); color: var(--ink-2);
}
.foot p { margin: 0; }
.foot a { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- tablets ---------- */
@media (max-width: 1100px) {
  .where { padding: 7px 13px 8px; font-size: .74rem; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .top { padding: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .top-left { gap: 4px; }
  .tab-long { display: none; }
  .tab--name, .tab--btn { height: 36px; }
  .tab--name { font-size: .95rem; padding: 0 13px; }
  .pill { padding: 11px 15px 11px 17px; font-size: .9rem; }
  .tab--btn { padding: 0 12px; font-size: .9rem; gap: 6px; }

  .frame { height: auto; min-height: 0; }
  .hero { height: 100svh; min-height: 560px; }
  .hero-card { left: 12px; right: 12px; bottom: 12px; width: auto; border-radius: var(--r-caption); }

  /* landscape frames show whole, edge to edge, on the series tint */
  /* landscape frames crop to a tall 4:5 so each photo still fills the phone */
  .frame--full:not(.hero) .shot { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .frame--solo .shot { position: relative; inset: auto; aspect-ratio: var(--ar, .75); }
  .frame--solo .tab--cap { position: static; display: block; max-width: none; margin: 0; padding: 12px 16px 22px; border-radius: 0; }
  /* past the hero the header gets a solid strip, so page text never shows between the tabs */
  body.past-hero .top { background: var(--tint); padding-bottom: 12px; }
  .where { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .frame--full:not(.hero) .tab--cap { position: static; display: block; max-width: none; margin: 0; padding: 12px 16px 22px; border-radius: 0; }

  .frame--pair { grid-template-columns: 1fr; gap: 0; }
  .frame--pair .half { position: static; }
  .frame--pair .shot { position: relative; inset: auto; aspect-ratio: var(--ar, .75); }
  .frame--pair .tab--cap { position: static; display: block; max-width: none; padding: 12px 16px 22px; border-radius: 0; }

  .frame--split { grid-template-columns: 1fr; }
  .frame--split .half { order: 1; }
  .frame--split .panel { order: 2; padding: 28px 20px 40px; }
  .frame--split .half .shot { position: relative; inset: auto; aspect-ratio: var(--ar, .75); max-height: 82svh; }
  .panel h2 { font-size: 2.8rem; }
  /* series openers: the title comes first, then the cover; the plate list is dropped on phones */
  .opener .panel { order: 1; padding: 88px 20px 20px; }
  .opener .half { order: 2; }
  .opener .blurb { margin-bottom: 0; }
  .plates { display: none; }

  /* booking on phones: heading and intro, then the form, then commissions and contact */
  .enquire-inner { grid-template-columns: 1fr; padding: 96px 20px 48px; gap: 0; }
  .enquire-about { display: contents; }
  .enquire-about > * { order: 3; }
  .enquire-about > h2, .enquire-about > .lede { order: 0; }
  .enquiry-wrap { order: 2; margin: 32px 0 8px; }
  .enquiry .row { grid-template-columns: 1fr; }
  .foot { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .frame.pre .shot img, .js .frame.pre .tab--cap { transform: none; filter: none; }
}