/* /info-punk: the build post. A long read on top of app.css's text pages (body.doc): the same Golden hour colours,
   light and dark, with a little synthwave in the section numbers and the screenshot frames. */
.post main { max-width: 720px; padding-bottom: 24px; }
.post article { display: grid; gap: 14px; font-size: 17px; line-height: 1.6; }
.post article p, .post article ul, .post article ol { margin: 0; }
.post article li + li { margin-top: 8px; }
.post article ul, .post article ol { padding-left: 1.4em; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--surface); color: var(--ink);
  border: 2px solid var(--accent); border-radius: var(--r-sm); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }
.post :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.post h1:focus { outline: none; }

.post h1 { font-size: clamp(26px, 6vw, 36px); line-height: 1.2; margin: 8px 0 0; }
.byline { color: var(--muted); font-size: 15px; }
.post section { display: grid; gap: 14px; margin-top: 18px; scroll-margin-top: 72px; }
.post h2 { font-size: 23px; line-height: 1.25; margin: 0; padding-bottom: 8px; display: flex; gap: 12px; align-items: baseline;
  border-bottom: 3px solid transparent; border-image: var(--sunset) 1; }
.post h2 .n { font-family: "Sixtyfour", var(--f); font-size: 15px; color: var(--accent); flex: none; }
.post h3 { font-size: 19px; margin: 6px 0 0; }
.post code { font-size: .92em; background: var(--surface-2); border-radius: var(--r-sm); padding: 1px 5px; }

.toc { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--first); border-radius: var(--r);
  padding: 12px 16px; }
.post .toc ol { padding-left: 1.4em; }
.post .toc li + li { margin-top: 2px; }
.toc a { display: inline-block; padding: 5px 0; font-weight: 600; }

.mission { margin: 0; padding: 16px 18px; background: var(--surface); border-left: 4px solid var(--all);
  border-radius: var(--r); box-shadow: var(--shadow); font-size: 18px; }

/* screenshots: phone shots side by side when there's room, desktop shots across the column */
.post figure { margin: 0; display: grid; gap: 8px; }
.post figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--first) 14%, transparent); background: var(--surface-2); }
.post figcaption { font-size: 15px; color: var(--muted); }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 480px) { .shots { grid-template-columns: minmax(0, 1fr); } .shots .phone { max-width: 300px; } }

.triad { display: grid; gap: 12px; }
@media (min-width: 900px) { .post .triad { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -90px; } }
.triad .card { align-content: start; gap: 10px; font-size: 16px; border-top: 4px solid var(--all); }
.triad .card:nth-child(2) { border-top-color: var(--first); }
.triad .card:nth-child(3) { border-top-color: var(--gen); }
.triad h3 { margin: 0; }

.post .human { list-style: none; padding: 0; display: grid; gap: 8px; }
.post .human li { margin: 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.aside { color: var(--muted); font-style: italic; }



.signoff { font-size: 19px; font-weight: 600; margin-top: 8px !important; }
.signoff .hashtag { color: var(--accent); }

.post-foot { max-width: 720px; margin: 0 auto; padding: 18px 16px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.post-foot p { margin: 0; }
@media (min-width: 700px) { .post .toc ol { columns: 2; column-gap: 32px; } .post .toc li { break-inside: avoid; } }