/* ================================================================
   base.css — Variables, Reset, Typography
   PakAnonymous.org
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Jost:wght@200;300;400;500;600;700&display=swap');

/* ── Light Mode (default) ─────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Gold — darker for light backgrounds */
  --gold:        #9A7200;
  --gold-light:  #C49400;
  --gold-dark:   #755700;
  --gold-alpha:  rgba(154, 114, 0, 0.08);
  --gold-border: rgba(154, 114, 0, 0.2);
  --gold-glow:   rgba(154, 114, 0, 0.25);

  /* Surfaces */
  --bg:          #FAFAF8;
  --bg-surface:  #F4F2EE;
  --bg-card:     #EEEAE4;
  --bg-hover:    #E8E4DC;
  --bg-input:    #F0EDE8;

  /* Borders */
  --border:       #E2DDD6;
  --border-light: #D8D2C9;

  /* Text */
  --text:          #0F0E0A;
  --text-secondary:#4A4640;
  --text-muted:    #8A8480;
  --text-faint:    #C5C0B8;

  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, sans-serif;

  /* Misc */
  --shadow-sm:   0 1px 4px rgba(15,14,10,0.06);
  --shadow-md:   0 4px 20px rgba(15,14,10,0.08);
  --shadow-lg:   0 8px 40px rgba(15,14,10,0.1);
  --shadow-glow: 0 8px 32px rgba(154,114,0,0.2);
  --transition:  all 0.32s cubic-bezier(0.4, 0, 0.2, 1);

  /* Theme-specific helpers */
  --loader-bg:       #FAFAF8;
  --nav-blur-bg:     rgba(250, 250, 248, 0.92);
  --nav-shadow:      0 1px 24px rgba(15,14,10,0.06);
  --footer-bg:       #0F0E0A;
  --footer-border:   #1C1B16;
  --footer-text:     #4A4640;
  --footer-muted:    #333028;
}

/* ── Dark Mode ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --gold:        #C9A227;
    --gold-light:  #E2B830;
    --gold-dark:   #A8851F;
    --gold-alpha:  rgba(201, 162, 39, 0.1);
    --gold-border: rgba(201, 162, 39, 0.22);
    --gold-glow:   rgba(201, 162, 39, 0.32);

    --bg:          #080808;
    --bg-surface:  #0e0e0e;
    --bg-card:     #141414;
    --bg-hover:    #1c1c1c;
    --bg-input:    #181818;

    --border:       #252525;
    --border-light: #303030;

    --text:          #EDE9E2;
    --text-secondary:#9A9590;
    --text-muted:    #585450;
    --text-faint:    #343028;

    --shadow-sm:   0 1px 4px rgba(0,0,0,0.3);
    --shadow-md:   0 4px 24px rgba(0,0,0,0.5);
    --shadow-lg:   0 8px 48px rgba(0,0,0,0.6);
    --shadow-glow: 0 8px 32px rgba(201,162,39,0.2);

    --loader-bg:       #080808;
    --nav-blur-bg:     rgba(8, 8, 8, 0.92);
    --nav-shadow:      0 1px 24px rgba(0,0,0,0.4);
    --footer-bg:       #040404;
    --footer-border:   #111111;
    --footer-text:     #484440;
    --footer-muted:    #2a2825;
  }
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--serif);
  line-height: 1.1;
  color: var(--text);
  font-weight: 700;
}

p { line-height: 1.85; }

a { color: inherit; text-decoration: none; transition: color 0.2s; }

button { font-family: var(--sans); cursor: pointer; border: none; background: none; color: inherit; }

img { max-width: 100%; display: block; }

input, textarea, select { font-family: var(--sans); color: var(--text); }

/* ── Grain texture overlay ────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.014;
  pointer-events: none;
  z-index: 9998;
}
@media (prefers-color-scheme: dark) {
  body::after { opacity: 0.02; }
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Utilities ────────────────────────────────────────────────── */
.gold    { color: var(--gold) !important; }
.italic  { font-style: italic; }
.serif   { font-family: var(--serif) !important; }
.upper   { text-transform: uppercase; letter-spacing: 0.14em; }
.hidden  { display: none !important; }
.muted   { color: var(--text-muted); }

.section-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4.5rem);
}

/* ── Eyebrow + Rule ───────────────────────────────────────────── */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.gold-rule {
  display: block;
  width: 44px;
  height: 1.5px;
  background: var(--gold);
  margin-bottom: 1.75rem;
}
.gold-rule.center { margin-left: auto; margin-right: auto; }

/* ── Section title ────────────────────────────────────────────── */
.section-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.06;
  margin-bottom: 1.2rem;
}

/* ── Reveal animations ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 769px)  { .hide-desktop { display: none !important; } }