/* Molinazzo - site styles. Load order: fonts.css, tokens.css, site.css.
   Colours: only the text/background pairs listed as allowed in tokens.css. No inline styles anywhere (CSP). */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-text);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
}

img, svg, picture { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h4); font-weight: var(--fw-display-strong); }
p, ul { margin: 0 0 var(--space-4); }
p:last-child, ul:last-child { margin-bottom: 0; }
strong { font-weight: var(--fw-text-strong); }

a { color: var(--c-primary); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-primary-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 10;
  background: var(--c-ink); color: var(--c-bg);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  font-weight: var(--fw-text-strong);
}
.skip-link:focus { top: var(--space-4); color: var(--c-bg); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }

/* ---------- header ---------- */
.site-header { border-bottom: var(--border); }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 4.5rem;
}
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; border-radius: var(--radius-sm); } /* 44px tap target */
.brand img { width: auto; height: 2.5rem; }
@media (max-width: 22rem) { .brand img { height: 2rem; } }
.lang-switch {
  display: inline-flex; align-items: center; min-height: 2.75rem; /* 44px tap target */
  font-size: var(--fs-sm); font-weight: var(--fw-text-medium);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-primary); border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
}
.lang-switch:hover { background: var(--c-primary); color: var(--c-on-primary); }

/* ---------- hero ---------- */
.hero { padding-block: var(--space-7) var(--space-8); }
.hero .container { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 60rem) {
  .hero .container { grid-template-columns: 11fr 13fr; gap: var(--space-8); }
}
.eyebrow {
  font-size: var(--fs-xs); font-weight: var(--fw-text-strong);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--c-muted); margin-bottom: var(--space-4);
}
.hero h1 { margin-bottom: var(--space-5); }
@media (min-width: 60rem) { .hero h1 { font-size: var(--fs-h1); } }
.hero h1 .line-2 { display: block; font-style: italic; color: var(--c-primary); }
.lead { font-size: var(--fs-lg); max-width: 34ch; margin-bottom: var(--space-6); text-wrap: pretty; }
/* Italian title is longer: a step smaller on desktop so "Un vecchio mulino." stays on one line */
@media (min-width: 60rem) { .hero h1:lang(it) { font-size: clamp(2.625rem, 1.5rem + 2.9vw, 3.75rem); } }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: var(--space-2) var(--space-5);
  border: 1px solid var(--c-primary); border-radius: var(--radius-sm);
  font-weight: var(--fw-text-medium); text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.button-primary { background: var(--c-primary); color: var(--c-on-primary); }
.button-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-on-primary); }
.button-secondary { background: transparent; color: var(--c-primary); }
.button-secondary:hover { background: var(--c-primary); color: var(--c-on-primary); }

/* ---------- AI concept figures ---------- */
.concept { margin: 0; }
.concept-frame { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); container-type: inline-size; }
.concept-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ai-label {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  max-width: calc(100% - 2 * var(--space-3));
  background: var(--c-label-bg); color: var(--c-label-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-text-medium); line-height: 1.35;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
}
/* Narrow frames (phones, tablet pairs, 200% text): the label would wrap over the subject, so it
   becomes a strip attached under the picture, same text (BRIEF §2.4). Any top tag becomes a strip
   above it. rem in a container condition follows the root font size, so 200% text triggers it too. */
@container (max-width: 26rem) {
  .concept-frame .ai-label, .concept-frame .compare-tag {
    position: static; max-width: none; margin: 0; border-radius: 0;
    background: var(--c-strip-bg); color: var(--c-strip-ink);
    padding: var(--space-2) var(--space-3);
  }
  .concept-frame .compare-tag { order: -1; }
}
.concept figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-sm); color: var(--c-muted);
}

/* ---------- "Today / Imagined" pair (place section; plan in images/compare_plan.md) ----------
   Today side: a fact card until Silvio's photo arrives (swap steps in README), then a
   photo frame with the same tag. Imagined side: AI concept, keeps its ai-label (BRIEF §2.4).
   Stacked on mobile with "Today" first; side by side from 36rem. */
.compare { margin-bottom: var(--space-8); }
.compare .compare-head {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-display-strong);
  line-height: var(--lh-heading); color: var(--c-ink);
}
.compare-pair { display: grid; gap: var(--space-4); }
@media (min-width: 36rem) { .compare-pair { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.compare-pair .concept-frame { display: flex; flex-direction: column; }
.compare-pair .concept-frame picture { display: block; flex: 1 1 auto; }
.compare-pair .concept-frame img { aspect-ratio: 4 / 3; height: 100%; }
.compare-today {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--c-surface-2); color: var(--c-ink);
  border: var(--border); border-top: 3px solid var(--c-accent); border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-5);
  min-width: 0;
}
.compare-today .compare-tag { position: static; align-self: flex-start; margin: 0; }
.today-lead {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h4);
  font-weight: var(--fw-display); line-height: var(--lh-heading);
}
.today-facts { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.today-facts li {
  position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-bottom: var(--border); font-size: var(--fs-sm); line-height: 1.45;
}
.today-facts li::before {
  content: ""; position: absolute; left: var(--space-1); top: calc(var(--space-2) + 0.6em);
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--c-accent);
}
.today-pending { margin: auto 0 0; font-size: var(--fs-xs); font-style: italic; color: var(--c-muted); }
.compare-tag {
  position: absolute; left: var(--space-3); top: var(--space-3);
  background: var(--c-label-bg); color: var(--c-label-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-text-strong); line-height: 1.35;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
}
.photo-credit { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); }
/* credit chip on the "Today" photo (after the swap in README) */
.concept-frame .photo-credit {
  position: absolute; right: var(--space-3); bottom: var(--space-3); margin: 0;
  max-width: calc(100% - 2 * var(--space-3));
  background: var(--c-label-bg); color: var(--c-label-ink);
  font-size: var(--fs-xs); line-height: 1.35;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
}
.compare-note { margin: calc(-1 * var(--space-6)) 0 var(--space-8); max-width: var(--measure); }
.photo-credit a { color: inherit; }

/* ---------- sections ---------- */
.section { padding-block: var(--space-5) var(--space-8); scroll-margin-top: var(--space-4); }
.section-head { margin-bottom: var(--space-6); }
.divider { display: flex; justify-content: center; padding-block: var(--space-6) var(--space-4); }
.divider img { width: 15rem; }

.vision p:first-of-type { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-heading); }

.place-grid { display: grid; gap: var(--space-7); }
@media (min-width: 60rem) {
  .place-grid { grid-template-columns: 7fr 5fr; align-items: start; }
}
.place-aside { display: grid; gap: var(--space-6); }
.map { max-width: 30rem; container-type: inline-size; }
.map svg { width: 100%; border-radius: var(--radius-md); }
/* map labels scale with the drawing: larger on narrow maps so they stay >= 12-13px on screen.
   A paper-coloured halo keeps them readable where they cross the tree marks. */
@container (max-width: 26rem) {
  .map-svg text { paint-order: stroke; stroke: #F3EDE2; stroke-width: 4px; stroke-linejoin: round; }
  .map-svg text:nth-of-type(1) { font-size: 22px; }   /* N */
  .map-svg text:nth-of-type(3) { font-size: 21px; }   /* the old mill */
  .map-svg text:nth-of-type(4) { font-size: 22px; }   /* Milan ~30 km */
}
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .place-aside { grid-template-columns: 1fr 1fr; align-items: start; }
}
.note {
  border-left: 3px solid var(--c-accent);
  padding-left: var(--space-4);
}
.history { margin-top: var(--space-7); }

.phases { display: grid; gap: var(--space-5); padding: 0; margin: 0; list-style: none; }
@media (min-width: 60rem) { .phases { grid-template-columns: repeat(3, 1fr); } }
#plan .prose { margin-bottom: var(--space-6); }
.phase {
  background: var(--c-surface-2); border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  border-top: 3px solid var(--c-primary);
}
.phase img { width: 3rem; height: 3rem; margin-bottom: var(--space-4); }
.phase h3 { font-size: var(--fs-h4); }

.take-part-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); max-width: var(--measure); }
.take-part-list li { padding-left: var(--space-5); position: relative; }
.take-part-list li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent);
}

.faq-list { max-width: var(--measure); border-top: var(--border); }
.faq-list details { border-bottom: var(--border); }
.faq-list summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-display-strong);
  line-height: var(--lh-heading);
  padding: var(--space-4) var(--space-6) var(--space-4) 0; position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  font-family: var(--font-text); font-size: 1.5rem; color: var(--c-primary);
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { padding-bottom: var(--space-5); }

.band { background: var(--c-surface-2); border-radius: var(--radius-md); padding: var(--space-6) var(--gutter); }

/* ---------- donations (block injected by tools/build_donations.py) ----------
   Same language as the rest of the page: prose intro in the reading measure, then one row
   per way of giving between thin rules (like the FAQ), then a caption-style fine print.
   The only surface is the address itself. */
.donate-intro { margin-bottom: var(--space-6); }
.donate-ways { max-width: var(--measure); border-top: var(--border); }
.donate-way {
  border-bottom: var(--border); padding-block: var(--space-5) var(--space-6);
  display: grid; gap: var(--space-3);
}
@media (min-width: 48rem) {
  .donate-way { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-5); }
}
.donate-way h3 { margin: 0; line-height: 1.5; } /* 1.5 so the serif heading sits on the body's first line */
.donate-way-body { min-width: 0; }
.donate-crypto-body { display: grid; gap: var(--space-5); justify-items: start; }
@media (min-width: 36rem) {
  .donate-crypto-body { grid-template-columns: 10.5rem minmax(0, 1fr); justify-items: stretch; align-items: start; }
}
/* 10.5rem = 168px: 45 modules incl. the 4-module quiet zone drawn in the SVG, about 3.7px each */
.donate-qr { width: 10.5rem; height: auto; }
.donate-details { min-width: 0; }
.donate-label {
  font-size: var(--fs-xs); font-weight: var(--fw-text-strong);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--c-muted); margin-bottom: var(--space-2);
}
.donate-address-wrap { margin-bottom: var(--space-3); }
.wallet-address {
  display: block; padding: var(--space-3) var(--space-4);
  background: var(--c-surface-2); border-radius: var(--radius-sm);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1rem; line-height: 1.7; color: var(--c-ink);
  -webkit-user-select: all; user-select: all;
}
.wallet-address span { display: inline-block; margin-right: 0.45em; }
.wallet-address span:last-child { margin-right: 0; }
.donate-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.donate-copy .button { font-family: inherit; font-size: var(--fs-sm); cursor: pointer; min-height: 2.75rem; }
.donate-copy .button[hidden] { display: none; }
.copy-status { font-size: var(--fs-sm); color: var(--c-muted); font-weight: var(--fw-text-medium); }
.donate-warning, .donate-check { font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.donate-check { color: var(--c-muted); }
.donate-fine {
  max-width: var(--measure); margin: var(--space-5) 0 0;
  font-size: var(--fs-sm); color: var(--c-muted);
}

.contact-list { list-style: none; padding: 0; font-size: var(--fs-lg); }
.contact-list a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 0; overflow-wrap: anywhere; }
.contact-list .k { color: var(--c-muted); font-size: var(--fs-sm); display: block; }

/* ---------- simple pages (privacy, 404) ---------- */
.page { padding-block: var(--space-8) var(--section); }
.page h1 { font-size: var(--fs-h1); }
.page h2 { font-size: var(--fs-h3); margin-top: var(--space-7); }
.meta-line { color: var(--c-muted); font-size: var(--fs-sm); }
.notfound-lang + .notfound-lang { margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border); }

/* ---------- footer ---------- */
.site-footer { background: var(--millstone-ink); color: var(--lime-plaster); padding-block: var(--space-7); font-size: var(--fs-sm); }
.site-footer a { color: var(--lime-plaster); }
.site-footer a:hover { color: var(--lime-plaster); }
.site-footer :focus-visible { outline-color: var(--lime-plaster); }
.footer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); list-style: none; padding: 0; margin: 0; }
.footer-line li { min-width: 0; overflow-wrap: anywhere; }
.footer-line li:not(:has(a)) { padding-block: var(--space-1); }
/* 44px tap targets for footer links */
.footer-line a, .footer-lang a { display: inline-flex; align-items: center; min-height: 2.75rem; max-width: 100%; }
.footer-line li + li::before { content: "·"; margin-right: var(--space-4); }
@media (max-width: 40rem) {
  .footer-line { flex-direction: column; align-items: flex-start; }
  .footer-line li + li::before { content: none; }
}
.footer-lang { margin: var(--space-2) 0 0; }

/* Phones: tighter rhythm between sections (D-037 layout pass) */
@media (max-width: 36rem) {
  .section { padding-bottom: var(--space-7); }
  .divider { padding-block: var(--space-4) var(--space-3); }
  .section-head { margin-bottom: var(--space-5); }
}

/* ---------- photo-wall opening (D-040; engine: ../tools/photo-wall, README §1-2) ----------
   A sticky board one screen tall; the prints are placed absolutely (centre --dx/--dy, width --dw, tilt --dr;
   on portrait screens --mx/--my/--mw/--mr) and get stuck on one at a time while scrolling: js/intro.js sets
   --enter (0 to 1) per print in order of --i. Without JavaScript the wall is already complete. The section is
   100svh + N steps + 100svh tall with a negative margin: header and content slide up over the board.
   Per-print values live in the generated WALL_LAYOUT block at the end of this file (no inline styles, CSP). */
:root {
  --wall-board: var(--c-surface-2);
  --wall-print: #fff;              /* kit photo-wall.css: white paper border */
  --wall-shadow: #30272533;        /* kit shadow values */
  --wall-shadow-near: #30272522;
  --tape-water: var(--curone-light);
  --tape-terracotta: #D9876A;
  --tape-moss: #A9B78C;
  --tape-sand: var(--sandstone);
  --tape-chestnut: #B89A84;
  --header-h: calc(4.5rem + 1px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --wall-shadow: rgba(0, 0, 0, .55);   /* prints stay white; deeper shadow so they read on the dark board */
    --wall-shadow-near: rgba(0, 0, 0, .4);
    --tape-terracotta: #B8694B;
    --tape-moss: #7F8E63;
    --tape-sand: #BDAE93;
    --tape-water: #7FA9B3;
  }
}
html:has(.intro) { scroll-padding-top: var(--header-h); }
.intro ~ .site-header { position: sticky; top: 0; z-index: 20; background: var(--c-bg); }
.intro ~ main { position: relative; z-index: 2; background: var(--c-bg); }
.intro ~ .site-footer { position: relative; z-index: 2; }
.intro { --step: 30svh; --unit: min(1vw, 1.6svh); position: relative; z-index: 1; height: calc(200svh + var(--shots, 7) * var(--step)); margin-bottom: -100svh; }
.intro-board { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--wall-board); }
.intro-shots { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.intro-shot { --enter: 1; position: absolute; left: var(--dx); top: var(--dy); width: calc(var(--dw) * var(--unit)); --r: var(--dr); translate: -50% -50%; }
.intro-card { position: relative; margin: 0; padding: 7px 7px 10px; background: var(--wall-print); border-radius: var(--radius-sm); box-shadow: 0 12px 34px var(--wall-shadow), 0 1px 2px var(--wall-shadow-near); transform: rotate(var(--r, 0deg)); }
.intro-card::before { content: ""; position: absolute; top: -9px; left: 50%; width: 32%; min-width: 34px; max-width: 78px; height: 18px; background: var(--tape, var(--tape-sand)); opacity: .9; transform: translateX(-50%) rotate(calc(var(--r, 0deg) * -1.5)); box-shadow: 0 1px 2px var(--wall-shadow-near); }
.intro-card img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; border-radius: 1px; background: var(--c-surface); }
.intro-skip { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); translate: -50% 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--c-ink); background: var(--c-bg); box-shadow: 0 2px 12px var(--wall-shadow); animation: intro-nudge 2.4s ease-in-out infinite; z-index: 50; }
.intro-skip:hover { color: var(--c-on-primary); background: var(--c-primary); }
.intro-skip:focus-visible { border-radius: 50%; }
@keyframes intro-nudge { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 8px; } }
/* With JavaScript: each print appears when its step comes (--enter), slapped on with scale and rotation. */
.intro-enhanced .intro-card { opacity: var(--enter); transform: rotate(calc(var(--r, 0deg) + (1 - var(--enter)) * -9deg)) scale(calc(1.2 - .2 * var(--enter))); box-shadow: 0 calc(12px + 28px * (1 - var(--enter))) calc(34px + 30px * (1 - var(--enter))) var(--wall-shadow), 0 1px 2px var(--wall-shadow-near); will-change: transform, opacity; }
.intro-enhanced .intro-skip { opacity: var(--skip, 1); transition: opacity .2s; }
.intro-enhanced .intro-skip[data-hidden] { visibility: hidden; }
@media (orientation: portrait) {
  .intro-shot { left: var(--mx); top: var(--my); width: calc(var(--mw) * min(1vw, 0.62svh)); --r: var(--mr); }
  .intro-card { padding: 5px 5px 7px; }
  .intro-card::before { height: 14px; top: -7px; min-width: 26px; }
  .intro-skip { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-skip { animation: none; }
  .intro-enhanced .intro-card { transform: rotate(var(--r, 0deg)); box-shadow: 0 12px 34px var(--wall-shadow), 0 1px 2px var(--wall-shadow-near); }
}

/* WALL_LAYOUT:START */
/* Generated by tools/build_wall.py from images/wall-layout.json - do not edit by hand. */
.intro { --shots: 7; --step: 30svh; }
.intro-shot--1 { --i: 0; --ar: 622 / 466; --tape: var(--tape-terracotta); --dx: 43.0%; --dy: 55.0%; --dw: 38; --dr: -2deg; --mx: 46.9%; --my: 34.3%; --mw: 70; --mr: -2deg; }
.intro-shot--2 { --i: 1; --ar: 748 / 563; --tape: var(--tape-water); --dx: 58.3%; --dy: 21.9%; --dw: 26.7; --dr: 4deg; --mx: 72.5%; --my: 15.1%; --mw: 50.5; --mr: 3deg; }
.intro-shot--3 { --i: 2; --ar: 750 / 562; --tape: var(--tape-moss); --dx: 19.4%; --dy: 75.6%; --dw: 34; --dr: -3deg; --mx: 29.6%; --my: 54.1%; --mw: 54; --mr: -4deg; }
.intro-shot--4 { --i: 3; --ar: 749 / 562; --tape: var(--tape-chestnut); --dx: 74.7%; --dy: 68.0%; --dw: 46.9; --dr: 2deg; --mx: 48.7%; --my: 77.1%; --mw: 88; --mr: 2deg; }
.intro-shot--5 { --i: 4; --ar: 530 / 398; --tape: var(--tape-moss); --dx: 16.0%; --dy: 23.5%; --dw: 28; --dr: -4deg; --mx: 26.1%; --my: 14.3%; --mw: 47.6; --mr: -3deg; }
.intro-shot--6 { --i: 5; --ar: 753 / 551; --tape: var(--tape-sand); --dx: 83.6%; --dy: 22.5%; --dw: 28.9; --dr: 3deg; --mx: 71.6%; --my: 58.1%; --mw: 51.2; --mr: 4deg; }
.intro-shot--7 { --i: 6; --ar: 748 / 562; --tape: var(--tape-chestnut); --dx: 39.0%; --dy: 20.2%; --dw: 19; --dr: -3deg; --mx: 79.6%; --my: 42.8%; --mw: 36.7; --mr: -3deg; }
@media (orientation: portrait) { .intro { --step: 28svh; } }
/* WALL_LAYOUT:END */