/* ==========================================================================
   Sentinal — coming soon
   The same brand system as the website: warm paper, hairline structure,
   forest type, copper as the only colour. The emblem is an instrument: rings,
   a dial and a sweep that lights each point it passes, again and again.
   ========================================================================== */

/* @fonts:start */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* @fonts:end */

:root {
  color-scheme: light;

  /* Brand — Forest & Fog */
  --fog: #F5F2EC;
  --white: #FFFFFF;
  --stone: #EDE8E0;
  --border: #DDD8CE;
  --light: #9BA89E;
  --muted: #6B7A6F;
  --mid: #5A7060;
  --forest: #1A2E1E;
  --dark: #0F1F12;
  --copper-wash: #F0DFCB;
  --copper: #B87333;
  --copper-deep: #8F5620;

  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 4.2vw, 40px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* One turn of the sweep. The dial, the points on the rings, the pulse and
     the glint on the shield are all timed from these two values. */
  --beat: 9s;
  --start: 1.95s;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--fog);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--fog);
  color: var(--mid);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, p { margin: 0; }
::selection { background: var(--copper-wash); color: var(--forest); }

/* ---------- Page ---------- */
.page {
  --s: 1;       /* scale of the emblem, set per screen size below */
  --px: 0;      /* pointer position, -1 to 1, set by coming-soon.js */
  --py: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
/* Paper: a little more light at the centre, a warm edge */
.page::before {
  content: "";
  position: absolute; inset: 0; z-index: -5;
  pointer-events: none;
  background:
    radial-gradient(56% 48% at 50% 34%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 72%),
    radial-gradient(125% 100% at 50% 36%, rgba(221, 216, 206, 0) 56%, rgba(221, 216, 206, 0.55) 100%);
}

.stage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(56px * var(--s) + env(safe-area-inset-top, 0px)) var(--gutter) calc(36px * var(--s));
}

/* ---------- Emblem ---------- */
.emblem {
  position: relative;
  flex: none;
  width: calc(208px * var(--s));
  height: calc(208px * var(--s));
  margin-bottom: calc(44px * var(--s));
}
.glow, .instrument, .mark-wrap { position: absolute; left: 50%; top: 50%; }

.glow {
  z-index: -4;
  width: calc(1120px * var(--s));
  height: calc(820px * var(--s));
  margin: calc(-410px * var(--s)) 0 0 calc(-560px * var(--s));
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(184, 115, 51, 0.15), rgba(184, 115, 51, 0.055) 48%, rgba(184, 115, 51, 0) 100%);
  translate: calc(var(--px) * 26px) calc(var(--py) * 18px);
  animation: fade-in 2.6s ease-out both, drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(3%, 4%, 0) scale(1.08); } }

.instrument {
  z-index: -3;
  width: 0;
  height: 0;
  translate: calc(var(--px) * -12px * var(--s)) calc(var(--py) * -12px * var(--s));
}
.instrument > * { position: absolute; left: 0; top: 0; pointer-events: none; }

/* The sweep: a soft copper wake behind a bright leading edge */
.sweep {
  width: calc(1000px * var(--s));
  height: calc(1000px * var(--s));
  margin: calc(-500px * var(--s)) 0 0 calc(-500px * var(--s));
  border-radius: 50%;
  background: conic-gradient(
    rgba(184, 115, 51, 0) 0deg,
    rgba(184, 115, 51, 0) 236deg,
    rgba(184, 115, 51, 0.06) 316deg,
    rgba(184, 115, 51, 0.16) 352deg,
    rgba(184, 115, 51, 0.24) 359.3deg,
    rgba(184, 115, 51, 0) 360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, transparent 15%, #000 23%, #000 52%, transparent 100%);
          mask-image: radial-gradient(closest-side, transparent 15%, #000 23%, #000 52%, transparent 100%);
  opacity: 0;
  will-change: transform;
  animation: sweep-in 2s ease-out var(--start) forwards, spin var(--beat) linear var(--start) infinite;
}
.beam {
  position: absolute; left: 50%; top: 0;
  width: 1px; height: 50%;
  margin-left: -0.5px;
  background: linear-gradient(to top, rgba(184, 115, 51, 0.75), rgba(184, 115, 51, 0.3) 55%, rgba(184, 115, 51, 0));
}
/* a soft glow along the leading edge */
.beam::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -7px; right: -7px;
  background: linear-gradient(to top, rgba(184, 115, 51, 0.16), rgba(184, 115, 51, 0) 70%);
  filter: blur(5px);
}
@keyframes sweep-in { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(1turn); } }

/* Rings of light that leave the shield each time the sweep comes round */
.pulse {
  width: calc(640px * var(--s));
  height: calc(640px * var(--s));
  margin: calc(-320px * var(--s)) 0 0 calc(-320px * var(--s));
  border-radius: 50%;
  border: 1.5px solid var(--copper);
  opacity: 0;
  transform: scale(0.17);
  will-change: transform, opacity;
  animation: ping var(--beat) cubic-bezier(0.2, 0.6, 0.35, 1) var(--start) infinite;
}
.pulse-2 { animation-delay: calc(var(--start) + 0.34s); }
.pulse-hover { animation: none; }
@keyframes ping {
  0% { opacity: 0.7; transform: scale(0.17); }
  36%, 100% { opacity: 0; transform: scale(1); }
}

/* The field: rings, points on the rings (the portfolio) and the dial */
.field {
  --sw: calc(1 / var(--s));   /* keeps every hairline at 1px whatever the scale */
  width: calc(1920px * var(--s));
  height: calc(1920px * var(--s));
  margin: calc(-960px * var(--s)) 0 0 calc(-960px * var(--s));
  overflow: visible;
}
.face { animation: fade-in 1.6s ease-out 0.15s both; }
.ring {
  fill: none;
  stroke: #CCC5B8;
  stroke-width: var(--sw);
  animation: none 2.4s var(--ease-out) both;   /* each ring's own draw-in is generated below */
}
.ring:nth-child(1) { animation-delay: 0.1s; }
.ring:nth-child(2) { animation-delay: 0.2s; opacity: 0.82; }
.ring:nth-child(3) { animation-delay: 0.3s; opacity: 0.66; }
.ring:nth-child(4) { animation-delay: 0.4s; opacity: 0.52; }
.ring:nth-child(5) { animation-delay: 0.5s; opacity: 0.4; }

/* Dash lengths are the real lengths of each line (2πr for the dial) */
.dial-ring {
  fill: none;
  stroke: rgba(26, 46, 30, 0.2);
  stroke-width: var(--sw);
  stroke-dasharray: 653.45 655.45;
  animation: draw-dial 1.5s var(--ease-out) 0.2s both;
}
@keyframes draw-dial { from { stroke-dashoffset: 654.45; } to { stroke-dashoffset: 0; } }
/* Each tick lights copper as the sweep passes, then cools back */
.tk {
  stroke: #CFC8BB;
  stroke-width: 1.3;
  stroke-linecap: round;
  animation: fade-in 0.5s ease-out both, lit var(--beat) linear infinite;
  animation-delay: calc(0.3s + var(--i) * 11ms), calc(var(--start) + var(--beat) * var(--i) / 72);
}
.tk-mid { stroke: #B5B7AC; stroke-width: 1.4; animation-name: fade-in, lit-mid; }
.tk-major { stroke: #8E9A90; stroke-width: 1.7; animation-name: fade-in, lit-major; }
@keyframes lit { 0% { stroke: #B87333; } 22%, 100% { stroke: #CFC8BB; } }
@keyframes lit-mid { 0% { stroke: #B87333; } 22%, 100% { stroke: #B5B7AC; } }
@keyframes lit-major { 0% { stroke: #B87333; } 22%, 100% { stroke: #8E9A90; } }

.blip { animation: fade-in 0.7s ease-out var(--d) both; }
.b-dot {
  fill: #B9B6AA;
  animation: blip-lit var(--beat) linear infinite;
  animation-delay: calc(var(--start) + var(--beat) * var(--a) / 360);
}
.b-ring {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: blip-ping var(--beat) cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  animation-delay: calc(var(--start) + var(--beat) * var(--a) / 360);
}
@keyframes blip-lit {
  0%, 4% { fill: #B87333; }
  36%, 100% { fill: #B9B6AA; }
}
@keyframes blip-ping {
  0% { opacity: 0.85; transform: scale(1); }
  20%, 100% { opacity: 0; transform: scale(6); }
}

/* Generated by build.py: each ring draws itself in from twelve o'clock */
.ring:nth-child(1){stroke-dasharray:1319.47 1321.47;animation-name:draw-ring-1} @keyframes draw-ring-1{from{stroke-dashoffset:1320.47}to{stroke-dashoffset:0}}
.ring:nth-child(2){stroke-dasharray:2073.45 2075.45;animation-name:draw-ring-2} @keyframes draw-ring-2{from{stroke-dashoffset:2074.45}to{stroke-dashoffset:0}}
.ring:nth-child(3){stroke-dasharray:2953.10 2955.10;animation-name:draw-ring-3} @keyframes draw-ring-3{from{stroke-dashoffset:2954.10}to{stroke-dashoffset:0}}
.ring:nth-child(4){stroke-dasharray:4021.24 4023.24;animation-name:draw-ring-4} @keyframes draw-ring-4{from{stroke-dashoffset:4022.24}to{stroke-dashoffset:0}}
.ring:nth-child(5){stroke-dasharray:5277.88 5279.88;animation-name:draw-ring-5} @keyframes draw-ring-5{from{stroke-dashoffset:5278.88}to{stroke-dashoffset:0}}
/* Generated by build.py: each tick's place on the dial (the sweep reaches it at --i/72 of a turn) */
.tk:nth-child(1){--i:0} .tk:nth-child(2){--i:1} .tk:nth-child(3){--i:2} .tk:nth-child(4){--i:3} .tk:nth-child(5){--i:4} .tk:nth-child(6){--i:5}
.tk:nth-child(7){--i:6} .tk:nth-child(8){--i:7} .tk:nth-child(9){--i:8} .tk:nth-child(10){--i:9} .tk:nth-child(11){--i:10} .tk:nth-child(12){--i:11}
.tk:nth-child(13){--i:12} .tk:nth-child(14){--i:13} .tk:nth-child(15){--i:14} .tk:nth-child(16){--i:15} .tk:nth-child(17){--i:16} .tk:nth-child(18){--i:17}
.tk:nth-child(19){--i:18} .tk:nth-child(20){--i:19} .tk:nth-child(21){--i:20} .tk:nth-child(22){--i:21} .tk:nth-child(23){--i:22} .tk:nth-child(24){--i:23}
.tk:nth-child(25){--i:24} .tk:nth-child(26){--i:25} .tk:nth-child(27){--i:26} .tk:nth-child(28){--i:27} .tk:nth-child(29){--i:28} .tk:nth-child(30){--i:29}
.tk:nth-child(31){--i:30} .tk:nth-child(32){--i:31} .tk:nth-child(33){--i:32} .tk:nth-child(34){--i:33} .tk:nth-child(35){--i:34} .tk:nth-child(36){--i:35}
.tk:nth-child(37){--i:36} .tk:nth-child(38){--i:37} .tk:nth-child(39){--i:38} .tk:nth-child(40){--i:39} .tk:nth-child(41){--i:40} .tk:nth-child(42){--i:41}
.tk:nth-child(43){--i:42} .tk:nth-child(44){--i:43} .tk:nth-child(45){--i:44} .tk:nth-child(46){--i:45} .tk:nth-child(47){--i:46} .tk:nth-child(48){--i:47}
.tk:nth-child(49){--i:48} .tk:nth-child(50){--i:49} .tk:nth-child(51){--i:50} .tk:nth-child(52){--i:51} .tk:nth-child(53){--i:52} .tk:nth-child(54){--i:53}
.tk:nth-child(55){--i:54} .tk:nth-child(56){--i:55} .tk:nth-child(57){--i:56} .tk:nth-child(58){--i:57} .tk:nth-child(59){--i:58} .tk:nth-child(60){--i:59}
.tk:nth-child(61){--i:60} .tk:nth-child(62){--i:61} .tk:nth-child(63){--i:62} .tk:nth-child(64){--i:63} .tk:nth-child(65){--i:64} .tk:nth-child(66){--i:65}
.tk:nth-child(67){--i:66} .tk:nth-child(68){--i:67} .tk:nth-child(69){--i:68} .tk:nth-child(70){--i:69} .tk:nth-child(71){--i:70} .tk:nth-child(72){--i:71}
/* Each point's angle (--a) and when its ring's line reaches it (--d) */
.blip:nth-child(1){--a:24;--d:0.14s}
.blip:nth-child(2){--a:78;--d:0.22s}
.blip:nth-child(3){--a:284;--d:0.74s}
.blip:nth-child(4){--a:336;--d:1.13s}
.blip:nth-child(5){--a:10;--d:0.21s}
.blip:nth-child(6){--a:56;--d:0.29s}
.blip:nth-child(7){--a:106;--d:0.37s}
.blip:nth-child(8){--a:256;--d:0.72s}
.blip:nth-child(9){--a:302;--d:0.93s}
.blip:nth-child(10){--a:34;--d:0.35s}
.blip:nth-child(11){--a:124;--d:0.50s}
.blip:nth-child(12){--a:234;--d:0.75s}
.blip:nth-child(13){--a:320;--d:1.16s}
.blip:nth-child(14){--a:62;--d:0.49s}
.blip:nth-child(15){--a:140;--d:0.63s}
.blip:nth-child(16){--a:220;--d:0.81s}
.blip:nth-child(17){--a:292;--d:1.08s}
.blip:nth-child(18){--a:76;--d:0.62s}
.blip:nth-child(19){--a:284;--d:1.14s}

/* ---------- The portfolio, drawn by coming-soon.js ---------- */
/* Landlords, properties and tenancies on the rings, with changes arriving in real time.
   Without JavaScript the CSS points on the rings stay instead. */
.net {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.page.is-live .blips { display: none; }

/* Changes arriving, in the words and style of the website's live feed */
.chips { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.chip {
  position: absolute; left: 0; top: 0;
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 9px 12px 10px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid rgba(184, 115, 51, 0.5);
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.1), 0 10px 20px -12px rgba(26, 46, 30, 0.3);
  font-family: var(--font-body);
  color: var(--forest);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.chip.is-measure { left: -9999px; }
.chip-t { font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.chip-r { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; line-height: 1.3; }
.chip-r svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip-r.is-pending { color: var(--muted); font-weight: 500; }
.chip-r.ok { color: #256B43; animation: res-in 0.36s ease-out; }
.chip-r.warn { color: #8A6212; animation: res-in 0.36s ease-out; }
@keyframes res-in { from { opacity: 0; transform: translateY(3px); } }
.spin {
  width: 11px; height: 11px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  border-top-color: var(--copper);
  animation: spin 0.7s linear infinite;
}

/* ---------- The shield ---------- */
.mark-wrap {
  z-index: 1;
  width: calc(100px * var(--s));
  height: calc(100px * var(--s));
  margin: calc(-50px * var(--s)) 0 0 calc(-50px * var(--s));
  perspective: 520px;
}
.mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotateX(calc(var(--py) * -11deg)) rotateY(calc(var(--px) * 13deg));
  filter: drop-shadow(0 calc(8px * var(--s)) calc(12px * var(--s)) rgba(15, 31, 18, 0.15));
  animation: mark-in 1.6s var(--ease-out) 0.25s both;
}
@keyframes mark-in { from { scale: 0.86; } }
/* The shield fills from the bottom up, inside its copper outline */
.m-fill {
  fill: var(--dark);
  animation: fill-rise 0.8s var(--ease-in-out) 0.9s backwards;   /* no clip at all once it's full */
}
@keyframes fill-rise {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.m-line {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-dasharray: 104.12 106.12;
  opacity: 0;
  animation: outline 1.55s linear 0.3s both;
}
@keyframes outline {
  0% { stroke-dashoffset: 105.12; opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  60% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: ease-out; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.m-tick {
  fill: none;
  stroke: var(--copper);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 21.28 23.28;
  animation: draw-tick 0.62s var(--ease-out) 1.35s both;
}
@keyframes draw-tick { from { stroke-dashoffset: 22.28; } to { stroke-dashoffset: 0; } }
.m-glint {
  transform: translateX(0) skewX(-18deg);
  animation: glint var(--beat) var(--ease-in-out) var(--start) infinite;
}
@keyframes glint {
  0% { transform: translateX(0) skewX(-18deg); }
  11%, 100% { transform: translateX(64px) skewX(-18deg); }
}

/* ---------- Words ---------- */
.words {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* A little paper behind the words, so the rings and the sweep pass quietly beneath them */
.words::before {
  content: "";
  position: absolute; z-index: -1; left: 50%; top: 46%;
  width: 150%; height: 175%;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(245, 242, 236, 0.9) 35%, rgba(245, 242, 236, 0.55) 70%, rgba(245, 242, 236, 0));
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: min(calc(112px * var(--s)), 21vw);
  line-height: 1;
  letter-spacing: -0.03em;      /* the wordmark as in the logo lockup */
  color: var(--forest);
  will-change: transform, opacity;
  animation: word-in 1.7s var(--ease-out) 0.95s both;
}
/* Only opacity and position move, so nothing is re-laid-out while it plays */
@keyframes word-in {
  from { opacity: 0; transform: translateY(14px) scale(1.03); }
}

.slogan {
  margin-top: calc(20px * var(--s));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(19px, calc(30px * var(--s)));
  line-height: 1.3;
  letter-spacing: -0.022em;
  color: var(--forest);
}
.slogan .w { display: inline-block; }
.w1 { animation: rise 1.05s var(--ease-out) 1.5s both; }
.w2 { animation: rise 1.05s var(--ease-out) 1.6s both; }

/* The signature move from the website: one copper highlight, drawn in */
.hl {
  color: var(--copper-deep);
  background-image: linear-gradient(var(--copper-wash), var(--copper-wash));
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 100% 86%;
  border-radius: 4px;
  padding: 0 0.14em;
  margin: 0 -0.06em;
  animation: rise 1.05s var(--ease-out) 1.72s both, hl-draw 1.3s var(--ease-out) 2.35s both;
}
@keyframes hl-draw { from { background-size: 0% 86%; } }
@keyframes rise { from { opacity: 0; transform: translateY(0.5em); } }

.soon {
  margin-top: calc(40px * var(--s));
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.92em 1.42em 0.92em 1.34em;
  border-radius: 999px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), 0 4px 16px rgba(26, 46, 30, 0.05);
  font-family: var(--font-body);
  font-size: max(12px, calc(11.5px * var(--s)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
  animation: lift 1s var(--ease-out) 2.55s both;
}
@keyframes lift { from { opacity: 0; transform: translateY(10px); } }
.live-dot {
  position: relative;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--copper);
  flex: none;
}
.live-dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--copper);
  opacity: 0;
  animation: live-ring 2.8s var(--ease-out) 3s infinite;
}
@keyframes live-ring {
  0% { transform: scale(0.5); opacity: 0.8; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

@keyframes fade-in { from { opacity: 0; } }

/* ---------- Sizes ---------- */
@media (max-width: 1100px) { .page { --s: 0.9; } }
@media (max-width: 700px) { .page { --s: 0.74; } }
@media (max-width: 360px) { .page { --s: 0.66; } }
@media (max-height: 820px) and (min-width: 701px) { .page { --s: 0.86; } }
@media (max-height: 680px) { .page { --s: 0.72; } }
@media (max-height: 540px) {
  .page { --s: 0.52; }
  .stage { padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1680px) and (min-height: 1000px) { .page { --s: 1.2; } }
@media (min-width: 2200px) and (min-height: 1300px) { .page { --s: 1.5; } }

/* ---------- Reduced motion: the finished picture, still ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sweep { opacity: 1; transform: rotate(58deg); }
  .pulse { display: none; }
  .glow, .instrument { translate: none; }
  .mark { transform: none; }
}