/* Axle & Awning: salt-pan chalk, graphite, a saltbush awning canvas; red earth lives in the photographs and the yard's dirt. */

@font-face { font-family: "Tilt Warp"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/tilt-warp-var.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/specimen/atkinson-hyperlegible-next-var.woff2") format("woff2"); }

@property --aa-set { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --aa-walk { syntax: "<number>"; inherits: true; initial-value: 0; }

.spec-axle-and-awning {
  --aa-chalk: #EEEBE3;
  --aa-sheet: #F8F6F1;
  --aa-lime: #E2DED4;
  --aa-ink: #2A2C2B;
  --aa-cream: #F6F3EC;
  --aa-bush: #56665A;
  --aa-bush-2: #5E6E61;
  --aa-bush-deep: #45534A;
  --aa-earth: #B4532A;
  --aa-earth-deep: #8F3F1E;
  --aa-sky: #A9D6EE;
  --aa-sky-deep: #7FB9D9;
  --aa-shadow: #1F2120;
  --aa-rule: rgba(42, 44, 43, .18);
  --aa-display: "Tilt Warp", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --aa-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --aa-s1: 4px; --aa-s2: 8px; --aa-s3: 12px; --aa-s4: 16px; --aa-s5: 24px; --aa-s6: 32px; --aa-s7: 48px; --aa-s8: 72px; --aa-s9: 112px; --aa-s10: 160px;
  --aa-margin: clamp(16px, 5vw, 72px);
  --aa-gutter: clamp(16px, 2.2vw, 32px);
  --aa-max: 1320px;
  --aa-nav-h: 64px;
  --aa-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/></filter><rect width='220' height='220' filter='url%28%23g%29'/></svg>");
  --aa-alu: linear-gradient(#d4d7d6 0 3px, transparent 3px 5px, rgba(31, 33, 32, .35) 5px 6px);
  --aa-canvas: repeating-linear-gradient(90deg, var(--aa-bush) 0 28px, var(--aa-sheet) 28px 48px);
  --aa-canvas-field: repeating-linear-gradient(90deg, var(--aa-bush) 0 72px, var(--aa-bush-2) 72px 144px);
  --aa-slide: cubic-bezier(.3, 0, .15, 1);
  --aa-hinge: cubic-bezier(.5, 0, .2, 1);
  background: var(--aa-chalk);
}
body.spec-axle-and-awning { margin: 0; }
.spec-axle-and-awning #spec-main { background: var(--aa-chalk); }

.aa-site {
  position: relative;
  color: var(--aa-ink);
  font: 400 clamp(1.0625rem, 1rem + .2vw, 1.1875rem)/1.6 var(--aa-text);
  background-color: var(--aa-chalk);
  background-image: var(--aa-pebbles, none), var(--aa-grain);
  background-size: 480px 480px, 220px 220px;
  background-blend-mode: normal, soft-light;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.aa-site *, .aa-site *::before, .aa-site *::after { box-sizing: border-box; }
.aa-site :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.aa-site :where(ul, ol) { padding: 0; list-style: none; }
.aa-site img { display: block; max-width: 100%; height: auto; }
.aa-site a { color: inherit; }
.aa-site :focus-visible { outline: 3px solid var(--aa-ink); outline-offset: 3px; border-radius: 2px; }
.aa-site [id] { scroll-margin-top: calc(var(--bar-h, 40px) + var(--aa-nav-h)); }

.aa-link { text-decoration: underline; text-decoration-color: var(--aa-sky-deep); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.aa-link:hover { text-decoration-color: var(--aa-ink); }
.aa-small { font-size: 1rem; line-height: 1.5; }
.aa-caption { font-size: 1rem; font-weight: 500; line-height: 1.45; }
.aa-lede { font-size: clamp(1.1875rem, 1rem + .6vw, 1.4375rem); font-weight: 400; line-height: 1.45; max-width: 46ch; }
.aa-h2 {
  font: 400 clamp(2.125rem, 1.1rem + 3.6vw, 4.5rem)/1 var(--aa-display); letter-spacing: -.01em; padding-block: .12em;
  font-variation-settings: "XROT" calc(-34 * (1 - var(--aa-l, 1))), "YROT" calc(10 * var(--aa-sgn, 1) * (1 - var(--aa-l, 1)));
  text-wrap: balance;
}
.aa-h3 { font: 400 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.1 var(--aa-display); }
.aa-word { position: relative; display: block; }

/* ---------- nav: the route, stop by stop ---------- */
.aa-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60;
  color: var(--aa-ink);
  background-color: var(--aa-chalk);
  background-image: var(--aa-grain); background-size: 220px 220px; background-blend-mode: soft-light;
}
.aa-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none; background: var(--aa-alu); }
.aa-nav__in { display: flex; align-items: center; gap: var(--aa-s5); height: var(--aa-nav-h); max-width: calc(var(--aa-max) + 2 * var(--aa-margin)); margin: 0 auto; padding: 0 var(--aa-margin); }
.aa-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.aa-mark { display: block; flex: none; }
.aa-brand__name { font: 400 20px/1 var(--aa-display); letter-spacing: -.005em; white-space: nowrap; }
.aa-route { position: relative; display: flex; align-items: stretch; margin-left: auto; height: 100%; font-weight: 600; font-size: 1rem; }
.aa-route::before { /* the road: a dashed centre line running under every stop to camp */
  content: ""; position: absolute; left: 18px; right: 30px; bottom: 15px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(42, 44, 43, .5) 0 12px, transparent 12px 22px);
}
.aa-route li { position: relative; display: flex; }
.aa-route a { display: flex; align-items: center; padding: 0 clamp(10px, 1.3vw, 18px) 12px; text-decoration: none; white-space: nowrap; }
.aa-route a::after { /* the stop */
  content: ""; position: absolute; left: 50%; bottom: 12px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--aa-chalk); box-shadow: inset 0 0 0 2px var(--aa-ink); transition: transform .3s var(--aa-slide), background-color .3s;
}
.aa-route a:hover::after, .aa-route a[aria-current="true"]::after { background: var(--aa-ink); transform: scale(1.35); }
.aa-route__camp a { color: var(--aa-ink); font-weight: 750; }
.aa-route__camp a::after { width: 16px; height: 16px; margin-left: -8px; bottom: 8px; background: var(--aa-sky); box-shadow: inset 0 0 0 2px var(--aa-ink), 0 0 0 2px var(--aa-chalk); }
.aa-route__camp a:hover::after { background: var(--aa-sky-deep); transform: none; }
.aa-route__small, .aa-menu { display: none; }
.aa-route__small { align-items: center; min-height: 44px; padding: 0 4px; font-weight: 750; text-decoration: underline; text-decoration-color: var(--aa-sky-deep); text-decoration-thickness: 3px; text-underline-offset: 6px; white-space: nowrap; }
.aa-menu { position: relative; }
.aa-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--aa-ink); font-weight: 650; }
.aa-menu summary::-webkit-details-marker { display: none; }
.aa-menu summary::before { content: ""; width: 14px; height: 10px; background: linear-gradient(var(--aa-ink) 0 2px, transparent 2px 4px, var(--aa-ink) 4px 6px, transparent 6px 8px, var(--aa-ink) 8px 10px); }
.aa-menu__list { position: absolute; right: 0; top: calc(100% + 14px); min-width: 230px; padding: 10px 8px; background: var(--aa-sheet); border-radius: 6px; box-shadow: 0 14px 30px rgba(31, 33, 32, .35); }
.aa-menu__list a { display: block; padding: 12px 14px; text-decoration: none; font-weight: 600; border-radius: 4px; }
.aa-menu__list a:hover { background: rgba(42, 44, 43, .07); }
@media (max-width: 1080px) {
  .aa-route { font-size: .9375rem; }
  .aa-route a { padding-inline: 9px; }
}
@media (max-width: 920px) {
  .spec-axle-and-awning { --aa-nav-h: 56px; }
  .aa-route { display: none; }
  .aa-route__small, .aa-menu { display: inline-flex; }
  .aa-route__small { margin-left: auto; }
  .aa-nav__in { gap: 14px; }
}
@media (max-width: 430px) { .aa-brand__name { font-size: 18px; } .aa-nav__in { gap: 10px; } }
@media (max-width: 370px) {
  .aa-brand__name { font-size: 16px; }
  .aa-brand { gap: 7px; }
  .aa-nav .aa-mark { width: 28px; height: 28px; }
  .aa-menu summary { padding: 0 9px; }
  .aa-menu summary::before { display: none; }
}

/* ---------- hero: the van lived in, full height; the headline in the sky above it ---------- */
.aa-hero {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: clamp(480px, calc(100svh - var(--bar-h, 40px) - var(--aa-nav-h)), 1000px);
  isolation: isolate; color: var(--aa-cream);
}
.aa-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #2f2a27; }
.aa-plate, .aa-plate img, .aa-van-poster, .aa-van-poster img, .aa-van-gl, .aa-dusk, .aa-glow, .aa-grade, .aa-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.aa-plate img, .aa-van-poster img { object-fit: cover; object-position: 50% 50%; }
.aa-plate img { transform-origin: 50% 50%; transform: scale(1.05); }
/* the photograph graded to the camp's own light: warm on the earth, a little cooler in the sky */
.aa-grade { pointer-events: none; background: linear-gradient(180deg, rgba(62, 84, 120, .16), rgba(62, 84, 120, 0) 34%), linear-gradient(0deg, rgba(180, 83, 42, .22), rgba(180, 83, 42, 0) 55%); mix-blend-mode: soft-light; }
.aa-dusk { background: linear-gradient(180deg, #25345E 0%, #3A4470 16%, #5A4868 27%, #4A3440 36%, #33231F 58%, #24160F 100%); mix-blend-mode: multiply; opacity: calc(var(--aa-dusk, 0) * .94); pointer-events: none; }
/* the last light along the ranges, and the sky gone to dusk blue above them */
.aa-glow { pointer-events: none; mix-blend-mode: screen; opacity: calc(var(--aa-dusk, 0) * .9);
  background: linear-gradient(180deg, rgba(62, 88, 150, .5) 0%, rgba(62, 88, 150, .18) 14%, rgba(214, 120, 84, .34) 20%, rgba(214, 120, 84, 0) 30%); }
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
  .aa-glow { background: linear-gradient(180deg, rgba(62, 88, 150, .5) 0%, rgba(62, 88, 150, .18) 10%, rgba(214, 120, 84, .34) 15%, rgba(214, 120, 84, 0) 24%); }
}
.aa-van-gl { display: block; opacity: 0; transition: opacity 240ms linear; }
.aa-drawn .aa-van-gl { opacity: 1; }
.aa-van-poster { animation: aa-poster 240ms 900ms both; }
.aa-gl .aa-van-poster { display: none; }
@keyframes aa-poster { from { opacity: 0; } to { opacity: 1; } }
/* shade for the words: the sky above the van, and the dirt under the controls */
.aa-scrim { pointer-events: none; background:
  radial-gradient(ellipse 58% 78% at 0% 8%, rgba(18, 20, 26, .62), rgba(18, 20, 26, .3) 55%, rgba(18, 20, 26, 0) 100%),
  linear-gradient(0deg, rgba(20, 18, 16, .5) 0%, rgba(20, 18, 16, 0) 22%); }
/* the awning's canvas along the top of the stage, wound out as the page opens */
.aa-hero__awning { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 40px; pointer-events: none; }
.aa-hero__awning::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(#eef0ef, #a9adac 70%, #7c8180); box-shadow: 0 2px 0 rgba(31, 33, 32, .35); }
.aa-hero__awning::after {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 34px; transform-origin: 50% 0;
  background: var(--aa-canvas);
  -webkit-mask: radial-gradient(circle at 24px 34px, transparent 9px, #000 9.5px) 0 0 / 48px 100%; mask: radial-gradient(circle at 24px 34px, transparent 9px, #000 9.5px) 0 0 / 48px 100%;
  filter: drop-shadow(0 6px 6px rgba(20, 18, 16, .3));
  animation: aa-unroll 1s .25s steps(8, end) both;
}
@keyframes aa-unroll { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.aa-head {
  grid-row: 1; position: relative; z-index: 2; display: grid; justify-items: start; gap: clamp(14px, 2.4vh, 26px);
  padding: calc(40px + clamp(22px, 5vh, 60px)) var(--aa-margin) 0; pointer-events: none;
}
.aa-head > * { pointer-events: auto; }
.aa-h1 {
  font: 400 clamp(3rem, .8rem + 5.6vw, 7.25rem)/.92 var(--aa-display);
  letter-spacing: -.012em; color: var(--aa-cream); text-shadow: 0 2px 28px rgba(16, 18, 24, .38);
}
.aa-h1-line { position: relative; display: block; width: max-content; --x: 0; --y: 0; }
.aa-h1-line + .aa-h1-line { margin-top: .02em; }
.aa-gl .aa-h1-line { --x: -24; --y: 8; }
.aa-h1 .aa-word { font-variation-settings: "XROT" var(--x), "YROT" var(--y); }
.aa-sub { max-width: 40ch; font-size: clamp(1.0625rem, .95rem + .35vw, 1.3125rem); font-weight: 450; line-height: 1.45; text-shadow: 0 1px 12px rgba(16, 18, 24, .6); }
.aa-sill {
  grid-row: 3; position: relative; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--aa-s4) var(--aa-s6);
  padding: 0 var(--aa-margin) clamp(18px, 3.4vh, 40px);
}
.aa-controls { display: none; align-items: center; gap: var(--aa-s4); flex-wrap: wrap; }
.aa-gl .aa-controls { display: flex; }
.aa-cap { margin-left: auto; text-align: right; font-size: .9375rem; font-weight: 450; line-height: 1.45; max-width: 34ch; text-shadow: 0 1px 10px rgba(16, 18, 24, .7); }
.aa-cap__place { display: block; opacity: .92; }
.aa-status { display: none; font-weight: 700; }
.aa-gl .aa-status { display: block; }

/* straps: canvas controls with a D-ring */
.aa-strap {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 14px; white-space: nowrap;
  border: 0; border-radius: 4px; cursor: pointer;
  font: 650 1.0625rem/1 var(--aa-text); letter-spacing: .005em; color: var(--aa-ink);
  background-color: var(--aa-sheet);
  background-image: repeating-linear-gradient(45deg, rgba(31, 33, 32, .05) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(31, 33, 32, .035) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1.5px rgba(31, 33, 32, .5), inset 0 -3px 0 rgba(31, 33, 32, .14), 0 2px 0 rgba(31, 33, 32, .35);
  transition: transform 90ms linear, box-shadow 90ms linear, background-color .2s;
}
.aa-strap:hover { background-color: #fff; }
.aa-strap:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px rgba(31, 33, 32, .5), inset 0 -1px 0 rgba(31, 33, 32, .14), 0 0 0 rgba(31, 33, 32, .35); }
.aa-dring { color: var(--aa-bush); flex: none; }
.aa-strap[aria-pressed="true"] .aa-dring { transform: scaleX(-1); }

/* the bolt: an aluminium track and a sliding block */
.aa-bolt { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 4px; background: none; border: 0; cursor: pointer; color: inherit; font: 650 1.0625rem/1 var(--aa-text); text-shadow: inherit; }
.aa-bolt__track { position: relative; width: 68px; height: 30px; border-radius: 4px; background: linear-gradient(#d9dcdb, #aeb2b1); box-shadow: inset 0 1px 0 #f4f6f5, inset 0 -1px 0 #8e9291, 0 1px 0 rgba(31, 33, 32, .45); }
.aa-bolt__track::before { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 4px; border-radius: 2px; background: #7f8483; }
.aa-bolt__block { position: absolute; top: 3px; left: 3px; width: 30px; height: 24px; border-radius: 3px; background: var(--aa-sheet); box-shadow: 0 1px 0 rgba(31, 33, 32, .4), inset 0 -2px 0 rgba(31, 33, 32, .12); transition: transform .32s var(--aa-slide); }
.aa-bolt__block::after { content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 14px; margin-left: -1px; background: rgba(31, 33, 32, .28); }
.aa-bolt[aria-checked="true"] .aa-bolt__block { transform: translateX(32px); background: var(--aa-sky); }
.aa-bolt__side { opacity: .72; transition: opacity .2s; }
.aa-bolt[aria-checked="false"] .aa-bolt__side:first-child, .aa-bolt[aria-checked="true"] .aa-bolt__side:last-child { opacity: 1; }
.aa-hero :focus-visible { outline-color: var(--aa-sky); }

@media (max-width: 1180px) and (min-width: 701px) { .aa-sub { max-width: 36ch; } }
@media (max-height: 760px) and (min-width: 701px) {
  .aa-head { padding-top: calc(40px + 20px); gap: 12px; }
  .aa-h1 { font-size: clamp(2.75rem, .6rem + 4.6vw, 5.75rem); }
  .aa-sub { font-size: 1.0625rem; }
}
/* short landscape screens (a 1200 x 630 share card, a laptop with the toolbar open): the words tighten so the controls stay on the dirt */
@media (max-height: 680px) and (min-width: 701px) {
  .aa-head { padding-top: calc(40px + 14px); gap: 10px; }
  .aa-h1 { font-size: clamp(2.5rem, .4rem + 4.3vw, 4.75rem); }
  .aa-sub { max-width: 46ch; font-size: 1rem; line-height: 1.4; }
  .aa-sill { padding-bottom: 16px; }
}

/* phones and upright tablets: the stage tall, the headline in its sky, the words and controls on the chalk below */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
  .aa-hero { height: auto; grid-template-rows: auto auto auto; color: var(--aa-ink); }
  .aa-stage { position: relative; grid-row: 1; grid-column: 1; height: max(440px, 62svh); }
  .aa-head { display: contents; }
  .aa-h1 { grid-row: 1; grid-column: 1; align-self: start; z-index: 2; margin: calc(34px + 22px) var(--aa-margin) 0; font-size: clamp(2.5rem, 11.4vw, 3.4rem); line-height: .96; }
  .aa-sub { grid-row: 2; grid-column: 1; max-width: calc(44ch + 2 * var(--aa-margin)); padding: var(--aa-s5) var(--aa-margin) 0; font-size: 1.0625rem; text-shadow: none; }
  .aa-sill { grid-row: 3; grid-column: 1; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--aa-s4); padding: var(--aa-s5) var(--aa-margin) var(--aa-s6); }
  .aa-controls { flex-wrap: nowrap; gap: var(--aa-s3); }
  .aa-strap#aa-camp { flex: 1 1 auto; justify-content: center; }
  .aa-cap { margin: 0; text-align: left; max-width: none; text-shadow: none; }
  .aa-scrim { background: linear-gradient(180deg, rgba(18, 20, 26, .5) 0%, rgba(18, 20, 26, .2) 30%, rgba(18, 20, 26, 0) 44%); }
  .aa-hero .aa-sill :focus-visible { outline-color: var(--aa-ink); }
}
@media (orientation: portrait) and (min-width: 701px) and (max-width: 1100px) {
  .aa-stage { height: 64svh; }
  .aa-h1 { font-size: clamp(3.4rem, 8vw, 5rem); margin-top: calc(40px + 40px); }
  .aa-sub { font-size: 1.1875rem; }
  .aa-sill { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .aa-strap#aa-camp { flex: 0 0 auto; }
}
@media (max-width: 700px) and (max-height: 600px) {
  .aa-stage { height: max(340px, 66svh); }
  .aa-h1 { font-size: 2.5rem; margin-top: calc(34px + 14px); }
  .aa-sub { display: none; }
  .aa-sill { padding-top: var(--aa-s4); padding-bottom: var(--aa-s4); gap: var(--aa-s3); }
  .aa-strap#aa-camp { min-height: 48px; }
  .aa-bolt { min-height: 48px; }
}

/* ---------- bays: each section travels packed and sets up on arrival ---------- */
.aa-bay {
  --aa-pk: .56; --aa-sgn: 1; --aa-dir: 1;
  --aa-w: clamp(0, var(--aa-set) / .35, 1);
  --aa-c: clamp(0, (var(--aa-set) - .35) / .25, 1);
  --aa-t: clamp(0, (var(--aa-set) - .6) / .2, 1);
  --aa-l: clamp(0, (var(--aa-set) - .8) / .2, 1);
  --aa-inset: calc((1 - var(--aa-pk)) * 50% * (1 - var(--aa-w)));
  position: relative; padding-top: var(--aa-s9);
}
.aa-bay:nth-of-type(odd) { --aa-sgn: -1; }
.aa-bay__box {
  position: relative; margin: 0 auto; width: min(100% - 2 * var(--aa-margin), var(--aa-max));
  background-color: var(--aa-lime);
  background-image: var(--aa-pebbles, none), var(--aa-grain);
  background-size: 480px 480px, 220px 220px; background-blend-mode: normal, soft-light;
  border-radius: calc(18px - 12px * var(--aa-l));
  clip-path: inset(0 var(--aa-inset) round calc(18px - 12px * var(--aa-l)));
}
.aa-bay__seam { position: absolute; z-index: 4; top: 0; bottom: 0; width: 6px; pointer-events: none; background: linear-gradient(90deg, #d4d7d6 0 3px, transparent 3px 5px, rgba(31, 33, 32, .4) 5px 6px); opacity: calc(.9 - .5 * var(--aa-l)); }
.aa-bay__seam--l { left: var(--aa-inset); }
.aa-bay__seam--r { right: var(--aa-inset); transform: scaleX(-1); }
.aa-bay__body { position: relative; z-index: 2; width: calc(var(--aa-pk) * 100%); margin: 0 auto; padding: var(--aa-s8) var(--aa-s6) var(--aa-s7); display: grid; gap: var(--aa-s5); align-content: start; }
.aa-bay__body > p { max-width: 60ch; }
.aa-bay__lamp {
  position: absolute; z-index: 3; top: 22px; right: calc((1 - var(--aa-pk)) * 50% + 24px); width: 12px; height: 12px; border-radius: 50%;
  background: #FFD9A3; opacity: calc(.18 + .82 * var(--aa-l));
  box-shadow: 0 0 calc(40px * var(--aa-l)) calc(12px * var(--aa-l)) rgba(255, 217, 163, .45), 0 0 0 3px rgba(31, 33, 32, .3);
}
.aa-bay__step { /* the step: a ribbed aluminium tread on two struts that folds down under the door */
  display: block; position: relative; z-index: 1; margin: 0 auto; width: min(calc((100% - 2 * var(--aa-margin)) * var(--aa-pk) * .34), 300px); height: 34px;
  transform-origin: 50% 0; transform: perspective(500px) rotateX(calc(-90deg * (1 - var(--aa-t))));
  background:
    linear-gradient(#f1f2f1, #c9cccb 45%, #9da2a1) 0 18px / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(31, 33, 32, .22) 0 2px, transparent 2px 9px) 0 18px / 100% 9px no-repeat;
  filter: drop-shadow(0 8px 5px rgba(31, 33, 32, .4));
}
.aa-bay__step::before, .aa-bay__step::after { content: ""; position: absolute; top: 0; width: 5px; height: 22px; border-radius: 2px; background: linear-gradient(90deg, #9da2a1, #d9dcdb, #9da2a1); }
.aa-bay__step::before { left: 18%; transform: skewX(-24deg); }
.aa-bay__step::after { right: 18%; transform: skewX(24deg); }

/* set up by scrolling where view timelines exist, by a class where they don't; flat and set without JS */
.aa-live .aa-bay { --aa-set: 1; }
@supports (animation-timeline: view()) {
  .aa-live .aa-bay:not(.aa-bay--back):not(.aa-bay--walk) {
    animation: aa-setup linear both, aa-pack linear forwards;
    animation-timeline: view(), view();
    animation-range: entry 10% entry 90%, exit 20% exit 80%;
  }
  .aa-live .aa-bay--walk { animation: aa-setup linear both, aa-pack linear forwards; animation-timeline: view(), view(); animation-range: entry 10% entry 60%, exit 20% exit 80%; }
  .aa-live .aa-bay--back { animation: aa-setup linear both, aa-pack linear forwards; animation-timeline: view(), view(); animation-range: entry 0% entry 40%, contain 20% contain 90%; }
}
@supports not (animation-timeline: view()) {
  .aa-live .aa-bay { --aa-set: 0; transition: --aa-set 3s linear; }
  .aa-live .aa-bay.is-set { --aa-set: 1; transition-duration: 2.4s; }
}
@keyframes aa-setup { from { --aa-set: 0; } to { --aa-set: 1; } }
@keyframes aa-pack { from { --aa-set: 1; } to { --aa-set: 0; } }

/* ---------- the yard: four plans at one scale on a white drawing sheet, under the full-bleed awning canvas ---------- */
.aa-bay--stock { --aa-pk: .52; padding-top: 0; }
.aa-canopy { position: relative; height: 300px; margin-bottom: -104px; pointer-events: none; }
.aa-canopy__roller { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(#e7e9e8, #9da2a1 70%, #7c8180); box-shadow: 0 2px 0 rgba(31, 33, 32, .35); z-index: 2; }
.aa-canopy__cloth {
  position: absolute; left: 0; right: 0; top: 10px; height: 286px; transform-origin: 50% 0;
  background: var(--aa-canvas); background-position: 0 0;
  transform: scaleY(calc(round(down, var(--aa-c) * 9, 1) / 9));
  -webkit-mask: radial-gradient(circle at 24px 286px, transparent 11px, #000 11.5px) 0 0 / 48px 100%; mask: radial-gradient(circle at 24px 286px, transparent 11px, #000 11.5px) 0 0 / 48px 100%;
  box-shadow: inset 0 -8px 0 rgba(31, 33, 32, .08);
}
.aa-canopy__cloth::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(31, 33, 32, .05) 0 1px, transparent 1px 4px); }
.aa-stock__band { padding-top: var(--aa-s8); }

/* the cream sheet: ink-dark type and drawings */
.aa-bay--sheet .aa-bay__box { color: var(--aa-ink); background-color: var(--aa-sheet); box-shadow: 0 1px 0 rgba(31, 33, 32, .12), 0 30px 60px -40px rgba(31, 33, 32, .45); background-image: var(--aa-grain); background-size: 220px 220px; background-blend-mode: soft-light; }
.aa-plans { --ppm: clamp(22px, (min(100vw, 1440px) - 2 * var(--aa-margin) - 184px) / 28.6, 44px); position: relative; z-index: 2; padding: var(--aa-s5) var(--aa-s6) var(--aa-s7); display: grid; justify-items: center; }
.aa-plans__track { position: relative; display: grid; grid-template-columns: max-content; max-width: 100%; }
.aa-plans__row { display: flex; align-items: flex-end; gap: 40px; }
.aa-card { display: grid; gap: var(--aa-s3); align-content: end; }
.aa-card__name { font: inherit; }
.aa-pick { display: grid; gap: 2px; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.aa-card__word { font: 400 clamp(1.375rem, 1rem + .9vw, 1.875rem)/1 var(--aa-display); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: .16em; transition: text-decoration-color .2s; }
.aa-pick:hover .aa-card__word, .aa-pick[aria-pressed="true"] .aa-card__word { text-decoration-color: var(--aa-bush); }
.aa-len { font: 700 clamp(1.5rem, 1rem + 1.4vw, 2.5rem)/1 var(--aa-text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.aa-len span { font-size: .55em; font-weight: 500; }
.aa-card__desc { font-size: 1rem; line-height: 1.45; max-width: 24ch; min-height: 4.35em; }
.aa-plan { display: block; width: calc(var(--len) * var(--ppm)); height: calc(2.6 * var(--ppm)); overflow: visible; fill: none; stroke: var(--aa-ink); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
.aa-plan * { vector-effect: non-scaling-stroke; }
.aa-plan__tyre { fill: var(--aa-ink); stroke: none; }
.aa-plan__tank { stroke: var(--aa-bush); stroke-dasharray: 4 4; }
.aa-plan__door { stroke: var(--aa-bush); stroke-width: 4px; }
.aa-plan__lay { opacity: .42; transition: opacity .3s; }
.aa-plan__lay > * { stroke-dasharray: 1 0; }
.aa-card.is-on .aa-plan__lay { opacity: 1; }
.aa-card.is-on .aa-plan__lay > * { animation: aa-draw .9s var(--aa-slide) both; }
.aa-card.is-on .aa-plan__lay > :nth-child(2n) { animation-delay: .12s; }
.aa-card.is-on .aa-plan__lay > :nth-child(3n) { animation-delay: .24s; }
.aa-card.is-on .aa-plan__shell > path:first-child { stroke-width: 2.5px; }
@keyframes aa-draw { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 1 0; } }
/* the ground line and the ruler: one metre per block, across every plan */
.aa-plans__ground { position: relative; width: 100%; height: 44px; margin-top: 10px; border-top: 2px solid var(--aa-ink); }
.aa-scale { position: absolute; left: 0; right: 0; top: 8px; height: 8px; box-shadow: inset 0 0 0 1.5px var(--aa-ink); background: repeating-linear-gradient(90deg, var(--aa-ink) 0 var(--ppm), transparent var(--ppm) calc(2 * var(--ppm))); }
/* the dimension line under the chosen van: it runs along the ruler to the plan you pick */
.aa-measure { position: absolute; top: 20px; left: var(--m-x, 0); width: var(--m-w, 0); height: 22px; border-inline: 2px solid var(--aa-bush); transition: left .6s var(--aa-slide), width .6s var(--aa-slide); }
.aa-measure::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--aa-bush); }
.aa-measure__len { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 0 8px; background: var(--aa-sheet); color: var(--aa-bush-deep); font: 700 1rem/22px var(--aa-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aa-plans figcaption { justify-self: center; max-width: 72ch; text-align: center; margin-top: var(--aa-s4); }

/* ---------- first night: the photo across the slide-outs, the tanks in the band ---------- */
.aa-bay--night { --aa-pk: .5; }
.aa-bay--wide .aa-bay__box { width: 100%; }
.aa-bay--wide .aa-night__photo { height: clamp(340px, 64vh, 720px); }
.aa-night__photo { display: block; position: relative; height: clamp(300px, 52vh, 560px); overflow: hidden; }
.aa-night__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 42%; }
.aa-night__band { padding-top: 0; }
.aa-valance { height: 44px; margin: 0 calc(-1 * var(--aa-s6)) 0; background: var(--aa-canvas); transform-origin: 50% 0; transform: scaleY(calc(round(down, var(--aa-c) * 9, 1) / 9)); -webkit-mask: radial-gradient(circle at 24px 44px, transparent 9px, #000 9.5px) 0 0 / 48px 100%; mask: radial-gradient(circle at 24px 44px, transparent 9px, #000 9.5px) 0 0 / 48px 100%; }
.aa-night__band .aa-caption { margin-top: calc(-1 * var(--aa-s2)); }
.aa-tanks svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--aa-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.aa-tanks__van { opacity: .5; }
.aa-tanks__sun rect { fill: var(--aa-sky); stroke: var(--aa-ink); stroke-width: 1; }
.aa-tanks__wheel circle:nth-child(-n+2) { fill: var(--aa-ink); stroke: none; }
.aa-fill { fill: var(--aa-sky); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(calc(.05 + .87 * var(--aa-l))); }
.aa-fill--grey { fill: #b3b0a6; transform: scaleY(calc(.05 + .15 * var(--aa-l))); }
.aa-tanks__words text { fill: var(--aa-ink); stroke: none; font: 700 17px var(--aa-text); text-anchor: middle; font-variant-numeric: tabular-nums; }
.aa-night__camp { font-size: clamp(1.1875rem, 1rem + .6vw, 1.4375rem); font-weight: 350; line-height: 1.45; }
.aa-night__camp strong { font-weight: 750; }

/* ---------- inside: it opens one way only, the photo in the left slide-out ---------- */
.aa-bay--inside { --aa-pk: .6; }
.aa-bay--inside .aa-bay__box { background-color: var(--aa-sheet); }
.aa-bay--inside .aa-bay__box { clip-path: inset(0 0 0 calc((1 - var(--aa-pk)) * 100% * (1 - var(--aa-w))) round calc(18px - 12px * var(--aa-l))); display: grid; grid-template-columns: calc((1 - var(--aa-pk)) * 100%) 1fr; }
.aa-bay--inside .aa-bay__seam--l { left: calc((1 - var(--aa-pk)) * 100% * (1 - var(--aa-w))); }
.aa-inside__photo { display: block; position: relative; min-height: 100%; }
.aa-inside__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.aa-inside__photo::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 40%; background: linear-gradient(90deg, rgba(255, 217, 163, 0), rgba(255, 217, 163, calc(.14 * var(--aa-l)))); pointer-events: none; }
.aa-inside__band { width: auto; margin: 0; padding-inline: var(--aa-s7) var(--aa-s6); }
.aa-bay--inside .aa-bay__lamp { right: 24px; }
.aa-inside__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--aa-s5) var(--aa-s6); margin-top: var(--aa-s2); }
.aa-inside__list > div { padding-top: var(--aa-s3); border-top: 1px solid var(--aa-rule); }
.aa-inside__list dt { font: 400 1.25rem/1.15 var(--aa-display); margin-bottom: 6px; }
.aa-inside__list dd { margin: 0; font-size: 1rem; line-height: 1.5; }

/* ---------- your first reverse: an open field of red dirt, full bleed, the game in one screen ---------- */
.aa-yard { position: relative; margin-top: var(--aa-s9); }
.aa-yard__field { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--aa-gutter); row-gap: var(--aa-s6); align-items: start; max-width: calc(var(--aa-max) + 2 * var(--aa-margin)); margin: 0 auto; padding: 0 var(--aa-margin); }
.aa-yard__col { grid-column: 1 / 6; grid-row: 1; position: relative; z-index: 2; display: grid; gap: var(--aa-s4); align-content: start; }
.aa-h2--yard { position: relative; font-size: clamp(3rem, 1rem + 5.4vw, 6.5rem); line-height: .9; letter-spacing: -.015em; font-variation-settings: "XROT" 0, "YROT" 0; }
.aa-yard__try { font-weight: 600; max-width: 40ch; }
.aa-yard__stage { grid-column: 6 / 13; grid-row: 1; position: relative; width: 100%; max-width: 720px; justify-self: end; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #a44b25; touch-action: pan-y; }
.aa-yard-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.aa-yard__stage.is-live .aa-yard-still { display: none; }
.aa-yard-still { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; margin: 0; background: var(--aa-earth-deep); }
.aa-yard-still svg { width: 100%; height: 100%; display: block; min-height: 0; }
.aa-still__ground { fill: #a44b25; }
.aa-still__gum circle { fill: rgba(110, 122, 74, .75); }
.aa-still__bay path { fill: none; stroke: #FFF4E8; stroke-width: 3; stroke-dasharray: 1 5; stroke-linecap: round; }
.aa-still__track { fill: none; stroke: rgba(31, 33, 32, .4); stroke-width: 4; stroke-dasharray: 1 3; }
.aa-still__rig rect { fill: #FFF4E8; }
.aa-still__rig path { stroke: #FFF4E8; stroke-width: 3; }
.aa-yard-still__moves { color: #FFF4E8; display: grid; gap: var(--aa-s2); padding: var(--aa-s5); font-weight: 600; font-size: 1rem; line-height: 1.45; }
.aa-yard-still__moves li { padding-left: 22px; position: relative; }
.aa-yard-still__moves li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--aa-sky); }
.aa-yard__stage:focus-visible { outline: 3px solid var(--aa-sky); outline-offset: -6px; }
.aa-yard.is-live .aa-yard__stage::before, .aa-yard.is-live .aa-yard__stage::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; height: 6px; background: var(--aa-alu); pointer-events: none; }
.aa-yard.is-live .aa-yard__stage::before { top: 0; }
.aa-yard.is-live .aa-yard__stage::after { bottom: 0; transform: scaleY(-1); }

/* the dash: wheel, lever and what the yard says back */
.aa-yard__controls { display: none; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "words words words" "wheel again lever" "hintw . hintl"; align-items: center; column-gap: var(--aa-s5); row-gap: var(--aa-s2); margin-top: var(--aa-s3); }
.aa-yard.is-live .aa-yard__controls { display: grid; }
.aa-yard__words { grid-area: words; font: 400 clamp(1.375rem, 1.1rem + .7vw, 1.75rem)/1.15 var(--aa-display); min-height: 2.3em; align-self: end; text-wrap: balance; }
.aa-wheel { grid-area: wheel; width: 168px; height: 168px; border-radius: 50%; touch-action: none; cursor: grab; }
.aa-wheel:active { cursor: grabbing; }
.aa-wheel:focus-visible { outline-offset: 2px; border-radius: 50%; }
.aa-wheel svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 3px 2px rgba(31, 33, 32, .45)); }
.aa-wheel__rim { fill: none; stroke: #b4b8b7; stroke-width: 9; }
.aa-wheel__spoke { stroke: #9ea3a2; stroke-width: 7; stroke-linecap: round; }
.aa-wheel__hub { fill: #d9dcdb; stroke: rgba(31, 33, 32, .4); stroke-width: 1.5; }
.aa-wheel__grip { fill: none; stroke: var(--aa-bush); stroke-width: 12; stroke-linecap: round; }
.aa-yard__again { grid-area: again; justify-self: start; min-height: 44px; padding: 0 2px; background: none; border: 0; color: inherit; font: 650 1rem/1 var(--aa-text); text-decoration: underline; text-decoration-color: var(--aa-sky-deep); text-decoration-thickness: 2px; text-underline-offset: 6px; cursor: pointer; }
.aa-lever { grid-area: lever; position: relative; width: 56px; height: 180px; border-radius: 6px; touch-action: none; cursor: ns-resize; background: linear-gradient(90deg, #aeb2b1, #d9dcdb 50%, #aeb2b1); box-shadow: inset 0 0 0 1px rgba(31, 33, 32, .3), 0 3px 3px rgba(31, 33, 32, .4); }
.aa-lever__slot { position: absolute; left: 50%; top: 14px; bottom: 14px; width: 8px; margin-left: -4px; border-radius: 4px; background: #5f6463; }
.aa-lever__slot::before, .aa-lever__slot::after { content: ""; position: absolute; left: -10px; right: -10px; height: 2px; background: var(--aa-shadow); opacity: .45; }
.aa-lever__slot::before { top: 50%; }
.aa-lever__knob { position: absolute; left: 6px; right: 6px; top: 50%; height: 44px; margin-top: -22px; border-radius: 5px; background: var(--aa-sheet); box-shadow: inset 0 -3px 0 rgba(31, 33, 32, .14), 0 2px 0 rgba(31, 33, 32, .4); }
.aa-lever__knob::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; margin-top: -1px; background: rgba(31, 33, 32, .3); box-shadow: 0 -6px 0 rgba(31, 33, 32, .2), 0 6px 0 rgba(31, 33, 32, .2); }
/* a clear hint that both are dragged, until they have been */
.aa-hint { font-size: .9375rem; font-weight: 650; line-height: 1.2; text-align: center; transition: opacity .4s; }
.aa-hint--wheel { grid-area: hintw; justify-self: center; }
.aa-hint--lever { grid-area: hintl; justify-self: center; max-width: 9ch; }
.aa-hint::before { content: ""; display: block; width: 26px; height: 12px; margin: 0 auto 4px; background: currentColor; -webkit-mask: var(--aa-arrow) center / contain no-repeat; mask: var(--aa-arrow) center / contain no-repeat; }
.aa-hint--wheel::before { --aa-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'><path d='M2 3Q13 13 24 3' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/><path d='M24 3l-5 .5M24 3l-.5 5M2 3l5 .5M2 3l.5 5' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>"); }
.aa-hint--lever::before { width: 12px; height: 18px; --aa-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'><path d='M6 2V16M6 16l-4-4M6 16l4-4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>"); }
.aa-yard.is-used .aa-hint { opacity: 0; }
.aa-yard.is-near:not(.is-used) .aa-wheel { animation: aa-nudge 1.6s .4s var(--aa-hinge) 2 both; }
.aa-yard.is-near:not(.is-used) .aa-lever__knob { animation: aa-nudge-l 1.6s .4s var(--aa-hinge) 2 both; }
@keyframes aa-nudge { 0%, 100% { rotate: 0deg; } 30% { rotate: -18deg; } 62% { rotate: 12deg; } }
@keyframes aa-nudge-l { 0%, 100% { translate: 0 0; } 40% { translate: 0 30px; } }

/* the lesson in words, under the field */
.aa-yard__lesson { max-width: calc(var(--aa-max) + 2 * var(--aa-margin)); margin: 0 auto; padding: var(--aa-s7) var(--aa-margin) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--aa-gutter); row-gap: var(--aa-s4); }
.aa-yard__lesson .aa-h3 { grid-column: 1 / 5; }
.aa-yard__lesson > p { grid-column: 5 / 12; max-width: 62ch; }
.aa-yard__close { font: 400 1.375rem/1.25 var(--aa-display); }

/* live, on a wide screen: the dirt runs edge to edge behind the words and the dash */
@media (min-width: 1100px) and (min-aspect-ratio: 8/5) {
  .aa-yard.is-live .aa-yard__field { max-width: none; min-height: calc(100svh - var(--bar-h, 40px) - var(--aa-nav-h)); align-items: center; padding-block: var(--aa-s6); padding-inline: max(var(--aa-margin), (100% - var(--aa-max)) / 2); }
  .aa-yard.is-live .aa-yard__stage { position: absolute; inset: 0; grid-column: auto; grid-row: auto; max-width: none; aspect-ratio: auto; border-radius: 0; }
  .aa-yard.is-live .aa-yard__field::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 50%; pointer-events: none; background: linear-gradient(90deg, rgba(31, 33, 32, .5), rgba(31, 33, 32, .34) 55%, rgba(31, 33, 32, 0)); }
  .aa-yard.is-live .aa-yard__col { grid-column: 1 / 6; align-self: center; color: var(--aa-cream); }
  .aa-yard.is-live .aa-yard__col :focus-visible { outline-color: var(--aa-sky); }
  .aa-yard.is-live .aa-wheel__grip { stroke: var(--aa-sky); }
}
@media (min-width: 1100px) and (min-aspect-ratio: 8/5) and (max-height: 820px) {
  .aa-yard.is-live .aa-h2--yard { font-size: clamp(2.75rem, 1rem + 4vw, 4.75rem); }
  .aa-wheel { width: 136px; height: 136px; }
  .aa-lever { height: 148px; }
  .aa-yard__words { min-height: 2.3em; font-size: 1.375rem; }
}
/* live, anywhere else: the words first, then the field full bleed with the dash right under it */
@media (max-width: 1099.98px), (max-aspect-ratio: 1599/1000) {
  .aa-yard.is-live .aa-yard__field { display: flex; flex-direction: column; max-width: none; padding: 0; row-gap: 0; }
  .aa-yard.is-live .aa-yard__col { display: contents; }
  .aa-yard.is-live .aa-h2--yard { order: 1; padding-inline: var(--aa-margin); margin-bottom: var(--aa-s4); }
  .aa-yard.is-live .aa-yard__try { order: 2; padding-inline: var(--aa-margin); margin-bottom: var(--aa-s5); max-width: calc(40ch + 2 * var(--aa-margin)); }
  .aa-yard.is-live .aa-yard__stage { order: 3; max-width: none; aspect-ratio: auto; border-radius: 0; height: clamp(260px, min(100vw, 100svh - var(--bar-h, 40px) - var(--aa-nav-h) - 196px), 760px); }
  .aa-yard.is-live .aa-yard__controls { order: 4; margin: 0; padding: var(--aa-s3) var(--aa-margin) 0; grid-template-areas: "wheel words lever" "hintw again hintl"; max-width: 760px; width: 100%; align-self: center; }
  .aa-yard.is-live .aa-yard__words { align-self: center; }
  .aa-wheel { width: 132px; height: 132px; }
  .aa-lever { width: 50px; height: 140px; }
}

/* ---------- hitch up, then walk round it: the saltbush canvas, full bleed, the checks either side of the plan ---------- */
.aa-bay--walk { --aa-pk: .68; height: 230vh; }
.aa-bay--dark .aa-bay__box { width: 100%; color: var(--aa-cream); background-color: var(--aa-bush); background-image: var(--aa-canvas-field), var(--aa-grain); background-size: auto, 220px 220px; background-blend-mode: normal, soft-light; }
.aa-bay--dark :focus-visible { outline-color: var(--aa-sky); }
.aa-walk__sticky { position: sticky; top: calc(var(--bar-h, 40px) + var(--aa-nav-h) + 16px); }
.aa-walk__band { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: var(--aa-s6); row-gap: var(--aa-s4); padding-top: var(--aa-s7); padding-bottom: var(--aa-s6); align-items: start; }
.aa-walk__band .aa-h2, .aa-walk__intro { grid-column: 1 / -1; }
.aa-walk__intro { max-width: 58ch; }
.aa-walk__plan { grid-column: 2; grid-row: 3 / 5; width: 320px; height: 560px; zoom: var(--aa-zoom, 1); background: rgba(31, 33, 32, .12); border-radius: 6px; }
.aa-walk__turn { position: relative; width: 320px; height: 560px; }
.aa-walk__turn svg { width: 320px; height: 560px; display: block; fill: none; stroke: var(--aa-cream); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.aa-walk__thin { stroke-width: 1; opacity: .6; }
.aa-walk__car { opacity: .7; }
.aa-walk__door { stroke: var(--aa-sky); stroke-width: 4; }
.aa-walk__loop { stroke: var(--aa-sky); stroke-width: 1.5; stroke-dasharray: 2 7; opacity: .7; }
.aa-walk__dot {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: var(--aa-sky); box-shadow: 0 0 0 4px rgba(169, 214, 238, .3), 0 2px 0 rgba(31, 33, 32, .4);
  offset-path: path("M182 92C222 92 246 120 246 160V460C246 486 228 500 202 500H118C92 500 74 486 74 460V160C74 120 98 92 138 92Z");
  offset-rotate: 0deg; offset-anchor: 11px 11px; offset-distance: 70%;
}
.aa-walk__dot::after { /* a footprint in the dot */ content: ""; position: absolute; left: 7px; top: 5px; width: 8px; height: 12px; border-radius: 50% 50% 45% 45%; background: var(--aa-shadow); opacity: .7; }
.aa-checks { display: grid; gap: var(--aa-s4); align-content: start; padding-top: var(--aa-s4); }
.aa-checks--a { grid-column: 3; grid-row: 3; }
.aa-checks--b { grid-column: 1; grid-row: 3; justify-items: end; text-align: right; }
.aa-checks li { position: relative; max-width: 30ch; font-size: 1.0625rem; line-height: 1.4; padding-left: 30px; text-wrap: balance; }
.aa-checks--b li { padding: 0 30px 0 0; }
.aa-checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--aa-cream); background: var(--aa-sky); }
.aa-checks--b li::before { left: auto; right: 0; }
.aa-walk__go { grid-column: 1; grid-row: 4; align-self: end; justify-self: end; text-align: right; font: 400 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.1 var(--aa-display); max-width: 14ch; }
.aa-walk__photo { grid-column: 3; grid-row: 4; align-self: end; display: block; width: 100%; max-width: 320px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px rgba(246, 243, 236, .14); }
.aa-walk__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }
.aa-live .aa-bay--walk { --aa-walk: 1; }
@supports (animation-timeline: view()) {
  .aa-live .aa-bay--walk { view-timeline: --aa-walkt block; }
  .aa-live .aa-walk__dot { animation: aa-dot linear both; animation-timeline: --aa-walkt; animation-range: contain 4% contain 92%; }
  .aa-live .aa-checks li { animation: aa-check linear both; animation-timeline: --aa-walkt; animation-range: contain calc(4% + var(--at) * .88) contain calc(6% + var(--at) * .88); }
  .aa-live .aa-walk__go { animation: aa-check linear both; animation-timeline: --aa-walkt; animation-range: contain 88% contain 92%; }
}
@keyframes aa-dot { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes aa-check { from { opacity: .76; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  .aa-live .aa-checks li::before { animation: aa-tick linear both; animation-timeline: --aa-walkt; animation-range: contain calc(4% + var(--at) * .88) contain calc(6% + var(--at) * .88); }
}
@keyframes aa-tick { from { background: transparent; transform: scale(.8); } to { background: var(--aa-sky); transform: scale(1); } }
@media (max-height: 1100px) and (min-width: 1025px) { .aa-walk__plan { --aa-zoom: .8; } .aa-walk__band .aa-h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); } }
@media (max-height: 920px) and (min-width: 1025px) { .aa-walk__plan { --aa-zoom: .68; } .aa-walk__band { padding-top: var(--aa-s6); row-gap: var(--aa-s3); } }
@media (max-height: 780px) and (min-width: 1025px) { .aa-walk__plan { --aa-zoom: .56; } .aa-walk__band { padding-top: var(--aa-s6); row-gap: var(--aa-s3); } .aa-walk__band .aa-h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.25rem); } }

/* ---------- the workshop: a narrow tall bay on a sky-blue print, its deep step holding the parts ---------- */
.aa-bay--shop { --aa-pk: .44; }
.aa-bay--print .aa-bay__box {
  color: var(--aa-ink); background-color: var(--aa-sky);
  background-image: linear-gradient(rgba(31, 33, 32, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 33, 32, .07) 1px, transparent 1px), var(--aa-grain);
  background-size: 24px 24px, 24px 24px, 220px 220px; background-blend-mode: normal, normal, soft-light;
}
.aa-bay--print .aa-link { text-decoration-color: var(--aa-ink); }
.aa-bay--print .aa-link:hover { text-decoration-color: var(--aa-bush); }
.aa-shop__band { padding-bottom: var(--aa-s8); }
.aa-bay__lamp--hang { top: 0; right: auto; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 0 0 9px 9px; }
.aa-shop__tread {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aa-s6);
  padding: var(--aa-s7) var(--aa-s7) var(--aa-s8); border-top: 2px solid var(--aa-ink);
  transform-origin: 50% 0; transform: perspective(1400px) rotateX(calc(88deg * (1 - var(--aa-t))));
  opacity: clamp(0, var(--aa-t) * 3, 1);
}
.aa-part { display: grid; gap: var(--aa-s3); align-content: start; }
.aa-part svg { width: 100%; height: auto; display: block; fill: none; stroke: var(--aa-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.aa-part svg * { vector-effect: non-scaling-stroke; }
.aa-part__thin { stroke-width: 1; opacity: .6; stroke-dasharray: 4 4; }
.aa-part__worn { fill: rgba(86, 102, 90, .35); stroke: var(--aa-bush-deep); }
.aa-part__lining { fill: rgba(31, 33, 32, .12); }
.aa-part__seal { fill: rgba(31, 33, 32, .16); }
.aa-part__ring { stroke: var(--aa-bush-deep); stroke-width: 2; stroke-dasharray: 5 4; }
.aa-part figcaption { font-size: 1rem; line-height: 1.5; max-width: 34ch; }
.aa-part figcaption strong { font: 400 1.125rem/1 var(--aa-display); margin-right: .2em; }
.aa-part:target svg, .aa-part:focus svg { filter: drop-shadow(0 0 10px rgba(246, 243, 236, .9)); }
.aa-part:focus { outline: none; }
.aa-bay__step--deep { height: 40px; }

/* ---------- bring it back: a narrow bay that packs while you read ---------- */
.aa-bay--back { --aa-pk: .5; }
.aa-bay--back .aa-bay__box { background-color: var(--aa-sheet); box-shadow: 0 30px 60px -40px rgba(31, 33, 32, .45); }
.aa-back__band { padding-block: calc(var(--aa-s8) + 20px) var(--aa-s8); }
.aa-back__band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: var(--aa-canvas); transform-origin: 50% 0; transform: scaleY(calc(round(down, var(--aa-c) * 6, 1) / 6)); -webkit-mask: radial-gradient(circle at 24px 30px, transparent 8px, #000 8.5px) 0 0 / 48px 100%; mask: radial-gradient(circle at 24px 30px, transparent 8px, #000 8.5px) 0 0 / 48px 100%; }
.aa-h2--back { position: relative; font-size: clamp(2.5rem, 1rem + 5vw, 6rem); line-height: .95; }

/* ---------- ask: the last camp at dusk, full bleed, the form on the last of the sky ---------- */
.aa-ask { --aa-plate-h: max(620px, 92vh); background: linear-gradient(180deg, #2c2826 0 var(--aa-plate-h), var(--aa-chalk) var(--aa-plate-h)); position: relative; margin-top: var(--aa-s9); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--aa-gutter); padding: 0 var(--aa-margin) var(--aa-s9); isolation: isolate; }
.aa-ask__plate { display: block; position: absolute; inset: 0 0 auto 0; height: var(--aa-plate-h); z-index: -1; }
.aa-ask__plate::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -2px; height: 6px; background: var(--aa-alu); }
.aa-ask__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 44, .35), rgba(20, 24, 44, 0) 30%), linear-gradient(0deg, rgba(24, 22, 22, .62), rgba(24, 22, 22, .3) 26%, rgba(24, 22, 22, 0) 52%); }
.aa-ask__plate { overflow: hidden; }
.aa-ask__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; }
.aa-ask__copy { grid-column: 7 / 13; grid-row: 1; align-self: start; display: grid; gap: var(--aa-s3); max-width: 44ch; padding-top: var(--aa-s8); color: var(--aa-cream); text-shadow: 0 1px 12px rgba(20, 24, 44, .5); }
.aa-ask__copy :focus-visible { outline-color: var(--aa-sky); }
.aa-ask__copy .aa-h2 { font-size: clamp(2.25rem, 1rem + 3.2vw, 4.25rem); line-height: .95; }
.aa-ask__copy p { font-size: 1.125rem; line-height: 1.5; }
.aa-ask__copy .aa-caption { font-size: 1rem; }
.aa-ask__field { grid-column: 7 / 13; grid-row: 2; margin-top: max(56px, 10vh); position: relative; color: var(--aa-ink); background: var(--aa-sky); border-radius: 6px; padding: var(--aa-s7) var(--aa-s6) var(--aa-s6); align-self: start; box-shadow: 0 30px 60px -30px rgba(20, 24, 44, .7); }
.aa-ask__awning { position: absolute; left: 0; right: 0; top: -20px; height: 20px; background: linear-gradient(#e7e9e8, #9da2a1 70%, #7c8180) top / 100% 6px no-repeat, var(--aa-canvas); border-radius: 4px 4px 0 0; }
.aa-form { display: grid; gap: var(--aa-s5); max-width: 640px; }
.aa-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--aa-s4); }
.aa-field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.aa-field > span, .aa-field legend { font-weight: 650; }
.aa-field input[type="text"], .aa-field select, .aa-field textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--aa-ink); background: var(--aa-sheet); border: 1px solid var(--aa-ink); border-radius: 4px; }
.aa-field textarea { resize: vertical; }
.aa-field ::placeholder { color: #5f625f; }
.aa-field small { font-size: 1rem; }
.aa-field--straps { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-field--straps legend { margin-bottom: 8px; padding: 0; }
.aa-field--straps label { position: relative; }
.aa-field--straps input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.aa-field--straps span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 4px; background: var(--aa-sheet); box-shadow: inset 0 0 0 1px rgba(31, 33, 32, .45); font-weight: 600; font-size: 1rem; }
.aa-field--straps input:checked + span { background: var(--aa-ink); color: var(--aa-cream); }
.aa-field--straps input:focus-visible + span { outline: 3px solid var(--aa-ink); outline-offset: 2px; }
.aa-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aa-s4); }
.aa-send { background-color: var(--aa-ink); color: var(--aa-cream); background-image: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 2px 0 rgba(31, 33, 32, .35); }
.aa-send .aa-dring { color: var(--aa-sky); }
.aa-send:hover { background-color: var(--aa-shadow); }
.aa-form__status { font-weight: 700; min-height: 1.5em; }
.aa-form__where { font-size: 1rem; }
.aa-ask .aa-form :focus-visible { outline-color: var(--aa-ink); }
.aa-tracks { grid-column: 1 / -1; grid-row: 3; position: relative; height: 160px; margin: var(--aa-s8) calc(-1 * var(--aa-margin)) calc(-1 * var(--aa-s9)); background-color: var(--aa-earth); background-image: var(--aa-pebbles, none), var(--aa-grain); background-size: 480px 480px, 220px 220px; background-blend-mode: normal, soft-light; }
.aa-tracks[hidden] { display: none; }
.aa-tracks__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.aa-tracks .aa-caption { position: absolute; left: var(--aa-margin); bottom: 16px; }

/* ---------- footer ---------- */
.aa-foot { position: relative; color: var(--aa-cream); --aa-rule: rgba(246, 243, 236, .3); background-color: var(--aa-bush); background-image: var(--aa-canvas-field), var(--aa-grain); background-size: auto, 220px 220px; background-blend-mode: normal, soft-light; padding: var(--aa-s8) var(--aa-margin) var(--aa-s7); }
.aa-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--aa-alu); }
.aa-foot__in { max-width: var(--aa-max); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--aa-gutter); row-gap: var(--aa-s5); align-items: end; }
.aa-foot__brand { grid-column: 1 / 6; display: flex; align-items: center; gap: 12px; font: 400 1.75rem/1 var(--aa-display); }
.aa-foot__where { grid-column: 1 / 6; }
.aa-foot__nav { grid-column: 7 / 13; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 40px; font-weight: 600; justify-content: end; }
.aa-foot__nav a { text-decoration: none; display: inline-block; padding: 4px 0; }
.aa-foot :focus-visible { outline-color: var(--aa-sky); }
.aa-foot__brand .aa-mark { background: var(--aa-chalk); border-radius: 10px; padding: 3px; box-sizing: content-box; }
.aa-foot__nav a:hover { text-decoration: underline; text-decoration-color: var(--aa-sky); text-decoration-thickness: 2px; }
.aa-foot__last { grid-column: 1 / -1; font: 400 clamp(1.5rem, 1rem + 1.6vw, 2.5rem)/1.1 var(--aa-display); padding-top: var(--aa-s6); border-top: 1px solid var(--aa-rule); }

/* ---------- in-between widths ---------- */
@media (max-width: 1180px) {
  .aa-bay--stock { --aa-pk: .62; } .aa-bay--night { --aa-pk: .6; } .aa-bay--inside { --aa-pk: .66; } .aa-bay--walk { --aa-pk: .8; } .aa-bay--shop { --aa-pk: .58; } .aa-bay--back { --aa-pk: .64; }
  .aa-yard__col { grid-column: 1 / -1; }
  .aa-yard__stage { grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 560px; }
  .aa-yard__lesson .aa-h3 { grid-column: 1 / -1; }
  .aa-yard__lesson > p { grid-column: 1 / -1; }
  .aa-inside__list { grid-template-columns: 1fr; }
  .aa-ask__field { grid-column: 5 / 13; }
  .aa-ask__copy { grid-column: 5 / 13; }
  .aa-shop__tread { padding-inline: var(--aa-s6); gap: var(--aa-s5); }
}
@media (max-width: 1024px) {
  .aa-bay--walk { height: auto; }
  .aa-walk__sticky { position: static; }
  .aa-walk__band { grid-template-columns: 1fr 1fr; }
  .aa-walk__plan { grid-column: 1 / -1; grid-row: auto; justify-self: center; --aa-zoom: .86; }
  .aa-checks--a { grid-column: 1; grid-row: auto; }
  .aa-checks--b { grid-column: 2; grid-row: auto; text-align: left; justify-items: start; }
  .aa-checks--b li { padding: 0 0 0 30px; margin-left: 0; }
  .aa-checks--b li::before { left: 0; right: auto; }
  .aa-walk__photo { grid-column: 1 / -1; grid-row: auto; justify-self: center; max-width: 480px; }
  .aa-walk__go { grid-column: 1 / -1; grid-row: auto; justify-self: start; text-align: left; max-width: none; }
  .aa-form__pair { grid-template-columns: 1fr; }
  @supports (animation-timeline: view()) {
    .aa-live .aa-walk__dot { animation-timeline: view(); animation-range: cover 25% cover 75%; }
    .aa-live .aa-checks li, .aa-live .aa-checks li::before, .aa-live .aa-walk__go { animation-timeline: view(); animation-range: entry 60% cover 45%; }
  }
}
@media (max-width: 900px) {
  .aa-ask { display: block; min-height: 0; padding: 0 var(--aa-margin) var(--aa-s8); }
  .aa-ask { --aa-plate-h: max(520px, 86svh); }
  .aa-ask__plate img { object-position: 24% 60%; }
  .aa-ask__copy { max-width: 40ch; padding: 52svh 0 var(--aa-s6); }
  .aa-ask__field { margin: 0; padding: var(--aa-s7) var(--aa-s5) var(--aa-s6); }
  .aa-tracks { margin: var(--aa-s7) calc(-1 * var(--aa-margin)) calc(-1 * var(--aa-s8)); height: 120px; }
  .aa-shop__tread { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .aa-foot__nav { grid-column: 1 / -1; grid-row: auto; justify-content: start; }
}

/* phones: every bay packs to 88% and the band is the padded column */
@media (max-width: 700px) {
  .aa-bay { --aa-pk: .88 !important; padding-top: var(--aa-s8); }
  .aa-bay__box { width: 100%; border-radius: calc(12px - 8px * var(--aa-l)); clip-path: inset(0 var(--aa-inset) round calc(12px - 8px * var(--aa-l))); }
  .aa-bay__body { width: 88%; padding: var(--aa-s7) 0 var(--aa-s6); gap: var(--aa-s4); }
  .aa-bay__lamp { right: calc(6% + 4px); top: 16px; }
  .aa-bay--stock { padding-top: 0; }
  .aa-canopy { height: 150px; margin-bottom: -86px; }
  .aa-canopy__cloth { height: 136px; -webkit-mask: radial-gradient(circle at 24px 136px, transparent 9px, #000 9.5px) 0 0 / 48px 100%; mask: radial-gradient(circle at 24px 136px, transparent 9px, #000 9.5px) 0 0 / 48px 100%; }
  .aa-stock__band { padding-top: var(--aa-s7); }
  /* the plans as one strip you swipe along, over one shared ruler */
  .aa-plans { --ppm: 30px; padding: var(--aa-s4) 0 var(--aa-s6); justify-items: stretch; }
  .aa-plans__track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6%; padding: 0 6% 12px; scrollbar-width: thin; }
  .aa-plans__row { width: max-content; gap: 32px; }
  .aa-card { scroll-snap-align: start; }
  .aa-plans__ground { width: auto; }
  .aa-plans figcaption { width: 88%; text-align: left; }
  .aa-night__photo { height: 62vw; min-height: 220px; }
  .aa-valance { margin-inline: 0; height: 30px; }
  .aa-bay--inside .aa-bay__box { display: block; clip-path: inset(0 var(--aa-inset) round calc(12px - 8px * var(--aa-l))); }
  .aa-bay--inside .aa-bay__seam--l { left: var(--aa-inset); }
  .aa-inside__photo { aspect-ratio: 4 / 5; min-height: 0; }
  .aa-inside__band { width: 88%; margin: 0 auto; padding-inline: 0; }
  .aa-bay--inside .aa-bay__lamp { right: calc(6% + 4px); }
  .aa-yard { margin-top: var(--aa-s8); }
  .aa-h2--yard { font-size: clamp(2.75rem, 13.8vw, 3.5rem); }
  .aa-wheel { width: 112px; height: 112px; }
  .aa-lever { width: 46px; height: 120px; }
  .aa-yard.is-live .aa-yard__controls { column-gap: var(--aa-s4); padding-top: var(--aa-s2); }
  .aa-yard__words { font-size: 1.1875rem; min-height: 3.5em; }
  .aa-hint { font-size: .875rem; }
  .aa-walk__band { grid-template-columns: 1fr; }
  .aa-walk__plan { width: 560px; height: 320px; --aa-zoom: .62; }
  .aa-walk__turn { transform: translate(0, 320px) rotate(-90deg); transform-origin: 0 0; }
  .aa-checks--a, .aa-checks--b { grid-column: 1; }
  .aa-checks--b { padding-top: 0; }
  .aa-walk__photo { max-width: none; }
  .aa-shop__tread { padding: var(--aa-s6) 6% var(--aa-s7); }
  .aa-back__band { padding-block: var(--aa-s7); }
  .aa-ask__copy { padding-top: 58svh; }
  .aa-foot__nav { grid-template-columns: 1fr 1fr; gap: 6px 24px; }
  .aa-foot__brand, .aa-foot__where { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .aa-walk__plan { --aa-zoom: .56; }
  .aa-field--straps span { padding: 0 11px; }
}
@media (max-width: 350px) {
  .aa-walk__plan { --aa-zoom: .5; }
  .aa-plans { --ppm: 26px; }
  .aa-wheel { width: 100px; height: 100px; }
}
/* a short phone: a shorter field, a smaller dash */
@media (max-width: 700px) and (max-height: 600px) {
  .aa-wheel { width: 88px; height: 88px; }
  .aa-lever { width: 42px; height: 96px; }
  .aa-hint { display: none; }
  .aa-yard__words { font-size: 1.0625rem; min-height: 2.4em; }
  .aa-yard.is-live .aa-yard__stage { height: max(220px, 100svh - var(--bar-h, 40px) - var(--aa-nav-h) - 140px); }
}

@media (prefers-reduced-motion: reduce) {
  .aa-hero__awning::after { animation: none; }
  .aa-live .aa-bay { --aa-set: 1 !important; animation: none !important; transition: none !important; }
  .aa-live .aa-walk__dot, .aa-live .aa-checks li, .aa-live .aa-checks li::before, .aa-live .aa-walk__go { animation: none !important; }
  .aa-van-poster { animation: none; }
  .aa-van-gl, .aa-bolt__block, .aa-strap, .aa-route a::after, .aa-plan__lay, .aa-measure { transition: none; }
  .aa-card.is-on .aa-plan__lay > * { animation: none; }
  .aa-yard .aa-wheel, .aa-yard .aa-lever__knob { animation: none !important; }
}
@media (max-width: 360px) {
  .aa-strap { padding: 0 14px 0 10px; gap: 6px; font-size: 1rem; }
  .aa-bolt { gap: 6px; font-size: 1rem; }
  .aa-bolt__track { width: 60px; }
  .aa-bolt[aria-checked="true"] .aa-bolt__block { transform: translateX(24px); }
}
body.spec-axle-and-awning:not(.aa-gl) .aa-h1 { text-shadow: 0 2px 16px rgba(31, 33, 32, .5); }
.aa-bay--night > .aa-bay__box, .aa-bay--inside > .aa-bay__box { content-visibility: auto; contain-intrinsic-size: auto 1300px; }
.aa-bay--inside > .aa-bay__box { contain-intrinsic-size: auto 700px; }
@media (max-width: 700px) { .aa-bay--night > .aa-bay__box { contain-intrinsic-size: auto 950px; } .aa-bay--inside > .aa-bay__box { contain-intrinsic-size: auto 1500px; } }
@media (prefers-reduced-motion: reduce) { .aa-bay--night > .aa-bay__box, .aa-bay--inside > .aa-bay__box { content-visibility: visible; } }