/* "About 1T1B" page-trigger link, used in every page's footer to link to
   /about/ (or /zh/about/) -- unrelated to the .about-1t1b page below. */
.about-validator.v-trigger { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.5 -apple-system, sans-serif; color: inherit; background: transparent; border: 0; cursor: pointer; }
.v-trigger img { width: 28px; height: auto; }
.v-trigger .v-trigger-dark { display: none; }
html[data-theme='dark'] .v-trigger .v-trigger-light { display: none; }
html[data-theme='dark'] .v-trigger .v-trigger-dark { display: block; }

/* The "About 1T1B" page itself (src/components/About1T1BPage.astro),
   adapted from the delivered 1t1b-onepage reference. Everything below is
   scoped under .about-1t1b -- the reference's own generic class names
   (.wrap, .button, .hero, .service, .product, .footer-main, .kicker...)
   would otherwise collide with styles.css, which loads on every page
   including this one. Page-local custom properties live on .about-1t1b
   rather than :root for the same reason. Typeface stays on the site's
   own --serif/--sans tokens (styles.css) instead of the reference's
   local @font-face, so the page matches the rest of the site's fonts. */
html:has(.about-1t1b) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.about-1t1b) { scroll-behavior: auto; } }

.about-1t1b {
  --ink: #202721; --night: #19211d; --paper: #f5f3eb; --muted: #a8b4aa;
  --copper: #c9956e; --line: #39443b;
  background: var(--paper); color: var(--ink);
  font: 15px/1.75 var(--sans); -webkit-font-smoothing: antialiased;
}
.about-1t1b, .about-1t1b * { box-sizing: border-box; }
.about-1t1b a { color: inherit; text-decoration: none; }
.about-1t1b button { font: inherit; cursor: pointer; }
.about-1t1b img { display: block; max-width: 100%; }
.about-1t1b h1, .about-1t1b h2, .about-1t1b h3, .about-1t1b p { margin: 0; }
.about-1t1b button, .about-1t1b a { -webkit-tap-highlight-color: transparent; }
.about-1t1b :focus-visible { outline: 2px solid var(--copper); outline-offset: 6px; }
.about-1t1b .wrap { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.about-1t1b .dark { background: var(--night); color: #f3f4ed; }
.about-1t1b .kicker { display: flex; align-items: center; gap: 10px; font: 550 10px/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.about-1t1b .kicker:before { content: ''; width: 6px; height: 6px; background: var(--copper); border-radius: 50%; }
.about-1t1b .muted { color: var(--muted); }
.about-1t1b .skip-link { position: absolute; top: -100px; left: 20px; padding: 8px 20px; background: white; color: black; z-index: 2; }
.about-1t1b .skip-link:focus { top: 10px; }

/* Header */
.about-1t1b .site-header { height: 94px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 24px; }
.about-1t1b .brand-logo { width: 177px; height: auto; }
.about-1t1b nav { display: flex; align-items: center; gap: 32px; font-size: 12px; color: #c8d0c6; }
.about-1t1b .lang-toggle { display: inline-flex; align-items: center; border: 1px solid #465044; border-radius: 5px; overflow: hidden; }
.about-1t1b .lang-toggle a { padding: 4px 12px; font-size: 11px; color: #e7ece1; }
.about-1t1b .lang-toggle a + a { border-left: 1px solid #465044; }
.about-1t1b .lang-toggle a[aria-current] { color: var(--ink); background: var(--copper); }
.about-1t1b .lang-toggle a:hover:not([aria-current]) { color: var(--copper); }

/* Hero */
.about-1t1b .hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 100px; padding: 76px 0 83px; align-items: center; }
.about-1t1b .hero h1 { font: 570 clamp(38px, 4.6vw, 62px)/1.2 var(--sans); letter-spacing: -.055em; margin: 22px 0 24px; }
.about-1t1b .hero h1 span { display: block; }
.about-1t1b .hero h1 span:last-child { color: #a7b79f; }
.about-1t1b .hero-intro { max-width: 515px; line-height: 1.95; font-size: 14px; color: #b5c0b5; }
.about-1t1b .hero-actions { display: flex; gap: 27px; align-items: center; margin-top: 34px; }
.about-1t1b .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 12px 19px; background: #e3eadb; color: #1e2a20; font-size: 12px; font-weight: 600; border: 1px solid transparent; border-radius: 3px; transition: background .2s, transform .2s; }
.about-1t1b .button:hover { background: #f0f3e9; transform: translateY(-2px); }
.about-1t1b .text-link { font-size: 12px; display: inline-flex; gap: 13px; align-items: center; border-bottom: 1px solid #637460; padding: 5px 0; }
.about-1t1b .text-link:hover { color: var(--copper); }
.about-1t1b .belief { padding: 8px 0 0 36px; border-left: 1px solid var(--line); }
.about-1t1b .belief .kicker { font-size: 9px; color: #aab7a8; }
.about-1t1b .equation { display: flex; flex-direction: column; margin: 20px 0 18px; max-width: 295px; }
.about-1t1b .asset-value { display: flex; align-items: baseline; gap: 21px; line-height: 1; }
.about-1t1b .asset-value b { font: 400 115px/.95 var(--serif); letter-spacing: -8px; }
.about-1t1b .asset-value span { font: 500 30px/1.1 var(--sans); letter-spacing: -1px; }
.about-1t1b .equals { display: block; position: relative; width: 173px; height: 19px; margin: 21px 0 21px 5px; }
.about-1t1b .equals:before, .about-1t1b .equals:after { content: ''; position: absolute; width: 100%; height: 2px; background: var(--copper); left: 0; }
.about-1t1b .equals:before { top: 3px; }
.about-1t1b .equals:after { bottom: 3px; }
.about-1t1b .belief-caption { font-size: 11px; color: #adb9aa; max-width: 275px; line-height: 1.8; }
.about-1t1b .hero-bottom { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--line); font-size: 10px; color: #889b89; letter-spacing: .11em; text-transform: uppercase; }
.about-1t1b .hero-bottom span:last-child { color: #c2cdbd; }
/* English headlines run longer than their Chinese counterparts -- the
   reference tunes hero/section sizing per language for that reason. */
html[lang="en"] .about-1t1b .hero h1 { font-size: 54px; line-height: 1.12; }
html[lang="en"] .about-1t1b .hero { gap: 64px; }
/* grid-template-columns is scoped to >720px on purpose: unscoped, this
   selector's specificity (html + [lang] + 2 classes) beats the mobile
   ".about-1t1b .hero { grid-template-columns: 1fr; ... }" override inside
   @media (max-width:720px), so on English the hero never collapsed to a
   single column -- the 1.6fr/1fr split squeezed .belief's "1TAO = 1BTC"
   block into a sliver too narrow for its content and overflowed the
   whole page horizontally on mobile (confirmed: reproduced at 480px on
   /about, absent on /zh/about at the same width). */
@media (min-width: 721px) {
  html[lang="en"] .about-1t1b .hero { grid-template-columns: 1.6fr 1fr; }
}
html[lang="en"] .about-1t1b .section-heading h2 { font-size: 30px; }
html[lang="en"] .about-1t1b .product h2 { font-size: 35px; }

/* Work */
.about-1t1b .work { padding: 73px 0 78px; scroll-margin-top: 28px; }
/* styles.css (loaded site-wide, for the market/report pages) also defines
   an unscoped .section-heading with height:40px and white-space:nowrap.
   This rule's higher specificity wins for the properties it sets below,
   but CSS resolves white-space and height independently per property --
   since this rule never declared them, the global nowrap/40px still won
   and, because white-space inherits, forced the English workIntro
   paragraph onto a single unbreakable ~690px line inside its 300px box,
   overflowing .work/.wrap/main/body and causing page-wide horizontal
   scroll at every viewport width (confirmed via computed styles: the <p>
   had white-space:nowrap despite no such rule targeting it directly).
   Reasserting both here breaks the bleed-through. */
.about-1t1b .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 42px; height: auto; white-space: normal; }
/* Flex items default to min-width:auto, so at widths between the 1000px
   and 720px breakpoints (no override applies to .section-heading itself
   there) neither the heading nor this paragraph could shrink past its
   own content's natural width, and the row could run past .wrap and off
   the page instead of wrapping earlier -- reported for real against
   workIntro's English copy. min-width:0 lets both items shrink to fit;
   overflow-wrap is a second line of defense against any single very
   long word/URL doing the same thing. */
.about-1t1b .section-heading > * { min-width: 0; }
.about-1t1b .section-heading h2 { font-size: 32px; line-height: 1.3; letter-spacing: -.035em; font-weight: 550; margin-top: 14px; }
.about-1t1b .section-heading > p { max-width: 300px; color: #747e72; font-size: 12px; line-height: 1.85; overflow-wrap: break-word; }
.about-1t1b .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.about-1t1b .service { padding-top: 20px; border-top: 1px solid #bec4b8; }
.about-1t1b .service-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 23px; }
.about-1t1b .service-number { font: 11px/1.5 ui-monospace, monospace; color: #8b613f; }
.about-1t1b .service-icon { width: 24px; height: 24px; color: #4a5b47; }
.about-1t1b .service h3 { font-size: 18px; font-weight: 550; letter-spacing: -.02em; margin-bottom: 10px; }
.about-1t1b .service p { font-size: 12px; line-height: 1.9; color: #717b6d; max-width: 310px; }

/* Product */
.about-1t1b .product-section { padding: 0 0 74px; scroll-margin-top: 25px; }
.about-1t1b .product { display: grid; grid-template-columns: 1.08fr 1fr; gap: 67px; border: 1px solid #d9dccf; padding: 53px 50px; background: #ebece3; border-radius: 4px; }
.about-1t1b .product .kicker { color: #7c624b; font-size: 9px; }
.about-1t1b .daily-brand { display: flex; align-items: center; gap: 13px; font: 34px/1 var(--serif); letter-spacing: -.8px; white-space: nowrap; }
.about-1t1b .daily-brand img { width: 37px; height: 37px; }
.about-1t1b .daily-brand i { font-weight: 400; }
.about-1t1b .product-brand { margin-top: 25px; }
.about-1t1b .product h2 { font-size: 34px; font-weight: 550; line-height: 1.35; letter-spacing: -.035em; margin: 25px 0 17px; }
.about-1t1b .product h2 span { display: block; }
.about-1t1b .product-intro { font-size: 13px; line-height: 1.95; color: #63715f; max-width: 465px; }
.about-1t1b .product-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 21px 0 29px; }
.about-1t1b .product-tags span { font-size: 10px; padding: 3px 9px; border: 1px solid #c7cebd; color: #626e5e; border-radius: 3px; }
.about-1t1b .product .button { background: #273625; color: #f5f7ef; }
.about-1t1b .product .button:hover { background: #3f513a; }
.about-1t1b .publication { background: #fbfaf5; box-shadow: 0 14px 45px #1f2b1510; border: 1px solid #d6d9ce; padding: 29px 27px 25px; align-self: center; transform: rotate(1.5deg); position: relative; }
.about-1t1b .publication:before { content: ''; position: absolute; inset: 8px -7px -7px 8px; border: 1px solid #c8cebf; z-index: -1; }
.about-1t1b .publication .daily-brand { font-size: 26px; gap: 12px; }
.about-1t1b .publication .daily-brand img { width: 30px; height: 30px; }
.about-1t1b .publication-topline { display: flex; justify-content: space-between; gap: 15px; margin: 18px 0 27px; border-block: 1px solid #d4d6cc; padding: 7px 0; font-size: 8px; color: #827f71; text-transform: uppercase; letter-spacing: .07em; }
.about-1t1b .publication .editorial-title { font: 36px/1.08 var(--serif); letter-spacing: -1px; margin-bottom: 27px; }
.about-1t1b .publication .editorial-title i { color: #875f42; }
.about-1t1b .contents-row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; border-top: 1px solid #dadbd2; padding: 13px 0; }
.about-1t1b .contents-row > span { font: 9px/1.8 ui-monospace, monospace; color: #a16843; }
.about-1t1b .contents-row h3 { font-size: 11px; font-weight: 600; }
.about-1t1b .contents-row p { font-size: 10px; color: #7c8175; line-height: 1.6; margin-top: 3px; }
.about-1t1b .publication-foot { border-top: 1px solid #dadbd2; padding-top: 11px; font-size: 8px; letter-spacing: .12em; color: #9b7b5f; }

/* Footer */
.about-1t1b .footer { padding: 35px 0 25px; }
.about-1t1b .footer .footer-main { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 26px; }
.about-1t1b .footer .brand-logo { width: 135px; }
.about-1t1b .footer-line { font-size: 12px; color: #a6b2a3; margin-top: 12px; }
.about-1t1b .key-panel { max-width: 480px; flex: 1; }
.about-1t1b .key-label { font: 9px/1.5 var(--sans); letter-spacing: .13em; color: #97a890; margin-bottom: 8px; }
.about-1t1b .key-row { display: flex; align-items: center; gap: 15px; }
.about-1t1b .key-row code { font: 10px/1.7 ui-monospace, monospace; overflow-wrap: anywhere; min-width: 0; color: #c8d3c1; }
.about-1t1b .copy-key { background: none; border: 1px solid #43513c; border-radius: 4px; color: #c8d3c1; padding: 6px 10px; font-size: 10px; flex-shrink: 0; min-width: 55px; min-height: 34px; }
.about-1t1b .copy-key:hover { border-color: var(--copper); }
.about-1t1b .copy-status { min-height: 15px; margin-top: 4px; font-size: 10px; color: #b9c9ae; }
.about-1t1b .footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 17px; color: #7f927b; font-size: 10px; }
.about-1t1b .footer-bottom a:hover { color: #e0e8d7; }

@media (min-width: 1400px) {
  .about-1t1b .hero { padding-block: 92px; }
  .about-1t1b .work { padding-block: 85px; }
  .about-1t1b .product-section { padding-bottom: 85px; }
}
@media (max-width: 1000px) {
  .about-1t1b .wrap { width: calc(100% - 64px); }
  .about-1t1b .hero { gap: 45px; }
  .about-1t1b .hero h1 { font-size: 44px; }
  .about-1t1b .belief { padding-left: 27px; }
  .about-1t1b .asset-value b { font-size: 97px; }
  .about-1t1b .asset-value span { font-size: 25px; }
  html[lang="en"] .about-1t1b .hero h1 { font-size: 42px; }
  .about-1t1b .product { gap: 35px; padding: 37px 30px; }
  .about-1t1b .daily-brand { font-size: 28px; }
  .about-1t1b .product h2 { font-size: 29px; }
  .about-1t1b .publication { padding: 24px 20px; }
  .about-1t1b .publication .daily-brand { font-size: 22px; }
  .about-1t1b .publication .daily-brand img { width: 26px; height: 26px; }
  .about-1t1b .footer .footer-main { gap: 50px; }
}
@media (max-width: 720px) {
  .about-1t1b .wrap { width: calc(100% - 42px); }
  .about-1t1b .site-header { height: 83px; }
  .about-1t1b .brand-logo { width: 147px; }
  .about-1t1b nav { gap: 17px; }
  .about-1t1b nav > a { display: none; }
  .about-1t1b .hero { grid-template-columns: 1fr; gap: 43px; padding: 46px 0; }
  .about-1t1b .hero h1, html[lang="en"] .about-1t1b .hero h1 { font-size: 43px; }
  .about-1t1b .hero-intro { font-size: 13px; }
  .about-1t1b .hero-actions { margin-top: 28px; }
  .about-1t1b .belief { padding: 27px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .about-1t1b .equation { flex-direction: row; align-items: center; max-width: none; gap: 22px; margin: 24px 0 19px; }
  .about-1t1b .asset-value { gap: 9px; }
  .about-1t1b .asset-value b { font-size: 77px; letter-spacing: -5px; }
  .about-1t1b .asset-value span { font-size: 21px; }
  .about-1t1b .equals { width: 43px; margin: 0; height: 13px; flex-shrink: 0; }
  .about-1t1b .belief-caption { max-width: none; }
  .about-1t1b .hero-bottom { font-size: 8px; gap: 20px; letter-spacing: .03em; }
  .about-1t1b .work { padding: 45px 0; }
  .about-1t1b .section-heading { display: block; margin-bottom: 28px; }
  .about-1t1b .section-heading h2 { font-size: 28px; }
  .about-1t1b .section-heading > p { margin-top: 15px; max-width: 400px; }
  .about-1t1b .services { grid-template-columns: 1fr; gap: 25px; }
  .about-1t1b .service { position: relative; padding-left: 38px; padding-top: 19px; }
  .about-1t1b .service-top { position: absolute; left: 0; top: 21px; margin: 0; }
  .about-1t1b .service-icon { display: none; }
  .about-1t1b .service h3 { font-size: 18px; margin-bottom: 7px; }
  .about-1t1b .service p { max-width: none; }
  .about-1t1b .product-section { padding-bottom: 40px; }
  .about-1t1b .product { grid-template-columns: 1fr; gap: 37px; padding: 30px 24px; }
  .about-1t1b .product h2 { font-size: 30px; }
  .about-1t1b .product .daily-brand { font-size: 28px; }
  .about-1t1b .publication { transform: none; max-width: 425px; width: 100%; justify-self: center; }
  .about-1t1b .publication .daily-brand { font-size: 24px; }
  .about-1t1b .footer .footer-main { display: block; padding-bottom: 18px; }
  .about-1t1b .key-panel { margin-top: 25px; max-width: none; }
  .about-1t1b .footer-line { font-size: 11px; }
  .about-1t1b .footer-bottom { font-size: 9px; }
  .about-1t1b .button { padding: 12px 15px; gap: 17px; }
}
@media (max-width: 360px) {
  .about-1t1b .wrap { width: calc(100% - 32px); }
  .about-1t1b .hero h1 { font-size: 36px; }
  .about-1t1b .equation { gap: 15px; }
  .about-1t1b .asset-value b { font-size: 65px; }
  .about-1t1b .asset-value span { font-size: 19px; }
  .about-1t1b .equals { width: 33px; }
  .about-1t1b .product { padding-inline: 18px; }
  .about-1t1b .product .daily-brand { font-size: 23px; }
  .about-1t1b .product .daily-brand img { width: 30px; height: 30px; }
  .about-1t1b .publication { padding-inline: 17px; }
  .about-1t1b .publication .daily-brand { font-size: 21px; }
  .about-1t1b .hero-actions { gap: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-1t1b .button { transition: none; }
  .about-1t1b .button:hover { transform: none; }
}
@media print {
  .about-1t1b nav, .about-1t1b .hero-actions, .about-1t1b .copy-key, .about-1t1b .copy-status, .about-1t1b .skip-link { display: none !important; }
  .about-1t1b .wrap { width: 100%; }
  .about-1t1b .site-header { height: 60px; }
  .about-1t1b .hero { padding: 30px 0; gap: 40px; }
  .about-1t1b .hero h1 { font-size: 36px; }
  .about-1t1b .work { padding: 28px 0; }
  .about-1t1b .product { padding: 25px; gap: 30px; }
  .about-1t1b .product-section { padding-bottom: 25px; }
  .about-1t1b .footer { padding: 20px 0; }
  .about-1t1b .service, .about-1t1b .product, .about-1t1b .footer { break-inside: avoid; }
}