/* Article content uses the existing work cards and gallery. */
.work--article .work-info { gap: 16px; }
.work--article .work-info > div { min-width: 0; }
.work--article .yr { flex: 0 0 auto; white-space: nowrap; }
.work-summary {
  margin-top: 12px;
  max-width: 40em;
  font-family: var(--inter), "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
}
.work--article:focus-visible,
.wp-card[href]:focus-visible,
.wp-masonry__item[href]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -5px;
}
.work--article:focus-visible .work-info { opacity: 1; transform: none; }
.wp-masonry__item[href] { display: block; }
.wp-stage { touch-action: none; }
.wp-masonry__item[href] .wp-masonry__cap { line-height: 1.65; }
@media (max-width: 480px) {
  .work--article .work-info { padding: 18px; gap: 8px; }
  .work--article .work-info h3 { font-size: 20px; }
  .work-summary { margin-top: 6px; font-size: 12px; line-height: 1.5; }
  .work--article .cat { font-size: 9px; letter-spacing: .04em; }
  .wp-kicker { font-size: 10px; letter-spacing: .12em; }
}

/* Contact entry cards keep the site expressive while making both destinations explicit. */
.f-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:stretch}
.f-socials a,.contact-note{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:inherit;text-decoration:none;font-family:var(--mono),"Space Mono",monospace;font-size:11px;letter-spacing:.05em}
.f-socials a:hover{background:#fff;color:#111}
.contact-note{opacity:.55}
.contact-qr-grid{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:14px;max-width:660px;margin:28px auto 0;text-align:left}.contact-qr-card{display:flex;align-items:center;gap:15px;padding:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:inherit;text-decoration:none;transition:background .25s,transform .25s}.contact-qr-card:hover{background:rgba(255,255,255,.12);transform:translateY(-4px)}.contact-qr-card img{width:84px;height:84px;object-fit:cover;background:#fff}.contact-qr-card span{display:grid;gap:7px}.contact-qr-card b{font:700 14px "Microsoft YaHei",sans-serif}.contact-qr-card small{font:11px/1.5 "Microsoft YaHei",sans-serif;color:rgba(255,255,255,.65)}.contact-qr-grid--badge{position:absolute;left:6%;bottom:8%;z-index:4;max-width:540px}.contact-qr-grid--badge .contact-qr-card{background:rgba(12,12,12,.78);backdrop-filter:blur(10px)}
@media(max-width:600px){.contact-qr-grid{grid-template-columns:1fr;max-width:330px;gap:10px}.contact-qr-card img{width:70px;height:70px}.contact-qr-grid--badge{position:relative;left:auto;bottom:auto;margin:20px 20px 35px}.contact-qr-card small{font-size:10px}}
.qr-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;background:rgba(0,0,0,.82);backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s}.qr-modal.open{opacity:1;visibility:visible;pointer-events:auto}.qr-modal__panel{display:grid;justify-items:center;gap:12px;padding:26px;background:#f4f1e9;color:#101010;max-width:min(88vw,430px);text-align:center;transform:translateY(18px) scale(.96);transition:transform .4s cubic-bezier(.22,1,.36,1)}.qr-modal.open .qr-modal__panel{transform:none}.qr-modal__panel img{display:block;width:min(72vw,320px);height:min(72vw,320px);object-fit:contain;background:#fff}.qr-modal__eyebrow{margin:0;color:#e63b2e;font:10px "Space Mono",monospace;letter-spacing:.15em}.qr-modal__panel h3{margin:0;font:700 24px Syne,"Microsoft YaHei",sans-serif}.qr-modal__panel p:last-child{margin:0;color:#77736b;font-size:12px}.qr-modal__close{position:absolute;right:4vw;top:4vw;width:44px;height:44px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:transparent;color:#fff;font-size:20px;cursor:pointer}
.overlay-switcher{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:760;display:flex;gap:6px;padding:6px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(5,5,5,.55);backdrop-filter:blur(14px)}.overlay-switcher button{border:0;border-radius:999px;padding:8px 13px;background:transparent;color:rgba(242,239,233,.56);font:10px "Space Mono",monospace;cursor:pointer}.overlay-switcher button:hover,.overlay-switcher button.is-current{background:#f2efe9;color:#080808}
.page-anchor{position:absolute;top:-100px;left:0;width:1px;height:1px}.article-reader,.project-reader{position:fixed;inset:0;z-index:1100;background:#080808;color:#f2efe9;overflow:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px);transition:opacity .4s,visibility .4s,transform .45s}.article-reader.open,.project-reader.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}.article-reader__nav,.project-reader__nav{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:22px 5vw;background:rgba(8,8,8,.8);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.12)}.article-reader__close,.project-reader__close{border:1px solid rgba(255,255,255,.38);border-radius:50%;width:42px;height:42px;background:transparent;color:#fff;font-size:18px;cursor:pointer}.article-reader__body,.project-reader__body{max-width:820px;margin:0 auto;padding:80px 6vw 120px}.article-reader__body h1,.project-reader__body h1{font:700 clamp(40px,7vw,92px)/.95 Syne,"Microsoft YaHei",sans-serif;letter-spacing:-.06em;margin:20px 0 28px}.article-reader__body h2,.project-reader__body h2{font:600 30px/1.2 Syne,"Microsoft YaHei",sans-serif;margin:64px 0 20px}.article-reader__body p,.project-reader__body p{font-size:18px;line-height:1.9;color:#d8d4cd}.article-reader__body .reader-meta,.project-reader__body .reader-meta{font:11px "Space Mono",monospace;color:#e63b2e;letter-spacing:.1em}.reader-cover{width:100%;max-height:430px;object-fit:cover;margin:30px 0 40px}.reader-action{font:11px "Space Mono",monospace;color:#fff;border-bottom:1px solid #e63b2e}.reader-list{padding-left:1.2em;color:#d8d4cd;font-size:18px;line-height:1.9}
@media(max-width:600px){.article-reader__body,.project-reader__body{padding:54px 20px 90px}.article-reader__body h1,.project-reader__body h1{font-size:48px}.article-reader__body p,.project-reader__body p,.reader-list{font-size:16px}.article-reader__body h2,.project-reader__body h2{font-size:25px;margin-top:48px}}

/* Give the in-page reader a comfortable editorial measure. The previous
   820px box included its horizontal padding, leaving only ~650px for text
   on a desktop screen. */
.article-reader__body,.project-reader__body{max-width:1180px;padding:88px clamp(28px,5vw,88px) 130px}
.article-reader__body h1,.project-reader__body h1{max-width:1000px}
.article-reader__body h2,.project-reader__body h2{max-width:940px}
.article-reader__body p,.project-reader__body p,.reader-list{max-width:920px}
.reader-cover{display:block;max-width:1080px}

@media (max-width:900px){
  .article-reader__body,.project-reader__body{max-width:100%;padding:70px 7vw 110px}
  .article-reader__body h1,.project-reader__body h1{max-width:none}
  .article-reader__body p,.project-reader__body p,.reader-list{max-width:none}
}
@media (max-width:600px){
  .article-reader__body,.project-reader__body{padding:54px 20px 90px}
}

/* Unified typography roles for in-page layers */
.article-reader__body h1,.project-reader__body h1,.article-reader__body h2,.project-reader__body h2,.qr-modal__panel h3{font-family:Syne,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
.article-reader__body p,.project-reader__body p,.reader-list,.work-summary,.contact-qr-card b,.contact-qr-card small{font-family:"Noto Sans SC",Inter,"PingFang SC","Microsoft YaHei",sans-serif}