/* Add your patch: four tiles, the journey strip and one real record. */

/* ---------- Hero ---------- */
.ap-hero { position: relative; min-height: 66svh; display: grid; align-items: end; color: #fff; isolation: isolate; padding: calc(var(--header-h) + 40px) 0 clamp(48px, 7vw, 88px); overflow: hidden; }
.ap-hero-media { position: absolute; inset: 0; z-index: -2; }
.ap-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.ap-hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,18,12,.86), rgba(6,18,12,.42) 55%, rgba(6,18,12,.28)); }
.ap-hero .eyebrow { color: var(--sprout); }
.ap-hero h1 { font-size: var(--t-88); margin-top: 18px; max-width: 15ch; }
.ap-hero h1 em { color: var(--sprout); font-style: italic; }
.ap-hero .lede { color: rgba(255,255,255,.84); margin-top: 18px; max-width: 30em; }
.ap-hero .btn { margin-top: 28px; }

/* ---------- Four tiles: the photograph carries it, the words do not ---------- */
.ap-what { padding: clamp(64px, 8vw, 120px) 0; background: var(--canvas); }
.ap-what h2 { font-size: var(--t-64); color: var(--forest); max-width: 16ch; margin-bottom: clamp(28px, 4vw, 48px); }
.ap-what h2 em { color: var(--leaf); font-style: italic; }
/* Four photographs at four sizes, bottoms aligned, so the row reads as a contact sheet and not
   as four cards. The tallest carries the first line, the widest the last. */
.ap-tiles { list-style: none; display: grid; grid-template-columns: 5fr 3.6fr 4.2fr 5.4fr; gap: 14px; align-items: end; }
.ap-tile:nth-child(1) { aspect-ratio: 3 / 4; }
.ap-tile:nth-child(2) { aspect-ratio: 3 / 3.4; }
.ap-tile:nth-child(3) { aspect-ratio: 3 / 3.9; }
.ap-tile:nth-child(4) { aspect-ratio: 4 / 3.3; }
.ap-tile { position: relative; border-radius: var(--r-12); overflow: hidden; display: grid; align-content: end; gap: 6px; padding: 22px; color: #fff; isolation: isolate; }
.ap-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ap-tile:hover img { transform: scale(1.05); }
.ap-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,18,12,.88), rgba(6,18,12,.28) 58%, rgba(6,18,12,.06)); }
.ap-tile-n { display: none; }
.ap-tile b { font-family: var(--display); font-weight: 500; font-size: var(--t-36); line-height: 1.02; }
.ap-tile > span:last-child { font-size: var(--t-14); line-height: 1.45; color: rgba(255,255,255,.78); }

/* ---------- The journey: seven stations on one thread ----------
   Seven numbered columns joined by a dashed line became a route you travel: one strip that scrolls
   sideways, stations hung above and below the thread in turn, and the thread itself drawn as far as
   you have gone (see the script at the foot of add-a-patch.njk). No numerals, no pictograms. */
.ap-journey { padding: clamp(64px, 8vw, 120px) 0; background: var(--mist); overflow: hidden; }
.ap-journey-head { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.ap-journey h2 { font-size: var(--t-64); color: var(--forest); max-width: 16ch; }
.ap-journey h2 em { color: var(--leaf); font-style: italic; }
.ap-journey-aside { display: grid; gap: clamp(20px, 2.6vw, 32px); justify-items: end; padding-bottom: 8px; }
.ap-journey .lede { max-width: 38ch; }

/* The arrows are the globe control from css/pages/home.css, reset for a light band. */
.ap-route-arrows { display: flex; gap: 8px; }
.ap-arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--forest); cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease); }
.ap-arrow svg { width: 16px; height: 16px; }
.ap-arrow:hover { background: rgba(78, 154, 91, .12); border-color: var(--leaf); }
.ap-arrow:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
.ap-arrow:disabled { opacity: .3; cursor: default; }

.ap-route { position: relative; margin-top: clamp(32px, 4.5vw, 56px); }
/* The strip breaks the page grid: it starts at the column edge and runs off the right of the
   screen, so it reads as a journey that carries on. */
.ap-route-strip { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.ap-route-strip::-webkit-scrollbar { display: none; }
.ap-route-strip:focus-visible { outline: 2px solid var(--leaf); outline-offset: -4px; }
.ap-route-inner { position: relative; width: max-content; height: clamp(330px, 27vw, 368px); }
.ap-route-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.ap-route-thread .ap-march { stroke: var(--leaf); animation: ap-march 3.4s linear infinite; }
/* one whole dash period (5 + 4.5) times three, or the pattern jumps each loop */
@keyframes ap-march { to { stroke-dashoffset: -28.5px; } }

.ap-route-list { position: relative; z-index: 1; list-style: none; display: flex; height: 100%; }
/* two equal rows, so the thread runs exactly along the join and the dot sits on it */
.ap-station { flex: 0 0 auto; width: 300px; display: grid; grid-template-rows: 1fr 1fr; padding-right: 8px; scroll-snap-align: center; }
.ap-station-copy { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: 30px; }
.ap-station:nth-child(even) .ap-station-copy { grid-row: 2; align-self: start; padding-bottom: 0; padding-top: 30px; }
.ap-station-copy h3 { font-family: var(--display); font-weight: 500; font-size: var(--t-28); line-height: 1.04; color: var(--forest); max-width: 15ch; }
.ap-station-copy p { margin-top: 10px; max-width: 26ch; font-size: var(--t-14); line-height: 1.5; color: var(--stone); }
.ap-station-dot { grid-column: 1; grid-row: 1 / -1; align-self: center; justify-self: start; width: 13px; height: 13px; margin-top: -1px; border-radius: 50%; background: var(--mist); box-shadow: 0 0 0 1.5px var(--line-strong); transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.ap-station.is-lit .ap-station-dot { background: var(--sprout); box-shadow: 0 0 0 1.5px var(--moss), 0 0 0 5px rgba(169, 213, 160, .45); }
.ap-station.is-lit .ap-station-copy h3 { color: var(--forest); }
.ap-route-hint { display: none; margin-top: 14px; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); font-family: var(--display); font-style: italic; font-size: 15px; color: var(--moss); }

@media (max-width: 760px) {
  .ap-journey-head { grid-template-columns: 1fr; align-items: start; }
  .ap-journey-aside { justify-items: start; padding-bottom: 0; }
  .ap-route-arrows { display: none; }
  .ap-route-hint { display: block; }
  .ap-station { width: 264px; }
  .ap-route-inner { height: 360px; }
}
@media (prefers-reduced-motion: reduce) { .ap-route-thread .ap-march { animation: none; } }

/* ---------- The record, shown as a record ---------- */
.ap-record { position: relative; padding: clamp(72px, 9vw, 132px) 0; color: #fff; isolation: isolate; overflow: hidden; }
.ap-record-bg { position: absolute; inset: 0; z-index: -2; }
.ap-record-bg img { width: 100%; height: 100%; object-fit: cover; }
.ap-record-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(6,18,12,.94), rgba(6,18,12,.72) 52%, rgba(18,56,42,.6)); }
.ap-record-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ap-record-copy h2 { font-size: var(--t-64); max-width: 15ch; margin-top: 18px; }
.ap-record-copy h2 em { color: var(--sprout); font-style: italic; }
.ap-record-copy .eyebrow { color: var(--sprout); }
.ap-record-copy .lede { color: rgba(255,255,255,.78); margin-top: 18px; }
.ap-record-copy .btn { margin-top: 26px; }
/* The record is a filing card, not a glass panel: solid paper, a hard forest rule, an offset
   shadow, and forest bars top and foot so it reads as a label that was filled in and filed. */
.ap-record-card { background: var(--canvas); color: var(--ink); border: 1.5px solid var(--forest); box-shadow: 18px 18px 0 rgba(6, 18, 12, .78); }
.ap-record-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 12px clamp(16px, 1.8vw, 22px); background: var(--forest); color: var(--sprout); font: 500 11px / 1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.ap-record-top .money { color: rgba(255, 255, 255, .6); letter-spacing: .1em; }

.ap-record-rows { margin: 0; padding: 2px clamp(16px, 1.8vw, 22px); }
.ap-record-rows > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ap-record-rows > div:last-child { border-bottom: 0; }
.ap-record-rows dt { font: 500 11px / 1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.ap-record-rows dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.ap-record-rows dd.money, .ap-record-rows dd .money { font-size: 14px; }
.ap-record-coord { display: block; margin-top: 3px; color: var(--stone); letter-spacing: .04em; }
.ap-record-more { display: block; margin-top: 2px; font-size: 13px; color: var(--stone); }
.ap-record-rows .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; box-sizing: border-box; border: 2px solid var(--leaf); background: var(--leaf); vertical-align: middle; }

/* The matched field is the point of the whole record, so it takes the foot of the card. */
.ap-record-match { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; margin: 0; padding: 15px clamp(16px, 1.8vw, 22px) 17px; background: var(--forest); }
.ap-record-match-label { font: 500 11px / 1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ap-record-thread { display: flex; align-items: center; gap: 5px; }
.ap-record-thread .dot { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--sprout); }
.ap-record-thread .dot-urban { background: var(--sprout); }
.ap-record-thread .dot-wild { background: transparent; }
.ap-thread-line { flex: 1; max-width: 44px; height: 0; border-top: 1.5px dashed rgba(169, 213, 160, .7); }
.ap-record-match-name { grid-column: 1 / -1; font-family: var(--display); font-weight: 500; font-style: italic; font-size: var(--t-28); line-height: 1.1; color: var(--sprout); }
.ap-record-match-km { grid-column: 1 / -1; font: 400 13px / 1.3 var(--sans); color: rgba(255, 255, 255, .6); }
.ap-record-match-km b { font-weight: 500; color: #fff; }

@media (max-width: 1000px) {
  .ap-tiles { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .ap-tile { aspect-ratio: 3 / 4 !important; }
  .ap-record-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ap-hero { min-height: 78svh; }
  .ap-tiles { grid-template-columns: 1fr; gap: 10px; }
  .ap-tile { aspect-ratio: 4 / 3 !important; }
  .ap-tile { aspect-ratio: 16 / 10; }
  .ap-record-rows > div { grid-template-columns: 1fr; gap: 3px; }
  .ap-record-card { box-shadow: 10px 10px 0 rgba(6, 18, 12, .78); }
}