/* One list preview and one article page (stitchu design rules, 20 Oct 2026: FRAME, LIST, ARTICLE, BUTTONS, LINES).
   Used by blog.html, patches.html and every patch-note entry in patches/. Numbers are the rules' and match the guides
   list (guide/index.html) and the journal article (css/journal.css): one 880px list column, image 220x165 left, title
   20, one summary line, meta 14 muted (date · topic), rows 32px apart, no lines; under 700px the image sits on top.
   Article: meta line, h1, lead 19 muted, lead picture centred in a white card (radius 16), text in a 680px column,
   figures as big as their picture. body:not(#ux-posts) main.ux-page outranks the theme's and older page rules. */
body:not(#ux-posts) main.wrap.ux-page { display:block; box-sizing:content-box; width:auto; max-width:1120px; margin:0 auto;
  padding:48px clamp(16px,4vw,40px) 96px; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; color:#373539; }
body:not(#ux-posts) main.ux-page :is(h1,h2,h3) { font-family:inherit; font-weight:500; font-style:normal; color:#373539; text-align:left; }
body:not(#ux-posts) main.ux-page h1 { max-width:none; margin:0 0 16px; letter-spacing:-.02em; }
body:not(#ux-posts) main.ux-page :is(p,li,figcaption) { font-weight:400; letter-spacing:normal; }
body:not(#ux-posts) main.ux-page a { color:#373539; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
body:not(#ux-posts) main.ux-page a:hover { text-decoration-thickness:2px; }
body:not(#ux-posts) main.ux-page :is(a,button,input,select):focus-visible { outline:3px solid #735563; outline-offset:2px; }
/* identifiers keep their case inside the lowercase theme: A4, A0, EU36, print labels */
body:not(#ux-posts) main.ux-page .ux-id { text-transform:none; }

/* ---- list page: one centred 880px column, text left ---- */
body:not(#ux-posts) main.ux-page .ux-list-page { max-width:880px; margin:0 auto; }
body:not(#ux-posts) main.ux-page .ux-list-page > h1 { margin-bottom:40px; }
body:not(#ux-posts) main.ux-page .ux-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:32px; }
body:not(#ux-posts) main.ux-page .ux-preview { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start;
  margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; scroll-margin-top:24px; }
body:not(#ux-posts) main.ux-page .ux-preview[hidden] { display:none; }
body:not(#ux-posts) main.ux-page .ux-preview-media { display:block; line-height:0; text-decoration:none; border-radius:12px; }
body:not(#ux-posts) main.ux-page .ux-preview-img { display:block; box-sizing:border-box; width:220px; height:165px; max-width:none;
  padding:10px; object-fit:contain; background:#fff; border:0; border-radius:12px; }
body:not(#ux-posts) main.ux-page .ux-preview-body { min-width:0; }
body:not(#ux-posts) main.ux-page .ux-preview-title { margin:0 0 6px; font-size:20px; line-height:1.3; letter-spacing:-.01em; }
body:not(#ux-posts) main.ux-page .ux-preview-title a { text-decoration:none; }
body:not(#ux-posts) main.ux-page .ux-preview-title a:hover { text-decoration:underline; text-decoration-thickness:1px; }
body:not(#ux-posts) main.ux-page .ux-preview-sum { margin:0 0 6px; font-size:17px; line-height:1.55; color:#373539; }
body:not(#ux-posts) main.ux-page .ux-preview-meta { margin:0; font-size:14px; line-height:1.5; color:#656168; }
/* search, topic and sort on the blog (js/1810-discovery.js): one row of fields, as on the guides list */
body:not(#ux-posts) main.ux-page .ux-discovery { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; margin:0 0 48px; }
body:not(#ux-posts) main.ux-page .ux-discovery label { display:grid; gap:8px; margin:0; font-size:14px; font-weight:500; line-height:1.4; color:#656168; }
body:not(#ux-posts) main.ux-page .ux-discovery label:first-child { flex:1 1 260px; }
body:not(#ux-posts) main.ux-page .ux-discovery :is(input,select) { box-sizing:border-box; width:100%; height:46px; min-height:46px; margin:0;
  padding:0 16px; border:0; border-radius:14px; background-color:#fff; box-shadow:0 1px 2px rgba(55,53,57,.10); color:#373539;
  font:400 16px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-appearance:none; appearance:none; }
body:not(#ux-posts) main.ux-page .ux-discovery select { min-width:180px; padding-right:40px; cursor:pointer; text-transform:lowercase;
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23373539' stroke-width='1.6'/%3E%3C/svg%3E"); }
body:not(#ux-posts) main.ux-page .ux-discovery input[type="search"]::-webkit-search-decoration { -webkit-appearance:none; }
body:not(#ux-posts) main.ux-page .ux-discovery button { align-self:flex-end; }
body:not(#ux-posts) main.ux-page .ux-discovery p { flex-basis:100%; margin:0; font-size:14px; color:#656168; }
@media (max-width:699px) {
  body:not(#ux-posts) main.wrap.ux-page { padding-top:28px; padding-bottom:64px; }
  body:not(#ux-posts) main.ux-page .ux-list-page > h1 { margin-bottom:28px; }
  body:not(#ux-posts) main.ux-page .ux-preview { grid-template-columns:minmax(0,1fr); gap:14px; }
  body:not(#ux-posts) main.ux-page .ux-preview-img { width:100%; height:auto; aspect-ratio:4/3; }
  body:not(#ux-posts) main.ux-page .ux-discovery { margin-bottom:32px; }
  body:not(#ux-posts) main.ux-page .ux-discovery label:not(:first-child) { flex:1 1 calc(50% - 8px); }
  body:not(#ux-posts) main.ux-page .ux-discovery select { min-width:0; }
}

/* ---- article page ---- */
body:not(#ux-posts) main.ux-page .ux-article { max-width:880px; margin:0 auto; }
body:not(#ux-posts) main.ux-page :is(.ux-article-head,.ux-article-body,.ux-pager) { max-width:680px; margin-left:auto; margin-right:auto; }
body:not(#ux-posts) main.ux-page .ux-kicker { margin:0 0 12px; font-size:14px; line-height:1.5; color:#656168; }
body:not(#ux-posts) main.ux-page .ux-kicker a { color:#656168; }
body:not(#ux-posts) main.ux-page .ux-intro { margin:0; font-size:19px; line-height:1.55; color:#656168; }
body:not(#ux-posts) main.ux-page .ux-article-body { font-size:17px; line-height:1.7; }
body:not(#ux-posts) main.ux-page .ux-article-body > p { margin:0 0 16px; font-size:17px; line-height:1.7; }
body:not(#ux-posts) main.ux-page .ux-article-body h2 { margin:48px 0 12px; font-size:28px; line-height:1.25; letter-spacing:-.01em; }
body:not(#ux-posts) main.ux-page .ux-article-body > :first-child { margin-top:0; }
body:not(#ux-posts) main.ux-page .ux-article-body ul { margin:0 0 16px; padding-left:22px; }
body:not(#ux-posts) main.ux-page .ux-article-body li { margin:0 0 8px; font-size:17px; line-height:1.6; }
/* figures: centred, as big as the picture; the white card is the picture's frame, the caption sits under it */
body:not(#ux-posts) main.ux-page .ux-article > figure { box-sizing:border-box; width:fit-content; max-width:100%; margin:40px auto;
  padding:0; border:0; background:none; box-shadow:none; }
body:not(#ux-posts) main.ux-page .ux-article > figure.ux-lead { margin:40px auto 48px; }
body:not(#ux-posts) main.ux-page .ux-article > figure > a,
body:not(#ux-posts) main.ux-page .ux-article > figure > .ux-pair { display:block; box-sizing:border-box; padding:16px; line-height:0;
  background:#fff; border:0; border-radius:16px; text-decoration:none;
  box-shadow:0 1px 2px rgba(55,53,57,.06), 0 8px 24px rgba(55,53,57,.06); }
body:not(#ux-posts) main.ux-page .ux-article > figure img { display:block; width:auto; height:480px; max-width:100%; margin:0 auto; object-fit:contain; }
body:not(#ux-posts) main.ux-page .ux-article > figure.ux-wide { width:100%; }
body:not(#ux-posts) main.ux-page .ux-article > figure.ux-wide img { width:100%; height:auto; }
body:not(#ux-posts) main.ux-page .ux-article > figure > .ux-pair { display:flex; gap:16px; }
body:not(#ux-posts) main.ux-page .ux-article > figure > .ux-pair > a { display:block; flex:1 1 0; min-width:0; text-decoration:none; }
body:not(#ux-posts) main.ux-page .ux-article > figure > .ux-pair img { width:100%; height:auto; }
body:not(#ux-posts) main.ux-page .ux-article > figure.ux-paired { width:min(760px,100%); }
body:not(#ux-posts) main.ux-page .ux-article figcaption { width:0; min-width:100%; margin:12px 0 0; font-size:14px; line-height:1.5;
  color:#656168; text-align:center; }
body:not(#ux-posts) main.ux-page .ux-article .ux-actions { display:flex; flex-wrap:wrap; gap:12px; margin:40px 0 0; }
body:not(#ux-posts) main.ux-page .ux-pager { margin-top:56px; display:flex; flex-direction:column; gap:10px; }
body:not(#ux-posts) main.ux-page .ux-pager p { margin:0; font-size:15px; line-height:1.5; color:#656168; }

/* ---- buttons: one pill, as wide as its words ---- */
body:not(#ux-posts) main.ux-page a.ux-btn { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:auto; height:44px; min-height:44px; padding:0 22px; border:0; border-radius:999px; box-shadow:none;
  font:500 15px/1 "Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:0; text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease; }
body:not(#ux-posts) main.ux-page a.ux-btn-primary, body:not(#ux-posts) main.ux-page a.ux-btn-primary:visited { background:#373539; color:#fff; }
body:not(#ux-posts) main.ux-page a.ux-btn-primary:hover { background:#4d4a50; color:#fff; }
body:not(#ux-posts) main.ux-page a.ux-btn-secondary, body:not(#ux-posts) main.ux-page a.ux-btn-secondary:visited { background:#eeeeef; color:#373539; }
body:not(#ux-posts) main.ux-page a.ux-btn-secondary:hover { background:#e2e0e3; color:#373539; }

@media (max-width:699px) {
  body:not(#ux-posts) main.ux-page .ux-intro { font-size:18px; }
  body:not(#ux-posts) main.ux-page .ux-article-body h2 { margin-top:40px; font-size:24px; }
  body:not(#ux-posts) main.ux-page .ux-article > figure { width:100%; margin:28px auto; }
  body:not(#ux-posts) main.ux-page .ux-article > figure > a,
  body:not(#ux-posts) main.ux-page .ux-article > figure > .ux-pair { padding:12px; }
  body:not(#ux-posts) main.ux-page .ux-article > figure img { width:100%; height:auto; }
  body:not(#ux-posts) main.ux-page .ux-article > figure > .ux-pair { gap:8px; }
}
@media (prefers-reduced-motion:reduce) { body:not(#ux-posts) main.ux-page a.ux-btn { transition:none; } }