/* RA28 inner pages: the same paddock palette, header and type as the home page */
:root {
  --bg: #f5f4f1; --bg2: #eceae6; --ink: #17161a; --muted: #77747c; --line: #dedbd5;
  --purple: #7b5cc4; --lilac: #b79cf0; --night: #121116; --on-night: #f1eef6; --night-mu: #8f8a99;
  --f-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --f-tech: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --f-cond: "Anton", "Archivo", "Arial Narrow", sans-serif;
  --gut: max(16px, env(safe-area-inset-left, 0px)); --gutR: max(16px, env(safe-area-inset-right, 0px));
  --hdh: 64px; color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--f-display); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.tech { font-family: var(--f-tech); text-transform: uppercase; letter-spacing: .16em; font-weight: 400; }
.mask { display: block; background: currentColor; -webkit-mask-image: var(--m); mask-image: var(--m); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hd { position: fixed; z-index: 50; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: var(--hdh); display: flex; align-items: center; gap: 18px; padding-left: var(--gut); padding-right: var(--gutR); transition: transform .45s cubic-bezier(.6,0,.2,1); }
.hd.away { transform: translateY(-110%); }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: var(--sh, 0); transition: opacity .3s; }
.brand { display: flex; color: var(--ink); }
.brand .logo { width: 34px; aspect-ratio: 779 / 813; -webkit-mask-image: url(ra28.webp); mask-image: url(ra28.webp); transition: color .25s; }
.brand:hover .logo { color: var(--purple); }
.crumb { font-size: 8.5px; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--purple); }
.hd.dark .brand, .hd.dark .crumb { color: var(--on-night); }
.hd.dark::before { background: color-mix(in srgb, var(--night) 82%, transparent); }

.sec-k { display: flex; align-items: center; gap: 14px; font-size: 9px; color: var(--purple); }
.sec-k b { font-weight: 400; color: var(--muted); }
.sec-k::after { content: ""; width: 38px; height: 1px; background: currentColor; opacity: .5; }

.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }

.pg-end { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: clamp(110px, 14vw, 180px) var(--gutR) calc(env(safe-area-inset-bottom, 0px) + 40px) var(--gut); text-align: center; }
.pg-next { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.pg-next span { font-size: 9px; color: var(--muted); }
.pg-next b { font: 400 clamp(46px, 9vw, 120px)/.9 var(--f-cond); text-transform: uppercase; transform: skewX(-10deg); transition: color .3s; }
.pg-next:hover b { color: var(--purple); }
.pg-end .sig { width: min(60vw, 300px); aspect-ratio: 1426 / 496; -webkit-mask-image: url(signature.webp); mask-image: url(signature.webp); color: var(--ink); margin-top: 40px; }
.pg-end .soc { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.pg-end .soc a { font-size: 10px; text-decoration: none; transition: color .2s; }
.pg-end .soc a { padding: 16px 10px; margin: -16px -10px; } /* 43px tap target, layout unchanged */
.pg-end .soc a:hover { color: var(--purple); }
.pg-end small { margin-top: 30px; font-size: 8.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

.pg-end .sig-home { display: block; line-height: 0; }
.pg-end .by { display: block; width: min(46vw, 150px); aspect-ratio: 4.245; color: var(--muted); transition: color .2s; margin-top: 6px; }
.pg-end .by .mask { width: 100%; height: 100%; }
.pg-end .by:hover { color: var(--purple); }