/* Toodlepip theme. Fonts are self-hosted: Instrument Sans (OFL 1.1), Roboto Slab (Apache 2.0). Licences in ../fonts/. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-slab-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-slab-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --brand: #5957a6;        /* sampled from the logo GIF; 6.3:1 on white */
  --brand-dark: #2a2364;   /* darkest ink in the logo */
  --tint: #f3f3f9;
  --ink: #333333;
  --text: #555555;
  --muted: #707070;        /* 4.95:1 on white (the old #aaa failed AA) */
  --rule-heavy: #444444;
  --rule-light: #e5e5e5;

  --georgia: Georgia, "Times New Roman", Times, serif;
  --instrument: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --slab: "Roboto Slab", Rockwell, "Courier New", Georgia, serif;

  --body-font: var(--gh-font-body, var(--georgia));
  --fs: 1.1875rem;
  --lh: 1.8;
  --head-font: var(--gh-font-heading, var(--slab));
  --head-weight: 400;
  --head-track: 0;

  --measure: 44rem;        /* 704px text column */
  --date-col: 9rem;
  --gutter: 1.25rem;
}
.pal-teal  { --brand: #1d6b73; --brand-dark: #0f3f45; --tint: #f0f6f6; }
.pal-brick { --brand: #a1402a; --brand-dark: #6e2616; --tint: #f8f3f1; }
.body-instrument { --body-font: var(--gh-font-body, var(--instrument)); --fs: 1.125rem; --lh: 1.7; }
.head-instrument { --head-font: var(--gh-font-heading, var(--instrument)); --head-weight: 600; --head-track: -0.015em; }
.head-georgia    { --head-font: var(--gh-font-heading, var(--georgia)); --head-weight: 400; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--body-font);
  font-size: var(--fs);
  line-height: var(--lh);
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--brand-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--head-font); font-weight: var(--head-weight); letter-spacing: var(--head-track); color: var(--ink); line-height: 1.25; }

.skip-link { position: absolute; left: 1rem; top: -4rem; background: #fff; color: var(--brand-dark); padding: 0.5rem 1rem; z-index: 10; border: 2px solid var(--brand); }
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; max-width: calc(var(--date-col) + var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header ---------- */
.site-header { padding-top: 1rem; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-bottom: 0.9rem; border-bottom: 5px solid var(--rule-heavy); }
.logo { display: block; line-height: 0; }
.logo img { display: block; width: 200px; height: auto; max-height: 72px; }
.head-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1.75rem; font-family: var(--head-font); }
.primary-nav .nav, .secondary-nav .nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.primary-nav a { color: var(--ink); text-decoration: none; font-size: 1.0625rem; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.primary-nav a:hover, .primary-nav .nav-current a { color: var(--brand); border-bottom-color: var(--brand); }
.social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.35rem; }
.social a { display: block; padding: 0.3rem; line-height: 0; }
.social img { display: block; }
.tagline { margin: 0; padding: 0.7rem 0 0.8rem; text-align: center; font-family: var(--head-font); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 1.5625rem; line-height: 1.3; color: var(--ink); border-bottom: 1px solid var(--rule-light); }

/* ---------- Layout rows: date in the left margin on wide screens ---------- */
.site-main { padding: 1.5rem 0 2.5rem; }
.row { display: block; padding: 1.75rem 0; }
.list .row + .row { border-top: 1px solid var(--rule-light); }
.row-main { min-width: 0; }
.post-date-spacer { display: none; }

/* Narrow: a clear dateline above the title, at least body size */
.post-date { display: block; margin: 0 0 0.35rem; color: var(--brand); font-family: var(--head-font); font-weight: 600; font-size: var(--fs); line-height: 1.4; }
.d-day, .d-my { display: inline; }

@media (min-width: 60em) {
  .row { display: grid; grid-template-columns: var(--date-col) minmax(0, 1fr); column-gap: 0; align-items: start; padding: 2rem 0; }
  .post-date-spacer { display: block; }
  .post-date { padding-right: 1.25rem; margin: 0; text-align: left; }
  .d-day { display: block; font-size: 3.5rem; line-height: 0.95; font-weight: var(--head-weight); letter-spacing: -0.02em; }
  .d-my { display: block; margin-top: 0.35rem; font-family: var(--body-font); font-style: italic; font-weight: 400; font-size: 1rem; line-height: 1.3; color: var(--muted); }
}

/* ---------- Post list ---------- */
.card-image { display: block; margin: 0 0 1rem; line-height: 0; }
.card-image img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border: 1px solid var(--rule-light); }
.card-title { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--brand); text-decoration: underline; }
.byline { margin: 0.4rem 0 0.9rem; color: var(--muted); font-style: italic; font-size: 1rem; line-height: 1.5; }
.byline a { color: var(--muted); text-decoration: none; }
.byline a:hover { text-decoration: underline; }
.byline a:hover { color: var(--brand-dark); }
.card-excerpt { margin: 0; }
.read-more { white-space: nowrap; }

.archive-head { padding-bottom: 0.5rem; }
.archive-kind { margin: 0; color: var(--muted); font-style: italic; font-size: 1rem; }
.archive-title { margin: 0.1rem 0 0.4rem; font-size: 2.25rem; }
.archive-desc { margin: 0; }

.pager { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule-light); font-size: 1.0625rem; }
.pager-count { color: var(--muted); font-style: italic; font-size: 1rem; }
.pager-prev, .pager-next { flex: 1 1 8rem; }
.pager-next { text-align: right; }
@media (min-width: 60em) { .pager { margin-left: var(--date-col); } }

/* ---------- Single post / page ---------- */
.entry-head { margin-bottom: 1.5rem; }
.entry-title { margin: 0; font-size: 2.25rem; line-height: 1.2; }
.entry-head .byline { margin-bottom: 0; }
.feature { margin: 0 0 1.75rem; }
.feature img { display: block; width: 100%; }
figcaption { color: var(--muted); font-size: 0.9rem; font-style: italic; line-height: 1.5; margin-top: 0.5rem; text-align: center; }

.post-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 5px solid var(--rule-heavy); }
.post-nav a { flex: 1 1 14rem; display: block; text-decoration: none; color: var(--ink); padding: 0.25rem 0; }
.post-nav-newer { text-align: right; }
.pn-label { display: block; color: var(--brand); font-size: 1rem; font-style: italic; }
.pn-title { display: block; font-family: var(--head-font); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 1.25rem; line-height: 1.3; }
.post-nav a:hover .pn-title { color: var(--brand); text-decoration: underline; }

/* ---------- Content ---------- */
.gh-content > * { margin: 0 0 1.4em; }
.gh-content > :last-child { margin-bottom: 0; }
.gh-content::after { content: ""; display: table; clear: both; }
.gh-content h2 { font-size: 1.75rem; margin: 2em 0 0.6em; }
.gh-content h3 { font-size: 1.4rem; margin: 1.8em 0 0.5em; }
.gh-content h4, .gh-content h5, .gh-content h6 { font-size: 1.15rem; margin: 1.6em 0 0.4em; }
.gh-content strong, .gh-content b { color: var(--ink); }
.gh-content ul, .gh-content ol { padding-left: 1.5em; }
.gh-content li { margin: 0.35em 0; }
.gh-content li > ul, .gh-content li > ol { margin-top: 0.35em; }
.gh-content img { max-width: 100% !important; height: auto; }
.gh-content a img { border: 0; }
.gh-content iframe, .gh-content embed, .gh-content object, .gh-content video { max-width: 100%; }
.gh-content hr { border: 0; border-top: 1px solid var(--rule-light); margin: 2.5em 0; }
.gh-content blockquote { margin: 0 0 1.4em; padding: 0.1em 0 0.1em 1.25em; border-left: 4px solid var(--brand); color: var(--ink); font-style: italic; }
.gh-content blockquote > :last-child { margin-bottom: 0; }
.gh-content code, .gh-content kbd, .gh-content samp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; background: var(--tint); padding: 0.1em 0.35em; border-radius: 2px; color: var(--ink); overflow-wrap: anywhere; }
.gh-content pre { background: var(--tint); border-left: 4px solid var(--brand); padding: 1em 1.1em; overflow-x: auto; font-size: 0.85rem; line-height: 1.55; max-width: 100%; tab-size: 4; }
.gh-content pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
.gh-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.95em; line-height: 1.5; }
.gh-content th, .gh-content td { border: 1px solid var(--rule-light); padding: 0.5em 0.75em; text-align: left; vertical-align: top; }
.gh-content th { background: var(--tint); color: var(--ink); }
.gh-content figure { margin: 0 0 1.4em; }
.gh-content figure img { display: block; margin: 0 auto; }
.gh-content .alignleft, .gh-content img[align="left"] { float: left; margin: 0.3em 1.25em 0.75em 0; }
.gh-content .alignright, .gh-content img[align="right"] { float: right; margin: 0.3em 0 0.75em 1.25em; }
.gh-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Old inline floats (the Work page's 225px link column, floated images) */
.gh-content [style*="float"] { max-width: 100%; }
@media (max-width: 40em) {
  .gh-content [style*="float"], .gh-content .alignleft, .gh-content .alignright, .gh-content img[align] {
    float: none !important; width: auto !important; max-width: 100% !important; margin: 0 0 1.2em !important;
  }
}

/* Koenig cards. Wide/full are only a little wider than the text, never edge to edge. */
.gh-content .kg-width-wide, .gh-content .kg-width-full { max-width: 100%; }
@media (min-width: 52em) {
  .gh-content .kg-width-wide, .gh-content .kg-width-full { width: calc(100% + 6rem); max-width: none; margin-left: -3rem; margin-right: -3rem; }
}
.gh-content .kg-image, .gh-content .kg-card img { max-width: 100%; height: auto; }
.kg-image-card, .kg-gallery-card, .kg-embed-card, .kg-video-card, .kg-bookmark-card { max-width: 100%; }
.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.kg-embed-card iframe { max-width: 100%; }
.kg-gallery-container { display: flex; flex-direction: column; max-width: 100%; }
.kg-gallery-row { display: flex; flex-direction: row; justify-content: center; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.kg-gallery-row:not(:first-of-type) { margin: 0.5em 0 0; }
.kg-gallery-image:not(:first-of-type) { margin: 0 0 0 0.5em; }
.kg-bookmark-container { display: flex; flex-wrap: wrap; border: 1px solid var(--rule-light); color: var(--ink); text-decoration: none; min-height: 100px; }
.kg-bookmark-content { flex: 1 1 18rem; padding: 1rem 1.25rem; }
.kg-bookmark-title { font-family: var(--head-font); font-size: 1.1rem; line-height: 1.3; color: var(--ink); }
.kg-bookmark-description, .kg-bookmark-metadata { font-size: 0.9rem; line-height: 1.5; color: var(--muted); margin-top: 0.4rem; }
.kg-bookmark-metadata { display: flex; align-items: center; gap: 0.5rem; }
.kg-bookmark-icon { width: 1.25rem; height: 1.25rem; }
.kg-bookmark-thumbnail { flex: 0 1 14rem; position: relative; min-height: 8rem; }
.kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kg-callout-card { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--tint); border-left: 4px solid var(--brand); }
.kg-callout-emoji { flex: none; }
.kg-callout-text { flex: 1; }
.kg-toggle-card { border: 1px solid var(--rule-light); padding: 0.75rem 1rem; }
.kg-toggle-heading-text { font-family: var(--head-font); font-size: 1.1rem; margin: 0; }
.kg-toggle-content { margin-top: 0.5rem; }
.kg-button-card { display: flex; }
.kg-button-card.kg-align-center { justify-content: center; }
.kg-btn { display: inline-block; padding: 0.5em 1.1em; background: var(--brand); color: #fff; text-decoration: none; font-family: var(--head-font); font-size: 1rem; line-height: 1.4; }
.kg-btn:hover { background: var(--brand-dark); color: #fff; }
.kg-header-card, .kg-product-card, .kg-file-card, .kg-audio-card, .kg-signup-card { max-width: 100%; padding: 1rem 1.25rem; border: 1px solid var(--rule-light); }
.kg-header-card h2, .kg-header-card h3 { margin-top: 0; }
.kg-file-card-container { display: flex; align-items: center; gap: 1rem; color: var(--ink); text-decoration: none; }
.kg-file-card-title { font-weight: 700; }
.kg-file-card-caption { color: var(--muted); font-size: 0.9rem; }
.kg-audio-card audio, .kg-video-card video { width: 100%; }
.kg-blockquote-alt { border-left: 0 !important; padding: 0 1em !important; text-align: center; font-size: 1.4em; }
.kg-code-card pre { margin: 0; }
.kg-card figcaption, .gh-content figcaption { text-align: center; }
.kg-nft-card, .kg-nft-card a { max-width: 100%; }
.kg-align-center { text-align: center; }

/* ---------- Archived WordPress comments ---------- */
.wp-comments-archive { margin-top: 3.5rem; font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
.wp-comments-archive hr { border: 0; border-top: 1px solid var(--rule-light); margin: 0 0 1.5rem; }
.wp-comments-archive h3 { margin: 0 0 0.4rem; font-size: 1.1rem; color: var(--ink); }
.wp-comments-archive > p > em { color: var(--muted); }
.wp-comments-archive p { margin: 0 0 0.6em; }
.wp-comments-archive .wp-comment { margin: 1.25rem 0 0; padding: 0.1rem 0 0.1rem 1rem; border-left: 2px solid var(--rule-light); }
.wp-comments-archive .wp-comment strong { color: var(--ink); font-weight: 600; }
.wp-comments-archive .wp-comment p:first-child { margin-bottom: 0.25em; }
.wp-comments-archive .wp-comment > :last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 5px solid var(--rule-heavy); padding: 1.25rem 0 2.5rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; text-align: center; }
.site-footer p { margin: 0 0 0.75rem; }
.blurb { max-width: 40rem; margin-left: auto !important; margin-right: auto !important; }
.secondary-nav { margin: 0 0 0.75rem; }
.secondary-nav .nav { justify-content: center; }
.secondary-nav a, .site-footer a { color: var(--brand); }
.copy { font-size: 0.875rem; }

/* ---------- Small screens ---------- */
@media (max-width: 40em) {
  :root { --gutter: 1rem; }
  .logo img { width: 160px; }
  .head-row { justify-content: center; }
  .head-tools { justify-content: center; }
  .tagline { font-size: 1.3rem; }
  .entry-title { font-size: 1.9rem; }
  .card-title { font-size: 1.4rem; }
  .archive-title { font-size: 1.9rem; }
  .row { padding: 1.5rem 0; }
  .post-nav-newer { text-align: left; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .site-header .social, .post-nav, .skip-link, .pager { display: none; } a { color: inherit; } }