.reading.folio {
  --paper: #0a1026;
  --ink: #f3ecdc;
  --muted: #c9c3d6;
  --gold: #e8c77f;
  --gold-soft: #e8c77f55;
  --violet: #6f5bd6;
  --panel: rgba(18, 24, 56, 0.58);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 12% 6%, #e8c77f14, transparent 60%),
    radial-gradient(900px 900px at 92% 30%, #6f5bd61f, transparent 62%),
    radial-gradient(1000px 800px at 40% 92%, #2a3b8c26, transparent 65%),
    linear-gradient(180deg, #080e20 0%, #0b1130 38%, #0e0f2c 72%, #090c1f 100%);
  position: relative;
  isolation: isolate;
}


.reading.folio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 42%, #e8c77f88 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 58%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 76%, #fff5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 88%, #b9a7ff77 50%, transparent 51%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 900px 900px, 700px 700px, 1100px 1100px, 800px 800px, 1000px 1000px, 1200px 1200px, 180px 180px;
}


.folio-intro,
.folio-case { border-bottom: 0; position: relative; }
.folio-intro::after,
.folio-case::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 18%, #e8c77f99 50%, var(--gold-soft) 82%, transparent);
}


.folio-kicker { color: var(--gold); letter-spacing: 0.16em; }
.folio-kicker::before { content: "◆"; font-size: 0.8em; margin-right: 0.7em; color: var(--gold); opacity: 0.85; }


.folio-intro h2,
.folio-case h3 {
  background: linear-gradient(180deg, #fff6df 0%, #f3dca8 55%, #d9b066 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
  word-break: keep-all;
  text-shadow: 0 0 40px #e8c77f18;
}
.folio-intro > p:not(.folio-kicker),
.folio-lead { color: var(--muted); word-break: keep-all; }
.folio-kicker, .folio-slide figcaption strong { word-break: keep-all; }


.folio-case {
  padding: 56px 44px 60px;
  margin: 44px 0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(24, 31, 72, 0.62), rgba(12, 16, 40, 0.5));
  box-shadow: inset 0 0 0 1px #e8c77f2e, inset 0 1px 0 #ffffff14, 0 30px 80px -40px #000c;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.folio-case::after { display: none; }

.folio-case::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border-radius: 18px;
  background:
    linear-gradient(90deg, var(--gold), transparent) top left / 26px 1.5px no-repeat,
    linear-gradient(180deg, var(--gold), transparent) top left / 1.5px 26px no-repeat,
    linear-gradient(270deg, var(--gold), transparent) bottom right / 26px 1.5px no-repeat,
    linear-gradient(0deg, var(--gold), transparent) bottom right / 1.5px 26px no-repeat;
  opacity: 0.55;
}


.folio-image {
  background:
    radial-gradient(70% 60% at 50% 38%, #2b2f64 0%, #141836 55%, #0a0d20 100%);
  border: 1px solid #e8c77f33;
  border-radius: 16px;
  box-shadow: inset 0 0 60px #000a, 0 18px 50px -30px #000;
}
.folio-image > img,
.folio-crop { border-radius: 8px; box-shadow: 0 14px 40px -12px #000d; }


.folio-slide figcaption { color: #c9c3d6; }
.folio-slide figcaption strong { color: #fff1d2; }
.folio-slide figcaption p { color: #bdb7cc; }
.folio-slide figcaption > a { color: var(--gold); border-bottom-color: var(--gold-soft); }


.folio-navigation nav a {
  color: #cfc9dc;
  border-left: 0;
  border-radius: 12px;
  padding: 8px 10px;
  transition: background 0.25s ease, color 0.25s ease;
}
.folio-navigation nav a span {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  font-size: 11px;
  color: #0a1026;
  background: linear-gradient(180deg, #f6dea4, #c99b4f);
  box-shadow: 0 0 0 1px #fff3, 0 4px 10px -4px #000;
}
.folio-navigation nav a:hover { background: #ffffff0d; color: #fff; }
.folio-navigation nav a[aria-current=location] {
  color: #fff4dc;
  background: linear-gradient(90deg, #e8c77f26, transparent);
  box-shadow: inset 2px 0 0 var(--gold);
}
.folio-navigation nav a[aria-current=location] span { box-shadow: 0 0 0 2px #fff6, 0 0 18px #e8c77fbb; }
.folio-progress { background: #ffffff1a; border-radius: 2px; }
.folio-progress > span { background: linear-gradient(90deg, #c99b4f, #f6dea4); }


.folio-context h4 { color: var(--gold); }
.folio-context p, .folio-decision > p { color: #cdc7da; }
.folio-decision, .folio-archive { border-top: 1px solid #e8c77f26; }
.folio-decision > summary, .folio-archive > summary { color: #f1e6cf; }


.folio-gallery-controls button { border-color: #e8c77f66; color: var(--gold); background: #0a102699; }
.folio-gallery-controls button:hover:not(:disabled) { background: linear-gradient(180deg, #f6dea4, #c99b4f); color: #0a1026; }


.portfolio-reading-active .top {
  background: linear-gradient(180deg, #080e20f7, #0a1026f2);
  border-bottom: 1px solid #e8c77f2b;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

@media (max-width: 800px), (max-height: 600px) {
  .folio-case { padding: 36px 18px 40px; margin: 26px -2vw; border-radius: 18px; }
  .folio-case::before { inset: 5px; }
  .folio-navigation { background: linear-gradient(180deg, #080e20fb, #0a1026f5); border-bottom: 1px solid #e8c77f2b; }
  
  .folio-navigation nav a { border-radius: 10px; flex: none; }
  .folio-navigation nav a span { width: 22px; height: 22px; font-size: 9px; }
  .folio-navigation nav a[aria-current=location] { box-shadow: inset 0 -2px 0 var(--gold); background: #e8c77f14; }
  .folio-image { border-radius: 12px; }
}


@media (max-width: 359px) {
  .folio-intro > p:not(.folio-kicker), .folio-lead { word-break: normal; line-break: strict; }
}

@media (max-width: 380px) {
  body.works-page .folio-case-heading h2 { font-size: min(28px, calc((100vw - 66px) / 11.05)); }
  .folio-case h3,
  .folio-archive .case h3,
  .folio-archive .selected-work h3 { font-size: min(6.8vw, calc((100vw - 66px) / 12.05)); }
}

@media (prefers-reduced-motion: reduce) {
  .folio-navigation nav a { transition: none; }
}


@media (max-width: 380px) {
  .folio-case h3,
  .folio-archive .case h3,
  .folio-archive .selected-work h3 { font-size: 6.8vw; }
}


#reading h4 { word-break: keep-all; overflow-wrap: anywhere; }