:root{
  --dk-bg:#070708;
  --dk-panel:#0b0b0d;
  --dk-line:rgba(255,255,255,.08);
  --dk-line-soft:rgba(255,255,255,.045);
  --dk-text:#d8d4ca;
  --dk-muted:#7c776d;
  --dk-faint:#555149;
  --dk-gold:#d8aa3c;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body.dk-tu-su-manuscript{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.045), transparent 34%),
    linear-gradient(180deg, #0b0b0c 0%, var(--dk-bg) 38%, #050506 100%);
  color:var(--dk-text);
  font-family:"Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing:.015em;
}

.dk-story-logo{
  position:fixed;
  left:20px;
  top:9px;
  z-index:18;
  display:flex;
  align-items:center;
  gap:10px;
  color:#e7c86b;
  text-decoration:none;
  font-family:Georgia, "Times New Roman", serif;
  font-weight:800;
  letter-spacing:.16em;
  text-shadow:0 0 18px rgba(216,170,60,.22);
}

.dk-story-logo img{
  width:72px;
  height:72px;
  object-fit:contain;
}

.dk-story-logo span{
  font-size:14px;
}

.dk-story-shell{
  width:min(1180px, calc(100vw - 112px));
  margin:0 auto;
  padding:92px 0 72px;
}

.dk-story-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 58px;
  padding-bottom:18px;
  border-bottom:1px solid var(--dk-line-soft);
  color:#ded8cc;
  font-size:12px;
  letter-spacing:.19em;
  text-transform:uppercase;
}

.dk-story-kicker small{
  color:var(--dk-muted);
  font-size:10px;
  font-style:italic;
  letter-spacing:.13em;
}

.dk-story-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.03fr) 430px;
  gap:72px;
  align-items:start;
}

.dk-story-meta{
  margin:0 0 24px;
  color:var(--dk-faint);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.dk-story-title{
  margin:0 0 28px;
  color:#f4f0e7;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(38px, 5vw, 72px);
  line-height:.92;
  letter-spacing:-.045em;
  text-transform:uppercase;
}

.dk-story-subtitle{
  max-width:560px;
  margin:0 0 44px;
  color:#8b857a;
  font-size:12px;
  line-height:1.8;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.dk-story-prose{
  max-width:680px;
  color:#d1ccc1;
  font-size:15px;
  line-height:1.88;
}

.dk-story-prose p{
  margin:0 0 24px;
}


.dk-story-youtube{
  position:fixed;
  right:22px;
  top:22px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:8px;
  color:#a9a196;
  text-decoration:none;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.72;
  transition:opacity .2s ease, color .2s ease, transform .2s ease;
}

.dk-story-youtube:hover{
  color:#f1efe8;
  opacity:1;
  transform:translateY(-1px);
}

.dk-story-youtube svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.dk-chapter-block{
  margin:0 0 54px;
  padding-top:8px;
}

.dk-chapter-block + .dk-chapter-block{
  border-top:1px solid var(--dk-line-soft);
  padding-top:38px;
}

.dk-chapter-block h2{
  margin:0 0 26px;
  color:#8f887d;
  font-size:11px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.dk-chapter-block p:last-child{
  margin-bottom:0;
}

.dk-story-visual{
  position:sticky;
  top:92px;
  padding-top:74px;
}

.dk-story-plate{
  margin:0;
}

.dk-story-plate img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(255,255,255,.18);
  filter:grayscale(1) contrast(1.05) brightness(.93);
  opacity:.9;
}

.dk-story-plate figcaption{
  margin-top:28px;
  color:#4d4941;
  text-align:center;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.dk-story-ending{
  margin:52px 0 0;
  padding-top:28px;
  border-top:1px solid var(--dk-line-soft);
  color:#bfb7a8;
  font-family:Georgia, "Times New Roman", serif;
  font-size:18px;
  line-height:1.7;
  text-align:left;
}

.dk-story-ending strong{
  color:#e9d28a;
  font-weight:700;
  letter-spacing:.08em;
}

.dk-story-topline{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  z-index:10;
}

@media (max-width:980px){
  .dk-story-logo{
    position:absolute;
    left:18px;
    top:18px;
  }

  .dk-story-youtube{
    position:absolute;
    right:18px;
    top:22px;
  }

  .dk-story-shell{
    width:min(720px, calc(100vw - 36px));
    padding-top:86px;
  }

  .dk-story-kicker{
    margin-bottom:34px;
  }

  .dk-story-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .dk-story-visual{
    position:relative;
    top:auto;
    padding-top:0;
    max-width:420px;
  }

  .dk-story-prose{
    font-size:14px;
    line-height:1.82;
  }
}

@media (max-width:560px){
  .dk-story-logo span{
    font-size:12px;
  }

  .dk-story-youtube span{
    display:none;
  }

  .dk-story-shell{
    width:calc(100vw - 28px);
    padding-bottom:48px;
  }

  .dk-story-kicker{
    display:block;
    line-height:1.7;
  }

  .dk-story-kicker small{
    display:block;
    margin-top:4px;
  }

  .dk-story-title{
    font-size:42px;
  }

}