/* Existing Earnest team artwork, sourced in docs/品牌素材.md. */
@font-face {
  font-family: "Earnest Serif";
  src: url("/assets/brand/heading.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Earnest Latin";
  src: url("/assets/brand/latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@layer brand {
  :root {
    --paper: #f7f4ed;
    --ink: #1e2a40;
    --line: #e0ded5;
    --gold: #816024;
    --gold-light: #f4ebd6;
    --brand-gold: #c09f5a;
    --champagne: #e1c88e;
    --nav-muted: #cbd1dc;
    --serif: "Earnest Serif", "Songti TC", serif;
    --latin: "Earnest Latin", Georgia, serif;
  }

  h1, .auth-form-wrap h2, .section-heading h2, .forecast-block h2,
  .travel-teaser h2, .travel-banner h2, .record-notes h2, .settings-panel h2 {
    font-family: var(--serif);
    letter-spacing: 0;
    font-weight: 650;
  }
  .brand {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    line-height: 1.15;
  }
  .brand-symbol { width: 60px; height: 50px; object-fit: contain; flex-shrink: 0; }
  .brand-copy { display: flex; flex-direction: column; gap: 7px; }
  .brand-name { font: 550 23px/1 var(--latin); letter-spacing: .045em; }
  .brand-sub { font-size: 8px; letter-spacing: .23em; margin: 0; }

  .auth-story {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ink);
    border-top: 5px solid var(--brand-gold);
  }
  .auth-story > :not(.story-orbit) { position: relative; z-index: 1; }
  .auth-story .brand { color: #fff9ec; }
  .auth-story .brand-sub { color: var(--champagne); }
  .story-orbit {
    position: absolute;
    width: min(630px, 112%);
    height: auto;
    right: -21%;
    top: 15%;
    opacity: .17;
    pointer-events: none;
  }
  .story-main { max-width: 440px; padding: 65px 0; }
  .story-main h1 { font-family: var(--serif); font-size: 49px; line-height: 1.5; font-weight: 550; letter-spacing: .025em; }
  .story-main > p { color: #e0daca; font-size: 16px; }
  .story-ledger { margin-top: 46px; }
  .story-ledger > div { border-bottom-color: #4f5360; padding: 17px 0; }
  .story-ledger > div > span:first-child { color: var(--champagne); font: 500 24px/1.5 var(--latin); }
  .story-ledger > div > span:nth-child(2) { color: #e0daca; }
  .story-ledger .icon { color: var(--champagne); }
  .story-footer { color: #d4cebd; }
  .auth-main { background: #fffdf8; }
  .auth-form-wrap h2 { font-size: 29px; }
  .auth-lock { background: var(--gold-light); border-radius: 50%; }
  .first-login-brand { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

  .sidebar { background: var(--ink); color: #fff9ec; border-right-color: var(--ink); }
  .sidebar .brand { padding: 0 0 0 12px; }
  .sidebar .brand-symbol { width: 132px; height: 110px; }
  .sidebar .brand-copy { display: none; }
  .sidebar-label { color: #d4cebd; margin-top: 34px; }
  .sidebar .nav-item { color: var(--nav-muted); }
  .sidebar .nav-item.active { background: var(--champagne); color: var(--ink); }
  .sidebar .nav-item:hover { background: #33405a; color: #fff9ec; }
  .sidebar .nav-item.active:hover { background: #ecd6a6; color: var(--ink); }
  .sidebar .nav-dot { background: var(--ink); }
  .sidebar .avatar { background: #42516a; color: #fff5db; }
  .sidebar-bottom { border-top: 1px solid #46516a; margin-top: auto; }
  .sidebar-bottom span { color: #d1d5de; }
  .sidebar :focus-visible, .auth-story :focus-visible { outline-color: var(--champagne); }

  .topbar { background: #fffdf8; }
  .topbar-actions { display: flex; align-items: center; gap: 30px; margin-left: auto; }
  .page-heading h1 { line-height: 1.5; }
  .page-heading h1::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 12px; background: var(--brand-gold); }
  .page-heading p { margin-top: 10px; }
  .footer-brand { display: flex; align-items: center; gap: 20px; }
  .page-footer { align-items: center; padding-top: 20px; }

  .income-main { position: relative; isolation: isolate; }
  .income-main::after {
    content: ""; position: absolute; z-index: -1; right: 0; bottom: 0;
    width: 235px; height: 100%; opacity: .15; pointer-events: none;
    background: url("/assets/brand/earnest-orbit.svg") center / contain no-repeat;
  }
  .metric-label { color: #ede6d8; }
  .metric-caption { color: #d7dce5; }
  .income-total strong { color: var(--gold); }
  .goal-ledger { background: #fffdf9; border-top-color: var(--brand-gold); border-radius: 12px; }
  .goal-row:first-child { border-radius: 12px 12px 0 0; }
  .goal-row:last-child { border-radius: 0 0 12px 12px; }
  .goal-row.next-goal { background: #f2e8cf; }
  .goal-identity h3 { font-family: var(--latin); font-size: 24px; font-weight: 550; letter-spacing: 0; }
  .next-goal .goal-symbol { background: #dfc88f; color: #654912; }
  .badge.gold { background: #ebd9a9; color: #654912; }
  .travel-teaser, .travel-banner { position: relative; isolation: isolate; }
  .travel-teaser::before, .travel-banner::before {
    content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto;
    width: 160px; pointer-events: none; opacity: .22;
    background: url("/assets/brand/earnest-orbit.svg") right center / contain no-repeat;
  }
  .travel-teaser { background: #f0e2bf; }
  .travel-teaser:hover { background: #ead9ad; }
  .travel-teaser h2 { font-size: 18px; }
  .travel-banner { background: #f0e2bf; }
  .trip-mark { border-color: #ceb574; }

  .agent-person-link { display:block; font-size:12px; text-decoration:underline; text-decoration-color:var(--brand-gold); text-underline-offset:4px; }
  .agent-person-link .cell-sub { text-decoration:none; }
  .user-portal-entry { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 26px; margin-bottom:24px; background:#f0e2bf; border-radius:12px; }
  .user-portal-entry h2 { font:650 19px/1.5 var(--serif); }
  .user-portal-entry p { color:#695725; font-size:12px; margin-top:6px; }
  .admin-stats { background: var(--ink); border-radius: 12px; padding: 26px 28px; margin-bottom: 28px; gap: 28px; }
  .admin-stats > div { border-left-color: #65718a; }
  .admin-stats span { color: #e0daca; }
  .admin-stats strong { color: var(--champagne); }
  .button.primary:hover { background: #33405a; }
  .button.secondary:hover { background: #f3ebd9; }
  .financial-table thead th { background: #f6f1e5; }

  @media (min-width:1500px) {
    .story-main h1 { font-size: 53px; }
  }
  @media (max-width:1180px) {
    .auth-story { padding-left: 42px; padding-right: 42px; }
    .story-main h1 { font-size: 41px; }
    .story-main > p { font-size: 14px; }
    .story-ledger > div { gap: 15px; }
    .story-ledger > div > span:first-child { min-width: 72px; font-size: 22px; }
    .topbar-actions { gap: 20px; }
  }
  @media (max-width:900px) {
    .sidebar .brand { padding-left: 0; }
    .sidebar .brand-symbol { width: 126px; height: 104px; }
    .footer-brand { gap: 10px; }
    .footer-brand > span { max-width: 23ch; }
  }
  @media (max-width:680px) {
    .brand { gap: 9px; }
    .brand-symbol { width: 52px; height: 44px; }
    .brand-name { font-size: 23px; }
    .brand-sub { font-size: 7px; letter-spacing: .2em; }
    .auth-main { padding: 28px 26px 38px; background: var(--paper); }
    .auth-main .mobile-brand { margin-bottom: 36px; }
    .auth-main .brand-name { font-size: 23px; }
    .auth-form-wrap h2 { font-size: 27px; }
    .auth-lock { width: 43px; height: 43px; }
    .login-help { margin-bottom: 25px; }
    .topbar .brand-name { font-size: 20px; }
    .topbar .brand-sub { font-size: 6.5px; }
    .topbar .brand-symbol { width: 44px; height: 38px; }
    .topbar-actions { margin-left: auto; gap: 0; }
    .topbar { background: #fffdf8; }
    .page-heading h1 { font-size: 26px; line-height: 1.45; }
    .page-heading h1::after { margin-top: 10px; width: 28px; height: 2px; }
    .goal-identity h3 { font-size: 20px; }
    .income-main::after { width: 175px; opacity: .14; }
    .travel-teaser h2 { font-size: 17px; }
    .travel-teaser::before, .travel-banner::before { width: 125px; opacity: .17; }
    .user-portal-entry { flex-direction:column; align-items:stretch; gap:17px; padding:22px 20px; }
    .user-portal-entry h2 { font-size:18px; }
    .user-portal-entry p { font-size:11px; }
    .admin-stats { padding: 22px 16px; gap: 12px; }
    .admin-stats > div { padding-left: 10px; }
    .admin-stats > div:first-child { padding-left: 0; }
    .admin-stats strong { font-size: 28px; }
    .footer-brand { gap: 12px; }
    .footer-brand > span { max-width: 22ch; }
    .page-footer { row-gap: 15px; }
    .first-login-brand .brand-symbol { width: 43px; height: 36px; }
    .first-login-brand .brand-name { font-size: 18px; }
  }
  @media (max-width:360px) {
    .topbar { padding-left: 17px; padding-right: 17px; }
    .goal-identity h3 { font-size: 19px; }
    .brand-name { font-size: 21px; }
  }
}