/* InDims Studio — Journal: the list and the article.
   Articles read as plain blog posts with a sidebar (the owner, 10-20: "按照正常博客文章的来就行了", then
   "左右侧 不需要侧栏吗？…可以适当扩展开自适应"): a centred 1200px layout on the paper ground, the main
   column (breadcrumb, title, standfirst, date line, 16:9 cover, the article, More from the journal)
   beside a 320px sidebar (260px under 1100px; one column under 900px). Pictures and modules never
   leave the main column. Cormorant for reading, Montserrat for labels and small text. Loaded on
   journal views and in the post editor; block contract in inc/journal.php.

   Known traps: core block CSS prints later and wins at equal weight, so rules that meet it carry an
   extra class (pullquote, gallery); the fonts have no Montserrat italic and no Cormorant 600 italic,
   so sans text never sets <em> in italics and nothing is bold italic. */

/* ---------- tokens ---------- */
:root {
  --cap: #706760;      /* captions, dates, labels: 5.0 on paper, 4.58 on paper-2 (AA) */
  --ref: #8a5b48;      /* citation numbers: 5.17 / 4.74 */
  --lit: #e3a548;      /* the lamp: dots only, never text on paper */
  --j-text: #342e2a;   /* body copy: 12.1 / 11.1 */
  --j-text-2: #5a524c; /* answers, standfirsts: 6.9 / 6.3 */
  --j-rule: #d9d1c7;
  --j-col: 820px;      /* the main column at its widest (also the editor canvas) */
  --j-gap: 1.5em;      /* above and below pictures and modules */
}

/* ---------- shared pieces ---------- */
/* "Studio Note 26·293" / "Note 26·286": the word in the label face, the number in italic serif */
.note-code { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.note-code b { margin-left: .25em; font: italic 500 18px/1 var(--serif); letter-spacing: .02em; text-transform: none; font-variant-numeric: lining-nums; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font: 600 10.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cap); }
.card-meta .note-code { font-size: 10.5px; color: var(--ink); }
.card-meta .note-code b { font-size: 16px; }
.card-meta .rule { width: 18px; height: 1px; background: currentColor; opacity: .6; }
.card-date { margin: 0; font: 400 12px/1.5 var(--sans); letter-spacing: .04em; color: var(--cap); }
.journal-ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: var(--night); overflow: hidden; }
.journal-ph::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 40% at 60% 55%, var(--glow-soft), transparent 70%); }
.journal-ph img { position: relative; width: 34px !important; height: auto !important; filter: invert(1) brightness(1.6); opacity: .55; }

/* ---------- layout: main column + sidebar (article and Journal list) ---------- */
/* Centred 1200px (.wrap with its own cap); the sidebar spans the article and More from the journal */
.journal-layout { --wrap: 1200px; --aside-top: 100px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; grid-template-areas: "main aside" "more aside"; column-gap: 64px; align-items: start; padding-block: clamp(28px, 3vw, 44px) clamp(56px, 6vw, 88px); }
.journal-main { grid-area: main; min-width: 0; }
.journal-more { grid-area: more; min-width: 0; }
.journal-aside { grid-area: aside; min-width: 0; }
body.admin-bar .journal-aside { --aside-top: 132px; }

/* ---------- article: head ---------- */
/* Breadcrumb: Home / Journal / topic (the same trail as the structured data) */
.article-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; font: 500 11px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cap); }
.article-crumbs a { color: var(--cap); transition: color .3s; }
.article-crumbs a:last-child { color: var(--ink); }
.article-crumbs a:hover { color: var(--clay-deep); }
.article-crumbs .sep { margin-inline: .7em; opacity: .7; }
.article-title { margin: 14px 0 0; font: 500 clamp(32px, 10px + 2.4vw, 44px)/1.12 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; font-variant-numeric: lining-nums; }
.article-title em { font-style: italic; }
.article-dek { margin: 10px 0 0; font: italic 500 clamp(18.5px, 17px + .3vw, 20px)/1.5 var(--serif); color: var(--j-text-2); text-wrap: pretty; }
/* Date · reading time · Studio Note; the dot follows each part, so no line starts with one */
.article-meta { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; margin: 14px 0 0; font: 500 11px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cap); }
.article-meta > span:not(:last-child)::after { content: "·"; margin-inline: .7em; }
.article-meta .note-code { font: inherit; letter-spacing: inherit; color: var(--ink); }
.article-meta .note-code b { font-size: 16px; }
.article-cover { margin: clamp(20px, 2.6vw, 28px) 0 0; }
.article-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }

/* Captions; AI pictures carry a small "AI image" mark (inc/journal.php adds the class) */
:is(.article-cover, .article-body, .is-root-container) figcaption { margin: 8px 0 0; font: 400 12.5px/1.55 var(--sans); letter-spacing: .01em; color: var(--cap); text-align: left; }
:is(.article-cover.is-ai, .article-body .indims-figure--ai:not(.wp-block-gallery > *)) > figcaption::after { content: "AI image"; display: inline-block; margin-left: 8px; padding: 2px 6px 1px; border: 1px solid currentColor; font: 600 9px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
:is(.article-cover, .article-body) figcaption:empty::after { margin-left: 0; }

/* ---------- article: text (front end and editor canvas) ---------- */
:is(.article-body, .is-root-container) { font: 500 20px/1.65 var(--serif); color: var(--j-text); font-variant-numeric: oldstyle-nums; font-kerning: normal; }
.article-body { margin-top: clamp(22px, 2.4vw, 30px); }
/* Low weight on purpose: the spacing between blocks comes from the "> * + *" rules */
:where(.article-body, .is-root-container) p { margin: 0; text-wrap: pretty; }
:is(.article-body, .is-root-container) > * { margin-block: 0; }
:is(.article-body, .is-root-container) > * + * { margin-top: 1em; }
:is(.article-body, .is-root-container) > :where(figure, .wp-block-group, aside, .wp-block-indims-product-card, .wp-block-quote),
:is(.article-body, .is-root-container) > :where(figure, .wp-block-group, aside, .wp-block-indims-product-card, .wp-block-quote) + * { margin-top: var(--j-gap); }
:is(.article-body, .is-root-container) strong { font-weight: 600; color: var(--ink); }
:is(.article-body, .is-root-container) em { font-weight: 500; }
:is(.article-body, .is-root-container) :is(p, li) a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--clay-deep); transition: text-decoration-color .3s; }
:is(.article-body, .is-root-container) :is(p, li) a:not([class]):hover { text-decoration-color: var(--ink); }
:is(.article-body, .is-root-container) > :is(ul, ol) { padding-left: 1.2em; }
:is(.article-body, .is-root-container) > :is(ul, ol) li + li { margin-top: .3em; }
:is(.article-body, .is-root-container) > :is(ul, ol) li::marker { color: var(--cap); }
:is(.article-body, .is-root-container) > .indims-lede { color: var(--ink); }

/* Headings: plain, no numbers */
:is(.article-body, .is-root-container) > h2 { font: 500 clamp(25px, 22px + .6vw, 29px)/1.2 var(--serif); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; font-variant-numeric: lining-nums; scroll-margin-top: 100px; }
:is(.article-body, .is-root-container) > h2:not(:first-child) { margin-top: 1.6em; }
:is(.article-body, .is-root-container) > h2 + * { margin-top: .5em; }
:is(.article-body, .is-root-container) > h3 { font: italic 500 22px/1.3 var(--serif); color: var(--ink); scroll-margin-top: 100px; }
:is(.article-body, .is-root-container) > h3:not(:first-child) { margin-top: 1.4em; }
:is(.article-body, .is-root-container) > h3 + * { margin-top: .4em; }

/* Citations: a plain number linking to the folded source list */
.indims-ref { margin-left: .08em; font: 600 .58em/0 var(--sans); letter-spacing: .02em; vertical-align: super; }
.indims-ref a { padding: 0 .1em; color: var(--ref) !important; text-decoration: none !important; border-radius: 2px; transition: background .3s, color .3s; }
.indims-ref a:hover, .indims-ref a:focus-visible { background: rgba(227, 165, 72, .16); color: var(--ink) !important; }
.indims-ref a + a::before { content: ","; margin-right: .1em; color: var(--cap); }

/* Quotes: a plain blog quote, a thin line on the left */
:is(.article-body, .is-root-container) > :is(.wp-block-pullquote, .wp-block-quote) { position: static; margin-top: var(--j-gap); margin-bottom: 0; padding: 2px 0 2px 20px; border: 0; border-left: 2px solid var(--clay-deep); background: none; color: var(--ink); text-align: left; overflow: visible; }
:is(.article-body, .is-root-container) > .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
:is(.article-body, .is-root-container) > :is(.wp-block-pullquote, .wp-block-quote) p { max-width: none; margin: 0; font: italic 500 22px/1.45 var(--serif); color: var(--ink); }
:is(.article-body, .is-root-container) > :is(.wp-block-pullquote, .wp-block-quote) cite { display: block; margin-top: 8px; font: 500 12px/1.5 var(--sans); font-style: normal; letter-spacing: .04em; color: var(--cap); }

/* Closing line: an italic paragraph */
:is(.article-body, .is-root-container) > .indims-coda { font-style: italic; color: var(--ink); }

/* ---------- article: pictures (all in the column) ---------- */
:is(.article-body, .is-root-container) .wp-block-image img { display: block; max-width: 100%; height: auto; background: var(--paper-2); }
/* A single picture keeps its ratio and fills the column; square and upright ones (.is-tall, from
   inc/journal.php) stay short and sit in the middle */
.article-body > .wp-block-image:not(.is-style-indims-night, .is-night) img { width: 100%; }
/* (a table, so the caption wraps to the picture's width and sits under it) */
.article-body > .wp-block-image.is-tall:not(.is-style-indims-night, .is-night) { display: table; margin-inline: auto; }
.article-body > .wp-block-image.is-tall:not(.is-style-indims-night, .is-night) img { width: auto; max-height: 280px; }
.article-body > .wp-block-image.is-tall:not(.is-style-indims-night, .is-night) > figcaption { display: table-caption; caption-side: bottom; }
.article-body > :is(.alignwide, .alignfull) { width: auto; max-width: none; margin-inline: 0; }
/* Night picture (满版夜景): a dark wide frame, now inside the column */
:is(.article-body, .is-root-container) > :is(.wp-block-image.is-style-indims-night, .wp-block-image.is-night) img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; background: var(--night); }

/* Equal pair (等宽双图) and trio (三联图): same width and height; each picture keeps its own caption */
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-pair, .indims-pair, .is-style-indims-trio, .indims-trio) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; align-items: start; }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-trio, .indims-trio) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-pair, .indims-pair, .is-style-indims-trio, .indims-trio) > figure.wp-block-image { display: block; width: auto !important; margin: 0 !important; }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-pair, .indims-pair, .is-style-indims-trio, .indims-trio) > figure.wp-block-image::before { content: none; display: none; }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-pair, .indims-pair, .is-style-indims-trio, .indims-trio) > figure.wp-block-image img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-pair, .indims-pair).is-square > figure.wp-block-image img { aspect-ratio: 1; }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-pair, .indims-pair).is-portrait > figure.wp-block-image img { aspect-ratio: 4 / 5; }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-trio, .indims-trio) > figure.wp-block-image img { aspect-ratio: 1; background: var(--night); }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-pair, .indims-pair, .is-style-indims-trio, .indims-trio) > figure.wp-block-image > figcaption { position: static; max-height: none; overflow: visible; margin: 8px 0 0; padding: 0; background: none; color: var(--cap); text-shadow: none; text-align: left; font: 400 12.5px/1.55 var(--sans); }
/* Trio captions are the light modes of the product pages: cool, neutral, warm */
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-trio, .indims-trio) > figure.wp-block-image > figcaption { display: flex; align-items: center; gap: 8px; font: 600 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-trio, .indims-trio) > figure.wp-block-image > figcaption::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #efe4c8); }
:is(.is-style-indims-trio, .indims-trio) > figure:nth-child(1) { --c: #cfe1ee; }
:is(.is-style-indims-trio, .indims-trio) > figure:nth-child(3) { --c: #f2b462; }
:is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-pair, .indims-pair, .is-style-indims-trio, .indims-trio) > figcaption.blocks-gallery-caption { grid-column: 1 / -1; flex: none; margin: 0; text-align: left; }

/* ---------- article: other blocks ---------- */
/* Key takeaways (older drafts): a small heading and a list */
.indims-takeaways > :is(h2, h3) { margin: 0 0 .3em; font: 500 21px/1.3 var(--serif); color: var(--ink); }
.indims-takeaways :is(ul, ol) { margin: 0; padding-left: 1.2em; }
.indims-takeaways li { font-size: 18.5px; line-height: 1.5; }
.indims-takeaways li + li { margin-top: .25em; }
.indims-takeaways li::marker { color: var(--cap); }

/* Product card (indims-core block indims/product-card): one compact row, current price only.
   aside > a.__image img + div.__body > p.__name, p.__price (s = old price), p.__note?, a.link-arrow
   (the theme leaves out p.__design, the product's own description: inc/journal.php) */
:is(.article-body, .is-root-container) .indims-product-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; align-items: center; max-width: none; margin: 0; padding: 12px 0; border-top: 1px solid var(--j-rule); border-bottom: 1px solid var(--j-rule); background: none; box-shadow: none; }
.article-body > .indims-product-card, .article-body > .indims-product-card + * { margin-top: 1.2em; }
.indims-product-card__image { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e7e4; }
.indims-product-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transition: transform 1.2s var(--ease); }
.indims-product-card:hover .indims-product-card__image img { transform: scale(1.58); }
.indims-product-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; }
.indims-product-card__body > * { grid-column: 1 / -1; margin: 0; }
.indims-product-card__name { grid-column: 1; font: 500 21px/1.2 var(--serif); color: var(--ink); }
.indims-product-card__name a { color: inherit !important; text-decoration: none !important; }
.indims-product-card__price { grid-column: 2; font: 500 13px/1.4 var(--sans); letter-spacing: .02em; color: var(--j-text-2); white-space: nowrap; }
.indims-product-card__price s { display: none; }
.indims-product-card__note { font: italic 500 16px/1.4 var(--serif); color: var(--j-text-2); }
.indims-product-card .link-arrow { justify-self: start; margin-top: 6px; font-size: 10.5px; padding-bottom: 3px; color: var(--ink) !important; text-decoration: none !important; }
.indims-product-card:hover .link-arrow svg { transform: translateX(4px); }

/* Questions: the product pages' accordion, all folded */
:is(.article-body, .is-root-container) > .indims-faq { margin-top: 2em; }
.indims-faq > h2 { margin: 0 0 .4em; font: 500 clamp(25px, 22px + .6vw, 29px)/1.2 var(--serif); color: var(--ink); }
.indims-faq details { border-bottom: 1px solid var(--j-rule); }
.indims-faq > h2 + details, .indims-faq > details:first-child { border-top: 1px solid var(--j-rule); }
.indims-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 12px 0; cursor: pointer; font: 500 15px/1.45 var(--sans); color: var(--ink); }
.indims-faq summary::-webkit-details-marker { display: none; }
.indims-faq summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 13px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 13px no-repeat; transition: background-size .4s var(--ease); }
.indims-faq details[open] > summary::after { background-size: 13px 1px, 1px 0; }
.indims-faq details > :not(summary) { margin: 0 0 16px; padding-right: 36px; font: 400 15px/1.7 var(--sans); color: var(--j-text-2); }
/* Oldest drafts: h3 question + paragraph */
.indims-faq > h3 { margin: 0; padding: 14px 0 4px; border-top: 1px solid var(--j-rule); font: 500 15px/1.45 var(--sans); color: var(--ink); }
.indims-faq > h3 + p { font: 400 15px/1.7 var(--sans); color: var(--j-text-2); }

/* Sources: one small line at the end (inc/journal.php folds the list into details); opens on
   click or when a citation number is followed (journal.js) */
.article-body > .indims-sources-line { margin-top: var(--j-gap); border-top: 1px solid var(--j-rule); border-bottom: 1px solid var(--j-rule); font: 400 12.5px/1.6 var(--sans); color: var(--cap); }
.indims-sources-line summary { list-style: none; display: flex; align-items: baseline; gap: 14px; padding: 11px 0; cursor: pointer; }
.indims-sources-line summary::-webkit-details-marker { display: none; }
.indims-sources-line summary .label { flex: none; font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.indims-sources-line summary .label .n { letter-spacing: .06em; color: var(--cap); }
.indims-sources-line summary .list { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indims-sources-line summary .toggle { flex: none; margin-left: auto; font: 600 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.indims-sources-line summary .toggle::after { content: "Show"; }
.indims-sources-line[open] summary .toggle::after { content: "Hide"; }
.indims-sources-line ol, .indims-sources-line ul { list-style: none; margin: 0; padding: 0 0 10px; counter-reset: source; }
.indims-sources-line li { counter-increment: source; display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 6px 0; scroll-margin-top: 110px; transition: background-color .6s; }
.indims-sources-line li::before { content: counter(source); font: italic 500 16px/1.3 var(--serif); color: var(--ref); }
.indims-sources-line li:target { background: rgba(227, 165, 72, .16); }
.indims-sources-line cite { font-style: normal; }
.article-body .indims-sources-line li a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--j-rule); text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-body .indims-sources-line li a:hover { text-decoration-color: var(--ink); }
.indims-sources-line .host { color: var(--cap); overflow-wrap: anywhere; }
.indims-sources-line .host::before { content: " · "; }
@media (prefers-reduced-motion: no-preference) { html:has(.indims-sources-line) { scroll-behavior: smooth; } }
/* Sources as written in the editor */
.is-root-container > .indims-sources { font: 400 12.5px/1.6 var(--sans); color: var(--cap); }
.is-root-container > .indims-sources > h2 { margin: 0 0 6px; font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }

/* News digest (资讯精选): one group per story — heading, source line (a > cite · "title" · time), an
   optional picture, our summary, one short quote, and why it matters */
:is(.article-body, .is-root-container) > .indims-news { margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--j-rule); }
.indims-news > * { margin: 0; }
.indims-news > * + * { margin-top: .8em; }
.indims-news > h2 { font: 500 clamp(25px, 22px + .6vw, 29px)/1.2 var(--serif); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; font-variant-numeric: lining-nums; scroll-margin-top: 100px; }
.indims-news > h2 + * { margin-top: .4em; }
.indims-news__source { font: 400 12.5px/1.6 var(--sans); color: var(--cap); }
/* (beats the body-link rule: the whole line is one link to the original, kept quiet) */
.article-body .indims-news__source a:not([class]) { color: inherit; text-decoration-color: var(--j-rule); }
.article-body .indims-news__source a:not([class]):hover { color: var(--ink); text-decoration-color: var(--ink); }
.indims-news__source cite { font: 600 10.5px/1.6 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.indims-news > .wp-block-image { margin-top: 1.1em; }
.indims-news > .wp-block-image img { width: 100%; }
.indims-news > .wp-block-image + * { margin-top: 1.1em; }
.indims-news > .indims-news__quote { margin-top: 1em; margin-bottom: 0; padding: 2px 0 2px 18px; border: 0; border-left: 2px solid var(--clay-deep); }
.indims-news__quote p { margin: 0; font: italic 500 20px/1.45 var(--serif); color: var(--ink); }
.indims-news__quote cite { display: block; margin-top: 6px; font: 500 12px/1.5 var(--sans); font-style: normal; letter-spacing: .04em; color: var(--cap); }
.indims-news__why { color: var(--ink); }
.indims-news__why::before { content: "Why it matters"; display: block; margin-bottom: 2px; font: 600 10.5px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cap); }

/* Before you wrap it (礼品文): h2 + ul.indims-gift-note, a quiet list between hairlines */
:is(.article-body, .is-root-container) > .indims-gift-note { list-style: none; padding: 0; border-bottom: 1px solid var(--j-rule); }
:is(.article-body, .is-root-container) > .indims-gift-note li { padding: 10px 0; border-top: 1px solid var(--j-rule); font-size: 18.5px; line-height: 1.5; }
:is(.article-body, .is-root-container) > .indims-gift-note li + li { margin-top: 0; }
.indims-gift-note strong { font-weight: 600; color: var(--ink); }

/* ---------- article: modules, compact and inside the column ---------- */
/* Off / on (关灯/亮灯对比): two equal 2:1 frames (image captions "Off" / "On") and one paragraph as caption */
:is(.indims-compare, .is-style-indims-compare) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
:is(.indims-compare, .is-style-indims-compare) > * { margin: 0; }
:is(.indims-compare, .is-style-indims-compare) > :not(.wp-block-image) { grid-column: 1 / -1; }
:is(.indims-compare, .is-style-indims-compare) > .wp-block-image img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--night); }
:is(.indims-compare, .is-style-indims-compare) > .wp-block-image > figcaption { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 600 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
:is(.indims-compare, .is-style-indims-compare) > .wp-block-image > figcaption::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--cap); }
:is(.indims-compare, .is-style-indims-compare) > .wp-block-image ~ .wp-block-image > figcaption::before { border: 0; background: var(--lit); box-shadow: 0 0 8px 1px var(--lit); }
:is(.indims-compare, .is-style-indims-compare) > p { margin-top: 8px; font: 400 12.5px/1.55 var(--sans); color: var(--cap); }

/* Fact box (资料框): first paragraph = label; one paragraph per fact (number in bold, optional
   label in italics, one line); a last paragraph without a number = closing note */
:is(.article-body, .is-root-container) > :is(.indims-factbox, .is-style-indims-factbox) { padding: 14px 20px 4px; background: var(--paper-2); }
:is(.indims-factbox, .is-style-indims-factbox) > p:first-child:not(:has(> strong:first-child)) { margin: 0 0 6px; font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cap); }
:is(.indims-factbox, .is-style-indims-factbox) > p:has(> strong:first-child) { position: relative; min-height: 48px; padding: 10px 0 10px 124px; border-top: 1px solid var(--j-rule); font: 400 14px/1.55 var(--sans); color: var(--j-text-2); }
:is(.indims-factbox, .is-style-indims-factbox) > p > strong:first-child { position: absolute; left: 0; top: 10px; width: 112px; white-space: nowrap; font: 500 28px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: lining-nums; }
:is(.indims-factbox, .is-style-indims-factbox) > p > em { display: block; font: 600 10.5px/1.5 var(--sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
:is(.indims-factbox, .is-style-indims-factbox) > p:last-child:not(:first-child, :has(> strong:first-child)) { padding: 10px 0 12px; border-top: 1px solid var(--j-rule); font: italic 500 17px/1.45 var(--serif); color: var(--ink); }

/* Gift (礼品条目): heading, picture, text and a product card. Picture left, heading and text right,
   the card under both. The last row (1fr) takes the picture's extra height, so the text keeps its spacing */
:is(.indims-gift, .is-style-indims-gift) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: repeat(5, auto) 1fr auto; column-gap: 22px; align-items: start; }
:is(.article-body, .is-root-container) > :is(.indims-gift, .is-style-indims-gift) { margin-top: 2em; }
:is(.indims-gift, .is-style-indims-gift) > * { grid-column: 2; margin: 0; }
:is(.indims-gift, .is-style-indims-gift) > .wp-block-image { grid-column: 1; grid-row: 1 / 7; }
:is(.indims-gift, .is-style-indims-gift) > .wp-block-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
:is(.indims-gift, .is-style-indims-gift) > :is(.indims-product-card, .wp-block-indims-product-card) { grid-column: 1 / -1; grid-row: 7; margin-top: 14px; }
:is(.indims-gift, .is-style-indims-gift) > h2 { margin-bottom: .3em; font: 500 23px/1.2 var(--serif); color: var(--ink); }
:is(.indims-gift, .is-style-indims-gift) > p + p { margin-top: .8em; }

/* Making-of step (工序行): picture left, heading and short text right, every step the same */
:is(.indims-step, .is-style-indims-step) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 22px; align-items: start; }
:is(.indims-step, .is-style-indims-step) > * { grid-column: 2; margin: 0; }
:is(.indims-step, .is-style-indims-step) > :is(.wp-block-image, .wp-block-video) { grid-column: 1; grid-row: 1 / 8; }
:is(.indims-step, .is-style-indims-step) img { width: 100%; }
:is(.indims-step, .is-style-indims-step) video { display: block; width: 100%; height: auto; background: var(--night); }
:is(.indims-step, .is-style-indims-step) > h2 { margin-bottom: .3em; font: 500 23px/1.2 var(--serif); color: var(--ink); }
:is(.indims-step, .is-style-indims-step) > p + p { margin-top: .8em; }

/* Stone swatches (石材小样): product shots zoomed until only the stone face shows. A label paragraph
   and images (link to the stone; caption = name, optional italic note), or room groups (h3, a line, images) */
:is(.indims-board, .is-style-indims-board) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
:is(.indims-board, .is-style-indims-board) > :not(.wp-block-image, .wp-block-group) { grid-column: 1 / -1; margin: 0; }
:is(.indims-board, .is-style-indims-board) > p:first-child { font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cap); }
:is(.indims-board, .is-style-indims-board) .wp-block-image { margin: 0; overflow: clip; } /* the zoomed image must not widen the page */
:is(.indims-board, .is-style-indims-board) .wp-block-image a { display: block; text-decoration: none; }
:is(.indims-board, .is-style-indims-board) .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 24% 50%; background: #e9e7e4; transform: scale(2.5); clip-path: inset(30%); transition: transform 1.2s var(--ease), clip-path 1.2s var(--ease); }
:is(.indims-board, .is-style-indims-board) .wp-block-image a:hover img { transform: scale(2.65); clip-path: inset(31.1%); }
:is(.indims-board, .is-style-indims-board) .wp-block-image figcaption { margin: 6px 0 0; font: 500 16px/1.2 var(--serif); color: var(--ink); text-wrap: balance; }
:is(.indims-board, .is-style-indims-board) .wp-block-image figcaption em { display: block; margin-top: 3px; font: 400 11.5px/1.4 var(--sans); font-style: normal; color: var(--cap); }
:is(.indims-board, .is-style-indims-board) > .wp-block-group { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0 10px; margin: 0; }
:is(.indims-board, .is-style-indims-board) > .wp-block-group > :not(.wp-block-image) { grid-column: 1 / -1; margin: 0; }
:is(.indims-board, .is-style-indims-board) > .wp-block-group > h3 { font: italic 500 20px/1.2 var(--serif); color: var(--ink); }
:is(.indims-board, .is-style-indims-board) > .wp-block-group > p { margin: 2px 0 8px; font: 400 12.5px/1.45 var(--sans); color: var(--cap); }

/* ---------- after the article: More from the journal, under the main column ---------- */
.article-end { margin-top: clamp(40px, 5vw, 56px); padding-top: 18px; border-top: 1px solid var(--j-rule); }
.article-end__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.article-end__head h2 { margin: 0; font: 500 24px/1.2 var(--serif); color: var(--ink); }
.article-end__head .link-arrow { flex: none; font-size: 10.5px; padding-bottom: 3px; }
/* More from the journal: three small entries (picture, title, date) */
.related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.related-list a { display: block; }
.related-list .ph { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 10px; background: var(--paper-2); }
.related-list .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.related-list a:hover .ph img { transform: scale(1.04); }
.related-list .t { display: block; font: 500 18px/1.25 var(--serif); color: var(--ink); text-wrap: balance; font-variant-numeric: lining-nums; }
.related-list a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.related-list .d { display: block; margin-top: 6px; font: 400 12px/1.5 var(--sans); letter-spacing: .04em; color: var(--cap); }

/* ---------- editor canvas: the same column for every block (editor.css pads text blocks) ---------- */
html .is-root-container { max-width: none; }
html .is-root-container > :not([class*="wp-block-indims-"]) { max-width: calc(var(--j-col) + 2 * clamp(16px, 3vw, 40px)); }
html .is-root-container > [class*="wp-block-indims-"] { max-width: var(--j-col); margin-inline: auto; }
html .editor-styles-wrapper .editor-post-title { max-width: calc(var(--j-col) + 2 * clamp(16px, 3vw, 40px)); font-size: clamp(32px, 10px + 2.4vw, 44px); line-height: 1.12; }
.editor-styles-wrapper .indims-faq details { pointer-events: auto; }

/* ---------- sidebar: groups, one level folds (inc/journal.php indims_journal_aside(), journal.js) ---------- */
.journal-aside { display: flex; flex-direction: column; gap: 30px; }
.journal-aside [hidden] { display: none !important; }
.journal-aside ul { margin: 0; padding: 0; list-style: none; }
.journal-aside a { color: var(--j-text); transition: color .3s; }
.journal-aside a:hover { color: var(--ink); }
.journal-aside :focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* Group titles: small capital labels, not links */
.aside-title { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
/* Foldable rows: the whole row is the button, the caret on the right turns */
.aside-tree > li + li { border-top: 1px solid var(--j-rule); }
.aside-parent { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 10px 0; border: 0; border-radius: 0; background: none; font: 500 18px/1.3 var(--serif); color: var(--j-text); text-align: left; cursor: pointer; transition: color .3s; }
.aside-parent:hover, .aside-parent[aria-expanded="true"] { color: var(--ink); }
.caret { flex: none; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s var(--ease); }
[aria-expanded="true"] > .caret { transform: translateY(2px) rotate(-135deg); }
/* Child lists hang on a hairline; the note being read gets the amber line and ink */
.aside-children { margin: 0 0 12px 1px; border-left: 1px solid var(--j-rule); }
.aside-children a { display: block; margin-left: -1.5px; padding: 5px 0 5px 13px; border-left: 2px solid transparent; font: 500 15.5px/1.35 var(--serif); color: var(--j-text-2); font-variant-numeric: lining-nums; }
.aside-children a[aria-current="page"] { border-left-color: var(--lit); color: var(--ink); }
/* A category with nothing to list yet: a plain link row (no fold); the current one in ink with the lit dot */
.aside-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; font: 500 18px/1.3 var(--serif); }
.aside-link.is-on, .aside-link[aria-current="page"] { color: var(--ink); }
.aside-link.is-on::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--lit); box-shadow: 0 0 8px 1px rgba(227, 165, 72, .6); }
/* Child categories inside a parent's list: a smaller row, their notes one step further in */
.aside-node--sub > :is(.aside-parent, .aside-link) { margin-left: -1.5px; padding: 6px 0 6px 13px; border-left: 2px solid transparent; font-size: 16px; }
.aside-node--sub > .aside-children { margin: 0 0 6px 14px; }
.aside-children .aside-all a { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font: 600 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.aside-all a[aria-current="page"] { color: var(--clay-ink); }
.aside-all--top a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0 2px; font: 600 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.aside-recent li + li { border-top: 1px solid var(--j-rule); }
/* Directions: flat chips, this note's own lit */
.aside-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.aside-chips a { display: block; padding: 6px 10px; border: 1px solid var(--j-rule); font: 500 12px/1.3 var(--sans); }
.aside-chips a.is-own { border-color: var(--lit); color: var(--ink); }
.aside-more { margin-top: 10px; padding: 4px 0; border: 0; background: none; font: 600 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
/* Recent notes: small 3:2 picture, title, date */
.aside-recent a { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; padding: 11px 0; }
.aside-recent .ph { grid-row: span 2; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.aside-recent .ph img { width: 100%; height: 100%; object-fit: cover; }
.aside-recent .t { font: 500 16.5px/1.25 var(--serif); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-variant-numeric: lining-nums; }
.aside-recent a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.aside-recent .d { margin-top: 4px; font: 400 11.5px/1.4 var(--sans); letter-spacing: .04em; color: var(--cap); }
/* Two columns: the whole sidebar stays in view and scrolls on its own when it is taller than the
   screen (nothing scrolls inside a group); a thin scrollbar in the rule colour */
@media (min-width: 900px) {
  .journal-aside { position: sticky; top: var(--aside-top); max-height: calc(100vh - var(--aside-top)); overflow-y: auto; overscroll-behavior: contain; margin-right: -10px; padding: 0 10px 24px 0; scrollbar-width: thin; scrollbar-color: var(--j-rule) transparent; }
  .journal-aside::-webkit-scrollbar { width: 6px; }
  .journal-aside::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--j-rule); }
  .journal-aside::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- Journal list: lead story and cards ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 4.4vw, 60px) clamp(20px, 2.4vw, 34px); }
:is(.journal-card, .journal-feature) .journal-card__media, .journal-feature__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
:is(.journal-card__media, .journal-feature__media) img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.journal-card:hover .journal-card__media img, .journal-feature:hover .journal-feature__media img { transform: scale(1.035); }
.journal-card__media { margin-bottom: 20px; }
.journal-card__title { margin: 12px 0 10px; font: 500 clamp(24px, 2.1vw, 29px)/1.14 var(--serif); color: var(--ink); text-wrap: balance; font-variant-numeric: lining-nums; }
:is(.journal-card__title, .journal-feature__title) a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
:is(.journal-card:hover .journal-card__title, .journal-feature:hover .journal-feature__title) a, :is(.journal-card__title, .journal-feature__title) a:focus-visible { background-size: 100% 1px; }
.journal-card__dek { margin: 0 0 14px; font: italic 500 18px/1.45 var(--serif); color: var(--j-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.journal-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.6vw, 68px); align-items: center; padding-bottom: clamp(56px, 6vw, 88px); margin-bottom: clamp(56px, 6vw, 88px); border-bottom: 1px solid var(--j-rule); }
.journal-feature:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.journal-feature__title { margin: 18px 0 16px; font-size: clamp(36px, 3.8vw, 54px); line-height: 1.06; color: var(--ink); text-wrap: balance; font-variant-numeric: lining-nums; }
.journal-feature__title em { font-style: italic; }
.journal-feature__dek { margin: 0 0 22px; font: italic 500 clamp(19px, 1.5vw, 21px)/1.45 var(--serif); color: var(--j-text-2); }
.journal-feature .card-date { margin-bottom: 28px; }

.journal-list { padding-block: clamp(40px, 5vw, 64px) clamp(80px, 9vw, 128px); }
.journal-chips { margin-bottom: clamp(36px, 4vw, 52px); }
.journal-pages { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(56px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--j-rule); }
.journal-pages__newer { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cap); transition: color .3s; }
.journal-pages__newer:hover { color: var(--ink); }
.journal-empty { padding-block: 24px 40px; }
/* The dark page head of the Journal list and archives lines up with the 1200px layout below it */
.page-hero .wrap { --wrap: 1200px; }
/* In the main column: the sidebar lists the topics, so the chips only show on one-column screens */
.journal-list { padding-block: 0; }
.journal-layout .journal-chips { display: none; }
.journal-layout .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(20px, 2.2vw, 30px); }
.journal-layout .journal-feature { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 40px); padding-bottom: clamp(40px, 4.5vw, 60px); margin-bottom: clamp(40px, 4.5vw, 60px); }
.journal-layout .journal-feature:last-child { padding-bottom: 0; margin-bottom: 0; }
.journal-layout .journal-feature__title { margin: 14px 0 12px; font-size: clamp(30px, 2.6vw, 40px); }
.journal-layout .journal-card__title { font-size: clamp(22px, 1.9vw, 26px); }

/* ---------- narrower screens ---------- */
@media (max-width: 1099px) {
  .journal-layout { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 48px; }
  .aside-parent, .aside-link { font-size: 17px; }
  .aside-recent a { grid-template-columns: 72px minmax(0, 1fr); }
}
/* One column: the sidebar follows the article (on the list, the list), each group folds under its title
   (journal.js; only Topics starts open); rows at least 44px */
@media (max-width: 899px) {
  .journal-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; }
  :is(.journal-main, .journal-more, .journal-aside) { grid-area: auto; }
  .journal-aside { margin-top: clamp(36px, 6vw, 48px); gap: 0; border-top: 1px solid var(--ink); }
  .aside-group { border-bottom: 1px solid var(--j-rule); }
  .aside-title { margin: 0; padding: 14px 0; border: 0; }
  .aside-title:has(.aside-group-btn) { padding: 0; }
  .aside-group-btn { display: flex; width: 100%; min-height: 48px; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border: 0; border-radius: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer; }
  .aside-group__body { padding-bottom: 12px; }
  .aside-parent, .aside-link, .aside-children a, .aside-all--top a { min-height: 44px; }
  .aside-children a { display: flex; align-items: center; }
  .aside-children .aside-all a { display: flex; }
  .journal-layout .journal-chips { display: flex; }
  .journal-layout .journal-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 700px) {
  .journal-layout .journal-grid { grid-template-columns: minmax(0, 1fr); }
  .journal-feature__dek { font-size: 19px; }
}
@media (max-width: 560px) {
  .journal-layout { padding-top: 22px; }
  :is(.article-crumbs, .article-meta) { font-size: 10px; letter-spacing: .12em; }
  .article-dek { font-size: 18.5px; }
  :is(.article-body, .is-root-container) { font-size: 18.5px; }
  .article-body > p:not(.indims-coda) { hyphens: auto; }
  :is(.article-body, .is-root-container) > h2, .indims-faq > h2 { font-size: 24px; }
  :is(.article-body, .is-root-container) > :is(.wp-block-pullquote, .wp-block-quote) p { font-size: 20px; }
  .article-body > .wp-block-image.is-tall:not(.is-style-indims-night, .is-night) img { max-height: 280px; }
  .indims-takeaways li { font-size: 17.5px; }
  :is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-pair, .indims-pair).is-landscape { grid-template-columns: minmax(0, 1fr); }
  :is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-trio, .indims-trio) { gap: 12px 5px; }
  :is(.article-body, .is-root-container) > .wp-block-gallery:is(.is-style-indims-trio, .indims-trio) > figure.wp-block-image > figcaption { gap: 5px; font-size: 9px; letter-spacing: .14em; }
  :is(.indims-compare, .is-style-indims-compare) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  :is(.indims-compare, .is-style-indims-compare) > p { margin-top: 0; }
  :is(.article-body, .is-root-container) > :is(.indims-gift, .is-style-indims-gift), :is(.indims-step, .is-style-indims-step) { display: block; }
  :is(.indims-gift, .is-style-indims-gift, .indims-step, .is-style-indims-step) > :is(.wp-block-image, .wp-block-video) { margin-bottom: 12px; }
  :is(.indims-step, .is-style-indims-step) > :is(.wp-block-image, .wp-block-video) img { max-height: 360px; object-fit: cover; }
  :is(.article-body, .is-root-container) .indims-product-card { grid-template-columns: 56px minmax(0, 1fr); gap: 0 14px; }
  .indims-product-card__name { font-size: 19px; }
  .indims-faq details > :not(summary) { padding-right: 0; }
  :is(.article-body, .is-root-container) > :is(.indims-factbox, .is-style-indims-factbox) { padding: 12px 14px 2px; }
  :is(.indims-factbox, .is-style-indims-factbox) > p:has(> strong:first-child) { padding-left: 96px; }
  :is(.indims-factbox, .is-style-indims-factbox) > p > strong:first-child { width: 88px; font-size: 23px; }
  :is(.indims-board, .is-style-indims-board) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indims-sources-line summary .list { display: none; }
  .related-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .related-list li + li { border-top: 1px solid var(--j-rule); }
  .related-list a { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; padding: 10px 0; }
  .related-list .ph { grid-row: span 2; margin: 0; }
  .related-list .t { font-size: 17px; }
  .related-list .d { margin-top: 2px; }
}

/* ---------- print: the article and its sources ---------- */
@media print {
  .announce, .site-header, .site-footer, .article-end, .journal-aside { display: none !important; }
}