/* ==========================================================================
   18 Majors
   One stylesheet for one page, set to the 18 Majors layout in the Nicklaus
   Brand Figma file (frame "20-majors-v2"). Rules are ordered to follow the
   document: base, utilities, header and navigation, hero, then each page
   section. Desktop values are the Figma's own at 1440px wide; the clamp()
   terms carry them down to a phone.
   ========================================================================== */

:root {
  /* Brand palette */
  --forest:      #16502F; /* hero, identity number panel */
  --forest-mid:  #1B4332; /* victory, design translation */
  --forest-deep: #113A23; /* footer, the identity section's seam */
  --green:       #166734; /* buttons, the collections divider */
  --gold:        #E3BE53;
  --gold-rule:   #C9A96E; /* the Contact Us outline */
  --sand:        #C5A880; /* eyebrow dot on dark grounds */
  --cream:       #F9F8F3;
  --ink:         #111111;
  --ink-mid:     #454545;
  --ink-soft:    #706E6A;
  --cream-soft:  #A09E9A; /* muted text on dark grounds */
  --rule-light:  rgba(255, 255, 255, .15);
  --rule-dark:   rgba(44, 44, 44, .1);

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

  /* Layout rhythm. The Figma is 1440 wide with an 80px gutter, so the content
     column is 1280; the two manifesto sections sit in a 1200 column. */
  --page-gutter:   clamp(20px, 5.55vw, 80px);
  --content-width: 1280px;
  --block-gap:     clamp(48px, 6.9vw, 99px);   /* header to first plate */
  --plate-gap:     clamp(16px, 2.8vw, 40px);   /* between side-by-side plates */
  --caption-gap:   16px;
}

/* ----------------------------------------------------------------- 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.6;
  -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;
  text-transform: uppercase;
}

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

.stack > * + * { margin-top: var(--block-gap); }

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

.section { padding-block: clamp(60px, 8.33vw, 120px); }

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

/* The eyebrow: a 4px dot, an 8px gap and an 11px mono label. */
.section-label {
  margin: 0 0 clamp(16px, 1.67vw, 24px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section-label::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--ink);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.section-label__number::after { content: "\00a0/\00a0"; }

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1.3;
  letter-spacing: 0;
}

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

.section-header .section-title { margin-top: 0; }
.section-header .section-intro { margin-top: clamp(16px, 1.67vw, 24px); }

/* Instrument Serif is drawn tight and high-contrast, so the display type sets
   at its natural tracking. */
.statement {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.44vw, 64px);
  line-height: 1.1;
  letter-spacing: 0;
}
.statement--secondary {
  font-size: clamp(26px, 3.05vw, 44px);
  line-height: 1.2;
}

.caption {
  margin: var(--caption-gap) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-soft);
}
.caption--center { text-align: center; }
/* The two editorial captions in Maker's Marks are set in the body face. */
.caption--sans {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

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

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

/* A plate is a photograph held to the frame the Figma drew for it: the frame
   sets the ratio, the photograph fills it. */
.plate {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.plate > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plate--top > img { object-position: center top; }

.plate--16x9  { aspect-ratio: 16 / 9; }
.plate--32x21 { aspect-ratio: 32 / 21; }
.plate--32x17 { aspect-ratio: 32 / 17; }
.plate--3x2   { aspect-ratio: 3 / 2; }
.plate--3x4   { aspect-ratio: 3 / 4; }
.plate--4x5   { aspect-ratio: 620 / 782; }
.plate--square { aspect-ratio: 608 / 600; }
.plate--tile  { aspect-ratio: 405 / 380; }
.plate--wide  { aspect-ratio: 1280 / 821; }

.figure-full { width: 100%; }
.figure-full .plate { aspect-ratio: 72 / 41; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--plate-gap);
}
.grid-2--loose { gap: clamp(24px, 4.44vw, 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(20px, 2.2vw, 32px) clamp(20px, 2.8vw, 40px);
  background: var(--forest);
}

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

/* A 44px square target around a 28px 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: -8px;
  padding: 0;
}
.has-js .menu-toggle { display: grid; }

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

.button-outline {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid var(--gold-rule);
  border-radius: 1px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: .1em;
  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(20px, 2.2vw, 32px) - 9px);
  right: calc(clamp(20px, 2.8vw, 40px) - 10px);
  padding: 13px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .1em;
  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;
  font-weight: 500;
  color: var(--cream-soft);
  vertical-align: super;
}

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

/* A solid forest field, one screen tall, with the drawn lockup (the golfer
   standing in for the J of MAJORS, the founding line beneath) at its centre.
   The Figma frame is 1440x929 with the lockup 762 wide, 52.9% of the width. */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(100vh, 929px);
  padding: clamp(120px, 14vh, 200px) var(--page-gutter) clamp(90px, 10vh, 150px);
  background: var(--forest);
}

/* A phone's browser toolbars are part of its screen, so 100vh is taller than
   what a visitor can actually see. Dynamic units measure the space that is
   really there. */
@supports (height: 1dvh) {
  .hero { min-height: min(100dvh, 929px); }
}

.hero__title {
  width: 100%;
  margin: 0;
}
.hero__title img {
  width: clamp(280px, 52.9vw, 762px);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* ------------------------------------------------------------ manifesto -- */

/* Two statement sections in a 1200 column: the foundation (150 above, 180
   below) and the evolution (180 above and below). */
.manifesto { padding-block: clamp(80px, 12.5vw, 180px); }
.manifesto--first { padding-top: clamp(70px, 10.4vw, 150px); }
.manifesto .section-label { margin-bottom: clamp(28px, 3.33vw, 48px); }
.manifesto--second .section-label { margin-bottom: clamp(30px, 3.9vw, 56px); }

.columns {
  margin-top: clamp(32px, 3.9vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5.55vw, 80px);
}
.columns p {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
}

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

/* Two 720x850 panels, the drawn numeral on forest and the silhouette on gold.
   Each piece of artwork is sized as a share of its panel's width, so the pair
   scales as one and the art stays where the Figma put it. */
.identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--forest-deep);
}

.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, 1.8vw, 26px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
}

.identity__panel--number { background: var(--forest); }
.identity__panel--number .section-label         { color: var(--cream-soft); }
.identity__panel--number .section-label::before { background: var(--sand); }
.identity__art--number {
  width: 55%;
  height: auto;
  transform: translateY(2.5%);
}

.identity__panel--mark { background: var(--gold); }
.identity__panel--mark .section-label         { color: var(--forest-deep); }
.identity__panel--mark .section-label::before { background: var(--sand); }
.identity__art--mark {
  width: 48%;
  height: auto;
  transform: translateY(-2.5%);
}

/* ------------------------------------------------------- logo contrasts -- */

.section--contrasts { padding-block: clamp(72px, 11.1vw, 160px); }
.section--contrasts .section-header { margin-bottom: var(--block-gap); }

/* ----------------------------------------------------------- storefront -- */

/* Follows the contrasts section with a short top margin and a long bottom. */
.section--storefront { padding-block: clamp(20px, 1.95vw, 28px) clamp(64px, 9.7vw, 140px); }
.section--storefront .section-header { margin-bottom: var(--block-gap); }

/* -------------------------------------------------------------- archive -- */

.section--archive { padding-block: clamp(50px, 6.6vw, 95px) clamp(60px, 8.33vw, 120px); }
.section--archive .section-header { margin-bottom: var(--block-gap); }

/* The contemporary code: the drawn 18, gold, laid over each archive
   photograph. It is positioned as a share of the frame so it travels with
   the crop. */
.plate > .archive-plate__code {
  position: absolute;
  left: 50%;
  top: 17.2%;
  width: auto;
  height: 67%;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
}
.plate--4x5 > .archive-plate__code {
  top: 24%;
  height: 58.3%;
}

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

.victory {
  display: grid;
  justify-items: center;
  min-height: min(1400px, 97vw);
  padding: clamp(60px, 8.33vw, 120px) var(--page-gutter);
  text-align: center;
}

/* The signature: the golfer alone above the 18 MAJORS wordmark. */
.brand-signature {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 23px);
  margin: 0;
}
.brand-signature__golfer {
  width: auto;
  height: clamp(64px, 6.9vw, 99px);
}
.brand-signature__wordmark {
  width: clamp(112px, 11.7vw, 168px);
  height: auto;
}

.victory__title {
  margin: clamp(14px, 1.6vw, 23px) 0 clamp(24px, 3.2vw, 46px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 13.9vw, 200px);
  line-height: 1;
  color: var(--gold);
}

/* The ledger: year, championship, a leader and the venue on one line, in a
   1000px column. */
.victories {
  width: 100%;
  max-width: 1000px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.victories li {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.67vw, 24px);
  padding: 4px 0;
  color: #FFF;
}
.victories li + li { margin-top: 16px; }

.victories__year {
  flex: none;
  width: 60px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
}
.victories__dot {
  flex: none;
  font-size: 12px;
  opacity: .3;
}
.victories__event {
  flex: none;
  width: 240px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
}
.victories__leader {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, .22);
  transform: translateY(-5px);
}
.victories__venue {
  flex: 0 1 36.6%;
  font-size: 14px;
  text-align: right;
}

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

.collections {
  display: grid;
  justify-items: center;
  min-height: min(840px, 58vw);
  padding-block: clamp(80px, 12.8vw, 185px);
  text-align: center;
}

.collections__flourish {
  width: 80px;
  height: 24px;
  margin: 0 auto clamp(28px, 3.33vw, 48px);
}

.collections__label {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--forest-mid);
}

.collections__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 13.9vw, 200px);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--forest-mid);
}

.collections__divider {
  width: 64px;
  height: 1px;
  margin: clamp(28px, 3.33vw, 48px) auto;
  background: var(--green);
}

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

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

.section--product { padding-block: clamp(60px, 8.33vw, 120px) clamp(50px, 6.6vw, 95px); }
.section--product .section-header { margin-bottom: var(--block-gap); }

.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5.55vw, 80px);
  align-items: center;
}
.product + .product { margin-top: var(--block-gap); }

.product__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.05vw, 44px);
  line-height: 1.2;
}
.product__text {
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.product__copy > * + * { margin-top: clamp(20px, 2.2vw, 32px); }
.product--flat .plate { aspect-ratio: 600 / 602; }
.product__media--dress .plate { aspect-ratio: 600 / 611; }

/* The product page as artwork: a browser frame with the lights in its
   toolbar and the specification beside the photograph. */
.spec-card {
  margin-top: var(--block-gap);
  border: 1px solid #CCC;
  border-radius: 8px;
  background: #FAF7F5;
  overflow: hidden;
}

.spec-card__chrome {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  background: #EBEBEB;
}
.spec-card__chrome img {
  width: 66px;
  height: auto;
}

.spec-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6.7vw, 96px);
  align-items: center;
  padding: clamp(24px, 2.8vw, 40px) clamp(24px, 5.55vw, 80px) 0;
}
.spec-card__body .plate { aspect-ratio: 510.5 / 800; }
.spec-card__copy { padding-bottom: clamp(24px, 2.8vw, 40px); }

.spec-card__sku {
  margin: 0 0 clamp(24px, 2.8vw, 40px);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: #1C1C1C;
}
.spec-card__copy .product__title {
  font-size: clamp(28px, 3.33vw, 48px);
  line-height: 1.1;
}
.spec-card__copy .product__text {
  margin-top: clamp(16px, 1.67vw, 24px);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-mid);
}

.spec-table {
  width: 100%;
  margin: clamp(32px, 3.9vw, 56px) 0 0;
  border-collapse: collapse;
}
.spec-table th,
.spec-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-dark);
  font-weight: 500;
  line-height: 1.3;
}
.spec-table th {
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-align: left;
}
.spec-table td {
  font-size: 14px;
  color: #1C1C1C;
  text-align: right;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.2vw, 32px);
  margin-top: clamp(32px, 4.44vw, 64px);
}

.button-solid {
  display: inline-block;
  padding: 16px 32px;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  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 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 13px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  color: #1C1C1C;
}
.button-text img {
  width: 16px;
  height: 16px;
  transition: transform .3s ease;
}
.button-text:hover img { transform: translateX(5px); }

/* --------------------------------------------------------- maker's marks -- */

.section--marks { padding-block: 0 clamp(72px, 11.1vw, 160px); }
.section--marks .section-header { margin-bottom: var(--block-gap); }

/* The cap, twice: studio and course, edge to edge on a near-black ground. */
.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #1C1C1C;
}
.diptych .plate { aspect-ratio: 640 / 608; }
.diptych-figure { padding-bottom: clamp(16px, 2.8vw, 40px); }

/* --------------------------------------------------- archive to product -- */

.section--translation { padding-block: clamp(60px, 8.33vw, 120px) clamp(72px, 11.1vw, 160px); }
.section--translation .section-header { margin-bottom: clamp(40px, 5.55vw, 80px); }
.section--translation .grid-2 + .grid-2 { margin-top: clamp(40px, 5.55vw, 80px); }
.section--translation .caption { margin-top: 0; }

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

.section--world { padding-block: clamp(60px, 8.33vw, 120px) clamp(80px, 12.5vw, 180px); }
.section--world .section-header { margin-bottom: var(--block-gap); }
.section--world .stack > * + * { margin-top: clamp(56px, 8.33vw, 120px); }
.section--world .figure-full .caption { margin-top: clamp(16px, 1.67vw, 24px); }

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

.team .section-header { margin-bottom: var(--block-gap); }

.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(17, 17, 17, .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;
  font-weight: 500;
  line-height: 1.5;
  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.7;
  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 -- */

/* The conclusion: one line of the brand's promise, the business facts, a
   rule and the small print. */
.site-footer {
  padding-block: clamp(80px, 12.15vw, 175px) clamp(60px, 6.9vw, 100px);
  background: var(--forest-deep);
  color: #FFF;
  text-align: center;
}
.site-footer .container { max-width: calc(1240px + var(--page-gutter) * 2); }

.site-footer__statement {
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.33vw, 48px);
  line-height: 1.2;
}

.site-footer__contact {
  margin: clamp(28px, 3.33vw, 48px) auto 0;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  color: var(--cream-soft);
}
.site-footer__contact a { color: var(--sand); }
.site-footer__contact a:hover { color: var(--gold); }

.site-footer__rule {
  height: 1px;
  margin: clamp(36px, 4.44vw, 64px) 0;
  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: 12px;
  line-height: 1.35;
}
.site-footer__meta span:first-child { color: var(--cream-soft); }
.site-footer__meta span:last-child  { color: var(--sand); text-transform: uppercase; }

/* ---------------------------------------------------------------- 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
   product card and the spec card stop fitting side by side, 768px is where the
   identity panels stack (per the Figma annotation), 720px is where every other
   side-by-side grid becomes one column, 480px is where the ledger folds. */

@media (max-width: 900px) {
  .columns { grid-template-columns: 1fr; }
  .spec-card__body { grid-template-columns: 1fr; }
  .spec-card__body .plate { aspect-ratio: 4 / 5; }
  .product { grid-template-columns: 1fr; }
  .product__media--dress { order: -1; }

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

@media (max-width: 768px) {
  .identity { grid-template-columns: 1fr; }
  .identity__panel { aspect-ratio: 5 / 4; }
  .identity__art--number { width: 36%; }
  .identity__art--mark { width: 31%; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .grid-2,
  .grid-3,
  .diptych,
  .enquiry-form__row { grid-template-columns: 1fr; }
  .figure-full .plate { aspect-ratio: 4 / 3; }
  .plate--16x9,
  .plate--32x21,
  .plate--32x17,
  .plate--wide { aspect-ratio: 4 / 3; }
  .plate--32x17 > .archive-plate__code {
    top: 14%;
    height: 72%;
  }
  .victories__event { width: auto; flex: 1 1 auto; }
  .victories__leader { display: none; }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
  .victories li { flex-wrap: wrap; row-gap: 2px; }
  .victories__venue {
    flex: 1 0 100%;
    padding-left: calc(60px + 12px + 12px + 24px);
    text-align: left;
    font-size: 13px;
    color: var(--cream-soft);
  }
  .site-footer__meta { justify-content: center; text-align: center; }
}