/* Blog (/blog and /blog/<slug>). Loads after yak-mountain.css, which supplies the header, footer,
   flip buttons, .facts labels (.fl/.fv), .thumb, .sub, .invite and .acts. Everything a post can
   contain is one of the building blocks listed in docs/blog.md; posts never add their own CSS.

   Layout: one 680px reading column. Every direct child of .prose sits in that column; add .wide
   to let a figure break out to 1000px. Spacing comes only from the variables below (4pt grid). */

:root{
  --col:680px;      /* reading column */
  --wide:1000px;    /* breakout figures, lead image */
  --flow:24px;      /* between paragraphs and list items' blocks */
  --block:48px;     /* above and below a block: figure, quote, glance, note */
  --heading:56px;   /* above an h2 */
  --section:96px;   /* between page sections, and before the footer */
}
@media (max-width:640px){:root{--block:32px;--heading:40px;--section:64px}}

[hidden]{display:none!important}
.col{max-width:var(--col);margin-left:auto;margin-right:auto}

/* Labels and meta. .label is the site kicker (.kicker / .sub); as a link it takes the crumb link
   color. .meta is the site's meta line (.pm / .fs): Alexandria 600 13. */
.label{display:inline-block;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#666;margin:0 0 12px}
a.label{color:#8A8A8A;transition:color .3s}
@media (hover:hover){a.label:hover{color:#fff}}
.meta{font-family:Alexandria,Inter,sans-serif;font-weight:600;font-size:13px;line-height:1.4;color:#8A8A8A;margin:0;max-width:none}

/* Page head (index and article): site h1 type, sized for a reading column */
.head{padding:clamp(32px,6vh,64px) 0 var(--block)}
.head h1{font-size:clamp(36px,5.6vw,56px);line-height:1.04;letter-spacing:-.04em;margin:0 0 16px}
.dek{font-size:20px;line-height:1.5;color:#A3A3A3;margin:0;max-width:none}
.byline{display:flex;align-items:center;gap:12px;margin-top:24px}
.byline img{width:40px;height:40px;border-radius:999px;object-fit:cover;object-position:30% 20%;background:#0C0C0C}
.byline b{display:block;font-size:15px;font-weight:600;line-height:1.3;color:#fff;margin:0 0 2px}

/* Prose: the post body. Text roles */
.prose>*{max-width:var(--col);margin-left:auto;margin-right:auto}
.prose>.wide{max-width:var(--wide)}
.prose>*:first-child{margin-top:0}
.prose>*:last-child{margin-bottom:0}
.prose p,.prose li{font-size:19px;line-height:1.75;color:#D1D1D1}
.prose p{margin-top:0;margin-bottom:var(--flow)}
.prose h2{font-size:clamp(24px,2.6vw,28px);line-height:1.25;margin-top:var(--heading);margin-bottom:16px}
.prose h3{font-size:20px;line-height:1.35;margin-top:32px;margin-bottom:8px}
.prose ul,.prose ol{margin-top:0;margin-bottom:var(--flow);padding-left:24px}
.prose li{margin:0 0 8px;padding-left:4px}
.prose li::marker{color:#666}
.prose strong{color:#fff;font-weight:600}
.prose a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;transition:text-decoration-color .3s}
@media (hover:hover){.prose a:hover{text-decoration-color:#fff}}
.prose a:focus-visible,.list a:focus-visible,.lead:focus-visible,.cats a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}

/* Prose: blocks. All share the same space above and below */
.prose .fig,.prose blockquote,.prose .glance,.prose .note{margin-top:var(--block);margin-bottom:var(--block)}

/* Figure: one photo (.fig), a 16:9 lead photo (.fig.hero), a portrait (.fig.tall), or two side by
   side (.fig.pair). Corners match the site's .photo-wide; the caption is the site's .photo-credit */
.fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:32px;background:#0C0C0C}
.fig.hero img{aspect-ratio:16/9}
.fig.tall img{aspect-ratio:4/5}
.fig.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fig.pair img{aspect-ratio:4/5;border-radius:24px}
.fig.pair figcaption{grid-column:1/-1;margin-top:-4px}
/* App screenshot (.fig.screen): a framed phone PNG from web/screens, shown whole at phone width */
.fig.screen{text-align:center}
.fig.screen img{display:block;margin:0 auto;width:min(280px,72%);aspect-ratio:auto;object-fit:contain;border-radius:0;background:none}
.fig figcaption{margin:12px 0 0;font-family:Alexandria,Inter,sans-serif;font-weight:600;font-size:13px;line-height:1.5;color:#8A8A8A}

/* Pull quote: the one line to remember. Optional <cite> for a quoted person */
.prose blockquote{padding:0 0 0 24px;border-left:2px solid #fff}
.prose blockquote p{font-family:Alexandria,Inter,sans-serif;font-weight:500;font-size:clamp(22px,2.4vw,26px);line-height:1.4;letter-spacing:-.02em;color:#fff;margin:0}
.prose blockquote cite{display:block;margin-top:12px;font-style:normal;font-family:Alexandria,Inter,sans-serif;font-weight:600;font-size:13px;color:#8A8A8A}

/* At a glance: the mountain pages' fact rows (.fl label, .fv value) as a spec sheet */
.prose .glance{list-style:none;padding:0}
.prose .glance li{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:0 16px;align-items:baseline;margin:0;padding:12px 0;color:#fff}
.prose .glance li+li{border-top:1px solid #141414}
.glance .fv{font-size:18px;line-height:1.3}
.glance .fl{white-space:nowrap}

/* Note: a tip or warning set apart by a label and white text, never a box or rule */
.note .label{display:block;margin-bottom:8px}
.prose .note p{color:#fff;margin-bottom:12px}
.prose .note>:last-child{margin-bottom:0}

/* Post lists (index + keep reading): text first, the site's .thumb on the right. Dividers sit only
   between stories, so a list never adds a rule next to a heading, the invite or the footer */
.list{list-style:none;margin:0;padding:0}
.list li+li{border-top:1px solid #141414}
/* Index feed: the filter script marks every visible story after the first with data-sep */
.list.feed>li{border-top:0}
.list.feed>li[data-sep]{border-top:1px solid #141414}
.list a{display:flex;align-items:flex-start;gap:24px;padding:24px 0}
.list .txt{flex:1;min-width:0}
.list h3{font-size:21px;line-height:1.3;letter-spacing:-.025em;margin:0 0 8px;transition:color .3s}
.list .sum{font-size:16px;line-height:1.55;color:#A3A3A3;margin:0 0 8px;max-width:none}
@media (hover:hover){.list a:hover h3{color:#D1D1D1}}

/* Index */
.cats{display:flex;flex-wrap:wrap;gap:4px 24px;list-style:none;margin:-16px 0 0;padding:0}
.cats a{display:block;font-size:15px;line-height:1.4;color:#8A8A8A;padding:8px 0;transition:color .3s}
.cats a[aria-current]{color:#fff;font-weight:600}
@media (hover:hover){.cats a:hover{color:#fff}}
.lead{display:block;padding:32px 0}
.lead img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:32px;background:#0C0C0C;margin:0 0 24px}
.lead h2{font-size:clamp(26px,3.4vw,34px);line-height:1.2;margin:0 0 8px;transition:color .3s}
.lead .sum{font-size:18px;line-height:1.55;color:#A3A3A3;margin:0 0 12px;max-width:none}
@media (hover:hover){.lead:hover h2{color:#D1D1D1}}
.empty{font-size:16px;color:#666;padding:24px 0}

/* Page sections: the space between the story, the invite, keep reading and the footer */
.after{margin-top:var(--section)}
.page-end{margin-bottom:var(--section)}
.after>.sub{margin-bottom:0;padding-bottom:12px}

@media (max-width:640px){
.dek{font-size:18px}
.prose p,.prose li{font-size:18px;line-height:1.7}
.prose blockquote{padding-left:20px}
.fig img,.lead img{border-radius:24px}
.fig.pair{gap:8px}
.fig.pair img{border-radius:20px}
.list a{gap:16px;padding:20px 0}
.list h3{font-size:17px}
.list .sum{display:none}
.cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats li{flex:0 0 auto}
}