/* Skirbo editorial layer: article/list typography and reusable sketch diagrams. */
:root {
  --editorial-body-size: 16px;
  --editorial-body-leading: 1.75;
  --editorial-paper: #fbf5e7;
  --editorial-ink: #282535;
  --editorial-violet: #7563b4;
  --editorial-indigo: #4a466c;
  --editorial-lime: #c2cb77;
}
.article-body { font-size: var(--editorial-body-size); line-height: var(--editorial-body-leading); }
.article-header h1 { font-size: 36px; line-height: 1.25; }
.article-body h2 { font-size: 24px; line-height: 1.35; }
.article-body h3 { font-size: 20px; line-height: 1.4; }
.blog-hero h1 { font-size: 40px; line-height: 1.2; }
.blog-hero .subtitle { font-size: 16px; }
.article-card h2 { font-size: 20px; }
.article-body figure { margin: 28px 0; }
.article-body figure > img { display: block; width: 100%; height: auto; border-radius: 12px; }
.article-body figcaption { font-size: 14px; line-height: 1.55; color: var(--text2, #94a3b8); margin-top: 10px; }
.sketch-figure { --text: var(--editorial-ink); padding: clamp(16px, 3vw, 28px); color: var(--editorial-ink); background: var(--editorial-paper); border: 1.5px solid var(--editorial-ink); border-radius: 22px 9px 24px 11px / 9px 20px 11px 24px; box-shadow: 4px 5px 0 rgba(117,99,180,.25); overflow-wrap: anywhere; }
.sketch-figure [hidden] { display: none; }
.sketch-figure h2, .sketch-figure h3, .sketch-figure strong { color: var(--editorial-ink); }
.sketch-figure h2 { margin-top: 0; }
.sketch-figure figcaption { color: #514b63; }
.sketch-label { font-size: 14px; color: #514b63; }
.sketch-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.sketch-card { position: relative; min-width: 0; padding: 16px; background: #fffdf7; border: 1.5px solid var(--editorial-ink); border-radius: 15px 5px 18px 6px / 6px 16px 6px 17px; }
.sketch-card strong { display: block; line-height: 1.35; }
.sketch-card input[type=range] { display: block; width: 100%; margin-top: 16px; accent-color: #66549d; }
.sketch-card output { display: block; font-size: 30px; font-weight: 800; margin-top: 8px; color: #584583; }
.sketch-result { border: 2px solid var(--editorial-ink); border-radius: 8px 18px 7px 15px; background: #e9e3f3; padding: 18px; margin: 18px 0; }
.sketch-result output { font-size: 34px; font-weight: 800; padding-right: 8px; }
.sketch-figure input[type=checkbox] { accent-color: #66549d; width: 18px; height: 18px; vertical-align: middle; margin-right: 8px; }
.sketch-flow { display: grid; gap: 10px; margin: 24px 0; }
.sketch-step { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px; border: 1.5px solid var(--editorial-ink); border-radius: 7px 16px 8px 18px; background: #fffdf7; }
.sketch-step p { margin: 4px 0 0; }
.sketch-number { width: 32px; height: 32px; display: grid; place-items: center; background: #e3dced; border: 1px solid var(--editorial-ink); border-radius: 47% 53% 49% 51%; font-weight: 800; }
.sketch-arrow { width: 30px; height: 32px; margin: 0 0 0 30px; fill: none; stroke: var(--editorial-ink); stroke-width: 1.8; }
.sketch-choices { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.sketch-choices button { font: inherit; font-size: 15px; padding: 10px 14px; color: var(--editorial-ink); background: #fffdf7; border: 1.5px solid var(--editorial-ink); border-radius: 8px 13px 6px 12px; cursor: pointer; }
.sketch-choices button[aria-pressed=true] { background: var(--editorial-indigo); color: #fff; }
.sketch-status { border-left: 4px solid var(--editorial-violet); padding: 12px 16px; background: #eee8f4; }
.sketch-figure :focus-visible { outline: 3px solid #554392; outline-offset: 4px; }
@media (max-width: 600px) {
  .article-header h1 { font-size: 26px; }
  .article-body h2 { font-size: 22px; }
  .article-body h3 { font-size: 19px; }
  .blog-hero h1 { font-size: 28px; }
  .article-card h2 { font-size: 19px; }
  .sketch-grid { grid-template-columns: 1fr 1fr; }
  .sketch-card { padding: 12px; }
}
@media (max-width: 380px) { .sketch-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sketch-figure * { scroll-behavior: auto; } }

/* A second imperfect ink stroke belongs to the frame, never to text. */
.sketch-card::after, .sketch-step::after { content: ""; position: absolute; inset: 2px -1px -2px 1px; border: 1px solid rgba(40,37,53,.28); border-radius: 7px 16px 6px 19px / 15px 6px 17px 7px; transform: rotate(-.35deg); pointer-events: none; }
.sketch-step { position: relative; }
.sketch-aside { position: relative; padding: 12px 16px; margin: 20px 0 24px; max-width: 460px; background: #e7eacb; border: 1.5px solid #282535; border-radius: 47% 12% 39% 9% / 10% 35% 12% 32%; font-weight: 600; }
.sketch-aside::after { content: ""; position: absolute; left: 28px; bottom: -10px; width: 14px; height: 15px; background: #e7eacb; border-right: 1.5px solid #282535; border-bottom: 1.5px solid #282535; transform: skew(-22deg) rotate(35deg); }

/* Editorial emphasis remains text, with readable contrast in both palettes. */
.article-body strong, .article-body b { font-weight: 750; color: var(--text, #f1f5f9); }
.article-body em, .article-body i { font-style: italic; }
.article-body blockquote, .editorial-quote {
  position: relative; box-sizing: border-box; margin: 30px 0; padding: 28px 24px 22px 58px;
  background: var(--editorial-paper); color: var(--editorial-ink);
  border: 1.5px solid var(--editorial-ink); border-left: 5px solid var(--editorial-violet);
  border-radius: 5px 19px 8px 15px; box-shadow: 4px 5px 0 rgba(117,99,180,.25);
  font-size: 18px; line-height: 1.6; font-style: normal; overflow-wrap: anywhere;
}
.article-body blockquote::before, .editorial-quote::before {
  content: "“"; position: absolute; left: 15px; top: 4px; font: 64px/1.2 Georgia,serif;
  color: #66508e; pointer-events: none;
}
.article-body blockquote p, .editorial-quote p { margin: 0 0 12px; }
.article-body blockquote p:last-child, .editorial-quote p:last-child { margin-bottom: 0; }
.article-body blockquote strong, .editorial-quote strong { color: var(--editorial-ink); }
.article-body blockquote footer, .editorial-quote footer, .editorial-quote-source {
  margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #c9bfd7;
  font-size: 14px; line-height: 1.55; color: #514b63;
}
.article-body blockquote a, .editorial-quote a { color: #554080; text-decoration: underline; }
.editorial-quote cite { font-style: normal; }
.editorial-icon { display: inline-block; width: 40px; height: 40px; flex: 0 0 auto; vertical-align: middle; }
.sketch-card > .editorial-icon { display: block; margin-bottom: 8px; }
.editorial-icon-heading { display: flex; align-items: center; gap: 12px; }
.editorial-icon-catalog { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.editorial-icon-sample { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border: 1px solid #d0c7dc; border-radius: 8px 15px 6px 12px; font-size: 14px; text-align: center; }
.editorial-icon-sample .editorial-icon { width: 52px; height: 52px; }
@media(max-width:600px) {
  .article-body blockquote, .editorial-quote { padding: 23px 16px 19px 43px; font-size: 17px; }
  .article-body blockquote::before, .editorial-quote::before { left: 8px; font-size: 54px; }
  .editorial-icon-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); }
}