/* ==========================================================================
   TYPEWRITER PORTFOLIO THEME (MATCHES CANNIBAL COURT TWINE ESSAY)
   ========================================================================== */

/* 1. Import Authentic Typewriter Font */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* 2. Page & Background Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace !important;
  font-size: 20px; /* Scaled down slightly from 24px for cleaner portfolio reading */
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

/* 3. Layout Container (Mirrors SugarCube #story max-width) */
.container {
  width: 100%;
  max-width: 700px;
}

/* 4. Header Section */
header {
  border-bottom: 2px solid #000000;
  padding-bottom: 20px;
  margin-bottom: 40px;
}

header h1 {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace !important;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: 8px;
}

header p {
  font-size: 0.95rem;
  color: #333333;
}

/* 5. Section Headers */
section.featured h2 {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace !important;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8b0000; /* Mirrors .global-passage-header dark red */
  margin-bottom: 20px;
}

/* 6. Essay Card / Expansion Box Style */
.essay-card {
  background-color: #ffffff;
  border: 1px solid #000000;
  border-left: 3px solid #000000;
  padding: 24px;
  margin-bottom: 30px;
}

.essay-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 12px;
  line-height: 1.4;
  border: none; /* Disables standard h3 line */
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
}

.essay-card h3 em {
  font-style: italic;
}

.essay-card p {
  font-size: 0.95rem;
  color: #222222;
  margin-bottom: 24px;
}

/* 7. Yellow Marker Highlighter Buttons & Links */
a, 
.btn {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace !important;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0000cd !important; /* Matches data-passage blue */
  text-decoration: underline dotted 2px #0000cd;
  text-underline-offset: 4px;
  background-color: transparent;
  padding: 2px 4px;
  transition: background-color 0.1s ease, color 0.1s ease;
  display: inline-block;
}

/* Arrow pseudo-element matching data-passage links */
a::after, 
.btn::after {
  content: " →";
  font-weight: bold;
}

/* Yellow Highlighter Hover Effect (#fff000) */
a:hover, 
.btn:hover {
  background-color: #fff000 !important;
  color: #000000 !important;
  text-decoration: underline solid 2px #000000;
  text-underline-offset: 4px;
}

/* 8. Text Selection Style */
::selection {
  background: #000000;
  color: #ffffff;
}