/* ============================================
   SKILLS ISSUE — Main Stylesheet (v3)
   Design direction: Zine / Editorial Dark
   ============================================
   Sections:
     1.  Reset & Root Variables
     2.  Site Navigation
     3.  Site Footer
     4.  Toast Notifications
     5.  Modals (shared overlay pattern)
     6.  Scrollbar
     7.  Utility
   ============================================
   Removed: Custom Cursor, Cursor Trail, Confetti, Footer Cat
   Page-specific styles live in play.css / home.css / pages.css
   ============================================ */


/* ============================================
   1. RESET & ROOT VARIABLES
   ============================================ */

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

:root {
  --bg-primary:   #0f0f0f;
  --bg-surface:   #1a1a1a;
  --bg-subtle:    #242424;
  --bg-hover:     #2e2e2e;

  --accent:       #FF3D00;
  --accent-dim:   #cc3100;

  --text-primary:   #f0ede6;
  --text-secondary: #888880;
  --text-faint:     #555550;

  --border:         #2a2a2a;
  --border-subtle:  #222222;
  --border-strong:  #3a3a3a;

  --font-display: 'Inter', 'DM Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  --page-padding: 2rem;
  --nav-height:   56px;
}

html { scroll-behavior: smooth; }

body {
  background:  var(--bg-primary);
  color:       var(--text-primary);
  font-family: var(--font-body);
  font-size:   16px;
  line-height: 1.6;
  overflow-x:  hidden;
}

a { color: inherit; text-decoration: none; }


/* ============================================
   2. SITE NAVIGATION
   ============================================ */

#site-nav {
  position:        fixed;
  top:             0; left: 0; right: 0;
  z-index:         500;
  height:          var(--nav-height);
  background:      var(--bg-primary);
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--page-padding);
}

#site-nav::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--accent);
}

.nav-wordmark {
  font-family:    var(--font-display);
  font-size:      0.85rem;
  font-weight:    900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-primary);
  text-decoration: none;
  display:        flex;
  align-items:    baseline;
  transition:     opacity 0.2s;
}
.nav-wordmark:hover { opacity: 0.75; }
.nav-wordmark .wordmark-period { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; }

.nav-links a {
  font-family:    var(--font-mono);
  font-size:      0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  padding:        0.4rem 0.75rem;
  transition:     color 0.2s;
  position:       relative;
}
.nav-links a:hover  { color: var(--text-primary); }
.nav-links a.active { color: var(--text-primary); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: -1px;
  left: 0.75rem; right: 0.75rem; height: 2px; background: var(--accent);
}

body { padding-top: var(--nav-height); }

.nav-mobile-toggle {
  display: none; background: none; border: none;
  color: var(--text-secondary); cursor: pointer;
  padding: 0.5rem; font-size: 1.25rem; line-height: 1;
}

@media (max-width: 640px) {
  .nav-links {
    display: none; position: fixed; top: var(--nav-height); left: 0; right: 0;
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: flex-start;
    padding: 1rem var(--page-padding); gap: 0;
  }
  .nav-links.open            { display: flex; }
  .nav-links a               { padding: 0.75rem 0; width: 100%; }
  .nav-links a.active::after { display: none; }
  .nav-mobile-toggle         { display: block; }
}


/* ============================================
   3. SITE FOOTER
   ============================================ */

#site-footer {
  border-top:      1px solid var(--border);
  padding:         1.5rem var(--page-padding);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  font-family:     var(--font-mono);
  font-size:       0.62rem;
  color:           var(--text-faint);
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  flex-wrap:       wrap;
  gap:             0.5rem;
}
#site-footer a       { color: var(--text-faint); transition: color 0.2s; }
#site-footer a:hover { color: var(--text-secondary); }

#secret-hint { opacity: 0; transition: opacity 0.5s; cursor: pointer; }
#secret-hint:hover { opacity: 1 !important; }
#secret-hint.found { opacity: 1; color: var(--accent); }


/* ============================================
   4. TOAST NOTIFICATIONS
   ============================================ */

#toast-container {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9000;
  display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end;
}

.toast {
  background:  var(--bg-surface);
  color:       var(--text-primary);
  padding:     1rem 1.25rem;
  border:      1px solid var(--border);
  border-left: 3px solid var(--accent);
  max-width:   300px;
  animation:   toast-in 0.4s var(--ease-spring) both;
}
.toast.leaving { animation: toast-out 0.3s var(--ease-out) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

.toast-eyebrow {
  font-family: var(--font-mono); font-size: 0.58rem; color: var(--accent);
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.3rem;
}
.toast-title {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 0.2rem; letter-spacing: -0.01em;
}
.toast-body { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; line-height: 1.45; }


/* ============================================
   5. SHARED MODAL / OVERLAY PATTERN
   ============================================ */

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 600;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.overlay.open { opacity: 1; pointer-events: all; }

.modal-box {
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  padding: 2.5rem; width: 90%; max-width: 560px; max-height: 90vh;
  overflow-y: auto; position: relative;
  animation: modal-pop 0.3s var(--ease-spring) both;
}
.modal-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent);
}
@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 900;
  letter-spacing: -0.02em; color: var(--text-primary);
  margin-bottom: 0.25rem; text-transform: uppercase;
}
.modal-sub { font-size: 0.82rem; color: var(--text-secondary); font-style: italic; margin-bottom: 2rem; }

.modal-close-btn {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: none; border: none; font-size: 1.1rem; cursor: pointer;
  color: var(--text-faint); line-height: 1; padding: 0.25rem;
  transition: color 0.15s; font-family: var(--font-mono);
}
.modal-close-btn:hover { color: var(--text-primary); }

.form-group    { margin-bottom: 1.25rem; }
.form-label {
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 0.4rem;
}
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-strong); background: var(--bg-subtle);
  font-family: var(--font-body); font-size: 0.9rem; color: var(--text-primary);
  outline: none; transition: border-color 0.2s; appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-faint); }
.form-input:focus,
.form-textarea:focus,
.form-select:focus    { border-color: var(--accent); }
.form-textarea        { min-height: 80px; resize: vertical; }
.form-hint            { font-size: 0.72rem; color: var(--text-faint); margin-top: 0.3rem; font-style: italic; }
.form-row             { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tag-selector         { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.color-picker-row     { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.color-swatch:hover    { transform: scale(1.2); }
.color-swatch.selected { border-color: var(--text-primary); transform: scale(1.2); }

.upload-zone {
  border: 1px dashed var(--border-strong); padding: 2rem;
  text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg-subtle);
}
.upload-zone:hover,
.upload-zone.dragover  { border-color: var(--accent); background: var(--bg-hover); }
.upload-zone-text      { font-size: 0.85rem; color: var(--text-secondary); font-style: italic; }
.upload-zone-sub       { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-faint); margin-top: 0.4rem; letter-spacing: 0.08em; }
.file-chosen           { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); margin-top: 0.5rem; }

.btn-submit {
  width: 100%; padding: 0.875rem; background: var(--accent); color: var(--bg-primary);
  border: none; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: background 0.2s; margin-top: 0.75rem;
}
.btn-submit:hover { background: #ff5520; }


/* ============================================
   6. SCROLLBAR
   ============================================ */

::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }


/* ============================================
   7. UTILITY
   ============================================ */

.visually-hidden { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; }

.tag-chip {
  font-family:    var(--font-mono);
  font-size:      0.65rem;
  padding:        0.2rem 0.6rem;
  border:         1px solid var(--border-strong);
  border-radius:  999px;
  background:     transparent;
  color:          var(--text-secondary);
  cursor:         pointer;
  transition:     all 0.2s var(--ease-out);
  white-space:    nowrap;
  user-select:    none;
  letter-spacing: 0.06em;
}
.tag-chip:hover  { border-color: var(--text-primary); color: var(--text-primary); }
.tag-chip.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); font-weight: 500; }