* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--page); color: var(--ink); font-family: Arial, sans-serif; line-height: 1.55 }
a { color: inherit; text-underline-offset: .22em }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px }
a:hover { text-decoration-thickness: .15em }
img, svg { display: block; max-width: 100% }
h1, h2, h3, p { margin: 0 }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.045em }
h1 { font-size: clamp(2.35rem, 5vw, 4.8rem); overflow-wrap: break-word }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem) }
h3 { font-size: clamp(1.35rem, 2vw, 1.85rem) }
.wrap { width: min(1320px, calc(100% - 64px)); margin-inline: auto }
.skip { position: absolute; left: 1rem; top: -10rem; z-index: 10; padding: .5rem 1rem; background: var(--page) }
.skip:focus { top: .5rem }
.strip, .meta, .eyebrow, .figure-caption { font: 700 .72rem/1.5 ui-monospace, Consolas, monospace; letter-spacing: .09em; text-transform: uppercase }
.strip { background: var(--accent); color: var(--accent-ink) }
.strip .wrap { display: flex; justify-content: space-between; gap: .75rem; padding-block: .46rem }
.masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line) }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-weight: 900; font-size: clamp(1.45rem, 3vw, 2.15rem); letter-spacing: -.055em }
.mark { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; background: var(--accent); color: var(--accent-ink); font: 800 1.25rem ui-monospace, monospace }
nav { display: flex; gap: clamp(.85rem, 3vw, 2rem); flex-wrap: wrap; font-size: .9rem; font-weight: 700 }
nav a { text-decoration: none }
nav a:hover { text-decoration: underline }
.eyebrow, .meta { color: var(--accent-text) }
.topics { display: flex; align-items: center; gap: .5rem 1rem; padding-block: .85rem; border-bottom: 1px solid var(--line) }
.topics-label { margin-right: .2rem }
.topics a { border-radius: 3px; background: var(--pill); color: var(--accent-text); padding: .25rem .6rem; font-size: .8rem }
.edition-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-block: 1.2rem .85rem }
.edition-head h2 { font-size: 1.8rem; margin-top: .12rem }
.edition-head p { max-width: 44ch; color: var(--muted); font-size: .85rem; text-align: right }
.news-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, .95fr) minmax(0, 1fr); align-items: start; gap: 1rem }
.hero { border: 1px solid var(--line); background: var(--panel); overflow: hidden }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1rem, 2.3vw, 1.85rem); gap: .85rem }
.hero h1 { font-size: clamp(2rem, 3.65vw, 3.65rem) }
.hero-copy h1 a { text-decoration: none }
.hero-copy h1 a:hover { text-decoration: underline; text-decoration-thickness: .055em }
.deck { max-width: 52ch; font-size: clamp(1.05rem, 1.5vw, 1.24rem); color: var(--muted) }
.hero-art { margin: 0; background: var(--pill) }
.hero-art img { width: 100%; height: auto; aspect-ratio: 1.9; object-fit: cover }
.hero-art[data-fit="contain"] img { object-fit: contain; object-position: center; padding: 0; background: #171a1f }
.hero-art figcaption { padding: .35rem .75rem; color: var(--muted); font-size: .72rem }
.button { display: inline-flex; align-items: center; gap: .65rem; background: var(--accent); color: var(--accent-ink); padding: .65rem .9rem; font-size: .89rem; font-weight: 800; text-decoration: none }
.button:hover { text-decoration: underline }
.feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem }
.label { background: var(--pill); color: var(--accent-text); padding: .25rem .5rem }
.picks { display: grid; gap: .8rem }
.picks > h2, .latest h2 { font-size: 1.15rem; letter-spacing: -.03em }
.pick { padding: .75rem; border: 1px solid var(--line); background: var(--panel) }
.pick-art { aspect-ratio: 2.1; background: var(--pill); margin-bottom: .65rem; overflow: hidden }
.pick-art img, .brief-art img, .card-art img { width: 100%; height: 100%; object-fit: cover }
[data-fit="contain"] img { object-fit: contain; padding: .25rem }
.pick h3 { font-size: clamp(1rem, 1.46vw, 1.35rem); line-height: 1.2; margin-top: .3rem }
.pick h3 a, .latest li a { text-decoration: none }
.pick h3 a:hover, .latest li a:hover { text-decoration: underline }
.latest { border-top: 3px solid var(--accent); background: var(--panel); padding: 1rem; scroll-margin-top: 1rem }
.latest-heading { display: flex; align-items: center; gap: .55rem }
.live-mark { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .2rem var(--pill) }
.latest-count { margin-inline-start: auto; padding: .15rem .48rem; border-radius: 999px; color: var(--accent-text); background: var(--pill); font: 700 .75rem ui-monospace, monospace }
.latest ol { list-style: none; padding: 0; margin: .5rem 0 .85rem }
.latest li { display: grid; gap: .32rem; padding: .75rem 0; border-bottom: 1px solid var(--line); line-height: 1.25 }
.latest li a { font-size: .98rem; font-weight: 700 }
.latest li:first-child a { font-size: 1.07rem }
.brief-story { display: flex; gap: .65rem; align-items: start }
.brief-art { flex: 0 0 4.3rem; aspect-ratio: 1.1; background: var(--pill); border-radius: .2rem; overflow: hidden }
.latest li:first-child .brief-story { display: grid; gap: .55rem }
.latest li:first-child .brief-art { aspect-ratio: 2.05 }
.latest li p { color: var(--muted); font-size: .8rem; line-height: 1.4 }
.brief-source { color: var(--muted); font-size: .72rem }
.all-link { font-size: .86rem; font-weight: 700; color: var(--accent-text) }
.more { padding-block: 2.2rem 3rem }
.external-strip { margin-top: 2rem; padding: 1.2rem; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--panel); scroll-margin-top: 1rem }
.external-strip .section-head { flex-wrap: wrap; margin-bottom: .65rem }
.external-strip h2 { margin-top: .25rem }
.external-note { color: var(--muted); font-size: .85rem; max-width: 85ch }
.external-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.2rem }
.external-highlights article + article { border-left: 1px solid var(--line); padding-left: 1.25rem }
.external-highlights h3 { font-size: 1.12rem; line-height: 1.25; margin-top: .4rem }
.external-highlights a { text-decoration: none }
.external-highlights a:hover { text-decoration: underline }
.external-card { border-left: 3px solid var(--accent) }
.external-card h3 { line-height: 1.25 }
.external-card h3 span { color: var(--accent-text); white-space: nowrap }
.section-head { display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem }
.section-head h2 { font-size: clamp(1.55rem, 2.4vw, 2.2rem) }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: 1rem }
.format-filters { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center }
.format-filters button { border: 1px solid var(--line); border-radius: 4px; padding: .5rem .7rem; background: var(--panel); color: var(--ink); font: 700 .83rem/1.45 Arial, sans-serif; cursor: pointer }
.format-filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.format-filters button:hover { text-decoration: underline }
.filter-reset { border: 1px solid var(--line); border-radius: 4px; padding: .55rem .65rem; background: var(--panel); color: var(--ink); font: 700 .83rem/1.45 Arial, sans-serif; cursor: pointer }
.filters label { display: grid; gap: .2rem; font-size: .78rem; color: var(--muted) }
.filters input, .filters select { border: 1px solid var(--line); border-radius: .25rem; padding: .55rem .65rem; background: var(--panel); color: var(--ink); font: inherit; font-size: .95rem }
.filters :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.filter-count, .empty { color: var(--muted); font-size: .87rem }
.filter-count { padding-bottom: .55rem }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
.card { display: grid; gap: .85rem; align-items: center; border: 1px solid var(--line); background: var(--panel); padding: .85rem }
.card.has-photo { grid-template-columns: minmax(4.7rem, 25%) minmax(0, 1fr) }
.card-art { aspect-ratio: 1.38; overflow: hidden; background: var(--pill) }
.card h3 { margin-block: .35rem; font-size: 1.2rem }
.card h3 a { text-decoration: none }
.card h3 a:hover { text-decoration: underline }
.card p, .footer p { color: var(--muted); font-size: .92rem }
.card .card-source { margin-top: .45rem; font-size: .78rem }
.footer { border-top: 1px solid var(--line); padding-block: 1.5rem 2.25rem }
.footer .wrap { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 1rem }
.footer p { max-width: 55ch; margin-top: .55rem }
.footer small { display: block; max-width: 41ch; color: var(--muted) }
.rss-link { display: inline-block; margin-top: .6rem; color: var(--accent-text); font-size: .83rem; font-weight: 700 }
.article { max-width: 800px; padding-block: 2rem 3.5rem }
.breadcrumb { margin-bottom: 2rem; font-size: .9rem }
.article-head { max-width: 900px; margin-inline: auto }
.article-head h1 { margin-block: .6rem 1.1rem }
.article-head .deck { max-width: none; margin-bottom: 1.5rem }
.article-dateline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .45rem 1rem; padding: .65rem .9rem; margin-bottom: 1.4rem; background: var(--pill); color: var(--accent-text); font-size: .84rem }
.article-cover { margin: 0 auto 2rem; max-width: 900px; border: 1px solid var(--line) }
.article-cover img { height: auto; aspect-ratio: var(--image-ratio); max-height: min(70vh, 580px); object-fit: contain }
.article-figure { margin: 0 auto 2rem; max-width: 900px; color: var(--art); border: 1px solid var(--line); background: var(--panel) }
.article-figure svg { width: 100% }
.article-figure figcaption { padding: .7rem 1rem; color: var(--muted) }
.article-body { width: 100%; margin-inline: auto }
.article-body h2 { font-size: 1.65rem; margin-bottom: .65rem }
.article-body p, .article-body ul { font-size: 1.065rem }
.article-body section { margin-block: 1.65rem }
.lead, .disclosure { padding: 1rem 1.25rem; background: var(--panel); border-left: 3px solid var(--accent) }
.disclosure { margin-top: 1rem; color: var(--muted) }
.article-body ul { padding-left: 1.2rem }
.article-body li + li { margin-top: .4rem }
.related { border-top: 1px solid var(--line); padding-top: 1.25rem }

.squad { color-scheme: dark; --page: #121510; --panel: #191d16; --ink: #f4f5ed; --muted: #b5bdb0; --accent: #c9f65d; --accent-ink: #19230e; --accent-text: #d1f982; --line: #353f30; --pill: #2a371e; --art: #c9f65d }
.squad .hero-art img { object-position: right center }
.squad .latest { border-left: 1px solid var(--line); border-right: 1px solid var(--line) }
.squad .card { border-top: 2px solid var(--accent) }
.squad h1, .squad h2 { font-weight: 900 }



@media (max-width: 960px) {
  .wrap { width: calc(100% - 40px) }
  .news-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) }
  .latest { grid-column: 2; grid-row: 1 }
  .picks { grid-column: 1 / -1; grid-template-columns: 1fr 1fr }
  .picks > h2 { grid-column: 1 / -1 }
}
@media (max-width: 660px) {
  .external-highlights { grid-template-columns: 1fr; gap: .9rem }
  .external-highlights article + article { border-left: 0; border-top: 1px solid var(--line); padding: .9rem 0 0 }
  .wrap { width: calc(100% - 32px) }
  .strip .wrap { font-size: .64rem; gap: .25rem .6rem; flex-wrap: wrap }
  .masthead { padding-block: .85rem }
  .edition-head p, .strip-divider { display: none }
  .topics { gap: .4rem }
  .topics-label { width: 100% }
  .news-grid { grid-template-columns: 1fr }
  .latest, .picks { grid-column: auto; grid-row: auto }
  .news-grid { display: flex; flex-direction: column; align-items: stretch }
  .latest { order: 1 }
  .picks { order: 2 }
  .hero { display: flex; flex-direction: column }
  .hero-copy { order: -1 }
  .format-filters { flex-basis: 100% }
  .cards { grid-template-columns: 1fr }
  .more { padding-block: 1.75rem 2.25rem }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }


/* Article reactions and comments: interface preview only. */
.discussion { margin-top: 2.5rem; padding: 1.25rem; border: 1px solid var(--line); background: var(--panel) }
.discussion h2 { margin: .35rem 0 .7rem }
.discussion-intro, .discussion-note, .discussion-empty { color: var(--muted) }
.discussion .discussion-intro { font-size: .95rem }
.discussion .discussion-note { font-size: .85rem; margin-block: .6rem 1.2rem }
.discussion .discussion-empty { font-size: .9rem; margin-block: .65rem 1rem }
.reaction-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-block: 1rem }
.reaction-preview button, .comment-preview button { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--pill); color: var(--accent-text); font: 700 .9rem Arial, sans-serif }
.reaction-preview svg { width: 1.1rem; height: 1.1rem }
.reaction-preview button:disabled, .comment-preview button:disabled { cursor: not-allowed; opacity: .7 }
.preview-badge { padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 999px; font: 600 .73rem Arial, sans-serif; color: var(--muted) }
.comment-preview { min-width: 0; padding: 0; margin: 0; border: 0 }
.comment-preview legend { font-weight: 700; padding: 0; font-size: 1.1rem }
.comment-preview label { display: grid; gap: .4rem; margin-top: .9rem; color: var(--muted); font-size: .85rem }
.comment-preview input, .comment-preview textarea { width: 100%; min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--page); color: var(--ink); font: inherit; opacity: 1 }
.comment-preview input::placeholder, .comment-preview textarea::placeholder { color: var(--muted); opacity: .8 }
.comment-preview textarea { min-height: 7rem; resize: none }
.comment-preview button { margin-top: .9rem }
@media (max-width: 660px) { .discussion { padding: 1rem } }
.discussion { border-top: 3px solid var(--accent) }
.discussion h2 { text-transform: uppercase; letter-spacing: -.03em }

/* A denser front page with independent topical collections. */
.hero h1 { font-size: clamp(1.9rem, 3vw, 2.8rem) }
.hero-copy { padding: clamp(1rem, 2vw, 1.5rem) }
.topic-shelves { margin-top: 1.75rem }
.shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem }
.topic-shelf { min-width: 0; padding: 1rem; border: 1px solid var(--line); background: var(--panel) }
.topic-shelf h3 { margin-bottom: .85rem; font-size: 1.3rem; line-height: 1.2 }
.shelf-art { aspect-ratio: 2.6; overflow: hidden; background: var(--pill) }
.shelf-art img { width: 100%; height: 100%; object-fit: cover }
.shelf-art[data-fit="contain"] img { object-fit: contain }
.topic-shelf ul { list-style: none; padding: 0; margin: .35rem 0 0 }
.topic-shelf li { display: grid; gap: .3rem; padding-block: .8rem; border-bottom: 1px solid var(--line) }
.topic-shelf li:last-child { border-bottom: 0; padding-bottom: 0 }
.topic-shelf li a { font-size: 1rem; font-weight: 700; line-height: 1.35; text-decoration: none }
.topic-shelf li a:hover { text-decoration: underline }
.external-highlights { row-gap: 1.1rem }
.external-highlights article { padding-bottom: .7rem; border-bottom: 1px solid var(--line) }
.external-highlights article:nth-child(3n + 1) { border-left: 0; padding-left: 0 }
.latest .brief-external a { font-size: .88rem }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 960px) and (min-width: 661px) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 760px) { .shelf-grid { grid-template-columns: 1fr } .topic-shelf { padding: .9rem } .shelf-art { aspect-ratio: 3 } .topic-shelves .section-head { flex-wrap: wrap } }
@media (max-width: 660px) { .external-highlights article + article { border-top: 0; padding: 0 0 .9rem } }
.topic-shelf { border-top: 3px solid var(--accent) }

/* Clearly labelled fictional comments on the Emotify feature only. */
.article-body .demo-comments { list-style: none; padding: 0; margin: 1rem 0 1.5rem }
.demo-comment { display: flex; gap: .85rem; padding: 1rem; border: 1px solid var(--line); background: var(--page) }
.article-body .demo-comment + .demo-comment { margin-top: .75rem }
.comment-avatar { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; background: var(--pill); color: var(--accent-text); font: 700 1rem Arial, sans-serif }
.comment-content { flex: 1; min-width: 0 }
.comment-byline { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem }
.discussion .comment-content p { margin: .55rem 0 0; font-size: .95rem; line-height: 1.65; overflow-wrap: anywhere }
@media (max-width: 440px) { .demo-comment { padding: .8rem; gap: .65rem } .comment-avatar { flex-basis: 2rem; height: 2rem } }
.demo-comment { border-left: 2px solid var(--accent) }

/* Editorial teasers use unmodified source screenshots in a site-specific layout. */
.teaser-panel { container-type: inline-size; position: relative; display: grid; grid-template-columns: 44% 56%; aspect-ratio: 1.9; overflow: hidden; isolation: isolate }
.teaser-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 9% 5% 9% 12%; z-index: 1; min-width: 0 }
.teaser-eyebrow { font: 700 clamp(7px, 1.35cqw, 11px) monospace; letter-spacing: .06em; margin-bottom: 2.7cqw }
.teaser-title { font-size: clamp(16px, 5.8cqw, 43px); line-height: .99; letter-spacing: -.055em }
.teaser-detail { font-size: clamp(9px, 1.75cqw, 14px); line-height: 1.45; margin-top: 2.5cqw; max-width: 20em }
.teaser-decoration { display: block; font-size: 4cqw; line-height: 1; margin-top: 2cqw }
.teaser-shot { margin: 7% 8% 7% 2%; min-width: 0; min-height: 0; overflow: hidden; box-shadow: 0 12px 30px #0004 }
.teaser-panel .teaser-shot img { display: block; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; object-fit: contain; object-position: center; background: #171a1f }
.teaser-thumb { aspect-ratio: 1.9 }
.teaser-thumb .teaser-panel { width: 100%; height: 100% }

.teaser-panel { background: #20291b; color: #d2ff6b; background-image: linear-gradient(130deg, transparent 45%, #c9f65d18 45%, #c9f65d18 64%, transparent 64%) }
.teaser-title { text-transform: uppercase; font-weight: 900 }
.teaser-shot { border: 2px solid #c9f65d; transform: rotate(-3deg); margin-block: 9% }
.teaser-panel .teaser-shot img { object-fit: cover; object-position: left center }
.teaser-detail { color: #e6eddd }

/* Editorial rhythm: compact headlines, a visual feature, and readable cards. */
.headline-rail { display: grid; grid-template-columns: auto repeat(3,minmax(0,1fr)); align-items: stretch; border-bottom: 1px solid var(--line); padding-block: .9rem; gap: 1rem }
.rail-label { align-self: center; color: var(--accent-text); font: 700 .72rem/1.4 monospace; text-transform: uppercase; letter-spacing: .06em }
.headline-rail > a { display: flex; align-items: center; gap: .7rem; border-left: 1px solid var(--line); padding-left: 1rem; text-decoration: none; font-size: .82rem; font-weight: 700; line-height: 1.35 }
.headline-rail small { display: block; font-size: .66rem; font-weight: 400; color: var(--muted); margin-bottom: .3rem }
.rail-number { color: var(--accent-text); font: 400 1.6rem Georgia,serif }
.headline-rail a:hover { text-decoration: underline }
.editorial-focus { display: grid; grid-template-columns: 1.15fr 1fr; margin-top: 2rem; background: var(--panel); border: 1px solid var(--line); overflow: hidden }
.focus-image { min-width: 0; align-self: center }
.focus-image .hero-art img { aspect-ratio: 1.9; max-height: 360px }
.focus-copy { padding: clamp(1.25rem,3vw,2.7rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1rem }
.focus-copy h2 { font-size: clamp(1.8rem,3vw,3rem) }
.focus-copy p { color: var(--muted); max-width: 42ch }
.cards { align-items: stretch }
.card { align-content: start; align-items: start }
.card.has-photo { grid-template-columns: 1fr; padding: 0; overflow: hidden; gap: 0 }
.card.has-photo > div:last-child { padding: 1rem }
.card.has-photo .card-art { width: 100%; aspect-ratio: 1.9; margin: 0; border-radius: 0 }
.card.has-photo .card-art img { object-position: center }
.card .teaser-panel .teaser-title { font-size: clamp(16px,5.8cqw,32px) }
.external-card { border-left-width: 1px; border-top: 2px solid var(--line) }
.load-more-wrap { text-align: center; margin-top: 1.5rem }
.load-more { border: 1px solid var(--accent); background: var(--pill); color: var(--accent-text); padding: .8rem 1.5rem; font: 700 .95rem Arial,sans-serif; cursor: pointer }
.load-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px }
.card:focus-within, .pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .card,.pick,.load-more { transition: border-color .18s,box-shadow .18s,transform .18s } .card:hover,.pick:hover { border-color: var(--accent); box-shadow: 0 5px 18px #00000012; transform: translateY(-2px) } .load-more:hover { transform: translateY(-2px) } }
@media (max-width:960px) { .headline-rail { grid-template-columns: repeat(3,minmax(0,1fr)) } .rail-label { display:none } .headline-rail > a:first-of-type { border:0; padding-left:0 } .rail-number { display:none } }
@media (max-width:660px) { .headline-rail { grid-template-columns:1fr; gap:.6rem } .headline-rail > a { padding:.5rem 0 0; border-left:0; border-top:1px solid var(--line); font-size:.82rem } .headline-rail > a:first-of-type { padding:0 } .headline-rail > a:nth-of-type(n+3) { display:none } .headline-rail small { display:none } .editorial-focus { grid-template-columns:1fr } .focus-copy { padding:1.3rem } }
.editorial-focus { border-left: 4px solid var(--accent) }

.article-author { margin: -.65rem 0 1.5rem; color: var(--muted); font-size: .85rem }

.card.text-card { padding:0; gap:0; overflow:hidden; grid-template-columns:1fr }
.card.text-card::before { content:attr(data-category); display:grid; place-items:center; aspect-ratio:1.9; padding:1rem; background:var(--pill); color:var(--accent-text); font:700 clamp(1.6rem,3vw,2.6rem)/1.1 Georgia,serif; text-align:center; background-image:repeating-linear-gradient(135deg,transparent 0 18px,#8888880b 18px 19px); border-bottom:1px solid var(--line) }
.card.text-card > div { padding:1rem }

/* Native editorial figures: selectable text, no rasterized interface. */
.native-art { container-type:inline-size; padding:1.3rem; display:flex; flex-direction:column; justify-content:center; gap:1rem; min-width:0; background:var(--pill); color:var(--ink) }
.native-label { color:var(--accent-text); font:700 clamp(.6rem,1.6cqw,.8rem)/1.4 monospace; text-transform:uppercase; letter-spacing:.05em }
.native-title { font-size:clamp(1.2rem,5cqw,2.1rem); line-height:1.12; letter-spacing:-.035em }
.native-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin:0 }
.native-values > div { padding:.85rem; background:var(--panel); border:1px solid var(--line); min-width:0 }
.native-values dt { color:var(--muted); font-size:clamp(.7rem,1.8cqw,.9rem); line-height:1.35 }
.native-values dd { margin:.35rem 0 0; font-weight:700; font-size:clamp(.9rem,3.5cqw,1.6rem); line-height:1.15; overflow-wrap:anywhere }
.native-note { color:var(--muted); font-size:.85rem }
.native-thumb { aspect-ratio:auto; background:var(--pill) }
.native-thumb .native-art { height:100%; min-height:100%; padding:.8rem; gap:.6rem }
.native-compact .native-title { font-size:clamp(.8rem,4.5cqw,1.2rem) }
.native-compact .native-values > div { padding:.45rem }
.native-compact .native-values dt { font-size:.63rem }
.native-compact .native-values dd { font-size:clamp(.7rem,3.3cqw,1.05rem) }
.native-compact .native-note { display:none }
.brief-art.native-thumb .native-label,.brief-art.native-thumb .native-values,.shelf-art.native-thumb .native-values { display:none }
.brief-art.native-thumb { aspect-ratio:1.1 }
.shelf-art.native-thumb { aspect-ratio:2.6 }
.card.has-photo .card-art.native-thumb { aspect-ratio:auto; min-height:220px }
.article-body .native-note { font-size:.85rem }
@media(max-width:440px) { .native-art { padding:1rem } .native-values { gap:.5rem } .native-values > div { padding:.65rem } }