/* micropatronage.art — shared styles */
/* Self-hosted fonts (latin + latin-ext, variable weight). Source: Google Fonts, SIL Open Font License. */
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/hanken-grotesk-latin.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:'Newsreader'; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/newsreader-latin-ext-italic.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/newsreader-latin-italic.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:'Newsreader'; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/newsreader-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader'; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/newsreader-latin.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}
/* Twemoji country flags (CC-BY 4.0) via country-flag-emoji-polyfill: only flag codepoints, so Windows shows flags too */
@font-face{font-family:'Twemoji Country Flags'; font-display:swap; src:url(fonts/twemoji-country-flags.woff2) format('woff2'); unicode-range:U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F}

:root{
  --paper:#F5FBFC; --ink:#0C1A21; --ink-2:#4A5F69; --ink-3:#9AB0B8; --line:#D5E7EC; --wash:#E4F4F8; --card:#FFFFFF;
  --dot:#00B4D4; --on-dot:#0C1A21; --accent:#087C96; --dot-hover:#00A0BF; --ink-hover:#1F3540;
  --word-a:#22CBE2; --word-b:#0796C6; --word-light:#8FE3F0;
  --glow:rgba(0,190,220,0.16); --glow-2:rgba(80,160,255,0.10);
  --head-bg:rgba(245,251,252,0.78);
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --measure:34rem; --gutter:clamp(16px, 5vw, 64px); --max:1180px; --head-h:4.25rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A1519; --ink:#E4F3F6; --ink-2:#9DB4BC; --ink-3:#4E646C; --line:#1C3038; --wash:#0F2229; --card:#0F1E24;
    --dot:#2BD2EC; --on-dot:#0A1519; --accent:#4FD8EE; --dot-hover:#6ADFF2; --ink-hover:#C3E2E9;
    --word-a:#4FE0F4; --word-b:#1FA9E0; --word-light:#A6EEF8;
    --glow:rgba(40,210,236,0.13); --glow-2:rgba(60,140,255,0.10);
    --head-bg:rgba(10,21,25,0.74);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0A1519; --ink:#E4F3F6; --ink-2:#9DB4BC; --ink-3:#4E646C; --line:#1C3038; --wash:#0F2229; --card:#0F1E24;
  --dot:#2BD2EC; --on-dot:#0A1519; --accent:#4FD8EE; --dot-hover:#6ADFF2; --ink-hover:#C3E2E9;
  --word-a:#4FE0F4; --word-b:#1FA9E0; --word-light:#A6EEF8;
  --glow:rgba(40,210,236,0.13); --glow-2:rgba(60,140,255,0.10);
  --head-bg:rgba(10,21,25,0.74);
  color-scheme: dark;
}

/* Page transitions between documents (progressive: browsers without support simply navigate) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .55s var(--ease) both}
@keyframes vt-out{to{opacity:0; transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0; transform:translateY(14px)}}
.site-head{view-transition-name:site-head}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 1rem)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.125rem; line-height:1.6;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:700px){ body{font-size:1.1875rem} }
::selection{background:var(--dot); color:var(--on-dot)}
p{margin:0 0 1.25em}
p:last-child{margin-bottom:0}
a{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:0.18em; text-decoration-color:var(--ink-3); transition:color .2s, text-decoration-color .2s}
a:hover{text-decoration-color:var(--dot)}
:focus-visible{outline:2px solid var(--dot); outline-offset:3px; border-radius:2px}
/* the self-hosted fonts stop at 500; the browser default of 700 would be synthesised */
b,strong{font-weight:500}
h1,h2,h3{font-weight:400; margin:0; letter-spacing:-0.015em; line-height:1.12; text-wrap:balance}
h2{font-size:clamp(1.85rem, 1.2rem + 1.9vw, 2.6rem)}
h3{font-size:1.35rem; line-height:1.3}
.ui{font-family:var(--sans); font-size:0.875rem; line-height:1.4; letter-spacing:0.005em}
.muted{color:var(--ink-2)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.measure{max-width:var(--measure)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.eyebrow{
  display:inline-flex; align-items:center; gap:0.55rem; margin:0 0 1.1rem;
  font-family:var(--sans); font-size:0.8125rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--dot)}

/* Resting places for the travelling dot */
.slot{
  display:inline-block; width:0.3em; height:0.3em; border-radius:50%;
  vertical-align:0.02em; border:1px solid var(--dot); background:var(--dot);
  flex:none;
}
.has-dot .slot{background:transparent}

/* Header */
.site-head{
  position:sticky; top:0; z-index:50; height:var(--head-h);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0 var(--gutter);
  font-family:var(--sans); font-size:0.9rem;
  transition:background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.site-head.is-scrolled{
  background:var(--head-bg); box-shadow:0 1px 0 var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
}
.site-head a{text-decoration:none}
.brand{font-family:var(--serif); font-size:1.15rem; letter-spacing:-0.01em; display:inline-flex; align-items:baseline; white-space:nowrap}
.brand b{font-weight:400; color:var(--accent)}
.site-head ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:clamp(0.9rem, 2.2vw, 1.9rem)}
.site-head li a:not(.pill){color:var(--ink-2); position:relative; padding:0.35rem 0}
.site-head li a:not(.pill)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--dot); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.site-head li a:not(.pill):hover{color:var(--ink)}
.site-head li a:not(.pill):hover::after, .site-head li a[aria-current]:not(.pill)::after{transform:scaleX(1)}
.site-head li a[aria-current]:not(.pill){color:var(--ink)}
@media (max-width:760px){ .site-head .opt{display:none} }
/* Language menu */
.lang details{position:relative}
.lang summary{
  list-style:none; cursor:pointer; color:var(--ink-2); padding:0.35rem 0; font-size:0.8125rem; letter-spacing:0.04em;
  display:inline-flex; align-items:center; gap:0.3rem; transition:color .2s;
}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:""; width:0.36em; height:0.36em; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-0.12em) rotate(45deg); transition:transform .25s var(--ease)}
.lang details[open] summary::after{transform:translateY(0.08em) rotate(-135deg)}
.lang summary:hover, .lang details[open] summary{color:var(--ink)}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 0.6rem); min-width:13rem; padding:0.4rem;
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(12,26,33,0.12);
  display:flex; flex-direction:column;
}
.site-head .lang-menu a:not(.pill){color:var(--ink-2); padding:0.5rem 0.7rem; border-radius:9px; display:flex; align-items:center; gap:0.5rem}
.site-head .lang-menu a:not(.pill)::after{content:none}
.site-head .lang-menu a:not(.pill):hover{color:var(--ink); background:var(--wash)}
.site-head .lang-menu a[aria-current]:not(.pill){color:var(--ink); font-weight:500}
.site-head .lang-menu a[aria-current]:not(.pill)::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--dot); margin-left:-0.1rem}
.lang-menu p{margin:0.3rem 0 0; padding:0.6rem 0.7rem 0.4rem; border-top:1px solid var(--line); font-size:0.75rem; line-height:1.45; color:var(--ink-2)}
@media (max-width:380px){ .brand .tld{display:none} }
.site-head.is-tight .brand .tld{display:none}
.site-head.is-tighter .lang + li{display:none}

/* Policy pages (privacy, cookies) */
.policy-page .page-head{padding:clamp(3rem, 9vh, 6rem) 0 clamp(2rem, 5vh, 3rem)}
.policy-page .page-head h1{font-size:clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem); line-height:1.02; letter-spacing:-0.03em}
.policy-page .page-head .meta{font-family:var(--sans); font-size:0.875rem; color:var(--ink-2); margin-top:1.25rem}

.placeholder{
  display:grid; grid-template-columns:auto 1fr; gap:0.8rem; align-items:start; max-width:40rem;
  background:var(--wash); border:1px dashed color-mix(in srgb, var(--dot) 55%, var(--line)); border-radius:14px;
  padding:1rem 1.15rem; font-family:var(--sans); font-size:0.9375rem; line-height:1.5;
}
.placeholder svg{width:18px; height:18px; margin-top:2px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round}

.policy{max-width:40rem; padding:clamp(2.5rem, 6vh, 4rem) 0 clamp(4rem, 10vh, 6rem)}
.policy section{padding:0 0 2.75rem}
.policy h2{font-size:clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem); margin-bottom:1rem}
.policy ul{margin:0 0 1.25em; padding-left:1.2rem}
.policy li{margin-bottom:0.5rem; padding-left:0.25rem}
.policy li::marker{color:var(--dot)}
.policy b{font-weight:500}
.tbd{font-family:var(--sans); font-size:0.85em; background:color-mix(in srgb, var(--dot) 18%, transparent); border-radius:4px; padding:0.05em 0.35em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.policy .table-wrap{overflow-x:auto; margin:0.25rem 0 1.5rem; border:1px solid var(--line); border-radius:14px}
.policy table{width:100%; border-collapse:collapse; font-family:var(--sans); font-size:0.875rem; line-height:1.45}
.policy th, .policy td{text-align:left; vertical-align:top; padding:0.7rem 0.9rem; border-bottom:1px solid var(--line); min-width:7.5rem}
.policy th{font-weight:500; color:var(--ink-2); background:var(--wash); white-space:nowrap}
.policy tbody tr:last-child td{border-bottom:0}
.cookie-policy td:first-child{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.8125rem; white-space:nowrap}

/* Buttons: hover is a plain colour change */
.btn, .pill{
  display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  font-family:var(--sans); font-size:0.9375rem; font-weight:500; line-height:1.2; text-decoration:none; white-space:nowrap;
  background:var(--dot); color:var(--on-dot); border:1px solid transparent; border-radius:999px; padding:0.85rem 1.45rem;
  cursor:pointer; position:relative; isolation:isolate; overflow:hidden;
  transition:background-color .2s, border-color .2s, color .2s;
}
.btn:hover, .pill:hover{background:var(--dot-hover)}
.btn--ink{background:var(--ink); color:var(--paper)}
.btn--ink:hover{background:var(--ink-hover)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{background:transparent; border-color:var(--dot)}
.btn .slot{width:8px; height:8px}
.pill{padding:0.5rem 1rem; font-size:0.875rem}
.btn[disabled]{opacity:0.6; pointer-events:none}
.actions{display:flex; flex-wrap:wrap; gap:0.75rem 1rem; align-items:center}

/* Reveal on scroll (only when JS runs; content stays visible otherwise) */
.js [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.js [data-reveal].in{opacity:1; transform:none}

/* Sections */
section{padding:clamp(4.5rem, 11vh, 8rem) 0}
.row{display:grid; gap:1.5rem 4rem}
@media (min-width:900px){ .row{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.row > h2{align-self:start}
@media (min-width:900px){ .row.sticky > h2{position:sticky; top:calc(var(--head-h) + 2rem)} }
.intro{font-size:1.1em; max-width:30em}

/* Soft cyan atmosphere */
.aura{position:relative; isolation:isolate; overflow-x:clip}
.aura::before{
  content:""; position:absolute; inset:-10% -5% auto; height:120%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 45% at 22% 30%, var(--glow), transparent 70%),
    radial-gradient(35% 40% at 80% 60%, var(--glow-2), transparent 70%);
  filter:blur(24px); will-change:transform;
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-2%, 0, 0) scale(1)}
  to{transform:translate3d(3%, -3%, 0) scale(1.06)}
}

/* Forms */
.fields{display:grid; gap:1.35rem}
label.f{display:grid; align-content:start; gap:0.45rem; font-family:var(--sans); font-size:0.8125rem; font-weight:500; color:var(--ink-2)}
label.f small{font-weight:400; color:var(--ink-2); opacity:0.75}
label.f input, label.f textarea{
  font:inherit; font-family:var(--sans); font-size:1rem; font-weight:400; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:0.8rem 0.95rem; width:100%;
  transition:border-color .2s, box-shadow .25s;
}
label.f textarea{min-height:8rem; resize:vertical; line-height:1.5}
label.f input:hover, label.f textarea:hover{border-color:var(--ink-3)}
label.f input:focus, label.f textarea:focus{outline:none; border-color:var(--dot); box-shadow:0 0 0 4px var(--glow)}
label.f [aria-invalid="true"]{border-color:#D2455B}
.err{font-family:var(--sans); font-size:0.8125rem; color:#C23A50; min-height:0}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .err{color:#FF8A9C} }
:root[data-theme="dark"] .err{color:#FF8A9C}
.note{font-family:var(--sans); font-size:0.9375rem; color:var(--ink-2); margin-top:1rem}
[hidden]{display:none !important}
/* honeypot: a field only bots fill in */
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* Wall of signatures (home + sign page): one dot per signature, ending in the empty "Your place" ring */
.wall{--sz:40px; display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.wall li{position:relative; flex:none; width:var(--sz); height:var(--sz)}
.wall .pt, .flyer{
  border-radius:50%; color:var(--on-dot);
  background:radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--dot) 40%, #fff), var(--dot) 60%, color-mix(in srgb, var(--dot) 70%, #000));
}
.wall .pt{width:100%; height:100%; display:grid; place-items:center; font-family:var(--sans); font-size:0.6875rem; font-weight:500; cursor:default}
.wall .more{width:100%; height:100%; border-radius:50%; display:grid; place-items:center; font-family:var(--sans); font-size:0.6875rem; color:var(--ink-2); border:1px solid var(--line); background:var(--card)}
.wall .flag{position:absolute; right:-3px; bottom:-3px; font-size:0.875rem; line-height:1; margin:0}
.wall .you{border-radius:50%; border:1.5px dashed var(--dot); display:grid; place-items:center; animation:you-in .5s var(--ease)}
.wall .you::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--dot); opacity:0.6}
.has-dot .wall .you::after{opacity:0}
@keyframes you-in{from{opacity:0; transform:scale(0.6)}}
.wall .tip{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translate(-50%, 4px); white-space:nowrap; z-index:5;
  font-family:var(--sans); font-size:0.75rem; line-height:1.3; text-align:center; background:var(--ink); color:var(--paper);
  padding:0.4rem 0.65rem; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .15s, transform .2s var(--ease);
}
.wall .tip small{display:block; opacity:0.75}
.wall li:hover .tip{opacity:1; transform:translate(-50%, 0)}
.wall li:hover .pt{filter:brightness(1.08)}
/* dots pop in one after another when the wall scrolls into view */
.js .wall li{opacity:0; transform:scale(0.4)}
.js .wall.in li{opacity:1; transform:none; transition:opacity .4s, transform .6s var(--ease); transition-delay:calc(var(--i, 0) * 14ms)}
/* your own dot: lands with a squash, then keeps a glow */
.wall li.is-new .pt{box-shadow:0 0 0 4px var(--glow); animation:land .7s var(--ease)}
@keyframes land{0%{transform:scale(1.25, 0.75)} 35%{transform:scale(0.9, 1.12)} 65%{transform:scale(1.04, 0.97)} 100%{transform:none}}
.flyer{position:fixed; left:0; top:0; z-index:40; pointer-events:none; will-change:transform, width, height}

/* Signature cards (home + sign page) */
.voice{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.5rem 1.5rem 1.35rem; margin:0;
  display:grid; gap:1.1rem; break-inside:avoid;
}
.voice blockquote{margin:0; font-size:1.075rem; line-height:1.5}
.voice blockquote::before{content:"\201C"; display:block; font-size:2.4rem; line-height:0.6; height:0.9rem; color:var(--dot)}
.voice figcaption{display:flex; align-items:center; gap:0.75rem; font-family:var(--sans); font-size:0.875rem; line-height:1.35}
.voice .av{
  flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-size:0.75rem; font-weight:500; color:var(--on-dot);
  background:radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--dot) 40%, #fff), var(--dot) 60%, color-mix(in srgb, var(--dot) 70%, #000));
}
.voice .who b{font-weight:500; display:block}
.flag{font-family:'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-weight:400; cursor:default}
.voice .flag{margin-left:0.4em}
.voice .who span{color:var(--ink-2)}
.voice time{margin-left:auto; color:var(--ink-2); font-size:0.8125rem; white-space:nowrap; align-self:flex-start; padding-top:0.1rem}
.voice.is-new{animation:arrive 1.1s var(--ease) backwards; border-color:var(--dot); box-shadow:0 0 0 4px var(--glow)}
@keyframes arrive{
  from{opacity:0; transform:translateY(-14px) scale(0.97)}
  to{opacity:1; transform:none}
}

/* Footer */
footer{padding:clamp(4rem, 12vh, 8rem) var(--gutter) 2.5rem; text-align:center}
footer .mark{
  font-size:clamp(2rem, 1.2rem + 3.5vw, 3.75rem); letter-spacing:-0.02em; line-height:1.1; display:inline-flex; align-items:baseline;
  background:linear-gradient(100deg, var(--ink) 10%, var(--accent) 55%, var(--word-b) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:0.08em;
}
footer .mark .slot{width:0.15em; height:0.15em; margin:0 0.06em}
footer .line{margin:1.25rem 0 3rem; color:var(--ink-2)}
footer .fine{font-family:var(--sans); font-size:0.8125rem; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:0.5rem 2rem; justify-content:center}
footer .fine a{color:var(--ink-2); text-decoration:none}
footer .fine a:hover{color:var(--ink)}
footer .mt{margin:1.25rem 0 0; font-family:var(--sans); font-size:0.8125rem; color:var(--ink-2)}
footer .mt a{color:var(--ink-2)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; transition-delay:0s !important}
  .js [data-reveal]{opacity:1; transform:none}
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important}
}