.post { max-width: 780px; padding-top: clamp(28px, 4vw, 56px); padding-bottom: 60px }
.post h1 { font-size: clamp(40px, 6.5vw, 76px); font-style: italic; line-height: .95; margin: 8px 0 14px }
.post .lede { font-size: clamp(18px, 2vw, 21px); color: #d4d9e6; max-width: 60ch } .post .meta { color: var(--dim); font-size: 12px; letter-spacing: 1.2px; margin: 10px 0 22px }
.crumbs { font: 600 13px var(--f-mono); color: var(--dim); margin-bottom: 14px } .crumbs a { color: var(--dim) }
.vframe { position: relative; display: block; width: 100%; aspect-ratio: 16/9; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; cursor: pointer; background: #000 } .vframe img { width: 100%; height: 100%; object-fit: cover; display: block }
.vframe .play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-size: 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: transform .2s } .vframe:hover .play { transform: scale(1.08) }
.post iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 18px; display: block }
.toc { margin: 26px 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass) } .toc ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px } .toc a { color: var(--chalk); text-decoration: none } .toc a:hover { color: var(--amber) }
.post h2 { font-size: clamp(28px, 4vw, 42px); font-style: italic; margin: 38px 0 12px; scroll-margin-top: 90px } .post > p, .post h2 + p { max-width: 68ch } .post p { font-size: 18px; line-height: 1.65; color: #d4d9e6; margin: 0 0 16px }
.post .src { font-size: 12px; margin-top: 28px } .post .legal { font-size: 12px; margin-top: 30px }
.cta { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin: 36px 0; padding: 24px 28px; background: linear-gradient(120deg, rgba(255, 200, 61, .1), var(--glass) 60%) } .cta h2 { margin: 4px 0 6px } .cta p { margin: 0 } @media (max-width: 600px) { .cta { grid-template-columns: 1fr } }
.relh { margin-top: 44px }
.relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px } .pcard { display: grid; gap: 12px; padding: 12px; text-decoration: none; color: inherit; transition: transform .2s, border-color .2s } .pcard:hover { transform: translateY(-3px); border-color: var(--amber) } .pcard img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px } .pcard h3 { font-size: 24px; margin: 4px 0 6px } .pcard p { margin: 0; font-size: 15px }
.bh { font-size: clamp(54px, 9vw, 120px); font-style: italic; margin: 6px 0 10px }