/* randomknights.org, shared styles for the landing page and the read-more page.
   Palette and layout follow the owner mock (lane org--landing-mock-0815).
   Fonts: Patrick Hand (hand, per the mock), Instrument Sans (body) and
   IBM Plex Mono (labels), the last two shared with ruok. */

:root{
  --ink:#F6F3ED;
  --ink-soft:#D7D2C9;
  --ink-quiet:#BEB7AC;
  --bg:#15170F;
  --bg-deep:#0A0B08;
  --accent:#ff4124;
  --accent-lit:#FF7A55;
  /* Reserved privacy link color, canon 2026-08-26. Nothing else uses it. */
  --rk-privacy:#c7b6f5;
  --hand:'Patrick Hand','Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(22px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent-lit);text-decoration:none}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;padding:8px 12px;background:var(--bg-deep);color:var(--ink);font-family:var(--mono);font-size:12px;border:1px solid var(--accent-lit);border-radius:8px;z-index:10}
.skip:focus{left:8px}

/* ---------- hero: one screen, nothing clipped ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--bg)}
.hero-layer{position:absolute;inset:0;pointer-events:none}
.hero-photo{background-image:url(/assets/bg.png);background-image:image-set(url(/assets/bg.webp) type("image/webp"),url(/assets/bg.png) type("image/png"));background-size:cover;background-position:center}
/* Canon backdrop darkening (rk_branding/canon/site-canon.md). */
.hero-veil{background:linear-gradient(180deg,rgba(8,9,7,.72),rgba(8,9,7,.94))}
/* Canon grid: the ONE grid on the page, 58x42 at .18/.14, no bottom carve.
   The old carve masked the grid out of the bottom 112px to make room for a
   footer-local grid; that footer grid is gone, so the carve goes with it. */
.hero-grid{
  background-image:
    repeating-linear-gradient(90deg,rgba(255,124,72,.18) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(0deg,rgba(255,124,72,.14) 0 1px,transparent 1px 42px);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.86) 18%,rgba(0,0,0,.34) 46%,transparent 72%);
  mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.86) 18%,rgba(0,0,0,.34) 46%,transparent 72%);
}
/* Canon edge glow, the ramp. rk_branding/canon/site-canon.md, ratified
   2026-08-26. One inverted radial masked to the bottom band, replacing three
   additive sources that read as three hot spots at wide viewports. The alpha
   is .24, not .4: that is what keeps the grid legible through the wider band. */
.hero-glow{
  background-image:
    radial-gradient(66% 60% at 50% 36%,transparent 89%,rgba(255,104,54,.24) 100%);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 22%,rgba(0,0,0,.62) 36%,rgba(0,0,0,.22) 50%,transparent 66%);
  mask-image:linear-gradient(0deg,#000 0%,#000 22%,rgba(0,0,0,.62) 36%,rgba(0,0,0,.22) 50%,transparent 66%);
}
.hero-inner{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:var(--pad)}
.block{align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.01vh,11px);text-align:center;max-width:680px;padding:clamp(7px,1.26vh,13px) 0}

/* Canonical XYZ header lockup: RK mark plus domain text, IBM Plex Mono .82rem,
   ink, 12px gap, 42px mark. The .org accent uses the ORG family color. */
.site-header{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;padding:18px 30px;pointer-events:none}
.site-brand{display:inline-flex;min-height:44px;align-items:center;gap:12px;pointer-events:auto;color:var(--ink);font-family:var(--mono);font-size:.82rem;letter-spacing:.05em}
.site-brand img{display:block;width:auto;height:42px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.site-brand:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:3px}
.site-tld{color:#f45d43}
/* Mirrors the app's app-bar BETA chip (_Rand0mBetaChip, per xyz #275/#286):
   borderless black scrim + white text, so it reads on any background instead
   of a brand-tinted fill that can wash out. Remove at v1. */
.beta-chip{display:inline-flex;align-items:center;margin-left:16px;padding:3px 7px;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;flex-shrink:0;font:800 10px var(--mono);letter-spacing:.06em}

/* Canonical XYZ hero typography: Patrick Hand 400 title, Instrument Sans
   subtitle. Copy is owner-approved (option B, 2026-08-24); the two-paragraph
   lede below stays untouched per copy rule 6. */
.hero-lockup{display:flex;flex-direction:column;gap:14px}
.hero-lockup h1{margin:0;font-family:var(--hand);font-weight:400;font-size:clamp(1.5rem,6.1vw,3rem);line-height:1.08;color:var(--ink)}
.hero-sub{margin:0 auto;max-width:680px;font-family:var(--sans);font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.lede{display:flex;flex-direction:column;gap:clamp(6px,.87vh,10px)}
.lede p{margin:0;font-family:var(--sans);font-size:clamp(15px,1.25vw + 11px,15px);line-height:1.32;letter-spacing:.005em;color:var(--ink);text-wrap:pretty}
.more{display:inline-block;margin-left:.2em;padding:2px 9px;border:1px solid rgba(255,140,95,.5);border-radius:8px;background:rgba(10,8,6,.6);color:#F3EEE6;font-family:var(--mono);font-size:.6em;letter-spacing:.06em;white-space:nowrap;vertical-align:middle}
.more:hover{border-color:var(--accent-lit);color:#FFEDE6}

/* ways to give: the tax status line sits directly above the row, inside the same section, at every width */
.give{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.74vh,7px)}
.give-kicker{margin:0 0 2px;font-size:clamp(13px,.4vw + 12px,14px);line-height:1;letter-spacing:.05em}
.taxline{margin:0 0 2px;font-family:var(--sans);font-size:clamp(12px,.35vw + 11px,12px);line-height:1.5;color:var(--ink-soft)}
.give h2{margin:0;font-family:var(--mono);font-weight:400;font-size:clamp(11px,.25vw + 10px,11px);letter-spacing:.2em;text-transform:uppercase;color:#DDD4C8}
.give-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;justify-content:center;gap:clamp(8px,1vw,14px)}
.give-list li{display:contents}
.tile{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  flex:0 0 auto;width:clamp(74px,17vw,112px);height:clamp(68px,7vw,68px);padding:0 5px;
  border:1px solid rgba(255,140,95,.34);border-radius:13px;background:rgba(10,8,6,.55);
  color:#D8D2C8;font-family:var(--mono);font-size:11px;line-height:1.25;letter-spacing:.04em;text-align:center;
  transition:border-color .18s ease,color .18s ease;
}
a.tile{border-color:rgba(255,140,95,.7);color:#F3EEE6}
a.tile:hover{border-color:var(--accent-lit);color:#FFEDE6;background:rgba(10,8,6,.8)}
a.tile:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:13px}
.tile svg{width:clamp(17px,1.6vw,20px);height:clamp(17px,1.6vw,20px);flex:none}
.tile-soon{border-style:dashed;color:var(--ink-quiet);cursor:default}
.tile-soon svg{opacity:.7}
.tile-soon-tag{position:absolute;top:-8px;right:8px;padding:1px 6px;border:1px solid rgba(255,140,95,.34);border-radius:6px;background:var(--bg-deep);color:#DDD4C8;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.nowrap{white-space:nowrap}
@media (max-width:430px){.tile{font-size:10px;letter-spacing:0;padding:0 3px}}
.give-note{margin:0;font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.03em;color:#E3DBD1}
.privacy p,.read .privacy p{margin:10px 0 0;font-size:12px;line-height:1.5}

/* Site canon: NO top separator at all, not even a transparent one. The
   footer is set off by its padding and the edge glow. No dark grounding
   plate, no footer-local grid, no footer-local glow. isolation and overflow
   went with the pseudo-elements they existed to contain. */
.footer{position:relative;align-self:end;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:clamp(10px,1.4vh,14px)}
.footer p{margin:0;text-align:center;font-family:var(--mono);font-size:clamp(11px,.3vw + 10px,12px);line-height:1.8;color:#F3EEE6}
.footer .foot-domains{display:inline}
/* Canon: no resting underline on a family link. xyz is the reference and has
   none; the border-bottom rules that used to sit here are deleted. */
.footer a.foot-xyz{color:#faafa5}
.footer a.foot-llc{color:#e97862}
.footer a.foot-org{color:#f45d43}
.footer a.foot-random{color:#ff4124}
.footer a:hover,.footer a:focus-visible{color:#FFEDE6}
@media (max-width:640px){
  .site-header{padding:14px 16px}
  .site-brand img{height:34px}
  .footer p{font-size:clamp(9px,2.8vw,11px)}
  .footer .foot-separator{display:none}
  .footer .foot-domains{display:block}
  .footer .foot-lead,.footer .foot-domains{white-space:nowrap}
  .footer .foot-family{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center}
}

/* ---------- read more page ---------- */
.read{position:relative;min-height:100svh;background:var(--bg)}
.read .hero-veil{background:linear-gradient(180deg,rgba(8,9,7,.55) 0%,rgba(8,9,7,.86) 40%,rgba(8,9,7,.94) 100%)}
.read-inner{position:relative;max-width:640px;margin:0 auto;padding:clamp(40px,7vh,88px) var(--pad) clamp(56px,9vh,104px)}
.read-top{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:clamp(30px,5vh,52px)}
.read-back{display:inline-block;padding:8px 12px;border:1px solid rgba(255,140,95,.34);border-radius:9px;background:rgba(10,8,6,.9);color:#E3DBD1;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.read-back:hover{border-color:var(--accent-lit);color:#FFEDE6}
.read .kicker{margin:0 0 26px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#BEB7AC}
.read h1{margin:0 0 14px;font-family:var(--hand);font-weight:400;font-size:clamp(28px,1.8vw + 18px,38px);line-height:1.15;color:var(--ink)}
.read h2{margin:clamp(38px,5vh,56px) 0 14px;font-family:var(--hand);font-weight:400;font-size:clamp(24px,1.5vw + 16px,32px);line-height:1.2;color:var(--ink)}
.read p{margin:0 0 16px;font-size:clamp(15px,.35vw + 14px,17px);line-height:1.72;color:var(--ink-soft);text-wrap:pretty}
.read ol{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.read li{font-size:clamp(15px,.35vw + 14px,17px);line-height:1.72;color:var(--ink-soft)}
.read strong{color:var(--ink);font-weight:600}
.read .up{display:inline-block;margin-top:36px}
.read .footer{margin-top:clamp(40px,6vh,72px)}
.error-inner{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.error-inner .footer{margin-top:auto}

@media (max-width:760px){
  .site-domain{display:none}
  /* Canon grid, tighter spacing and lower opacity under 760px. */
  .hero-grid{
    background-image:
      repeating-linear-gradient(90deg,rgba(255,124,72,.16) 0 1px,transparent 1px 46px),
      repeating-linear-gradient(0deg,rgba(255,124,72,.12) 0 1px,transparent 1px 40px);
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
@media print{
  .hero,.read{background:#fff;color:#000}
  .hero-layer{display:none}
}

/* Privacy and analytics is a legal disclosure, not navigation, so it gets the
   reserved colour rather than the family line's. Canon 2026-08-26. */
.footer .foot-privacy{margin:6px 0 0;text-align:center}
.footer a.foot-privacy-link{color:var(--rk-privacy);font-family:var(--mono);font-size:clamp(10px,.28vw + 9px,11px);letter-spacing:.04em}
.footer a.foot-privacy-link:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:3px}

/* Character scene: squirrel, evergreen, bunny, centred above the hero copy.
   Centring is structural rather than eyeballed. With justify-content center,
   equal gaps and matched character boxes, the evergreen sits dead centre at any
   width. The scene escapes the 680px measure with align-self stretch and a
   negative margin-inline instead of a width it cannot reach.
   KNOWN AND LEFT ALONE: the pair reads slightly off-balance because the
   squirrel's tail fills the right of its box while the bunny's art sits
   narrower inside the same box. Correcting it means nudging art off centre,
   which then breaks at other widths. The boxes ARE symmetric.
   Sizing (org--fit-one-screen-0827): the two mascot and evergreen widths (set
   inline on each SVG, not here) are clamp(MIN, min(Xvh,Yvw), MAX). The vh
   branch governs on short-wide viewports so the scene keeps shrinking to fit
   100svh; the added vw branch governs on narrow-tall viewports (the vh value
   alone could exceed the viewport WIDTH on a tall phone, forcing the whole
   scene wider than the screen and clipping it against .hero's overflow:hidden
   with no scrollbar to reveal it - a pre-existing latent bug this lane's
   viewport testing surfaced and fixed alongside the height overflow). */
[data-anim="scene"] svg{transition:none}
[data-anim="scene"] g[id]{transition:transform .15s ease-out}

@keyframes blink { 0%,88% { transform: scaleY(1); } 92% { transform: scaleY(.08); } 96%,100% { transform: scaleY(1); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-1.2deg); } }
@keyframes bodybob { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-5px) scaleY(.985); } }
@keyframes eartwitch { 0%,88% { transform: rotate(0); } 90% { transform: rotate(-7deg); } 94% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
@keyframes shadowpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(.94); } }
@keyframes sprout { 0% { transform: scaleY(0); } 72% { transform: scaleY(1.07); } 100% { transform: scaleY(1); } }
@keyframes sway { 0%,100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.6deg); } }
@keyframes tailwave { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(3deg); } }
@keyframes twitch { 0%,78% { transform: rotate(0) translate(0,0); } 82% { transform: rotate(7deg) translate(1px,-3.5px); } 86% { transform: rotate(-5deg) translate(0,0); } 90% { transform: rotate(4deg) translate(1px,-3.5px); } 94% { transform: rotate(-2deg) translate(0,0); } 100% { transform: rotate(0) translate(0,0); } }
@keyframes whisk { 0%,88% { transform: rotate(0); } 90% { transform: rotate(3deg); } 94% { transform: rotate(-2deg); } 97% { transform: rotate(1deg); } 100% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce){
  /* No ambient motion, no easing, and mascot.js attaches no listeners at all. */
  [data-anim="scene"] *{animation:none !important}
  [data-anim="scene"] g[id]{transition:none !important}
}