:root {
  /* --- Core palette --- */
  --alt-blu: #223A8E;
  --alt-carta: #F1ECE1;
  --alt-inchiostro: #1A1815;
  --alt-cinabro: #C4362A;
  --alt-travertino: #D8CCB8;

  /* --- Derived --- */
  --alt-hairline: #C9CEE3;
  --alt-tint: #E4E7F1;
  --alt-muted: #6E675C;
  --alt-blu-hover: #1A2E72;

  /* --- Semantic --- */
  --color-bg: var(--alt-carta);
  --color-text: var(--alt-inchiostro);
  --color-display: var(--alt-blu);
  --color-accent: var(--alt-cinabro);
  --color-rule: var(--alt-hairline);
  --color-muted: var(--alt-muted);
  --color-surface: var(--alt-travertino);

  /* --- Families --- */
  --font-display: 'Jost', 'Futura PT', Futura, 'Century Gothic', sans-serif;
  --font-text: 'EB Garamond', 'Lyon Text', Georgia, serif;

  /* The Buly reference sets its display in an engraved serif, not a geometric
     sans. That contradicts the specification, so the spec stands as written.
     To try the other reading, uncomment the Cormorant link above and swap the
     line below in. Nothing else needs to change.
     --font-display: 'Cormorant', 'Lyon Display', Georgia, serif; */

  /* --- Sizes --- */
  --size-masthead: clamp(32px, 6vw, 56px);
  --size-headline: clamp(27px, 4.2vw, 36px);
  --size-quote: clamp(23px, 3vw, 28px);
  --size-deck: 21px;
  --size-body: 19px;
  --size-caption: 13px;
  --size-byline: 12px;
  --size-folio: 12px;
  --size-label: 11px;

  /* --- Tracking --- */
  --track-masthead: 0.08em;
  --track-headline: 0.01em;
  --track-label: 0.26em;
  --track-byline: 0.22em;
  --track-caption: 0.02em;

  /* --- Leading --- */
  --lh-display: 1.15;
  --lh-deck: 1.45;
  --lh-body: 1.65;

  /* --- Measure --- */
  --measure-body: 54ch;
  --measure-deck: 46ch;
  --measure-quote: 26ch;

  /* --- Structure --- */
  --rule: 0.5px solid var(--color-rule);
  --radius: 0;
  --space: clamp(20px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-bg); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
}
img { display: block; max-width: 100%; }

.masthead {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-masthead);
  letter-spacing: var(--track-masthead);
  text-transform: uppercase;
  color: var(--color-display);
  margin: 0;
}
h1, .headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-headline);
  letter-spacing: var(--track-headline);
  line-height: var(--lh-display);
  color: var(--color-display);
  margin: 0;
}
.deck {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--size-deck);
  line-height: var(--lh-deck);
  color: #4A453C;
  max-width: var(--measure-deck);
}
p { max-width: var(--measure-body); }
.pullquote {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--size-quote);
  line-height: 1.35;
  color: var(--color-display);
  max-width: var(--measure-quote);
  margin: 0;
}
.label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-display);
}
.byline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-byline);
  letter-spacing: var(--track-byline);
  text-transform: uppercase;
  color: var(--color-display);
}
.caption {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-caption);
  letter-spacing: var(--track-caption);
  line-height: 1.5;
  color: var(--color-muted);
}
.folio {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-folio);
  letter-spacing: var(--track-byline);
  text-transform: uppercase;
  color: var(--color-accent);
}
hr, .rule { border: 0; border-top: var(--rule); margin: var(--space) 0; }
a {
  color: var(--color-display);
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--alt-blu-hover); }
a:focus-visible { outline: 1px solid var(--color-display); outline-offset: 3px; }

/* Inverted sections: blue ground, cream figure and type.
   A design decision per section, not a user preference. */
.inverted {
  background: var(--alt-blu);
  --color-bg: var(--alt-blu);
  --color-text: var(--alt-carta);
  --color-display: var(--alt-carta);
  --color-rule: rgba(241, 236, 225, 0.35);
  --color-muted: rgba(241, 236, 225, 0.7);
  color: var(--alt-carta);
}
/* Cinabro is illegible on blue — inside .inverted the accent goes cream. */
.inverted .folio { color: var(--alt-carta); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Maiolica ground -------------------------------------------------
   The tile photograph itself, made seamless: lighting flattened across the
   original crop, cut to one exact repeat (141x138) and the wrap seam feathered.
   Colour pulled 40% of the way onto the palette so its blue can meet Blu
   Altrove at the colophon without the glaze wear being scrubbed out.
   For the untouched crop, point both rules below at
   altrove-tile-untouched.png. altrove-tile.svg is the flat vector redraw,
   kept for print, endpapers and socials where a photograph won't do. */
:root { --maiolica: url("altrove-tile.png"); }
body {
  background-color: var(--alt-blu);
  background-image: var(--maiolica);
  background-repeat: repeat;
  background-size: 141px 138px;
}
/* .paper's top margin would otherwise collapse out through body, pushing the
   body box down and leaving a bare strip of html background above the tile.
   flow-root contains it so the maiolica paints from the very top edge. */
body { display: flow-root; }

.paper {
  /* No background of its own. The cream is carried by the blocks inside, so
     the frieze can be a genuine opening onto the tiled ground behind the page
     rather than a second copy of the tile with its own origin. That is what
     keeps the frieze in phase with the margins either side. */
  max-width: 1180px;
  margin: clamp(14px, 2.4vw, 44px) auto;
  border: var(--rule);
}
.paper > .sheet,
main > section,
main > .zone { background: var(--alt-carta); }

/* A flex column ignores the whitespace between block children. As normal flow,
   the newlines between </section> and <section> generated line boxes, and with
   the sheet transparent those showed as thin bands of tile between sections. */
main { display: flex; flex-direction: column; }
/* Same reason as main: the sheet now has a frieze as a sibling, and whitespace
   between block children would show as a hairline of tile. */
.paper { display: flex; flex-direction: column; }

/* .sheet carries margin-inline: auto, and auto margins on a flex item make it
   shrink to its content instead of stretching — which left narrow pages like
   the cover and the contact form visibly narrower than the friezes. */
main > section,
.paper > .sheet { width: 100%; margin-inline: 0; }

/* The first block sits closer to the frieze above it: the full zone padding
   left a conspicuous empty band before anything began. */
main > section:first-child { padding-top: clamp(24px, 4vw, 52px); }
.frieze {
  /* An opening, not an image: the body's tile shows through, so it lines up
     exactly with the margins on either side of the sheet. */
  height: 138px;
  background: none;
  border-block: var(--rule);
}

/* --- The opening --------------------------------------------------------
   One orchestrated moment on load, then the page is still. The figure is a
   three-cut sprite stepped like paper animation, the masthead is set a letter
   at a time, and only the deck is allowed a crossfade. Nothing animates on
   scroll and nothing repeats. Silent for prefers-reduced-motion. */
.figura {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 520 / 504;
  background-image: url("figura-boil.png");
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position-x: 0%;
}
@keyframes boil  { from { background-position-x: 0%; } to { background-position-x: 150%; } }
@keyframes place {
  0%   { opacity: 0; transform: translate(-9px, 12px) rotate(-2.6deg); }
  25%  { opacity: 1; transform: translate( 7px, -5px) rotate( 1.7deg); }
  50%  { transform: translate(-4px,  4px) rotate(-0.9deg); }
  75%  { transform: translate( 2px, -2px) rotate( 0.4deg); }
  100% { transform: none; }
}
@keyframes ink   { from { opacity: 0; } to { opacity: 1; } }

.stamp span { display: inline-block; }


@media (prefers-reduced-motion: no-preference) {
  .figura {
    /* boil deliberately has NO fill-mode: it must fall back to frame one
       when it finishes, not hold its end state (which is off the sprite). */
    animation: boil 0.66s steps(3) 3,
               place 0.88s steps(1, end) both;
  }
  .stamp span {
    animation: ink 0.01s steps(1) both;
    animation-delay: calc(0.62s + var(--i) * 0.042s);
  }
  .cover__positioning { animation: ink 0.7s ease-out 1.34s both; }
  .cover__figure figcaption,
  .cover .caption { animation: ink 0.7s ease-out 1.5s both; }
}


/* --- Gilding ------------------------------------------------------------
   Gold leaf appears once, on the blue ground of the colophon, directly under
   the maiolica frieze so the two read as one surface. Departs from the
   specification, which allows single-colour foil but no metallics — that
   holds for print; this is screen. figura-oro.png and bollo-oro.png carry
   the same leaf onto the mark for socials, tote and avatar. */
.seal {
  display: block;
  width: clamp(92px, 11vw, 140px);
  height: auto;
  margin: 0 0 32px;
  /* The one shadow on the site. drop-shadow follows the star's alpha, so it
     traces the points rather than boxing them. Two passes: a tight contact
     shadow, then a soft one for lift. The spec bans shadows; this is the
     deliberate exception, and it applies to the seal alone. */
  filter: drop-shadow(0 1px 1px rgba(8, 14, 38, 0.55))
          drop-shadow(0 6px 14px rgba(8, 14, 38, 0.40));
}

/* ---------------- page structure ---------------- */

/* The sheet must fill the paper exactly. It used to be 80px narrower, which
   was invisible while the paper itself was cream — once the paper went
   transparent for the frieze, that margin showed as tile down both sides of
   every block, making the sections look narrower than the friezes. */
.sheet { max-width: 1180px; margin-inline: auto; padding-inline: var(--space); }
.zone { padding-block: clamp(48px, 8vw, 104px); }
.zone--tight { padding-top: 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space); top: 12px; background: var(--alt-blu); color: var(--alt-carta); padding: 8px 14px; }

.runner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding-block: 18px; border-bottom: var(--rule);
}
.runner .masthead { font-size: 15px; letter-spacing: 0.14em; }

.opener { margin-bottom: 14px; }
.opener + .rule { margin-top: 0; }

/* cover */
.cover { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .cover { grid-template-columns: 1fr 1fr; } }
.cover__figure { margin: 0; }

.cover__figure figcaption { margin-top: 14px; }
.cover .masthead { margin-bottom: 22px; line-height: 1.06; }
.cover__positioning { margin: 0 0 26px; }

/* standing sections */
.preparation {
  display: grid; gap: 6px 40px; grid-template-columns: 1fr;
  padding-block: 22px; border-top: var(--rule);
}
@media (min-width: 700px) { .preparation { grid-template-columns: 13ch 1fr; align-items: baseline; } }
.preparation:last-of-type { border-bottom: var(--rule); }
.preparation__name {
  font-family: var(--font-display); font-weight: 300; font-size: 23px;
  letter-spacing: 0.02em; color: var(--color-display); margin: 0;
}
.preparation p { margin: 0; }

/* redazione */
.people { display: grid; gap: var(--space) 40px; grid-template-columns: 1fr; padding-top: 26px; }
@media (min-width: 640px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .people { grid-template-columns: repeat(3, 1fr); } }
/* No rule of its own: the section rule above already divides this block,
   and two horizontal lines with a gap between them read as a mistake. */
.person { padding-top: 0; }
.person__portrait {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%;
  border: var(--rule); margin-bottom: 18px;
}
.person__name {
  font-family: var(--font-display); font-weight: 300; font-size: 22px;
  letter-spacing: 0.02em; color: var(--color-display); margin: 0 0 8px;
}
.person__role { display: block; margin-bottom: 6px; }
.person__cities { display: block; margin-bottom: 10px; }
.person__link { font-family: var(--font-display); font-size: var(--size-byline); letter-spacing: var(--track-byline); text-transform: uppercase; }

/* register */
.register { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 800px) { .register { grid-template-columns: 1fr 1fr; align-items: start; } }
.field { display: block; margin-bottom: 14px; }
.field > .label { display: block; margin-bottom: 8px; }
.field input {
  font-family: var(--font-text); font-size: 17px; width: 100%; max-width: 380px;
  padding: 11px 13px; border: var(--rule); border-radius: var(--radius);
  background: var(--alt-tint); color: var(--color-text);
}
.field input::placeholder { color: var(--color-muted); }
.submit {
  font-family: var(--font-display); font-weight: 500; font-size: var(--size-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--alt-carta); background: var(--alt-blu);
  border: 0; border-radius: var(--radius); padding: 13px 26px;
  cursor: pointer; transition: background 0.25s ease;
  display: inline-block; text-decoration: none; line-height: 1;
}
.submit:hover { background: var(--alt-blu-hover); color: var(--alt-carta); }

/* colophon */
.colophon__grid { display: grid; gap: 4px 40px; grid-template-columns: 1fr; margin: 0; max-width: 640px; }
@media (min-width: 620px) { .colophon__grid { grid-template-columns: 15ch 1fr; } }
.colophon__grid dt {
  font-family: var(--font-display); font-weight: 400; font-size: var(--size-byline);
  letter-spacing: var(--track-byline); text-transform: uppercase;
  color: var(--alt-carta); padding-top: 6px;
}
.colophon__grid dd { margin: 0; padding-top: 2px; color: rgba(241, 236, 225, 0.85); font-size: 17px; }
.colophon__foot {
  margin-top: 44px; padding-top: 18px; border-top: var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between;
}

/* --- Navigation ---------------------------------------------------------
   Four pages sharing one stylesheet. The running head carries the name, the
   nav and the folio; it wraps to two rows on narrow screens. */
.runner { flex-wrap: wrap; }
a.masthead { text-decoration: none; }
.nav { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.nav a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-byline);
  letter-spacing: var(--track-byline);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-display);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.nav a:hover { color: var(--alt-blu-hover); border-bottom-color: var(--alt-blu-hover); }
/* The current page is marked in Cinabro, the same accent as the folio. */
.nav a[aria-current="page"] { border-bottom-color: var(--alt-cinabro); }
@media (max-width: 640px) {
  /* No hyphenation on phones. The spec asks for it on, which suits a wide
     column, but at roughly 40 characters a line it breaks a word almost every
     line. Ragged right is the lesser evil. text-wrap: pretty tidies the
     resulting rag where the browser supports it. */
  body { hyphens: none; -webkit-hyphens: none; font-size: 17px; }
  p, .deck, .pullquote { text-wrap: pretty; }

  /* With hyphenation off, 19px in a 350px column gave about forty characters
     a line and a rag up to 112px deep. 17px with tighter margins fits closer
     to fifty, which cuts the average shortfall from 60px to 22px. */
  .sheet { padding-inline: 16px; }
}

@media (max-width: 640px) {
  /* Edge to edge on phones. The side margins were only 14px there — too thin
     to read as a pattern, and they narrowed the reading column for no gain.
     The maiolica now appears only in the friezes at that width. */
  .paper { margin: 0; border: 0; }
}

@media (max-width: 640px) {
  /* Stacked and centred on phones: name, nav, folio each on its own line.
     The desktop arrangement (name left, nav centre, folio right) is untouched. */
  .runner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }
  /* Visual order on phones: name, folio, nav. Reordered in CSS rather than in
     the markup so the source order stays name-nav-folio for screen readers,
     and so desktop keeps its left-centre-right arrangement. */
  .runner .folio { margin-left: 0; order: 1; }
  .nav { flex-basis: auto; justify-content: center; flex-wrap: wrap; order: 2; }
  /* The name sits apart from the working row beneath it. Nav and folio stay
     close together so they read as one group rather than three equal lines. */
  .runner .masthead { margin-bottom: 12px; }

  /* Each person's details centre under their portrait. On desktop they stay
     left-aligned, where three columns of ranged-left text read as a grid. */
  .person { text-align: center; }

  /* The running head stays at the top of the screen while the page scrolls,
     so the name and the navigation are always reachable. Desktop keeps a
     header that scrolls away with the page. */
  .paper > .sheet {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--alt-carta);
    border-bottom: var(--rule);
  }
}

/* --- Movement between and within pages ----------------------------------
   Pages cross-fade rather than blink white, and blocks settle upward as they
   come into view. Both are off entirely for prefers-reduced-motion, and the
   reveal only ever engages if the script runs — with JavaScript off every
   block is simply visible. */
@view-transition { navigation: auto; }

/* Name the parts that persist across pages so they are snapshotted separately.
   The running head and the sheet itself are identical on every page — holding
   them still means only the content moves, which reads as one continuous
   document rather than four pages flashing past each other. */
.runner { view-transition-name: runner; }
main    { view-transition-name: page; }

::view-transition-old(root),   ::view-transition-new(root),
::view-transition-old(runner), ::view-transition-new(runner) { animation: none; }

/* The outgoing page leaves upward and quickly; the incoming one rises into
   place more slowly. Overlapping them by design — the new page is already
   arriving before the old one has finished going. */
::view-transition-old(page) { animation: page-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(page) { animation: page-in  .46s cubic-bezier(.16, .74, .3, 1) 60ms both; }
@keyframes page-out { to   { opacity: 0; transform: translateY(-12px); } }
@keyframes page-in  { from { opacity: 0; transform: translateY(20px);  } }

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .62s cubic-bezier(.16,.74,.3,1),
              transform .62s cubic-bezier(.16,.74,.3,1);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: .06s; }
.js .reveal:nth-child(3) { transition-delay: .12s; }
.js .reveal:nth-child(4) { transition-delay: .18s; }
.js .reveal:nth-child(5) { transition-delay: .24s; }
.js .reveal:nth-child(6) { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(page), ::view-transition-new(page) { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}


/* --- Interior footers ---------------------------------------------------
   The publication details are printed once, on the home page. Every other
   page closes with the seal and the address only — repeating a colophon four
   times makes it read as decoration rather than record. */
.colophon__line {
  margin: 0;
  font-size: 17px;
  color: rgba(241, 236, 225, 0.85);
}


/* --- Statement composition ----------------------------------------------
   Three siblings so the phrase can sit between the paragraphs on a phone and
   beside them on a desktop, from one source order. On narrow screens they
   simply stack: first paragraph, phrase, second paragraph. */
.statement { display: grid; grid-template-columns: 1fr; gap: 1.35em; }
.statement > p { margin: 0; max-width: none; }
.statement .pullquote { margin: 0; }

@media (min-width: 860px) {
  .statement {
    grid-template-columns: minmax(0, 54ch) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 64px);
    row-gap: 1.35em;
    align-items: start;
  }
  .statement__a     { grid-column: 1; grid-row: 1; }
  .statement__b     { grid-column: 1; grid-row: 2; }
  .statement__aside { grid-column: 2; grid-row: 1 / span 2; padding-top: 4px; }
}

/* Three sections, not six: give each name more presence and hold the list
   to a measure so it doesn't strand against the right edge. */
/* The description runs the full width of the sheet rather than sitting in a
   54ch column with the right half empty. This overrides the global measure
   deliberately: the line is longer than the spec's 80-character rule at wide
   viewports. Restore it by putting max-width: 72ch back on .preparation p. */
@media (min-width: 700px) { .preparation { grid-template-columns: 16ch 1fr; } }
.preparation__name { font-size: clamp(25px, 2.4vw, 31px); }
.preparation p { max-width: none; }

/* --- Forms ---------------------------------------------------------------
   Submissions are captured by Netlify Forms — the data-netlify attribute is
   all that is required, and they arrive in the Forms tab of the project.
   The hidden bot-field is a honeypot: real people never fill it in. */
.contact { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .contact { grid-template-columns: minmax(0, 34ch) minmax(0, 1fr); align-items: start; }
}
.contact__intro p { margin-bottom: 1em; }

.field textarea,
.field select {
  font-family: var(--font-text);
  font-size: 17px;
  width: 100%;
  max-width: 480px;
  padding: 11px 13px;
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--alt-tint);
  color: var(--color-text);
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.field input { max-width: 480px; }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: 1px solid var(--color-display); outline-offset: 2px; }

.footer__subscribe {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  border-bottom: 1px solid rgba(241, 236, 225, 0.3);
  transition: border-color .25s ease;
}
.footer__subscribe:hover { border-bottom-color: var(--alt-carta); }

/* --- Subscribe overlay ---------------------------------------------------
   Cream sheet on a blue scrim, same furniture as the page. Closes on Escape,
   on the scrim, and on the button; focus moves in on open and returns to
   whatever opened it on close. */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--space);
}
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 62, 0.72);
  animation: ink .3s ease-out both;
}
.modal__panel {
  position: relative;
  width: min(460px, 100%);
  background: var(--alt-carta);
  border: var(--rule);
  padding: clamp(26px, 4vw, 44px);
  animation: modal-in .42s cubic-bezier(.16, .74, .3, 1) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(16px); } }
.modal__seal { width: 72px; height: auto; margin-bottom: 20px; }
.modal__copy { margin: 12px 0 22px; font-size: 17px; }
.modal__done { margin: 0; font-family: var(--font-text); font-size: 18px; }
.modal__close {
  position: absolute;
  top: 10px; right: 14px;
  background: none; border: 0;
  font-family: var(--font-display);
  font-size: 24px; line-height: 1;
  color: var(--color-display);
  cursor: pointer;
  padding: 6px;
}
.modal__close:hover { color: var(--alt-blu-hover); }

@media (prefers-reduced-motion: reduce) {
  .modal__scrim, .modal__panel { animation: none; }
}


/* --- Contact form --------------------------------------------------------
   Paired fields on one row, required markers beside the label, and inputs
   that fill their column. Square corners and hairlines throughout — the
   rounded pill inputs of the reference belong to a different house. */
.contact__title { margin-bottom: 14px; }
.contact__address {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 25px);
  letter-spacing: 0.01em;
  margin: 0;
}
.contact__address a { text-decoration: none; border-bottom: 1px solid var(--alt-hairline); }
.contact__address a:hover { border-bottom-color: var(--alt-blu-hover); }

.fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.fieldset__legend {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--color-display);
  padding: 0;
  margin-bottom: 12px;
}
.form__row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }

.contact .field { margin-bottom: 22px; }
.contact .field input,
.contact .field select,
.contact .field textarea { max-width: none; width: 100%; }
.req {
  font-family: var(--font-text);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
  margin-left: 6px;
}


/* --- Page title ----------------------------------------------------------
   A page can carry a name above its first section label. The label stays as
   the section marker beneath it, so the hierarchy reads title then section. */
.page-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(23px, 3vw, 38px);
  letter-spacing: var(--track-masthead);   /* caps need real space; lowercase gets none */
  text-transform: uppercase;
  line-height: var(--lh-display);
  color: var(--color-display);
  text-align: center;
  text-indent: var(--track-masthead);      /* offset the trailing space so it sits truly centred */
  margin: 0 0 clamp(38px, 5vw, 62px);
}