/* ========================================================================== Death Roll Records — shared styles ========================================================================== */ :root { /* Palette */ --red: #b30000; --red-glow: rgba(179, 0, 0, 0.35); --ink: #e8e4dd; /* body copy */ --credit-ink: #fff; /* image credits: pure white */ --rule: rgba(179, 0, 0, 0.5); --bg: #000; /* Type */ --font-display: "Cinzel Decorative", Georgia, "Times New Roman", serif; --font-body: "EB Garamond", Garamond, "Times New Roman", Georgia, serif; /* Artwork defaults — override per page on .art-block (see below) */ --art-ratio: 4 / 3; --art-max-h: 65vh; --art-max-w: 1100px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); } /* -------------------------------------------------------------------------- Page shell Default is an article page: content flows from the top and may scroll. Add class="splash" to for a single-screen, vertically centred page. -------------------------------------------------------------------------- */ body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 3.5vw, 2.25rem); padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5rem); color: var(--red); font-family: var(--font-display); text-align: center; } body.splash { justify-content: center; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2.5rem); } /* -------------------------------------------------------------------------- Headings -------------------------------------------------------------------------- */ h1 { margin: 0; font-weight: 900; font-size: clamp(1.9rem, 6vw, 4rem); line-height: 1.1; letter-spacing: 0.06em; color: var(--red); text-shadow: 0 0 28px var(--red-glow); } body.splash h1 { font-size: clamp(1.9rem, 7vw, 4.5rem); } /* -------------------------------------------------------------------------- Artwork The block's width is pinned to the artwork's rendered width, so a credit line inside it can sit flush with the image's edges. Per page, set --art-ratio and --art-max-h on the .art-block element:

--art-ratio feeds both the aspect-ratio and the width calc, so the two can never drift apart when the artwork is swapped. -------------------------------------------------------------------------- */ .art-block { margin: 0; width: min(var(--art-max-w), 100%, calc(var(--art-max-h) * var(--art-ratio))); } .art { display: block; width: 100%; height: auto; aspect-ratio: var(--art-ratio); object-fit: contain; } .credit { margin: 0.3em 0 0; text-align: right; font-family: var(--font-body); font-weight: 400; font-size: clamp(0.55rem, 1vw, 0.8rem); letter-spacing: 0.04em; line-height: 1.2; color: var(--credit-ink); } /* -------------------------------------------------------------------------- Sections A full-width content block (heading + rule + whatever follows). Used for the comments section; reusable for any future titled block. -------------------------------------------------------------------------- */ .section { width: min(100%, 46rem); margin-top: clamp(1rem, 3vw, 2rem); } .section-title { margin: 0; font-weight: 700; font-size: clamp(1.2rem, 3.2vw, 2rem); line-height: 1.15; letter-spacing: 0.08em; color: var(--red); text-shadow: 0 0 18px var(--red-glow); } .rule { margin: 0.55rem 0 0; border: 0; border-top: 1px solid var(--rule); } /* Disqus injects its own iframe; give it room and keep it left-to-right readable inside the centred column. */ .comments { margin-top: clamp(1.25rem, 3vw, 2rem); text-align: left; } .comments a { color: var(--red); } /* -------------------------------------------------------------------------- Body copy -------------------------------------------------------------------------- */ .passage { margin: 0; max-width: 62ch; font-family: var(--font-body); font-weight: 400; font-size: clamp(0.95rem, 1.6vw, 1.2rem); line-height: 1.75; letter-spacing: 0.01em; text-align: left; text-wrap: pretty; color: var(--ink); } /* An obituary listing line: display face, white, smaller than the page title. */ .entry { margin: 0; font-weight: 400; font-size: clamp(0.95rem, 2.2vw, 1.35rem); line-height: 1.6; letter-spacing: 0.05em; color: var(--credit-ink); } .entry a { color: inherit; text-decoration: none; transition: color 0.18s ease; } .entry a:hover, .entry a:focus-visible { color: var(--red); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } .entry a:focus-visible { outline: 1px solid var(--red); outline-offset: 0.25em; } .coming-soon { margin: 0; font-weight: 700; font-size: clamp(1.1rem, 3vw, 2rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); text-shadow: 0 0 20px var(--red-glow); }