/* =============================================================
   Şahit — cover + poem pages. Rides on tokens-sahit.css + fonts.css.
   ============================================================= */
html { background: var(--cream); }
body { margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--sepia); }

/* ---- Cover ---------------------------------------------------- */
.sc-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; box-sizing: border-box; }
.sc { position: relative; width: 680px; max-width: 100%; aspect-ratio: 680 / 904;
  background: radial-gradient(120% 80% at 50% 8%, #FFFDF8 0%, var(--cream) 46%, var(--cream-2) 100%);
  box-shadow: 0 26px 70px rgba(70,63,54,.20); border-radius: 2px; }
.sc-frame { position: absolute; inset: 26px; border: 1px solid var(--line); pointer-events: none; }
.sc-frame::after { content: ""; position: absolute; inset: 6px; border: .6px solid var(--rule-soft); }
.sc-inner { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 8% 11%; box-sizing: border-box; text-align: center; }
.sc-kicker { font-family: var(--font-sans); font-size: 11px; letter-spacing: .42em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6%; }
.sc-emblem { width: 31%; margin-bottom: 2%; }
.sc-emblem svg { width: 100%; height: auto; display: block; }
.sc-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(64px, 17vw, 118px);
  line-height: .9; color: var(--amber); margin: 3% 0 0; }
.sc-rule { width: 66px; height: 1px; background: var(--amber); opacity: .75; margin: 26px 0 22px; }
.sc-epigraph { font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(20px, 3.9vw, 26px); line-height: 1.5; color: var(--sepia); margin: 0; }
.sc-foot { position: absolute; left: 0; right: 0; bottom: 8.8%; display: flex;
  flex-direction: column; align-items: center; gap: 12px; }
.sc-sub { font-family: var(--font-sans); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ink-soft); }
.sc-author { font-family: var(--font-script); font-size: 40px; color: var(--ink); }
.sc-enter { position: absolute; right: 8%; bottom: 8.8%; font-family: var(--font-sans);
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--amber-deep);
  text-decoration: none; }
.sc-enter:hover { color: var(--ink); }
@media (max-width: 560px) { .sc-enter { display: none; } }

/* ---- Poem page ------------------------------------------------ */
.sp-top { position: sticky; top: 0; display: flex; justify-content: center; gap: 30px;
  padding: 20px 0; background: linear-gradient(var(--cream), rgba(250,244,233,0)); z-index: 5; }
.sp-top a { font-family: var(--font-sans); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.sp-top a:hover { color: var(--amber-deep); }
.sp-sheet { max-width: 620px; margin: 0 auto; padding: 30px 28px 110px; text-align: center; }
.sp-motif { width: 58px; margin: 10px auto 30px; display: block; opacity: .95; }
.sp-title { font-family: var(--font-display); font-weight: 600; font-size: 46px;
  color: var(--amber); margin: 0 0 6px; }
.sp-credit { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 44px; }
.sp-stanza { font-family: var(--font-body); font-size: 18px; line-height: 1.95;
  color: var(--verse-color); margin: 0 0 34px; }
.sp-sep { width: 6px; height: 6px; background: var(--amber); opacity: .6;
  transform: rotate(45deg); margin: 34px auto; }
.sp-end { margin-top: 56px; }
.sp-end img { width: 54px; opacity: .9; }   /* the Kuzgun raven — signature seal */
.sp-back { display: block; margin-top: 40px; font-family: var(--font-sans); font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--amber-deep); text-decoration: none; }
.sp-back:hover { color: var(--ink); }

/* ---- Contents (İçindekiler) ----------------------------------- */
.st-wrap { max-width: 660px; margin: 0 auto; padding: 20px 28px 110px; text-align: center; }
.st-emblem { width: 108px; margin: 6px auto 20px; display: block; }
.st-h { font-family: var(--font-display); font-weight: 600; font-size: 44px; color: var(--amber); margin: 0 0 8px; }
.st-note { font-family: var(--font-body); font-style: italic; font-size: 15px; line-height: 1.6;
  color: var(--sepia); margin: 0 0 44px; }
.st-note span { color: var(--ink-soft); font-size: 13px; }
.st-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.st-row { display: flex; gap: 20px; padding: 20px 4px; border-top: 1px solid var(--line); }
.st-row:last-child { border-bottom: 1px solid var(--line); }
.st-no { font-family: var(--font-sans); font-size: 12px; letter-spacing: .1em; color: var(--amber);
  padding-top: 6px; min-width: 26px; }
.st-main { flex: 1; }
.st-title { font-family: var(--font-display); font-weight: 600; font-size: 25px; color: var(--ink);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.st-title a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--amber); }
.st-title a:hover { color: var(--amber-deep); }
.st-en { font-family: var(--font-serif-2); font-style: italic; font-size: 15px; color: var(--sepia);
  font-weight: 400; }
.st-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--verse-color);
  margin-top: 5px; max-width: 52ch; }
.st-soon { display: inline-block; margin-left: 2px; font-family: var(--font-sans); font-size: 8.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 20px; padding: 2px 8px; }
.st-row.is-soon .st-title { color: var(--ink-soft); }
.st-row.is-soon .st-no { color: var(--ink-soft); }

/* contents: section divider + bottom seal */
.st-break { list-style: none; border: 0 !important; padding: 16px 0 6px; display: block; }
.st-break img { width: 300px; max-width: 80%; display: block; margin: 0 auto; opacity: .9; }
.st-seal { text-align: center; margin-top: 40px; }
.st-seal img { width: 46px; opacity: .85; }

.st-break + .st-row { border-top: 0; }