/* ==========================================================================
   maxroyston.com
   Design system: navy foundation, white ground, one red accent.
   No JavaScript. No external requests. No tracking.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS

   The site ships with a system serif stack that renders instantly and costs
   nothing. To upgrade to Fraunces + Inter, drop the .woff2 files into /fonts/
   and uncomment the block below. Nothing else needs to change.

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
   -------------------------------------------------------------------------- */

:root {
  /* Colour */
  --navy:        #0B1B33;
  --navy-90:     rgba(11, 27, 51, 0.90);
  --navy-70:     rgba(11, 27, 51, 0.70);
  --navy-00:     rgba(11, 27, 51, 0.00);
  --muted:       #4C5A70;   /* 7.0:1 on white */
  --red:         #C8102E;   /* 5.9:1 on white, AA at all text sizes */
  --red-deep:    #A00C24;
  --white:       #FFFFFF;
  --paper:       #FBFAF8;   /* barely-there warm ground for alternate blocks */
  --rule:        rgba(11, 27, 51, 0.14);
  --rule-strong: rgba(11, 27, 51, 0.30);

  /* Type */
  --serif: "Fraunces", "Source Serif 4", "Iowan Old Style", Charter,
           "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 36rem;
  --shell: 78rem;
  --step: clamp(3.5rem, 9vw, 8rem);
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto is load-bearing. Without it the width/height attributes on
   each <img> win over aspect-ratio and the crops never apply. */
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: none;
}

.eyebrow .num { color: var(--red); font-variant-numeric: tabular-nums; }
.eyebrow .num::after {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 2px;
  background: var(--red);
  vertical-align: 0.22em;
  margin-left: 0.7rem;
}

.lede {
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  line-height: 1.55;
  color: var(--navy);
}

.meta {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */

a { color: inherit; }

a.link {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
a.link:hover { color: var(--red); }

/* Arrow link: the workhorse of Writing and Press */
a.arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
  text-decoration: none;
}
a.arrow::after {
  content: "\2192";
  transition: transform 0.18s ease;
  color: var(--red);
}
a.arrow:hover { color: var(--red); }
a.arrow:hover::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  a.arrow::after { transition: none; }
  a.arrow:hover::after { transform: none; }
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 0.85rem 1.25rem;
  z-index: 50;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* --------------------------------------------------------------------------
   SHELL
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 46rem; }

/* --------------------------------------------------------------------------
   MASTHEAD
   -------------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--navy);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: clamp(1.1rem, 3vw, 2.25rem);
  align-items: center;
}

.nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--red);
}

/* --------------------------------------------------------------------------
   HERO (moment 01)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(88svh, 46rem);
  display: flex;
  align-items: flex-end;
  background: var(--navy);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Navy-tinted treatment keeps mixed-quality event photography consistent
     and guarantees contrast for the headline. Faces stay natural. */
  filter: saturate(0.82) contrast(1.04);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--navy) 0%, var(--navy-90) 22%, var(--navy-70) 46%, var(--navy-00) 88%),
    linear-gradient(to right, var(--navy-70) 0%, var(--navy-00) 62%);
}

.hero__body {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  color: var(--white);
  width: 100%;
}

.hero .eyebrow { color: rgba(255, 255, 255, 0.78); }
.hero .eyebrow .num { color: var(--white); }
.hero .eyebrow .num::after { background: var(--red); }

.hero h1,
.hero h2 {
  font-size: clamp(2.6rem, 7.6vw, 6.5rem);
  line-height: 0.96;
  letter-spacing: -0.028em;
  max-width: 15ch;
  color: var(--white);
}

.hero__copy {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 42ch;
}

.hero__links {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
}

.hero a.arrow { color: var(--white); }
.hero a.arrow::after { color: var(--white); }
.hero a.arrow:hover { color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   MOMENTS (02 to 06)
   -------------------------------------------------------------------------- */

.moments { counter-reset: moment 1; }

.moment {
  padding-block: var(--step);
  border-top: 1px solid var(--rule);
}

.moment:first-child { border-top: 0; }

.moment__media {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  background: var(--navy);
  overflow: hidden;
}

.moment__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04);
}

@media (min-width: 40em) {
  .moment__media img { aspect-ratio: 3 / 2; }
}

.moment h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  max-width: 18ch;
}

.moment__copy {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--muted);
  max-width: 46ch;
}

.moment__links {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

/* The moment sections span the full body width already, so the media needs
   no 100vw trick. 100vw would include the scrollbar and force a sideways
   scroll on desktop. */

.credit {
  margin: 0.85rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  max-width: none;
}

/* Scroll-linked entrance. Progressive enhancement only: unsupported
   browsers simply see the finished state. No JavaScript involved. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .moment__media, .moment__text {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--step);
  border-top: 1px solid var(--rule);
}

.section--paper { background: var(--paper); }

.section__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.section__head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  max-width: 20ch;
}

.section__head h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--red);
  margin-top: 1.25rem;
}

.page__head {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
}

.page__head h1 {
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  max-width: 14ch;
}

.page__head h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  background: var(--red);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.page__head .lede { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   WORK (Stop The Hate UK, The Hineni Project)
   -------------------------------------------------------------------------- */

.work {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .work {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(2.5rem, 4vw, 4rem);
  }
}

.work__item h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin-bottom: 0.85rem;
}

.work__item p { color: var(--muted); }

/* --------------------------------------------------------------------------
   BIO TEASER
   -------------------------------------------------------------------------- */

.teaser {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 48em) {
  .teaser { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.teaser__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.teaser h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: 1.25rem; }
.teaser p { color: var(--muted); font-size: 1.0625rem; }
.teaser .arrow { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   FEATURES (Writing, Press)
   One block per piece. Sized to carry a page that holds five items, not fifty.
   -------------------------------------------------------------------------- */

.shell--reading { max-width: 64rem; }

.features { list-style: none; margin: 0; padding: 0; }

.feature {
  position: relative;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}

.feature:last-child { border-bottom: 1px solid var(--rule); }

.feature__outlet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 0 0 1.1rem;
  max-width: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.feature__outlet::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--red);
  flex: none;
}

.feature__outlet .sep { color: var(--rule-strong); }
.feature__outlet .date { color: var(--muted); font-weight: 500; }

.feature__title {
  font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  line-height: 1.06;
  max-width: 22ch;
}

.feature__title a { text-decoration: none; transition: color 0.15s ease; }

/* The whole block is one target. */
.feature__title a::after { content: ""; position: absolute; inset: 0; }

.feature:hover .feature__title a { color: var(--red); }

.feature__stand {
  margin: 1.05rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  max-width: 50ch;
}

.feature__byline {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.feature__go {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
}

.feature__go::after {
  content: "\2192";
  color: var(--red);
  transition: transform 0.18s ease;
}

.feature:hover .feature__go { color: var(--red); }
.feature:hover .feature__go::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .feature__go::after { transition: none; }
  .feature:hover .feature__go::after { transform: none; }
}

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 52em) {
  .about { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .about__portrait { position: sticky; top: 2.5rem; }
}

/* Stacked on narrow screens the portrait would otherwise fill the viewport. */
.about__portrait { max-width: 20rem; }
.about__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.about__portrait figcaption {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.prose p {
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 38rem;
}

.prose h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 1.25rem;
}

.roles { list-style: none; margin: 0; padding: 0; max-width: 38rem; }

.roles li {
  padding-block: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
}

.roles li:last-child { border-bottom: 1px solid var(--rule); }
.roles strong { font-weight: 600; }
.roles span { color: var(--muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   SUBSCRIBE
   -------------------------------------------------------------------------- */

.subscribe__label {
  display: block;
  font-size: 1.0625rem;
  margin-bottom: 1rem;
  max-width: 34ch;
}

.subscribe__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 30rem;
}

.subscribe input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0.8rem 0.95rem;
}

.subscribe input[type="email"]::placeholder { color: var(--muted); }
.subscribe input[type="email"]:focus { border-color: var(--navy); }

.subscribe button {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 0;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.subscribe button:hover { background: var(--red); border-color: var(--red); }

.subscribe__note {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Honeypot: catches bots, invisible and unreachable for people */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(3rem, 6vw, 5rem);
  margin-top: 0;
}

.footer__grid {
  display: grid;
  gap: clamp(2.25rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.footer h2 {
  font-size: 1.125rem;
  color: var(--white);
  margin-bottom: 1.1rem;
}

.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__links a { border-bottom: 1px solid var(--red); padding-bottom: 2px; }

.footer .subscribe__label { color: rgba(255, 255, 255, 0.88); }
.footer .subscribe input[type="email"] {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}
.footer .subscribe input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55); }
.footer .subscribe input[type="email"]:focus { border-color: var(--white); }
.footer .subscribe button { background: var(--white); color: var(--navy); border-color: var(--white); }
.footer .subscribe button:hover { background: var(--red); color: var(--white); border-color: var(--red); }
.footer .subscribe__note { color: rgba(255, 255, 255, 0.6); }
.footer :focus-visible { outline-color: var(--white); }

.colophon {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .footer, .subscribe, .hero__media { display: none; }
  body { color: #000; }
  .hero, .hero__body { background: none; color: #000; min-height: 0; }
  .hero h1, .hero__copy { color: #000; }
}

/* --------------------------------------------------------------------------
   PLACEHOLDERS
   Every unsupplied fact is marked here rather than invented. Search the repo
   for "[" to find them all, or run ./lint.sh. Delete this rule once the last
   placeholder is gone and nothing should look any different.
   -------------------------------------------------------------------------- */

.todo {
  font-family: var(--sans);
  font-size: 0.9em;
  font-weight: 600;
  color: var(--red);
  border-bottom: 1px dotted var(--red);
}

.hero .todo, .footer .todo {
  color: #FF8FA3;
  border-bottom-color: #FF8FA3;
}

.hero .credit { color: rgba(255, 255, 255, 0.62); margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   NAMEPLATE
   Sits above the hero. Says who this is and what the page is, then gets out
   of the way. Kept short on purpose: the photograph is still the opening
   image, and on a phone its top edge must clear the fold.
   -------------------------------------------------------------------------- */

.nameplate {
  padding-block: clamp(1.2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

.nameplate__inner {
  display: grid;
  gap: 1.1rem 3rem;
  align-items: end;
}

@media (min-width: 52em) {
  .nameplate__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem 4rem;
  }
}

.nameplate__lead {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.1vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 30ch;
  text-wrap: balance;
}

.nameplate__sub {
  margin: 0.7rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}

.nameplate__note {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 3px solid var(--red);
  justify-self: start;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   PRESS GROUPING
   Twelve items in one run is a list. Grouped by the same six moments as the
   homepage, it is a structure, and it costs no photography.
   -------------------------------------------------------------------------- */

.group {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
}

.group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.group + .features .feature:first-child { border-top: 0; }

/* The lead item carries the page. */
.feature--lead { padding-top: 0; border-top: 0; }
.feature--lead .feature__title { font-size: clamp(1.9rem, 4.6vw, 3.25rem); max-width: 19ch; }
.feature--lead .feature__stand { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); }

/* A 16:9 source in a moment block. Crops to 4:5 on a phone like the others,
   but keeps its native shape on desktop rather than losing the sides. */
@media (min-width: 40em) {
  .moment__media--wide img { aspect-ratio: 16 / 9; }
}

.subscribe__contact {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--muted);
}

/* On a phone, size the hero to exactly the space the masthead and nameplate
   leave. The whole photograph and the whole headline block then sit on the
   first screen with nothing cut. min-height is a floor, so on a short phone
   the hero simply grows to fit its own content rather than clipping it. */
@media (max-width: 40em) {
  .hero { min-height: calc(100svh - 23.5rem); }
}

/* The phone hero is shorter, so its text sits higher up the frame. The scrim
   stays as it is, or the photograph disappears behind it. Only the eyebrow,
   the palest element, needs more weight. */
@media (max-width: 40em) {
  .hero .eyebrow { color: rgba(255, 255, 255, 0.95); }
}

/* --------------------------------------------------------------------------
   CONTACT FORM
   -------------------------------------------------------------------------- */

.contact { max-width: 34rem; margin-top: 1.75rem; }

.contact__field { margin: 0 0 1.25rem; max-width: none; }

.contact label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0.8rem 0.95rem;
}

.contact textarea { resize: vertical; min-height: 8rem; }

.contact input:focus, .contact textarea:focus { border-color: var(--navy); }

.contact button {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 0;
  padding: 0.8rem 2rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contact button:hover { background: var(--red); border-color: var(--red); }