/* v4 home page journey. Hebrew, right to left. Typography follows the approved frames (design/real-city/make_real.py):
   Heebo 800 for the giant words, Heebo 600 for the lines, Assistant for the body, ultramarine #1D2F7E, white / gold / warm cream on the pictures.
   --s is one hundredth of a 1440 px wide screen, shrunk when the screen is short, so the whole composition scales together (1440x900 = 14.4px). */
:root {
  --blue: #1D2F7E;
  --s: min(1vw, 1.6svh);
  --px: calc(var(--s) * 4.1);
  --hdr: calc(var(--s) * 5.3);
  --bar: 58px;
  --accent: #fff;
  --font: Leon, Heebo, "Assistant", "Segoe UI", Arial, sans-serif;
  --body: Polin, Assistant, Heebo, "Segoe UI", Arial, sans-serif;
  /* ONE set of curves and durations for every move of the interface (round 7). main.js reads the three curves from here for the scrubbed text, after.js for the scroll scroller. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);          /* entrances, exits, hover, press */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);      /* things that travel across the screen (sweeps, clips, the scroller) */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);       /* the contact bar */
  --t-press: 160ms; --t-hover: 220ms; --t-line: 280ms; --t-fill: 220ms; --t-reveal: 760ms; --t-clip: 1000ms; --t-step: 70ms;
  --sat: env(safe-area-inset-top, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* the platform layer (mobile-native): no grey flash on a tap, no pull-to-refresh or rubber band over the pinned picture, dark scrollbars; pinch zoom is never touched */
html { background: #0A1230; color: #fff; color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
body { background: #0A1230; font: 400 18px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a, button, summary { touch-action: manipulation; }       /* no double-tap-zoom delay on a control; scrolling and pinch zoom stay */
:focus-visible { outline: 3px solid #FFE2A8; outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; inset-inline-start: 8px; top: -60px; z-index: 60; background: var(--blue); color: #fff; padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 8px; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: calc(var(--hdr) + var(--sat)); min-height: calc(52px + var(--sat));
  display: flex; align-items: center; justify-content: space-between; padding: var(--sat) max(calc(var(--s) * 3.9), calc(var(--sar) + 6px)) 0 max(calc(var(--s) * 3.9), calc(var(--sal) + 6px));
  color: #fff; font: 500 max(15px, calc(var(--s) * 1.25))/1 var(--body);
  text-shadow: 0 0 8px rgba(8, 14, 40, calc(.55 * var(--hs, 0)));      /* the header text over the bright first overview: a soft dark halo instead of a heavier gradient (main.js writes --hs) */
}
/* the colour of the header text is part of the scrubbed picture (main.js flips .dark at the exact p where the picture changes), so it has no clock of its own: it used to trail the picture by 0.35 s */
.site-header.dark { color: #14235F; }
.brand { font-weight: 700; font-size: max(17px, calc(var(--s) * 1.4)); text-decoration: none; }
.nav { display: flex; align-items: center; gap: calc(var(--s) * 2.5); }
.nav a { text-decoration: none; }
.brand, .nav a { position: relative; display: flex; align-items: center; min-height: 44px; }      /* a thumb-sized target; the 52 px header already centres them */
/* the underline of a link is drawn from the start side (the right one in Hebrew) and leaves the way it came: transform only */
.brand::after, .nav a::after { content: ''; position: absolute; inset-inline: 0; bottom: 9px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-line) var(--ease-out); pointer-events: none; }
.tel { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the stage and the acts */
.runway { position: relative; }
.stage { position: relative; background: #0A1230; overflow: clip; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.act { position: relative; isolation: isolate; }
.still { position: absolute; inset: 0; z-index: -1; display: block; }
.still img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.act a { color: inherit; }

/* act 0: the headline and the button, bottom right */
.act-open .copy { position: absolute; right: var(--px); bottom: calc(var(--s) * 3.6); display: flex; flex-direction: column; align-items: flex-start; will-change: transform, opacity; }
.h1 { font: 600 calc(var(--s) * 2.36)/1.25 var(--font); max-width: calc(var(--s) * 40); margin-bottom: calc(var(--s) * 1.7); text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
/* buttons: a fill sweeps in from the start edge (the right one) on hover, the button gives way under a press (the individual `scale` property: the scroll writes the `transform` of the finale button every frame, so a
   transform transition here would fight it) and, for a fine pointer only, follows the cursor by a few pixels (after.js writes `translate`) */
.btn {
  --fill: #2D45B0;
  position: relative; isolation: isolate; overflow: hidden; display: inline-block; background: var(--blue); color: #fff; text-decoration: none; font: 700 max(16px, calc(var(--s) * 1.32))/1.2 var(--body);
  padding: calc(var(--s) * 1.1) calc(var(--s) * 1.95);
  transition: scale var(--t-press) var(--ease-out), translate 400ms var(--ease-out);
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: translate3d(101%, 0, 0); transition: transform var(--t-fill) var(--ease-in-out); }
.btn:active { scale: .97; transition-duration: 80ms, 400ms; }

/* acts 2-4: the text column on the right, over the veil */
.act-hood .txt, .act-final .txt { position: absolute; }
.act-hood .txt { right: calc(var(--s) * 4.1); top: calc(var(--s) * 10.4); width: calc(var(--s) * 39); display: flex; flex-direction: column; align-items: flex-start; --accent: #fff; }
.act-hood.gold .txt { --accent: #FFE2A8; }
.act-hood.night .txt { --accent: #F2CF8A; }
.count, .kick { font: 400 calc(var(--s) * 1.25)/1.2 var(--body); opacity: .92; }
.count { margin-bottom: calc(var(--s) * 1.6); }
.count span, .kick, .sub, .sent, .more { display: block; }
/* the heading of an act holds the live wording («שכונת X: tagline»): a small «שכונת» above the giant name, the name in its own mask, the tagline under it. The kicker takes no room (the margin cancels its own line) and is moved down
   into the empty band above the letters (the letters stand about a third of their size below the top of their line), so the name and everything under it stay exactly where they were; the night name is smaller, its band is shorter */
.hh { margin-top: -.06em; }      /* the top margin of the mask (below): it used to be the heading itself, and the kicker's margin swallows the mask's own */
.kick { margin-bottom: -1.2em; position: relative; top: calc(var(--s) * 2.2); text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
.act-hood.night .kick { top: var(--s); }
.name { display: block; overflow: hidden; padding: .06em .04em .17em; margin: -.06em -.04em -.17em; line-height: 1; }
.name > span { display: block; font: 800 calc(var(--s) * 15)/1 var(--font); letter-spacing: -.023em; white-space: nowrap; text-shadow: 0 4px 40px rgba(0, 0, 0, .35); }
.act-hood.night .name > span { white-space: normal; width: min-content; font-size: calc(var(--s) * 11.6); line-height: .98; }
/* the giant names are built from words and letters by main.js (live journey only; the static screens keep the plain text). Every word is its own mask: a letter rises out of the bottom edge of its word and leaves through the
   top, the letters one after another in reading order (the DOM order is the reading order, so in Hebrew the right-most letter goes first). No letter is ever half transparent. */
.name .w { display: inline-block; vertical-align: top; white-space: nowrap; overflow: hidden; padding: .06em .04em .17em; margin: -.06em -.04em -.17em; }
.name .l { display: inline-block; }
.sub { text-wrap: balance; font: 600 calc(var(--s) * 2.22)/1.3 var(--font); max-width: calc(var(--s) * 30); margin-top: calc(var(--s) * 2.2); color: var(--accent); text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }
.sent { text-wrap: pretty; font: 400 max(16px, calc(var(--s) * 1.39))/1.6 var(--body); max-width: calc(var(--s) * 28); margin-top: calc(var(--s) * 1.3); text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
.more { position: relative; isolation: isolate; font: 700 max(16px, calc(var(--s) * 1.39))/1.3 var(--body); color: var(--accent); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 4px; margin-top: calc(var(--s) * 3.6); transition: opacity var(--t-press) var(--ease-out); }
.more::after { content: ''; position: absolute; inset: 0 -6px 0; z-index: -1; background: rgba(255, 255, 255, .13); transform: scaleX(0); transform-origin: right; transition: transform var(--t-line) var(--ease-out); }
.more:active { opacity: .7; }
.more::before { content: ''; position: absolute; inset: -14px -10px; }          /* a thumb-sized hit area around the link; the look does not change */

/* act 5: the finale, centred low, over the lit city */
.act-final .txt { inset-inline: 0; bottom: calc(var(--s) * 3.4); display: flex; flex-direction: column; align-items: center; text-align: center; --accent: #F6E2B8; }
.act-final .sold { overflow: visible; padding: 0; margin: 0; }      /* the word rises and lands without a mask (its glow must not be cut); with a hidden overflow the top half of the letters was cut for a moment */
.sold .w { overflow: visible; padding: 0; margin: 0; }
.sold > span { font: 800 calc(var(--s) * 15.5)/1 var(--font); letter-spacing: -.02em; color: #F6E2B8; text-shadow: 0 0 46px rgba(0, 0, 0, .55), 0 0 90px rgba(255, 170, 70, .35), 0 6px 30px rgba(0, 0, 0, .5); }
.quote { font: 600 calc(var(--s) * 2.3)/1.3 var(--font); margin-top: calc(var(--s) * .5); color: #FBEFD6; text-shadow: 0 2px 24px rgba(0, 0, 0, .65); }
.act-final .btn { --fill: #FFF6E1; margin-top: calc(var(--s) * 1.5); background: #F6E2B8; color: #2A1B0A; }

.note, .note-act {
  position: absolute; left: calc(var(--s) * 1.7); bottom: 16px; z-index: 5; pointer-events: none;
  font: 500 clamp(12px, .95vw, 16px)/1.2 var(--body); color: #fff; padding: 5px 11px; border-radius: 3px;
  background: rgba(10, 18, 48, .64); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);       /* a small navy plate: readable over haze, sky and rooftops alike */
}
.note-act { display: none; }
.bar { display: none; }

/* ---------------------------------------------------------------- live: a tall runway, a pinned stage, the canvas behind the text */
/* 420 svh of journey + 40 svh of hold (the finale rests at p = 1) + the pinned stage (100 svh); keep HOLD in main.js in step */
.live .runway { height: 560vh; height: 560svh; }
.live .stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.live .act { position: absolute; inset: 0; pointer-events: none; }
.live .act a { pointer-events: auto; }
.live .still { display: none; }
.poster { position: absolute; inset: 0; z-index: 0; display: block; }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 39%; display: block; }      /* the horizon of the poster picture (39 percent of its height, as in the canvas) stays where the canvas puts it on every screen shape: the fade to the canvas has no push */
/* round 9: on wide screens the horizon of the canvas rises (OPEN.bottomRow: the zebra crossing stays in view, the picture row 0.93 sits at the bottom of the screen), so the poster (the 16:10 render) is shown from its bottom edge: 16:9 differs from the canvas by a few percent of the pixels this way (it was 60 percent without) */
@media (min-aspect-ratio: 8/5) and (max-aspect-ratio: 2/1) { .poster img { object-position: 50% calc(100% - .2svh); } }      /* (the horizon needs 0.2 percent of the height more than the picture can give) */
@media (min-aspect-ratio: 2/1) and (max-aspect-ratio: 21/10) { .poster img { object-position: 50% 96%; } }
@media (min-aspect-ratio: 21/10) { .poster img { object-position: 50% 80%; } }
.static .poster, .no-js .poster, .no-poster .poster { display: none; }
.live.gl-on .stage canvas { opacity: 1; transition: opacity .4s ease-out; }
.live.gl-on .poster { opacity: 0; visibility: hidden; transition: opacity .12s linear .42s, visibility 0s .6s; }   /* the poster stays opaque until the canvas has fully faded in: no dip to navy */
.live .act:not(.act-open) .txt > *:not(.name):not(.hh), .live .act-hood .kick, .live .act-hood .sub { opacity: 0; }      /* the kicker and the tagline live inside the heading now (.hh), so they are named here */
.live .name > span:not(.split) { transform: translate(0, 108%); }      /* before main.js has built the letters */
.live .name .l { transform: translate(0, 108%); }
.live .act-final .sold > span:not(.split), .live .act-final .sold .l { opacity: 0; }      /* round 7: the finale word was visible at the bottom of the opening from the first paint until the first frame was drawn */
.live .sold .l { transform: none; }
.live .act-final .btn { pointer-events: none; }
.live .act-final .txt { will-change: transform, opacity; }      /* the hand-over into the sections (after.js) moves and fades the finale text: a layer made in advance (made on the first frame of the hand-over it cost a 35-50 ms frame, measured with review/skills4-ui/hitch2.py) */
.live .act-hood .more { pointer-events: none; }

/* the arrival of the opening (round 7): played once, from the first paint (over the poster, so a slow line does not delay it). The words of the headline come up one after another (they are spans in the markup, so the lines
   can wrap anywhere), then the button, then the contact bar of a phone slides up. Nothing in the label: it is a disclosure and stays visible from the first paint. Transform and opacity only. A visitor who scrolls takes
   the parent away (main.js fades .copy), the test hook adds .intro-done and everything is at its final state. */
@keyframes introRise { from { opacity: 0; transform: translate(0, .5em); } to { opacity: 1; transform: none; } }
@keyframes introBtn { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes barUp { from { transform: translate(0, 100%); } to { transform: none; } }
@keyframes cue { 0%, 100% { opacity: 0; transform: translate3d(0, -5px, 0) rotate(45deg); } 45% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 6px, 0) rotate(45deg); } }
.live .act-open .h1 .wd { animation: introRise var(--t-reveal) var(--ease-out) calc(160ms + var(--i, 0) * 55ms) backwards; }
.live .act-open .btn { animation: introBtn 560ms var(--ease-out) 640ms backwards; }
.live .bar { animation: barUp 480ms var(--ease-drawer) 820ms backwards; }
.intro-done .wd, .intro-done .act-open .btn, .intro-done .bar { animation: none !important; }
.act-open .h1 .wd { display: inline-block; }

/* ---------------------------------------------------------------- static: no WebGL2, reduced motion, or no script: five screens, a still each */
.no-js .stage, .static .stage { display: block; }
.no-js .stage canvas, .static .stage canvas { display: none; }
.no-js .act, .static .act { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.no-js .site-header, .static .site-header { background: rgba(10, 18, 48, .78); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.no-js .site-header.dark, .static .site-header.dark { color: #fff; }
.no-js .act-open .copy, .static .act-open .copy { bottom: calc(var(--s) * 8); }
.no-js .act-final .txt, .static .act-final .txt { inset-block-end: calc(var(--s) * 8); }
.no-js .note, .static .note { display: none; }
.no-js .note-act, .static .note-act { display: block; }
.static .name > span, .no-js .name > span, .static .name .l { transform: none; }
.static .act-final .btn, .static .act-hood .more { pointer-events: auto; }

/* ---------------------------------------------------------------- hover: only where a real pointer can hover (a touch screen keeps the last hover after a tap) */
@media (hover: hover) and (pointer: fine) {
  .brand:hover::after, .nav a:hover::after { transform: scaleX(1); }
  .btn:hover::before { transform: none; }
  .more:hover::after { transform: scaleX(1); }
}
.brand:active, .nav a:active { opacity: .6; }
.brand, .nav a { transition: opacity var(--t-press) var(--ease-out); }
/* a long press on a control must not select its label or open the callout; the phone number and the text of the page stay selectable */
.btn, .more, .brand, .nav a:not(.tel), .bar a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------------------------------------------------------------- phone: portrait. The hood in the upper part, the text in the lower part, the contact bar below */
@media (max-width: 700px), (max-aspect-ratio: 9/10) {
  :root { --px: 18px; --hdr: 52px; }
  .site-header { padding: var(--sat) max(16px, calc(var(--sar) + 6px)) 0 max(16px, calc(var(--sal) + 6px)); font-size: 15px; }
  .nav a:not(.tel) { display: none; }
  .nav { gap: 0; }
  .poster img { object-position: 50% 48%; }      /* the phone composition: horizon at 48 percent (round 9; it was 40) */
  /* round 9 (the street picture): the people at the zebra crossing and the buses are in the lower half of the picture, so the headline moved UP into the sky strip between the label and the giant word (navy on the sky,
     like the header text), and the contact bar no longer hides the crossing: the picture is fitted down to the top of the bar (stage.js OPEN.barPortrait) */
  .act-open .copy { left: max(18px, calc(var(--sal) + 6px)); right: max(18px, calc(var(--sar) + 6px)); --h1top: calc(var(--hdr) + var(--sat) + 54px); top: var(--h1top); bottom: auto; align-items: stretch; }
  .act-open .h1 { color: #14235F; text-shadow: 0 1px 14px rgba(255, 255, 255, .35); }
  /* a scroll cue under the headline (a phone only: it leaves with the headline on the first scroll): a small chevron that breathes, drawn with two borders, no markup */
  .act-open .copy::after { content: ''; position: absolute; left: 50%; top: calc(100svh - var(--bar) - env(safe-area-inset-bottom, 0px) - 26px - var(--h1top)); width: 11px; height: 11px; margin-left: -6px; border-right: 2px solid rgba(255, 255, 255, .92); border-bottom: 2px solid rgba(255, 255, 255, .92); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6)); transform: rotate(45deg); animation: cue 2.4s ease-in-out 2.4s infinite both; pointer-events: none; opacity: 0; }
  .static .act-open .copy::after, .no-js .act-open .copy::after { display: none; }
  html:not([data-act="open"]) .act-open .copy::after { animation-play-state: paused; }      /* the cue does not run while the headline is gone */
  .h1 { font-size: clamp(25px, 6.6vw, 40px); max-width: none; margin-bottom: 0; line-height: 1.22; }
  .act-open .btn { display: none; }
  .h1 br { display: none; }
  .act-hood .txt { left: max(18px, calc(var(--sal) + 6px)); right: max(18px, calc(var(--sar) + 6px)); top: auto; width: auto; bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px) + 34px); }
  .count, .kick { font-size: 15px; }
  .count { margin-bottom: 4px; }
  .kick, .act-hood.night .kick { top: 0; }      /* the letters stand closer to the top of their line here: the kicker stays at the top of it */
  .count span { display: inline-block; padding: 2px 9px; background: rgba(8, 14, 36, .55); }
  .kick { width: fit-content; padding: 0 9px; background: rgba(8, 14, 36, .55); }      /* the small «שכונת» above the giant name has the plate of the counter too: over the white roofs of the first neighbourhood it was hard to read */      /* the counter sits on a small dark plate: on a small phone it can land on a bright lit roof */
  .name > span { font-size: min(27vw, 13.5svh); }
  .act-hood.night .name > span { font-size: min(21.5vw, 10.5svh); }
  .sub { font-size: clamp(21px, 5.6vw, 32px); margin-top: 8px; max-width: none; }
  .sent { font-size: clamp(16px, 4.3vw, 22px); margin-top: 6px; max-width: none; }
  .more { font-size: clamp(16px, 4.3vw, 22px); margin-top: 14px; }
  .act-final .txt { inset-inline: max(18px, calc(var(--sal) + 6px)) max(18px, calc(var(--sar) + 6px)); bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px) + 36px); }
  .sold > span { font-size: min(38vw, 18svh); }
  .quote { font-size: clamp(22px, 6vw, 34px); margin-top: 6px; }
  .act-final .btn { display: none; }
  .note, .note-act { left: max(12px, calc(var(--sal) + 6px)); top: calc(var(--hdr) + var(--sat) + 8px); bottom: auto; font-size: 13px; padding: 4px 9px; background: rgba(10, 18, 48, .74); -webkit-backdrop-filter: none; backdrop-filter: none; }      /* no blur on a phone: a blur over a canvas that redraws every frame costs a weak GPU; the plate is a little more opaque instead */      /* phone: the label sits just under the header, away from the text that fills the lower part */
  .bar {
    display: grid; grid-template-columns: 1fr 1fr 1.25fr; position: fixed; z-index: 40; inset: auto 0 0 0;
    height: calc(var(--bar) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(8, 14, 36, .94); border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .bar a { display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; font-size: 16px; color: #fff; transition: background-color 220ms var(--ease-out); }
  .bar a:active { background: rgba(255, 255, 255, .16); transition-duration: 60ms; }      /* the answer comes at the touch, not at the release */
  .bar a + a { border-inline-start: 1px solid rgba(255, 255, 255, .14); }
  .bar a.val { background: #F6E2B8; color: #2A1B0A; border-inline-start: 0; }
  .bar a.val:active { background: #E9CF9C; }
  .static .act-final .btn, .no-js .act-final .btn { display: inline-block; }
  .static .act-open .btn, .no-js .act-open .btn { display: none; }      /* round 9: the headline stands at the top now (above the word) and the contact bar below has the same valuation button, so the static phone has no second one in the sky */
  /* static / no-JS on a phone: the same offsets as the live layout, so the h1, the quote and both buttons end above the fixed contact bar; the label sits at the top, away from the text */
  .no-js .act-open .copy, .static .act-open .copy { bottom: auto; top: var(--h1top); }
  .no-js .act-final .txt, .static .act-final .txt { inset-block-end: calc(var(--bar) + env(safe-area-inset-bottom, 0px) + 34px); }
  .no-js .note-act, .static .note-act { bottom: auto; top: calc(var(--hdr) + 10px); }
}

/* 11 Oct: from 370 to 666 px wide the headline wraps to three lines (the live sentence with the city; it was two). It grows UPWARD by the extra line, so its bottom edge, and with it the room main.js leaves for the giant word (`clear`), stays where it was: otherwise the word shrinks by a quarter on a short phone (390x664). The cap keeps it 12px under the header on wide phones; at 360 px and below it was three lines before too */
@media (min-width: 370px) and (max-width: 666px) { .act-open .copy { --h1top: calc(var(--hdr) + var(--sat) + 54px - min(36px, 1.22 * clamp(25px, 6.6vw, 40px))); } }

/* a tablet in portrait with the static screens (reduced motion, no WebGL, no JavaScript): the phone crop of the still is shown on a wider screen, so only the upper part of it fits; keep the word and the buses in view, below the headline */
@media (min-aspect-ratio: 3/5) and (max-aspect-ratio: 9/10) and (min-width: 701px) { .act-open .still img { object-position: 50% 20%; } }

@media (max-height: 560px) and (min-aspect-ratio: 9/10) {
  .count, .kick { font-size: max(11px, calc(var(--s) * 1.25)); }
  .sub { font-size: max(15px, calc(var(--s) * 2.22)); }
  .h1 { font-size: max(18px, calc(var(--s) * 2.36)); }
  .act-open .copy { right: max(var(--px), calc(var(--sar) + 8px)); }
  .act-hood .txt { right: max(calc(var(--s) * 4.1), calc(var(--sar) + 8px)); }
  .note { font-size: 11px; padding: 3px 7px; left: max(8px, calc(var(--sal) + 6px)); bottom: 8px; }      /* short landscape screens: a smaller plate, it sits on the corner where the nearest cars pass */
  .site-header { min-height: 44px; }
  .btn { padding: 9px 16px; }
  .act-hood .txt { top: calc(var(--s) * 7.2); }      /* short landscape screens: the hood text starts higher so its link stays inside the screen */
}

@media (prefers-reduced-motion: reduce) { .btn::before { transition: none; } .btn { transition: none; } .more::after, .brand::after, .nav a::after { transition: none; } }

/* the owner asked to remove the 'computer generated' plate from the pictures (7 Oct); the note stays in the footer */
.note, .note-act { display: none !important; }