/* Field Notes article template. Built for reading on a phone: one column, a comfortable
   measure, photos running full width of the text column. */

.article-head { padding: 2rem 0 1.25rem; }
.article-head .wrap, .article-body, .article-end { max-width: 44rem; }
.crumbs { font-family: var(--font-label); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; color: var(--ink-soft); }
.crumbs a { color: var(--marsh-500); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.article-head h1 { margin: .6rem 0 1rem; font-size: clamp(2.125rem, 8vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--marsh-950); }
.dek { margin: 0 0 1.25rem; font-size: 1.25rem; line-height: 1.5; color: var(--ink-mid); }
.byline { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; margin: 0; font-size: .9375rem; color: var(--ink-soft); }
.byline strong { color: var(--ink); }

.article-hero { margin: 0 auto 2rem; max-width: 64rem; padding: 0 var(--gutter); }
.article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.article-hero figcaption, .article-body figcaption { margin-top: .5rem; font-size: .875rem; color: var(--ink-soft); }

.article-body { margin: 0 auto; padding: 0 var(--gutter) 2.5rem; font-size: 1.125rem; line-height: 1.7; }
.article-body > p { margin: 0 0 1.25rem; }
.article-body > p:first-of-type { font-size: 1.25rem; line-height: 1.6; color: var(--ink); }
.article-body h2 { margin: 2.75rem 0 1rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--marsh-950); }
.article-body ul { margin: 0 0 1.5rem; padding-left: 1.25rem; }
.article-body li { margin-bottom: .6rem; }
.article-body li::marker { color: var(--marsh-500); }
.article-body figure { margin: 2rem 0; }
.article-body figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.article-body a { font-weight: 600; }

/* Story beats: the personal asides get a little room so they read as stories, not instructions */
.story { border-left: 3px solid var(--sand-400); padding-left: 1rem; font-style: italic; color: var(--ink-mid); }

/* Pack list: real boxes people can tick on the dock (state isn't saved) */
.pack { list-style: none; padding: 0 !important; display: grid; gap: .5rem; }
.pack label { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.pack input { width: 1.25rem; height: 1.25rem; margin-top: .3rem; accent-color: var(--marsh-700); flex-shrink: 0; }
.pack input:checked + span { text-decoration: line-through; color: var(--ink-soft); }

/* Callouts: links to our tools and to the sister site, set apart from the story */
.callout { display: flex; gap: .85rem; align-items: flex-start; margin: 1.75rem 0; padding: 1rem 1.15rem; border-radius: var(--radius); background: var(--sand-50); border: 1px solid var(--rule); font-size: 1rem; line-height: 1.55; }
.callout .material-symbols-outlined { color: var(--marsh-500); font-size: 1.6rem; flex-shrink: 0; }
.callout p { margin: 0; }
.callout strong { color: var(--ink); }
.callout-tool { border-left: 4px solid var(--marsh-700); }
.callout-sister { border-left: 4px solid #1d5f8c; }   /* STI blue: a nod to the sister site */
.callout-sister .material-symbols-outlined { color: #1d5f8c; }

.article-end { margin: 0 auto; padding: 0 var(--gutter) 3rem; }
.article-sources { font-size: .9375rem; color: var(--ink-mid); border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.article-sources h2 { font-size: 1rem; margin: 0 0 .5rem; font-family: var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.article-sources ul { margin: 0; padding-left: 1.1rem; }
.article-sources li { margin-bottom: .35rem; }

/* Field Notes index */
.notes-list { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .notes-list { grid-template-columns: 1fr 1fr; } }