/* ==========================================================================
   20 Majors
   One stylesheet for one page. Rules are ordered to follow the document:
   base, utilities, header and navigation, hero, then each page section.
   ========================================================================== */

:root {
  /* Brand palette */
  --forest:      #16502F; /* hero, identity number panel */
  --forest-mid:  #1B4332; /* victory, design translation */
  --forest-deep: #113A23; /* footer */
  --gold:        #E3BE53;
  --cream:       #F9F8F3;
  --ink:         #14140F;
  --ink-soft:    #55554C;
  --cream-soft:  rgba(249, 248, 243, .68);
  --gold-soft:   rgba(227, 190, 83, .72);
  --rule-light:  rgba(249, 248, 243, .22);
  --rule-dark:   rgba(20, 20, 15, .16);

  /* Typography */
  --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "DM Mono", "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Layout rhythm */
  --page-gutter:   clamp(20px, 5.55vw, 80px);
  --content-width: 1280px;
  --section-space: clamp(76px, 9vw, 130px);
}

/* ----------------------------------------------------------------- base -- */

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

a { color: inherit; }

figure { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* ------------------------------------------------------------ utilities -- */

/* Available to screen readers and crawlers, not shown on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--page-gutter);
  top: 12px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--forest);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.container {
  width: 100%;
  max-width: calc(var(--content-width) + var(--page-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.stack > * + * { margin-top: clamp(48px, 6vw, 92px); }

/* --------------------------------------------------------- section shell -- */

.section { padding-block: var(--section-space); }

.section--light  { background: var(--cream); }
.section--forest { background: var(--forest-mid); color: var(--cream); }
.section--gold   { background: var(--gold); color: var(--forest-mid); }

.section-label {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section-label::before {
  content: "\2022";
  margin-right: 10px;
}
.section-label__number::after {
  content: " / ";
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.35vw, 48px);
  line-height: 1.12;
  letter-spacing: 0;
}

.section-intro {
  margin: 0;
  max-width: 1180px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.62;
  color: var(--ink-soft);
}

.section-header { margin-bottom: clamp(38px, 4.6vw, 72px); }
.section-header .section-title { margin-top: 0; }
.section-header .section-intro { margin-top: 18px; }

/* Instrument Serif is drawn tight and high-contrast, so the display type sets
   at its natural tracking. The negative letter-spacing the old display face
   needed would close the counters up too far here. */
.statement {
  margin: 0;
  max-width: min(100%, 1180px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.17vw, 60px);
  line-height: 1.2;
  letter-spacing: 0;
}
.statement--secondary {
  font-size: clamp(23px, 2.65vw, 38px);
  line-height: 1.32;
}

.caption {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.62;
  letter-spacing: .01em;
  color: var(--ink-soft);
}

/* Dark sections invert the muted text colours. */
.section--forest .section-label,
.section--forest .caption   { color: var(--cream-soft); }
.section--forest .section-title { color: var(--cream); }
.section--forest .section-intro { color: var(--cream-soft); }
.section--gold .section-label   { color: var(--forest-mid); }

/* ---------------------------------------------------------- image layouts -- */

.figure-full img { width: 100%; }

.figure-narrow {
  max-width: 560px;
  margin-inline: auto;
}
.figure-narrow .caption { text-align: center; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4.4vw, 64px);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 32px);
}

/* --------------------------------------------------- header and navigation -- */

/* Base styles below assume no JavaScript: the header sits in the flow and the
   section links render as a plain list. The .has-js rules turn the same markup
   into the overlay menu. */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 2.6vw, 34px) var(--page-gutter);
  background: var(--forest);
}

.has-js .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  background: none;
}

/* A 44px square target around a 26px glyph: the bars stay exactly where they
   were drawn, and the area a thumb has to find grows to meet them. */
.menu-toggle {
  display: none;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-inline-start: -9px;
  padding: 0;
}
.has-js .menu-toggle { display: grid; }

.menu-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--cream);
  transition: transform .35s ease, opacity .25s ease;
}
.menu-toggle span:last-child { width: 18px; }

.button-outline {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--cream-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.button-outline:hover {
  background: var(--cream);
  color: var(--forest);
  border-color: var(--cream);
}

.site-nav {
  padding: clamp(24px, 4vw, 48px) var(--page-gutter);
  background: var(--forest);
}

/* Full-screen panel that slides down over the page when scripting is on. */
.has-js .site-nav {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  /* Vertically centred, ranged left against the page gutter. */
  place-items: center start;
  padding: var(--page-gutter);
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .62s cubic-bezier(.76, 0, .24, 1);
}
.has-js .site-nav[data-open="true"] { clip-path: inset(0 0 0 0); }
.has-js .site-nav[aria-hidden="true"] { visibility: hidden; }
.has-js .site-nav[data-open="true"] { visibility: visible; }

/* Offset by its own padding so the label sits where it always has while the
   target around it clears 44px. */
.site-nav__close {
  display: none;
  position: absolute;
  top: calc(clamp(22px, 2.6vw, 34px) - 13px);
  right: calc(var(--page-gutter) - 10px);
  padding: 13px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
}
.has-js .site-nav__close { display: block; }

.site-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.site-nav__list a {
  display: block;
  padding: clamp(6px, 1vw, 12px) 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.18;
  color: var(--gold);
  text-decoration: none;
  transition: opacity .3s ease;
}
.site-nav__list a:hover { opacity: .6; }

.site-nav__index {
  margin-right: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--cream-soft);
  vertical-align: super;
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(96vh, 930px);
  padding: clamp(150px, 18vh, 220px) var(--page-gutter) clamp(90px, 14vh, 170px);
  background: var(--forest);
  text-align: center;
}

/* A phone's browser toolbars are part of its screen, so 96vh is taller than
   what a visitor can actually see and the hero stops being one screenful.
   Dynamic units measure the space that is really there. */
@supports (height: 1dvh) {
  .hero {
    min-height: min(96dvh, 930px);
    padding-block: clamp(150px, 18dvh, 220px) clamp(90px, 14dvh, 170px);
  }
}

.hero__lockup { width: 100%; }

/* The graphic logo is the drawn brand lockup, silhouette over the name, in
   one file, so its internal proportions are the artwork's own and only the
   whole thing is sized here. Its viewBox is 790x737, nearly square, and the
   founding line below it is 0.51 of its width. The four width terms:

     100%             the gutters, the guard on the narrowest screens
     16.67vw + 281px  the scale itself
     60vh             the ceiling on a short window (0.93 of the width is the
                      logo's height, so this keeps the hero one screenful)
     521px            the size the hero was drawn at, 1440px and wider

   That middle term is deliberately much flatter than the viewport. The logo
   is 41% of the content column on a desktop, and carrying that share down to
   a phone left the artwork stranded in the middle of the screen, so it takes
   a larger share as the screen narrows and fills the column outright on a
   phone. Width drives it and height follows, which is also what keeps the
   lockups free of layout shift. */

.hero__title { margin: 0; }
.hero__title img {
  display: block;
  width: min(100%, 16.67vw + 281px, 60vh, 521px);
  height: auto;
  margin-inline: auto;
}

.hero__founded { margin: clamp(18px, 2.4vw, 30px) 0 0; }
.hero__founded img {
  display: block;
  width: min(51%, 8.5vw + 143px, 29.6vh, 266px);
  height: auto;
  margin-inline: auto;
}

/* --------------------------------------------------------- the evolution -- */

.columns {
  margin-top: clamp(36px, 4.4vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4.4vw, 68px);
}
.columns p {
  margin: 0;
  max-width: 560px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.72;
  color: var(--ink-soft);
}

/* -------------------------------------------------------- identity codes -- */

.identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.identity__panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 72 / 85;
  padding: clamp(28px, 3vw, 44px);
}
.identity__panel .section-label {
  position: absolute;
  top: clamp(20px, 2.2vw, 30px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
}

.identity__panel--number { background: var(--forest); }
.identity__panel--number .section-label { color: var(--cream-soft); }

/* The drawn logo numeral. Its tight viewBox is its ink, so the height set
   here is the numeral's rendered ink height, matching the size the outlined
   type version read at. */
.identity__number {
  --lockup-type-size: clamp(130px, 21.9vw, 315px);
  margin: 0;
}
.identity__number img {
  display: block;
  width: auto;
  height: calc(.739 * var(--lockup-type-size));
}

.identity__panel--mark { background: var(--gold); }
.identity__panel--mark .section-label { color: var(--forest); }
.identity__panel--mark svg {
  width: auto;
  height: clamp(200px, 36vw, 520px);
  color: var(--forest);
}

/* -------------------------------------------------------------- victory -- */

.victory { text-align: center; }

/* The signature is the same graphic logo the hero uses, at small scale. The
   type size variable is the ink height its "20 MAJORS" line reads at, and
   the whole lockup is 4.35x that. */
.brand-signature {
  --lockup-type-size: clamp(15px, 1.5vw, 21px);
  display: block;
  margin: 0;
}
.brand-signature img {
  display: block;
  width: auto;
  height: calc(4.35 * var(--lockup-type-size));
  margin-inline: auto;
}

.victory__title {
  margin: clamp(10px, 1.4vw, 18px) 0 clamp(40px, 5vw, 66px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(62px, 12.1vw, 175px);
  line-height: .94;
  color: var(--gold);
}

/* The table is narrower than the section it sits in, and deliberately so: the
   leader below runs from the championship to the venue, so the width of the
   table is what sets the length of that rule. At 640px the rules stay close to
   the short dash this ledger started with while still reaching both labels. */
.records {
  --leader-gap: clamp(16px, 2vw, 32px);
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  border-collapse: collapse;
  text-align: left;
}
.records caption {
  margin-bottom: clamp(20px, 2.4vw, 32px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-soft);
  text-align: center;
}
.records th,
.records td {
  padding: clamp(8px, .85vw, 12px) 0;
  vertical-align: baseline;
  font-weight: 400;
}
.records thead th {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-light);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.records thead th:last-child { padding-left: var(--leader-gap); }
.records tbody tr:first-child th,
.records tbody tr:first-child td { padding-top: clamp(16px, 1.6vw, 24px); }

.records__year {
  width: 12%;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--cream);
  text-align: left;
}
.records__event {
  padding-left: clamp(12px, 3vw, 44px);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.45vw, 20px);
  color: var(--cream);
}
/* The venue column takes only the width its longest name needs, and the
   championship column absorbs everything left over. That puts the boundary
   between the two at the same place on every row, which is what lets the leader
   below end on a common line down the table. The cell is qualified by the table
   so the gap outweighs the padding shorthand the other cells share. */
.records td.records__venue {
  width: 1%;
  white-space: nowrap;
  padding-left: var(--leader-gap);
  text-align: left;
  font-size: 14px;
  color: var(--cream-soft);
}
/* Decorative gold leader running from the championship to the venue. It fills
   whatever the championship name leaves of its column, so it starts at the end
   of the name and finishes at the column boundary: one rule per row, all of
   them ending on the same vertical line and clearing the venue by the same gap.
   The flex container has to sit inside the cell rather than on it, since a table
   cell told to be a flex container stops being a cell and drops the venue onto a
   line of its own. Baseline alignment keeps the rule on the row's baseline, and
   the nudge lifting it off the baseline is fixed rather than relative so it does
   not drift with the clamped font size. */
.records__event .records__leader {
  display: flex;
  align-items: baseline;
  gap: var(--leader-gap);
}
.records__event .records__leader::after {
  content: "";
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: var(--gold);
  opacity: .5;
  transform: translateY(-4px);
}

/* ---------------------------------------------------------- collections -- */

.collections {
  padding-block: clamp(90px, 11.6vw, 168px);
  text-align: center;
}

.collections__flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  color: rgba(22, 80, 47, .55);
  font-family: var(--font-mono);
  font-size: 13px;
}
.collections__flourish::before,
.collections__flourish::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

.collections .section-label {
  margin-top: clamp(28px, 3vw, 44px);
  text-align: center;
}
.collections .section-label::before { content: none; }

.collections__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(54px, 11.1vw, 160px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--forest-mid);
}

.collections__divider {
  width: 54px;
  height: 1px;
  margin: clamp(26px, 3vw, 40px) auto;
  background: rgba(22, 80, 47, .5);
}

.collections__body {
  margin: 0 auto;
  max-width: 860px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.68;
  color: var(--forest-mid);
}

/* -------------------------------------------------------- product lines -- */

.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4.4vw, 64px);
  align-items: start;
}
.product + .product { margin-top: clamp(48px, 6.6vw, 100px); }

.product__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.65vw, 38px);
  line-height: 1.18;
}
.product__text {
  margin: 0;
  max-width: 620px;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.72;
  color: var(--ink-soft);
}
.product__copy > * + * { margin-top: 18px; }
.product__media > * + * { margin-top: clamp(20px, 2.4vw, 32px); }

/* The caddie pair reads as one plate: the copy column runs the full height of
   the portrait beside it and its flat-lay sinks to the floor, so the two
   photographs finish on the same line. */
.product--media-first { align-items: stretch; }
.product--media-first .product__media {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.product--media-first .product__copy {
  display: flex;
  flex-direction: column;
}
.product--media-first .product__copy img { margin-top: auto; padding-top: 18px; }

/* The dress copy rides beside a tall portrait, so it drops from the top of
   the column to just shy of the photograph's middle. */
.product:not(.product--media-first) {
  align-items: stretch;
}
.product:not(.product--media-first) .product__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(24px, 6vw, 90px);
}

.spec-card {
  margin-top: clamp(48px, 6.6vw, 100px);
  border: 1px solid var(--rule-dark);
  background: var(--cream);
}

/* Browser chrome as artwork: three lights and an address bar, flat and quiet
   enough to sit in a cream section without becoming the loudest thing in it.
   The address truncates instead of wrapping, the way a real one does, which is
   also what lets the strip survive a 320px screen. */
.spec-card__chrome {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: 11px clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--rule-dark);
  background: rgba(20, 20, 15, .035);
}

.spec-card__lights {
  display: flex;
  flex: none;
  gap: 7px;
}
.spec-card__lights span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(20, 20, 15, .17);
}
.spec-card__lights span:first-child  { background: rgba(22, 80, 47, .3); }
.spec-card__lights span:nth-child(2) { background: rgba(227, 190, 83, .62); }

.spec-card__address {
  flex: 1;
  max-width: 420px;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spec-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(24px, 3.4vw, 48px);
}
.spec-card__body img { width: 100%; }

.spec-card__sku {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.spec-table {
  width: 100%;
  margin: clamp(26px, 3vw, 40px) 0 0;
  border-collapse: collapse;
}
.spec-table th,
.spec-table td {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-dark);
  font-size: 14px;
  font-weight: 400;
}
.spec-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
}
.spec-table td { text-align: right; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  margin-top: clamp(26px, 3vw, 40px);
}

.button-solid {
  display: inline-block;
  padding: 14px 26px;
  background: #0A6B35;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s ease;
}
.button-solid:hover { background: var(--forest); }
.button-solid[disabled] {
  opacity: .55;
  cursor: default;
}

.button-text {
  padding-block: 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.button-text span {
  display: inline-block;
  transition: transform .3s ease;
}
.button-text:hover span { transform: translateX(5px); }

/* ------------------------------------------------------------ brand world -- */

.world-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 38px);
}
/* The four photographs share one frame ratio, so each pair's top and bottom
   edges line up regardless of how the sources were cropped. */
.world-grid img {
  width: 100%;
  aspect-ratio: 1240 / 1560;
  object-fit: cover;
}

/* ------------------------------------------------------------------ team -- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3.1vw, 46px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Grid children need this to let long words wrap instead of widening a column. */
.team-member { min-width: 0; }

/* The portraits are supplied in a landscape ratio. The 4:5 frame is the page's
   crop, not the photographer's, so it is set here and the files stay untouched. */
.team-member__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: rgba(20, 20, 15, .06);
}

.team-member__name {
  margin: clamp(18px, 1.9vw, 26px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.95vw, 28px);
  line-height: 1.16;
}

.team-member__role {
  margin: 9px 0 0;
  padding-bottom: clamp(14px, 1.5vw, 20px);
  border-bottom: 1px solid var(--rule-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.team-member__bio > p {
  margin: clamp(14px, 1.5vw, 18px) 0 0;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.72;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------- enquiries -- */

/* Base styles assume no JavaScript: the enquiry panel is the last section on the
   page and the form posts the ordinary way. The .has-js rules further down turn
   the same markup into the modal the Contact buttons open. */

.enquiry__panel {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}
.enquiry__intro { margin-top: 18px; }
.enquiry__close { display: none; }

.enquiry-form { margin-top: clamp(30px, 3.5vw, 46px); }
.enquiry-form > * + * { margin-top: clamp(18px, 2.2vw, 26px); }

/* Visible to a bot reading the markup, out of reach of everyone else. */
.enquiry-form__honeypot {
  position: absolute;
  left: -9999px;
}

.enquiry-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.2vw, 30px);
}

.field { margin: 0; }

.field__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field__optional {
  letter-spacing: .04em;
  text-transform: none;
  opacity: .68;
}

/* Bordered boxes: each control states its own edges, so the fields read as
   fields at a glance rather than as underlined gaps in the page. */
.field__input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  background-color: rgba(255, 255, 255, .55);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.field__input::placeholder { color: rgba(85, 85, 76, .58); }
.field__input:hover { border-color: rgba(20, 20, 15, .34); }
.field__input:focus {
  border-color: var(--forest);
  background-color: #FFF;
  box-shadow: 0 0 0 3px rgba(22, 80, 47, .14);
  /* A transparent outline keeps a focus ring in Windows High Contrast Mode,
     where the border and shadow above are both discarded. */
  outline: 2px solid transparent;
  outline-offset: 1px;
}
/* Only after the visitor has actually left the field, never while typing. */
.field__input:user-invalid {
  border-color: #8C2F1F;
  background-color: rgba(140, 47, 31, .04);
}

.field__input--textarea {
  min-height: 104px;
  resize: vertical;
}

.field__input--select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355554C' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  cursor: pointer;
}

.enquiry-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: clamp(26px, 3vw, 38px);
}
.enquiry-form__note {
  margin: 0;
  max-width: 320px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.enquiry-form__status {
  flex: 1 1 260px;
  margin: 0;
  padding: 14px 18px;
  border-left: 2px solid var(--forest);
  background: rgba(22, 80, 47, .07);
  font-size: 14px;
  line-height: 1.62;
}
.enquiry-form__status[data-state="error"] {
  border-left-color: #8C2F1F;
  background: rgba(140, 47, 31, .07);
}

/* The scripted version: one fixed layer over the page, the panel inside it.

   The panel is a height budget rather than a tall document. It is capped at the
   viewport, its own spacing is measured in vh as well as px so it compresses on
   short screens, and the message field is the one elastic part, so the form
   settles inside the space available instead of running past the fold. The
   overflow rule on the panel is a last resort for absurd cases (a 250px window,
   enormous text zoom); on real devices nothing scrolls. */
.has-js .enquiry {
  --modal-inset: clamp(10px, 2.4vh, 40px);
  --modal-side: clamp(14px, 3.4vw, 44px);
  --modal-gap: clamp(10px, 1.9vh, 22px);

  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--modal-inset);
  padding-left: max(var(--modal-side), env(safe-area-inset-left));
  padding-right: max(var(--modal-side), env(safe-area-inset-right));
  overflow: hidden;
  background: rgba(17, 58, 35, .58);
  opacity: 0;
  visibility: hidden;
  /* Visibility is not faded, it is held until the fade has finished, so the
     panel is never half-visible and never focusable once closed. */
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.has-js .enquiry[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s;
}
.has-js .enquiry .container {
  width: 100%;
  max-width: 720px;
  padding-inline: 0;
}

.has-js .enquiry__panel {
  display: flex;
  flex-direction: column;
  /* dvh follows the mobile address bar as it shows and hides; vh is the
     fallback for browsers that never learned it. */
  max-height: calc(100vh - var(--modal-inset) * 2);
  max-height: calc(100dvh - var(--modal-inset) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 3vh, 44px) clamp(20px, 3.4vw, 48px);
  border-radius: 3px;
  background: var(--cream);
  box-shadow: 0 30px 70px rgba(11, 35, 22, .3);
  transform: translateY(16px);
  transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}
.has-js .enquiry[data-open="true"] .enquiry__panel { transform: none; }

/* Everything above the message field holds its size; the message field alone
   gives ground when the viewport is short. */
.has-js .enquiry__panel > * { flex-shrink: 0; }

.has-js .enquiry__head {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 18px;
}
/* The label claims the free space, so Close stays at the right edge on the
   short screens further down where the label itself is dropped. */
.has-js .enquiry__head .section-label {
  margin-right: auto;
  margin-bottom: 0;
}

.has-js .enquiry .section-title {
  margin-top: clamp(6px, 1.2vh, 14px);
  font-size: clamp(24px, 4.4vh, 40px);
}
.has-js .enquiry__intro {
  margin-top: clamp(8px, 1.4vh, 16px);
  font-size: clamp(14px, 1.9vh, 16px);
}

.has-js .enquiry-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--modal-gap);
  margin-top: clamp(16px, 2.6vh, 34px);
}
/* The gap above replaces the stacked margins of the page version. */
.has-js .enquiry-form > * + * { margin-top: 0; }
.has-js .enquiry-form > * { flex-shrink: 0; }

.has-js .enquiry-form__row { gap: var(--modal-gap) clamp(16px, 2.2vw, 30px); }

/* Neither this nor the form above sets min-height:0. The automatic minimum size
   is what stops the field being squeezed past its label and the textarea floor
   below, and the send button being drawn on top of the message. */
.has-js .field--message {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.has-js .field--message .field__input--textarea {
  flex: 1 1 auto;
  /* A height budget rather than the rows attribute: four rows on a deep
     screen, down to a couple on a phone held sideways. */
  height: clamp(56px, 14vh, 168px);
  min-height: clamp(44px, 7vh, 110px);
  resize: none;
}

.has-js .enquiry-form__footer {
  gap: var(--modal-gap) clamp(16px, 2.4vw, 32px);
  margin-top: clamp(2px, .8vh, 10px);
}
.has-js .enquiry-form__status {
  padding: 10px 14px;
  font-size: 13.5px;
}

.has-js .enquiry__close {
  display: block;
  padding: 2px 0 2px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.has-js .enquiry__close:hover { color: var(--ink); }

/* Short viewports, chiefly phones held sideways and half-height desktop
   windows. Each step gives up the least useful line on the panel before it
   touches the fields themselves.

   Narrow counts as short too: the same intro paragraph that costs two lines on
   a desktop costs seven on a phone, which is why width appears here at all. */
@media (max-height: 760px), (max-width: 720px) {
  .has-js .enquiry__intro,
  .has-js .enquiry-form__note { display: none; }

  /* Once the panel is this tight, the spacing between the fields is worth more
     to the form than it is to the eye. */
  .has-js .enquiry { --modal-gap: clamp(9px, 1.5vh, 18px); }
  .has-js .enquiry__panel { padding-block: clamp(16px, 2.4vh, 34px); }
  .has-js .field__label { margin-bottom: 5px; }
  /* The reply is the only thing worth reading at this point, so the number
     line above the title stands down while it is on screen, and the message
     box lends it the height: nothing has been typed there by then, since a
     sent form is reset and a failed one is about to be retried. */
  .has-js .enquiry__panel:has(.enquiry-form__status:not([hidden])) .section-label { display: none; }
  .has-js .enquiry-form:has(.enquiry-form__status:not([hidden])) .field__input--textarea {
    height: clamp(38px, 6vh, 90px);
    min-height: 38px;
  }
  .has-js .enquiry-form__status {
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* On a phone the reply has to wrap onto its own line under the button, and the
   heading is what pays for it. Tucked away rather than removed, since the
   dialog is still named by it — the same treatment as .visually-hidden. */
@media (max-width: 720px) {
  .has-js .enquiry__panel:has(.enquiry-form__status:not([hidden])) .section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The number line above the title is the first thing to go: it is a wayfinding
   flourish borrowed from the page, and the modal has no way to wander. */
@media (max-height: 660px) {
  .has-js .enquiry__head .section-label { display: none; }
  .has-js .enquiry .section-title { font-size: clamp(20px, 3.6vh, 30px); }
}

@media (max-height: 620px) {
  /* Side by side wherever the width allows, however narrow the breakpoint in
     the responsive section would otherwise make the columns: two short rows
     beat four tall ones when height is the scarce dimension. */
  .has-js .enquiry-form__row { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 460px) {
  .has-js .enquiry__panel { padding-block: 14px; }
  .has-js .enquiry .section-title { font-size: 19px; }
  .has-js .field__label {
    margin-bottom: 3px;
    font-size: 10px;
  }
  .has-js .field__input {
    padding-block: 7px;
    font-size: 14px;
  }
  .has-js .enquiry-form__footer .button-solid { padding-block: 10px; }
}

@media (max-height: 380px) {
  /* Hidden rather than removed: the dialog is still named by this heading. */
  .has-js .enquiry .section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .has-js .enquiry-form { margin-top: 10px; }
}

/* Shorter than any phone, so this is a desktop window squashed to a strip.
   Everything that is not a field or a label gives up its last few pixels. */
@media (max-height: 400px) {
  /* Only while the reply is on screen, and only here, where there is nothing
     left to take it from. */
  .has-js .enquiry__panel:has(.enquiry-form__status:not([hidden])) {
    --modal-gap: 7px;
    padding-block: 10px;
  }
  .has-js .enquiry-form:has(.enquiry-form__status:not([hidden])) { margin-top: 6px; }
}

@media (max-height: 340px) {
  .has-js .enquiry { --modal-gap: 7px; }
  .has-js .enquiry__panel { padding-block: 10px; }
  .has-js .enquiry-form { margin-top: 6px; }
  .has-js .field__label { margin-bottom: 2px; }
  .has-js .field__input { padding-block: 5px; }
  .has-js .field--message .field__input--textarea {
    height: 38px;
    min-height: 38px;
  }
  .has-js .enquiry-form:has(.enquiry-form__status:not([hidden])) .field__input--textarea {
    height: 30px;
    min-height: 30px;
  }
  .has-js .enquiry-form__status {
    padding: 5px 10px;
    font-size: 12px;
  }
  .has-js .enquiry-form__footer .button-solid { padding-block: 8px; }
}

/* A folded phone in landscape is the one real device this short. */
@media (max-height: 300px) {
  .has-js .enquiry { --modal-gap: 5px; }
  .has-js .enquiry__panel { padding-block: 8px; }
  .has-js .field__input { padding-block: 4px; }
  .has-js .field--message .field__input--textarea {
    height: 28px;
    min-height: 28px;
  }
  .has-js .enquiry-form:has(.enquiry-form__status:not([hidden])) .field__input--textarea {
    height: 22px;
    min-height: 22px;
  }
  .has-js .enquiry-form__footer .button-solid { padding-block: 6px; }
}

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  padding-block: clamp(70px, 8.5vw, 120px);
  background: var(--forest-deep);
  color: var(--cream);
  text-align: center;
}

.site-footer__statement {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(23px, 2.9vw, 42px);
  line-height: 1.24;
}

.site-footer__contact {
  margin: clamp(30px, 3.4vw, 48px) auto 0;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  letter-spacing: .08em;
  color: var(--cream-soft);
}
.site-footer__contact a { color: var(--gold-soft); }
.site-footer__contact a:hover { color: var(--gold); }

.site-footer__action { margin: clamp(26px, 3vw, 38px) 0 0; }

.site-footer__rule {
  height: 1px;
  margin: clamp(36px, 4vw, 60px) 0 24px;
  background: var(--rule-light);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-footer__meta span:first-child { color: var(--cream-soft); }
.site-footer__meta span:last-child  { color: var(--gold-soft); }

/* ---------------------------------------------------------------- motion -- */

/* Content is visible by default; the fade-in only applies once scripting has
   confirmed it can undo it. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.22, .8, .3, 1),
              transform .9s cubic-bezier(.22, .8, .3, 1);
}
.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-js .reveal { opacity: 1; transform: none; transition: none; }
  .has-js .site-nav { transition: none; }
  .has-js .enquiry,
  .has-js .enquiry__panel { transition: none; }
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------ responsive -- */

/* Breakpoints follow the layouts rather than device names: 900px is where the
   two-up card stops fitting, 720px is where every side-by-side grid becomes one
   column, 480px is where the two tables stop being tables. */

@media (max-width: 900px) {
  .columns { grid-template-columns: 1fr; }
  .spec-card__body { grid-template-columns: 1fr; }

  /* Four bios side by side leave columns too narrow to read at this width. */
  .team-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .grid-2,
  .grid-3,
  .product,
  .world-grid,
  .enquiry-form__row,
  .identity { grid-template-columns: 1fr; }
  .identity__panel { aspect-ratio: 5 / 4; }
  .statement,
  .statement--secondary { max-width: none; }
  .records__venue { font-size: 12.5px; }
  .records__event { padding-left: 16px; }
  .site-footer__meta { justify-content: flex-start; }
  .product__media { order: -1; }
  .product--media-first .product__media { order: 0; }

  /* Each identity panel is the full width here rather than half of it, so both
     pieces of artwork are sized from the panel again instead of resting on the
     floor of a viewport clamp: 35.5% of the panel's width for the numeral and
     54% of it for the silhouette, which is as large as the shorter single-column
     panel can hold while the silhouette stays clear of its label. */
  .identity__number { --lockup-type-size: min(44vw, 315px); }
  .identity__panel--mark svg { height: min(54vw, 520px); }

  /* Display type set at a phone's width runs out of room mid-phrase, and a
     one-word last line is the usual result. */
  .statement,
  .section-title,
  .victory__title,
  .collections__title,
  .product__title,
  .site-footer__statement { text-wrap: balance; }

  .button-outline { padding-block: 13px; }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }

  .records thead { display: none; }
  .records,
  .records tbody,
  .records tr,
  .records th,
  .records td {
    display: block;
    width: auto;
  }
  /* A table told to be a block still leaves its caption as a table-caption,
     which the browser wraps in an anonymous table box. That box shrinks to its
     content and strands the line against the left edge, where the centring
     below then reads as a ragged column. Making the caption a block hands it
     the full width back, so it centres on the section's axis like the title. */
  .records caption {
    display: block;
    max-width: 30ch;
    margin-inline: auto;
  }
  /* The year keeps a gutter of its own rather than sitting on top of the
     championship, so the ledger holds a spine on a phone and each entry reads
     as one record instead of three loose lines. */
  .records tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(14px, 4.5vw, 22px);
    padding: 15px 0;
    border-bottom: 1px solid var(--rule-light);
  }
  .records th,
  .records td,
  .records tbody tr:first-child th,
  .records tbody tr:first-child td { padding: 0; }
  /* Spanning both rows tops the year out against the championship. Mono at 12px
     sits higher than the display face beside it, so the nudge is what puts the
     two on a common line. */
  .records th.records__year {
    grid-row: 1 / span 2;
    padding-top: 3px;
  }
  /* Stacked rows put the venue under the championship, so the leader has no
     horizontal gap left to bridge. */
  .records__event .records__leader { display: block; }
  .records__event .records__leader::after { content: none; }
  .records__event { padding-left: 0; }
  .records td.records__venue {
    width: auto;
    margin-top: 3px;
    padding-left: 0;
    white-space: normal;
  }

  /* The specification table gives up the same way the victory table does: a
     right-aligned value has nowhere to go against a label this wide, so each
     row becomes a label with its value beneath. */
  .spec-table tr {
    display: block;
    border-bottom: 1px solid var(--rule-dark);
  }
  .spec-table th,
  .spec-table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .spec-table th { padding-top: 12px; }
  .spec-table td { padding-bottom: 12px; }
}

/* Landscape phones and other short windows. The hero's vertical padding is
   written for a tall screen; the lockup group already answers to the 58vh term
   in its own rule, so the padding is all that stands between the hero and a
   single screenful. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero { padding-block: clamp(72px, 19vh, 104px) clamp(40px, 11vh, 64px); }
  .site-nav__list a { padding-block: clamp(4px, .8vh, 12px); }
}