这是一份CSS样式表，定义了网站上使用的“Guardian Headline Full”字体家族。它包含多条@font-face规则，每条规则指定了字体的不同字重（细体、常规、中粗、半粗）和样式（常规或斜体）。对于每种变体，规则提供了不同格式的字体文件——WOFF2、WOFF和TTF——以便浏览器选择最兼容的一种。字体文件托管在Guardian的资产服务器上，这些规则确保页面加载时字体能正确应用。
这是一段CSS代码块，为网站定义字体样式。它设置了Guardian排版的不同字体家族、字重和样式。代码包括“Guardian Headline Full”和“Guardian Titlepiece”的@font-face规则，指定了各种字体文件（如woff2、woff和ttf格式）及其对应的字重（如粗体、斜体、黑色、细体和常规）。这些规则确保字体在不同浏览器和设备上正确加载。
以下是改写为流畅自然英语的文本：
这是一组“Guardian Headline Full”字体家族的@font-face规则。每条规则定义了字体的不同样式和字重，指向同一组文件但名称不同。这些文件托管在Guardian的资产服务器上。
这些规则涵盖以下样式：
- 常规（字重400），常规和斜体样式
- 中粗（字重500），常规和斜体样式
- 半粗（字重600），常规和斜体样式
- 粗体（字重700），常规和斜体样式
- 黑色（字重900），常规和斜体样式
对于每种样式，字体文件以三种格式提供：WOFF2、WOFF和TTF。浏览器将按此顺序使用它支持的第一种格式。ine-BlackItalic.ttf）格式（“truetype”）；
字重：900；
字体样式：斜体；
}
@font-face {
字体家族：Guardian Titlepiece；
来源：url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) 格式（“woff2”），
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) 格式（“woff”），
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) 格式（“truetype”）；
字重：700；
字体样式：常规；
}
#article-body > div .content--interactive-grid，
.content--interactive > div .content--interactive-grid，
#comment-body .content--interactive-grid，
[data-gu-name="body"] .content--interactive-grid，
#feature-body .content--interactive-grid {
网格列间距：0px；
网格模板列：100%；
网格模板区域：
“media”
“title”
“headline”
“standfirst”
“lines”
“meta”
“body”；
}
@media (min-width: 30em) {
#article-body > div .content--interactive-grid figure.element--immersive figcaption，
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption，
#comment-body .content--interactive-grid figure.element--immersive figcaption，
[data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption，
#feature-body .content--interactive-grid figure.element--immersive figcaption {
内边距：0 20px；
最大宽度：620px；
}
}
@media (min-width: 46.25em) {
#article-body > div .content--interactive-grid，
.content--interactive > div .content--interactive-grid，
#comment-body .content--interactive-grid，
[data-gu-name="body"] .content--interactive-grid，
#feature-body .content--interactive-grid {
网格模板列：100%；
网格列间距：10px；
网格模板区域：
“title”
“headline”
“standfirst”
“media”
“lines”
“meta”
“body”；
}
#article-body > div .content--interactive-grid #maincontent，
.content--interactive > div .content--interactive-grid #maincontent，
#comment-body .content--interactive-grid #maincontent，
[data-gu-name="body"] .content--interactive-grid #maincontent，
#feature-body .content--interactive-grid #maincontent {
右内边距：80px；
}
}
@media (min-width: 61.25em) {
#article-body > div .content--interactive-grid，
.content--interactive > div .content--interactive-grid，
#comment-body .content--interactive-grid，
[data-gu-name="body"] .content--interactive-grid，
#feature-body .content--interactive-grid {
网格模板列：620px 300px；
网格模板区域：
“title right-column”
“headline right-column”
“standfirst right-column”
“media right-column”
“lines right-column”
“meta right-column”
“body right-column”
“. right-column”；
}
#article-body > div .content--interactive-grid #maincontent，
.content--interactive > div .content--interactive-grid #maincontent，
#comment-body .content--interactive-grid #maincontent，
[data-gu-name="body"] .content--interactive-grid #maincontent，
#feature-body .content--interactive-grid #maincontent {
右内边距：取消设置；
}
}
@media (min-width: 71.25em) {
#article-body > div .content--interactive-grid，
.content--interactive > div .content--interactive-grid，
#comment-body .content--interactive-grid，
[data-gu-name="body"] .content--interactive-grid，
#feature-body .content--interactive-grid {
网格模板列：140px 1px 620px 300px；
网格模板区域：
“title border headline right-column”
“. border standfirst right-column”
“. border media right-column”
“. border body right-column”
“. border . right-column”；
}
#article-body > div .content--interactive-grid .content__standfirst，
.content--interactive > div .content--interactive-grid .content__standfirst，
#comment-body .content--interactive-grid .content__standfirst，
[data-gu-name="body"] .content--interactive-grid .content__standfirst，
#feature-body .content--interactive-grid .content__standfirst {
底部内边距：0；
}
#article-body > div .content--interactive-grid figure.element--immersive figcaption，
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption，
#comment-body .content--interactive-grid figure.element--immersive figcaption，
[data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption，
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ 此处未指定额外样式 /
}
}ent--immersive figcaption{内边距：4px 0 0}#article-body>div .content--interactive-grid [data-gu-name=lines],#article-body>div .content--interactive-grid [data-gu-name=meta],.content--interactive>div .content--interactive-grid [data-gu-name=lines],.content--interactive>div .content--interactive-grid [data-gu-name=meta],#comment-body .content--interactive-grid [data-gu-name=lines],#comment-body .content--interactive-grid [data-gu-name=meta],[data-gu-name=body] .content--interactive-grid [data-gu-name=lines],[data-gu-name=body] .content--interactive-grid [data-gu-name=meta],#feature-body .content--interactive-grid [data-gu-name=lines],#feature-body .content--interactive-grid [data-gu-name=meta]{网格区域：2/1/5/2}#article-body>div .content--interactive-grid [data-gu-name=lines],.content--interactive>div .content--interactive-grid [data-gu-name=lines],#comment-body .content--interactive-grid [data-gu-name=lines],[data-gu-name=body] .content--interactive-grid [data-gu-name=lines],#feature-body .content--interactive-grid [data-gu-name=lines]{高度：-moz-max-content；高度：max-content；上边距：5px}#article-body>div .content--interactive-grid [data-gu-name=meta],.content--interactive>div .content--interactive-grid [data-gu-name=meta],#comment-body .content--interactive-grid [data-gu-name=meta],[data-gu-name=body] .content--interactive-grid [data-gu-name=meta],#feature-body .content--interactive-grid [data-gu-name=meta]{上边距：18px}}@media (min-width: 81.25em){#article-body>div .content--interactive-grid,.content--interactive>div .content--interactive-grid,#comment-body .content--interactive-grid,[data-gu-name=body] .content--interactive-grid,#feature-body .content--interactive-grid{网格模板列：219px 1px 620px 80px 300px}}body.ios .article__header .standfirst__inner p,body.android .article__header .standfirst__inner p{字体家族：Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif；字重：500}body.ios .article__header .article-kicker__section,body.android .article__header .article-kicker__section{显示：块}body.ios .article__header .article-kicker__section:first-letter,body.android .article__header .article-kicker__section:first-letter{文本转换：大写}body.ios .article__header .keyline-4,body.android .article__header .keyline-4{上内边距：12px!important}body.ios .article__header .meta__misc .byline__author,body.android .article__header .meta__misc .byline__author{字体家族：Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif；字重：700}body.ios .article__header .meta__misc .byline__author a,body.android .article__header .meta__misc .byline__author a{字重：700}body.ios .article figure.element-image .figure__inner,body.android .article figure.element-image .figure__inner{高度：auto!important}body.ios .article figure.element-atom+p,body.android .article figure.element-atom+p{上边距：0}@media (scripting: enabled){:root article.content--interactive>div,:root .article{不透明度：0；溢出：隐藏}:root.interactive-loaded article.content--interactive>div,:root.interactive-loaded .article{不透明度：1；过渡：不透明度 1s 缓动；溢出：取消设置}}[data-article-theme=News]{--active-pillar-100: #660505;--active-pillar-200: #8b0000;--active-pillar-300: #ab0613;--active-pillar-400: #c70000;--active-pillar-500: #ff5943;--active-pillar-600: #ffbac8;--furniture-card-gradient-color: rgba(139, 0, 0, .6)}[data-article-theme=Lifestyle]{--active-pillar-100: #510043;--active-pillar-200: #650054;--active-pillar-300: #7d0068;--active-pillar-400: #bb3b80;--active-pillar-500: #ffabdb;--active-pillar-600: #fec8d3;--furniture-card-gradient-color: rgba(101, 0, 84, .6)}[data-article-theme=Culture]{--active-pillar-100: #3e3323;--active-pillar-200: #574835;--active-pillar-300: #6b5840;--active-pillar-400: #866d50;--active-pillar-500: #eacca0;--active-pillar-600: #e7d4b9;--furniture-card-gradient-color: rgba(87, 72, 53, .6)}[data-article-theme=Sport]{--active-pillar-100: #003c60;--active-pillar-200: #004e7c;--active-pillar-300: #005689;--active-pillar-400: #0077b6;--active这里是改写为流畅自然英语的文本：
---
- Pillar 500: #00b2ff;
- Active Pillar 600: #90dcff;
- 家具卡片渐变颜色：rgba(0, 78, 124, .6)
对于Android设备：
- 顶部工具栏高度：58px
- 底部工具栏高度：56px
- 视口高度（不包括顶部工具栏）：calc(100vh - 58px)
对于iOS设备：
- 顶部工具栏高度：44px
- 底部工具栏高度：50px
- 顶部工具栏高度（备选）：20px
- 视口高度（不包括底部工具栏）：calc(100vh - 50px)
在iOS上至少670px高的屏幕上：
- 底部工具栏高度：84px
- 顶部工具栏高度：44px
在iOS上至少800px高的屏幕上：
- 顶部工具栏高度：94px
顶部横幅广告容器默认隐藏。
对于互动文章，主要内容区域没有内边距。
在宽于61.25em的屏幕上，互动网格使用单列且无间距，布局区域顺序为：标题、头条、导语、媒体、线条、元数据、正文和一个空位。
在宽于71.25em的屏幕上，网格变为四列：79px、1px、auto和79px，间距为10px。布局区域排列为：第一行是标题、边框、头条和右列；然后是边框、导语和右列；接着是边框、媒体和右列；然后是边框、正文和右列；最后是边框和右列。
在宽于81.25em的屏幕上，侧列扩展为各159px。
标题部分隐藏（零高度，溢出隐藏）。
主要内容区域没有上边距。
在宽于46.25em的屏幕上，主要内容没有右内边距。
互动主列相对定位。
其中的任何元素原子隐藏（零高度，无外边距或内边距）。
媒体部分粘性定位，位于左上角，占据整个视口宽度和高度，z-index为0。
媒体上方放置一个深色覆盖层（半透明黑色），初始不可见，文本展开时淡入。
在宽于46.25em的屏幕上，媒体部分宽740px，无左外边距。
在宽于61.25em的屏幕上，变为630px宽并右对齐。
媒体内的标题位于顶部并带有额外内边距。
媒体内的图形和灯箱图像初始不可见，在半秒内淡入。
它们的内层span隐藏，div占满整个高度。
复选框标签隐藏。
在更宽的屏幕上，链接内的任何按钮完全可见并位于上层。
图像顶部对齐。
当图形或灯箱具有“show-me”类时，变为可见。
对于偏好减少动画的用户，淡入效果被禁用。
图形和灯箱图像在媒体容器内绝对定位。[data-gu-name=media] picture，
.content__main-column--interactive [data-gu-name=media] img，
.content__main-column--interactive [data-gu-name=media] gu-island[name=AppsLightboxImage] {
宽度：100%；
高度：100%；
外边距：0；
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type label {
显示：none !important；
}
@media (min-width: 46.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type a.open-lightbox {
显示：none；
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span {
显示：块；
}
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span label {
显示：块；
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span #the-caption figcaption {
上内边距：8px；
}
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.card-figure.video-container.loop:after {
内容：“SnapSlides中不支持视频循环作为主媒体。移除循环并选择动态图像或静态图片代替。”；
位置：绝对；
顶部：50px；
左侧：8px；
颜色：#c70000；
字体家族：Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif；
文本转换：大写；
字重：700；
字体大小：20px；
内边距：2px 6px；
z-index：100；
最大宽度：500px；
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph {
高度：100vh；
宽度：100vw；
}
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph div:has(video)，
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph video {
高度：100vh；
宽度：100%；
对象适配：覆盖；
}
@media (min-width: 46.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph {
最大宽度：740px；
}
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph {
最大宽度：630px；
}
}
.content__main-column--interactive [data-gu-name=media] .media-placeholder {
宽度：100%；
高度：100%；
背景颜色：#ededed；
位置：绝对；
不透明度：0；
过渡：不透明度 0.5s 缓入缓出；
}
.content__main-column--interactive [data-gu-name=media] .media-placeholder.show-me {
不透明度：1；
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] .media-placeholder {
背景颜色：#fff；
}
}
@media (prefers-reduced-motion: reduce) {
.content__main-column--interactive [data-gu-name=media] .media-placeholder {
过渡：无；
}
}
.content__main-column--interactive [data-gu-name=media] .card-figure figure > div {
宽度：100%；
高度：100%；
内边距：0 10px；
显示：flex；
对齐内容：居中；
对齐项目：居中；
}
.content__main-column--interactive [data-gu-name=media] .card-figure figure > div > div {
边框半径：8px；
高度：auto；
最大高度：95%；
宽度：auto；
溢出：隐藏；
}
.content__main-column--interactive [data-gu-name=media] .card-figure.show-me figure {
不透明度：1；
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div {
宽度：auto；
最大高度：取消设置；
边框半径：8px；
}
@media (min-width: 61.25em) {
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div {
高度：95%；
}
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div > div {
高度：fit-content；
位置：相对；
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph，
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph div:has(video)，
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph video {
高度：100vh；
宽度：100%；
外边距：0；
内边距：0 !important；
边框半径：0；
}
.content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph video {
对象适配：覆盖；
}
.content__main-column--interactive [data-gu-name=media] .card-figure:has(>[data-component=youtube-embed]) {
显示：fl
}以下是改写为流畅自然英语的文本：
内容列使用flexbox在水平和垂直方向上居中项目。当媒体元素包含YouTube嵌入时，卡片图形的容器调整其高度以适应内容，添加圆角并隐藏任何溢出。互动媒体块中的iframe占据其容器的整个高度。
卡片包装器相对于页面定位，并向上移动整个视口高度。在宽于61.25em（约980px）的屏幕上，包装器限制为460px宽并带有小左外边距。在宽于71.25em（约1140px）的屏幕上，该左外边距被移除。
对于深色主题文章，边框颜色设置为深灰色。在宽于46.25em（约740px）的屏幕上，文章背景变为非常深的灰色。这些文章中的媒体占位符和卡片图形在较小屏幕上使用稍浅的深色背景，在较大屏幕上切换到与文章相同的深灰色。
在iOS应用中，媒体部分占据整个视口高度，卡片包装器向上移动相同量。元数据部分在包含“收听文章”组件时隐藏其容器。
当系统处于深色模式（且站点未强制为浅色模式）时，应用相同的深色主题调整：文章边框变为深灰色，较大屏幕上的背景变为非常深的灰色，媒体占位符和卡片图形使用适当的深色阴影。
根元素根据活动支柱定义分享按钮颜色并设置不透明度值。具有“furniture”样式的文章卡片使用space-between进行布局并具有内边距。信息按钮出现在这些卡片的右上角——它是圆形的、半透明的且可点击。在更宽的屏幕上，它进一步向右定位。灯箱按钮在小屏幕上隐藏，在中等屏幕上出现（但不响应点击），在大屏幕上再次消失。
这些卡片中的系列标签以粗体白色文本显示在彩色背景上，使用衬线字体。标题部分有底部外边距，主标题使用粗体、大型衬线字体。副标题使用相同的衬线字体并带有衬线数字。e-card [data-gu-name=headline] h2:has(strong) {
字体大小：24px；
上内边距：0；
}
.article-card.furniture-card [data-gu-name=headline] h2:not(:has(strong)) {
字体大小：42px；
字重：200；
}
.article-card.furniture-card [data-gu-name=standfirst] p {
字体大小：17px；
}
.article-card.furniture-card [data-gu-name=meta] {
显示：网格；
网格模板区域：“byline byline share”；
网格模板列：1fr 1fr auto；
}
@media (min-width: 61.25em) {
.article-card.furniture-card [data-gu-name=meta] {
网格模板列：1fr；
网格模板区域：“byline” “share”；
}
}
.article-card.furniture-card [data-gu-name=meta] address {
网格区域：byline；
}
.article-card.furniture-card [data-gu-name=meta] address a {
底部边框：无；
}
.article-card.furniture-card [data-gu-name=meta] address .byline a，
.article-card.furniture-card [data-gu-name=meta] address .byline span {
颜色：var(--active-pillar-400)；
}
.article-card.furniture-card [data-gu-name=meta] address+div {
--article-link-text: var(--active-pillar-400)；
}
.article-card.furniture-card [data-gu-name=meta] address+div a:hover {
颜色：#fff；
}
.article-card.furniture-card [data-gu-name=meta] address，
.article-card.furniture-card [data-gu-name=meta] address+div {
上内边距：4px；
顶部边框：1px solid var(--article-border)；
}
.article-card.furniture-card [data-gu-name=meta] address+div {
网格区域：share；
}
@media (min-width: 61.25em) {
.article-card.furniture-card [data-gu-name=meta] address+div {
顶部边框：无；
上内边距：0；
}
}
.article-card.furniture-card [data-gu-name=meta] .meta__social，
.article-card.furniture-card [data-gu-name=meta] .meta__comment {
上内边距：0；
边框：无；
}
.article-card.furniture-card .slides-counter {
边框半径：18px；
内边距：0 4px 2px 6px；
背景颜色：#121212b3；
宽度：-moz-fit-content；
宽度：fit-content；
}
.article-card.furniture-card .slides-counter-wrapper {
内边距：4px 4px 3px 0；
颜色：#fff；
字体家族：Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif；
字体大小：12px；
字体样式：常规；
字重：700；
行高：130%；
底部边框：无；
外边距：0；
}
.article-card.furniture-card .slides-counter-wrapper svg {
底部外边距：-3px；
}
@media (min-width: 46.25em) {
.article-card.furniture-card .slides-counter {
位置：绝对；
}
}
@media (min-width: 61.25em) {
.article-card.furniture-card .slides-counter {
位置：静态；
内边距：0 5px 2px 8px；
}
.article-card.furniture-card .slides-counter-wrapper {
字体大小：15px；
}
.article-card.furniture-card .slides-counter-wrapper svg {
底部外边距：-1px；
}
}
@media (min-width: 61.25em) {
.article-card.furniture-card {
内边距：10px 0；
}
}
article.feature-dark .article-card--content.furniture-card--content {
背景：线性渐变(0deg, #12121266 0% 100%), var(--furniture-card-gradient-color)；
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=headline] h1 {
颜色：var(--active-pillar-500)；
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] {
--byline: var(--active-pillar-500)；
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] a，
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] svg，
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] button {
--article-link-text: var(--active-pillar-500)；
--share-button: var(--active-pillar-500)；
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline，
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline a，
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline span {
颜色：var(--active-pillar-500)；
}
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social a，
article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social button {
边框颜色：var(--article-border) !important；
}
article.feature-dark [data-component=series] {
背景颜色：var(--active-pillar-500)；
颜色：#121212；
}
article.explainer [data-gu-name=headline] h1:before {
内容：“Explainer”；
显示：块；
字体家族：Guardian Headline Full, Guardian Egyptian Web, Georgia, ser；
}if；字体大小：17px；字重：700；行高：115%；颜色：#fff；背景颜色：var(--active-pillar-400)；宽度：-moz-max-content；宽度：max-content；内边距：3px 6px 4px}article.explainer.feature-dark [data-gu-name=headline] h1:before{背景颜色：var(--active-pillar-500)；颜色：#121212}article:not(.feature-light):not(.feature-dark).news .article-card.furniture-card [data-gu-name=headline] h1{字重：500}[data-rendering-target=apps] article.feature-dark .article-card p{颜色：#dcdcdc!important}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta]{显示：块}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] .byline>span>div{显示：none!important}@media (min-width: 46.25em){[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] .byline>span:has(gu-island){显示：块}}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] address,[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] address+div{边框：无!important}@media (min-width: 61.25em){[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] address+div{显示：none}}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] .content__meta-container_dcr svg{显示：none!important}[data-rendering-target=apps] .article-card.furniture-card [data-gu-name=meta] [data-gu-name=follow]{上边距：8px}@media (prefers-color-scheme: dark){:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content{背景：线性渐变(0deg,#12121266 0% 100%),var(--furniture-card-gradient-color)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=headline] h1{颜色：var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta]{--byline: var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] a,:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] svg{--article-link-text: var(--active-pillar-500)；--share-button: var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] .byline,:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] .byline a,:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] .byline span{颜色：var(--active-pillar-500)}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social a,:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social button{边框颜色：var(--article-border)!important}:root:root:not([data-color-scheme=light]) article .article-card--content.furniture-card--content p{颜色：#dcdcdc}:root:root:not([data-color-scheme=light]) article [data-component=series]{背景颜色：var(--active-pillar-500)；颜色：#121212}:root:root:not([data-color-scheme=light]) article.explainer [data-gu-name=headline] h1:before{背景颜色：var(--active-pillar-500)；颜色：#121212}:root:root:not([data-color-scheme=light]) article.news.explainer [data-gu-name=headline] h1:before{颜色：#fff}:root:root:not([data-color-scheme=light]) article.news .article-card--content.furniture-card--content{背景：#1a1a1ae6}}.article-card{宽度：100%；高度：100vh；显示：flex；flex-flow：column nowrap；对齐内容：flex-end；内边距：0 10px 10px；位置：相对；溢出：隐藏}@media (min-width: 61.25em){.article-card{内边距：0 0 28px}}.article-card--lightbox-btn{显示：块；高度：-webkit-fill-available；背景：透明；底部边框：无!important}@media (min-width: 71.25em){.article-card--lightbox-btn{显示：none}}.article-card.no-media{内边距：10px；jus以下是改写为流畅自然英语的文本：
文章卡片居中，使用`justify-content: center`。当它是纯媒体卡片时，不可见（不透明度为0）。卡片的标题和段落文本为深灰色（#121212）。
卡片内容区域有10px的内边距、圆角（8px）和半透明白色背景并带有模糊效果。它有底部外边距，根据视口高度调整，最大高度为页面其余部分留出空间。
在更宽的屏幕上（超过61.25em宽），背景变为略有不同的半透明灰色，底部外边距减少到10px。
如果卡片有标题且不是唯一子元素，则获得顶部边框和额外外边距。如果标题是唯一子元素，则没有外边距或内边距。
标题（h2）使用115%的行高，没有内边距，其颜色由自定义属性（--active-pillar-200）设置。如果标题不包含粗体文本，则为大号（42px）和细体（字重300），在更宽的屏幕上增长到50px。如果包含粗体文本，则为较小（24px）和粗体（700），并带有额外底部内边距，在更宽的屏幕上增长到28px。如果标题包含斜体文本，则为黑色、17px且不大写，并移除斜体样式。
段落为15px。其中的链接使用特定颜色（--active-pillar-400）且没有边框，但在悬停时获得底部边框。最后一段有小的底部外边距。
有一个“显示更多”按钮在更宽的屏幕上隐藏。它没有边框，是块级元素且透明。其文本使用特定字体和颜色，并包含一个点击时平滑
