/* base.css: tokens, type, layout, fixed header, footer, the hero sky (shared by the home hero and case study heroes), tags, utilities, page transitions. Loaded on every page. */

:root {
  /* colour (placeholder palette) */
  --bg: #f7f7f7;        /* page: neutral near-white (no warm tint), so white cards still lift */
  --surface: #ffffff;   /* cards */
  --chip: #f2f2f2;      /* tag pills on a card — neutral grey */
  --stack: #000000;      /* the black card behind a project card */
  --on-stack: #ffffff;
  --on-stack-muted: rgb(255 255 255 / .6);

  /* hero sky — sampled from Jacob's reference (2026-10-03); deep at the top, lifting toward the fade */
  --sky-top: #034da5;
  --sky-mid: #1e74d4;    /* behind the subtext: still dark enough for white body text */
  --sky-low: #89c0f5;
  --sky-pale: #d6e9fc;   /* last tint before the page colour */
  --sky-glow: ellipse 150% 75% at 50% 100%;  /* curved horizon glow rising from the bottom centre */
  --grain: .4;           /* noise strength (0–1) */
  --on-sky: #ffffff;
  --on-sky-muted: rgb(255 255 255 / .86);
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --accent: #1a1a1a;
  --nav: #000000;        /* nav links */

  /* type */
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);   /* one sans family site-wide (serif Newsreader dropped 2026-10-04) */
  /* Type scale: Apple HIG text styles (iOS, Large/default), with each leading rounded to the 4pt grid.
     HIG size/leading → ours:  Large Title 34/41 → 34/40 · Title 1 28/34 → 28/36 · Title 2 22/28 → 22/28
     Title 3 20/25 → 20/24 · Body 17/22 → 17/24 · Callout 16/21 → 16/20 · Subhead 15/20 → 15/20
     Footnote 13/18 → 13/20 · Caption 1 12/16 → 12/16
     The web hero goes past Large Title on bigger screens (Display), still on the grid. */
  --text-display-l: 48px; --leading-display-l: 56px;
  --text-display: 40px;   --leading-display: 48px;
  --text-large-title: 34px; --leading-large-title: 40px;
  --text-title1: 28px;  --leading-title1: 36px;
  --text-title2: 22px;  --leading-title2: 28px;
  --text-title3: 20px;  --leading-title3: 24px;
  --text-body: 17px;    --leading-body: 24px;
  --text-callout: 16px; --leading-callout: 20px;
  --text-subhead: 15px; --leading-subhead: 20px;
  --text-footnote: 13px; --leading-footnote: 20px;
  --text-caption: 12px; --leading-caption: 16px;
  /* aliases used by components */
  --text-sm: var(--text-footnote); --leading-sm: var(--leading-footnote);
  --text-h2: var(--text-title1);   --leading-h2: var(--leading-title1);
  --text-h3: var(--text-title2);   --leading-h3: var(--leading-title2);

  /* spacing — 4pt grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-60: 240px;
  --space-64: 256px;
  --space-72: 288px;
  --space-80: 320px;

  /* layout — stepped, not fluid, so they stay on the grid */
  --gutter: var(--space-4);          /* page side padding */
  --section-gap: var(--space-16);    /* between major sections */
  --container: 1120px;  /* site width: header, hero card, work grid and footer all share these edges (as on maureen.care) */
  --measure: 68ch;      /* reading measure: a paragraph never runs wider than this, even in a wide layout */
  /* card shape — generous and stepped per breakpoint, like maureen.care's cards */
  --radius-card: 32px;
  --pad-card: var(--space-6);
}
@media (min-width: 600px) { :root { --gutter: var(--space-6); --section-gap: var(--space-20); --radius-card: 40px; --pad-card: var(--space-8); } }
@media (min-width: 900px) { :root { --gutter: var(--space-8); --section-gap: var(--space-24); --radius-card: 48px; --pad-card: var(--space-10); } }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --surface: #1c1c1c; --chip: #2a2a2a; --text: #eee; --muted: #999; --line: #2a2a2a; --accent: #eee; --nav: #ffffff;
          --sky-top: #021f45; --sky-mid: #0a3a78; --sky-low: #12305a; --sky-pale: #141c28; }
  /* dark mode: only the resting fill changes, to the Instagram button's grey (the near-black --surface barely read); hover still inverts as normal */
  .site-header .icon-link, .contact-pill .contact-pill-icon { background: var(--line); }   /* the two mail circles; two-class selectors beat the later base rules and lose to their :hover */
}

/* base */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  background-color: var(--page-tint, var(--bg)); transition: background-color 700ms ease;   /* sky.js sets --page-tint to the current slide sky's bottom colour, so the strip iOS Safari leaves behind its bottom bar matches the gradient */
  font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body);
}
h1, h2, h3, p, dl, dd { margin: 0; }   /* no browser-default margins: spacing comes from tokens only */
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: 400; }  /* softer than the hero's 500 */
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }

/* layout */
.site-header, .site-footer, main { max-width: var(--container); margin: 0 auto; padding: var(--space-6) var(--gutter); }
.site-header {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);  /* centred: top-aligning read too high (tried 2026-10-04) */
  padding-block: var(--space-4);   /* 16 + 40px signature + 16 = 72px, the same header height as before */
}
/* Fixed header (pattern from maureen.care): stays put while the page scrolls under a soft blur band.
   nav-tone.js sets html.tone-light / html.tone-dark from whatever is under the signature, and the
   signature and the band's tint follow, so the signature always reads. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; }
body { padding-top: var(--header-h); }   /* the header no longer takes up room in the flow */
.site-header::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; left: calc(50% - 50vw); width: 100vw; height: calc(100% + var(--space-3));   /* full bleed, a little past the header */
  background-color: rgb(247 247 247 / .3);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .9) 25%, rgb(0 0 0 / .6) 55%, rgb(0 0 0 / .25) 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .9) 25%, rgb(0 0 0 / .6) 55%, rgb(0 0 0 / .25) 80%, transparent 100%);
  transition: background-color .35s ease;
}
html.tone-dark .site-header::before { background-color: rgb(0 0 0 / .14); }
/* Jacob's signature, top left. One vector file (the same SVG as the footer) used as a MASK and filled with --nav, so it recolours from
   a token (black on the page, white in dark mode) with no edge residue. Master: portfolio/_source/signature-*.png */
.signature {
  --sig-h: var(--space-10);   /* 40px tall */
  display: block; flex: none;
  height: var(--sig-h); width: calc(var(--sig-h) * 273.88 / 116.18);   /* the SVG's viewBox */
  translate: 0 6px;   /* optical nudge down (an artwork offset, so off-grid by design): the long J and g tails make it look higher */
  background-color: var(--nav);   /* before the script runs: black on the page, white in dark mode */
  transition: background-color .35s ease;
  -webkit-mask: url("/assets/img/signature.svg") center / contain no-repeat;
          mask: url("/assets/img/signature.svg") center / contain no-repeat;
}
html.tone-light .signature { background-color: #000; }   /* over light backgrounds */
html.tone-dark .signature { background-color: #fff; }    /* over the sky, the black panel, dark mode */
.site-header nav { display: flex; align-items: center; gap: var(--space-2); }
.site-header nav a { text-decoration: none; color: var(--nav); }
/* icons are inline SVG filled with currentColor, so their colour comes from the link's token — no separate white/black files */
.icon { display: block; width: var(--space-6); height: var(--space-6); }
.icon-link {
  display: grid; place-items: center; width: var(--space-10); height: var(--space-10);  /* 40px circle = tap target */
  border-radius: 999px; background: var(--surface); color: var(--nav);   /* white circle, black icon — the same wherever it appears */
}
.icon-link .icon { width: var(--space-5); height: var(--space-5); }   /* 20px icon inside the 40px circle */
.icon-link { transition: background-color 200ms, color 200ms; }
.icon-link:hover, .icon-link:focus-visible { background: var(--nav); color: var(--surface); }   /* inverts on hover: clearly a button */
main > section + section { margin-top: var(--section-gap); }
/* mail button below the footer card, at the very bottom of the page, right-aligned on the content edge */
/* a quieter circle for secondary links (Instagram): neutral grey fill, muted glyph, so the Contact pill keeps the weight */
.icon-link-quiet { background: var(--line); color: var(--muted); }
.icon-link-quiet:hover, .icon-link-quiet:focus-visible { background: color-mix(in oklab, var(--line), var(--text) 8%); color: var(--text); }   /* circle dims a touch, glyph darkens */
/* bottom row: © on the left content edge; Instagram circle and Contact pill together on the right */
.copyright { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.footer-actions { display: flex; align-items: center; gap: var(--space-3); }
.footer-actions .icon-link { width: var(--space-12); height: var(--space-12); }   /* 48px: the same height as the Contact pill beside it */
.footer-contact { display: flex; justify-content: space-between; align-items: center; max-width: var(--container); margin: 0 auto; padding: var(--space-6) var(--gutter); }

/* contact pill: a longer black pill with the word "Contact", holding the mail icon in a circle styled exactly like the nav
   mail button (white circle, black glyph), so the two mail buttons always match. Everything inverts on hover. */
.contact-pill {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);   /* a 4px gap rings the 40px circle at the pill's right end */
  border-radius: 999px; background: var(--nav); color: var(--surface);
  font-weight: 600; text-decoration: none;
  transition: background-color 200ms, color 200ms;
}
.contact-pill-icon {
  display: grid; place-items: center; width: var(--space-10); height: var(--space-10);
  border-radius: 999px; background: var(--surface); color: var(--nav);
  transition: background-color 200ms, color 200ms;
}
.contact-pill-icon .icon { width: var(--space-5); height: var(--space-5); }
.contact-pill:hover, .contact-pill:focus-visible { background: var(--surface); color: var(--nav); }
.contact-pill:hover .contact-pill-icon, .contact-pill:focus-visible .contact-pill-icon { background: var(--nav); color: var(--surface); }

/* footer — the hero card in reverse: a shorter rounded card whose sky rises out of the page (eased fade at the
   top, rounded bottom corners, same insets as the hero). The signature sits on it in white; the mail button sits below it on the page. */
.site-footer {
  --foot-fade: var(--sky-fade);   /* the hero's fade length (up to 384px), so both ends of the page dissolve alike */
  position: relative; isolation: isolate;
  max-width: none; margin: var(--section-gap) var(--hero-inset) 0;
  display: flex; flex-direction: column; align-items: flex-end;
  /* % here is the page width (the footer's containing block), so subtract the card's own inset to land on the content edges */
  padding: var(--foot-fade) max(var(--hero-pad), calc((100% - var(--container)) / 2 + var(--gutter) - var(--hero-inset))) var(--space-12);
  color: var(--on-sky);
}
.site-footer::before, .site-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0 0 var(--hero-radius) var(--hero-radius); pointer-events: none; }
.site-footer::before {
  /* the lighter end of the sky palette, eased in from the page colour at the top: the hero's eleven-stop
     smoothstep fade, mirrored, over the same length, so no start or end line shows */
  background: linear-gradient(to top, var(--sky-mid) 0%,
    color-mix(in oklab, var(--bg) 0%, var(--sky-mid)) calc(100% - var(--foot-fade) * 1.00),
    color-mix(in oklab, var(--bg) 3%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.90),
    color-mix(in oklab, var(--bg) 10%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.80),
    color-mix(in oklab, var(--bg) 22%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.70),
    color-mix(in oklab, var(--bg) 35%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.60),
    color-mix(in oklab, var(--bg) 50%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.50),
    color-mix(in oklab, var(--bg) 65%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.40),
    color-mix(in oklab, var(--bg) 78%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.30),
    color-mix(in oklab, var(--bg) 90%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.20),
    color-mix(in oklab, var(--bg) 97%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.10),
    var(--bg) 100%);
  background: linear-gradient(to top in oklab, var(--sky-mid) 0%,
    color-mix(in oklab, var(--bg) 0%, var(--sky-mid)) calc(100% - var(--foot-fade) * 1.00),
    color-mix(in oklab, var(--bg) 3%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.90),
    color-mix(in oklab, var(--bg) 10%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.80),
    color-mix(in oklab, var(--bg) 22%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.70),
    color-mix(in oklab, var(--bg) 35%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.60),
    color-mix(in oklab, var(--bg) 50%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.50),
    color-mix(in oklab, var(--bg) 65%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.40),
    color-mix(in oklab, var(--bg) 78%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.30),
    color-mix(in oklab, var(--bg) 90%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.20),
    color-mix(in oklab, var(--bg) 97%, var(--sky-mid)) calc(100% - var(--foot-fade) * 0.10),
    var(--bg) 100%);
}
.site-footer::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain); mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--foot-fade)), transparent 100%);
          mask-image: linear-gradient(to top, #000 calc(100% - var(--foot-fade)), transparent 100%);
}
/* the pilot emoji, centred and standing on the footer card's bottom edge (decorative) */
.footer-pilot {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;   /* no vertical nudge: at line-height 1 the feet already rest on the edge */
  font-size: var(--space-12); line-height: 1;   /* 48px */
}
/* the signature as a sign-off: vector, spanning the full content width, recoloured by token (mask + --on-sky) */
.footer-signature {
  display: block; width: 100%; aspect-ratio: 273.88 / 116.18;   /* the SVG's viewBox */
  margin-top: var(--space-12);
  background-color: var(--on-sky);   /* white on the footer sky */
  -webkit-mask: url("/assets/img/signature.svg") center / contain no-repeat;
          mask: url("/assets/img/signature.svg") center / contain no-repeat;
}
.site-footer a { text-decoration: none; text-underline-offset: .2em; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }   /* underline only on hover */

/* hero — a rounded card holding a CSS sky (gradient + SVG grain, no image). Text on it is white.
   Two layers: .hero-sky is clipped to the card's rounded shape; .flight is NOT, so the plane takes off
   inside the card and escapes past its right edge over the page. The nav sits above the card on --bg.
   Only the TOP corners are rounded; the bottom dissolves into the page with the eased fade.
   Phones: no side margins. 600px+: inset by the gutter. */
:root {
  --hero-inset: 0px;
  /* dramatic and fluid: grows with the screen, from 40px on phones to 96px on wide screens */
  --hero-radius: clamp(40px, 6.5vw, 96px);
  --hero-radius: clamp(40px, round(6.5vw, 4px), 96px);   /* snapped to 4px where round() is supported */
  --sky-fade: min(384px, 40svh);  /* bottom stretch where the sky dissolves into --bg (long = soft) */
  --sky-fade: min(384px, round(down, 40svh, 4px));
  --header-h: calc(var(--space-4) * 2 + var(--space-10));   /* header: 16px padding top and bottom + the 40px signature */
  --hero-pad: var(--gutter);      /* text inset inside the card */
}
@media (min-width: 600px) { :root { --hero-inset: var(--gutter); } }
@media (min-width: 900px) { :root { --hero-pad: var(--space-16); } }

html, body { overflow-x: clip; }   /* the escaping plane must never cause sideways scrolling */
#swup { overflow-x: clip; }   /* iOS Safari ignores clip on html/body: the plane flying off the right widened the page, so it slid sideways as you scrolled. A wrapper's clip holds */
.hero {
  position: relative; isolation: isolate; color: var(--on-sky);
  display: flex; flex-direction: column;
  margin: 0 var(--hero-inset);   /* the card stays wide: page gutter on each side, full width on phones */
  min-height: calc(100vh - var(--header-h) - var(--hero-inset));
  min-height: calc(100svh - var(--header-h) - var(--hero-inset));   /* fills the screen below the nav */
  padding-top: var(--space-16);
  padding-bottom: var(--sky-fade);   /* keeps the text above the fade */
}
.hero .intro {
  width: 100%; margin-block: auto;   /* centred vertically in the card */
  /* text lines up with the content edges (signature, nav, Work) on wide screens; never closer than --hero-pad to the card edge */
  padding-inline: max(var(--hero-pad), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.hero-sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  border-radius: var(--hero-radius) var(--hero-radius) 0 0;
}
.hero-sky::before, .hero-sky::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero-sky::before {
  --glow-strength: 30%;  /* how much the curved glow shows over the base blue */
  --glow-stops:
    color-mix(in oklab, var(--sky-pale) var(--glow-strength), transparent) 0%,
    color-mix(in oklab, var(--sky-low) var(--glow-strength), transparent) 36%,
    transparent 72%;
  /* eased fade into the page: eleven stops on a smoothstep curve, mixed in oklab — no visible start or end line */
  --sky-stops:
    var(--sky-top) 0%,
    color-mix(in oklab, var(--bg) 0%, var(--sky-mid)) calc(100% - var(--sky-fade) * 1.00),
    color-mix(in oklab, var(--bg) 3%, var(--sky-mid)) calc(100% - var(--sky-fade) * 0.90),
    color-mix(in oklab, var(--bg) 10%, var(--sky-mid)) calc(100% - var(--sky-fade) * 0.80),
    color-mix(in oklab, var(--bg) 22%, var(--sky-mid)) calc(100% - var(--sky-fade) * 0.70),
    color-mix(in oklab, var(--bg) 35%, var(--sky-mid)) calc(100% - var(--sky-fade) * 0.60),
    color-mix(in oklab, var(--bg) 50%, var(--sky-mid)) calc(100% - var(--sky-fade) * 0.50),
    color-mix(in oklab, var(--bg) 65%, var(--sky-mid)) calc(100% - var(--sky-fade) * 0.40),
    color-mix(in oklab, var(--bg) 78%, var(--sky-mid)) calc(100% - var(--sky-fade) * 0.30),
    color-mix(in oklab, var(--bg) 90%, var(--sky-mid)) calc(100% - var(--sky-fade) * 0.20),
    color-mix(in oklab, var(--bg) 97%, var(--sky-mid)) calc(100% - var(--sky-fade) * 0.10),
    color-mix(in oklab, var(--bg) 100%, var(--sky-mid)) 100%;
  /* vertical depth + a subtle curved glow rising from the bottom centre */
  background:
    radial-gradient(var(--sky-glow), var(--glow-stops)),
    linear-gradient(to bottom, var(--sky-stops));
  background:
    radial-gradient(var(--sky-glow) in oklab, var(--glow-stops)),
    linear-gradient(to bottom in oklab, var(--sky-stops));
  /* the glow fades out before the bottom edge so it never tints the page */
  --glow-fade: linear-gradient(to bottom, #000 calc(100% - var(--sky-fade) * .4),
    rgb(0 0 0 / .85) calc(100% - var(--sky-fade) * .3), rgb(0 0 0 / .5) calc(100% - var(--sky-fade) * .2),
    rgb(0 0 0 / .15) calc(100% - var(--sky-fade) * .1), transparent 100%);
  -webkit-mask-image: var(--glow-fade);
          mask-image: var(--glow-fade);
}
.hero-sky::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sky-fade)), transparent calc(100% - var(--sky-fade) * .3));
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sky-fade)), transparent calc(100% - var(--sky-fade) * .3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain);
  mix-blend-mode: overlay;
}
.hero + main { padding-top: var(--space-6); }  /* the sky has fully dissolved by the hero's bottom edge */

/* tags — neutral pills under a card's description */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.tags li {
  padding: var(--space-1) var(--space-3); border-radius: 999px;
  background: var(--chip); color: var(--muted);
  font-size: var(--text-sm); line-height: var(--leading-sm);
}

/* utilities */
.keep { white-space: nowrap; }   /* phrase that must never split across lines, e.g. "sketch to takeoff" */
.phone-only { display: none; }
@media (max-width: 599px) { br.phone-only { display: inline; } }   /* a line break used on phones only, e.g. after "Founder," */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Page transitions (Swup, assets/js/site.js).
   Browsers with View Transitions: the page crossfades and shared elements glide. The Maureen phone has
   view-transition-name: maureen-phone on both the home card and the case study hero, so it moves and scales
   from one to the other (and back). Other browsers: the #swup container fades out and in.
   Reduced motion: no glide, no fade. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
::view-transition-group(maureen-phone) { animation-duration: 500ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(maureen-phone), ::view-transition-new(maureen-phone) { height: 100%; }   /* keep the phone's proportions while it scales */
@supports not (view-transition-name: none) {
  html.is-changing .transition-fade { transition: opacity 250ms ease-out; }
  html.is-animating .transition-fade { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-changing .transition-fade { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}