:root {
--accent: #0060aa;
--light: #f5f7fa;
--dark: #1c1c1c;
/* desktop container sizing */
--container-min: 980px; /* safe minimum width for laptops */
--container-ideal: 78vw; /* take more screen width on desktop */
--container-max: 1280px; /* comfortable max on large monitors */
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
line-height: 1.6;
color: var(--dark);
background: #fff;
}

.case {
max-width: 960px; /* original; overridden below for PC */
margin: 0 auto;
padding: 2rem 1rem 4rem;
white-space: normal !important;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; font-weight: 500; }

/* Title: white text, no background (kept from reference design) */
h1 { font-size: 2rem; color: #fff; font-weight: 600; }

h2 { font-size: 1.5rem; border-bottom: 3px solid var(--accent); padding-bottom: 0.25em; margin-top: 2.2rem; font-weight: 500; }

strong { font-weight: 600; }

/* Figure frames for BTS media */
figure.frame { margin: 1rem 0; }
figure.frame .slot { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; background: #000; border: 2px solid transparent; border-radius: 6px; position: relative; overflow: hidden; }
figure.frame .slot img, figure.frame .slot video { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; margin: 0; }

/* Make embedded players fill the slot (same width as GIF frames) */
figure.frame .slot iframe,
figure.frame .slot embed,
figure.frame .slot object { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }

figure.frame .slot::before { content: attr(data-placeholder); color: #9aa1a6; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.95rem; letter-spacing: 0.2px; pointer-events: none; }
figure.frame .slot:has(img, video, iframe, embed, object)::before { content: ""; }

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
figure.frame .slot { height: 0; padding-top: 56.25%; }
figure.frame .slot > * { position: absolute; inset: 0; }
}

figure.frame figcaption { text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.4rem; }

blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; background: var(--light); border-left: 6px solid var(--accent); font-style: italic; }

hr { border: none; border-top: 2px dashed #d6d9dc; margin: 2rem 0 2.5rem; }

/* ── Wider desktop layout for PC (overrides original width) ───────── */
.case {
max-width: clamp(var(--container-min), var(--container-ideal), var(--container-max));
padding-left: 1.5rem;
padding-right: 1.5rem;
}

@media (min-width: 1280px) {
body { font-size: 17px; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.75rem; }
}