/* seiba-site.css: rules for things that are not in the approved design (batch 2 docs/00-START-HERE.md).
   Loaded last, on the batch 2 pages only, never on the homepage. Uses only tokens defined in seiba.css. */

/* Mobile menu: the item for the current page reads in ink, like aria-current in the desktop nav
   (seiba-pages.css: .nav-links a[aria-current="page"]). Owner decision, 2026-10-07. */
.mnav-i[aria-current="page"] .dd-k{color:var(--ink)}

/* Real images in the designed placeholder frames (owner supplied them, 2026-10-07). The frame keeps its ratio
   (.ph 4:5 on About; .oss-ph 2:1, 4:3 on phones, on Open source) and the image covers it; the placeholder's
   dashed border, padding and dot grid go. docs/04-PAGES.md specifies the .oss-ph image rule. */
.ph:has(> img),.oss-ph:has(> img){padding:0;border:0;background-image:none;overflow:hidden}
.ph > img,.oss-ph > img{display:block;width:100%;height:100%;object-fit:cover}
.ph > img{object-position:50% 25%}
.oss-ph > img{object-position:50% 0}

/* The hidden attribute must win over the design's display rules (.fm-ok is display:flex), so states the source
   toggles with sc-if (Contact's message success state) can be rendered hidden and shown from JS. */
.sb [hidden]{display:none !important}

/* Cal.com inline embed: spans the calendar and slot columns of .book-b (docs/05-INTEGRATIONS.md, verbatim) */
.cal-embed{grid-column:2/-1;min-width:0;min-height:640px;padding:8px 8px 0}
@media (max-width:1080px){.cal-embed{grid-column:1/-1}}
@media (max-width:600px){.cal-embed{min-height:720px;padding:0}}

/* Theme blue trial (owner, 2026-10-08), the seiba-pages.css part of block 5 in seiba.css: same blue, same alpha.
   Here because seiba-pages.css loads after seiba.css. Delete together with that block to revert. */
.spark path.a{fill:rgba(77,121,255,.07)}
.ch-a{fill:rgba(77,121,255,.06)}

/* Blog article (src/layouts/ArticleLayout.astro), laid out after the batch 2 reference "Blog article template · Desktop
   1440@1x.png" (an image, no markup source): a 680px head and article column, the cover across the full wrap, then a
   200px "On this page" column and the article from x=480 at 1440. Tokens and type scale only: ink-2 body text, ink
   headings at weight 300 like .h2, the title's first sentence in --dim, mono labels, hairlines in --line. */
.art-hero{padding-bottom:0}
.art-head{max-width:680px}
.art-head .crumb{margin-bottom:40px}
.art-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-bottom:28px}
.art-meta .sep{color:var(--line-2)}
.art-t{margin:0;font-size:clamp(38px,4.7vw,68px);line-height:1.04;text-wrap:balance}
.art-sum{margin:36px 0 0;font-size:24px;font-weight:300;line-height:1.42;letter-spacing:-.01em;color:var(--ink-2);text-wrap:pretty}
.art-cover{margin:56px 0 0}
.art-head>:last-child{margin-bottom:0}
.art-cover-f{display:flex;justify-content:center;padding:48px 32px;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.art-cover-f img{display:block;width:auto;max-width:100%;height:auto;max-height:920px}
.art-cover .oss-ph{aspect-ratio:2400/1030}
.art-cap{display:flex;gap:12px;align-items:baseline;margin-top:14px;font-size:14px;color:var(--ink-3)}
.art-cap .label{color:var(--ink);flex:none}
.art-main{display:grid;grid-template-columns:200px minmax(0,680px);column-gap:120px;margin-top:80px;padding-top:72px;padding-bottom:112px;border-top:1px solid var(--line)}
.art-toc{position:sticky;top:104px;align-self:start}
.art-toc ul{margin:20px 0 0;padding:0;list-style:none}
.art-toc li{margin:0 0 10px}
.art-toc a{display:block;font-size:14px;line-height:1.4;color:var(--ink-3)}
.art-toc a:hover,.art-toc a[aria-current]{color:var(--ink)}
.art-toc a[aria-current]{font-weight:500}
.art-col{min-width:0}
.art-body{font-size:17px;line-height:1.8;color:var(--ink-2);text-wrap:pretty}
.art-body>*{margin:0 0 24px}
.art-body>:last-child{margin-bottom:0}
.art-body>p:first-child{font-size:22px;line-height:1.55;color:var(--ink)}
.art-body h2{margin:80px 0 24px;font-size:clamp(30px,3vw,40px);font-weight:300;letter-spacing:-.03em;line-height:1.12;color:var(--ink);text-wrap:balance;scroll-margin-top:104px}
.art-body h3{margin:40px 0 12px;font-size:21px;font-weight:400;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.art-body h2+h3{margin-top:28px}
.art-body strong{font-weight:500;color:var(--ink)}
.art-body a{color:var(--blue-ink);text-decoration:underline;text-decoration-color:var(--blue-line);text-underline-offset:3px}
.art-body ul,.art-body ol{padding-left:22px}
.art-body li{margin:0 0 10px;padding-left:2px}
.art-body li::marker{color:var(--ink)}
.art-body blockquote{margin:36px 0;padding:0;font-size:20px;font-weight:300;line-height:1.55;color:var(--ink-2)}
.art-body blockquote p{margin:0}
.art-body code{padding:1px 5px;border:1px solid var(--line);border-radius:3px;background:var(--surface);font-family:var(--mono);font-size:.82em;color:var(--ink)}
.art-body pre{margin:32px 0;padding:20px;overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface);font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--ink)}
.art-body pre code{padding:0;border:0;background:none;font-size:inherit}
.art-body pre .k{color:var(--ink-3)}
.art-take{margin:40px 0;padding:28px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.art-take .label{color:var(--blue-ink)}
.art-take p{margin:12px 0 0;font-size:20px;line-height:1.5;color:var(--ink)}
.art-cta{margin-top:40px}
.art-share{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:72px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.art-share .tags{display:flex;flex-wrap:wrap;gap:6px}
.art-share-b{display:flex;gap:8px}
.art-share-b .btn{gap:8px}
@media (max-width:1080px){
  .art-main{grid-template-columns:minmax(0,1fr);max-width:760px;margin-top:64px;padding-top:56px}
  .art-toc{display:none}
}
@media (max-width:600px){
  .art-head .crumb{margin-bottom:28px}
  .art-meta{margin-bottom:20px}
  .art-sum{margin-top:24px;font-size:19px}
  .art-cover{margin-top:40px}
  .art-cover-f{padding:20px 16px}
  .art-main{margin-top:48px;padding-top:40px;padding-bottom:80px}
  .art-body{font-size:16px;line-height:1.75}
  .art-body>p:first-child{font-size:19px}
  .art-body h2{margin-top:56px;font-size:28px}
  .art-body blockquote{font-size:18px}
  .art-body pre{padding:16px;font-size:12.5px}
  .art-take p{font-size:18px}
  .art-share{margin-top:56px}
}
/* Blog list rows with a cover (components/BlogRow.astro): a 2:1 preview of the post's cover above its title; date and
   topic line up with the preview's top edge. */
.blg-img{display:block;width:100%;aspect-ratio:2/1;margin-bottom:12px;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.blg-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.blg-row:has(.blg-img){align-items:start}
.blg-row:hover .blg-img img{transform:scale(1.015)}
@media (prefers-reduced-motion:reduce){.blg-img img{transition:none}.blg-row:hover .blg-img img{transform:none}}
.art-share-b{margin-left:auto}

/* Form send failure (owner, 2026-10-08; js/forms.js): one line under the button, in the site's amber for problems. */
.form-err{font-size:13.5px;line-height:1.5;color:var(--amber)}
.form-err a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ptw-ask .form-err{margin-top:14px}

/* Coming-soon status (owner, 2026-10-09): "In progress" in the site's amber, ring in the amber dot colour. */
.rec-h .st-wip{color:var(--amber)}
.rec-h .st-wip::before{border-color:var(--amber-dot)}