/* Site additions for the production build of design 1c: journal (blog), article page, photos from the CMS. */
.has-photo { position: relative; overflow: hidden; }
.has-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-photo > *:not(img) { position: relative; z-index: 1; }

.post { position: relative; }
.post__link { position: absolute; inset: 0; z-index: 3; }
.post__by { font-size: 14px; color: var(--muted); font-weight: 600; }
.post .tour__foot .link { margin-left: auto; }

.post__meta { margin: 14px 0 0; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: #fff; }
.post__cover { aspect-ratio: 21/9; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--accent); margin-bottom: clamp(36px, 5vw, 64px); }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .post-layout { grid-template-columns: 1fr; } .post__cover { aspect-ratio: 16/10; } }
.post__body { max-width: 720px; font-size: 19px; }
.post__body h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 1.4em 0 .5em; }
.post__body p, .post__body ul, .post__body ol { margin: 0 0 1em; }
.post__body img, .post__body figure > div { width: 100%; border: 3px solid var(--ink); }
.post__body figure { margin: 1.6em 0; }
.post__body figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.post__body blockquote { margin: 1.6em 0; padding: 18px 22px; border-left: 8px solid var(--accent); background: var(--bg-alt); font-family: var(--font-title); text-transform: uppercase; font-size: 22px; line-height: 1.15; }
.post__body a { color: var(--brand); font-weight: 700; }
.post__aside { position: sticky; top: 110px; display: grid; gap: 18px; }
.post__tour { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 24px; display: grid; gap: 12px; justify-items: start; }
.post__tour h3 { margin: 0; font-size: 22px; }
.post__tour p { margin: 0; }
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.post__tags span { border: 2px solid var(--ink); padding: 4px 10px; font-weight: 700; font-size: 13px; text-transform: uppercase; }

.form__error { margin: 14px 0 0; padding: 12px 14px; border: 3px solid var(--accent); background: #fff; font-weight: 600; }
.form__error[hidden] { display: none; }