/* ============================================================
   Atif Choudhury - personal site
   Editorial manifesto design. Warm broadsheet, justice-led.
   Palette and type per docs/brand-strategy.md (all pairings AA).
   ============================================================ */

:root {
  /* palette */
  --ink: #242A22;
  --paper: #F6F2E9;
  --olive: #3E4C2E;
  --olive-deep: #334025;
  --amber: #8F5E13;
  --sea: #1F5566;
  --stone: #6E6A5C;
  /* deep text-token variants for small (body-size) text: both clear WCAG AAA
     (>=7:1) on white, paper AND the surface tint. The original --stone/--amber
     stay for large display text, decorative marks, borders and white-label
     buttons - only small text darkens, so the brand identity holds. */
  --stone-deep: #4E4B3D;
  --amber-deep: #63430E;
  --white: #FFFFFF;
  --paper-on-olive: #DCE3D3;

  /* kept for compatibility with earlier tokens */
  --color-text: var(--ink);
  --color-bg: var(--paper);
  --color-primary: var(--olive);
  --color-primary-hover: var(--olive-deep);
  --color-secondary: var(--amber);
  --color-link: var(--sea);
  --color-surface: #EFE9DC;

  --font-heading: "Atkinson Hyperlegible", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --focus: var(--sea);
  --measure: 66ch;
  --touch-min: 44px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* One shared content container and one vertical-rhythm step. Every band pins
     its inner content to this width with the gutter INSIDE it, so all sections
     line up on the same left edge as the masthead brand and breathe evenly. */
  --container: 1240px;
  --band-y: clamp(4.5rem, 10vw, 7.5rem);
}

/* Visually hidden but available to assistive tech (carousel live region, labels). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; margin: 0; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }

/* paper grain: subtle atmosphere, never blocking */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- a11y fundamentals ---------- */
a { color: var(--sea); text-underline-offset: 3px; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
}
.skip-link:focus { top: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  border: 2px solid transparent;
}
.btn--primary { background: var(--olive); color: var(--white); }
.btn--primary:hover { background: var(--olive-deep); }
.btn--secondary { background: transparent; color: var(--amber); border-color: var(--amber); }
.btn--secondary:hover { background: rgba(143, 94, 19, 0.08); }
.btn--paper { background: var(--paper); color: var(--olive); }
.btn--paper:hover { background: var(--white); }
.btn--sm { min-height: var(--touch-min); padding: 0.5rem 1.125rem; font-size: 0.9375rem; }
.btn--lg { padding: 1.125rem 2.25rem; font-size: 1.25rem; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 242, 233, 0.92);
  border-bottom: 1px solid rgba(110, 106, 92, 0.35);
}
@supports (backdrop-filter: blur(12px)) {
  .masthead { background: rgba(246, 242, 233, 0.78); backdrop-filter: blur(12px); }
}
.masthead__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.masthead__brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}
.masthead__stop { color: var(--amber); }
.masthead__nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
}
.masthead__nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 0.25rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.masthead__nav a:not(.btn):hover,
.masthead__nav a:not(.btn):focus-visible { border-bottom-color: var(--olive); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(115deg, var(--paper) 0%, var(--paper) 55%, #EDE7D6 78%, #E4DCC6 100%);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}
.hero__kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-deep);
  margin-bottom: 1.25rem;
}
.hero__kicker span { color: var(--amber); }
.hero__title {
  font-size: clamp(3.5rem, 9.5vw, 7.75rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 1.75rem;
}
.hero__stop { color: var(--amber); }
.hero__lede {
  font-size: clamp(1.1875rem, 1.8vw, 1.4375rem);
  line-height: 1.55;
  max-width: 34ch;
  margin-bottom: 2.25rem;
}
.hero__cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hero__more {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--sea);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}
.hero__figure { position: relative; margin: 0; }
.hero__figure::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  right: -1.5rem;
  bottom: -1.5rem;
  background: var(--olive);
  border-radius: 4px;
}
.hero__photo {
  position: relative;
  width: 100%;
  /* taller crop so the figure has more vertical presence; object-position keeps
     his face (upper-centre-right of the source) comfortably in frame */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 58% 30%;
  border-radius: 4px;
}

/* hero load reveal, motion-safe only */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .hero__content > *:nth-child(1) { animation-delay: 0.05s; }
  .hero__content > *:nth-child(2) { animation-delay: 0.15s; }
  .hero__content > *:nth-child(3) { animation-delay: 0.3s; }
  .hero__content > *:nth-child(4) { animation-delay: 0.45s; }
  .hero__figure { animation: rise 0.8s 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- manifesto band ---------- */
.manifesto {
  background: var(--olive);
  color: var(--paper);
  padding-block: var(--band-y);
}
.manifesto :focus-visible { outline-color: var(--paper); }
.manifesto__quote {
  margin: 0 auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
  position: relative;
}
.manifesto__quote p {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.2vw, 3.375rem);
  line-height: 1.18;
  /* comfortable display measure, left edge still pinned to the shared grid */
  max-width: 20ch;
  color: var(--white);
  margin: 0;
}
.manifesto__mark {
  color: #D9A54A;
}
.manifesto__cite {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-on-olive);
}

/* ---------- shared section furniture ---------- */
.section { padding-block: var(--band-y); }
.section__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section__numeral {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  margin: 0 0 0.5rem;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--amber);
}
@supports not (-webkit-text-stroke: 1px black) {
  .section__numeral { color: var(--amber); opacity: 0.5; }
}
.section__numeral--light { -webkit-text-stroke-color: var(--paper-on-olive); }
.section__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  margin-bottom: 2rem;
}
.section__title--light { color: var(--paper); }

/* ---------- about ---------- */
.about { background: var(--white); }
.about__inner {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
/* editorial photo group: the Zaytoun-bottles portrait as the anchor with the
   quieter looking-down portrait tucked over its lower-right, sitting on an
   offset olive block whose edges echo the anchor's (offset up and left). */
.about__media { position: relative; margin: 2.5rem 0 0; isolation: isolate; }
.about__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1.25rem;
  left: -1.25rem;
  width: 86%;
  aspect-ratio: 1 / 1;
  background: var(--olive);
  border-radius: 4px;
}
.about__portrait { display: block; border-radius: 4px; object-fit: cover; }
.about__portrait--anchor {
  position: relative;
  z-index: 1;
  width: 86%;
  aspect-ratio: 1 / 1;
}
.about__portrait--inset {
  position: relative;
  z-index: 2;
  width: 50%;
  max-width: 400px; /* podium source is 400px square; never upscale */
  margin-left: auto;
  margin-top: -24%;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--white);
  box-shadow: 0 12px 30px rgba(36, 42, 34, 0.18);
}
.about__body { max-width: var(--measure); }
.about__body p { margin-bottom: 1.5rem; font-size: 1.125rem; }
/* raise specificity so the lead paragraph's larger step actually wins over
   the .about__body p rule above (both otherwise set font-size) */
.about__body p.about__lead { font-size: 1.3125rem; }
.about__lead { font-size: 1.3125rem; line-height: 1.55; }
.about__roles {
  list-style: none;
  margin-top: 2.5rem;
  border-top: 2px solid var(--ink);
}
.about__roles li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(110, 106, 92, 0.4);
  font-weight: 600;
}
.about__role-num {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--amber-deep);
  min-width: 2ch;
}

/* ---------- speaking: editorial index ---------- */
.speaking { background: var(--paper); }
.speaking__head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 520px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: 3rem;
}
.speaking__intro { max-width: 52ch; margin: 0 0 0.5rem; }
.topics { list-style: none; border-top: 3px solid var(--ink); }
.topics__row {
  display: grid;
  grid-template-columns: 5rem 1.1fr 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-bottom: 1px solid rgba(110, 106, 92, 0.4);
}
.topics__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--amber-deep);
  padding-top: 0.4rem;
}
.topics__title {
  font-size: clamp(1.5rem, 3.2vw, 2.375rem);
  line-height: 1.1;
}
.topics__desc { max-width: 52ch; margin: 0; }

/* ---------- voices (testimonials carousel) ---------- */
.voices { background: var(--white); }
.voices__carousel { margin-top: 1rem; }

/* No-JS fallback: every quote stacked as a plain list. */
.voices__track {
  list-style: none;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  max-width: 900px;
}
.voices__slide { margin: 0; }
.voices__quote { margin: 0; position: relative; padding-left: clamp(3.5rem, 7vw, 5rem); }
.voices__quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 1;
  color: var(--amber);
}
.voices__quote p {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
  line-height: 1.45;
  margin-bottom: 1rem;
}
.voices__cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-deep);
}

/* Enhanced: JS adds .is-enhanced and shows one testimonial at a time.
   Slides share one grid cell so the track height is stable across slides. */
.voices__carousel.is-enhanced .voices__track {
  display: grid;
  max-width: 960px;
  min-height: 11rem;
}
/* let the quote run to a fuller measure so it fills the width instead of
   stacking narrow on the left of an empty container */
.voices__carousel.is-enhanced .voices__quote p { max-width: 34ch; }
@media (min-width: 760px) {
  .voices__carousel.is-enhanced .voices__quote p { max-width: 72ch; }
}
.voices__carousel.is-enhanced .voices__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
}
.voices__carousel.is-enhanced .voices__slide.is-active {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
  .voices__carousel.is-enhanced .voices__slide { transition: opacity 0.35s ease; }
}

.voices__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.25rem;
  max-width: 960px;
}
/* tight prev / dots / next / indicator cluster */
.voices__cluster {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.voices__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border-radius: 50%;
  border: 2px solid var(--olive);
  background: var(--paper);
  color: var(--olive);
  cursor: pointer;
}
.voices__nav svg { width: 20px; height: 20px; }
.voices__nav:hover { background: var(--olive); color: var(--white); }
.voices__dots {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.voices__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.voices__dot::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--stone);
  transition: background 0.2s, border-color 0.2s;
}
.voices__dot[aria-current="true"]::before {
  background: var(--amber);
  border-color: var(--amber);
}
.voices__status {
  margin-left: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  color: var(--stone-deep);
}
/* no-JS: the Book CTA sits below the stacked quotes */
.voices__cta { margin-top: 3.5rem; }
/* enhanced: JS moves the Book CTA onto the controls row, pushed to the right */
.voices__controls .voices__cta { margin: 0 0 0 auto; }
@media (max-width: 640px) {
  .voices__controls .voices__cta { margin-left: 0; }
}

/* ---------- consultancy: a quiet band, subordinate to the speaking CTAs ---------- */
.consult { background: var(--color-surface); }
/* trimmed rhythm so it reads as a lighter aside between the louder bands */
.consult.section { padding-block: clamp(3rem, 6vw, 4.5rem); }
.consult__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid rgba(110, 106, 92, 0.4);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}
.consult__text { max-width: 60ch; }
.consult__title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.consult__copy { color: var(--stone-deep); margin: 0; }
/* small (17px) secondary button: darken its amber text+border to clear AAA on
   the surface tint (the large hero secondary button already passes as large text) */
.consult__cta { flex-shrink: 0; color: var(--amber-deep); border-color: var(--amber-deep); }
@media (max-width: 640px) {
  .consult__inner { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- contact ---------- */
.contact { background: var(--olive); }
.contact :focus-visible { outline-color: var(--paper); }
/* inner spans the shared grid so the numeral and title stay flush-left with
   every other band; the running copy keeps its own comfortable measure below */
.contact__intro {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.25;
  color: var(--white);
  max-width: 24ch;
  margin-bottom: 1rem;
}
.contact__details { color: var(--paper-on-olive); max-width: 56ch; margin: 0 0 2.25rem; }

/* enquiry form: a ~600px column hugging the grid's left edge, paper input
   surfaces on the olive band, everything labelled */
.contact-form { max-width: 600px; }
.contact-form__grid {
  display: grid;
  /* minmax(0,1fr) so a track can shrink below a child's intrinsic width -
     iOS gives date inputs a large fixed intrinsic width that otherwise
     pushes the column past the viewport edge on phones */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem 1.5rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.contact-form label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--paper);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(36, 42, 34, 0.35);
  border-radius: 6px;
}
.contact-form textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.contact-form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

/* privacy disclosure */
.privacy { margin-top: 2.75rem; max-width: 600px; border-top: 1px solid rgba(220, 227, 211, 0.35); }
.privacy__summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch-min);
  padding: 0.75rem 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--paper);
}
.privacy__summary::-webkit-details-marker { display: none; }
.privacy__summary::before {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--paper-on-olive);
}
.privacy[open] .privacy__summary::before { content: "\2212"; }
.privacy__body { color: var(--paper-on-olive); max-width: 62ch; padding-bottom: 1rem; }
.privacy__body p { margin: 0 0 0.85rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.site-footer :focus-visible { outline-color: var(--paper); }
.site-footer__ghost {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: 0.9;
  white-space: nowrap;
  color: rgba(246, 242, 233, 0.07);
  margin: 0;
  padding: 2rem var(--gutter) 0;
  user-select: none;
}
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-footer__copy { margin: 0; color: var(--paper-on-olive); }
.site-footer__nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-footer__nav a {
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__figure { max-width: 560px; }
  .about__inner { grid-template-columns: 1fr; }
  .about__media { max-width: 480px; }
  .speaking__head { grid-template-columns: 1fr; align-items: start; }
  .topics__row {
    grid-template-columns: 3.5rem 1fr;
    grid-template-areas: "num title" ". desc";
  }
  .topics__num { grid-area: num; }
  .topics__title { grid-area: title; }
  .topics__desc { grid-area: desc; }
}
@media (max-width: 640px) {
  .masthead__nav a:not(.btn) { padding: 0 0.125rem; font-size: 0.9375rem; }
  .site-footer__ghost { font-size: 22vw; }
  /* pull the decorative offset blocks inward so nothing reaches the screen edge
     (keeps >=5px clearance at 390/360) */
  .hero__figure::before { top: 0.75rem; left: 0.75rem; right: -0.75rem; bottom: -0.75rem; }
  .about__media::before { top: -0.75rem; left: -0.75rem; }
  .about__portrait--inset { box-shadow: 0 8px 20px rgba(36, 42, 34, 0.16); }
}
@media (max-width: 560px) {
  /* single-column enquiry form so each field has comfortable width */
  .contact-form__grid { grid-template-columns: 1fr; }
}
/* Very narrow: the in-page text links no longer fit beside the brand and the
   Book CTA, so drop them (they remain in the footer nav) and keep the CTA.
   This is what fixes the horizontal overflow at 390px. */
@media (max-width: 480px) {
  .masthead__nav ul li:not(:last-child) { display: none; }
  .masthead__nav ul { gap: 0.75rem; }
}

/* iOS renders date inputs with a native widget and fixed intrinsic width;
   flatten it so the field sizes like every other input */
.contact-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
}