/* Hybrid (from Concept C) — post: an illuminated manuscript reading view */
.sg-wrap-p { max-width: 900px; margin: 0 auto; padding: 22px var(--sg-gutter) 60px; }
.sg-crumbs-p { display: flex; gap: 10px; font: 600 12px/1 var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 16px; }
.sg-crumbs-p a { color: var(--gold-dim); text-decoration: none; }
.sg-crumbs-p span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-ms { position: relative; padding: clamp(28px, 6vw, 70px) clamp(20px, 7vw, 84px) clamp(30px, 5vw, 60px); color: #3c2f1e; border-radius: 6px; background: #f3e6cd url('assets/parchment-clean.png') center / cover; box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 0 80px rgba(120,80,30,.35); }
.sg-ms::before { content: ''; position: absolute; inset: 14px; border: 2px solid rgba(168,135,43,.55); border-radius: 4px; pointer-events: none; box-shadow: inset 0 0 0 4px rgba(243,230,205,.6), inset 0 0 0 5px rgba(138,28,34,.25); }
.sg-ms-h { text-align: center; position: relative; }
.sg-ms-meta { font: 600 11px/1 var(--font-heading); letter-spacing: .24em; text-transform: uppercase; color: #8a6420; }
.sg-ms h1 { margin: 14px 0 10px; font: 700 clamp(28px, 4vw, 46px)/1.12 var(--font-heading); color: #2b2014; letter-spacing: .02em; }
.sg-ms-rule { display: flex; align-items: center; gap: 12px; color: #8a1c22; margin: 8px auto 26px; max-width: 360px; }
.sg-ms-rule::before, .sg-ms-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(168,135,43,.8), transparent); }
.sg-ms-body { position: relative; font: 400 20px/1.7 var(--font-lore); color: #33281a; }
.sg-ms-body > p:first-child::first-letter { float: left; font: 900 76px/.8 var(--font-display); color: #8a1c22; margin: 8px 12px 0 0; padding: 10px 12px 6px; border-radius: 6px; background: radial-gradient(circle at 40% 35%, #fff4d6, #ecd394 60%, #c9a54a); border: 2px solid #8a6420; box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), 0 4px 10px rgba(90,60,20,.35); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.sg-ms-body h2 { margin: 34px 0 10px; font: 700 24px/1.25 var(--font-heading); color: #4a3418; letter-spacing: .03em; display: flex; align-items: center; gap: 10px; }
.sg-ms-body h2::before { content: '❧'; color: #8a1c22; font-size: 22px; }
.sg-ms-body h3 { margin: 24px 0 8px; font: 700 19px/1.3 var(--font-heading); color: #4a3418; }
.sg-ms-body p { margin: 0 0 16px; }
.sg-ms-body ul, .sg-ms-body ol { margin: 0 0 18px; padding-left: 26px; }
.sg-ms-body li { margin-bottom: 6px; }
.sg-ms-body li::marker { color: #8a1c22; }
.sg-ms-body strong { color: #2b2014; }
.sg-ms-body a { color: #8a1c22; text-decoration-color: rgba(138,28,34,.4); text-underline-offset: 3px; }
.sg-ms-body blockquote { margin: 18px 0; padding: 6px 0 6px 18px; border-left: 3px solid #8a1c22; font-style: italic; }
.sg-ms-body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 17px; }
.sg-ms-body th, .sg-ms-body td { border-bottom: 1px solid rgba(90,60,20,.25); padding: 8px 10px; text-align: left; vertical-align: top; }
.sg-ms-body th { font: 700 13px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: #6b5232; }
.sg-ms-body hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(168,135,43,.8), transparent); margin: 28px 0; }
.sg-ms-foot { margin-top: 20px; text-align: center; }
.sg-ms-foot .sg-todo { color: #8a6a4a; }
.sg-after { margin-top: 34px; display: grid; gap: 18px; }
.sg-after-card { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; padding: 24px; border-radius: 18px; background: var(--panel); border: 1px solid var(--gold-hair); }
.sg-after-card img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(255,120,30,.45)); }
.sg-after-card .sg-p { margin: 0 0 14px; }
.sg-more { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sg-more a { display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--gold-faint); background: var(--panel); text-decoration: none; color: var(--cream); transition: border-color .2s, transform .25s var(--ease-spring); }
.sg-more a:hover { border-color: var(--gold-hair); transform: translateY(-2px); }
.sg-more small { font: 600 10.5px/1 var(--font-heading); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); }
.sg-more b { font: 700 16px/1.3 var(--font-heading); }
.sg-more a.next { text-align: right; }

/* the candle burns down as you read */
.sg-candle { position: fixed; left: max(16px, calc(50% - 560px)); bottom: 40px; z-index: 10; width: 30px; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; }
.sg-wax { width: 22px; height: 150px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #e8d9b8, #fff4dc 40%, #d8c49a); box-shadow: inset -3px 0 6px rgba(0,0,0,.15); transition: height .2s linear; }
.sg-flame { width: 12px; height: 22px; margin-bottom: 2px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 70%, #fff7d1, #ffcf5a 40%, #ff7a2f 70%, transparent 72%); filter: drop-shadow(0 0 10px rgba(255,170,60,.9)); animation: sg-flick .18s ease-in-out infinite alternate; }
@keyframes sg-flick { to { transform: scale(1.06, .94) rotate(2deg); } }
.sg-dish { width: 40px; height: 8px; border-radius: 50%; background: linear-gradient(#8a6a3e, #4a3418); }
.sg-candle.out .sg-flame { opacity: 0; transition: opacity .6s; }
@media (max-width: 1240px) { .sg-candle { display: none; } }
@media (max-width: 600px) { .sg-after-card { grid-template-columns: 1fr; text-align: center; justify-items: center; } .sg-more { grid-template-columns: 1fr; } .sg-ms-body { font-size: 18px; } .sg-ms-body table { display: block; overflow-x: auto; } }
@media (prefers-reduced-motion: reduce) { .sg-flame { animation: none; } }