/* Ruhiu Photo. A projection room and a card catalog: warm white ground, one typeface, photographs supply all the color.
   Everything sits on one margin and an 8 px baseline. tools/align.js fails the build if an edge or baseline drifts. */
@font-face { font-family:"Garamond RS"; src:url(/f/EBGaramond.woff2) format("woff2"); font-weight:400 800; font-display:swap }
@font-face { font-family:"Garamond RS"; src:url(/f/EBGaramond-Italic.woff2) format("woff2"); font-weight:400 800; font-style:italic; font-display:swap }
:root {
  --ground:#F1E7D0; --ink:#141210; --dim:#655E52; --hair:rgba(20,18,16,.2); --night:#0A0908; --cream:#FDF0D5; --rose:#C8403F; --tile:#E5DAC1;
  --m:24px; --gap:8px; --bar:56px; --u:8px;
  --ease:cubic-bezier(.2,0,0,1); --down:520ms; --up:760ms;
  --serif:"Garamond RS","EB Garamond",Georgia,"Times New Roman",serif;
}
:root[data-theme="light"] { color-scheme:light }
:root[data-theme="dark"] { --ground:#0A0908; --ink:#F4EBD8; --dim:#9C9484; --hair:rgba(244,235,216,.18); --rose:#E0656A; --tile:#191714; color-scheme:dark }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) { --ground:#0A0908; --ink:#F4EBD8; --dim:#9C9484; --hair:rgba(244,235,216,.18); --rose:#E0656A; --tile:#191714; color-scheme:dark } }
@media (max-width:720px) { :root { --m:16px; --bar:48px } }
* { box-sizing:border-box; margin:0 }
[hidden] { display:none !important }
html { -webkit-text-size-adjust:100%; background:var(--ground) }
body { background:var(--ground); color:var(--ink); font:400 17px/24px var(--serif); font-variant-numeric:lining-nums; font-kerning:normal; -webkit-font-smoothing:antialiased;
  transition:background-color var(--up) var(--ease), color var(--up) var(--ease); min-height:100svh }
a { color:inherit; text-decoration:none }
img { display:block }
svg.i { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; flex:none; display:block }
svg.i * { vector-effect:non-scaling-stroke }
:focus-visible { outline:1.5px solid currentColor; outline-offset:3px }
/* The one label style, used for every small piece of type on the site. */
.l { font-size:14px; line-height:16px; font-variant-caps:all-small-caps; font-variant-numeric:lining-nums tabular-nums; letter-spacing:.075em; font-feature-settings:"c2sc","smcp","lnum","tnum" }
.n { font-variant-caps:normal; font-feature-settings:"lnum","tnum"; font-variant-numeric:lining-nums tabular-nums; font-size:.84em; font-weight:450; letter-spacing:.05em }
/* Every button on the site looks the same: plain text, underlined on hover. */
a.u, .cap a, .trail a, .lb-c a, .cmpbtn .h, .zoom button span, .lb-x, .pager button { background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size 220ms var(--ease) }
a.u:hover, .cap a:hover, .trail a:hover, .lb-c a:hover, .cmpbtn:hover .h, .cmpbtn[aria-pressed="true"] .h, .zoom button:hover span, .lb-x:hover, .pager button:hover { background-size:100% 1px }

/* Headers are set in plain Garamond (Kevin, 2026-11-03). Small caps stay for the micrographic captions and counts. */
.h { font-size:17px; line-height:24px; font-variant-caps:normal; font-feature-settings:"lnum"; font-variant-numeric:lining-nums; letter-spacing:.005em }
.h2 { font:400 22px/24px var(--serif); font-variant-numeric:lining-nums; letter-spacing:0; margin:0 }
/* Bar */
.bar { position:relative; z-index:20; height:var(--bar); padding-inline:var(--m); display:flex; align-items:center; justify-content:space-between; background:transparent }
.mark { display:flex; align-items:center; gap:8px; height:24px }
/* Just taller than the i in Ruhiu (Kevin, 2026-11-03). */
.mark img, .mark svg { height:14px; width:auto; display:block; color:currentColor }
.menu { display:flex; align-items:center; gap:24px; height:24px }
.mark .h { font-size:19px }
.menu .here { color:inherit; background-size:100% 1px }
.menu button { all:unset; display:block; cursor:pointer; width:20px; height:20px; margin-right:-2px }
.menu button:focus-visible { outline:1.5px solid currentColor; outline-offset:3px }
.saved-link[hidden] { display:none }
.theme .sun, .theme .moon { display:none }
:root[data-theme="dark"] .theme .sun, :root[data-theme="light"] .theme .moon { display:block }
.menu .theme { margin-right:0 }
.saved-link svg { fill:currentColor }
/* Search: the icon opens into a pill, in place, without moving anything else on the bar */
.search { position:relative; width:20px; height:20px }
.pill { position:absolute; right:-12px; top:-6px; height:32px; width:44px; border:1px solid transparent; border-radius:16px; display:flex; align-items:center; justify-content:flex-end; padding-right:11px; gap:8px; overflow:hidden;
  transition:width 340ms var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease); z-index:2 }
.search.open .pill { width:min(320px,calc(100vw - 2*var(--m))); border-color:currentColor; background:var(--ground) }
.pill input::-webkit-search-cancel-button { display:none }
.pill input { all:unset; flex:1; min-width:0; font:400 17px/24px var(--serif); opacity:0; transition:opacity 180ms var(--ease) 60ms; padding-left:15px }
.search.open .pill input { opacity:1 }
.pill input::placeholder { color:var(--dim) }
.sugg { position:absolute; right:-12px; top:32px; width:min(320px,calc(100vw - 2*var(--m))); background:var(--ground); padding:8px 16px 12px; display:none; z-index:3 }
.search.open .sugg:not(:empty) { display:block }
.sugg a { display:flex; justify-content:space-between; gap:16px; padding-block:4px; color:inherit }
.sugg a span:last-child { color:var(--dim) }

/* Home: the ribbon takes 75% of the landing screen, frames touching */
/* The band keeps the room its text needs, and on a short window the ribbon gives way, so nothing can overlap. */
body.home { height:100svh; overflow:hidden; display:grid; grid-template-rows:var(--bar) min(75svh,calc(100svh - var(--bar) - 152px)) minmax(0,1fr) }
.ribbon { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain; outline:none; contain:paint; cursor:default }
.ph { cursor:zoom-in }
.ribbon::-webkit-scrollbar { display:none }
.track { display:flex; height:100%; width:max-content; will-change:transform }
.ph { position:relative; height:100%; flex:none; aspect-ratio:var(--ar,1.5); display:block; background:var(--tile) }
.ph img { width:100%; height:100%; object-fit:cover; transition:opacity var(--up) var(--ease) }
/* The band under the ribbon: caption at the left margin, Kevin's note and links together in the far right corner */
.band { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto minmax(0,1fr); column-gap:var(--gap); padding:16px var(--m) 16px }
.cap { grid-column:1/span 5; opacity:0; visibility:hidden; transition:opacity 160ms var(--ease), visibility 0s 160ms }
.cap.show { opacity:1; visibility:visible; transition:opacity 340ms var(--ease), visibility 0s }
.cap .row { display:flex; gap:.45em; white-space:nowrap; height:16px }
.cap .sep { color:var(--dim) }
.cap .heart { all:unset; cursor:pointer; display:block; width:16px; height:16px; margin-left:-2px }
.cap .heart svg.i { width:16px; height:16px }
.heart svg { transition:fill 200ms var(--ease), transform 280ms var(--ease) }
.heart[aria-pressed="true"] svg { fill:var(--rose); stroke:var(--rose) }
.heart:active svg { transform:scale(.88) }
.colophon { grid-column:6/-1; justify-self:end; display:flex; gap:24px; align-items:flex-start }
.colophon > * { transition:opacity var(--up) var(--ease) }
.blurb { color:var(--dim); font-size:14px; line-height:16px; width:34ch }
.links { display:grid; grid-auto-rows:24px; flex:none; margin-top:-4px }
.links a { display:inline-flex; gap:6px; align-items:center; width:max-content }
/* Phones and small tablets: the page scrolls and everything takes its own row. Touch has no hover, so the caption lives in the lightbox and holds no empty space here. */
@media (max-width:1000px) {
  body.home { height:auto; min-height:100svh; overflow:visible; grid-template-rows:var(--bar) 75svh auto }
  .band { display:block; padding:24px var(--m) calc(40px + env(safe-area-inset-bottom)) }
  .cap { margin-bottom:24px }
  .colophon { display:flex; justify-content:space-between; gap:32px }
  .colophon { justify-self:stretch }
  .blurb { width:auto; flex:1; min-width:0; max-width:none }
  .band .legal { margin-top:40px }
}
@media (hover:none) { body.home .cap { display:none } }
@media (max-width:360px) { .menu { gap:10px } .mark .h { font-size:17px } }
@media (max-width:720px) { body.home { grid-template-rows:var(--bar) 62svh auto } .menu { gap:14px } .menu a.opt-m { display:none } }

/* Album: the title, one hero, and the grid centered beneath it. The caption sits to the right of the grid's first row and shows only while the hero is under the pointer. */
.album { padding-inline:var(--m) }
.album > h1 { font:400 30px/32px var(--serif); text-align:center; margin:0 0 16px }
.stage { position:relative; height:calc(100svh - var(--bar) - 48px - 80px); min-height:320px; overflow:hidden; cursor:zoom-in; outline-offset:-3px }
.stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 240ms var(--ease) }
.stage img.on { opacity:1 }
.side { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); margin-top:64px; margin-bottom:48px; align-items:start }
.side .grid { grid-column:4/span 6; grid-row:1 }
.side .meta { grid-column:10/-1; grid-row:1; padding-left:64px }
.side .cap { grid-column:auto; opacity:0; visibility:hidden; transition:opacity 320ms var(--ease), visibility 0s 320ms }
.side .cap.peek { opacity:1; visibility:visible; transition:opacity 320ms var(--ease), visibility 0s }
.side .cap.peek.fade { opacity:0 }
.thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:4px }
.thumbs button { all:unset; display:block; aspect-ratio:1; cursor:pointer; position:relative; background:var(--tile); overflow:hidden }
.thumbs img { width:100%; height:100%; object-fit:cover; transition:opacity 180ms var(--ease) }
.thumbs:hover img { opacity:.62 }
.thumbs button:hover img, .thumbs button[aria-current="true"] img { opacity:1 }
.thumbs button[aria-current="true"]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ground) }
.pages { display:flex; justify-content:space-between; align-items:flex-end; height:16px; margin-top:8px; color:var(--dim) }
.pages > *, .pager button { text-box:trim-both cap alphabetic }
.pages button { all:unset; cursor:pointer }
.pages button[aria-current="true"] { color:var(--ink) }
.pages .pager button { display:block; text-box:trim-both cap alphabetic }
.pager { display:flex; gap:12px; align-items:flex-end }
@media (max-width:1040px) { .stage { height:calc((100vw - 2*var(--m))/1.5); min-height:0 } .side { display:block; margin-top:32px; margin-bottom:32px } .side .meta { margin-top:24px; padding-left:0 } }
/* Lightbox: the photograph travels from where it was to the center of a dark room, with its caption underneath. */
.lb { position:fixed; inset:0; z-index:100; color:var(--cream); --dim:rgba(253,240,213,.6); --ink:var(--cream) }
.lb::before { content:""; position:absolute; inset:0; background:var(--night); opacity:0; transition:opacity var(--up) var(--ease) }
.lb.open::before { opacity:1; transition:opacity var(--down) var(--ease) }
.lb-i { position:fixed; left:0; top:0; transform-origin:0 0; will-change:transform; cursor:pointer; object-fit:contain }
.lb-c { position:fixed; opacity:0; transition:opacity 220ms var(--ease) }
.lb.open .lb-c { opacity:1; transition:opacity 420ms var(--ease) 260ms }
.lb-c .row { display:flex; gap:.45em; white-space:nowrap; height:16px }
.lb-c .sep { color:var(--dim) }
.lb-c .heart { all:unset; cursor:pointer; display:block; width:16px; height:16px; margin-left:-2px }
.lb-c .heart svg.i { width:16px; height:16px }
.lb-x { all:unset; position:fixed; right:var(--m); top:16px; cursor:pointer; opacity:0; transition:opacity 220ms var(--ease); font:400 17px/24px var(--serif); background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat }
.lb.open .lb-x { opacity:1; transition:opacity 420ms var(--ease) 260ms }
/* Albums: a card catalog. Covers on four columns, then the whole collection as an index. */
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.albums { padding:0 var(--m) }
.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px var(--gap) }
.card { display:block }
.card picture, .card img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--tile) }
.card img { transition:opacity 220ms var(--ease) }
.cards:hover .card img { opacity:.62 }
.cards .card:hover img, .cards .card:focus-visible img { opacity:1 }
.card .meta { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:4px; height:24px }
.card .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.card .c, .col .c { color:var(--dim) }
.sect { margin:64px 0 16px }
.cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px var(--gap) }
.col h2 { margin-bottom:8px }
.col a { display:flex; justify-content:space-between; gap:16px; height:24px; align-items:center; background:none }
.stack { display:grid; gap:32px; align-content:start }
.col a:hover span:first-child { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
.subjects { display:block; margin-top:48px }
.subjects .col { columns:4; column-gap:var(--gap) }
.subjects h2 { column-span:all }
.subjects a { break-inside:avoid }
.side .sub { color:var(--dim); margin:-8px 0 16px }
.cap .tags { flex-wrap:nowrap; overflow:hidden; color:var(--dim) }
.cap .tags a { color:inherit }
@media (max-width:1000px) { .cards { grid-template-columns:repeat(3,minmax(0,1fr)) } .cols { grid-template-columns:repeat(2,minmax(0,1fr)) } .subjects .col { columns:2 } }
@media (max-width:720px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px var(--gap) } .subjects .col { columns:2 } }
.pager span { display:block; text-box:trim-both cap alphabetic }
/* Atlas: an old-world sheet in the manner of a scout's field map. Pins are round like Find My, with no names and nothing live. */
body.map { height:100svh; overflow:hidden; display:grid; grid-template-rows:var(--bar) minmax(0,1fr) }
.atlas { position:relative; min-height:0; --paper:#F1E7D0; --sea:#BCD0CA; --ink2:#3D342A }
:root[data-theme="dark"] .atlas { --paper:#2A2520; --sea:#141A1B; --ink2:#D9CDB6 }
#map { position:absolute; inset:0; background:var(--sea); outline:none; font-family:var(--serif) }
.atlas[data-mode=globe] .scale { display:none }
.atlas[data-mode=globe] .rose { bottom:16px }
.maplibregl-canvas { outline:none }
.cartouche { position:absolute; left:var(--m); top:16px; color:var(--ink2); pointer-events:none }
.cartouche h1 { font-weight:400 }
.cartouche .sub { margin-top:4px }
.cartouche .legal { opacity:.7 }
.cartouche .sub { color:var(--ink2); opacity:.7 }
.rose { position:absolute; left:var(--m); bottom:48px; width:64px; height:64px; color:var(--ink2); opacity:.75; pointer-events:none }
.rose svg { display:block; width:64px; height:64px }
.scale { position:absolute; left:var(--m); bottom:16px; color:var(--ink2); display:flex; gap:8px; align-items:flex-end; height:16px; pointer-events:none }
.scale .bar { display:block; height:5px; border:1px solid currentColor; border-top:0 }
.zoom { position:absolute; right:var(--m); bottom:16px; display:flex; gap:16px; color:var(--ink2) }
.zoom button { all:unset; cursor:pointer; font:400 22px/24px var(--serif) }
.zoom button:focus-visible { outline:1.5px solid currentColor; outline-offset:3px }
.pin { display:block; width:44px; height:44px; border-radius:50%; background:var(--paper); border:2px solid var(--paper); box-shadow:0 1px 3px rgba(40,30,20,.45); position:relative; cursor:pointer; color:var(--ink2); transition:transform 180ms var(--ease) }
.pin img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover }
.pin:hover, .pin:focus-visible { transform:scale(1.18); z-index:5 }
.pin.small { width:36px; height:36px }
.pin::after { content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; margin-left:-4px; background:var(--paper); transform:rotate(45deg); z-index:-1 }
.pin.small::after { display:none }
.pin .c { position:absolute; right:-6px; top:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--ink2); color:var(--paper); font:500 11px/18px var(--serif); font-variant-numeric:lining-nums; text-align:center }
.pin .tip { position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); white-space:nowrap; background:var(--paper); padding:0 6px; height:16px; opacity:0; transition:opacity 160ms var(--ease); pointer-events:none }
.pin:hover .tip, .pin:focus-visible .tip { opacity:1 }
.city { color:var(--ink2); opacity:.8; white-space:nowrap; pointer-events:none; font-size:12px; line-height:12px; letter-spacing:.09em }
.city::before { content:""; display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; margin-right:5px; vertical-align:middle }
.egg { display:block; color:var(--ink2); font:italic 400 17px/24px var(--serif); opacity:.28; width:24px; height:24px; text-align:center; transition:opacity 400ms var(--ease) }
.egg:hover, .egg:focus-visible { opacity:1 }
@media (max-width:720px) { .rose { width:48px; height:48px; bottom:40px } .rose svg { width:48px; height:48px } }
/* Film: the stock room. Ten cartons on one isometric camera, floating on a perfect grid. */
.stock { padding:0 var(--m) }
.stockbar { display:flex; justify-content:space-between; align-items:center; height:32px; margin-bottom:8px }
.boxes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px var(--gap); max-width:1080px; margin-inline:auto }
.box { display:block; position:relative; text-align:left; color:inherit; background:none; border:0; padding:0; font:inherit; width:100% }
.box img { display:block; width:100%; height:auto; aspect-ratio:1; transition:transform 420ms var(--ease) }
.box .turn { position:absolute; left:0; top:0; width:100%; aspect-ratio:1; background-size:2400% 100%; background-repeat:no-repeat; pointer-events:none; visibility:hidden }
.box .turn.on { visibility:visible }
.box .meta { display:flex; justify-content:flex-start; gap:8px; margin-top:4px; height:24px; align-items:baseline }
.box .c { color:var(--dim) }
.compare-on .box { cursor:pointer }
.compare-on .box .meta::after { content:""; flex:none; width:12px; height:12px; border:1px solid currentColor; border-radius:50%; align-self:center; margin-left:auto }
.compare-on .box[aria-pressed="true"] .meta::after { background:currentColor }
.cmpbtn { all:unset; display:inline-flex; align-items:center; gap:8px; cursor:pointer }
.cmpi { width:24px; height:16px; overflow:visible }
/* The two circles trade places on hover. */
.cmpi ellipse { transition:transform 460ms var(--ease) }
.cmpbtn:hover .cmpi .a, .cmpbtn:focus-visible .cmpi .a { transform:translateX(7px) }
.cmpbtn:hover .cmpi .b, .cmpbtn:focus-visible .cmpi .b { transform:translateX(-7px) }
.cmp { margin-top:48px }
.cmp .hint { color:var(--dim) }
.cmp .row { display:grid; gap:var(--gap); margin-bottom:32px; grid-template-columns:repeat(var(--n),minmax(0,1fr)) }
.cmp figure { margin:0 }
.cmp img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--tile) }
.cmp figcaption { display:flex; justify-content:space-between; gap:8px; margin-top:8px; height:16px; white-space:nowrap; overflow:hidden }
.cmp figcaption .w { color:var(--dim) }
/* One film's detail: each album as a clean strip of five */
.onefilm { padding:0 var(--m) }
.onefilm .head { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:center; margin-bottom:32px }
.onefilm .head img { grid-column:1/span 2; width:100%; height:auto; aspect-ratio:1 }
.onefilm .head div { grid-column:3/-1 }
.onefilm h1 { font:400 30px/32px var(--serif); margin-bottom:8px }
.onefilm .facts { color:var(--dim) }
.onefilm .facts a { color:var(--ink) }
.reel { display:block; margin-bottom:32px }
.reel .t { display:flex; justify-content:space-between; margin-bottom:8px }
.reel .t .c { color:var(--dim) }
.strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; background:#141210; padding:14px 2px; position:relative }
.strip::before, .strip::after { content:""; position:absolute; left:0; right:0; height:5px; background:repeating-linear-gradient(90deg,transparent 0 6px,var(--ground) 6px 12px,transparent 12px 18px) }
.strip::before { top:4.5px } .strip::after { bottom:4.5px }
.strip a { display:block }
.strip img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; background:#26221E; transition:opacity 220ms var(--ease) }
.strip:hover img { opacity:.62 } .strip a:hover img { opacity:1 }
@media (max-width:560px) { .boxes { grid-template-columns:minmax(0,1fr) } }
@media (max-width:860px) { .onefilm .head img { grid-column:1/span 4 } .onefilm .head div { grid-column:5/-1 } .cmp .row { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px) { .strip { grid-template-columns:repeat(3,minmax(0,1fr)) } .strip a:nth-child(n+4) { display:none } }
@media (max-height:760px) and (min-width:861px) { .side .tags { display:none } }
/* Foot of every catalog page */
.foot { padding:88px var(--m) 32px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); row-gap:32px; align-items:start }
.trail { grid-column:1/-1; color:var(--dim); white-space:pre-wrap }
.trail a { color:var(--dim); transition:color 200ms var(--ease), background-size 220ms var(--ease) }
.trail a:hover { color:var(--ink) }
.globe { grid-column:1/-1; display:block; width:48px; height:24px; color:var(--ink) }
.globe svg.i { width:48px; height:24px; stroke-width:1 }
.about { grid-column:1/span 5; max-width:40ch }
.btns { grid-column:7/-1; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:flex-end }
.foot .legal { grid-column:1/-1; color:var(--dim) }
.band .legal { grid-column:1/-1; align-self:end; margin-top:16px; color:var(--dim) }
@media (max-width:720px) { .about,.btns { grid-column:1/-1 } .btns { justify-content:flex-start } }
/* Anything else */
.note { padding:96px var(--m); max-width:60ch }
.note h1 { font:400 30px/32px var(--serif); margin-bottom:16px }
/* A photograph travels from the ribbon into its album */
@view-transition { navigation:auto }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:280ms }
@media (prefers-reduced-motion:reduce) { *, ::before, ::after { transition-duration:1ms !important; animation-duration:1ms !important } @view-transition { navigation:none } }