.about-layout .site-header { position:absolute; top:0; left:0; right:0; }
.about-hero { --about-hero-muted:#b9bbb1; padding:132px 0 40px; background:var(--dark); color:var(--on-dark); }
.about-hero-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:center; }
.about-hero .breadcrumb { margin:0 0 20px; color:var(--about-hero-muted); font-size:18px; }
.about-hero .breadcrumb .icon { filter:invert(1); opacity:.7; }
.about-hero h1 { margin:0; font:400 clamp(44px,4.6vw,64px)/1.3 var(--serif); letter-spacing:-.035em; overflow-wrap:anywhere; }
.about-hero-copy>p { max-width:30em; margin-top:20px; color:var(--about-hero-muted); font-size:18px; line-height:1.7; }
.about-hero-art { width:100%; min-width:0; }
.about-hero .about-particles { height:300px; margin:0; }
@media(max-width:999px) {
  .about-hero { padding-top:124px; padding-bottom:32px; }
  .about-hero-layout { grid-template-columns:1fr; gap:24px; }
  .about-hero h1 br { display:none; }
  .about-hero .about-particles { height:260px; }
}
@media(max-width:639px) {
  .about-hero { padding-top:116px; }
  .about-hero h1 { font-size:clamp(36px,9.5vw,44px); }
  .about-hero h1 br { display:block; }
  .about-hero .breadcrumb { margin-bottom:12px; }
  .about-hero-copy>p { margin-top:16px; }
  .about-layout .nav-wrap { padding:8px 10px; }
  .about-layout .brand { font-size:18px; gap:6px; white-space:nowrap; }
  .about-layout .brand-mark { width:30px; }
}
.about-particles { height:clamp(320px,27vw,420px); margin:24px 0 0; }
@media(max-width:767px) {
  .about-hero { padding-top:32px; padding-bottom:32px; }
  .about-hero-art { width:calc(100% - 48px); }
  .about-hero .about-particles { height:340px; }
}
@media(max-width:639px) {
  .about-hero h1 { font-size:clamp(36px,9.5vw,44px); }
  .about-hero h1 br { display:block; }
  .about-hero .breadcrumb { margin-bottom:16px; }
  .about-hero-copy>p { margin-top:16px; }
}
.about-particles { position:relative; width:100%; height:clamp(320px,32vw,440px); margin:0 0 48px; pointer-events:none; overflow:hidden; }
.about-particle-canvas { display:block; width:100%; height:100%; }
.about-particle-labels { position:absolute; inset:0; }
.about-particle-source,.about-particle-result { position:absolute; color:var(--about-hero-muted); font:400 16px/1.5 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; letter-spacing:.12em; }
.about-particle-source { left:0; width:126px; text-align:right; transform:translateY(-50%); }
.about-particle-source[data-particle-source="0"] { top:18%; }
.about-particle-source[data-particle-source="1"] { top:50%; }
.about-particle-source[data-particle-source="2"] { top:82%; }
.about-particle-result { left:calc(100% - 264px); top:calc(50% + 32px); width:240px; text-align:center; color:var(--on-dark); }
.about-particles .particle-zh { display:none; }
.about-particles[data-layout="vertical"] .about-particle-source { top:16px; width:76px; text-align:center; transform:translateX(-50%); letter-spacing:.08em; }
.about-particles[data-layout="vertical"] [data-particle-source="0"] { left:17%; }
.about-particles[data-layout="vertical"] [data-particle-source="1"] { left:50%; }
.about-particles[data-layout="vertical"] [data-particle-source="2"] { left:83%; }
.about-particles[data-layout="vertical"] .about-particle-result { left:50%; top:auto; bottom:8px; width:240px; transform:translateX(-50%); letter-spacing:.06em; }
.about-particles[data-layout="vertical"] .particle-en { display:none; }
.about-particles[data-layout="vertical"] .particle-zh { display:inline; }
/* About page: square editorial modules, readable text and a local notebook. */
.about-page .about-section { padding-block:72px; border-top:1px solid var(--line); }
.about-section-heading { margin-bottom:32px; }
.about-section-heading h2,.about-now h2 { margin-top:16px; font:500 var(--text-section)/1.3 var(--serif); }
.about-section-heading>div>p:last-child,.about-now p:not(.section-kicker) { max-width:48rem; margin-top:16px; font-size:var(--text-body); line-height:1.7; color:var(--muted); }
.about-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.about-card { min-width:0; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-index { display:block; font-size:var(--text-meta); color:var(--muted); }
.about-card h3,.about-method h3 { margin-top:24px; font:500 var(--text-card)/1.3 var(--serif); overflow-wrap:anywhere; }
.about-card p,.about-method p { margin-top:16px; font-size:var(--text-body); line-height:1.7; overflow-wrap:anywhere; }
.about-empty { padding:28px; font-size:var(--text-body); }
.about-method-grid { border-top:1px solid var(--line); }
.about-method { display:grid; grid-template-columns:96px minmax(0,1fr); gap:24px; padding-block:28px; border-bottom:1px solid var(--line); }
.about-method h3 { margin-top:0; }
.about-now { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:48px; align-items:start; }
.about-now .button { margin-top:28px; }
.journal-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:32px; align-items:start; }
.calendar-panel { min-width:0; border:1px solid var(--line); padding:24px; background:var(--paper); }
.calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.calendar-toolbar strong { font-size:var(--text-body); line-height:1.4; text-align:center; }
.calendar-nav { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); font-size:var(--text-control); }
.calendar-nav:disabled { opacity:.4; cursor:not-allowed; }
.calendar-week,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.calendar-week { margin-bottom:8px; color:var(--muted); font-size:var(--text-meta); line-height:1.5; text-align:center; }
.calendar-week span { padding-block:8px; }
.calendar-day { position:relative; display:grid; place-items:center; min-width:0; min-height:44px; border:1px solid transparent; border-radius:0; background:transparent; color:var(--ink); font-size:var(--text-control); line-height:1.5; }
.calendar-day[aria-current="date"] { border-color:var(--line); }
.calendar-day[aria-pressed="true"] { background:var(--dark); border-color:var(--dark); color:var(--on-dark); }
.calendar-marker { position:absolute; bottom:4px; left:calc(50% - 2.5px); width:5px; height:5px; background:currentColor; }
.calendar-nav:focus-visible,.calendar-day:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.journal-notes { min-width:0; border-top:1px solid var(--line); }
.journal-notes-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:16px; border-bottom:1px solid var(--line); }
.journal-notes-heading h3 { min-width:0; font:500 var(--text-card)/1.3 var(--serif); }
.journal-notes-heading button { flex-shrink:0; }
.journal-empty,.journal-noscript { padding-block:24px; font-size:var(--text-body); line-height:1.7; color:var(--muted); }
.journal-entry { padding-block:24px; border-bottom:1px solid var(--rule); overflow-wrap:anywhere; }
.journal-entry[hidden] { display:none; }
.journal-entry time { font-size:var(--text-meta); color:var(--muted); }
.journal-entry h4 { margin-top:12px; font:500 var(--text-card)/1.3 var(--serif); }
.journal-entry p { margin-top:12px; font-size:var(--text-body); line-height:1.7; white-space:normal; }
.about-editor>p { margin-bottom:28px; }
.about-editor-group { margin-block:36px; }
.about-editor-group-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.about-editor-group-head h3 { margin:0; }
.about-editor-group-head .button { flex-shrink:0; }
.about-editor-item { margin-top:16px; padding:20px; border:1px solid var(--rule); }
.about-editor-item-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; font-size:var(--text-body); }
.about-editor-item-actions { display:flex; flex-wrap:nowrap; gap:8px; }
.about-editor-item-actions button { min-width:0; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); font-size:var(--text-control); line-height:1.4; white-space:nowrap; }
.about-editor-item-actions button:disabled { opacity:.4; cursor:not-allowed; }
.about-editor-empty { margin-top:16px; font-size:var(--text-body); color:var(--muted); }
@media (hover:hover) and (pointer:fine) { .calendar-nav:not(:disabled):hover,.calendar-day:not([aria-pressed="true"]):hover,.about-editor-item-actions button:not(:disabled):hover { background:var(--surface); } }
@media(max-width:900px) { .about-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .journal-layout { grid-template-columns:1fr; } }
@media(max-width:639px) {
  .about-page .about-section { padding-block:48px; }
  .about-card-grid,.about-now { grid-template-columns:1fr; }
  .about-card { padding:24px; }
  .about-method { grid-template-columns:48px minmax(0,1fr); gap:16px; }
  .about-now { gap:24px; }
  .calendar-panel { margin-inline:-8px; padding:12px; }
  .calendar-week,.calendar-days { gap:2px; }
  .about-editor-item { padding:16px; }
  .about-editor-item-head { flex-wrap:wrap; }
  .about-editor-item-actions { width:100%; }
  .about-editor-item-actions button { flex:1; padding-inline:8px; }
}