@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:wght@400;600&family=JetBrains+Mono:wght@300;400&display=swap');

:root {
  --glow:rgba(228, 211, 211, 0.08); 
  --border:rgba(229,57,53,0.04);
}

/* === SECTION EFFECTS === */
.warning {
  width: auto;
  margin: 1.5rem;
  border: 1px solid #ff4d4d;
  background-color: #855558;
  padding: .5rem;
}

.warning .warn-head {
  font-size: large;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  color: white;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.warning .warn-text {
  font-family: 'JetBrains Mono', monospace;
  color: white;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: smaller;
}

.policy-section {
  width: 100%;
  float: left;
}

.policy-section p {
  /*width: 50%;*/
  margin-left: 2%;
}

@media only screen and (max-width: 899px) {
  .policy-section p {
    width: 98%;
  }
}

.policy-section h3 {
  margin-left: 1%;
}

.policy-section ul, .policy-section ol {
  margin-left: 2.5%;
  margin-top: 0px;
}

/* === TEXT EFFECTS === */
.redacted {
  position: relative;
  color: transparent;
}

.redacted::before {
  content: "████████████";
  color: #000;
  background: #000;
  letter-spacing: 2px;
}

.redacted:hover::before {
  background: #111;
}

.divider {
  width: 60px;
  height: 2px;
  background: #ff4d4d;
  margin: 1.5rem 0;
}

.placeholder-bar {
  height: 8px;
  background: linear-gradient(90deg, #222, #333);
  border-radius: 4px;
  margin: 0.4rem 0;
  opacity: 0.6;
}

.placeholder-bar.short { width: 40%; }
.placeholder-bar.medium { width: 70%; }
.placeholder-bar.long { width: 90%; }

.small-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-color);
}

.small-label.originfont { 
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 1rem;
  letter-spacing: 0em;
  text-transform: none;
  color: #d7d7d7
}

.small-label.red { color: #855558; /*#ff4d4d*/ }
.small-label.gold { color: #f1c40f; }

/* === SECTION MODIFIERS === */

.section-grid {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); *//*220px*/
  grid-template-columns: repeat(auto-fit, minmax(410px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.section-card {
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #333333, #2c2c2c); /*#0d0f14, #08090c*/
  transition: 0.3s ease;
  margin: 1%;
  width: auto;
  /*height: 125px;*/
}

.section-card > img {
  height: 100px;
  width: 100px;
  float: right;
}

@media only screen and (max-width: 899px) {
  .section-card > img {
    display: none;
  }
}

.section-grid.original {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /*220px*/
  gap: 1.5rem;
  margin-top: 2rem;
}

.section-card.original {
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(145deg, #333333, #2c2c2c);
  transition: 0.3s ease;
}

.section-card.original a {
  text-decoration: none;
}

.section-grid.record {
  grid-template-columns: 95%; /*220px*/
}

.section-card.record {
  width: 100%;
}

.section-card.record .title {
  max-width: 300px;
}

@media only screen and (max-width: 500px) {
  .section-card, .section-card.original {
    width: auto
  }
}

@media only screen and (max-width: 450px) {
  .section-card, .section-card.original {
    width: 60%
  }
}

.section-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.section-card:hover::before {
    opacity: .04;
}

.section-card .inactive {
  border: 1px solid grey;
}

.section-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgb(0 0 0 / .25);
}

/* === TITLE & DESCS.  === */
.section-card .title {
  /* font-family: 'Playfair Display', serif; */
  font-size: 1.1rem;
  margin-top: 0.4rem;
  color: white;
  max-width: 200px; /*180px*/
  /*max-width: 300px;*/
}

.section-card .desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  color: grey;
  margin: 1%;
  width: 100%;
}

i.grayer { color: #808080 }

.desc > a {
  color: rgb(62, 85, 112);
  text-decoration: none;
}

/* === MAIN DEFINITIONS  === */
.center-piece {
  height: 100%;
  width: 80%;
  position: relative;
  right: -10%;
  align-items: center;
  /*background-color: black;*/
}

.container {
  position: relative;
  z-index: 1;
  width: 90%;
  margin: auto;
  /*margin: 15% auto;*/
  align-items: center;
  /*background-color: black;*/
}

.page-intro p.desc {
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 0.2rem; /* tighten space below the top line */
  color: grey;
  font-size: 75%;
  max-width: 500px;
}

.page-intro p.small-label {
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 0.2rem; /* tighten space below the top line */
  color: grey;
  font-size: 50%;
  max-width: 500px;
}

.page-intro h1 {
  margin-top: 0; /* remove extra space above heading */
  line-height: 1.1; /* optional: tighter text */
  max-width: 750px;
  font-size: 200%;
}

/* Headings get elegant serif look */
h1, h2, h3 {
  font-family: 'Instrument Serif', Georgia, serif; /*'Playfair Display', serif;*/
  font-weight: 400;
  color: white;
  letter-spacing: 0.02em;
}