/* ============================================================
   THEME: The Archive Terminal
   VARIANT: Grainy Gold (Antique Kraft, Parchment, Noise + Grid)
   Source: Sample.html
============================================================ */

/* --- TOKENS --- */
:root{
  --wall: #c4b293;     /* Deep Kraft */
  --plate: #f2ebd9;    /* Grainy Parchment */
  --recess: #e6dec5;   /* Slot / input recess */

  --gold-dark: #9e7d48; /* Burnished bronze */
  --gold-pop:  #d49e35; /* Amber gold */
  --ink: #3b2f22;       /* Warm charcoal */

  --shadow-plate:
    0 0 0 1px rgba(80, 60, 30, 0.10),
    0 4px 0 rgba(100, 80, 60, 0.25),
    0 10px 20px rgba(60, 45, 30, 0.15);

  --shadow-slot:
    inset 0 3px 6px rgba(0,0,0,0.08),
    inset 0 1px 2px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.60);

  --font-label: "Cinzel", serif;
  --font-body:  "Spectral", serif;
  --font-data:  "Courier Prime", monospace;
}

/* --- BASE / TEXTURE WALL --- */
html, body { height: 100%; }
body{
  margin: 0;
  padding: 40px 20px;
  background-color: var(--wall);
  color: var(--ink);
  font-family: var(--font-body);

  /* Grain + Grid (same feel as sample) */
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E"),
    linear-gradient(rgba(80, 50, 20, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 50, 20, 0.08) 1px, transparent 1px);
  background-size: 150px 150px, 40px 40px, 40px 40px;
}

h1,h2,h3,h4{
  font-family: var(--font-label);
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 0;
}

a{ color: inherit; }

/* --- SITE HEADER (neutral, terminal-like) --- */
.site-header{
  max-width: 900px;
  margin: 0 auto 28px;
}
.site-tagline{
  margin: 6px 0 0;
  font-family: var(--font-data);
  font-size: 12px;
  opacity: 0.75;
}

/* --- TERMINAL PLATE --- */
.terminal-plate{
  max-width: 900px;
  margin: 0 auto 32px;

  background: var(--plate);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");

  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 6px;
  box-shadow: var(--shadow-plate);
  padding: 36px;
  position: relative;
}

/* --- RIVETS --- */
.rivet{
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b5a68e;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.7),
    inset -1px -1px 2px rgba(0,0,0,0.2);
  pointer-events: none;
}
.rivet.tl{ top: 12px; left: 12px; }
.rivet.tr{ top: 12px; right: 12px; }
.rivet.bl{ bottom: 12px; left: 12px; }
.rivet.br{ bottom: 12px; right: 12px; }

/* --- LABEL --- */
.label{
  display: block;
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0 0 8px;
  color: #8a7352;
}

/* --- INPUTS (global mapping, matches sample) --- */
input[type="text"], input[type="date"], select, textarea{
  background: var(--recess);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 12px 16px;
  box-shadow: var(--shadow-slot);
  font-family: var(--font-data);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  display: block;
}

textarea{
  background-image: linear-gradient(transparent 95%, rgba(160, 120, 60, 0.10) 95%);
  background-size: 100% 28px;
  line-height: 28px;
  resize: vertical;
}

input:focus, select:focus, textarea:focus{
  outline: none;
  background: #fff;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.05),
    0 0 0 2px var(--gold-pop);
}

/* --- BUTTONS (global mapping) --- */
.btn, .btn-key, .pill-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: #fcfaf5;
  border: 1px solid #d4cbb8;
  border-bottom: 3px solid #bfb399;
  border-radius: 4px;

  font-family: var(--font-label);
  font-weight: 700;
  font-size: 12px;
  color: #6e5d43;
  cursor: pointer;

  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;

  transition: transform 0.05s, border-bottom-width 0.05s;
}

.btn:active, .btn-key:active, .pill-toggle:active{
  transform: translateY(2px);
  border-bottom-width: 1px;
  background: #ebe6d5;
}

.btn.accent, .btn-key.primary, .pill-toggle.is-on{
  background: var(--gold-pop);
  border-color: #b88a32;
  border-bottom-color: #966f24;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

/* Small text utility */
.small{
  font-size: 11px;
  opacity: 0.7;
  font-family: var(--font-data);
}
/* === Page transitions ====================================== */

body{
  opacity: 1;
  transition: opacity 180ms ease;
}

body.is-leaving{
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  body{ transition: none; }
  body.is-leaving{ opacity: 1; }
}
/* =========================================================
   SAFETY: CONTENT MUST NEVER DISAPPEAR
   (If reveal JS fails, text stays visible.)
========================================================= */

.stamp-in{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

.typewriter-line{
  width: auto !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  border-right: none !important;
  animation: none !important;
}