/* Making Magic Studio
   Built on the 1280px Figma frame: every measurement is written in design
   pixels and multiplied by --u, so the composition scales down intact.
   Fonts are the ones used in Figma: Playfair Display, Playfair,
   BioRhyme Expanded and Courier New. */

:root {
  color-scheme: light;
  --u: min(1px, calc(100vw / 1280));

  --ink: #0d0d0d;
  --paper: #f6f6f6; /* same as the bleed background exported from Figma */

  --f-nav: "Playfair Display", Georgia, serif;
  --f-italic: "Playfair", "Playfair Display", Georgia, serif;
  --f-caps: "BioRhyme Expanded", Georgia, serif;
  --f-mono: "Courier New", "Courier Prime", Courier, monospace;

  /* vertical rhythm: four steps, used for every gap below the hero.
     Design px on desktop, with a floor so phones keep breathing room. */
  --sp-xs: max(16px, calc(24 * var(--u)));   /* heading -> its text */
  --sp-s:  max(28px, calc(48 * var(--u)));   /* inside a block */
  --sp-m:  max(48px, calc(96 * var(--u)));   /* between related blocks */
  --sp-l:  max(80px, calc(160 * var(--u)));  /* between sections */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
p { margin: 0; }
ul { margin: 0; padding: 0 0 0 1.1em; }
::selection { background: #00ff88; color: var(--ink); }

/* Full-bleed page; the 1280 Figma column is centred inside it */
.sheet {
  position: relative;
  background: var(--paper);
  overflow: hidden;
  padding-bottom: var(--sp-l);
}
.menu, main { max-width: 1280px; margin-left: auto; margin-right: auto; }
main { position: relative; z-index: 2; } /* text sits above the hero's paper edge */

/* ---------- Menu (not sticky) ---------- */
.menu {
  position: relative;
  z-index: 3;
  height: calc(250 * var(--u));
  padding: calc(66 * var(--u)) calc(43 * var(--u)) 0 calc(57 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.menu-link {
  font-family: var(--f-nav);
  font-style: italic;
  font-weight: 500;
  font-size: calc(40 * var(--u));
  letter-spacing: .1em;
  line-height: 1.32;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.menu-link.right { align-items: flex-end; }
.menu-link span { position: relative; }
/* underline draws from the leading edge, like a pen stroke */
.menu-link span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .06em;
  height: max(1px, calc(1.5 * var(--u)));
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.menu-link.right span::after { transform-origin: right; }
.menu-link span + span::after { transition-delay: .06s; }
body[data-view="consulting"] .menu-link[data-go="consulting"] span::after,
body[data-view="workshops"]  .menu-link[data-go="workshops"]  span::after,
body[data-peek="consulting"] .menu-link[data-go="consulting"] span::after,
body[data-peek="workshops"]  .menu-link[data-go="workshops"]  span::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .menu-link:hover span::after { transform: scaleX(1); }
}

/* ---------- Star ---------- */
.star {
  position: absolute;
  z-index: 4;
  top: calc(50 * var(--u));
  left: calc(514 * var(--u));
  width: calc(270 * var(--u));
  aspect-ratio: 293 / 296;
  transform: translateX(var(--star-x, 0)) rotate(var(--star-r, 0deg));
  transition: transform .9s var(--ease-spring);
}
.star svg { width: 100%; height: 100%; overflow: visible; display: block; }
.star .fill { opacity: 0; transition: opacity .5s ease; }
.star .fill-ink { fill: var(--ink); }
body[data-star="home"]       .star .fill-ink,
body[data-star="consulting"] .star .fill-consulting,
body[data-star="workshops"]  .star .fill-workshops { opacity: 1; }
/* in Figma the star leans toward the open section */
body[data-star="consulting"] { --star-x: calc(-33 * var(--u)); --star-r: -6deg; }
body[data-star="workshops"]  { --star-x: calc(40 * var(--u));  --star-r: 6deg; }
@media (hover: hover) and (pointer: fine) {
  .star:hover .fill-home { opacity: 1; }
  .star:active { transform: translateX(var(--star-x, 0)) rotate(var(--star-r, 0deg)) scale(.96); transition-duration: .16s; }
}

/* ---------- Hero: a paper booklet on bleed ----------
   1920-wide canvas (1280 frame + 320 bleed each side), split at the paper's
   own crease (--crease, in design px) so the 3D fold hinges on the real fold. */
.hero {
  --crease: 921;
  --h: 1170;
  position: relative;
  z-index: 1;
  /* at least 1920 design px, and never narrower than the screen: always bleeds */
  --hw: max(calc(1920 * var(--u)), 100vw);
  width: var(--hw);
  margin-left: calc(50% - var(--hw) / 2);
  aspect-ratio: 1920 / var(--h);
  display: grid;
  grid-template-columns: calc(var(--hw) * var(--crease) / 1920) 1fr;
  perspective: calc(2600 * var(--u));
  perspective-origin: calc(var(--crease) / 1920 * 100%) 40%;
}

.leaf {
  position: relative;
  display: block;
  height: 100%;
  transform-style: preserve-3d;
  outline: none;
}
.leaf .paper, .leaf .shade {
  position: absolute; inset: 0;
  transition: transform .7s var(--ease-out), opacity .7s var(--ease-out);
  backface-visibility: hidden;
}
.leaf .paper { overflow: hidden; background: var(--paper); isolation: isolate; }
.leaf.left  .paper, .leaf.left  .shade { transform-origin: 100% 50%; }
.leaf.right .paper, .leaf.right .shade { transform-origin: 0% 50%; }

/* the full composition lives inside each leaf, offset so each shows its side */
.art { position: absolute; top: 0; left: 0; width: var(--hw); height: 100%; }
.leaf.right .art { left: calc(var(--hw) * var(--crease) / -1920); }
.art .base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* colour layers: Figma vectors blended live (Colour / Overlay), drifting on scroll */
.ink {
  position: absolute; display: block; pointer-events: none;
  /* clip each colour shape to the paper: the paper mask, placed in canvas coordinates */
  -webkit-mask: var(--mask) no-repeat;
          mask: var(--mask) no-repeat;
  -webkit-mask-size: var(--hw) calc(var(--hw) * var(--h) / 1920);
          mask-size: var(--hw) calc(var(--hw) * var(--h) / 1920);
  -webkit-mask-position: calc(var(--hw) * var(--x) / -1920) calc(var(--hw) * var(--y) / -1920);
          mask-position: calc(var(--hw) * var(--x) / -1920) calc(var(--hw) * var(--y) / -1920);
}
.ink img { display: block; width: 100%; height: 100%; transform-origin: 0 0; will-change: translate; }

.shade {
  pointer-events: none; opacity: 0;
  /* the fold shadow falls on the paper only, never on the empty page around it */
  -webkit-mask: var(--mask) no-repeat 0 0 / var(--hw) 100%;
          mask: var(--mask) no-repeat 0 0 / var(--hw) 100%;
}
.leaf.right .shade {
  -webkit-mask-position: calc(var(--hw) * var(--crease) / -1920) 0;
          mask-position: calc(var(--hw) * var(--crease) / -1920) 0;
}
.leaf.left  .shade { background: linear-gradient(90deg, rgb(30 26 20 / 0) 45%, rgb(30 26 20 / .18) 100%); }
.leaf.right .shade { background: linear-gradient(270deg, rgb(30 26 20 / 0) 45%, rgb(30 26 20 / .18) 100%); }

@media (hover: hover) and (pointer: fine) {
  .hero[data-fold="left"]  .left  :is(.paper, .shade) { transform: rotateY(14deg); }
  .hero[data-fold="left"]  .right :is(.paper, .shade) { transform: rotateY(-3deg); }
  .hero[data-fold="right"] .right :is(.paper, .shade) { transform: rotateY(-14deg); }
  .hero[data-fold="right"] .left  :is(.paper, .shade) { transform: rotateY(3deg); }
  .hero[data-fold="left"]  .left  .shade,
  .hero[data-fold="right"] .right .shade { opacity: 1; }
}
.leaf:focus-visible .paper { box-shadow: inset 0 0 0 3px var(--ink); }

/* page turn on click: the chosen leaf closes, the new page opens from that side */
.hero.turning .leaf.is-turning :is(.paper, .shade) {
  transition: transform .42s var(--ease-in-out), opacity .42s ease;
}
.hero.turning .leaf.left.is-turning  :is(.paper, .shade) { transform: rotateY(86deg); }
.hero.turning .leaf.right.is-turning :is(.paper, .shade) { transform: rotateY(-86deg); }
.hero.turning .leaf.is-turning .shade { opacity: 1; }
.hero.opening .leaf :is(.paper, .shade) { transition: none; }
.hero.opening.from-left  .leaf.left  :is(.paper, .shade) { transform: rotateY(-70deg); opacity: 0; }
.hero.opening.from-right .leaf.right :is(.paper, .shade) { transform: rotateY(70deg); opacity: 0; }

/* hero titles: live text inside the paper, so they fold with it */
.hero-title {
  position: absolute;
  left: calc(50% - 640 * var(--u));
  width: calc(1280 * var(--u));
  margin: 0;
  text-align: center;
  font-family: var(--f-nav);
  font-style: italic;
  font-weight: 500;
  font-size: calc(64 * var(--u));
  letter-spacing: .3em;
  line-height: 1.2;
  padding-left: .3em; /* balance trailing tracking */
}
.hero-title.t-consulting { top: calc(945 / 1270 * 100%); }
.hero-title.t-workshops  { top: calc(914 / 1090 * 100%); }
.hero-title.t-home {
  top: calc(927 / 1170 * 100%);
  left: calc(50% - 516 * var(--u));
  width: calc(1104 * var(--u));
  text-align: left;
  padding: 0;
  font-family: var(--f-caps);
  font-style: normal;
  font-weight: 700;
  font-size: calc(32 * var(--u));
  letter-spacing: 0;
  line-height: calc(58 * var(--u));
  text-transform: uppercase;
}

/* ---------- Shared type ---------- */
.caps {
  font-family: var(--f-caps);
  font-weight: 700;
  font-size: calc(32 * var(--u));
  line-height: calc(58 * var(--u));
  text-transform: uppercase;
  margin: 0;
}
.mono { font-family: var(--f-mono); font-size: calc(24 * var(--u)); line-height: 1.12; }
.mono.small { font-size: calc(20 * var(--u)); }
.mono p + p, .mono p + ul, .mono ul + p { margin-top: calc(20 * var(--u)); }
.mono li + li { margin-top: calc(20 * var(--u)); }
.mono li::marker { font-size: .8em; }
.spaced {
  font-family: var(--f-nav);
  font-style: italic;
  font-weight: 400;
  font-size: calc(32 * var(--u));
  letter-spacing: .2em;
  line-height: 1.3;
  margin: 0 0 calc(10 * var(--u));
}
.spaced.wide { font-size: calc(36 * var(--u)); letter-spacing: .3em; }
.tagline, .cta, h3 {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 1.25;
  margin: 0;
}
.cta a, .write-me a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta a:hover, .write-me a:hover { background-size: 100% 1px; }
}

.stars {
  display: flex;
  justify-content: center;
  gap: calc(3 * var(--u));
  margin-left: calc(-40 * var(--u));
}
.stars svg { width: calc(51 * var(--u)); fill: #231f20; }

/* ---------- Home ---------- */
.view-home { padding: 0 calc(124 * var(--u)); }
.home-intro {
  margin-top: calc(-60 * var(--u));
  max-width: calc(1104 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: calc(58 * var(--u));
}
.home-intro p + p { margin-top: calc(58 * var(--u)); }
.signature {
  display: block;
  width: calc(391 * var(--u));
  margin: var(--sp-m) 0 0 calc(269 * var(--u));
  fill: var(--ink);
}
.about { margin-top: var(--sp-m); max-width: calc(1036 * var(--u)); margin-left: calc(-3 * var(--u)); }
.about .caps { margin-bottom: var(--sp-xs); }
.write-me { margin-top: var(--sp-m); }

/* ---------- Design consulting ---------- */
.offer { margin: 0 0 0 calc(656 * var(--u)); width: calc(600 * var(--u)); }
.offer .tagline { margin-bottom: var(--sp-xs); }
.offer ul { font-size: calc(20 * var(--u)); padding-left: calc(56 * var(--u)); }
.offer .note { font-size: calc(20 * var(--u)); margin: var(--sp-s) 0 0 calc(32 * var(--u)); }
.view-consulting .cta { margin: var(--sp-l) 0 0 calc(136 * var(--u)); max-width: calc(1100 * var(--u)); }
.view-consulting .stars { margin-top: var(--sp-l); }
.highlights { margin: var(--sp-m) 0 0 calc(109 * var(--u)); }

.project { position: relative; display: grid; align-items: start; }
.p-apps { grid-template-columns: calc(120 * var(--u)) calc(550 * var(--u)) 1fr; margin-top: var(--sp-m); }
.p-apps .p-text { grid-column: 2; padding: calc(45 * var(--u)) calc(80 * var(--u)) 0 0; }
.p-apps .p-media { grid-column: 3; }
.p-book { grid-template-columns: calc(704 * var(--u)) 1fr; margin-top: var(--sp-l); }
.p-book .p-media { margin-left: calc(11 * var(--u)); }
.p-book .p-text { padding: calc(110 * var(--u)) calc(58 * var(--u)) 0 calc(72 * var(--u)); }
.p-anim { grid-template-columns: calc(660 * var(--u)) 1fr; margin-top: var(--sp-l); }
.p-anim .p-text { padding: calc(110 * var(--u)) calc(80 * var(--u)) 0 calc(150 * var(--u)); }
/* a clear gutter between every project text and its image */
.p-text .mono { margin-top: calc(6 * var(--u)); }
.p-media { margin: 0; }
.p-media figcaption { margin-top: calc(22 * var(--u)); padding-left: calc(16 * var(--u)); font-size: calc(24 * var(--u)); }
.p-book figcaption { padding-left: calc(3 * var(--u)); }
.p-apps .carousel { aspect-ratio: 610 / 394; }
.p-book .carousel { aspect-ratio: 693 / 462; }
.p-anim .carousel { aspect-ratio: 620 / 629; }

/* carousel */
.carousel { position: relative; overflow: hidden; background: #ececec; touch-action: pan-y; }
.track { display: flex; height: 100%; transition: transform .6s var(--ease-in-out); will-change: transform; }
.track > * { flex: 0 0 100%; width: 100%; height: 100%; }
.track img { height: 100%; object-fit: cover; }
.track img.contain { object-fit: contain; background: #eef0f4; }
.arrow {
  position: absolute; top: 50%;
  width: 44px; height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(250 250 248 / .88);
  box-shadow: 0 6px 20px -8px rgb(40 36 30 / .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .2s ease, transform .2s var(--ease-out);
}
.arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arrow.prev { left: 14px; }
.arrow.next { right: 14px; }
.carousel:hover .arrow, .carousel:focus-within .arrow { opacity: 1; transform: scale(1); }
.carousel .arrow:active { transform: scale(.92); transition-duration: .1s; }
@media (hover: none) { .arrow { opacity: 1; transform: scale(1); width: 38px; height: 38px; margin-top: -19px; } }
.carousel.single .arrow { display: none; }

/* looped animation: a slow camera pan down the tall artwork */
.loop { overflow: hidden; container-type: size; }
.loop img { width: 100%; height: auto; animation: pan 18s ease-in-out infinite alternate; will-change: transform; }
@keyframes pan {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100% + 100cqh)); }
}


/* ---------- Team workshops ---------- */
.ws-intro { padding: calc(18 * var(--u)) calc(60 * var(--u)) 0 calc(45 * var(--u)); }
.ws-intro p { font-size: calc(32 * var(--u)); line-height: calc(58 * var(--u)); margin-top: calc(58 * var(--u)); max-width: calc(1175 * var(--u)); }
.ws-photo { width: 100%; margin-top: var(--sp-m); }
.ws-grid {
  display: grid;
  grid-template-columns: calc(589 * var(--u)) calc(492 * var(--u));
  padding-left: calc(135 * var(--u));
  margin-top: var(--sp-m);
}
.ws-grid h3 { margin-bottom: var(--sp-xs); }
.ws-for ul { width: calc(480 * var(--u)); }
.ws-effects { padding-top: var(--sp-m); } /* keeps the Figma stagger, on the grid */
.view-workshops .stars { margin-top: var(--sp-l); }
.ws-info { margin-top: var(--sp-m); padding-left: calc(148 * var(--u)); grid-template-columns: calc(547 * var(--u)) calc(551 * var(--u)); }
.ws-info > div:first-child { width: calc(492 * var(--u)); }
.price {
  border: 1px solid var(--ink);
  border-radius: calc(40 * var(--u));
  padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(40 * var(--u));
  margin-top: calc(-24 * var(--u));
}
.view-workshops .cta { margin-top: var(--sp-l); text-align: center; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Contact (fixed, bottom right) ---------- */
.contact {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  height: 48px;
  padding-right: 2px;
  border-radius: 999px;
  background: rgb(13 13 13 / .92);
  color: #f6f5f2;
  box-shadow: 0 1px 0 rgb(255 255 255 / .08) inset, 0 14px 40px -12px rgb(40 36 30 / .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.contact-toggle {
  height: 48px;
  padding: 0 22px 5px 20px; /* italic lowercase sits low: lift it to the optical centre */
  font-family: var(--f-nav);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .1em;
  border-radius: 999px;
  transition: transform .16s var(--ease-out), opacity .2s ease;
}
.contact-toggle:active { transform: scale(.96); }
.contact-reveal {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns .5s var(--ease-out);
}
.contact-inner {
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .5s var(--ease-out);
}
.contact.open .contact-reveal { grid-template-columns: 1fr; }
.contact.open .contact-inner { clip-path: inset(0 0 0 0); }
.contact.open .contact-toggle { opacity: .55; }
.contact-email {
  padding-left: 22px;
  font-family: var(--f-mono);
  font-size: 15px;
  text-decoration: none;
}
.contact-email:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-copy {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / .12);
  transition: background .2s ease, transform .16s var(--ease-out);
}
.contact-copy:hover { background: rgb(255 255 255 / .2); }
.contact-copy:active { transform: scale(.95); }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  :root { --g: 20px; }
  .menu { height: 118px; padding: 26px var(--g) 0; }
  .menu-link { font-size: 17px; letter-spacing: .08em; }
  .star { top: 22px; left: calc(50% - 46px); width: 92px; }
  body[data-star="consulting"] { --star-x: -10px; }
  body[data-star="workshops"]  { --star-x: 12px; }

  .hero-title { font-size: clamp(15px, 5vw, 22px); }
  .hero-title.t-home { display: none; }

  .mono, .offer ul, .offer .note, .p-media figcaption, .mono.small { font-size: 15px; line-height: 1.4; }
  .mono li + li, .mono p + p, .mono p + ul, .mono ul + p { margin-top: 12px; }
  .caps { font-size: 17px; line-height: 1.7; }
  .tagline, .cta, h3 { font-size: 21px; }
  .spaced, .spaced.wide { font-size: 19px; letter-spacing: .14em; }

  .view-home { padding: 0 var(--g); }
  .home-intro { margin-top: 28px; font-size: 16px; line-height: 1.75; }
  .home-intro p + p { margin-top: 18px; }
  .signature { width: 190px; margin: var(--sp-m) auto 0; }
  .about { margin: var(--sp-m) 0 0; }

  .offer { margin: 36px var(--g) 0; width: auto; }
  .offer ul { padding-left: 20px; }
  .offer .note { margin: var(--sp-s) 0 0; }
  .view-consulting .cta { margin: var(--sp-l) var(--g) 0; }
  .view-consulting .stars, .view-workshops .stars { margin: var(--sp-l) 0 0; }
  .stars svg { width: 30px; }
  .highlights { margin: var(--sp-m) var(--g) 0; }

  .project { grid-template-columns: 1fr !important; margin-top: var(--sp-l); }
  .p-apps { margin-top: var(--sp-m); }
  .project .p-text { grid-column: 1 !important; order: 2; padding: 20px var(--g) 0 !important; margin: 0 !important; width: auto !important; }
  .project .p-text .mono { width: auto; }
  .project .p-media { grid-column: 1 !important; order: 1; margin: 0; }
  .p-media figcaption { padding: 0 var(--g); margin-top: 10px; }

  .ws-intro { padding: 28px var(--g) 0; }
  .ws-intro p { font-size: 16px; line-height: 1.75; margin-top: 18px; }
  .ws-photo { margin-top: var(--sp-m); }
  .ws-grid, .ws-info { grid-template-columns: 1fr; padding: 0 var(--g); margin-top: var(--sp-m); row-gap: var(--sp-m); }
  .ws-for ul, .ws-info > div:first-child { width: auto; }
  .ws-effects { padding-top: 0; }
  .price { border-radius: 24px; padding: 20px; margin-top: 0; }
  .view-workshops .cta { margin: var(--sp-l) var(--g) 0; }

  .contact { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); height: 44px; }
  .contact-toggle { height: 44px; font-size: 16px; padding: 0 18px 5px; }
  .contact-email { font-size: 13px; padding-left: 18px; }
  .contact-copy { display: none; }
}
/* the hero carries this heading visually on desktop; keep it for screen readers */
@media (min-width: 721px) {
  .m-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 720px) { .m-title { margin-bottom: 22px; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity .4s ease; }
  .leaf .paper, .leaf .shade, .star, .track { transition-duration: .01s !important; }
  .hero.turning .leaf.is-turning :is(.paper, .shade) { transform: none; opacity: 0; transition: opacity .2s ease !important; }
  .loop img { animation: none; }
}