/* M. Eric Cui — site styles. Apple design language (VoltAgent/awesome-design-md apple/DESIGN.md). */
/* Apple design language, from VoltAgent/awesome-design-md (design-md/apple/DESIGN.md),
   the same source flamingo uses. Alternating full-bleed bands where the colour change
   is the divider; SF Pro with negative tracking at 17px and up; weights 400/600 only;
   Action Blue as the single interactive colour (Sky Link Blue on the dark tile);
   no shadows, no gradients; 18px hairline utility cards; 44px circular icon chips. */
  :root {
    --primary: #b8430f; --primary-focus: #b8430f; --primary-on-dark: #ffa06e;  /* burnt orange: fixation-dot orange, AA on white 5.46, parchment 5.01; on dark 7.46 */
    --ink: #1d1d1f; --ink-80: #333333; --ink-secondary: #6e6e73; --body-muted: #cccccc;
    --canvas: #ffffff; --parchment: #f5f5f7; --tile-1: #272729; --tile-2: #2a2a2c;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --hairline: #e0e0e0; --chip: rgba(210, 210, 215, .64);
    --display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--canvas); color: var(--ink);
         font: 400 17px/1.47 var(--text); letter-spacing: -0.374px; -webkit-font-smoothing: antialiased; }
  a { color: var(--primary); text-decoration: none; }
  a:hover { text-decoration: underline; }
  a:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; border-radius: 5px; }
  .wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }

  .band { padding: 80px 0; }
  .band-light { background: var(--canvas); }
  .band-parchment { background: var(--parchment); }
  .band-dark { background: var(--tile-1); color: #fff; }
  .band-dark a { color: var(--primary-on-dark); }

  .hero { text-align: center; padding: 96px 0 80px; }
  .hero h1 { font: 600 56px/1.07 var(--display); letter-spacing: -0.28px; margin: 0; }
  .hero .role { font: 400 28px/1.14 var(--display); letter-spacing: 0.196px; color: var(--ink-secondary); margin: 12px 0 0; }
  .hero .bio { max-width: 640px; margin: 32px auto 0; }

  .cta { margin: 28px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 9999px;
          border: 1px solid var(--primary); color: var(--primary); font: 400 17px/1 var(--text); letter-spacing: -0.374px;
          white-space: nowrap; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), scale 120ms var(--ease-out); }
  .pill svg { width: 16px; height: 16px; flex: none; }
  .pill:hover { background: var(--primary); color: #fff; text-decoration: none; }
  .pill:active { scale: .95; }
  /* Floating glass dock. The glass recipe is the one Wing, Millet and the Spend tab bar share
     (Budgie's Callout.swift, ported to CSS in spending-tracker/App.html): a real backdrop blur with
     a saturation lift, a specular sweep so it reads as curved, a rim brighter along the top edge,
     and a shadow so it floats. Apple documents Liquid Glass for its platforms only, so this is a
     labelled approximation. Motion uses the house curve; UI responses stay under 300ms. */
  .glass-tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center;
               padding: 0 16px calc(env(safe-area-inset-bottom) + 22px); pointer-events: none; }
  .links { pointer-events: auto; position: relative; isolation: isolate; list-style: none; margin: 0;
           display: flex; gap: 16px; padding: 10px 14px; border-radius: 9999px;
           background: linear-gradient(180deg, rgb(255 255 255 / .84), rgb(255 255 255 / .66));
           -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
           backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
           border: 1px solid rgb(255 255 255 / .6);
           box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .3),
                       inset 1px 0 0 rgb(255 255 255 / .35), inset -1px 0 0 rgb(255 255 255 / .35),
                       0 1px 1px rgb(0 0 0 / .05), 0 18px 40px -12px rgb(0 0 0 / .34), 0 4px 14px -4px rgb(0 0 0 / .14);
           animation: dock-in 560ms var(--ease-out) 120ms both; }
  /* the specular sweep that makes glass read as curved rather than flat */
  .links::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
                   background: radial-gradient(130% 110% at 16% -18%, rgb(255 255 255 / .75), transparent 48%),
                               radial-gradient(90% 140% at 84% 130%, rgb(255 255 255 / .32), transparent 52%),
                               linear-gradient(90deg, rgb(255 255 255 / .2), transparent 36%, rgb(255 255 255 / .16)); }
  @keyframes dock-in { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: none; } }
  .links li { display: flex; position: relative; }
  .links a { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
             color: var(--ink); transform-origin: 50% 100%; will-change: transform; transition: scale 120ms var(--ease-out); }
  .links svg { position: relative; width: 26px; height: 26px; }
  .links a:hover { text-decoration: none; }
  .links a:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
  .links a:active { scale: .9; }
  /* A chip of glass behind the icon under the cursor: fades on opacity only, so nothing repaints the plate. */
  .links a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
                     background: linear-gradient(180deg, rgb(255 255 255 / .95), rgb(255 255 255 / .6));
                     box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(0 0 0 / .05), 0 6px 14px -4px rgb(0 0 0 / .22);
                     transition: opacity 180ms var(--ease-out); }
  /* Labels: icon-only buttons need their names visible, not just announced. */
  .links li::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 40px);
                     transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap;
                     font: 400 12px/1 var(--text); letter-spacing: -0.12px; color: #fff; padding: 7px 10px; border-radius: 9999px;
                     background: rgb(29 29 31 / .86); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
  @media (hover: hover) {
    .links a:hover::before { opacity: 1; }
    .links li:hover::after { opacity: 1; transform: translate(-50%, 0); }
  }
  .links li:focus-within::after { opacity: 1; transform: translate(-50%, 0); bottom: calc(100% + 14px); }
  /* Blur is a preference, not a requirement. */
  @media (prefers-reduced-transparency: reduce) {
    .links { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .links::before { display: none; }
  }
  /* Reduced motion is gentler, not none: keep the fade, drop the travel (the script also stands down). */
  @media (prefers-reduced-motion: reduce) {
    @keyframes dock-in { from { opacity: 0; } to { opacity: 1; } }
  }

  h2 { font: 600 40px/1.1 var(--display); margin: 0; }
  .intro { font: 400 21px/1.38 var(--display); letter-spacing: 0.231px; color: var(--ink-secondary); margin: 12px 0 40px; max-width: 720px; }
  .band-dark .intro { color: var(--body-muted); }

  .grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 18px; padding: 24px; }
  .band-dark .card { background: var(--tile-2); border-color: transparent; }
  .card h3 { font: 600 17px/1.24 var(--text); letter-spacing: -0.374px; margin: 0; }
  .card p { margin: 8px 0 0; color: var(--ink-80); }
  .band-dark .card p { color: var(--body-muted); }
  .card .meta { font: 600 14px/1.29 var(--text); letter-spacing: -0.224px; color: var(--ink-secondary); margin: 0 0 8px; }
  .band-dark .card .meta { color: var(--body-muted); }
  .soon { font: 400 14px/1.43 var(--text); letter-spacing: -0.224px; color: var(--ink-secondary); margin: 24px 0 0; }
  .band-dark .soon { color: var(--body-muted); }

  footer { background: var(--parchment); color: var(--ink-secondary); font: 400 12px/1.5 var(--text); letter-spacing: -0.12px; padding: 32px 0 132px; border-top: 1px solid var(--hairline); }

  @media (max-width: 734px) {
    .glass-tab { padding-left: 8px; padding-right: 8px; }
    .links { gap: 0; padding: 4px 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .links::-webkit-scrollbar { display: none; }
    .links li::after { display: none; }
    .links a { width: 44px; height: 44px; flex: none; }
    .links svg { width: 22px; height: 22px; }
    .band { padding: 48px 0; }
    .hero { padding: 64px 0 48px; }
    .hero h1 { font-size: 34px; }
    .hero .role { font-size: 21px; }
    .cta { gap: 10px; }
    .pill { min-height: 44px; padding: 0 16px; font-size: 15px; }
    h2 { font-size: 28px; }
    .intro { font-size: 17px; margin-bottom: 24px; }
  }

  /* Global nav: Apple's frosted sub-nav — parchment at 80% with saturate + blur, pinned to the top.
     Sections start collapsed; a tab opens its section and closes the rest. */
  [hidden] { display: none !important; }
  .global-nav { position: sticky; top: 0; z-index: 30; height: 52px;
                background: rgb(245 245 247 / .8); border-bottom: 1px solid rgb(0 0 0 / .08);
                -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .global-nav .wrap { display: flex; align-items: center; gap: 24px; height: 100%; }
  .brand { font: 600 21px/1 var(--display); letter-spacing: 0.231px; color: var(--ink); white-space: nowrap; }
  .brand:hover { text-decoration: none; }
  .nav-links { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { position: relative; display: block; padding: 17px 0; white-space: nowrap;
                 font: 400 14px/1.29 var(--text); letter-spacing: -0.224px; color: var(--ink-80); transition: color 160ms var(--ease-out); }
  .nav-links a:hover { color: var(--ink); text-decoration: none; }
  .nav-links a[aria-expanded="true"] { color: var(--ink); font-weight: 600; }
  .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
                        background: var(--ink); transform: scaleX(0); transition: transform 240ms var(--ease-out); }
  .nav-links a[aria-expanded="true"]::after { transform: scaleX(1); }
  /* Sections are panels once the controller runs: hidden from first paint, one shown at a time.
     Their own heading and intro move up into the hero, so they stay only for screen readers. */
  .js main > section { display: none; }
  .js main > section.is-active { display: block; padding-top: 24px; animation: panel-in 320ms var(--ease-out); }
  .js main > section > .wrap > h2, .js main > section > .wrap > .intro, .js main > section > .wrap > .question {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html:not(.js) .nav-links { display: none; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    @keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
    .nav-links a::after { transition: none; }
  }
  @media (max-width: 734px) {
    .global-nav .wrap { gap: 16px; padding-right: 0; }
    .brand { font-size: 17px; }
    .nav-links { gap: 18px; padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  }

  /* Adaptive hero: shows home, or whichever section is open, and takes that section's band tone. */
  .hero { transition: background-color 320ms var(--ease-out), color 320ms var(--ease-out); }
  .hero.is-section { padding-bottom: 48px; }
  .hero.band-dark .role { color: var(--body-muted); }
  .hero.band-dark .bio { color: var(--body-muted); }
  .hero .wrap.hero-swap { animation: hero-in 300ms var(--ease-out); }
  @keyframes hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    @keyframes hero-in { from { opacity: 0; } to { opacity: 1; } }
    .hero { transition: none; }
  }

  /* Each section is led by the question it answers. In the hero it sits between the count and the intro. */
  .question { font: 400 21px/1.38 var(--display); letter-spacing: 0.231px; color: var(--ink); margin: 12px 0 0; max-width: 720px; }
  .hero .question { font: 600 28px/1.18 var(--display); letter-spacing: 0.196px; max-width: 760px; margin: 28px auto 0; text-wrap: balance; }
  .hero.band-dark .question { color: #fff; }
  .hero.is-section .bio { margin-top: 16px; color: var(--ink-secondary); }
  @media (max-width: 734px) { .hero .question { font-size: 21px; margin-top: 20px; } }