/* Donut Times magazine cover (home) — the masthead is the brand; the cover story is Donutween */

body.dt-cover-body { overflow: auto !important; }
.dt-cover__back { position: fixed; inset: 0; z-index: 0; }
.dt-cover-wrap { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(12px, 3vh, 32px) 12px calc(env(safe-area-inset-bottom) + 12px); box-sizing: border-box; }

/* the cover: red frame, white masthead, dark story */
.dt-cover { position: relative; display: flex; flex-direction: column; width: min(92vw, calc((100svh - 70px) * 0.72), 680px); aspect-ratio: 3 / 4;
  background: #fff; border: clamp(8px, 1.6vw, 14px) solid #e3241b; border-radius: 4px; text-decoration: none; color: #111;
  box-shadow: 0 40px 90px rgba(0,0,0,.8), 0 0 0 1px #7a0d08; overflow: hidden; transform: rotate(-.6deg);
  transition: transform .4s ease, box-shadow .4s ease; }
.dt-cover:hover { transform: rotate(0deg) scale(1.015); box-shadow: 0 50px 100px rgba(0,0,0,.85), 0 0 60px rgba(227,36,27,.35); }

/* masthead — never changes */
.dt-masthead { position: relative; padding: clamp(10px, 2vw, 18px) clamp(12px, 2.6vw, 24px) clamp(8px, 1.6vw, 12px); text-align: center; background: #fff; border-bottom: 2px solid #111; }
.dt-masthead__issue { position: absolute; top: clamp(6px, 1.2vw, 10px); right: clamp(10px, 2vw, 16px); font: 700 clamp(.5rem, 1.1vw, .7rem)/1 "Montserrat", sans-serif; letter-spacing: .06em; color: #111; }
body.dt-cover-body .dt-masthead__title { margin: 0 auto !important; width: 84%; line-height: 0 !important; animation: none !important; }
body.dt-cover-body .dt-masthead__title img { display: block; width: 100%; height: auto; }   /* the masthead is a fixed logo image — never restyle it */
.dt-masthead__tagline { margin: .3em 0 0; font: 600 clamp(.62rem, 1.5vw, .9rem)/1.2 "Montserrat", sans-serif; color: #111; letter-spacing: .01em; }
.dt-heart { color: #e3241b; }

/* cover story */
.dt-story { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #08060c; isolation: isolate; }
.dt-story__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; z-index: 0; filter: brightness(.95); transition: transform 8s ease; }
.dt-cover:hover .dt-story__art { transform: scale(1.06); }
.dt-story::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.85) 100%); }
.dt-story__top, .dt-story__bottom { position: absolute; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 clamp(10px, 2.5vw, 22px); }
.dt-story__top { top: clamp(10px, 2.4vw, 22px); }
.dt-story__bottom { bottom: clamp(12px, 2.6vw, 24px); }
.dt-story__kicker { font: 400 clamp(2.3rem, 8.6vw, 4.8rem)/1 "Creepster", "Impact", sans-serif; color: #ff7a1a; letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 0 4px 0 #000, 0 0 30px rgba(255,122,26,.6); }
.dt-story__coming { margin-top: .05em; font: italic 400 clamp(1.5rem, 5vw, 2.6rem)/1 "Kaushan Script", "Brush Script MT", cursive; color: #fff; text-shadow: 0 2px 10px #000; }
.dt-story__beware { margin-top: .25em; font: 900 clamp(1.4rem, 5.2vw, 2.7rem)/1 "Montserrat", sans-serif; letter-spacing: .12em; color: #fff; text-transform: uppercase;
  text-shadow: 0 3px 0 #7a0d08, 0 0 24px rgba(227,36,27,.7); animation: dtBeware 2.4s ease-in-out infinite; }
@keyframes dtBeware { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.dt-story__line { font: 800 clamp(1rem, 3.4vw, 1.7rem)/1.15 "Montserrat", sans-serif; color: #fff; text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 2px 8px #000; }
.dt-story__line strong { color: #ff3b30; text-shadow: 0 2px 0 #000, 0 0 20px rgba(255,59,48,.6); }
.dt-story__script { font: italic 400 clamp(1.8rem, 6.4vw, 3.4rem)/1 "Kaushan Script", "Brush Script MT", cursive; color: #fff; text-shadow: 0 3px 12px #000; margin-top: .05em; }
.dt-story__enter { margin-top: clamp(8px, 1.6vw, 14px); padding: .7em 1.6em; border: 1px solid rgba(255,122,26,.85); border-radius: 2px; background: rgba(5,4,10,.6);
  font: 700 clamp(.62rem, 1.6vw, .85rem)/1 "Montserrat", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #f3ede7; animation: dwPulse 4s ease-in-out infinite; }
.dt-cover:hover .dt-story__enter { background: rgba(227,101,45,.25); }

.dt-cover__skip { margin: 14px 0 0; text-align: center; }
.dt-cover__skip a { font: 600 .72rem/1 "Montserrat", sans-serif; letter-spacing: .12em; color: rgba(255,255,255,.45) !important; text-decoration: none; }
.dt-cover__skip a:hover { color: #ff7a1a !important; }
body.dt-cover-body .dw-gate__whisper { position: fixed; bottom: 4%; }

/* leaving */
body.dt-cover-body.is-leaving .dt-cover-wrap, body.dt-cover-body.is-leaving .dt-cover__back { animation: dwLeave .7s ease forwards; }

@media (max-width: 720px) {
  .dt-cover-wrap { padding-top: max(10px, env(safe-area-inset-top)); }
  .dt-cover { width: min(94vw, calc((100svh - 56px) * 0.72)); transform: none; }
  .dt-story__enter { padding: .6em 1.2em; }
}