/* sex_102000 — colour-block layout overlay.
   Base: Air_zh_TW (engine.css -> styles.css -> this file). No base file modified.
   Palette / band rhythm sampled numerically from 待开发_sexqu/102000.jpg; see design-plan.md. */

:root {
	--sx-shell: 1440px;
	--sx-gutter: 32px;
	--sx-sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
	--sx-serif: Georgia, "Times New Roman", Times, serif;
	--sx-hero-h: 62svh;
	--sx-scale: 1.18;
}

:root {
	--sx-paper: #F1EFF6;
	--sx-ink: #241E33;
	--sx-muted: #645B72;
	--sx-rule: #DAD3E2;
	--sx-wash: #E5E0EE;
	--sx-accent: #8A5A2B;
	--sx-band: #3B3350;
	--sx-band-ink: #FFFFFF;
	--sx-radius: 0px;
	--sx-gap: 28px;
}

:root[data-theme="dark"] {
	--sx-paper: #2A2540;
	--sx-ink: #F0ECF6;
	--sx-muted: #B7AFC8;
	--sx-rule: #4A4162;
	--sx-wash: #35304E;
	--sx-accent: #D2A36A;
	--sx-band: #1F1B30;
	--sx-band-ink: #FFFFFF;
	--sx-radius: 0px;
	--sx-gap: 28px;
}


/* Theme toggle reflects the current state, not the destination. */
[data-theme="dark"] .theme-sun { display: block; }
[data-theme="dark"] .theme-moon { display: none; }
[data-theme="light"] .theme-sun { display: none; }
[data-theme="light"] .theme-moon { display: block; }

/* ---------- ground ---------- */
body { background: var(--sx-paper); color: var(--sx-ink); font-family: var(--sx-sans); }
.site-header { background: var(--sx-paper); }

/* Keyboard focus must be visible at 3:1 or better on every surface. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--sx-accent);
    outline-offset: 3px;
    border-radius: var(--sx-radius);
}
.sx-sec--band :where(a, button):focus-visible { outline-color: var(--sx-band-ink); }
[data-theme="dark"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: var(--sx-accent);
}
.layout, .container { max-width: var(--sx-shell); }
.section-heading h1, .section-heading h2, .sx-sec__title { font-family: var(--sx-serif); }
.sx-shell { width: min(calc(100% - 2 * var(--sx-gutter)), var(--sx-shell)); margin-inline: auto; }
/* Colour-block references: the base .visual ships decorative ellipse pseudo
   elements; suppress them so empty image slots read as flat colour blocks. */
.visual { display: block; background: var(--sx-wash); }
.visual::before, .visual::after { content: none; display: none; }
[data-theme="dark"] .visual { filter: none; }
.sx-grid > :nth-child(3n+2) .visual, .sx-grid > :nth-child(3n+2) .sx-card__ph,
.sx-grid > :nth-child(3n+2) .sx-tile__ph { background: var(--sx-rule); }
.sx-grid > :nth-child(3n) .visual, .sx-grid > :nth-child(3n) .sx-card__ph,
.sx-grid > :nth-child(3n) .sx-tile__ph { background: var(--sx-accent); }

/* ---------- hero: Air heroSlider contract, resized per colour-block ratio ---------- */
.hero.container { max-width: var(--sx-shell); }
.hero-stage { min-height: var(--sx-hero-h); border-radius: var(--sx-radius); background: var(--sx-wash); }
.hero-slide { min-height: var(--sx-hero-h); }
.hero-title { font-family: var(--sx-serif); }
/* .hero-media has only min-height in the base, so height:100% collapses.
   Fill it absolutely and give the right half a distinct colour block. */
.hero-media { background: var(--sx-rule); }
.hero-media .visual, .hero-media__link .visual {
    position: absolute; inset: 0; width: 100%; height: auto; min-height: 0;
    background: var(--sx-rule);
}
.hero-media .cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- block sequence ---------- */
.sx-sec { padding: calc(var(--sx-gap) * var(--sx-scale)) 0; }
.sx-sec--band { background: var(--sx-band); color: var(--sx-band-ink); }
.sx-sec--band .sx-sec__title, .sx-sec--band .sx-sec__link { color: var(--sx-band-ink); }
.sx-sec__head { display: flex; align-items: baseline; justify-content: space-between;
                gap: 16px; margin-bottom: calc(var(--sx-gap) * 0.8);
                border-bottom: 1px solid var(--sx-rule); padding-bottom: 12px; }
.sx-sec--band .sx-sec__head { border-bottom-color: var(--sx-rule); }
.sx-sec__title { font-size: clamp(1.5rem, 2.4vw, 2.35rem); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.sx-sec__link { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-accent);
                font-size: .9rem; font-weight: 600; white-space: nowrap; }
.sx-sec__link .icon { width: 16px; height: 16px; }
.sx-grid { display: grid; gap: var(--sx-gap); grid-template-columns: repeat(var(--sx-cols, 3), minmax(0, 1fr)); }
.sx-sec--c1 .sx-grid { --sx-cols: 1; }
.sx-sec--c2 .sx-grid { --sx-cols: 2; }
.sx-sec--c3 .sx-grid { --sx-cols: 3; }
.sx-sec--c4 .sx-grid { --sx-cols: 4; }
.sx-grid--feature .sx-feature:first-child { grid-column: 1 / -1; }
.sx-grid--split { --sx-cols: 2; }
.sx-grid--rows { --sx-cols: 1; }

/* ---------- cards ---------- */
.sx-card, .sx-tile, .sx-feature, .sx-row, .sx-band-card, .sx-split-card {
    min-width: 0; background: var(--sx-paper); color: var(--sx-ink);
    border: 1px solid var(--sx-rule); border-radius: var(--sx-radius); overflow: hidden;
}
.sx-band-card { background: var(--sx-wash); }
.sx-card__ph, .sx-tile__ph, .sx-feature__ph, .sx-row__ph, .sx-band-card__ph, .sx-split-card__ph {
    display: block; overflow: hidden; background: var(--sx-wash);
    /* Base .visual ships height:100%; that makes the block swallow the whole
       card and clips the title below it. Let aspect-ratio drive the height. */
    height: auto;
}
.sx-card__ph img, .sx-tile__ph img, .sx-feature__ph img, .sx-row__ph img,
.sx-band-card__ph img, .sx-split-card__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-card__ph, .sx-band-card__ph { aspect-ratio: 4 / 3; }
.sx-tile__ph { aspect-ratio: 4 / 5; }
.sx-feature__ph { aspect-ratio: 16 / 9; }
.sx-split-card__ph { aspect-ratio: 3 / 2; }
.sx-row__ph { aspect-ratio: 16 / 9; width: 220px; flex: 0 0 220px; }
.sx-card__body, .sx-tile__body, .sx-feature__body, .sx-row__body,
.sx-band-card__body, .sx-split-card__body { padding: 16px; }
.sx-card__title, .sx-tile__title, .sx-feature__title, .sx-row__title,
.sx-band-card__title, .sx-split-card__title {
    font-family: var(--sx-serif); font-size: 1.16rem; line-height: 1.28; margin: 6px 0 8px;
}
.sx-feature__title { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.sx-card__title a, .sx-tile__title a, .sx-feature__title a, .sx-row__title a,
.sx-band-card__title a, .sx-split-card__title a { color: inherit; text-decoration: none; }
.sx-card__title a:hover, .sx-tile__title a:hover, .sx-feature__title a:hover,
.sx-row__title a:hover, .sx-band-card__title a:hover, .sx-split-card__title a:hover {
    color: var(--sx-accent); text-decoration: underline;
}
.sx-card__text, .sx-feature__text, .sx-row__text, .sx-split-card__text {
    color: var(--sx-muted); font-size: .92rem; line-height: 1.55;
}
.sx-cat { color: var(--sx-accent); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.sx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
           color: var(--sx-muted); font-size: .8rem; margin-top: 10px; }
.sx-meta__sep { color: var(--sx-rule); }
.sx-read { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
           color: var(--sx-accent); font-weight: 600; font-size: .9rem; }
.sx-read .icon { width: 16px; height: 16px; }
.sx-row { display: flex; align-items: stretch; }
.sx-row__body { flex: 1 1 auto; min-width: 0; }
.sx-empty { display: flex; gap: 18px; align-items: center; padding: 24px;
            border: 1px dashed var(--sx-rule); border-radius: var(--sx-radius); }
.sx-empty .visual { width: 160px; height: 110px; flex: 0 0 160px; border-radius: var(--sx-radius); }
.sx-empty p { color: var(--sx-muted); font-size: .92rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .sx-sec--c4 .sx-grid { --sx-cols: 2; }
  .sx-sec--c3 .sx-grid { --sx-cols: 2; }
}
@media (max-width: 720px) {
  :root { --sx-gutter: 18px; --sx-gap: 14px; }
  .sx-sec--c2 .sx-grid, .sx-sec--c3 .sx-grid, .sx-sec--c4 .sx-grid,
  .sx-grid--split { --sx-cols: 1; }
  .sx-grid--feature .sx-feature:first-child { grid-column: auto; }
  .hero-stage, .hero-slide { min-height: 46svh; }
  .sx-row { flex-direction: column; }
  .sx-row__ph { width: 100%; flex: none; }
  .sx-sec__head { flex-wrap: wrap; }
}

/* ============================================================================
   內容頁閱讀排版 / Content-page reading typography
   ----------------------------------------------------------------------------
   作用範圍：文章正文（.fullstory .story-text）與單頁（.panel .story-text）。
   列表頁摘要（.story-card .story-text）維持原本的緊湊節奏，不受影響。

   字級 18px、行距 1.85、段距 1.05em；標題上重下輕的留白、清單項目間距、
   引言層級、圖說與表格行高同步調整。欄寬不動，避免正文與標題／封面圖／
   表格出現不對齊的右側空帶。
   ========================================================================== */

:root {
	--read-size: calc(var(--app-em) * 1.125);   /* 18px @ app-em 16px */
	--read-leading: 1.85;
}

/* ---------- 正文基礎 ---------- */
.fullstory .story-text,
.panel .story-text {
	font-size: var(--read-size);
	line-height: var(--read-leading);
	letter-spacing: .01em;
	overflow-wrap: break-word;
}

/* ---------- 段距 ---------- */
.fullstory .story-text :where(p, ul, ol, dl, blockquote, pre, figure),
.panel .story-text :where(p, ul, ol, dl, blockquote, pre, figure) {
	margin-block: 0 1.05em;
}

/* ---------- 內文標題：字級、行距與上重下輕的留白 ---------- */
.fullstory .story-text :where(h1, h2, h3, h4, h5, h6),
.panel .story-text :where(h1, h2, h3, h4, h5, h6) {
	margin-block: 1.9em .6em;
	font-family: var(--sx-serif);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-wrap: balance;
}
.fullstory .story-text :where(h1),
.panel .story-text :where(h1) { font-size: 1.55em; }
.fullstory .story-text :where(h2),
.panel .story-text :where(h2) { font-size: 1.38em; }
.fullstory .story-text :where(h3),
.panel .story-text :where(h3) { font-size: 1.18em; }
.fullstory .story-text :where(h4),
.panel .story-text :where(h4) { font-size: 1.05em; }
.fullstory .story-text :where(h5, h6),
.panel .story-text :where(h5, h6) { font-size: 1em; }

/* 首尾不要多餘留白 */
.fullstory .story-text > :first-child,
.panel .story-text > :first-child { margin-top: 0; }
.fullstory .story-text > :last-child,
.panel .story-text > :last-child { margin-bottom: 0; }

/* ---------- 清單：項目之間要有呼吸，巢狀清單貼緊父項 ---------- */
.fullstory .story-text :where(ul, ol),
.panel .story-text :where(ul, ol) {
	padding-inline-start: 1.35em;
}
.fullstory .story-text li + li,
.panel .story-text li + li { margin-top: .4em; }
.fullstory .story-text li > :where(ul, ol),
.panel .story-text li > :where(ul, ol) { margin-top: .4em; margin-bottom: 0; }
.fullstory .story-text li::marker,
.panel .story-text li::marker { color: var(--sx-muted); }

/* ---------- 引言：抬高層級，靠主題色豎線分離 ---------- */
.fullstory .story-text :where(blockquote, .quote),
.panel .story-text :where(blockquote, .quote) {
	margin-block: 1.35em;
	padding: 1em 1.2em;
	border-inline-start: 3px solid var(--sx-accent);
	border-radius: 0;
	background: var(--sx-wash);
	color: var(--sx-ink);
	font-size: 1.02em;
	line-height: 1.8;
}
.fullstory .story-text blockquote > :last-child,
.panel .story-text blockquote > :last-child { margin-bottom: 0; }

/* ---------- 圖說 ---------- */
.fullstory .story-text :where(figcaption, .image-caption),
.panel .story-text :where(figcaption, .image-caption) {
	margin-top: .6em;
	color: var(--sx-muted);
	font-size: .9375em;
	line-height: 1.6;
}

/* ---------- 表格 ---------- */
.fullstory .story-text table,
.panel .story-text table {
	font-size: .9375em;
	line-height: 1.62;
}
.fullstory .story-text :where(th, td),
.panel .story-text :where(th, td) { padding: .62em .8em; }

/* ---------- 其他區塊 ---------- */
.fullstory .story-text figure,
.panel .story-text figure { margin-block: 1.35em; }
.fullstory .story-text hr,
.panel .story-text hr { margin-block: 2.1em; }
.fullstory .story-text :where(pre, code),
.panel .story-text :where(pre, code) { line-height: 1.7; }
.fullstory .story-text a,
.panel .story-text a { text-underline-offset: .22em; text-decoration-thickness: 1px; }

/* ---------- 內容頁大標：中文標題不宜壓到 1.1 倍行距 ---------- */
.fullstory__title { line-height: 1.22; letter-spacing: -.012em; }

/* ---------- 窄幅：行距再放寬一點，標題級差縮小 ---------- */
@media (max-width: 47.5em) {
	.fullstory .story-text,
	.panel .story-text { line-height: 1.9; letter-spacing: .015em; }
	.fullstory .story-text :where(h2), .panel .story-text :where(h2) { font-size: 1.28em; }
	.fullstory .story-text :where(h3), .panel .story-text :where(h3) { font-size: 1.14em; }
	.fullstory .story-text :where(h1, h2, h3, h4, h5, h6),
	.panel .story-text :where(h1, h2, h3, h4, h5, h6) { margin-block: 1.7em .55em; }
	.fullstory__title { line-height: 1.28; }
}