/* SIR POUNCELOT — the cat wif sword, knighted. Warm dawn gold + deep castle brown; gold only on Buy + the H1 em.
   Motion: html.rm (boot.js); hide-until-seen gated on html.js:not(.rm). No inline styles (CSP). */
:root { --ground: #1a140c; --ground-2: #251c11; --ground-3: #33271a; --deep: #120d07; --parch: #f1e4c6; --parch-2: #e2d0a8; --ink: #2a1c0e;
  --gold: #f3c35a; --gold-hi: #ffe09a; --gold-deep: #d79a2b; --rose: #f2a7b4; --steel: #c9d2dc; --cream: #fbf3e2; --mute: #cdbf9f; --wax: #9e2a24;
  --serif: 'IM Fell English', Georgia, serif; --sans: 'Manrope', system-ui, 'Segoe UI', sans-serif; --caps: 'Alegreya SC', Georgia, serif; --script: 'Italianno', cursive;
  --band: 30px; --nav: 64px; --gut: 72px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background-color: var(--ground); scroll-padding-top: calc(var(--nav) + 12px); }
html.js:not(.rm) { scroll-behavior: smooth; }
body { margin: 0; background-color: var(--ground); color: var(--cream); font: 400 18px/1.6 var(--sans); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background-color: var(--cream); color: var(--ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.kicker { font: 700 14px/1.3 var(--caps); letter-spacing: .12em; color: var(--gold-hi); }
.script { font-family: var(--script); }
h2 { margin-top: 12px; font: 400 clamp(36px, 4.2vw, 58px)/1.05 var(--serif); letter-spacing: -.005em; }
h2 em { font-style: italic; color: var(--rose); }

.band { position: relative; z-index: 41; height: var(--band); display: flex; align-items: center; overflow: hidden; background-color: var(--wax); color: var(--cream); }
.band-track { display: flex; white-space: nowrap; font: 700 13px/1 var(--caps); letter-spacing: .12em; }
.band-track span { flex: none; padding-left: 14px; }
html.js:not(.rm) .band:not(.paused):not(.off) .band-track { animation: band 40s linear infinite; }
@keyframes band { to { transform: translateX(-50%); } }
.band-pause { position: absolute; right: 6px; top: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; display: grid; place-items: center; background-color: var(--deep); color: var(--cream); font: 700 10px/1 var(--sans); }
.band-pause::after { content: ''; position: absolute; inset: -11px; }

.top { position: sticky; top: 0; z-index: 40; height: var(--nav); display: flex; align-items: center; gap: 20px; padding: 0 20px 0 var(--gut);
  background-color: rgba(26, 20, 12, .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(243, 195, 90, .18); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 400 26px/1 var(--serif); }
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); }
.links { display: flex; gap: 24px; margin: 0 auto; }
.links a { font: 700 15px/1 var(--caps); letter-spacing: .08em; text-decoration: none; padding: 8px 0; }
.links a:hover { color: var(--gold-hi); }
.nav-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rnd { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background-color: var(--cream); color: var(--ink); }
.rnd img { width: 18px; height: 18px; }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 24px; border: 0; border-radius: 999px; font: 700 17px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.pill.sm { height: 40px; padding: 0 16px; font-size: 15px; gap: 8px; }
.pill.big { height: 64px; min-width: 240px; font: 700 22px/1 var(--caps); letter-spacing: .08em; }
.pill.buy { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-deep)); background-color: var(--gold); color: var(--ink); box-shadow: 0 10px 30px rgba(243, 195, 90, .32); }
.pill.line { background-color: rgba(26, 20, 12, .7); color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(251, 243, 226, .5); }
.pill.line:hover { background-color: rgba(251, 243, 226, .12); }
.pill.ink { height: 42px; padding: 0 18px; background-color: var(--ink); color: var(--parch); font: 700 14px/1 var(--caps); letter-spacing: .1em; }
.chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background-color: #fff; }
.pill.sm .chip { width: 22px; height: 22px; }
.ico { flex: none; width: 18px; height: 18px; box-sizing: content-box; padding: 3px; border-radius: 50%; background-color: var(--cream); }
.dot { width: 9px; height: 9px; border-radius: 50%; background-color: var(--gold-hi); box-shadow: 0 0 10px var(--gold-hi); }
html.rm .dot { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--mute); }
html.js:not(.rm) .pill { transition: transform .2s, box-shadow .2s, background-color .2s; }
html.js:not(.rm) .pill:hover { transform: translateY(-2px); }

.hero { position: relative; margin-top: calc(-1 * var(--nav)); height: calc(100svh - var(--band)); min-height: 820px; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 32%; max-width: none; }
.hero-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 12% 55%, rgba(26, 20, 12, .9) 0, rgba(26, 20, 12, .64) 50%, rgba(26, 20, 12, 0) 100%), linear-gradient(0deg, rgba(26, 20, 12, .6) 0, rgba(26, 20, 12, 0) 22%); }
.motes { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(2px 2px at 62% 30%, var(--gold-hi), transparent), radial-gradient(2px 2px at 70% 44%, var(--gold-hi), transparent), radial-gradient(3px 3px at 78% 22%, var(--gold-hi), transparent),
    radial-gradient(2px 2px at 84% 58%, var(--gold-hi), transparent), radial-gradient(2px 2px at 56% 62%, var(--gold-hi), transparent), radial-gradient(3px 3px at 90% 36%, var(--gold-hi), transparent); }
html.js:not(.rm) .hero:not(.still) .motes { animation: motes 5s ease-in-out infinite alternate; }
@keyframes motes { to { transform: translateY(-14px); opacity: 1; } }
html.js:not(.rm) .hero:not(.still) .hero-img { animation: push 22s ease-in-out infinite alternate; }
@keyframes push { to { transform: scale(1.04); } }
.copy { position: relative; z-index: 3; width: min(720px, 100%); padding: 100px 24px 40px var(--gut); }
h1 { margin-top: 14px; font: 400 clamp(48px, min(5.6vw, 8.4vh), 80px)/1 var(--serif); letter-spacing: -.01em; }
h1 em { display: block; font-style: italic; color: var(--gold); }
html.js:not(.rm) h1 { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.sub { margin-top: 18px; max-width: 590px; color: var(--cream); }
.readout { margin-top: 20px; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px; }
.readout div { padding: 8px 14px; border-radius: 12px; background-color: rgba(37, 28, 17, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(243, 195, 90, .22); }
.readout dt { font: 700 12px/1.2 var(--caps); letter-spacing: .1em; color: var(--gold-hi); }
.readout b { display: block; font: 400 26px/1.15 var(--serif); color: var(--cream); }
.readout span { font-size: 12.5px; color: var(--mute); }
.cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.scroll { position: relative; margin-top: 22px; max-width: 640px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px; padding: 16px 20px 16px 76px; border-radius: 6px;
  background: linear-gradient(180deg, var(--parch), var(--parch-2)); background-color: var(--parch); color: var(--ink); box-shadow: 0 20px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(42, 28, 14, .2); }
.seal { position: absolute; left: 14px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #c8433b, var(--wax) 70%);
  color: #f3d7cf; font: 400 26px/1 var(--serif); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.sc-l { grid-column: 1 / -1; font: 700 12px/1.3 var(--caps); letter-spacing: .12em; color: var(--wax); }
.ca { font: 700 16px/1.35 var(--sans); word-break: break-all; }
.scroll.ok .seal { background: radial-gradient(circle at 35% 30%, #f4d27a, var(--gold-deep) 70%); color: var(--ink); }
html.js:not(.rm) .scroll.ok .seal { animation: stamp .3s cubic-bezier(.3, 1.6, .5, 1) 1; }
@keyframes stamp { from { transform: scale(1.5) rotate(-20deg); } }

.legend { max-width: 1240px; margin: 0 auto; padding: 120px var(--gut) 20px; }
.chapters { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ch { position: relative; overflow: hidden; border-radius: 10px; background-color: var(--ground-2); box-shadow: 0 0 0 1px rgba(243, 195, 90, .2), 0 24px 50px rgba(0, 0, 0, .4); }
.ch img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ch figcaption { display: grid; gap: 4px; padding: 16px 18px 18px; }
.ch b { font: 700 14px/1.2 var(--caps); letter-spacing: .1em; color: var(--gold-hi); }
.ch span { font: italic 400 20px/1.35 var(--serif); color: var(--cream); }
html.js:not(.rm) .ch { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s; }
html.js:not(.rm) .ch.in { opacity: 1; transform: none; }
.oath { margin-top: 36px; padding: 22px 26px; border-radius: 8px; background: linear-gradient(180deg, var(--parch), var(--parch-2)); background-color: var(--parch); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.oath div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(42, 28, 14, .18); }
.oath dt { font: 700 13px/1.4 var(--caps); letter-spacing: .1em; color: var(--wax); }
.oath dd { font: 500 16px/1.45 var(--sans); }

.pounce { max-width: 1000px; margin: 0 auto; padding: 120px var(--gut) 20px; }
.play-sub { margin-top: 12px; color: var(--mute); }
.arena { position: relative; margin-top: 26px; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background-color: var(--deep); box-shadow: 0 0 0 1px rgba(243, 195, 90, .25), 0 30px 70px rgba(0, 0, 0, .5);
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.ar-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.knight { position: absolute; left: 12%; bottom: 8%; width: 34%; aspect-ratio: 1; transform: translate(var(--kx, 0), var(--ky, 0)) rotate(var(--kr, 0deg)); }
.knight img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--gold), 0 20px 40px rgba(0, 0, 0, .5); }
html.js:not(.rm) .knight { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.meter { position: absolute; right: 6%; top: 50%; width: 38%; height: 26px; transform: translateY(-50%); border-radius: 999px; background-color: rgba(18, 13, 7, .8); box-shadow: inset 0 0 0 2px var(--parch-2); overflow: hidden; }
.zone { position: absolute; top: 0; bottom: 0; left: var(--zl, 44%); width: var(--zw, 16%); background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi), var(--gold-deep)); }
.needle { position: absolute; top: -4px; bottom: -4px; left: var(--nl, 0%); width: 5px; margin-left: -2px; background-color: var(--cream); box-shadow: 0 0 10px var(--cream); }
.ar-hud { position: absolute; left: 14px; top: 14px; display: flex; gap: 14px; padding: 8px 12px; border-radius: 10px; background-color: rgba(18, 13, 7, .75); font: 700 13px/1 var(--caps); letter-spacing: .08em; }
.ar-hud b { color: var(--gold-hi); }
.ar-word { position: absolute; right: 6%; top: 24%; width: 38%; text-align: center; font: italic 400 clamp(26px, 4.4vw, 52px)/1 var(--serif); color: var(--gold-hi); text-shadow: 0 4px 20px rgba(0, 0, 0, .6); pointer-events: none; }
.ar-word.bad { color: var(--rose); }
.ar-card { position: absolute; inset: 0; z-index: 5; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 20px; text-align: center; background-color: rgba(18, 13, 7, .9); }
.ar-k { font: 700 14px/1 var(--caps); letter-spacing: .14em; color: var(--gold-hi); }
.ar-v { max-width: 520px; font: 400 clamp(24px, 3vw, 34px)/1.2 var(--serif); }
.ar-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.play-ctl { margin-top: 18px; display: flex; align-items: center; gap: 18px; }
.hint { color: var(--mute); font-size: 15px; }

.howto { max-width: 1240px; margin: 0 auto; padding: 120px var(--gut) 20px; }
.steps { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps li { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 12px; background-color: var(--ground-2); box-shadow: inset 0 0 0 1px rgba(243, 195, 90, .18); }
.mk { width: 40px; height: 40px; padding: 6px; border-radius: 50%; background-color: var(--cream); }

.foot { position: relative; margin-top: 120px; padding: 0 24px 60px; text-align: center; background-color: var(--deep); }
.foot-img { width: 100%; max-height: 420px; object-fit: cover; object-position: 50% 45%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.big-line { margin-top: -30px; position: relative; font: 400 clamp(32px, 4vw, 54px)/1.1 var(--serif); }
.big-line em { display: block; font-style: italic; color: var(--rose); }
.marks { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
.marks a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; }
.marks a:hover { color: var(--gold-hi); }
.small { margin: 26px auto 0; max-width: 640px; font-size: 14px; color: var(--mute); }
.signoff { margin-top: 14px; font-size: 44px; color: var(--gold-hi); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translate(-50%, 150%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background-color: var(--cream); color: var(--ink); font-weight: 600; opacity: 0; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
html.js:not(.rm) .toast { transition: transform .3s, opacity .3s; }

@media (max-width: 1139px) { .links { display: none; } }
@media (max-width: 999px) {
  :root { --gut: 32px; }
  .hero { height: auto; min-height: 0; overflow: visible; }
  .hero-media { position: relative; height: 60svh; min-height: 440px; max-height: 620px; }
  .hero-media::after { background: linear-gradient(0deg, var(--ground) 0, rgba(26, 20, 12, .6) 20%, rgba(26, 20, 12, 0) 45%); }
  .copy { width: auto; padding: 0 var(--gut) 20px; margin-top: -90px; }
  .chapters, .oath { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .legend, .pounce, .howto { padding-top: 90px; }
}
@media (max-width: 699px) {
  :root { --band: 28px; --nav: 58px; --gut: 16px; }
  body { font-size: 17px; }
  .top { padding: 0 10px 0 14px; gap: 8px; }
  .brand { font-size: 21px; } .brand img { width: 34px; height: 34px; }
  .top .rnd, .top .motion { display: none; }
  .hero-media { height: 440px; }
  .hero-img { object-position: 68% 30%; }
  .copy { margin-top: -60px; }
  h1 { font-size: 42px; }
  .readout { grid-template-columns: 1fr 1fr; }
  .cta .pill { flex: 1 1 calc(50% - 6px); padding: 0 12px; }
  .cta .pill.buy { flex-basis: 100%; }
  .scroll { grid-template-columns: 1fr; padding-left: 20px; padding-top: 70px; }
  .seal { top: 14px; margin-top: 0; }
  .scroll .pill { width: 100%; }
  .oath div { grid-template-columns: 1fr; gap: 2px; }
  .arena { aspect-ratio: 4 / 5; }
  .knight { left: 50%; bottom: 6%; width: 64%; margin-left: -32%; }
  .meter { left: 8%; right: 8%; width: auto; top: 22%; }
  .ar-word { left: 8%; right: 8%; width: auto; top: 34%; }
  .play-ctl { flex-direction: column; align-items: stretch; }
  .pill.big { width: 100%; }
  .steps { grid-template-columns: 1fr; }
}