:root {
  --phi: 1.61803398875;
  --gap-0: 4px;
  --gap-1: calc(var(--gap-0) * var(--phi)); /* ~6.5px */
  --gap-2: calc(var(--gap-1) * var(--phi)); /* ~10.5px */
  --gap-3: calc(var(--gap-2) * var(--phi)); /* ~17px */
  --gap-4: calc(var(--gap-3) * var(--phi)); /* ~27.5px */
  --gap-5: calc(var(--gap-4) * var(--phi)); /* ~44.5px */

  --color-bg: #faf7f2;
  --color-ink: #1d1d21;
  --color-accent: #F7931A; /* brand orange */
  --color-accent-2: #E8A57B; /* brand salmon */
  --color-accent-3: #DA526A; /* brand rose */
  --color-accent-4: #79FFE1; /* cyan */
  --color-accent-5: #A78BFA; /* purple */
  --color-accent-6: #35FFD2; /* turquoise */
  --grid-max: 1600px;

  /* Typography scale (phi-based) */
  --fs-0: 12px;
  --fs-1: calc(var(--fs-0) * var(--phi));
  --fs-2: calc(var(--fs-1) * var(--phi));
  --fs-3: calc(var(--fs-2) * var(--phi));
  --fs-4: calc(var(--fs-3) * var(--phi));
  --fs-5: calc(var(--fs-4) * var(--phi));
}

html, body { background: var(--color-bg); color: var(--color-ink); }

/* Type defaults */
body { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; line-height: 1.5; font-size: var(--fs-1); }
h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.2; margin: 0 0 var(--gap-2) 0; }
h1 { font-size: var(--fs-5); }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); }
h4 { font-size: var(--fs-2); }
h5 { font-size: var(--fs-1); }
h6 { font-size: var(--fs-0); letter-spacing: .02em; text-transform: uppercase; }
p { margin: 0 0 var(--gap-2) 0; }
small, .caption { font-size: var(--fs-0); opacity: .8; }

.phi-container { max-width: var(--grid-max); margin: 0 auto; padding: 0 var(--gap-3); }

.phi-grid { display: grid; grid-gap: var(--gap-3); }
.phi-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.phi-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.phi-grid.cols-5 { grid-template-columns: 1fr calc(1fr * var(--phi)) 1fr calc(1fr * var(--phi)) 1fr; }

/* Golden ratio blocks */
.phi-split { display: grid; grid-template-columns: 1fr calc(1fr * var(--phi)); grid-gap: var(--gap-3); }
.phi-split.rev { grid-template-columns: calc(1fr * var(--phi)) 1fr; }

/* Rhythm utilities */
.g0 { gap: var(--gap-0) }
.g1 { gap: var(--gap-1) }
.g2 { gap: var(--gap-2) }
.g3 { gap: var(--gap-3) }
.g4 { gap: var(--gap-4) }
.g5 { gap: var(--gap-5) }

.p0 { padding: var(--gap-0) }
.p1 { padding: var(--gap-1) }
.p2 { padding: var(--gap-2) }
.p3 { padding: var(--gap-3) }
.p4 { padding: var(--gap-4) }
.p5 { padding: var(--gap-5) }

/* Font size utilities */
.fs-0 { font-size: var(--fs-0); }
.fs-1 { font-size: var(--fs-1); }
.fs-2 { font-size: var(--fs-2); }
.fs-3 { font-size: var(--fs-3); }
.fs-4 { font-size: var(--fs-4); }
.fs-5 { font-size: var(--fs-5); }

.stack > * + * { margin-top: var(--gap-2); }

/* Playful minimal dynamics */
.hover-oloid { transition: transform .6s cubic-bezier(.2,.9,.2,1), box-shadow .6s; }
.hover-oloid:hover { transform: translateY(-2px) rotate(0.25deg); box-shadow: 0 6px 22px rgba(0,0,0,.08); }

/* Content cards */
.card { background: white; border-radius: 10px; padding: var(--gap-3); border: 1px solid rgba(0,0,0,.06); }
.card h3 { margin: 0 0 var(--gap-2) 0; font-weight: 700; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 8px; border: 1px solid rgba(0,0,0,.1); background: white; color: var(--color-ink); cursor: pointer; transition: box-shadow .25s, transform .25s; }
.btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-accent { background: var(--color-accent); color: #fff; border-color: transparent; }
.btn-outline { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.btn-sm { padding: .35rem .75rem; border-radius: 6px; }

/* Nav helpers */
.nav { display: flex; gap: var(--gap-3); align-items: center; }
.nav a { text-decoration: none; color: inherit; padding: .25rem .5rem; border-radius: 6px; }
.nav a:hover { background: rgba(0,0,0,.05); }

/* Media aspect helpers */
.ratio-phi { position: relative; }
.ratio-phi:before { content: ""; display: block; padding-top: calc(100% / var(--phi)); }
.ratio-phi > * { position: absolute; inset: 0; }

/* Responsive adjustments */
@media (max-width: 960px) {
  .phi-split, .phi-grid.cols-5 { grid-template-columns: 1fr; }
}

/* Cyberpunk accents: subtle neon/glow surfaces */
.cyberpunk-surface {
  background: linear-gradient(180deg, #0f0f1a 0%, #0a0a12 100%);
  border: 1px solid color-mix(in oklab, var(--color-accent-4) 30%, transparent);
  border-radius: 12px;
  box-shadow:
    0 0 24px rgba(121,255,225,.06),
    inset 0 0 48px color-mix(in oklab, var(--color-accent-3) 20%, transparent);
}

.cyberpunk-accent {
  color: #79ffe1;
  text-shadow: 0 0 10px rgba(121,255,225,.6);
}

.neon-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent-3), transparent); margin: var(--gap-2) 0; opacity:.8; }