/* =========================
   RESET + BASE
========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { font-family: sans-serif; background: #000000; color: #ffffff; font-style: italic; }

a.mini-license-link {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  display: block;
  z-index: 1000;
}

a.mini-license-link img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

a { color: inherit; }

/* =========================
   LANDING PAGE
   index.html uses: .landing, .landing-title, .enter
========================= */
.landing {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;

  background-image: url('images/landing%20image.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.landing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  z-index: 0;
}

.landing-title {
  position: absolute;
  top: 42%;
  left: 60%;
  transform: translate(-30%, -50%);
  z-index: 1;

  color: #fff;
  font-size: clamp(22px, 6vw, 35px);
  letter-spacing: 0.14em;
  text-transform: uppercase;

  text-shadow: 0 6px 24px rgba(0,0,0,0.5);
}

/* Enter link: only italic on hover */
.enter {
  position: relative;
  z-index: 1;
  margin-bottom: 44px;

  padding: 10px 18px;
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 14px;

  transition: font-style 0.25s ease;
}

.enter:hover { font-style: italic; }

/* =========================
   NAV (all non-landing pages)
========================= */
nav {
  width: 100%;
  background: #111;
  padding: 18px 28px;
  display: flex;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: font-style 0.25s ease, opacity 0.25s ease;
}

nav a:hover {
  font-style: italic;
  opacity: 0.9;
}

/* =========================
   PAGE CONTENT WRAPPER
   home.html / video.html / painting.html / writing.html / sound.html
   uses: .page-content + optional page class
========================= */
.page-content {
  padding: 34px 28px 80px;
  min-height: calc(100vh - 60px);
}

/* =========================
   HOME PAGE LICENSE LAYOUT
========================= */
.home-body {
  display: grid;
  place-items: center;
  padding: 40px 24px 60px;
  background: #000000;
}

.license-image-wrap {
  position: relative;
  width: min(1040px, 94vw);
  perspective: 1000px;
  margin-top: 28px;
  margin-bottom: 40px;
}

.license-image-wrap::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -32px;
  height: 50px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.75), transparent 70%);
  filter: blur(18px);
  opacity: 1;
  transform: translateY(0) scaleX(0.92);
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}

.license-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.35s ease;
}

.license-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.15), transparent 45%, rgba(255, 255, 255, 0.1));
  opacity: 0;
  transform: translateX(-12%);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.license-image-wrap {
  transition: transform 0.35s ease;
  transform-style: preserve-3d;
}

.license-image-wrap:hover {
  transform: rotateX(6deg) rotateY(-6deg);
}

.license-image-wrap:hover .license-image {
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.55);
}

.license-image-wrap:hover::before {
  opacity: 1;
  transform: translateY(16px) scaleX(0.82);
}

.license-image-wrap:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.license-menu-inline {
  position: absolute;
  top: 72%;
  left: 6%;
  display: grid;
  gap: clamp(6px, 0.7vw, 10px);
  font-size: clamp(12px, 1.6vw, 18px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  padding: 0;
  z-index: 2;
}

.license-menu-inline a {
  color: #ffffff;
  text-decoration: none;
  font-style: normal;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  padding-bottom: 4px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  display: inline-block;
  width: 80%;
}

.license-menu-inline a:hover {
  font-style: italic;
}

/* =========================
   SPRNGFIELD PORTAL
========================= */
.portal-body {
  background: #000000;
  display: grid;
  place-items: center;
  padding: 20px 20px 60px;
}

.portal-wrap {
  position: relative;
  width: min(1200px, 94vw);
  margin: 0 auto;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

.portal-item {
  position: relative;
}

.portal-image {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform 0.25s ease;
}

.portal-image-small {
  width: 75%;
  margin: 0 auto;
}

.portal-item:hover .portal-image {
  transform: scale(1.05);
}

.portal-link {
  position: absolute;
  inset: 0;
  text-indent: -9999px;
}

.portal-button {
  position: absolute;
  right: 6%;
  bottom: 6%;
  color: #f3d154;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  text-decoration: underline;
  font-size: 21px;
}

.video-body {
  background: #000000;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-wrap {
  width: min(1100px, 92vw);
}

.video-player {
  width: 100%;
  height: auto;
  display: block;
}

.stills-image {
  width: min(1100px, 92vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.book-viewer {
  position: relative;
  width: min(550px, 92vw);
  margin: 0 auto;
}

.book-image {
  width: 100%;
  height: auto;
  display: block;
}

.zoom-container {
  overflow: hidden;
}

.zoomable-image {
  transform: scale(1);
  transition: transform 0.2s ease;
  cursor: zoom-in;
}

.zoomable-image.is-zoomed {
  transform: scale(2.2);
  cursor: zoom-out;
}

.book-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 16px auto 0;
}

.book-button {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 8px 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.license-card {
  position: relative;
  width: min(1040px, 94vw);
  min-height: 520px;
  padding: 26px 28px 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.9)),
    repeating-linear-gradient(0deg, rgba(120, 160, 200, 0.18), rgba(120, 160, 200, 0.18) 1px, transparent 1px, transparent 3px),
    linear-gradient(120deg, rgba(160, 210, 235, 0.5), rgba(230, 245, 255, 0.12)),
    #e3f0f8;
  color: #0f0f0f;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.license-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 45%, rgba(90, 140, 190, 0.35), transparent 45%),
    radial-gradient(circle at 72% 48%, rgba(90, 140, 190, 0.18), transparent 48%),
    repeating-linear-gradient(45deg, rgba(70, 130, 170, 0.12), rgba(70, 130, 170, 0.12) 1px, transparent 1px, transparent 6px);
  opacity: 0.35;
  pointer-events: none;
}

.license-card .license-watermark {
  position: absolute;
  right: 70px;
  top: 90px;
  width: 380px;
  height: 280px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 260'%3E%3Cpath d='M50 210h260' stroke='%234a79a6' stroke-opacity='0.45' stroke-width='2' fill='none'/%3E%3Cpath d='M80 210c10-70 50-110 100-120 50 10 90 50 100 120' fill='none' stroke='%234a79a6' stroke-opacity='0.45' stroke-width='3'/%3E%3Ccircle cx='180' cy='82' r='18' fill='none' stroke='%234a79a6' stroke-opacity='0.45' stroke-width='3'/%3E%3Cpath d='M120 210v-40h120v40' fill='none' stroke='%234a79a6' stroke-opacity='0.45' stroke-width='2'/%3E%3Cpath d='M110 170h140' stroke='%234a79a6' stroke-opacity='0.45' stroke-width='2'/%3E%3Cpath d='M140 210v-60M180 210v-70M220 210v-60' stroke='%234a79a6' stroke-opacity='0.45' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.4;
  pointer-events: none;
}

.license-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(20, 60, 90, 0.2);
  border-radius: 10px;
  pointer-events: none;
}

.license-star {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 34px;
  height: 34px;
  background:
    radial-gradient(circle, #f4c54a 55%, transparent 57%),
    conic-gradient(from 0deg, #f4c54a 0 36deg, transparent 36deg 72deg, #f4c54a 72deg 108deg, transparent 108deg 144deg, #f4c54a 144deg 180deg, transparent 180deg 216deg, #f4c54a 216deg 252deg, transparent 252deg 288deg, #f4c54a 288deg 324deg, transparent 324deg 360deg);
  mask: radial-gradient(circle at 50% 50%, #000 40%, transparent 42%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.license-seal {
  position: absolute;
  top: 56px;
  left: 220px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(0, 90, 140, 0.6);
  background:
    conic-gradient(#f3d152 0 90deg, #e94e4e 90deg 180deg, #6cb7e1 180deg 270deg, #f3d152 270deg 360deg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.license-emboss {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 160px;
  height: 110px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.1)),
    linear-gradient(0deg, rgba(0, 140, 80, 0.12), rgba(0, 140, 80, 0.06));
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.7),
    inset -1px -1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.75;
}

.license-emboss::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cpath d='M18 120 C40 80, 60 70, 80 78 C96 84, 110 70, 124 56 C140 38, 168 34, 192 46 C212 58, 220 78, 214 98 C206 120, 176 130, 150 122 C140 118, 132 110, 120 106 C96 98, 70 108, 52 122' fill='none' stroke='%23111111' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: blur(0.3px);
  opacity: 0.35;
  box-shadow:
    1px 1px 1px rgba(255, 255, 255, 0.7),
    -1px -1px 1px rgba(0, 0, 0, 0.3);
}

.license-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  text-transform: uppercase;
  margin: 2px 0 8px 66px;
}

.license-label {
  font-size: 14px;
  letter-spacing: 0.2em;
  opacity: 0.8;
  justify-self: start;
  color: #2d2d2d;
}

.license-title {
  font-size: 58px;
  letter-spacing: 0.16em;
  margin: 0;
  color: #a53947;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(0, 0, 0, 0.08);
  transform: scaleX(1.04);
}

.license-badge {
  font-size: 12px;
  letter-spacing: 0.18em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 6px 10px;
  border-radius: 999px;
  opacity: 0.7;
}

.license-badge::after {
  content: "EXP 09-04-2027";
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-top: 6px;
}

.license-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  margin-top: 8px;
}

.license-photo {
  height: 280px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02)),
    linear-gradient(90deg, rgba(10, 120, 170, 0.25), rgba(10, 120, 170, 0.18));
  display: grid;
  place-items: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

.license-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.license-data {
  display: grid;
  gap: 10px;
  font-size: 13px;
}

.license-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.field-label {
  color: #2f78b2;
  font-weight: 700;
}

.field-value {
  color: #111;
  font-weight: 700;
}

.license-name {
  display: grid;
  gap: 4px;
  font-size: 24px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.license-menu {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
}

.license-menu a {
  color: #0f0f0f;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 6px;
  font-style: normal;
}

.license-menu a:hover {
  font-style: italic;
}

.license-footer {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.license-signature {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 32px;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.9;
}

.license-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background:
    repeating-linear-gradient(90deg, rgba(60, 120, 160, 0.25), rgba(60, 120, 160, 0.25) 8px, transparent 8px, transparent 14px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.04));
  opacity: 0.7;
}

@media (max-width: 860px) {
  .license-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .license-body {
    grid-template-columns: 1fr;
  }

  .license-photo {
    height: 220px;
  }
}

/* Optional different vibes */
.SPRNGFIELD-page { background: #000000; color: #ffffff; }
.painting-page { background: #000000; color: #ffffff; }
.writing-page { background: #000000; color: #ffffff; font-style: italic; }
.sound-page { background: #000000; color: #ffffff; font-family: monospace; }

/* Headings baseline */
.page-content h1 {
  font-size: 44px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.page-content p { line-height: 1.6; opacity: 0.92; }

/* =========================
   PROJECT PAGE (SPRNGFIELD)
   recommended structure uses:
   .project-header .project-title .project-sub
   .project-section .section-title
========================= */
.page {
  padding: 34px 28px 140px;
}

.project-header {
  max-width: 1100px;
  margin: 0 auto 26px;
}

.project-title {
  font-size: clamp(36px, 5.5vw, 62px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sprngfield-title-link {
  display: inline-block;
}

.sprngfield-title-image {
  width: min(520px, 80vw);
  height: auto;
  display: block;
}

.project-sub {
  opacity: 0.8;
  margin-bottom: 10px;
}

.project-section {
  max-width: 1100px;
  margin: 0 auto 70px;
}

.section-title {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 16px;
}

.section-title-lg {
  font-size: 22px;
  letter-spacing: 0.18em;
}

.sprngfield-home-button {
  display: block;
  width: fit-content;
  margin: 0 auto 40px;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 12px 21px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 18px;
}

/* =========================
   FILE CABINET (LORE)
========================= */
.cabinet-body {
  background: #0a0a0a;
  color: #f2f2f2;
  display: grid;
  place-items: center;
  padding: 40px 20px 80px;
}

.cabinet-wrap {
  width: min(780px, 92vw);
}

.cabinet-header {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  margin-bottom: 18px;
}

.file-cabinet {
  position: relative;
  background: #f4f1e8;
  color: #121212;
  padding: 26px 22px 36px;
  border-radius: 6px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.file-cabinet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02) 1px, transparent 1px, transparent 3px);
  opacity: 0.6;
  pointer-events: none;
}

.file-tab {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 8px solid #111;
  text-decoration: none;
  color: inherit;
  margin-bottom: 14px;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.file-tab:last-child { margin-bottom: 0; }

.file-date {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.file-title {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.file-sheet {
  position: absolute;
  right: 18px;
  top: -10px;
  width: 120px;
  height: 80px;
  background: #faf7ef;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
  transform: translateY(8px) rotate(-1deg);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.file-tab:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.file-tab:hover .file-sheet {
  opacity: 1;
  transform: translateY(0) rotate(-1deg);
}

.cabinet-base {
  height: 10px;
  background: #d8d2c6;
  border-radius: 0 0 6px 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 0;
  margin: 0 10px;
}

/* =========================
   CRT VIDEO EMBED
   uses: .crt-tv and iframe inside it
   IMPORTANT: set your CRT image path here
========================= */
.crt-tv {
  position: relative;
  width: min(92vw, 1100px);
  margin: 0 auto;

  /* Keeps consistent scaling */
  aspect-ratio: 4 / 3;

  --screen-top: 22%;
  --screen-left: 35%;
  --screen-width: 33%;
  --screen-height: 34%;

  background-image: url('images/crt.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* YouTube video fitted into the CRT screen */
.crt-tv iframe {
  position: absolute;

  top: var(--screen-top);
  left: var(--screen-left);
  width: var(--screen-width);
  height: var(--screen-height);

  border: 0;

  transform: rotate(-0.2deg);
  transform-origin: center center;
  border-radius: 6px;
  z-index: 1;
}


/* =========================
   SPRNGFIELD PAINTINGS GRID
========================= */
.sprngfield-grid {
  max-width: 1100px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sprngfield-item {
  margin: 0;
}

.sprngfield-item img {
  width: 100%;
  height: auto;
  display: block;
}

.zoomable {
  cursor: zoom-in;
}

/* Responsive */
@media (max-width: 900px) {
  .page-content h1 { font-size: 34px; }
}

/* Home page image */
.testimonial {
  width: 100%;
  max-width: 1100px;
  display: block;
  margin: 40px auto;
  filter: contrast(1.05);
}

/* Writing index / blog list */
.writing-list {
  list-style: none;
  max-width: 900px;
  margin-top: 40px;
}

.writing-list li {
  margin-bottom: 28px;
}

.writing-list a {
  font-size: 22px;
  text-decoration: none;
  display: inline-block;
}

.writing-list a:hover {
  font-style: italic;
}

.writing-meta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.7;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.88);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-img {
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  width: auto;
  height: auto;
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.55);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  padding: 8px 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  cursor: pointer;
}

/* Blog scroll section */
.blog-section {
  max-width: none;
  margin: 50px auto 0;
  text-align: center;
}

.blog-title {
  font-size: 54px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-align: center;
}

.blog-stage {
  width: min(1960px, 98vw);
  margin: 0 auto;
}

.blog-scroll {
  max-height: 1040px;
  overflow-y: auto;
  padding: 72px 96px 90px;
}

.blog-reel p {
  margin-bottom: 14px;
  line-height: 1.6;
}

.blog-reel p:last-child {
  margin-bottom: 0;
}

.blog-date {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
  text-align: center;
}

.blog-day {
  margin-bottom: 26px;
}

.blog-day:last-child {
  margin-bottom: 0;
}

.blog-day-title {
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
}

/* Long-form writing */
.writing-essay {
  max-width: 70ch;
}

.writing-essay p {
  margin-bottom: 1.4em;
  line-height: 1.65;
}

.essay-meta {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 30px;
}

.writing-body {
  background: #0f0f0f;   
  color: #f2f2f2;
}

/* =========================
   ANNOTATED SCRIPT SHEET
========================= */
.annotated-sheet {
  position: relative;
  max-width: 720px;
  margin: 44px auto 54px;
  padding: 56px 52px 70px;
  border-radius: 6px;
  border: 1px solid rgba(60, 50, 40, 0.25);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 12% 16%, rgba(255, 247, 225, 0.7), transparent 45%),
    radial-gradient(circle at 82% 88%, rgba(230, 214, 180, 0.45), transparent 50%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 3px);
  background-color: #f5efe3;
  color: #2d2b28;
  font-family: "Courier New", Courier, monospace;
  line-height: 1.35;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.paper-stage {
  position: relative;
  width: min(720px, 100%);
  margin: 44px auto 54px;
}

.paper-stage .annotated-sheet {
  width: 100%;
  margin: 0;
}

.page-turn {
  position: absolute;
  right: -72px;
  bottom: 18px;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: #000000;
  border: 1px solid #000000;
  border-radius: 4px;
  box-shadow: none;
}

.page-turn.prev {
  left: -72px;
  right: auto;
}

.page-turn:focus-visible {
  outline: 2px solid rgba(45, 43, 40, 0.7);
  outline-offset: 4px;
}

/* Full-page turn animation */
.page-turn-forward .paper-stage,
.page-turn-back .paper-stage {
  transform-style: preserve-3d;
}

.page-turn-forward .paper-stage {
  transform-origin: left center;
  animation: page-turn-forward 0.9s ease;
}

.page-turn-back .paper-stage {
  transform-origin: right center;
  animation: page-turn-back 0.9s ease;
}

.page-turn-forward .paper-stage::after,
.page-turn-back .paper-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 45%);
  opacity: 0;
  animation: page-shadow 0.9s ease;
}

.page-turn-forward .paper-stage::before,
.page-turn-back .paper-stage::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  bottom: -10px;
  right: -10px;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2) 55%, transparent 70%),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.2), transparent 60%);
  border-top-left-radius: 140px;
  opacity: 0;
  transform-origin: right bottom;
  transform: rotate(0deg) scale(0.6);
  animation: page-curl 0.9s ease;
}

.page-turn-back .paper-stage::before {
  left: -10px;
  right: auto;
  transform-origin: left bottom;
  border-top-left-radius: 0;
  border-top-right-radius: 140px;
}

@keyframes page-turn-forward {
  0% { transform: perspective(1600px) rotateY(14deg) translateX(14px); }
  50% { transform: perspective(1600px) rotateY(-6deg) translateX(-6px); }
  100% { transform: perspective(1600px) rotateY(0deg) translateX(0); }
}

@keyframes page-turn-back {
  0% { transform: perspective(1600px) rotateY(-14deg) translateX(-14px); }
  50% { transform: perspective(1600px) rotateY(6deg) translateX(6px); }
  100% { transform: perspective(1600px) rotateY(0deg) translateX(0); }
}

@keyframes page-shadow {
  0% { opacity: 0.45; }
  100% { opacity: 0; }
}

@keyframes page-curl {
  0% { opacity: 0.65; transform: rotate(-12deg) scale(0.65); }
  50% { opacity: 0.35; transform: rotate(-4deg) scale(0.85); }
  100% { opacity: 0; transform: rotate(0deg) scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .page-turn-forward .paper-stage,
  .page-turn-back .paper-stage,
  .page-turn-forward .paper-stage::after,
  .page-turn-back .paper-stage::after,
  .page-turn-forward .paper-stage::before,
  .page-turn-back .paper-stage::before {
    animation: none;
  }
}

.annotated-sheet::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(45, 43, 40, 0.12);
  pointer-events: none;
}

.annotated-sheet p {
  font-size: 14px;
  margin-bottom: 12px;
}

.sheet-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sheet-header .scene-num {
  border-bottom: 2px solid rgba(45, 43, 40, 0.7);
  padding-bottom: 2px;
}

.sheet-divider {
  margin: 24px 0 18px;
  border-top: 2px solid rgba(45, 43, 40, 0.25);
}

.annotated-sheet .mark {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.annotated-sheet .mark-1 {
  top: 78px;
  left: 118px;
  width: 140px;
  height: 36px;
  border: 3px solid rgba(245, 208, 64, 0.7);
  border-radius: 999px;
  transform: rotate(-3deg);
}

.annotated-sheet .mark-2 {
  top: 148px;
  left: 60px;
  width: 220px;
  height: 6px;
  background: rgba(80, 185, 92, 0.6);
  border-radius: 999px;
  transform: rotate(-1deg);
}

.annotated-sheet .mark-3 {
  top: 122px;
  right: 40px;
  width: 180px;
  height: 4px;
  background: rgba(66, 120, 255, 0.6);
  border-radius: 999px;
  transform: rotate(-12deg);
}

.annotated-sheet .mark-3::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-right: 3px solid rgba(66, 120, 255, 0.6);
  border-top: 3px solid rgba(66, 120, 255, 0.6);
  transform: rotate(45deg);
}

.annotated-sheet .mark-4 {
  top: 244px;
  left: 230px;
  width: 96px;
  height: 30px;
  border: 3px solid rgba(140, 122, 255, 0.6);
  border-radius: 999px;
  transform: rotate(2deg);
}

.annotated-sheet .mark-5 {
  top: 320px;
  right: 72px;
  width: 220px;
  height: 6px;
  background: rgba(255, 68, 85, 0.6);
  border-radius: 999px;
  transform: rotate(2deg);
}

.annotated-sheet .mark-6 {
  top: 420px;
  left: 70px;
  width: 140px;
  height: 6px;
  background: rgba(50, 190, 150, 0.6);
  border-radius: 999px;
  transform: rotate(-2deg);
}

.annotated-sheet .mark-7 {
  top: 458px;
  right: 118px;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(245, 208, 64, 0.7);
  border-radius: 50%;
  transform: rotate(6deg);
}

.annotated-sheet .mark-8 {
  top: 512px;
  right: 50px;
  width: 48px;
  height: 48px;
}

.annotated-sheet .mark-8::before,
.annotated-sheet .mark-8::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 56px;
  height: 3px;
  background: rgba(80, 80, 80, 0.55);
}

.annotated-sheet .mark-8::before { transform: rotate(35deg); }
.annotated-sheet .mark-8::after { transform: rotate(-35deg); }

@media (max-width: 700px) {
  .annotated-sheet {
    padding: 40px 30px 54px;
  }
}

/* Centered writing layout */
.writing-layout {
  display: block;
  padding: 34px 28px 80px;
}

/* Center the paper within the page */
.writing-essay {
  max-width: 900px;
  margin: 0 auto;
}

/* Right column (deprecated) */
.writing-margin { display: none; }