/* ─────────────────────────────────────────────────────────────
   Shahryar Doosti — Personal Site
   Chapman Editorial palette · Jost display + Cormorant body
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  /* Chapman tokens */
  --red:       #A50034;
  --red-dark:  #7A0026;
  --black:     #231F20;
  --pillar:    #6E6259;
  --pillar-25: #DAD7D5;
  --sand-25:   #F6F2E5;
  --sand-50:   #EEE5CB;
  --white:     #FFFFFF;
  --rule:      #DAD7D5;
  --fg-muted:  #6E6259;

  /* Personal site palette — white-led with Chapman red as accent */
  --bg:        #FFFFFF;
  --bg-mid:    #F7F5F0;
  --bg-card:   #FFFFFF;
  --ink:       #231F20;
  --ink-mid:   #4A4140;
  --ink-faint: #6E6259;
  --accent:    #A50034;
  --accent-lt: #F4E3E9;

  /* Type */
  --f-display: 'Jost', 'Futura PT', Arial, sans-serif;
  --f-serif:   'Cormorant Garamond', 'Minion Pro', Georgia, serif;
  --tr-eye:    0.18em;
}

/* Alternate themes */
.t-ink {
  --bg:        #F4F2EC;
  --bg-mid:    #E8E5DC;
  --bg-card:   #FFFFFF;
  --ink:       #231F20;
  --ink-mid:   #4A4140;
  --ink-faint: #6E6259;
  --accent:    #231F20;
  --accent-lt: #E8E5DC;
}
.t-dark {
  --bg:        #1A1717;
  --bg-mid:    #221E1E;
  --bg-card:   #2A2625;
  --ink:       #F4F0E6;
  --ink-mid:   #C8C1B0;
  --ink-faint: #8B817A;
  --accent:    #D43A5F;
  --accent-lt: #3A1F26;
  --rule:      rgba(244, 240, 230, 0.12);
  --pillar-25: rgba(244, 240, 230, 0.18);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 0.35s, color 0.35s;
  overflow-x: hidden;
}

/* Editorial helpers */
.eyebrow {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--tr-eye);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow-muted { color: var(--ink-faint); }

::selection { background: var(--accent); color: var(--bg); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pillar-25); border-radius: 2px; }

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0, 0, 1),
              transform 0.6s cubic-bezier(0.2, 0, 0, 1);
}
.reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Focus ring per Chapman */
a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(165, 0, 52, 0.35);
}

/* ── LOADING SCREEN ────────────────────────────────────────── */
.loading-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.loading-screen.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-mark {
  display: inline-block;
  width: 6px;
  height: 22px;
  background: var(--accent);
  animation: loading-pulse 1.4s ease-in-out infinite;
}
.loading-label {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
@keyframes loading-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50%      { opacity: 1;   transform: scaleY(1);   }
}

/* ── ERROR BANNER ──────────────────────────────────────────── */
.error-banner {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.error-banner .panel {
  max-width: 520px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  background: var(--bg-card);
  padding: 36px 40px;
}
.error-banner h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.error-banner p {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-mid);
  margin-bottom: 12px;
}
.error-banner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--bg-mid);
  padding: 2px 6px;
  border: 1px solid var(--rule);
}