/* Phyllux — Golden Angle Design System
   φ = 1.618 | θ_g = 137.508° | Four billion years of R&D
   Everything derives from the golden ratio and phyllotaxis. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* Golden ratio scale */
  --phi: 1.618033988749895;
  --phi-inv: 0.618033988749895;
  --theta: 137.508;
  
  /* φ-based spacing (× 1rem base) */
  --s-xs: 0.382rem;
  --s-sm: 0.618rem;
  --s-md: 1rem;
  --s-lg: 1.618rem;
  --s-xl: 2.618rem;
  --s-2xl: 4.236rem;
  --s-3xl: 6.854rem;
  --s-4xl: 11.09rem;
  
  /* Phyllotactic palette — sunflower seed to stem */
  --bg: #080a07;
  --bg-elevated: #0e120c;
  --bg-card: #0f130e;
  --bg-card-hover: #151a13;
  --fg: #f5f1e8;
  --fg-soft: #e0dcd0;
  --muted: #9aa890;
  --muted-deep: #6a7662;
  --line: rgba(125, 138, 117, 0.25);
  --line-soft: rgba(125, 138, 117, 0.15);
  
  /* Golden accent — seed head, petal */
  --gold: #d4a84b;
  --gold-soft: rgba(212, 168, 75, 0.12);
  --gold-strong: #e8bc5a;
  --accent: #9bb87a;
  --accent-soft: rgba(155, 184, 122, 0.15);
  --accent2: #7a9b5c;
  --success: #6b9c4a;
  --warn: #c9a227;
  
  /* Typography — readable + pretty */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Source Serif 4', 'Georgia', serif;
  --font-size-base: 1.125rem;
  --font-size-body: 1.125rem;
  --line-height-body: 1.85;
  --letter-spacing-body: 0.015em;
  
  /* φ-based radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 26px;
  
  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.2s var(--ease);
  --t-smooth: 0.35s var(--ease-out);
}

/* Base typography — readability first */
body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}
p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* Phyllotactic background — MAXIMUM transcendent spiral at θ_g */
.phyllotactic-bg {
  background: 
    radial-gradient(ellipse 140% 100% at 50% -10%, rgba(212, 168, 75, 0.35) 0%, rgba(212, 168, 75, 0.08) 40%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 85% 80%, rgba(155, 184, 122, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 15% 90%, rgba(212, 168, 75, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 70% 20%, rgba(94, 234, 212, 0.15) 0%, transparent 45%),
    conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(212, 168, 75, 0.12) 137.508deg, transparent 275deg),
    var(--bg);
}

/* Ambient glow — MAXIMUM transcendent */
@keyframes ambient-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.ambient-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: 
    radial-gradient(ellipse 120% 90% at 50% -30%, rgba(212, 168, 75, 0.4) 0%, rgba(212, 168, 75, 0.1) 50%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 95% 50%, rgba(155, 184, 122, 0.3) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 5% 95%, rgba(212, 168, 75, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 80%, rgba(94, 234, 212, 0.15) 0%, transparent 45%);
  animation: ambient-pulse 8s ease-in-out infinite;
}

/* Golden angle divider — line rotated at θ_g */
.phi-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  transform: rotate(-42.492deg);
  transform-origin: center;
  margin: var(--s-2xl) 0;
}

/* Image frame — golden ratio aspect, phyllotactic corner */
.phi-frame {
  position: relative;
  aspect-ratio: 1 / var(--phi-inv);
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.phi-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(212, 168, 75, 0.2) 100%);
  pointer-events: none;
}
.phi-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-smooth);
}
.phi-frame:hover img { transform: scale(1.03); }

/* Square phi frame for portraits */
.phi-frame-square {
  aspect-ratio: 1;
}

/* Card with golden-angle accent */
.phi-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.phi-card:hover {
  border-color: rgba(212, 168, 75, 0.5);
  box-shadow: 0 12px 48px rgba(212, 168, 75, 0.2), 0 0 80px rgba(212, 168, 75, 0.08);
  transform: translateY(-4px);
}
.phi-card--accent {
  border-left: 3px solid var(--gold);
}

/* Section with θ_g rotated header accent */
.phi-section h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: var(--s-sm);
  transform: rotate(-42.492deg);
  transform-origin: left center;
}

/* Button — golden ratio proportions */
.phi-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--s-sm) var(--s-lg);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: all var(--t-fast);
  text-decoration: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-soft);
}
.phi-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-soft);
}
.phi-btn--primary {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
}
.phi-btn--primary:hover {
  background: rgba(212, 168, 75, 0.2);
}

/* ===== Mobile optimizations ===== */
@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }
  p {
    font-size: 0.9375rem;
  }
}

/* Safe area for notched devices */
@supports (padding: env(safe-area-inset-top)) {
  header {
    padding-top: env(safe-area-inset-top);
  }
  .wrap {
    padding-left: max(var(--s-xl), env(safe-area-inset-left));
    padding-right: max(var(--s-xl), env(safe-area-inset-right));
  }
  footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 640px) {
  .wrap {
    padding: var(--s-xl) var(--s-md) var(--s-2xl);
  }
  .hero-banner {
    padding: 0 var(--s-md);
    margin-bottom: var(--s-md);
  }
  .hero-banner img {
    max-height: 220px;
  }
  .seq-dot {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
  }
  .pill {
    min-height: 44px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
  }
  .btn {
    min-height: 44px;
    padding: 12px 20px;
    touch-action: manipulation;
  }
  .footer-sitemap,
  .footer-bottom .footer-sitemap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    justify-content: center;
  }
}

/* Reusable document / PDF embed block */
.pdf-feature {
  margin: var(--space-2xl, var(--s-2xl)) 0;
  padding: var(--space-xl, var(--s-xl));
  border: 1px solid var(--line);
  border-radius: var(--radius, var(--r-lg));
  background: rgba(12, 15, 20, 0.56);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.pdf-feature--gold {
  border-color: rgba(212, 168, 75, 0.45);
  background: linear-gradient(180deg, rgba(212, 168, 75, 0.09) 0%, rgba(12, 15, 20, 0.56) 100%);
}

.pdf-feature h2,
.pdf-feature h3 {
  margin: 0 0 var(--space-md, var(--s-md));
}

.pdf-feature p {
  margin-bottom: var(--space-md, var(--s-md));
}

.pdf-feature__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-bottom: var(--space-md, var(--s-md));
}

.pdf-feature__links a {
  font-weight: 600;
}

.pdf-feature__embed {
  width: 100%;
  min-height: 540px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(8, 10, 7, 0.65);
}

/* PDF pages: wider main so embeds are readable on screen */
body:has(.pdf-feature) main {
  max-width: min(1100px, 95vw) !important;
}

.grid-balanced-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md, var(--s-md));
}

.grid-balanced-3 > :last-child:nth-child(3n + 1) {
  grid-column: 2;
}

.grid-balanced-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md, var(--s-md));
}

.grid-balanced-4 > :last-child:nth-child(4n + 1) {
  grid-column: 2 / span 2;
}

@media (max-width: 900px) {
  .pdf-feature__embed {
    min-height: 460px;
  }
}

@media (max-width: 640px) {
  .pdf-feature {
    padding: var(--space-lg, var(--s-lg));
  }

  .pdf-feature__embed {
    min-height: 380px;
  }

  .grid-balanced-3,
  .grid-balanced-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-balanced-3 > :last-child:nth-child(3n + 1),
  .grid-balanced-4 > :last-child:nth-child(4n + 1) {
    grid-column: auto;
  }
}