body {
  margin: 0;
  padding: 24px 12px 60px;
  background-color: #3a5f5f;
  background-image:
    repeating-linear-gradient(45deg, #345555 0, #345555 2px, transparent 2px, transparent 14px),
    repeating-linear-gradient(-45deg, #345555 0, #345555 2px, transparent 2px, transparent 14px);
  font-family: "Times New Roman", Times, serif;
  color: #101010;
}

#page {
  max-width: 760px;
  margin: 0 auto;
  background: #d8d3c4;
  border: 4px ridge #8a1f1f;
  padding: 0;
  position: relative; /* needed on archive.html for stacked entry effects */
}

#banner {
  background: linear-gradient(180deg, #7a1f1f 0%, #5a1414 100%);
  color: #f2e9d8;
  text-align: center;
  padding: 14px 8px 10px;
  border-bottom: 4px double #f2e9d8;
}

#banner h1 {
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 24px; /* index.html uses 26px for its longer welcome line */
  margin: 0 0 4px;
  text-shadow: 2px 2px 0 #2b0a0a;
  letter-spacing: 1px;
}

#banner .sub {
  font-size: 12px;
  font-style: italic;
  color: #e8c9a0;
}

#navbar {
  background: #101010;
  padding: 6px;
  text-align: center;
  border-bottom: 4px double #f2e9d8;
}

#navbar a {
  display: inline-block;
  color: #ffe66d;
  background: #2b2b2b;
  border: 2px outset #666;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 12px;
  text-decoration: none;
  padding: 5px 10px;
  margin: 3px 2px;
}

#navbar a:hover {
  background: #444;
  color: #fff8dc;
}

/* current page's nav tab */
#navbar a.active {
  background: #7a1f1f;
  color: #fff8dc;
  border-color: #f2e9d8;
}

/* muted style for nav tabs pointing at pages that don't exist yet (e.g. PICTURES) */
#navbar a.archive {
  color: #999;
  background: #1a1a1a;
  border-color: #444;
}

marquee {
  background: #101010;
  color: #6de37b;
  font-family: "Courier New", monospace;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 4px double #f2e9d8;
}

#content {
  padding: 20px 26px 10px;
}

#content p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px;
}

h2.section-title {
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  color: #7a1f1f;
  text-align: center;
  font-size: 20px;
  margin-bottom: 4px;
}

hr.deco {
  border: none;
  height: 3px;
  background: repeating-linear-gradient(90deg, #8a1f1f 0 8px, transparent 8px 16px);
  margin: 20px 0; /* index.html uses 20px */
}

.trademark-line {
  text-align: center;
  margin: 22px 0 6px;
}

.trademark-line strong {
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 19px; /* spinal-health.html uses 18px */
  color: #101010;
  background: #ffe66d;
  padding: 4px 12px;
  border: 2px dashed #7a1f1f;
  display: inline-block;
}

.cta {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: #5a1414;
  margin-top: 4px;
}

/* hidden ARG links: visually inert until hovered (pointer cursor is the only tell) */
a.node-link {
  color: inherit;
  text-decoration: none;
}

a.node-link:hover {
  cursor: pointer;
}

/* select-to-reveal hidden text (black-on-black until highlighted) */
.redacted {
  background: #101010;
  color: #101010;
  padding: 0 2px;
}

.redacted::selection {
  background: #ffe66d;
  color: #101010;
}

.stamp {
  display: inline-block;
  border: 3px solid #8a1f1f;
  color: #8a1f1f;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 8px;
  transform: rotate(-6deg);
  margin: 4px 0;
}

#footer {
  background: #101010;
  color: #999;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-align: center;
  padding: 14px 10px;
  line-height: 1.7;
}

#footer a { color: #ffe66d; }

#counter-block {
  margin-top: 8px;
}

#counter {
  display: inline-block;
  background: #000;
  color: #ff2b2b;
  font-family: "Courier New", monospace;
  font-weight: bold;
  letter-spacing: 3px;
  padding: 3px 8px;
  border: 2px inset #444;
  font-size: 13px;
}


/* ==========================================================================
   2. HOME (index.html) — banal photograph, CIAO message, under-construction badge
   ========================================================================== */

/* index.html only: default cursor becomes pointer sitewide on this page */
#page a { cursor: pointer; }

#photo-block {
  text-align: center;
  margin: 6px 0 20px;
}

#photo {
  display: inline-block;
  width: 260px;
  height: 180px;
  background: repeating-linear-gradient(135deg, #999 0 6px, #aaa 6px 12px);
  border: 3px inset #666;
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 180px;
  position: relative;
}

#photo::before {
  content: "\1F5BC  banal_photograph_04.gif";
  display: block;
}

.photo-caption {
  font-size: 11px;
  color: #333;
  font-style: italic;
  margin-top: 4px;
}

#message {
  font-size: 15px;
  line-height: 1.6;
}

#message p { margin: 0 0 12px; }

#under-construction {
  text-align: center;
  margin: 26px 0 10px;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 13px;
}

#uc-badge {
  display: inline-block;
  background: repeating-linear-gradient(45deg, #ffd23f 0 10px, #101010 10px 20px);
  color: #fff;
  padding: 6px 14px;
  border: 3px solid #101010;
  text-shadow: 1px 1px 0 #000;
}


/* ==========================================================================
   3. ABOUT (about.html) — founder letter, lineage, the seven rungs
   ========================================================================== */

#story p, #founder p, #practitioners p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px;
}

#founder-block {
  background: #ece7d8;
  border: 2px inset #8a1f1f;
  padding: 16px 20px;
  margin: 10px 0 24px;
}

#founder-photo {
  display: block;
  width: 140px;
  height: 170px;
  margin: 0 auto 10px;
  background: repeating-linear-gradient(135deg, #999 0 6px, #aaa 6px 12px);
  border: 3px inset #666;
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-align: center;
  line-height: 170px;
}

#founder-photo::before {
  content: "\1F5BC  photo unavailable";
}

.founder-name {
  text-align: center;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 14px;
  color: #5a1414;
  margin-bottom: 10px;
}

.signature {
  text-align: right;
  font-style: italic;
  font-size: 14px;
  margin-top: 14px;
  color: #5a1414;
}

#rungs {
  font-size: 15px;
  line-height: 1.9;
  background: #ece7d8;
  border: 2px inset #8a1f1f;
  padding: 18px 22px;
  margin: 10px 0 24px;
}

#rungs ol {
  padding-left: 20px;
  margin: 0;
}

#rungs li {
  margin-bottom: 10px;
}


/* ==========================================================================
   4. SPINAL HEALTH (spinal-health.html) — Ladder's Disease, symptoms, warning box
   ========================================================================== */

.citation {
  font-size: 12px;
  font-style: italic;
  color: #444;
  margin: -6px 0 16px;
}

#symptoms-block {
  background: #ece7d8;
  border: 2px inset #8a1f1f;
  padding: 16px 22px;
  margin: 10px 0 22px;
}

#symptoms-block h3 {
  text-align: center;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 15px;
  color: #5a1414;
  margin: 0 0 10px;
}

#symptoms-block ul {
  font-size: 14px;
  line-height: 1.7;
  padding-left: 20px;
  margin: 0;
}

#warning-box {
  background: #ffe66d;
  border: 3px dashed #7a1f1f;
  padding: 14px 18px;
  margin: 20px 0;
  text-align: center;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 15px;
  color: #101010;
}

#warning-box .fine {
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  font-style: italic;
  margin-top: 8px;
  color: #5a1414;
}


/* ==========================================================================
   5. ARCHIVE (archive.html) — historical entries with escalating distortion
   ========================================================================== */

body { overflow-x: hidden; } /* archive.html only: keeps glitch transforms from causing scrollbars */

.entry {
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 2px dotted #8a1f1f;
}

.entry:last-of-type {
  border-bottom: none;
}

.entry-date {
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  color: #7a1f1f;
  font-size: 17px;
  text-align: center;
  margin-bottom: 10px;
}

.entry p {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 10px;
}

.doc-photo {
  display: block;
  width: 220px;
  height: 150px;
  margin: 8px auto 6px;
  background: repeating-linear-gradient(135deg, #b8ac8f 0 6px, #c9bd9e 6px 12px);
  border: 3px inset #7a5c3f;
  color: #4a3a24;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-align: center;
  line-height: 150px;
}

.doc-caption {
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: #444;
  margin-bottom: 10px;
}

/* --- entry 4 (1975): things start to slip --- */

.entry-4 .entry-date,
.date-flicker {
  animation: flicker-color 4s infinite;
}

@keyframes flicker-color {
  0%, 91%, 100% { color: #7a1f1f; }
  92% { color: #ff2b2b; }
  94% { color: #7a1f1f; }
  96% { color: #6de37b; }
  98% { color: #7a1f1f; }
}

.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.glitch::before {
  color: #ff2b2b;
  animation: glitch-shift-1 3.4s infinite linear;
  clip-path: inset(0 0 60% 0);
}

.glitch::after {
  color: #4dd0e1;
  animation: glitch-shift-2 3.9s infinite linear;
  clip-path: inset(60% 0 0 0);
}

@keyframes glitch-shift-1 {
  0%, 94%, 100% { transform: translate(0, 0); opacity: 0; }
  95% { transform: translate(-2px, -1px); opacity: 0.8; }
  97% { transform: translate(2px, 1px); opacity: 0.8; }
}

@keyframes glitch-shift-2 {
  0%, 93%, 100% { transform: translate(0, 0); opacity: 0; }
  94% { transform: translate(2px, 1px); opacity: 0.8; }
  96% { transform: translate(-2px, -1px); opacity: 0.8; }
}

/* --- entry 5 (1983): heavier distortion --- */

.entry-5 {
  background: #c9c2ae;
  padding: 16px 18px;
  border: 2px inset #8a1f1f;
}

.entry-5 .entry-date {
  letter-spacing: 2px;
}

.entry-5 p {
  animation: subtle-jitter 7s infinite;
}

.entry-5 p:nth-of-type(2) { animation-delay: 0.4s; }
.entry-5 p:nth-of-type(3) { animation-delay: 0.9s; }

@keyframes subtle-jitter {
  0%, 97%, 100% { transform: translateX(0); }
  98% { transform: translateX(-1px); }
  99% { transform: translateX(1px); }
}

.doubled {
  position: relative;
  color: #101010;
}

.doubled::after {
  content: attr(data-text);
  position: absolute;
  left: 1px;
  top: 0;
  color: rgba(122, 31, 31, 0.35);
  z-index: -1;
}

/* --- entry 6 (undated): full inversion, the wrongest one --- */

.entry-6 {
  background: #1a1a1a;
  color: #d8d3c4;
  padding: 20px 20px 22px;
  margin: 0 -26px -10px;
  filter: contrast(1.05);
}

.entry-6 .entry-date {
  color: #ff2b2b;
  animation: flicker-color 2.5s infinite;
}

.entry-6 p {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 10px;
  color: #cfc9ba;
}

.entry-6 .whisper {
  font-size: 12px;
  color: #7a1f1f;
  text-align: center;
  letter-spacing: 3px;
  margin-top: 14px;
  animation: flicker-opacity 5s infinite;
}

@keyframes flicker-opacity {
  0%, 85%, 100% { opacity: 0.3; }
  88% { opacity: 0.9; }
  91% { opacity: 0.2; }
  94% { opacity: 0.8; }
}

.entry-6 .doc-photo {
  background: repeating-linear-gradient(135deg, #333 0 6px, #222 6px 12px);
  border-color: #555;
  color: #999;
}

/* --- hidden picture link + patient testimonials (1962 entry) --- */

a.photo-link {
  display: block; text-align: center;
  text-decoration: none;
}

a.photo-link:hover .doc-photo {
  cursor: pointer;
}

.testimonial {
  font-style: italic;
  border-left: 3px solid #8a1f1f;
  padding-left: 12px;
  margin: 0 0 12px;
}

.testimonial .attr {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #444;
  margin-top: 3px;
}


/* ==========================================================================
   6. FILM (film.html) — Death Cipher tie-in page
   ========================================================================== */

#poster-block {
  text-align: center;
  margin: 10px 0 20px;
}

#poster-block img {
  max-width: 220px;
  width: 100%;
  border: 4px solid #101010;
  box-shadow: 4px 4px 0 #8a1f1f;
  filter: sepia(0.15) contrast(1.05);
}

.poster-caption {
  font-size: 11px;
  font-style: italic;
  color: #444;
  margin-top: 8px;
}

.tagline {
  text-align: center;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 16px;
  color: #5a1414;
  margin: 4px 0 18px;
  letter-spacing: 1px;
}

#quotes-block {
  background: #ece7d8;
  border: 2px inset #8a1f1f;
  padding: 16px 20px;
  margin: 10px 0 22px;
}

.quote {
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 3px solid #8a1f1f;
}

.quote .attr {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #444;
  margin-top: 3px;
}

#synopsis-split {
  display: block;
  margin: 10px 0 20px;
}

.synopsis-col {
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 2px solid #8a1f1f;
}

.synopsis-col h3 {
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 13px;
  color: #5a1414;
  margin: 0 0 8px;
  text-align: center;
}

.synopsis-col.official {
  background: #ece7d8;
}

.synopsis-col.ciao {
  background: #1a1a1a;
  color: #d8d3c4;
  border-color: #101010;
}

.synopsis-col.ciao p { color: #cfc9ba; }

#cast-list {
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 20px;
}

#cast-list .role {
  color: #7a1f1f;
  font-weight: bold;
}

#cast-list .actor {
  color: #444;
  font-size: 12px;
}

.poem-block {
  background: #1a1a1a;
  color: #cfc9ba;
  padding: 16px 20px;
  margin: 20px 0;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  line-height: 1.8;
}

.poem-block .poem-caption {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-style: normal;
  color: #7a1f1f;
  letter-spacing: 1px;
}

#links-block {
  text-align: center;
  margin: 20px 0 10px;
}

#links-block a.btn {
  display: inline-block;
  background: #101010;
  color: #ffe66d;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 12px;
  text-decoration: none;
  padding: 8px 14px;
  margin: 4px;
  border: 2px outset #666;
}

#links-block a.btn:hover {
  background: #333;
}

#socials-block {
  text-align: center;
  font-size: 12px;
  margin: 10px 0 4px;
}

#socials-block a {
  color: #5a1414;
  margin: 0 8px;
}