/* Peak Sovereign Systems — Phase 1 Bedrock Style Core
   Source: Claude Master Blueprint, Section 2. Values marked (derived) are not in the PDF. */
:root{
  /* Colour core (PDF) */
  --pss-base:#0B0F19;               /* Deep Charcoal Slate */
  --pss-surface:#131926;            /* glass surface tint */
  --pss-glass:rgba(19,25,38,.60);   /* bg-[#131926]/60 */
  --pss-glass-video:rgba(19,25,38,.40); /* bg-[#131926]/40 */
  --pss-line:rgba(255,255,255,.05); /* border-white/5 */
  --pss-line-strong:rgba(255,255,255,.10); /* border-white/10 */
  /* Gold is the main accent; deep royal reds with ember orange; emerald only for positive outcomes and play */
  --pss-gold:#D4AF5A; --pss-gold-light:#EBD49A; --pss-gold-deep:#A8853F;
  --pss-gold-10:rgba(212,175,90,.10); --pss-gold-20:rgba(212,175,90,.22);
  --pss-royal:#7D1428; --pss-royal-deep:#4E0B18; --pss-ember:#C4602D; --pss-ember-light:#E08A55;
  --pss-royal-10:rgba(125,20,40,.16); --pss-royal-20:rgba(150,32,52,.38);
  --grad-gold:linear-gradient(135deg,#EBD49A 0%,#D4AF5A 45%,#A8853F 100%);
  --grad-ember:linear-gradient(135deg,#E08A55 0%,#C4602D 35%,#7D1428 100%);
  --pss-emerald:#10B981;            /* positive outcomes + play only */
  --pss-emerald-hover:#059669;
  --pss-emerald-10:rgba(16,185,129,.10);
  --pss-emerald-20:rgba(16,185,129,.20);
  --pss-white:#FFFFFF;
  --pss-body:#9CA3AF;
  --pss-blur:12px;                  /* backdrop-blur-md */

  /* Fluid type engine (PDF) */
  --fs-h1:clamp(2.2rem,5vw,4.5rem);
  --fs-body:clamp(1rem,1.8vw,1.15rem);
  /* (derived) steps between H1 and body, same clamp method */
  --fs-h2:clamp(1.75rem,3.4vw,3rem);
  --fs-h3:clamp(1.25rem,2.2vw,1.6rem);
  --fs-small:clamp(.875rem,1.2vw,.95rem);
  --fs-readout:clamp(2.4rem,6vw,4.75rem);

  /* (derived) type families — reuse fonts already loaded by the kept top section */
  --ff-sans:"IBM Plex Sans",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;

  /* (derived) rhythm */
  --radius-lg:.5rem; --radius-xl:.75rem;
  --gutter:clamp(1rem,4vw,2rem);
  --section-y:clamp(4rem,10vw,8rem);
  --max:80rem; --max-video:64rem; /* max-w-5xl */
}
/* Top section keeps its own palette (gold glow on black smoke), scoped so it never leaks */
.pss-crown{ --crown-black:#000; --crown-gold:inherit; }

html{background:var(--pss-base);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pss-base);color:var(--pss-body);font-family:var(--ff-sans);
  font-size:var(--fs-body);font-weight:300;line-height:1.625}
/* Stop sideways drift without turning <body> into its own scroll box (that can block scrolling inside embedded viewers and on iPhone) */
html,body{overflow-x:clip!important;overflow-y:visible!important}
@supports not (overflow:clip){html{overflow-x:hidden!important}body{overflow-x:visible!important}}
.h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.025em;color:var(--pss-white);line-height:1.08;margin:0}
.h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.025em;color:var(--pss-white);line-height:1.12;margin:0}
.h3{font-size:var(--fs-h3);font-weight:600;color:var(--pss-white);line-height:1.3;margin:0}
.body{font-size:var(--fs-body);color:var(--pss-body);font-weight:300;line-height:1.625}
.glass{background:var(--pss-glass);-webkit-backdrop-filter:blur(var(--pss-blur));backdrop-filter:blur(var(--pss-blur));
  border:1px solid var(--pss-line);border-radius:var(--radius-xl)}
.readout{background:var(--pss-gold-10);border:1px solid var(--pss-gold-20);padding:1.5rem;border-radius:var(--radius-lg);text-align:center}
.btn-primary{display:block;background:var(--grad-gold);color:#17110A;box-shadow:0 10px 30px -12px rgba(212,175,90,.55);font-weight:700;padding:1rem;border-radius:var(--radius-lg);
  letter-spacing:.025em;text-align:center;transition:all .3s;text-decoration:none}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 14px 38px -12px rgba(212,175,90,.7)}
:focus-visible{outline:2px solid var(--pss-gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}