/* Homepage sections */
[hidden] { display: none !important; }

.h-hero { position: relative; height: 100svh; min-height: 560px; color: var(--ivory); background: var(--ink); overflow: hidden; }
.h-hero .media { position: absolute; inset: 0; background: var(--ink); }
.h-hero .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45)); }
.h-hero-copy { position: absolute; left: var(--gutter); bottom: clamp(30px, 6vw, 70px); right: var(--gutter); }
.h-hero-copy p { font-size: clamp(44px, 7.4vw, 124px); max-width: 11ch; margin-bottom: 22px; }
.h-hero-copy p em { font-style: italic; }
.h-scroll { position: absolute; right: var(--gutter); bottom: clamp(30px, 6vw, 70px); writing-mode: vertical-rl; }
@media (max-width: 620px) { .h-scroll { display: none; } }

.h-intro { padding: clamp(110px, 16vw, 230px) var(--gutter); text-align: center; max-width: 1100px; margin: 0 auto; }
.h-intro p { font: 300 clamp(28px, 3.5vw, 50px)/1.22 var(--f-serif); margin: 26px auto 0; max-width: 28ch; }
.h-intro p em { font-style: italic; }

.h-sec-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap;
  padding: 0 var(--gutter) 34px; max-width: var(--max); margin: 0 auto 50px; border-bottom: 1px solid var(--rule); }
.h-sec-head h2 { font-size: clamp(56px, 9vw, 150px); }
.h-sec-head h2 em { font-style: italic; }
.h-sec-head p { margin: 0; max-width: 34ch; font-style: italic; font-size: 20px; }

/* collection: lookbook, alternating sizes */
.h-collection { padding-bottom: clamp(100px, 14vw, 200px); }
/* Collection: a magazine spread, not a grid. Each car gets its own layout (h-car--1 … --6): the name
   changes size and position, the number is sometimes a huge outlined numeral, sometimes a small
   typeset folio, and the photo switches between portrait and landscape. */
.h-cars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.6vw, 28px);
  row-gap: clamp(90px, 12vw, 190px); padding: 0 var(--gutter); max-width: var(--max); margin: 0 auto; }
.h-car { display: grid; column-gap: clamp(18px, 2.4vw, 44px); position: relative; }
.h-car-img { grid-area: img; position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.h-car-img .media { position: absolute; inset: 0; }
.h-car-img .alt { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
/* Only the photo itself swaps; the name and numbers around it don't trigger it. */
.h-car-img:hover .alt { opacity: 1; }
.h-car-no { grid-area: no; font: 400 clamp(110px, 15vw, 260px)/.78 var(--f-display); letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px var(--ink); pointer-events: none; }
.h-car-name { grid-area: name; margin: 0; font: italic 400 clamp(40px, 5vw, 84px)/.92 var(--f-display); }
.h-car-meta { grid-area: meta; font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; }
.h-car:hover .h-car-name { color: var(--oxblood); }
.h-car-name, .h-car-no { transition: color .5s var(--ease); }

@media (min-width: 761px) {
  /* 1 · photo left, outlined numeral and an oversized name stacked at its foot */
  .h-car--1 { grid-column: 1 / -1; grid-template-columns: 7fr 5fr; grid-template-areas: "img ." "img no" "img name" "img meta"; grid-template-rows: 1fr auto auto auto; }
  .h-car--1 .h-car-name { font-size: clamp(70px, 10.5vw, 190px); margin-left: -.42em; position: relative; z-index: 1; }
  /* 2 · name first, set small and high; photo pushed right; typeset folio instead of a numeral */
  .h-car--2 { grid-column: 3 / -1; grid-template-columns: 4fr 6fr 1fr; grid-template-areas: "name img ." "meta img ." ". img ."; grid-template-rows: auto auto 1fr; text-align: right; }
  .h-car--2 .h-car-no { display: none; }
  .h-car--2 .h-car-name { padding-top: 8%; }
  /* 3 · wide landscape plate, huge numeral left, name right-aligned under it */
  .h-car--3 { grid-column: 1 / -1; grid-template-columns: 4fr 8fr; grid-template-areas: "img img" "no name" "no meta"; }
  .h-car--3 .h-car-img { aspect-ratio: 16 / 9; }
  .h-car--3 .h-car-no { margin-top: 18px; }
  .h-car--3 .h-car-name { justify-self: end; text-align: right; font-size: clamp(56px, 8vw, 140px); margin-top: 22px; }
  .h-car--3 .h-car-meta { justify-self: end; }
  /* 4 · narrow photo with the name running vertically up its edge */
  .h-car--4 { grid-column: 2 / 9; grid-template-columns: auto 1fr; grid-template-areas: "name img" ". meta"; }
  .h-car--4 .h-car-name { writing-mode: vertical-rl; transform: rotate(180deg); align-self: end; font-size: clamp(64px, 8.5vw, 150px); }
  .h-car--4 .h-car-no { display: none; }
  .h-car--4 .h-car-meta { margin-top: 18px; }
  /* 5 · photo right, outlined numeral and the name stacked in the column beside it (the name sat on
     the photo in ivory, but this car is black and was hard to read) */
  .h-car--5 { grid-column: 1 / -1; grid-template-columns: 3fr 9fr; grid-template-areas: "no img" "name img" "meta img"; grid-template-rows: auto auto 1fr; }
  .h-car--5 .h-car-img { aspect-ratio: 3 / 2; width: 100%; align-self: start; }
  .h-car--5 .h-car-no { align-self: start; }
  .h-car--5 .h-car-name { align-self: start; font-size: clamp(64px, 8vw, 140px); margin-top: .15em; }
  .h-car--5 .h-car-meta { align-self: end; }
  /* 6 · square plate, centred, an oxblood numeral sitting on its top edge */
  .h-car--6 { grid-column: 4 / 11; grid-template-columns: 1fr; grid-template-areas: "no" "img" "name" "meta"; justify-items: center; text-align: center; }
  .h-car--6 .h-car-img { aspect-ratio: 1; width: 100%; }
  .h-car--6 .h-car-no { margin-bottom: -.3em; position: relative; z-index: 2; -webkit-text-stroke-color: var(--oxblood); }
  .h-car--6 .h-car-name { margin-top: 26px; font-size: clamp(48px, 6vw, 104px); }
}
@media (max-width: 760px) {
  .h-car { grid-column: 1 / -1; grid-template-columns: 1fr auto; grid-template-areas: "img img" "name no" "meta meta"; }
  .h-car-no { font-size: 84px; align-self: end; }
  .h-car-name { align-self: end; font-size: 52px; margin-top: 16px; }
  .h-car:nth-child(even) { width: 86%; justify-self: end; grid-template-columns: auto 1fr; grid-template-areas: "img img" "no name" "meta meta"; }
  .h-car:nth-child(even) .h-car-name { justify-self: end; text-align: right; }
  .h-car:nth-child(3n) .h-car-img { aspect-ratio: 4 / 3; }
  .h-car:nth-child(3n) .h-car-name { font-size: 64px; }
}

/* experience */
.h-exp { padding-bottom: clamp(100px, 14vw, 200px); }
.h-steps { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--max); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 70px); }
.h-step-no { font: 400 13px/1 var(--f-type); color: var(--oxblood); }
.h-steps h3 { font: italic 400 clamp(30px, 2.8vw, 42px)/1 var(--f-display); margin: 20px 0 16px; }
.h-steps p { margin: 0; color: var(--ink-soft); }
@media (max-width: 820px) { .h-steps { grid-template-columns: 1fr; } }

/* journal: every story in a sideways strip that starts on the page margin and runs off the edge */
.h-journal { padding-bottom: clamp(100px, 14vw, 200px); }
.h-journal-nav { display: flex; align-items: center; gap: 10px; }
.h-jbtn { font: 400 20px/1 var(--f-display); width: 44px; height: 44px; border: 1px solid var(--line, rgba(28,27,25,.25)); border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, opacity .3s; }
.h-jbtn:hover:not(:disabled) { background: var(--ink); color: var(--ivory); }
.h-jbtn:disabled { opacity: .25; cursor: default; }
.h-journal-nav .label { margin-left: 8px; }
.h-journal-strip { --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 27vw, 400px); column-gap: clamp(14px, 2vw, 30px);
  align-items: start; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* Sideways only. With overflow-x alone the browser makes the y axis scrollable too, and the cards'
     reveal offset gave it ~20px of vertical scroll that swallowed page scrolling over the strip. */
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  padding: 0 var(--edge) 40px; scroll-padding-inline: var(--edge); }
.h-journal-strip::-webkit-scrollbar { display: none; }
.h-journal-strip:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.h-story { scroll-snap-align: start; }
.h-story .media { aspect-ratio: 4 / 5; margin-bottom: 16px; overflow: hidden; }
.h-story:nth-child(even) { margin-top: 12%; }
.h-story h3 { font: 400 clamp(26px, 2.4vw, 38px)/1.02 var(--f-display); margin: 10px 0 0; }
.h-story h3 em { font-style: italic; }
.h-story--all { aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
  border: 1px solid var(--ink); text-align: center; transition: background .4s var(--ease), color .4s var(--ease); }
.h-story--all .display { font-size: clamp(40px, 4vw, 64px); line-height: 1; }
.h-story--all:hover { background: var(--ink); color: var(--ivory); }
@media (max-width: 760px) { .h-journal-strip { grid-auto-columns: 78vw; } .h-story:nth-child(even) { margin-top: 0; } .h-jbtn { display: none; } }

/* route */
.h-route { padding: clamp(80px, 10vw, 150px) var(--gutter); text-align: center; border-top: 1px solid var(--rule); }
.h-route ol { list-style: none; margin: 40px 0 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: clamp(16px, 5vw, 80px); flex-wrap: wrap; }
.h-route li { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.h-route li .display { font-size: clamp(40px, 6vw, 96px); }
.h-route li.home .display { font-style: italic; color: var(--oxblood); }
.h-route li + li::before { content: ""; position: absolute; left: calc(-1 * clamp(16px, 5vw, 80px) / 2 - 14px); top: calc(clamp(40px, 6vw, 96px) * .52); width: 28px; border-top: 1px solid var(--ink); }
.h-route .typed { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 620px) { .h-route ol { flex-direction: column; } .h-route li + li::before { display: none; } }

/* off-season */
.h-off { display: grid; grid-template-columns: 1fr 1fr; background: var(--forest); color: var(--forest-ink); min-height: 90svh; }
.h-off-img .media { height: 100%; min-height: 420px; }
.h-off-copy { align-self: center; padding: clamp(50px, 8vw, 120px); }
.h-off-copy h2 { font-size: clamp(48px, 6vw, 96px); margin: 22px 0 26px; }
.h-off-copy h2 em { font-style: italic; }
.h-off-copy p { max-width: 34ch; margin: 0 0 34px; font-size: 21px; }
@media (max-width: 820px) { .h-off { grid-template-columns: 1fr; } .h-off-img .media { min-height: 0; aspect-ratio: 4 / 5; } }

/* inquire */
.h-inquire { padding: clamp(110px, 14vw, 200px) var(--gutter); display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 110px); max-width: var(--max); margin: 0 auto; }
.h-inq-head h2 { font-size: clamp(64px, 9vw, 150px); font-style: italic; }
.h-inq-head p { font-style: italic; font-size: 21px; max-width: 26ch; }
.h-form { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 34px; align-content: start; }
.h-form label, .h-form fieldset { display: grid; gap: 8px; }
.h-form .wide, .h-form fieldset, .h-submit, .h-thanks { grid-column: 1 / -1; }
.h-form fieldset { border: 0; padding: 0; margin: 0; }
.h-form legend { margin-bottom: 14px; padding: 0; }
.h-form input:not([type=checkbox]), .h-form textarea {
  font: 400 21px/1.4 var(--f-serif); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); padding: 6px 0; border-radius: 0; width: 100%; resize: vertical;
}
.h-form input:focus, .h-form textarea:focus { outline: none; border-color: var(--ink); }
.h-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; transition: border-color .3s, background .3s; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .media { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; }
.chip span { font: italic 400 17px/1 var(--f-display); }
.chip:has(input:checked) { border-color: var(--oxblood); background: rgba(94, 31, 30, .06); }
.chip:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 2px; }
.h-submit { justify-self: start; background: var(--ink); color: var(--ivory); border: 0; padding: 18px 34px; cursor: pointer; transition: background .4s var(--ease); }
.h-submit:hover { background: var(--oxblood); }
.h-thanks { font-size: 22px; font-style: italic; }
.h-thanks .script { font-size: 64px; font-style: normal; }
@media (max-width: 820px) { .h-inquire { grid-template-columns: 1fr; } .h-form { grid-template-columns: 1fr; } }

.h-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.h-error { grid-column: 1 / -1; color: var(--oxblood); font-style: italic; margin: 0; }

/* Temporary switch between shortlisted hero lines while we choose. */
.h-lines { position: absolute; top: 96px; right: var(--gutter); z-index: 3; display: flex; gap: 2px;
  background: rgba(28, 27, 25, .55); backdrop-filter: blur(6px); padding: 3px; border-radius: 999px; }
.h-lines button { font: inherit; letter-spacing: inherit; color: var(--ivory); background: none; border: 0;
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer; opacity: .7; }
.h-lines button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); opacity: 1; }