/* ==========================================================================
   selfOS site — OutlierOS Design System v1.0
   Spec: outlieros-design-system.html (Outlier OS — Most Recent Version).
   Tokens, ground decode, and cursor star carried verbatim from the spec.
   ========================================================================== */
:root {
  --oos-ground: #000000;

  /* GrainGradient shader trio */
  --oos-cyan-mid: hsl(193, 85%, 66%);
  --oos-cyan-pale: hsl(196, 100%, 83%);
  --oos-cyan-pure: hsl(195, 100%, 50%);

  /* Cursor star candlelight (rgb triplet) */
  --oos-candle: 255, 248, 220;

  /* Ink ladder — one color, graded by presence */
  --oos-ink: rgba(255, 255, 255, 1);
  --oos-ink-90: rgba(255, 255, 255, 0.9);
  --oos-ink-70: rgba(255, 255, 255, 0.7);
  --oos-ink-50: rgba(255, 255, 255, 0.5);
  --oos-ink-40: rgba(255, 255, 255, 0.4);
  --oos-line-30: rgba(255, 255, 255, 0.3);
  --oos-line: rgba(255, 255, 255, 0.2);
  --oos-line-faint: rgba(255, 255, 255, 0.1);

  /* Geometry & rhythm */
  --oos-radius: 2px;        /* buttons ship fully square */
  --oos-section: 8rem;      /* the section breath */
  --oos-gutter: 1.5rem;
  --oos-col-narrow: 48rem;  /* declare */
  --oos-col-read: 56rem;    /* read */
  --oos-col-wide: 64rem;    /* grid */

  --font-display: 'Instrument Serif', Georgia, serif;   /* 400 only */
  --font-body: 'Inter', -apple-system, sans-serif;      /* 300 / 400 / 500 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--oos-ground);
  color: var(--oos-ink-70);
  font-size: 16px;
  line-height: 1.75;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   THE GROUND — real GrainGradient shader, CSS decode as fallback
   ========================================================================== */
.oos-ground { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--oos-ground); }
.oos-ground .shader-host { position: absolute; inset: 0; }
.oos-ground.shader-on .layer,
.oos-ground.shader-on .dither,
.oos-ground.shader-on .grain { display: none; }
.oos-ground .layer {
  position: absolute; inset: -25%;
  background:
    radial-gradient(ellipse 50% 42% at 10% 6%, hsla(196, 100%, 83%, 0.13), transparent 62%),
    radial-gradient(ellipse 55% 48% at 90% 10%, hsla(193, 85%, 66%, 0.11), transparent 65%),
    radial-gradient(ellipse 60% 52% at 88% 92%, hsla(195, 100%, 50%, 0.09), transparent 62%),
    radial-gradient(ellipse 48% 42% at 8% 94%, hsla(195, 100%, 50%, 0.06), transparent 65%);
  filter: blur(70px);
  animation: oos-drift 45s ease-in-out infinite alternate;
}
.oos-ground .dither {
  position: absolute; inset: -25%;
  background:
    radial-gradient(ellipse 52% 44% at 10% 6%, hsla(196, 100%, 83%, 0.85), transparent 64%),
    radial-gradient(ellipse 57% 50% at 90% 10%, hsla(193, 85%, 66%, 0.75), transparent 66%),
    radial-gradient(ellipse 62% 54% at 88% 92%, hsla(195, 100%, 50%, 0.6), transparent 64%),
    radial-gradient(ellipse 50% 44% at 8% 94%, hsla(195, 100%, 50%, 0.45), transparent 66%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' numOctaves='2' baseFrequency='0.9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
  mix-blend-mode: screen;
  animation: oos-drift 45s ease-in-out infinite alternate;
}
.oos-ground .grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.09;
  mix-blend-mode: overlay;
}
@keyframes oos-drift {
  0%   { transform: rotate(34deg) scale(1.0) translateX(-1.5%); }
  100% { transform: rotate(38deg) scale(1.08) translateX(1.5%); }
}

/* ==========================================================================
   THE STAR — three layers, exponential falloff, difference-hollowed center
   ========================================================================== */
#oos-star {
  position: fixed; top: 0; left: 0; width: 0; height: 0;
  pointer-events: none; z-index: 30; --m: 0;
  opacity: 0; transition: opacity 0.7s ease;
}
#oos-star.visible { opacity: 1; }
#oos-star .star-layer { position: absolute; will-change: transform; }
#oos-star .arm { position: absolute; inset: 0; mix-blend-mode: difference; }

#star-primary { width: 800px; height: 800px; left: -400px; top: -400px; }
#star-primary .arm { filter: blur(12px); }
#star-primary .arm-v {
  background: radial-gradient(ellipse calc(20% + var(--m) * 5%) calc(80% + var(--m) * 10%) at 50% 50%,
    rgba(var(--oos-candle), 0.056) 0%,
    rgba(var(--oos-candle), 0.028) 8%,
    rgba(var(--oos-candle), 0.014) 18%,
    rgba(var(--oos-candle), 0.007) 30%,
    rgba(var(--oos-candle), 0.0035) 45%,
    rgba(var(--oos-candle), 0.0014) 65%,
    rgba(var(--oos-candle), 0.0007) 85%,
    transparent 100%);
}
#star-primary .arm-h {
  background: radial-gradient(ellipse calc(80% + var(--m) * 10%) calc(20% + var(--m) * 5%) at 50% 50%,
    rgba(var(--oos-candle), 0.056) 0%,
    rgba(var(--oos-candle), 0.028) 8%,
    rgba(var(--oos-candle), 0.014) 18%,
    rgba(var(--oos-candle), 0.007) 30%,
    rgba(var(--oos-candle), 0.0035) 45%,
    rgba(var(--oos-candle), 0.0014) 65%,
    rgba(var(--oos-candle), 0.0007) 85%,
    transparent 100%);
}

#star-depth { width: 1000px; height: 1000px; left: -500px; top: -500px; opacity: 0.42; }
#star-depth .arm { filter: blur(20px); }
#star-depth .arm-v {
  background: radial-gradient(ellipse calc(25% + var(--m) * 8%) calc(100% + var(--m) * 20%) at 50% 50%,
    rgba(var(--oos-candle), 0.021) 0%,
    rgba(var(--oos-candle), 0.0105) 12%,
    rgba(var(--oos-candle), 0.0056) 25%,
    rgba(var(--oos-candle), 0.0028) 40%,
    rgba(var(--oos-candle), 0.0014) 60%,
    rgba(var(--oos-candle), 0.0007) 80%,
    transparent 100%);
}
#star-depth .arm-h {
  background: radial-gradient(ellipse calc(100% + var(--m) * 20%) calc(25% + var(--m) * 8%) at 50% 50%,
    rgba(var(--oos-candle), 0.021) 0%,
    rgba(var(--oos-candle), 0.0105) 12%,
    rgba(var(--oos-candle), 0.0056) 25%,
    rgba(var(--oos-candle), 0.0028) 40%,
    rgba(var(--oos-candle), 0.0014) 60%,
    rgba(var(--oos-candle), 0.0007) 80%,
    transparent 100%);
}

#star-mask { width: 700px; height: 700px; left: -350px; top: -350px; }
#star-mask .arm { filter: blur(8px); mix-blend-mode: exclusion; }
#star-mask .arm-v {
  background: radial-gradient(ellipse calc(18% + var(--m) * 4%) calc(70% + var(--m) * 8%) at 50% 50%,
    rgba(var(--oos-candle), 0.28) 0%,
    rgba(var(--oos-candle), 0.14) 10%,
    rgba(var(--oos-candle), 0.056) 25%,
    rgba(var(--oos-candle), 0.021) 45%,
    rgba(var(--oos-candle), 0.007) 70%,
    rgba(var(--oos-candle), 0.0035) 90%,
    transparent 100%);
}
#star-mask .arm-h {
  background: radial-gradient(ellipse calc(70% + var(--m) * 8%) calc(18% + var(--m) * 4%) at 50% 50%,
    rgba(var(--oos-candle), 0.28) 0%,
    rgba(var(--oos-candle), 0.14) 10%,
    rgba(var(--oos-candle), 0.056) 25%,
    rgba(var(--oos-candle), 0.021) 45%,
    rgba(var(--oos-candle), 0.007) 70%,
    rgba(var(--oos-candle), 0.0035) 90%,
    transparent 100%);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--oos-ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1.05;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}
h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.15; }
h3 { font-family: var(--font-body); font-weight: 400; font-size: 1.25rem; color: var(--oos-ink); }

.lede { font-size: clamp(1.25rem, 2.5vw, 1.875rem); font-weight: 300; line-height: 1.6; color: var(--oos-ink-90); }
.body-lg { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 300; line-height: 1.7; color: var(--oos-ink-70); }
.quiet { font-size: 0.875rem; font-weight: 300; color: var(--oos-ink-50); }
.whisper { font-size: 0.875rem; font-weight: 300; color: var(--oos-ink-40); }
code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.85em; color: var(--oos-ink-90);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1em 0.35em; border-radius: var(--oos-radius);
}

a { color: var(--oos-ink-90); text-decoration: underline; text-decoration-color: var(--oos-line-30); text-underline-offset: 0.2em; transition: text-decoration-color 0.2s ease; }
a:hover { text-decoration-color: var(--oos-ink-70); }

/* ==========================================================================
   LAYOUT RHYTHM
   ========================================================================== */
section { position: relative; padding: var(--oos-section) var(--oos-gutter); }
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--oos-gutter); }
.col-narrow { max-width: var(--oos-col-narrow); margin: 0 auto; }
.col-read { max-width: var(--oos-col-read); margin: 0 auto; }
.col-wide { max-width: var(--oos-col-wide); margin: 0 auto; }
.stack-3 > * + * { margin-top: 0.75rem; }
.stack-6 > * + * { margin-top: 1.5rem; }
.stack-12 > * + * { margin-top: 3rem; }
.stack-16 > * + * { margin-top: 4rem; }

.divider {
  height: 1px; border: none; margin: 4rem 0;
  background: linear-gradient(to right, transparent, var(--oos-line), transparent);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 4rem; }
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 3rem; }
}

/* ==========================================================================
   STRUCTURAL IDIOMS
   ========================================================================== */
.glyph-square {
  width: 3rem; height: 3rem;
  border: 1px solid var(--oos-line-30); border-radius: var(--oos-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--oos-ink);
}
.rail-item {
  border-left: 1px solid var(--oos-line);
  padding: 1.5rem 0 1.5rem 2rem;
}
.callout {
  display: inline-block; padding: 1rem 2rem;
  border: 1px solid var(--oos-line); border-radius: var(--oos-radius);
  color: var(--oos-ink-90); font-weight: 300;
}
.cta {
  display: inline-block; padding: 1rem 3rem;
  background: #ffffff; color: #000000;
  font-family: var(--font-body); font-weight: 400; font-size: 1rem;
  border: none; cursor: pointer; text-decoration: none;
  transition: background 0.2s ease;
}
.cta:hover { background: rgba(255, 255, 255, 0.9); }

footer { padding: 4rem var(--oos-gutter); border-top: 1px solid var(--oos-line-faint); text-align: center; }

/* ==========================================================================
   THE FIELD — presence orbs, the page's living element.
   Candlelight presence over the cyan ground; each orb is one session.
   ========================================================================== */
.field {
  position: relative; height: 18rem;
  margin: 0 auto; max-width: var(--oos-col-read);
}
.field .orb {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--oos-candle), 0.9) 0%,
    rgba(var(--oos-candle), 0.35) 40%,
    transparent 70%);
  filter: blur(0.5px);
  animation: orb-breathe 6s ease-in-out infinite alternate, orb-drift 26s ease-in-out infinite alternate;
}
.field .orb::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--oos-candle), 0.12) 0%, transparent 65%);
}
.field .orb.done {
  background: radial-gradient(circle,
    hsla(196, 100%, 83%, 0.9) 0%,
    hsla(193, 85%, 66%, 0.3) 40%,
    transparent 70%);
}
@keyframes orb-breathe {
  from { opacity: 0.45; transform: scale(0.85); }
  to   { opacity: 1;    transform: scale(1.15); }
}
@keyframes orb-drift {
  from { translate: 0 0; }
  to   { translate: var(--dx, 12px) var(--dy, -10px); }
}

/* ==========================================================================
   Inherited doctrine — touch floors, honest viewport, calm motion
   ========================================================================== */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: transparent; }
  button, .cta { touch-action: manipulation; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .oos-ground .layer, .oos-ground .dither { animation: none; }
  #oos-star { display: none; }
  .field .orb { animation: none; opacity: 0.8; }
  html { scroll-behavior: auto; }
}