/*
 * Direction B, approved by Danny on 2026-10-20.
 * Warm paper and terracotta, with PHT Chinese and editorial English headings.
 * Loaded after the original styles. Remove this stylesheet reference to revert.
 * Frontend only: no changes to resource files, content, or access controls.
 */
:root, html[data-theme="light"] {
  --bg: #faf9f5;
  --bg-2: #f5f0e8;
  --cell: #ffffff;
  --cell-alt: #ffffff;
  --fill: rgba(83, 63, 45, .055);
  --fill-2: rgba(83, 63, 45, .10);
  --ink: #252523;
  --ink-2: #69645d;
  --ink-3: #898278;
  --line: #e3ddd4;
  --line-firm: #bcb2a6;
  --line-2: #ebe5dc;
  --accent: #91482f;
  --btn-bg: #a9583e;
  --btn-fg: #ffffff;
  --btn-hover: #91482f;
  --btn2-bg: #eee7dd;
  --btn2-hover: #e7ddcf;
  --nav-bg: rgba(250, 249, 245, .94);
  --stage: linear-gradient(145deg, #f3eade, #ead3c3);
  --stage-alt: linear-gradient(145deg, #f8f3eb, #eee1d1);
  --device-bg: #ffffff;
  --device-bar: #f6f2ec;
  --device-line: #e7dfd4;
  --device-ink: #252523;
  --device-soft: #69645d;
  --mask: #d6cbbd;
  --skel: #e9e1d7;
  --hl: rgba(83, 63, 45, .07);
  --shadow-product: 0 24px 48px -24px rgba(91, 60, 38, .27), 0 6px 16px -8px rgba(91, 60, 38, .14), 0 0 0 1px rgba(91, 60, 38, .06);
  --shadow-pop: 0 16px 48px rgba(70, 51, 34, .13), 0 0 0 1px rgba(70, 51, 34, .06);
  --shadow-thumb: 0 2px 5px rgba(70, 51, 34, .12), 0 0 0 1px rgba(70, 51, 34, .05);
  --focus: 0 0 0 3px rgba(169, 88, 62, .24);
  --warm-hero: linear-gradient(115deg, #faf7f1 0%, #f5eee4 100%);
  --warm-accent-soft: #f4e7dc;
  --warm-stage-line: rgba(255, 255, 255, .5);
}

/* The existing light / dark / system controls continue to select the theme. */
html[data-theme="dark"] {
  --bg: #1c1b18;
  --bg-2: #24221f;
  --cell: #2b2824;
  --cell-alt: #302c27;
  --fill: rgba(245, 232, 212, .07);
  --fill-2: rgba(245, 232, 212, .12);
  --ink: #f5f0e8;
  --ink-2: #c0b6a8;
  --ink-3: #958b7f;
  --line: #4b443b;
  --line-firm: #756a5b;
  --line-2: #3b352d;
  --accent: #e8ab91;
  --btn-bg: #e8ab91;
  --btn-fg: #28201b;
  --btn-hover: #f0bea7;
  --btn2-bg: #3d352d;
  --btn2-hover: #4a4035;
  --nav-bg: rgba(28, 27, 24, .94);
  --stage: linear-gradient(145deg, #3c3028, #4c382c);
  --stage-alt: linear-gradient(145deg, #342b24, #433329);
  --device-bg: #2b2824;
  --device-bar: #322e28;
  --device-line: #4b443b;
  --device-ink: #f5f0e8;
  --device-soft: #c0b6a8;
  --mask: #625747;
  --skel: #40372e;
  --hl: rgba(245, 232, 212, .10);
  --shadow-product: 0 24px 48px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(245, 232, 212, .07);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, .45), 0 0 0 1px rgba(245, 232, 212, .09);
  --shadow-thumb: 0 2px 5px rgba(0, 0, 0, .35);
  --focus: 0 0 0 3px rgba(232, 171, 145, .32);
  --warm-hero: linear-gradient(115deg, #27231e 0%, #322820 100%);
  --warm-accent-soft: #3d2d24;
  --warm-stage-line: rgba(245, 232, 212, .07);
}

/* White reading surfaces remain distinct from the warm page canvas. */
.cell { border: 1px solid var(--line-2); }
.top { border-bottom-color: var(--line-2); }
.top .av { background: var(--warm-accent-soft); }
.search { box-shadow: inset 0 0 0 1px var(--line-2); }
.foot { background: var(--bg); }

/* Homepage: one warm welcome panel, followed by compact, useful sections. */
#pg-home > .band { background: transparent; padding: 40px 0; }
#pg-home > .hm-hero-band { padding: 32px 0 24px; }
#pg-home .hm-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding: 48px;
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background: var(--warm-hero);
}
#pg-home .hm-copy, #pg-home .hm-show { min-width: 0; }
#pg-home .hm-h { margin-top: 20px; font-size: var(--t56); line-height: 1.15; }
#pg-home .hm-lead { margin-top: 20px; font-size: var(--t17); line-height: 1.65; }
#pg-home .hm-acts { margin-top: 28px; gap: 16px 24px; }
#pg-home .hm-nonag { margin-top: 28px; padding-top: 20px; }
#pg-home .hm-stage.hm-stage-preview {
  padding: 32px 24px;
  border: 1px solid var(--warm-stage-line);
  border-radius: 20px;
  background: var(--stage);
}
#pg-home .hm-stage-preview .device { border-radius: 12px; }
#pg-home .hm-cap { margin-top: 16px; padding: 0 4px; align-items: start; flex-wrap: wrap; }
#pg-home .hm-cap-t { margin-top: 4px; font-size: var(--t15); line-height: 1.55; font-weight: 500; }
#pg-home .hm-cap-k { white-space: normal; text-overflow: clip; }
#pg-home .hm-cap .lnk-a { margin-left: auto; }

/* Reduce the empty personal area without hiding active questions or invites. */
#pg-home > #hm-mine-band { padding: 0 0 16px; }
#pg-home #hm-mine-band > .wrap {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--wrap);
  padding: 28px 32px;
  background: var(--cell);
  border: 1px solid var(--line-2);
  border-radius: 16px;
}
#pg-home .hm-mine { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 40px; align-items: center; }
#pg-home .hm-mine-h .h2 { font-size: var(--t21); }
#pg-home .hm-mine-h > .lead { font-size: var(--t14); margin-top: 4px; }
#pg-home .hm-ml { border-top: 0; }
#pg-home .hm-ml > li:last-child { border-bottom: 0; }
#pg-home .hm-mi-empty { padding: 0; }
#pg-home .hm-mi-empty > .lead { font-size: var(--t17); }
#pg-home .hm-mi-empty > .lnk-a { margin-top: 4px; font-size: var(--t15); }
#pg-home .hm-mi { padding: 20px 0; }
#pg-home .hm-mi-i { background: var(--warm-accent-soft); }

#pg-home .sec-h { margin-bottom: 24px; gap: 20px; }
#pg-home .sec-h .h2, #pg-home .hm-wants-h .h2 { font-size: var(--t28); line-height: 1.35; }
#pg-home .sec-h .lead, #pg-home .hm-wants-h .lead { font-size: var(--t17); line-height: 1.6; }
#pg-home .hm-cell { border-radius: 16px; }
#pg-home .hm-cell.hm-cell-single { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; padding: 32px; }
#pg-home .hm-cell-single .hm-img { padding: 20px; border-radius: 12px; background: var(--stage-alt); }
#pg-home .hm-cell-single .hm-img .device { border-radius: 8px; }
#pg-home .hm-cell-single .cell-t { font-size: var(--t28); }
#pg-home .hm-new { background: var(--warm-accent-soft); box-shadow: none; }
#pg-home .hm-talk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
#pg-home .hm-voices, #pg-home .hm-asked {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--cell);
}
#pg-home .hm-vl > li { padding: 20px 0; }
#pg-home .hm-vl > li:first-child { border-top: 0; padding-top: 0; }
#pg-home .hm-vl > li:last-child { border-bottom: 0; padding-bottom: 0; }
#pg-home .hm-asked > .lead { font-size: var(--t17); }
#pg-home .hm-aq { padding: 24px; background: var(--bg-2); }
#pg-home .hm-wants { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
#pg-home .hm-wl { border-top: 0; }
#pg-home .hm-wants-empty { padding: 0; }
#pg-home > .hm-ask-band { padding-top: 24px; padding-bottom: 56px; }
#pg-home .hm-askp { padding: 40px; gap: 48px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--warm-hero); }
#pg-home .hm-askp .h2 { font-size: var(--t28); line-height: 1.4; }
#pg-home .hm-askp .lead { font-size: var(--t17); }
#pg-home .hm-askp .btn { background: var(--btn2-bg); color: var(--accent); }
#pg-home .hm-askp .btn:hover { background: var(--btn2-hover); }
#pg-home .hm-askdev { box-shadow: var(--shadow-thumb); border-radius: 12px; }

@media (min-width: 1100px) and (max-width: 1279px) {
  #pg-home .hm-hero { padding: 40px 32px; gap: 32px; }
  #pg-home .hm-h { font-size: var(--t40); }
}
@media (min-width: 760px) and (max-width: 1099px) {
  #pg-home .hm-hero { padding: 32px; gap: 28px; }
  #pg-home .hm-hero:has(.hm-float) { grid-template-columns: minmax(0, 1fr); }
  #pg-home .hm-h { font-size: var(--t40); }
  #pg-home .hm-acts { align-items: start; flex-direction: column; }
  #pg-home .hm-stage.hm-stage-preview { padding: 24px 16px; }
  #pg-home .hm-mine { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; }
  #pg-home .hm-cell.hm-cell-single { gap: 24px; }
  #pg-home .hm-cell-single .cell-t { font-size: var(--t21); }
  #pg-home .hm-askp { gap: 32px; }
}
@media (max-width: 759px) {
  #pg-home > .band { padding: 28px 0; }
  #pg-home > .hm-hero-band { padding: 16px 0; }
  #pg-home .hm-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 28px; border-radius: 20px; }
  #pg-home .hm-h { font-size: clamp(28px, 7.8vw, 40px); line-height: 1.25; }
  #pg-home .hm-lead { margin-top: 16px; }
  #pg-home .hm-acts { margin-top: 24px; }
  #pg-home .hm-nonag { margin-top: 24px; font-size: var(--t14); }
  #pg-home .hm-stage.hm-stage-preview { padding: 24px 16px; }
  #pg-home .hm-cap { gap: 8px; }
  #pg-home .hm-cap .lnk-a { margin-left: 0; }
  #pg-home > #hm-mine-band { padding: 0 0 12px; }
  #pg-home #hm-mine-band > .wrap { padding: 24px; }
  #pg-home .hm-mine, #pg-home .hm-talk, #pg-home .hm-wants { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #pg-home .hm-mi-empty { padding: 0; }
  #pg-home .sec-h { align-items: start; flex-wrap: wrap; gap: 12px; }
  #pg-home .hm-cell.hm-cell-single { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 24px; }
  #pg-home .hm-cell-single .cell-t { font-size: var(--t21); }
  #pg-home .hm-cell-single .hm-img { max-width: 100%; padding: 16px; }
  #pg-home .hm-voices, #pg-home .hm-asked { padding: 24px; }
  #pg-home .hm-wants-empty { padding: 0; }
  #pg-home > .hm-ask-band { padding-top: 16px; padding-bottom: 32px; }
  #pg-home .hm-askp { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; gap: 28px; }
}

/* English editorial headings, inspired by Claude Academy's serif/sans hierarchy.
 * Georgia is a system-font approximation, not Anthropic's brand typeface.
 * Chinese typography, utility labels and resource screenshots are unchanged. */
html[lang="en"] main :is(h1, h2, .h1, .h2),
html[lang="en"] #pg-home :is(.hm-h, .hm-cell .cell-t),
html[lang="en"] #pg-tools :is(.tl-title, .tc-big .tc-n),
html[lang="en"] #pg-tool .tp-h1,
html[lang="en"] #pg-login :is(.lg-stage-title, .lg-say-h, .lg-h),
html[lang="en"] #pg-me .hm-cell-single .cell-t {
  font-family: Georgia, "Times New Roman", "PHT", serif;
  font-weight: 400;
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
html[lang="en"] #pg-home .hm-h { line-height: 1.12; }
html[lang="en"] #pg-home .hm-h > span { display: block; }
html[lang="en"] #pg-home .hm-h br { display: none; }
@media (min-width: 1280px) {
  html[lang="en"] #pg-home .hm-h { font-size: 52px; }
}
@media (max-width: 759px) {
  html[lang="en"] #pg-home .hm-h { font-size: clamp(32px, 8.7vw, 40px); line-height: 1.16; }
}