/* Ontaym Blog — shared article stylesheet.
   Palette mirrors the in-app blog screens (lib/features/blog/presentation/
   screens/blog_list_screen.dart): sky/cream/ink surfaces, turquoise brand. */

:root {
  --sky: #ace2e9;
  --sky-deep: #8fd6e1;
  --cream: #fbf3e1;
  --ink: #14161a;
  --ink-soft: #4b5058;
  --brand: #2cabc9;
  --tag-blue: #2e6fea;
  --tag-blue-bg: #eaf1ff;
  --cta: #86d9e8;
  --cta-hover: #6fcbdc;
  --line: rgba(20, 22, 26, 0.12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

/* ── Header ─────────────────────────────────────────────── */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 18px;
}

.wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark span { color: var(--brand); }

.site-head .home-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

.site-head .home-link:hover { background: var(--cta); }

/* ── Breadcrumb ─────────────────────────────────────────── */
.crumb {
  font-size: 14px;
  color: var(--ink-soft);
  padding-bottom: 14px;
}

.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb .sep { margin: 0 6px; opacity: 0.6; }

/* ── Article card ───────────────────────────────────────── */
article.card {
  background: var(--cream);
  border-radius: 20px;
  padding: clamp(24px, 5vw, 48px);
  box-shadow: 0 10px 30px rgba(20, 22, 26, 0.08);
}

h1 {
  font-size: clamp(28px, 5.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tag-blue-bg);
  color: var(--tag-blue);
  font-weight: 700;
  font-size: 13px;
}

.lead {
  font-size: 19px;
  color: var(--ink-soft);
  border-left: 4px solid var(--brand);
  padding-left: 16px;
  margin: 0 0 12px;
}

/* ── Hero figure ────────────────────────────────────────── */
figure.hero { margin: 26px 0 8px; }

figure.hero img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

figcaption {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* ── Body typography ────────────────────────────────────── */
h2 {
  font-size: clamp(22px, 3.6vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
}

h3 {
  font-size: 19px;
  margin: 30px 0 10px;
}

p { margin: 0 0 18px; }

ul, ol { padding-left: 24px; margin: 0 0 18px; }
li { margin-bottom: 8px; }

li::marker { color: var(--brand); font-weight: 700; }

a { color: var(--tag-blue); }

strong { font-weight: 700; }

blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  background: rgba(44, 171, 201, 0.10);
  border-left: 4px solid var(--brand);
  border-radius: 0 12px 12px 0;
  color: var(--ink);
}

blockquote p { margin: 0; }

/* ── Quick answer / takeaways callouts ──────────────────── */
.callout {
  background: #ffffff;
  border: 1.5px solid var(--sky-deep);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 26px 0;
}

.callout h2, .callout h3 { margin-top: 0; }

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 26px 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 15px;
}

caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding: 12px 14px 4px;
  color: var(--ink);
}

th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  background: rgba(44, 171, 201, 0.12);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:nth-child(even) { background: rgba(251, 243, 225, 0.55); }

/* ── Steps ──────────────────────────────────────────────── */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }

ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  margin-bottom: 18px;
}

ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

ol.steps > li::marker { content: none; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.faq p { margin-bottom: 20px; }

/* ── Contextual figures ─────────────────────────────────── */
figure.ctx { margin: 28px 0; }

figure.ctx img, figure.ctx svg {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  background: #fff;
}

/* ── Related reading & footer CTA ──────────────────────── */
.related {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 24px;
  margin-top: 40px;
}

.related h2 { margin-top: 0; font-size: 20px; }

.related ul { margin-bottom: 0; }

.cta-box {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--ink);
  color: #f4efe2;
}

.cta-box p { margin: 0 0 14px; color: #a9aeb6; font-size: 15px; }

.cta-box a {
  display: inline-block;
  background: var(--cta);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 12px;
}

.cta-box a:hover { background: var(--cta-hover); }

footer.site-foot {
  margin-top: 34px;
  font-size: 14px;
  color: var(--ink-soft);
}

footer.site-foot a { color: var(--ink-soft); }

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap { padding: 16px 14px 48px; }
  article.card { border-radius: 16px; }
}


/* ══════════════════════════════════════════════════════════════════════
   2026-08-22 -- alignment pass.

   Three things landed together, and they are one decision, not three:

   1. THE PHANTOM SIDEBAR. These pages are public and have no app chrome,
      but they are still Ontaym pages, and a visitor arriving from the app
      should not see the content jump 280px to the left. `body` therefore
      reserves the docked sidebar's width (AppLayout.sidebarWidth = 280) at
      the tier where the app actually docks it (AppLayout.bpLaptop = 1024),
      and `.wrap` centres in what remains -- exactly what BlogPageRail does
      in blog_list_screen.dart. Below 1024 the app has no docked sidebar
      either, so neither does this.

   2. THE BRAND BAR. It is pulled back out of that gutter with a negative
      margin, because the mark must sit where it sits on ontaym.com -- on
      the 1080 marketing grid (AppLayout.publicMaxWidth), 44px in, 34px
      tall (OntaymLogoSizes.linkedInMatch) -- not indented by an app
      sidebar that is not drawn here. This replaces the old `.site-head`
      text wordmark, which was the only brand lockup on the site that was
      neither the right size nor in the right place.

   3. THE INDEX LIST. `/blog` had no static index.html at all, so the route
      fell through to the Flutter SPA and listed the single post that lives
      in Dart while 87 published articles sat unlinked. The styles below
      are that index.
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  body { padding-left: 280px; }
  /* Full-bleed again: the bar spans the viewport, gutter included. */
  .brand-bar { margin-left: -280px; }
}

/* ── Brand bar ──────────────────────────────────────────── */
.brand-bar {
  background: #fff;
  border-bottom: 1px solid #edf2f4;
}

.brand-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-mark {
  display: block;
  line-height: 0;
  border-radius: 6px;
}

.brand-mark img { display: block; width: 34px; height: 34px; }

.brand-bar .home-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.05);
}

.brand-bar .home-link:hover { background: var(--cta); color: var(--ink); }

@media (max-width: 1023px) { .brand-bar-inner { padding: 18px 32px; } }
@media (max-width: 767px) { .brand-bar-inner { padding: 14px 20px; } }

/* ── Index page ─────────────────────────────────────────── */
.page-head { padding: 8px 2px 20px; }

.page-head h1 {
  font-size: clamp(30px, 5vw, 42px);
  margin: 0 0 8px;
}

.page-head p { margin: 0; color: var(--ink-soft); font-size: 17px; }

.post-list {
  background: var(--cream);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 22, 26, 0.08);
}

.post-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
}

.post-row:last-child { border-bottom: 0; }
.post-row:hover { background: rgba(20, 22, 26, 0.04); }

/* The per-post thumbnails are the 1200x630 OG cards, whose left half is
   the post title set at 74px. Any crop that fits the whole card into a row
   thumbnail renders that headline as illegible mush -- and redundantly, at
   that, since the real title sits 16px to its right. So the tile zooms
   hard (500%) into the card's bottom-right quadrant, which is pure
   decoration: the sky/cream/turquoise circles, no type. The art is vector,
   so the zoom costs no sharpness. Region shown is roughly x 750-990,
   y 320-560 of the source viewBox; if the thumbnail generator ever moves
   type into that corner, re-aim `background-position` rather than
   reintroducing a crop that catches the headline. */
.post-row .thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  /* Fallback for the two posts with no generated card art (the Dart-rendered
     post, and the one article that predates the shared template): the same
     sky gradient the cards themselves open with, so a missing thumbnail
     reads as a plain tile rather than a broken image well. An inline
     background-image on the row overrides this. */
  background: linear-gradient(135deg, var(--sky), var(--sky-deep));
  background-repeat: no-repeat;
  background-size: 500% auto;
  background-position: 78% 82%;
  border: 1px solid rgba(20, 22, 26, 0.35);
}

.post-row .body { min-width: 0; }

.post-row h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 8px 0;
  letter-spacing: -0.01em;
}

.post-row .row-meta { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* The pill is a link child here, so it must not inherit the row's
   text-decoration reset as a colour change on hover. */
.post-row .pill { font-size: 12px; padding: 3px 10px; }

@media (max-width: 600px) {
  .post-row { gap: 12px; padding: 16px; }
  .post-row .thumb { width: 64px; height: 64px; }
  .post-row h2 { font-size: 17px; }
}


/* ══════════════════════════════════════════════════════════════════════
   2026-08-22 — ARTICLE TEMPLATE v2.

   The rewrite pass moved the articles from "a wall of prose in a cream
   card" to a structured document: a jump-to index, an extractable
   takeaways block, inline definitions, a sources list and an author
   footer. Everything below is additive — v1 pages keep rendering
   unchanged, because none of these class names existed before.

   Two rules governed the choices:

   * MEASURE. Body copy is capped at 68ch. The card can grow with the
     viewport; the line length may not. Long lines are the single biggest
     readability regression on a 920px card at desktop width.

   * NO LAYOUT SHIFT. Nothing here animates, loads a font, or needs
     JavaScript. Every figure carries width/height, so CLS stays at zero
     and the TOC is a plain <nav> of anchors a crawler can follow.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Reading measure ────────────────────────────────────── */
/* Applied to the text-level children only, so figures, tables and the
   callout blocks keep the full card width and stay full-bleed. */
article.card > p,
article.card > ul,
article.card > ol,
article.card > h2,
article.card > h3,
article.card > .faq > h3,
article.card > .faq > p {
  max-width: 68ch;
}

article.card > p { margin: 0 0 20px; }

/* Section headings get a hairline above them so the eye finds the seam
   without needing a bigger type jump. */
article.card > h2 {
  padding-top: 6px;
  border-top: 1px solid var(--line);
  margin-top: 48px;
}

article.card > h2:first-of-type { border-top: 0; }

/* ── Table of contents ──────────────────────────────────── */
.toc {
  background: #fff;
  border: 1.5px solid var(--sky-deep);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 28px 0;
}

.toc h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 10px;
  border-top: 0;
  padding-top: 0;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 28px;
}

.toc li {
  margin-bottom: 7px;
  break-inside: avoid;
  font-size: 15.5px;
}

.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .toc ol { columns: 1; }
}

/* ── Key takeaways ──────────────────────────────────────── */
.takeaways {
  background: rgba(44, 171, 201, 0.09);
  border-left: 4px solid var(--brand);
  border-radius: 0 16px 16px 0;
  padding: 18px 22px;
  margin: 28px 0;
}

.takeaways h2 {
  font-size: 18px;
  margin: 0 0 10px;
  border-top: 0;
  padding-top: 0;
}

.takeaways ul { margin: 0; padding-left: 22px; }
.takeaways li { margin-bottom: 10px; }
.takeaways li:last-child { margin-bottom: 0; }

/* ── Inline definitions ─────────────────────────────────── */
/* A <dl> of terms the article relies on. Kept visible on the page
   because the structured data may only describe what a reader can see. */
.deflist {
  margin: 26px 0;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.deflist dt {
  font-weight: 800;
  margin-top: 16px;
  color: var(--ink);
}

.deflist dd {
  margin: 4px 0 0;
  color: var(--ink-soft);
  max-width: 68ch;
}

.deflist dd:last-child { margin-bottom: 16px; }

/* ── Pull quote ─────────────────────────────────────────── */
.pull {
  margin: 30px 0;
  padding: 0 0 0 22px;
  border-left: 5px solid var(--brand);
  font-size: clamp(19px, 2.6vw, 22px);
  line-height: 1.42;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 60ch;
}

/* ── Tables: scroll affordance ──────────────────────────── */
/* The wrapper already scrolls; the fade tells a phone reader that it
   does. Pure CSS, no listener, so it costs nothing on INP. */
.table-wrap {
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(20,22,26,0.14), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(20,22,26,0.14), transparent) right / 14px 100% no-repeat,
    #fff;
  background-attachment: local, local, scroll, scroll, local;
}

caption { padding: 14px 14px 8px; line-height: 1.4; }

/* ── Sources ────────────────────────────────────────────── */
.sources {
  margin: 40px 0 0;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  font-size: 15px;
}

.sources h2 {
  font-size: 17px;
  margin: 0 0 10px;
  border-top: 0;
  padding-top: 0;
}

.sources ol { margin: 0; padding-left: 20px; }
.sources li { margin-bottom: 8px; color: var(--ink-soft); }

/* ── Author box ─────────────────────────────────────────── */
.authorbox {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 36px;
  padding: 20px 24px;
  background: #fff;
  border-radius: 16px;
}

.authorbox img {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: block;
}

.authorbox .who { font-weight: 800; margin: 0 0 4px; }

.authorbox p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ── Related reading with descriptions ──────────────────── */
.related ul { list-style: none; padding-left: 0; }

.related li {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.related li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.related a { font-weight: 700; text-decoration: none; }
.related a:hover { text-decoration: underline; }

.related .blurb {
  display: block;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.5;
}

/* ── Figures: give diagrams room to breathe ─────────────── */
figure.ctx img { border: 1px solid var(--line); }

figure.hero img { border: 1px solid rgba(20, 22, 26, 0.08); }

/* ── FAQ ────────────────────────────────────────────────── */
.faq h3 {
  font-size: 17.5px;
  margin-top: 22px;
  margin-bottom: 6px;
  max-width: 68ch;
}

.faq h3:first-child { margin-top: 4px; }

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 480px) {
  article.card > h2 { margin-top: 38px; }
  .toc, .takeaways, .sources, .related, .authorbox { padding: 16px 18px; }
  .authorbox { gap: 12px; }
  .pull { font-size: 18px; padding-left: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   2026-08-22 -- index thumbnails.

   The rows used to show a 500% zoom into the decorative corner of each
   post's generated OG card, because the card's left half is the headline
   and any honest crop rendered it as mush. That trick is retired: every
   post now has a real photograph, cropped square at source, so the tile
   can simply show the picture.

   The <picture> element is the flex child, and the <img> fills it. Width
   and height are on the img so the row reserves its space before the
   file arrives, which keeps CLS at zero on a cold load.
   ══════════════════════════════════════════════════════════════════════ */

.post-row picture.thumb {
  display: block;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sky), var(--sky-deep));
  border: 1px solid rgba(20, 22, 26, 0.14);
}

.post-row picture.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .post-row picture.thumb { width: 64px; height: 64px; }
}