/* Blog layouts share the site's fonts, paper and existing illustrations. */
body.blog-page { background-color: var(--paper); }
body.blog-page .wrap { width: min(1160px, calc(100% - 64px)); }
body.blog-page .crumbs { padding-block: 25px 12px; }
body.blog-page :is(a, summary):focus-visible { outline: 3px solid var(--navy); outline-offset: 5px; }
body.blog-page :is(section[id], h2[id]) { scroll-margin-top: 130px; }
.blog-masthead { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 34px 0 40px; }
body.blog-page .blog-eyebrow { color: var(--navy); font: 1.2rem/1.6 GveretLevin, sans-serif; margin-bottom: 18px; }
body.blog-page .blog-masthead h1 { font-size: clamp(3rem, 5.8vw, 5rem); line-height: 1.12; margin-bottom: 22px; }
.blog-dot { color: var(--navy); }
body.blog-page .blog-intro { color: var(--ink-soft); max-width: 49ch; font-size: 1.08rem; line-height: 1.95; margin: 0; }
.blog-mascot { display: grid; justify-items: center; margin-inline-end: 42px; transform: rotate(-7deg); }
.blog-mascot span { font: 2.15rem/1.4 PatrickHand, sans-serif; color: var(--navy); }
.blog-mascot img { width: 150px; height: 150px; }
.blog-jumps { display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 38px; }
.blog-jumps a { display: flex; align-items: center; min-height: 44px; gap: 18px; text-decoration: none; font-size: .9rem; }
.blog-jumps a:hover { text-decoration: underline; }
.blog-jumps span { color: var(--navy); }
.blog-featured { display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--ink); border-radius: 5px 5px 32px 5px; overflow: hidden; background: var(--card); }
.blog-featured-copy { padding: clamp(28px, 4vw, 50px); align-self: center; }
body.blog-page .blog-kicker { font-size: .82rem; color: var(--navy); margin: 0 0 16px; line-height: 1.7; }
.blog-kicker span { color: var(--ink-soft); }
body.blog-page .blog-featured h2 { font-size: clamp(1.8rem, 3.1vw, 2.7rem); line-height: 1.28; margin: 0 0 20px; }
.blog-featured h2 a { text-decoration: none; color: var(--ink); }
.blog-featured h2 a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.blog-featured-copy > p:not(.blog-kicker) { color: var(--ink-soft); line-height: 1.95; }
.blog-art { position: relative; display: grid; place-items: center; min-width: 0; isolation: isolate; background-image: url('/assets/brand/paper.svg'); }
.blog-art--yellow { background-color: #f3dea0; }
.blog-art--blue { background-color: #dce5ef; }
.blog-art--pink { background-color: #eddcd5; }
.blog-art img { display: block; width: 82%; height: 100%; max-height: 380px; object-fit: contain; }
.blog-featured > .blog-art { min-height: 390px; border-inline-start: 1px solid var(--ink); }
.blog-art-note { position: absolute; top: 22px; inset-inline-end: 24px; width: 88px; height: 105px; display: flex; align-items: center; flex-direction: column; justify-content: center; background: #fffcf5; border: 1px solid var(--ink); transform: rotate(-9deg); box-shadow: 3px 4px 0 #252a3515; font-size: .65rem; }
.blog-art-note strong { font: 3.1rem/.95 PatrickHand, sans-serif; color: var(--navy); }
.blog-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 30px; min-height: 50px; padding: 12px 22px; background: var(--navy); color: white; border: 1px solid var(--navy); border-radius: 5px; text-decoration: none; font-size: .95rem; }
.blog-button:hover { background: #25358e; color: white; }
.blog-button span { font-size: 1.4rem; }
.blog-section { margin-top: 64px; }
.blog-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 24px; }
body.blog-page .blog-section-heading h2 { margin: 0; font-size: 1.75rem; }
.blog-section-heading > span, .blog-section-heading > a { color: var(--ink-soft); font-size: .82rem; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.blog-card { min-width: 0; }
.blog-card > a { display: block; text-decoration: none; color: var(--ink); border-radius: 5px; }
.blog-card .blog-art { height: 240px; border: 1px solid var(--line); border-radius: 5px 5px 25px 5px; }
.blog-card .blog-art img { max-height: 235px; width: 75%; }
.blog-card-copy { padding: 24px 2px 0; }
body.blog-page .blog-card h3 { font-size: 1.55rem; line-height: 1.4; margin: 0 0 12px; }
.blog-card-copy > p:not(.blog-kicker) { font-size: .95rem; line-height: 1.9; color: var(--ink-soft); }
.blog-read { display: flex; align-items: center; gap: 18px; color: var(--navy); font-size: .88rem; min-height: 44px; }
.blog-card > a:hover h3, .blog-guide:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.blog-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-block: 26px; border-block: 1px solid var(--line); }
.blog-guide { display: flex; align-items: flex-start; gap: 22px; padding-block: 10px; text-decoration: none; color: var(--ink); }
.blog-guide-number { font: 3.5rem/1 PatrickHand, sans-serif; color: #6b7063; }
body.blog-page .blog-guide h3 { font-size: 1.25rem; margin: 0 0 12px; }
.blog-guide p:not(.blog-kicker) { font-size: .9rem; color: var(--ink-soft); }
body.blog-page .blog-editorial { max-width: 76ch; color: var(--ink-soft); font-size: .8rem; margin: 28px 0 0; }
/* Reading pages: a narrow text measure, with navigation alongside it. */
body.blog-page .blog-article-hero { position: static; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 50px; background: transparent; border: 0; padding: 32px 0 48px; }
body.blog-page .blog-article-hero h1 { font-size: clamp(2.1rem, 3.5vw, 3.2rem); line-height: 1.3; }
.blog-article-hero .blog-art { height: 310px; border-radius: 50% 45% 8px 8px; }
.blog-article-hero .blog-art img { width: 94%; min-height: 0; max-height: 100%; }
body.blog-page .blog-byline { font-size: .78rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.blog-reading-layout { display: grid; grid-template-columns: 230px minmax(0, 700px); gap: 60px; padding-top: 38px; border-top: 1px solid var(--line); align-items: start; }
.blog-toc { position: sticky; top: 120px; max-height: calc(100svh - 144px); overflow-y: auto; }
.blog-toc > p { font-family: Rubik, sans-serif; }
.blog-toc ol { list-style: none; padding: 0; margin: 0; }
.blog-toc li { margin: 0; border-top: 1px solid var(--line); }
.blog-toc li a { display: block; padding-block: 13px; font-size: .83rem; text-decoration: none; color: var(--ink-soft); }
.blog-toc li a:hover { text-decoration: underline; color: var(--navy); }
.blog-back { display: inline-flex; gap: 15px; align-items: center; min-height: 44px; margin-top: 22px; font-size: .85rem; }
.blog-prose { min-width: 0; font-size: 1.05rem; line-height: 2; }
body.blog-page .blog-prose h2 { font-size: 1.65rem; margin-block: 42px 18px; }
.blog-prose :lang(en) { font-family: Arial, sans-serif; }
.blog-takeaway { padding: 24px 28px; background: #f3e6bd url('/assets/brand/paper.svg'); border-inline-start: 3px solid #ad8127; border-radius: 3px; }
.blog-takeaway strong { display: block; font: 800 1.05rem/1.5 Rubik, sans-serif; margin-bottom: 10px; }
body.blog-page .blog-takeaway p { margin: 0; }
.blog-steps { padding-inline-start: 25px; }
.blog-steps li { padding-inline-start: 8px; margin-bottom: 18px; }
.blog-steps li::marker { color: var(--navy); font-weight: bold; }
.blog-dialogue { background: #eef0f5; border-inline-start: 3px solid var(--navy); padding: 24px 28px; margin-block: 24px; }
body.blog-page .blog-dialogue p:last-child { margin: 0; }
.blog-sources { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .85rem; line-height: 1.9; }
body.blog-page .blog-sources h2 { margin-top: 22px; font-size: 1.3rem; }
.blog-sources > a { display: block; text-align: left; overflow-wrap: anywhere; }
.blog-article-end { display: flex; align-items: center; gap: 18px; margin-top: 38px; padding-block: 20px; border-block: 1px solid var(--line); font-size: .85rem; }
body.blog-page .blog-article-end p { margin: 0; }
.blog-related { padding-top: 35px; border-top: 1px solid var(--line); }
body.blog-article--continuous .blog-article-hero { display: block; max-width: 760px; margin-inline: auto; }
.blog-article--continuous .blog-prose { max-width: 760px; margin-inline: auto; }
.blog-article--continuous .blog-prose > p[id] { scroll-margin-top: 112px; }
.memory-kitchen-scene { max-width: 700px; margin: 26px auto 32px; }
.memory-kitchen-scene img { display: block; width: 100%; height: auto; }
.memory-results { margin: 36px 0 28px; padding: 28px 0; border-block: 1px solid var(--line); }
.memory-results figcaption { font: 700 1.1rem/1.6 Rubik, sans-serif; margin-bottom: 24px; }
.memory-results-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
body.memory-article .memory-result-time { font-weight: 700; margin: 0 0 18px; }
.memory-result-group dl { margin: 0; }
.memory-result + .memory-result { margin-top: 18px; }
.memory-result dt { font-size: .85rem; line-height: 1.5; margin-bottom: 6px; }
.memory-result dd { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem; align-items: center; gap: 10px; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.memory-result-track { display: block; height: 26px; background: repeating-linear-gradient(to left, transparent 0, transparent calc(25% - 1px), #bcbab1 calc(25% - 1px), #bcbab1 25%) #efeee8; border-radius: 3px; overflow: hidden; }
.memory-result-fill { display: block; height: 100%; background: var(--navy); border-radius: 3px; }
.memory-result-fill--reading { background: #b17b1e; }
.memory-result-axis { display: flex; justify-content: space-between; margin-top: 9px; margin-inline-end: calc(2.5rem + 10px); color: var(--ink-soft); font-size: .75rem; font-variant-numeric: tabular-nums; }
@media (max-width: 540px) {
  .memory-results-groups { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
/* Show recommendations: official artwork and accessible, text-based guides. */
.show-figure { margin: 20px 0 24px; min-width: 0; }
.show-figure img { display: block; width: 100%; height: auto; border-radius: 6px; background: #e7edf2; }
.show-figure figcaption { font-size: .7rem; line-height: 1.7; color: var(--ink-soft); padding: 9px 2px 0; }
.show-figure figcaption a { color: inherit; }
.show-figure--portrait img { height: 240px; object-fit: contain; padding: 16px; background: #e3edf3; }
body.blog-page .shows-hero { align-items: start; }
.shows-hero .show-figure { margin-top: 10px; }
.shows-jump { display: inline-block; margin-top: 18px; padding-block: 8px; }
.blog-featured--shows { align-items: center; }
.blog-featured--shows > .show-figure { margin: 0; padding: 24px; }
.show-overview { background: #e9edf5; padding: 24px; border-radius: 6px 6px 24px 6px; margin-bottom: 36px; }
body.blog-page .show-overview h2 { margin-top: 0; }
.show-overview > p { font-size: .88rem; line-height: 1.9; }
.show-note { color: var(--ink-soft); margin-bottom: 0; }
.blog-table-scroll { max-width: 100%; overflow-x: auto; margin-block: 20px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); }
.blog-table-scroll:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.blog-table-scroll table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .84rem; line-height: 1.8; }
.blog-table-scroll caption { text-align: start; padding: 14px; font-weight: 700; background: #f0eee7; }
.blog-table-scroll :is(th, td) { text-align: start; vertical-align: top; padding: 14px; border-bottom: 1px solid var(--line); }
.blog-table-scroll thead { background: #f0eee7; }
.blog-table-scroll tr:last-child :is(th, td) { border-bottom: 0; }
.show-overview .blog-table-scroll { border: 0; }
.blog-prose .show-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 46px 0 20px; padding-top: 30px; border-top: 1px solid var(--line); font-size: 1.8rem; line-height: 1.5; scroll-margin-top: 110px; }
.show-heading > span:last-child { min-width: 0; text-align: left; }
.show-number { flex-shrink: 0; font: 3.5rem/1 PatrickHand, sans-serif; color: var(--navy); }
.show-english { display: block; font-size: .95rem; font-weight: normal; text-align: start; color: var(--ink-soft); }
.show-watch { font-size: .85rem; }
.show-watch a { display: inline-block; padding-block: 8px; }
.blog-citation { font-size: .75em; white-space: nowrap; unicode-bidi: isolate; direction: ltr; text-underline-offset: 3px; }
.blog-reference-list { padding-inline-start: 28px; }
.blog-reference-list li { padding: 12px 4px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.blog-reference-list li::marker { font-weight: 700; color: var(--navy); }
.citation-back { display: block; font-size: .75rem; margin-top: 5px; }
body.blog-page :is(.blog-reference-list li, .blog-citation):target { background-color: #f4e6b6; }
body.blog-page :is(.blog-reference-list li, .blog-citation) { scroll-margin-top: 130px; }
#subtitle-table { min-width: 0; }
#subtitle-table th:first-child { width: 35%; }
#subtitle-table td:first-child { font-weight: 600; background: #e9edf5; }
@media (max-width: 960px) {
  .blog-mascot { margin-inline-end: 0; }
  .blog-reading-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 32px; }
  body.blog-page .blog-article-hero { gap: 28px; grid-template-columns: 1.6fr 1fr; }
  .blog-article-hero .blog-art { height: 260px; }
}
@media (max-width: 700px) {
  body.blog-page .wrap { width: calc(100% - 36px); }
  .blog-masthead { padding-block: 24px 30px; gap: 12px; }
  body.blog-page .blog-masthead h1 { font-size: 2.85rem; }
  .blog-mascot { display: none; }
  .blog-desktop-break { display: none; }
  .blog-jumps { gap: 4px 20px; margin-bottom: 26px; }
  .blog-jumps a { font-size: .8rem; gap: 8px; }
  .blog-featured { grid-template-columns: minmax(0, 1fr); }
  .blog-featured-copy { padding: 28px 24px; }
  .blog-featured > .blog-art { min-height: 0; height: 270px; border-inline-start: 0; border-top: 1px solid var(--ink); }
  .blog-featured .blog-art img { max-height: 270px; }
  .blog-section { margin-top: 42px; }
  .blog-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .blog-grid, .blog-guide-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .blog-card-copy { padding-top: 20px; }
  .blog-guide-grid { gap: 16px; }
  .blog-guide + .blog-guide { border-top: 1px solid var(--line); padding-top: 26px; }
  body.blog-page .blog-article-hero { grid-template-columns: minmax(0, 1fr); padding-block: 22px 30px; }
  .blog-article-hero .blog-art { height: 220px; border-radius: 5px 5px 24px 5px; }
  .blog-reading-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 24px; }
  .blog-toc { position: static; max-height: none; }
  .blog-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .blog-toc li a { font-size: .8rem; }
  .blog-toc .blog-back { display: none; }
  .blog-prose { font-size: 1rem; }
  .blog-takeaway, .blog-dialogue { padding: 20px; }
  .show-overview { padding: 20px 14px; }
  .blog-prose .show-heading { font-size: 1.5rem; gap: 14px; }
  .show-number { font-size: 2.8rem; }
  .blog-featured--shows > .show-figure { padding: 0 24px 24px; }
  #subtitle-table :is(th, td) { padding: 10px; }
}
@media print {
  .blog-toc, .blog-related, .blog-article-end, .blog-mascot, .blog-jumps { display: none; }
  body.blog-page .wrap { width: 100%; }
  .blog-reading-layout { display: block; }
  .blog-prose { max-width: none; }
  .blog-article-hero .blog-art { display: none; }
  body.blog-page .blog-article-hero { display: block; }
  .shows-hero .show-figure { display: none; }
  .blog-table-scroll { overflow: visible; }
  .blog-table-scroll table { min-width: 0; }
  .show-figure { break-inside: avoid; }
}

/* Homepage cobalt, yellow and ink on the blog. */
body.blog-page .blog-featured { border:3px solid var(--ink); border-radius:24px; box-shadow:8px 10px 0 var(--ink); }
body.blog-page .blog-featured > .blog-art { border-inline-start:3px solid var(--ink); }
body.blog-page .blog-button { color:var(--ink); background:var(--sunshine); border:2px solid var(--ink); border-radius:14px; box-shadow:0 6px 0 var(--ink); font-weight:800; }
body.blog-page .blog-button:hover { color:var(--ink); background:var(--sunshine); box-shadow:0 9px 0 var(--ink); }
body.blog-page .blog-card .blog-art { border:2px solid var(--ink); border-radius:20px; box-shadow:4px 5px 0 var(--ink); }
body.blog-page .blog-guide-number { color:var(--navy); }
body.blog-page .blog-dot,body.blog-page .blog-mascot span { color:var(--navy); }
body.blog-page .blog-masthead h1 .blog-dot { color:var(--sunshine); -webkit-text-stroke:2px var(--ink); }
body.blog-page .blog-takeaway { background:var(--sunshine); border:2px solid var(--ink); border-radius:16px; }
body.blog-page .blog-dialogue { background:var(--paper-deep); }
body.blog-page .show-overview { background:var(--paper-deep); border:2px solid var(--ink); border-radius:20px; box-shadow:4px 5px 0 var(--ink); }
body.blog-page .blog-table-scroll { border:2px solid var(--ink); border-radius:16px; }
body.blog-page .blog-table-scroll :is(caption,thead) { background:var(--paper-deep); }
body.blog-page .show-figure img { border:2px solid var(--ink); border-radius:16px; }