/* The road map fold: the page is a printed road map. It folds in six panels like an accordion,
   turns over in the air and opens again on the page printed on its back. */
:root {
  --desk: #10221f;
  --desk-line: #24403a;
  --paper-a: #f3ead8;
  --ink-a: #1e2b29;
  --soft-a: #5c625a;
  --road: #d9482c;
  --sun: #e9b546;
  --sea: #95c1bb;
  --land: #ebdfc4;
  --beach: #f7edd2;
  --hill: #d4c39e;
  --wood: #c0c996;
  --paper-b: #18323d;
  --ink-b: #f3ead8;
  --soft-b: #a9b9b5;
  --line-b: #2c4b56;
  --shadow: #04100e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--desk);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--desk);
  perspective: 1800px;
  perspective-origin: 50% 50%;
}

/* ---- the desk ---- */
.desk {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.45) 100%),
    var(--desk);
}
.desk__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--desk-line);
  stroke-width: 1.2;
  opacity: 0.5;
}

.shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: var(--shadow);
  opacity: 0;
  will-change: transform, filter, opacity;
}

/* ---- the folding sheet ---- */
.rig {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--W, 100vw);
  height: var(--H, 100vh);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  pointer-events: none;
  visibility: hidden;
}
.stage.is-moving .rig { visibility: visible; }

.col {
  position: absolute;
  top: 0;
  width: var(--w, 33.33vw);
  height: var(--H, 100vh);
  transform-style: preserve-3d;
}
.col--m { left: var(--w, 33.33vw); }
.col--l { left: calc(var(--w, 33.33vw) * -1); transform-origin: 100% 50%; }
.col--r { left: var(--w, 33.33vw); transform-origin: 0 50%; }

.cell {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--h, 50vh);
  transform-style: preserve-3d;
}
.cell--top { top: 0; }
.cell--bot { top: var(--h, 50vh); transform-origin: 50% 0; }

.face {
  position: absolute;
  inset: -0.25px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face--back { transform: rotateY(180deg); }
.face--front { background: var(--paper-a); }
.face--back { background: var(--paper-b); }

/* a copy of a whole page, moved so that the panel shows its own piece */
.page.page--copy {
  inset: auto;
  left: calc(var(--col) * var(--w) * -1);
  top: calc(var(--row) * var(--h) * -1);
  width: var(--W);
  height: var(--H);
  visibility: visible;
}

.face__shade,
.face__shine {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.face__shade { background: #000; }
.face__shine { background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.4) 100%); }

/* ---- the live pages ---- */
.live {
  position: absolute;
  inset: 0;
}
.stage.is-moving .live { visibility: hidden; }

.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  font-family: 'Instrument Sans Variable', 'Instrument Sans', system-ui, sans-serif;
  --pad: clamp(16px, 3.2vw, 52px);
}
.page.is-off { visibility: hidden; }

.page--a { background: var(--paper-a); color: var(--ink-a); }
.page--b { background: var(--paper-b); color: var(--ink-b); }

/* the grain of the paper, the same on the live page and on its copies */
.page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page--b::before { opacity: 0.22; }

/* the creases left by the folds: a valley and a ridge side by side */
.creases {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--crease, 0.5);
}
.crease { position: absolute; display: block; }
.crease--v1, .crease--v2 { top: 0; bottom: 0; width: 14px; margin-left: -7px; }
.crease--v1 { left: 33.3333%; }
.crease--v2 { left: 66.6667%; }
.crease--h { left: 0; right: 0; top: 50%; height: 14px; margin-top: -7px; }
.page--a .crease--v1 { background: linear-gradient(90deg, transparent, rgba(80, 60, 30, 0.16) 48%, rgba(255, 255, 255, 0.55) 52%, transparent); }
.page--a .crease--v2 { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55) 48%, rgba(80, 60, 30, 0.16) 52%, transparent); }
.page--a .crease--h { background: linear-gradient(180deg, transparent, rgba(80, 60, 30, 0.16) 48%, rgba(255, 255, 255, 0.55) 52%, transparent); }
.page--b .crease--v1 { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3) 48%, rgba(255, 255, 255, 0.12) 52%, transparent); }
.page--b .crease--v2 { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 48%, rgba(0, 0, 0, 0.3) 52%, transparent); }
.page--b .crease--h { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12) 48%, rgba(0, 0, 0, 0.3) 52%, transparent); }

/* ---- shared bits ---- */
.bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: clamp(40px, 6vh, 60px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: clamp(26px, 2.3vw, 34px); height: auto; overflow: visible; }
.brand__tile { fill: var(--ink-a); }
.brand__road { fill: none; stroke: var(--road); stroke-width: 5.5; stroke-linecap: round; }
.brand__dash { fill: none; stroke: var(--paper-a); stroke-width: 1.2; stroke-dasharray: 2.4 2.6; stroke-linecap: round; }
.brand__name {
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 750;
  font-size: clamp(19px, 1.7vw, 26px);
  letter-spacing: -0.02em;
}
.page--b .brand__tile { fill: var(--ink-b); }
.page--b .brand__dash { stroke: var(--paper-b); }

.kicker {
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--road);
}
.page--b .kicker { color: var(--sun); }

.title {
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 780;
  font-stretch: 84%;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.title em { font-style: normal; color: var(--road); }

.lede {
  font-size: clamp(14px, min(1.25vw, 2.2vh), 19px);
  line-height: 1.45;
  max-width: 36ch;
}
.page--a .lede { color: var(--soft-a); }
.page--b .lede { color: var(--soft-b); }

/* ---- page A ---- */
.links { display: flex; gap: clamp(6px, 1vw, 14px); }
.link {
  position: relative;
  display: inline-block;
  padding: 7px 12px 8px;
  color: inherit;
  text-decoration: none;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  perspective: 160px;
}
/* a road sign plate that swings down behind the word */
.link__plate {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: var(--sun);
  box-shadow: inset 0 0 0 2px var(--ink-a);
  transform-origin: 50% 0;
  transform: rotateX(-96deg);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s 0.05s;
}
.link__text { position: relative; }
.link:focus-visible { outline: 2px solid var(--road); outline-offset: 3px; border-radius: 8px; }

.bar__tag {
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 600;
  padding: 7px 14px 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.hero {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(8px, 2vh, 24px);
}
.hero__text { display: flex; flex-direction: column; gap: clamp(10px, 2.2vh, 22px); align-items: flex-start; }
.page--a .title { font-size: clamp(40px, min(7vw, 11.5vh), 128px); }

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 0;
  background: none;
  color: var(--paper-a);
  padding: 0 12px 0 26px;
  height: clamp(48px, 7vh, 62px);
  font: inherit;
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 650;
  font-size: clamp(15px, 1.2vw, 19px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cta__bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ink-a);
  transition: transform 0.7s cubic-bezier(0.34, 1.8, 0.5, 1), background-color 0.3s;
}
.cta__label {
  position: relative;
  font-stretch: 88%;
  transition: font-stretch 0.6s cubic-bezier(0.34, 1.6, 0.5, 1);
}
/* the little folded map: three panels in a zigzag that open flat on hover */
.cta__map {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 34px;
  border-radius: 999px;
  background: var(--sun);
  align-items: center;
  justify-content: center;
  perspective: 80px;
}
.cta__map i {
  display: block;
  width: 7px;
  height: 16px;
  background: var(--paper-a);
  box-shadow: inset 0 1.4px 0 var(--ink-a), inset 0 -1.4px 0 var(--ink-a), inset 0.7px 0 0 rgba(30, 43, 41, 0.45), inset -0.7px 0 0 rgba(30, 43, 41, 0.45);
  transition: transform 0.6s cubic-bezier(0.34, 1.7, 0.5, 1), margin 0.6s cubic-bezier(0.34, 1.7, 0.5, 1);
}
.cta__map i:nth-child(1) { transform: rotateY(62deg); margin-right: -3px; box-shadow: inset 1.4px 0 0 var(--ink-a), inset 0 1.4px 0 var(--ink-a), inset 0 -1.4px 0 var(--ink-a); }
.cta__map i:nth-child(2) { transform: rotateY(-62deg); background: #f9d98a; }
.cta__map i:nth-child(3) { transform: rotateY(62deg); margin-left: -3px; box-shadow: inset -1.4px 0 0 var(--ink-a), inset 0 1.4px 0 var(--ink-a), inset 0 -1.4px 0 var(--ink-a); }
/* the road printed across the little map: it shows once the map is open */
.cta__map::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21px;
  height: 16px;
  margin: -8px 0 0 -10.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 16'%3E%3Cpath d='M2 13 C6 13 6 4 10.5 7 S15 3 19 3' fill='none' stroke='%23d9482c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s, transform 0.5s cubic-bezier(0.34, 1.9, 0.5, 1);
}
.cta:active .cta__bg { transform: scale(0.95); transition-duration: 0.12s; }
.cta:focus-visible { outline: none; }
.cta:focus-visible .cta__bg { box-shadow: 0 0 0 3px var(--paper-a), 0 0 0 5px var(--road); }

.facts {
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  padding-top: clamp(4px, 1.4vh, 16px);
}
.fact dt {
  font-size: clamp(11px, 0.85vw, 13px);
  color: var(--soft-a);
  font-weight: 500;
}
.fact dd {
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, min(2.3vw, 3.6vh), 34px);
  letter-spacing: -0.02em;
}

.mapcard {
  position: relative;
  height: min(100%, 78vh);
  max-height: 640px;
  border-radius: clamp(14px, 1.6vw, 24px);
  overflow: hidden;
  background: var(--sea);
  box-shadow: inset 0 0 0 2px var(--ink-a);
  cursor: pointer;
}
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map__sea { fill: var(--sea); }
.map__waves { fill: none; stroke: #c4e0db; stroke-width: 2.4; stroke-linecap: round; }
.map__land { fill: var(--land); }
.map__beach { fill: none; stroke: var(--beach); stroke-width: 9; }
.map__hills { fill: none; stroke: var(--hill); stroke-width: 2; }
.map__wood { fill: var(--wood); }
.map__lake { fill: var(--sea); }
.map__road { fill: none; stroke: var(--road); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.map__dash { fill: none; stroke: var(--paper-a); stroke-width: 1.8; stroke-dasharray: 7 7; stroke-linecap: round; }
.map__scale { fill: none; stroke: var(--ink-a); stroke-width: 2; }
.map__scale text {
  fill: var(--ink-a);
  stroke: none;
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
}
.pin { cursor: default; }
.pin__body path { fill: var(--ink-a); }
.pin__body circle { fill: var(--sun); }
.pin__body { transition: transform 0.55s cubic-bezier(0.34, 1.9, 0.5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.pin text {
  font-size: 16px;
  font-weight: 650;
  fill: var(--ink-a);
  paint-order: stroke;
  stroke: var(--land);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.car__body { fill: var(--ink-a); }
.car__glass { fill: #bfe0dc; }

/* ---- page B ---- */
.back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  color: var(--paper-b);
  height: clamp(40px, 5.6vh, 50px);
  padding: 0 20px 0 16px;
  font: inherit;
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 650;
  font-size: clamp(14px, 1.05vw, 17px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.back__bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--sun);
  transition: transform 0.7s cubic-bezier(0.34, 1.8, 0.5, 1);
}
.back__arrow {
  position: relative;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s cubic-bezier(0.34, 1.9, 0.5, 1);
}
.back__label { position: relative; font-stretch: 88%; transition: font-stretch 0.6s cubic-bezier(0.34, 1.6, 0.5, 1); }
.back:active .back__bg { transform: scale(0.94); transition-duration: 0.12s; }
.back:focus-visible { outline: none; }
.back:focus-visible .back__bg { box-shadow: 0 0 0 3px var(--paper-b), 0 0 0 5px var(--sun); }

.route {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(8px, 2vh, 24px);
}
.route__head { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 20px); min-width: 0; }
.page--b .title { font-size: clamp(42px, min(7.6vw, 12.5vh), 140px); }

.profile { margin-top: clamp(4px, 1.5vh, 18px); }
.profile__svg { display: block; width: 100%; height: clamp(70px, 16vh, 150px); overflow: visible; }
.profile__area { fill: var(--line-b); }
.profile__line { fill: none; stroke: var(--sun); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.profile__cap {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  font-size: clamp(11px, 0.9vw, 13px);
  color: var(--soft-b);
  border-top: 1.5px solid var(--line-b);
}
.profile__peak { color: var(--ink-b); font-weight: 600; }

.legs {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid var(--line-b);
}
.leg {
  display: grid;
  grid-template-columns: minmax(70px, 0.6fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 12px;
  padding: clamp(9px, 1.9vh, 18px) 4px;
  border-bottom: 1.5px solid var(--line-b);
  transition: transform 0.6s cubic-bezier(0.34, 1.7, 0.5, 1), background-color 0.25s;
}
.leg__day { font-size: clamp(11px, 0.85vw, 13px); color: var(--soft-b); font-weight: 500; }
.leg__way {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 620;
  font-size: clamp(14px, min(1.35vw, 2.2vh), 21px);
  letter-spacing: -0.01em;
  transition: gap 0.6s cubic-bezier(0.34, 1.9, 0.5, 1);
}
.leg__arrow {
  width: 30px;
  height: 10px;
  fill: none;
  stroke: var(--sun);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transition: transform 0.6s cubic-bezier(0.34, 1.9, 0.5, 1);
}
.leg__km {
  font-weight: 600;
  font-size: clamp(12px, 0.95vw, 14px);
  padding: 4px 10px 5px;
  border-radius: 999px;
  background: var(--line-b);
  transition: transform 0.6s cubic-bezier(0.34, 1.9, 0.5, 1), background-color 0.25s, color 0.25s;
}

/* ---- hover, only where there is a real pointer ---- */
@media (hover: hover) {
  .link:hover .link__plate {
    transform: rotateX(0deg);
    opacity: 1;
    transition: transform 0.75s cubic-bezier(0.3, 1.9, 0.45, 1), opacity 0.12s;
  }
  .cta:hover .cta__bg { transform: scale(1.06, 1.12); background: #0f1a19; }
  .cta:hover .cta__label { font-stretch: 100%; }
  .cta:hover .cta__map i:nth-child(1),
  .cta:hover .cta__map i:nth-child(2),
  .cta:hover .cta__map i:nth-child(3) { transform: rotateY(0deg); margin: 0; }
  .cta:hover .cta__map::after { opacity: 1; transform: scale(1); transition-delay: 0.15s; }
  .mapcard:hover .pin__body { transform: translateY(-4px) scale(1.12); }
  .pin:hover .pin__body { transform: translateY(-8px) scale(1.3); }
  .back:hover .back__bg { transform: scale(1.07, 1.14); }
  .back:hover .back__arrow { transform: translateX(-5px); }
  .back:hover .back__label { font-stretch: 100%; }
  .leg:hover { transform: translateX(8px); }
  .leg:hover .leg__way { gap: 14px; }
  .leg:hover .leg__arrow { transform: translateX(3px); }
  .leg:hover .leg__km { background: var(--sun); color: var(--paper-b); transform: scale(1.08); }
}

/* ---- narrow screens: the same pages, stacked ---- */
@media (max-width: 720px) {
  .links { display: none; }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(14px, 2.4vh, 24px);
  }
  .hero__text { gap: clamp(10px, 1.8vh, 16px); }
  .page--a .title { font-size: clamp(36px, min(12.5vw, 7.4vh), 64px); }
  .mapcard { height: auto; min-height: 0; }
  .facts { gap: 22px; }
  .route {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: clamp(14px, 2.4vh, 26px);
  }
  .page--b .title { font-size: clamp(40px, min(13vw, 8vh), 70px); }
  .leg { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: clamp(8px, 1.4vh, 13px) 2px; }
  .leg__day { grid-column: 1 / -1; }
  .leg__km { grid-row: 2; grid-column: 2; }
}

/* low wide screens (the catalogue preview): a little tighter */
@media (min-width: 721px) and (max-height: 620px) {
  .hero__text { gap: 10px; }
  .facts { padding-top: 0; }
  .leg { padding: 7px 4px; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}