/* rxxis.com — production shell
   Direction: mistral.ai air + Listyco motion + Rais web-UI rules
   (no outlines/hairlines; liquid spring; 36px controls; frosted prefs).
   Palette still locked: black / white / grey + aventurine #A9A77C. Futura PT only. */

:root {
  --black: #0a0a0a;
  --white: #f7f7f4;
  --accent: #A9A77C;

  --font: "futura-pt", Futura, "Trebuchet MS", sans-serif;
  --font-bold: "futura-pt-bold", "futura-pt", Futura, "Trebuchet MS", sans-serif;

  --measure: 36rem;
  --gutter: clamp(1.5rem, 5vw, 3.75rem);
  --section-y: clamp(4rem, 11vh, 7rem);
  --text-scale: 1;
  --ctl: 36px;
  --radius: 6px;
  --radius-sm: 3px;
  --radius-card: 14px;

  --spring: cubic-bezier(.3, 1.45, .45, 1);
  --quint: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-press: transform .18s cubic-bezier(.16, 1, .3, 1);

  --shadow-card: 0 1px 2px rgba(18,18,17,.04), 0 6px 18px -8px rgba(18,18,17,.10);
  --shadow-lift: 0 1px 2px rgba(18,18,17,.05), 0 8px 24px -8px rgba(18,18,17,.10);

  /* Light default — paper */
  --bg: #f7f7f4;
  --fg: #121211;
  --muted: #6e6e6a;
  --fill: rgba(18,18,17,.05);
  --fill-deep: rgba(18,18,17,.08);
  --surface: #fff;
  --header: color-mix(in oklab, #f7f7f4 72%, transparent);
  --frost: color-mix(in oklab, #f4f4f1 66%, transparent);
  --frost-blur: blur(18px) saturate(1.2);
  --vignette: radial-gradient(ellipse at 28% 12%, transparent 0%, rgba(247,247,244,.4) 55%, var(--bg) 100%);
  --dither-opacity: .025;
  --scene-opacity: .22;
  --noise-opacity: .028;
  --dither-size: 220px;
  --dither-filter: none;
  --noise-filter: invert(1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0a0a0a;
  --fg: #f2f2f0;
  --muted: #8a8a88;
  --fill: rgba(242,242,240,.06);
  --fill-deep: rgba(242,242,240,.1);
  --surface: #141414;
  --header: color-mix(in oklab, #0a0a0a 72%, transparent);
  --frost: color-mix(in oklab, #1a1a1a 66%, transparent);
  --shadow-card: 0 1px 2px rgba(0,0,0,.22), 0 6px 18px -8px rgba(0,0,0,.45);
  --shadow-lift: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  --vignette: radial-gradient(ellipse at 30% 18%, transparent 0%, rgba(10,10,10,.55) 60%, var(--bg) 100%);
  --dither-opacity: .04;
  --scene-opacity: .38;
  --noise-opacity: .04;
  --dither-size: 260px;
  --dither-filter: none;
  --noise-filter: none;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-wrap: anywhere;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  font-size: calc(1.0625rem * var(--text-scale));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .55s var(--ease), color .55s var(--ease);
}
::selection { background: var(--accent); color: var(--black); }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { touch-action: manipulation; font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 55%, transparent);
  border-radius: var(--radius-sm);
}

/* View-transition theme wipe */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) {
  z-index: 2;
  animation: vt-circle .7s var(--spring) both;
}
@keyframes vt-circle {
  from { clip-path: circle(0% at var(--vt-x, 90%) var(--vt-y, 5%)); }
  to   { clip-path: circle(150% at var(--vt-x, 90%) var(--vt-y, 5%)); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* Background */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg > div { position: absolute; }
.bg__field {
  inset: -10%;
  background: url("../assets/dither-field.png") center / var(--dither-size) repeat;
  image-rendering: pixelated;
  opacity: var(--dither-opacity);
  filter: var(--dither-filter);
  animation: drift 60s ease-in-out infinite alternate;
  transform: translate3d(0, var(--py, 0px), 0);
  transition: opacity .55s var(--ease);
}
.bg__scene {
  inset: 0;
  background: url("../assets/dither-scene.png") center 70% / cover no-repeat;
  opacity: var(--scene-opacity);
  filter: var(--dither-filter);
  animation: drift 80s ease-in-out infinite alternate;
  transform: translate3d(0, calc(var(--py, 0px) * .4), 0);
  transition: opacity .55s var(--ease);
  mask-image: radial-gradient(ellipse 95% 80% at 55% 55%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 95% 80% at 55% 55%, #000 40%, transparent 90%);
}
html[data-theme="dark"] .bg__scene { filter: invert(1); }

.bg__vignette { inset: 0; background: var(--vignette); transition: background .55s var(--ease); }
.bg__noise {
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: var(--noise-opacity);
  filter: var(--noise-filter);
  animation: grain 1.2s steps(6) infinite;
}
@keyframes drift { from { translate: -1.5% -1%; scale: 1; } to { translate: 1.5% 1.5%; scale: 1.04; } }
@keyframes spin  { to { rotate: 360deg; } }
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); }
  40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); }
  80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .bg__field, .bg__scene, .bg__noise { animation: none; }
  html { scroll-behavior: auto; }
  body { transition: none; }
}

/* Layout */
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--fg); color: var(--bg);
  min-height: var(--ctl); display: inline-flex; align-items: center;
  padding: 0 16px; border-radius: 999px; font-size: .875rem;
}
.skip:focus { top: 16px; }

.top, main, .foot {
  width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: var(--gutter);
}

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .85rem;
  position: sticky; top: 0; z-index: 2;
  background: transparent;
}
.top.is-stuck .prefs,
.top.is-stuck .mark {
  /* pinned controls frost — page stays visible between them */
}
.mark {
  font-family: var(--font-bold); font-weight: 700; letter-spacing: .02em;
  height: var(--ctl); display: inline-flex; align-items: center;
  padding: 0 .35rem; border-radius: var(--radius);
  transition: background .35s var(--ease), var(--t-press);
}
.top.is-stuck .mark {
  background: var(--frost);
  -webkit-backdrop-filter: var(--frost-blur);
  backdrop-filter: var(--frost-blur);
}

.top__right { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.top nav {
  display: none; gap: .15rem; font-size: .875rem; color: var(--muted);
  padding: 3px; border-radius: 999px;
  transition: background .35s var(--ease);
}
.top.is-stuck nav {
  background: var(--frost);
  -webkit-backdrop-filter: var(--frost-blur);
  backdrop-filter: var(--frost-blur);
}
.top nav a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 999px; transition: color .25s var(--ease), background .3s var(--ease), var(--t-press);
}
.top nav a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .top nav a:hover { color: var(--fg); background: var(--fill); }
}
@media (min-width: 760px) { .top nav { display: flex; } }

/* Prefs — 36px round icon controls, no outlines */
.prefs {
  display: flex; align-items: center; gap: 4px;
  padding: 3px; border-radius: 999px;
  transition: background .35s var(--ease);
}
.top.is-stuck .prefs {
  background: var(--frost);
  -webkit-backdrop-filter: var(--frost-blur);
  backdrop-filter: var(--frost-blur);
}
.prefs button {
  appearance: none; border: 0; background: transparent;
  width: var(--ctl); height: var(--ctl); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--muted);
  transition: background .3s var(--ease), color .3s var(--ease), var(--t-press);
}
.prefs button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .prefs button:hover { color: var(--fg); background: var(--fill); }
}
.prefs button svg { width: 18px; height: 18px; display: block; }
.prefs__theme .ico { position: absolute; transition: opacity .45s var(--quint), transform .65s var(--spring); }
.prefs__theme { position: relative; }
.prefs__theme .ico-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.prefs__theme .ico-moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
html[data-theme="dark"] .prefs__theme .ico-sun { opacity: 0; transform: rotate(40deg) scale(.6); }
html[data-theme="dark"] .prefs__theme .ico-moon { opacity: 1; transform: rotate(0deg) scale(1); }

.prefs__type { position: relative; }
.prefs__type .aa {
  font-family: var(--font-bold); font-size: .88rem; letter-spacing: -.03em;
  line-height: 1; display: inline-flex; align-items: baseline; gap: 0;
  user-select: none; transform: translate(-1px, 1px);
}
.prefs__type .aa b { font-size: .62rem; font-weight: 700; }
.prefs__type .plus {
  position: absolute; right: 6px; top: 6px;
  width: 8px; height: 8px; pointer-events: none;
  opacity: .75;
}

/* Hero */
.hero { padding-block: clamp(5rem, 16vh, 9rem) clamp(4rem, 12vh, 7rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1.75rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
h1 {
  margin: 0; font-family: var(--font-bold); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.02;
  font-size: clamp(2.5rem, 8.5vw, 5.25rem);
}
.lede {
  margin: 1.35rem 0 0; max-width: var(--measure);
  font-size: clamp(1.0625rem, 2.1vw, 1.25rem); color: var(--muted); line-height: 1.55;
}

/* Sections — no hairlines; air only */
.block {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem;
  padding-block: var(--section-y);
}
@media (min-width: 820px) {
  .block { grid-template-columns: 10.5rem minmax(0, 1fr); gap: 3rem; }
}
h2 {
  margin: 0; font-family: var(--font-bold); font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.idx { color: var(--accent); margin-right: .75rem; font-variant-numeric: tabular-nums; }
h3 { margin: 0; font-family: var(--font-bold); font-size: 1.375rem; font-weight: 700; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; color: var(--fg); }
.prose p:last-child { margin-bottom: 0; }
.prose .meta {
  margin-top: 1.5rem; font-size: .8125rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

.card {
  max-width: var(--measure);
  padding: 1.6rem 1.5rem 1.5rem;
  border: 0; border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.card p { margin: .85rem 0 1.35rem; color: var(--muted); }
.card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tag {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .65rem; border: 0; border-radius: 999px;
  background: var(--fill-deep); color: var(--muted);
}
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1rem; margin: 0 0 1.25rem; }
.facts dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: .15rem 0 0; }

.arrow {
  color: var(--accent); display: inline-flex; align-items: center; gap: .25rem;
  transition: gap .35s var(--spring), var(--t-press);
}
.arrow::after { content: "→"; transition: transform .35s var(--spring); }
@media (hover: hover) and (pointer: fine) {
  .arrow:hover::after { transform: translateX(3px); }
}
.arrow:active { transform: scale(.97); }

.list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.list li {
  display: grid; grid-template-columns: 4rem 1fr; column-gap: 1rem; row-gap: .15rem;
  padding-block: 1.05rem;
}
.list li + li { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent); }
.yr { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9375rem; }
.note { grid-column: 2; color: var(--muted); font-size: .9375rem; }
a.what { transition: color .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  a.what:hover { color: var(--accent); }
}
.list--plain li { grid-template-columns: 1fr; }
.list--plain li + li { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent); }
.list--plain .what { font-family: var(--font-bold); font-weight: 700; }
.list--plain .note { grid-column: 1; }

.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.links a {
  display: inline-flex; align-items: center; min-height: var(--ctl);
  padding: 0 1rem; border: 0; border-radius: 999px;
  background: var(--fill-deep); font-size: .9375rem;
  transition: background .3s var(--ease), color .3s var(--ease), var(--t-press);
}
.links a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .links a:hover { background: color-mix(in oklab, var(--accent) 28%, var(--fill-deep)); color: var(--fg); }
}

.foot {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 2.5rem 3.5rem;
  font-size: .75rem; letter-spacing: .04em; color: var(--muted);
}

/* Rise — Listyco-style section reveal */
.rise { opacity: 0; transform: translateY(10px); }
.rise.in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .8s var(--quint);
  transition-delay: calc(var(--d, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
}