/* Proposal 2026-09-18: "The road". Styles for everything between the approved hero and closing.
   Two materials only: sky (one sentence, the world, the vehicle) and paper (reading).
   Red is reserved for what a person changed: the vehicle, the pen, the visitor's own choice. */
.road-page {
  --rd-sky: #b3dbee;
  --rd-paper: #fffdf6;
  --rd-sheet: #fffffc;
  --rd-ink: #152621;
  --rd-quiet: #3f5a52;
  --rd-red: #d8382f;
  --rd-sand: #fcd6a9;
  --rd-display: var(--font-display);
  --rd-hand: "Reenie Beanie", "Segoe Print", "Bradley Hand", cursive;
  background: var(--rd-paper);
}
.road-page .rd-defs { position: absolute; }
.road-page .rd-loading { min-height: 100svh; margin: 0; padding: 40px 6%; background: var(--rd-sky); }
.road-page .rd-width { width: min(1240px, 88%); margin-inline: auto; }

.road-page .rd-statement {
  font-family: var(--rd-display); font-weight: 600; font-size: clamp(36px, 4.6vw, 70px);
  line-height: 1.03; letter-spacing: -.048em; margin: 0; text-wrap: balance;
}
.road-page .rd-heading {
  font-family: var(--rd-display); font-weight: 600; font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.08; letter-spacing: -.04em; margin: 0 0 30px; text-wrap: balance;
}

/* ------------------------------------------------------------------ paper */
.road-page .rd-paper {
  position: relative; background-color: var(--rd-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .16 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 1. recognition */
.road-page .rd-recognition { padding-block: clamp(84px, 10vw, 160px) clamp(90px, 10vw, 170px); scroll-margin-top: 0; }
.road-page .rd-recognition-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 8vw, 130px); align-items: start; margin-top: clamp(56px, 7vw, 110px); }
.road-page .rd-recognition .rd-statement { font-size: clamp(40px, 6.2vw, 96px); max-width: 12em; transition: opacity .17s ease, filter .17s ease; }
.road-page .rd-recognition .rd-statement[data-swapping] { opacity: .15; filter: blur(3px); }
.road-page .rd-roles { display: flex; flex-wrap: wrap; gap: 8px 34px; margin-top: clamp(30px, 3.4vw, 52px); }
.road-page .rd-roles button {
  border: 0; background: none; color: var(--rd-quiet); font-size: 18px; padding: 8px 2px 14px; min-height: 44px;
  background-repeat: no-repeat; background-position: left bottom 4px; background-size: 100% 9px;
}
.road-page .rd-roles button:hover { color: var(--rd-ink); }
.road-page .rd-roles button[aria-pressed="true"] {
  color: var(--rd-ink); font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C22 2 38 8 60 4 S98 3 118 5' fill='none' stroke='%23d8382f' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.road-page .rd-lede { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; margin: 0; color: var(--rd-ink); max-width: 30em; }
.road-page .rd-chores { list-style: none; margin: -6px 0 0; padding: 0; transition: opacity .17s ease; }
.road-page .rd-chores[data-swapping] { opacity: 0; }
.road-page .rd-chores li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 11px 0; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.5; color: var(--rd-quiet); }
.road-page .rd-chores svg { width: 28px; height: 10px; margin-top: 9px; }
.road-page .rd-chores path { fill: none; stroke: var(--rd-ink); stroke-width: 1.7; stroke-linecap: round; }
.road-page .rd-turn { font-family: var(--rd-display); font-weight: 600; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.25; letter-spacing: -.025em; margin: clamp(30px, 3.4vw, 50px) 0 0; }

/* ------------------------------------------------------------------ sky */
.road-page .rd-sky { position: relative; isolation: isolate; background: var(--rd-sky); }
.road-page .rd-idea, .road-page .rd-route-pin {
  background: var(--rd-sky) url('./art/landscape-panorama-a3.webp') center top / auto 200%;
}
.road-page .rd-idea { display: grid; grid-template-rows: 1fr auto; min-height: min(880px, 94svh); overflow: hidden; }
.road-page .rd-sky-copy { padding-top: clamp(76px, 13svh, 150px); padding-bottom: 30px; }
.road-page .rd-sky-copy p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 35em; margin: clamp(22px, 2.4vw, 34px) 0 0; color: #29463d; }

.road-page .rd-clouds { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.road-page .rd-cloud { position: absolute; width: clamp(130px, 17vw, 270px); height: auto; overflow: visible; animation: rd-drift 110s ease-in-out infinite alternate; }
.road-page .rd-cloud-1 { top: 11%; right: 7%; }
.road-page .rd-cloud-2 { top: 40%; right: 27%; width: clamp(96px, 11vw, 176px); animation-duration: 150s; animation-direction: alternate-reverse; }
.road-page .rd-cloud-3 { top: 9%; right: 16%; width: clamp(96px, 12vw, 190px); animation-duration: 140s; }
.road-page .rd-cloud-edge { top: 27%; right: -70px; scale: -1 1; animation: none; }
.road-page .rd-cloud-4 { top: 31%; }
@keyframes rd-drift { from { transform: translateX(-46px); } to { transform: translateX(58px); } }

.road-page .rd-strip { position: relative; height: clamp(190px, 33svh, 330px); }
.road-page .rd-scene, .road-page .rd-plants-layer, .road-page .rd-rig-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.road-page .rd-scene { -webkit-mask-image: linear-gradient(to top, #000 70%, transparent 99%); mask-image: linear-gradient(to top, #000 70%, transparent 99%); }
.road-page .rd-plants-layer, .road-page .rd-rig-layer { pointer-events: none; }

/* ------------------------------------------------------------------ 3. example */
.road-page .rd-example { padding-block: clamp(90px, 10vw, 160px) clamp(90px, 9vw, 150px); }
.road-page .rd-example-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.road-page .rd-example-story { padding-top: clamp(0px, 3vw, 46px); }
.road-page .rd-example-story p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.62; margin: 0 0 20px; max-width: 31em; color: var(--rd-quiet); }
.road-page .rd-example-story p:last-of-type { color: var(--rd-ink); font-weight: 600; }
.road-page .rd-ink-button { border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--rd-ink); font-size: 15px; padding: 8px 0 5px; margin-top: 14px; min-height: 40px; }

.road-page .rd-sheet-figure { margin: 0; }
.road-page .rd-sheet-wrap { width: 100%; max-width: 560px; margin-inline: auto; transform: rotate(1.1deg); }
.road-page .rd-sheet { position: relative; width: 560px; height: 740px; transform-origin: top left; padding: 46px 50px 40px; color: #22302b; font-size: 14px; }
.road-page .rd-sheet-outline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.road-page .rd-sheet-outline path { fill: var(--rd-sheet); stroke: var(--rd-ink); stroke-width: 2.3; stroke-linejoin: round; }
.road-page .rd-sheet header { display: flex; justify-content: space-between; font-size: 11.5px; color: #5a6b64; padding-bottom: 12px; border-bottom: 1px solid #c9d1cb; }
.road-page .rd-sheet-project { font-size: 11.5px; color: #5a6b64; margin: 14px 0 0; }
.road-page .rd-sheet h3 { font-family: var(--rd-display); font-size: 27px; letter-spacing: -.035em; font-weight: 600; margin: 6px 0 30px; line-height: 1.1; }
.road-page .rd-sheet h4 { font-size: 11.5px; font-weight: 600; color: #5a6b64; margin: 30px 0 10px; letter-spacing: 0; }
.road-page .rd-sheet-item { position: relative; }
.road-page .rd-sheet-item p { font-size: 14.5px; line-height: 1.5; margin: 0; max-width: 322px; color: #22302b; }
.road-page .rd-sheet-item small { display: block; font-size: 11px; color: #6c7c75; margin-top: 6px; }
.road-page .rd-sheet footer { position: absolute; left: 50px; right: 50px; bottom: 38px; border-top: 1px solid #c9d1cb; padding-top: 13px; font-size: 11px; line-height: 1.5; color: #6c7c75; }

.road-page .rd-pen { position: absolute; overflow: visible; pointer-events: none; clip-path: inset(-10% 100% -10% -4%); }
.road-page .rd-pen path { fill: none; stroke: var(--rd-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.road-page .rd-struck, .road-page .rd-circled { position: relative; display: inline-block; white-space: nowrap; }
.road-page .rd-struck .rd-pen { left: -3%; top: 8%; width: 106%; height: 84%; }
.road-page .rd-circled .rd-pen { left: -14%; top: -28%; width: 128%; height: 156%; }
.road-page .rd-pen-tick { left: -38px; top: -7px; width: 32px; height: 27px; }
.road-page .rd-pen-arrow { position: absolute; left: -58px; top: 12px; width: 54px; height: 31px; }
.road-page .rd-hand { position: absolute; left: 340px; top: -4px; width: 136px; font-family: var(--rd-hand); font-size: 27px; line-height: .92; color: var(--rd-red); transform: rotate(-3deg); opacity: 0; }
.road-page .rd-hand-2 { transform: rotate(2deg); top: 2px; }
.road-page .rd-hand-3 { top: 18px; left: 348px; width: 118px; font-size: 25px; transform: rotate(-2deg); }
.road-page .rd-sheet.is-inked .rd-pen { animation: rd-wipe .55s cubic-bezier(.3, .6, .3, 1) forwards; }
.road-page .rd-sheet.is-inked .rd-hand { animation: rd-write .5s ease-out forwards; }
.road-page .rd-sheet-item:nth-of-type(1) .rd-pen { animation-delay: .25s; }
.road-page .rd-sheet-item:nth-of-type(1) .rd-hand { animation-delay: .7s; }
.road-page .rd-sheet-item:nth-of-type(2) .rd-pen { animation-delay: 1.35s; }
.road-page .rd-sheet-item:nth-of-type(2) .rd-hand { animation-delay: 1.85s; }
.road-page .rd-sheet-item:nth-of-type(3) .rd-circled .rd-pen { animation-delay: 2.55s; }
.road-page .rd-sheet-item:nth-of-type(3) .rd-hand { animation-delay: 3.05s; }
.road-page .rd-sheet-item:nth-of-type(3) .rd-pen-arrow { animation-delay: 3.4s; }
@keyframes rd-wipe { to { clip-path: inset(-10% -4% -10% -4%); } }
@keyframes rd-write { from { opacity: 0; translate: -4px 0; } to { opacity: 1; translate: 0 0; } }
.road-page .rd-sheet[data-reviewed="false"] .rd-pen, .road-page .rd-sheet[data-reviewed="false"] .rd-hand { visibility: hidden; }
/* Narrow screens: the sheet reflows at reading size instead of shrinking, pen notes move under their line. */
.road-page .rd-sheet[data-flow="true"] { width: auto; height: auto; padding: 34px 26px 30px 44px; }
.road-page .rd-sheet[data-flow="true"] .rd-sheet-item p { max-width: none; }
.road-page .rd-sheet[data-flow="true"] .rd-hand { position: static; display: block; width: auto; margin: 8px 0 0; font-size: 25px; }
.road-page .rd-sheet[data-flow="true"] .rd-pen-arrow { display: none; }
.road-page .rd-sheet[data-flow="true"] .rd-pen-tick { left: -32px; }
.road-page .rd-sheet[data-flow="true"] footer { position: static; margin-top: 34px; }
.road-page .rd-sheet-figure figcaption { font-size: 13px; line-height: 1.5; color: var(--rd-quiet); margin: 26px auto 0; max-width: 560px; }

.road-page .rd-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); margin-top: clamp(80px, 9vw, 140px); }
.road-page .rd-rules h3 {
  font-family: var(--rd-display); font-size: 21px; letter-spacing: -.025em; font-weight: 600; margin: 0 0 14px; padding-bottom: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C24 2 40 8 62 4 S100 3 118 6' fill='none' stroke='%23152621' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 74px 8px no-repeat;
}
.road-page .rd-rules p { font-size: 16px; line-height: 1.58; color: var(--rd-quiet); margin: 0; }

/* ------------------------------------------------------------------ 4. the route */
.road-page .rd-route-pin { position: relative; overflow: hidden; display: grid; grid-template-rows: auto auto; padding-top: clamp(70px, 10svh, 120px); }
.road-page .rd-route .rd-statement { font-size: clamp(30px, min(4vw, 6.4svh), 60px); }
.road-page .rd-stops { display: grid; gap: 44px; margin-top: clamp(30px, 5svh, 58px); }
.road-page .rd-stop { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 8px clamp(30px, 5vw, 80px); max-width: 1060px; }
.road-page .rd-stop header { grid-row: span 2; }
.road-page .rd-stop h3 { font-family: var(--rd-display); font-size: clamp(24px, min(2.3vw, 3.8svh), 34px); letter-spacing: -.035em; font-weight: 600; margin: 0; line-height: 1.1; }
.road-page .rd-price { font-family: var(--rd-display); font-size: clamp(24px, min(2.3vw, 3.8svh), 34px); letter-spacing: -.035em; font-weight: 600; line-height: 1.15; margin: 2px 0 0; color: var(--rd-ink); opacity: .78; font-variant-numeric: tabular-nums; }
.road-page .rd-stop-facts { font-size: 15px; font-weight: 600; margin: 4px 0 0; color: var(--rd-ink); }
.road-page .rd-stop > p:last-child { font-size: clamp(15.5px, min(1.2vw, 2.1svh), 17.5px); line-height: 1.58; margin: 0; color: #29463d; max-width: 39em; }
.road-page .rd-strip-route { margin-top: clamp(16px, 3svh, 40px); height: clamp(200px, 34svh, 330px); }
.road-page .rd-route-note { font-size: 12.5px; color: #35524a; margin: clamp(18px, 3svh, 34px) 0 0; max-width: 1060px; }

.road-page .rd-route[data-mode="pinned"] { height: calc(100svh + 2300px); }
.road-page .rd-route[data-mode="pinned"] .rd-route-pin { position: sticky; top: 0; height: 100svh; grid-template-rows: 1fr auto; }
.road-page .rd-route[data-mode="pinned"] .rd-stops { gap: 0; }
.road-page .rd-route[data-mode="pinned"] .rd-stop { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .28s ease, transform .28s ease, visibility 0s .28s; }
.road-page .rd-route[data-mode="pinned"] .rd-stop[data-active="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity .34s ease .08s, transform .34s ease .08s; }

.road-page .rd-signs { position: absolute; inset: 0; }
.road-page .rd-sign {
  position: absolute; width: 158px; height: 133px; margin-left: -79px; padding: 0; border: 0; color: var(--rd-ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 148'%3E%3Cfilter id='r' x='-6%25' y='-6%25' width='112%25' height='112%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3'/%3E%3C/filter%3E%3Cg filter='url(%23r)' stroke='%23152621' stroke-linejoin='round'%3E%3Cpath d='M83 60 L92 60 L93 146 L82 146 Z' fill='%23c9a06c' stroke-width='2.2'/%3E%3Cpath d='M7 12 L168 7 L171 63 L6 68 Z' fill='%23fffaf0' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
.road-page .rd-sign[aria-pressed="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 148'%3E%3Cfilter id='r' x='-6%25' y='-6%25' width='112%25' height='112%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3'/%3E%3C/filter%3E%3Cg filter='url(%23r)' stroke='%23152621' stroke-linejoin='round'%3E%3Cpath d='M83 60 L92 60 L93 146 L82 146 Z' fill='%23c9a06c' stroke-width='2.2'/%3E%3Cpath d='M7 12 L168 7 L171 63 L6 68 Z' fill='%23fcd6a9' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E");
  transform: scale(1.08) rotate(-1deg);
}
.road-page .rd-sign:hover { transform: scale(1.05); }
.road-page .rd-sign:focus-visible { outline-offset: 2px; }
.road-page .rd-sign span { position: absolute; left: 10px; right: 8px; text-align: center; transform: rotate(-1.7deg); white-space: nowrap; }
.road-page .rd-sign-name { top: 14px; font-family: var(--rd-display); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.road-page .rd-sign-price { top: 35px; font-size: 12px; color: #3f5a52; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 5. the letter */
.road-page .rd-letter-section { padding-block: clamp(96px, 11vw, 180px) clamp(110px, 12vw, 190px); }
.road-page .rd-letter-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 8vw, 130px); align-items: start; }
.road-page .rd-letter p { font-size: clamp(17.5px, 1.4vw, 20px); line-height: 1.64; margin: 0 0 22px; max-width: 34em; color: #22302b; }
.road-page .rd-letter .rd-signature { font-family: var(--rd-hand); font-size: clamp(58px, 5vw, 78px); line-height: 1; margin: 34px 0 0; color: var(--rd-ink); transform: rotate(-4deg); transform-origin: left center; width: fit-content; }
.road-page .rd-letter .rd-signature-role { font-size: 14px; color: var(--rd-quiet); margin: 8px 0 0; }
.road-page .rd-portrait { margin: clamp(0px, 5vw, 84px) 0 0; }
.road-page .rd-portrait-frame { position: relative; aspect-ratio: 300 / 380; max-width: 330px; display: grid; place-items: center; transform: rotate(-1.6deg); }
.road-page .rd-portrait-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.road-page .rd-portrait-frame path { fill: #f3efe2; stroke: var(--rd-ink); stroke-width: 2.3; stroke-linejoin: round; }
.road-page .rd-portrait-frame span { position: relative; font-family: var(--rd-hand); font-size: 27px; line-height: 1; color: var(--rd-quiet); text-align: center; }

/* ------------------------------------------------------------------ review helper (not part of the design) */
.rd-review { position: fixed; left: 14px; bottom: 14px; z-index: 50; display: flex; gap: 14px; align-items: center; padding: 8px 14px; border: 1px solid #15262133; border-radius: 22px; background: #fffefaf2; font-size: 12px; }
.rd-review a { color: var(--quiet); text-underline-offset: 3px; }
#rd-error { position: fixed; top: 12px; left: 12px; z-index: 60; background: var(--paper); color: #933b3e; padding: 12px; font-size: 14px; }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1080px) {
  .road-page .rd-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .road-page .rd-sign { width: 136px; height: 115px; margin-left: -68px; }
  .road-page .rd-sign-name { top: 12px; font-size: 13px; }
  .road-page .rd-sign-price { top: 30px; font-size: 10.5px; }
}
@media (max-width: 760px) {
  .road-page .rd-recognition-grid, .road-page .rd-example-grid, .road-page .rd-letter-grid { grid-template-columns: minmax(0, 1fr); }
  .road-page .rd-chores { margin-top: 0; }
  .road-page .rd-idea { min-height: 0; }
  .road-page .rd-sky-copy { padding-top: 70px; }
  .road-page .rd-strip, .road-page .rd-strip-route { height: 210px; }
  .road-page .rd-stop { grid-template-columns: minmax(0, 1fr); }
  .road-page .rd-stop header { grid-row: auto; }
  .road-page .rd-rules { grid-template-columns: minmax(0, 1fr); }
  .road-page .rd-sheet-wrap { transform: none; }
  .road-page .rd-sign { width: 92px; height: 92px; margin-left: -46px; }
  .road-page .rd-sign span { left: 4px; right: 4px; white-space: normal; line-height: 1.05; }
  .road-page .rd-sign-name { top: 10px; font-size: 10.5px; }
  .road-page .rd-sign-price { display: none; }
  .road-page .rd-portrait-frame { max-width: 240px; }
  .road-page .rd-clouds { display: none; }   /* no room beside the text; the strips carry the world here */
  .road-page .rd-signs { display: none; }   /* the four stops are already listed in full above the strip */
  .road-page .rd-route-pin { padding-top: 70px; }
  .rd-review { font-size: 11px; gap: 10px; max-width: calc(100vw - 28px); overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .road-page .rd-cloud { animation: none; }
  .road-page .rd-pen { clip-path: none; animation: none !important; }
  .road-page .rd-hand { opacity: 1; animation: none !important; }
  .road-page .rd-sign, .road-page .rd-stop, .road-page .rd-statement, .road-page .rd-chores { transition: none !important; }
}