/* Junhao Studio — executive editorial theme. Shared by both languages and pages. */
:root {
  --ink: #1c2b31;
  --muted: #4d5a60;
  --paper: #f7f5f0;
  --surface: #fffdfa;
  --deep: #111e27;
  --line: #d7d8d1;
  --blue: #315c5a;
  --cyan: #ddc59a;
  --cyan-soft: #dfc89f;
  --radius: 2px;
  --display: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;
  --gold-dark: #72562f;
  --signal: #85c6c0;
  --on-dark: #f7f5f0;
  --on-dark-muted: #cbd4d3;
  --dark-line: #53625f;
  --surface-tint: #f0eee8;
  --surface-deep: #1a2c34;
}
html[lang="zh-Hans"] { --display: 'Noto Serif SC', 'Songti SC', 'SimSun', serif; }
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--cyan-soft); color: var(--deep); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #a2590a;
  outline-offset: 4px;
}

/* Navigation and controls */
.header { background: var(--surface); border-color: var(--line); }
.header-inner { min-height: 82px; }
.brand-mark { border-radius: 1px; background: var(--deep); color: var(--cyan); font-family: Georgia, serif; font-weight: 400; }
.brand-name { letter-spacing: -.02em; }
.brand-name small { color: var(--muted); letter-spacing: .13em; }
nav a { color: var(--ink); }
nav a:hover { color: var(--blue); }
nav .nav-cta { background: var(--deep); color: var(--on-dark); border-radius: 1px; }
nav .nav-cta:hover { background: var(--blue); color: #fff; }
.language-switch { border-radius: 1px; border-color: var(--line); }
.language-switch a { min-width: 44px; min-height: 44px; color: var(--muted); }
.language-switch a:hover { background: var(--surface-tint); color: var(--deep); }
.language-switch a.is-active { background: var(--deep); color: var(--on-dark); }
.nav-toggle { border-radius: 1px; }
.btn { border-radius: 1px; min-height: 52px; letter-spacing: .02em; }
.btn.primary { background: var(--cyan-soft); color: var(--deep); border-color: var(--cyan-soft); }
.btn.primary:hover { background: var(--surface); border-color: var(--surface); color: var(--deep); }

/* Editorial type: display faces are limited to major headings. */
.hero h1, .section-head h2, .work-head h2, .about h2, .contact h2,
.method-hero h1, .method-section-head h2, .method-faq h2, .method-contact h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.45;
}
.eyebrow { font-size: 11px; letter-spacing: .14em; }
.hero .eyebrow, .framework-intro .eyebrow, .method-hero .eyebrow,
.method-contact .eyebrow, .contact .eyebrow { font-size: 11px; }
.repo-type, .book-label, .method-sequence > div > span { font-size: 11px; }
.portrait-caption, .hero-foot, .hero .hero-note, .method-byline { font-size: 12px; }
.eyebrow.ink { color: var(--gold-dark); }
.section-head > p, .work-head > p, .about-copy { color: var(--muted); }

/* Home hero */
.hero-shell {
  background-color: var(--deep);
  background-image: linear-gradient(90deg, transparent 73%, rgba(221,197,154,.07) 73%, rgba(221,197,154,.07) calc(73% + 1px), transparent calc(73% + 1px));
  color: var(--on-dark);
}
.hero { gap: 84px; padding-top: 84px; padding-bottom: 76px; }
.hero .eyebrow { color: var(--cyan); border: 0; border-left: 2px solid var(--signal); padding: 2px 0 2px 14px; letter-spacing: .08em; }
.hero h1 { margin: 30px 0 24px; }
.hero h1 span { color: var(--cyan); }
.hero p { color: var(--on-dark-muted); }
.hero .hero-note { color: var(--on-dark-muted); }
.hero .btn.secondary { color: var(--on-dark); border-color: var(--dark-line); }
.hero .btn.secondary:hover { color: var(--cyan); }
.portrait-frame { padding: 10px 10px 0; border: 1px solid var(--dark-line); max-width: 360px; }
.portrait-frame:before { left: -1px; bottom: 58px; width: 3px; height: 64px; background: var(--signal); }
.portrait-frame img { border-radius: 0; }
.portrait-caption { color: var(--on-dark-muted); padding: 16px 2px 4px; }
.hero-foot { border-color: var(--dark-line); color: var(--on-dark-muted); }
.hero-foot span:before { background: var(--signal); width: 4px; height: 4px; }

/* Service offering and framework */
.section { padding-top: 104px; padding-bottom: 104px; }
.section-head, .work-head { margin-bottom: 48px; }
.service-grid { gap: 0; border-block: 1px solid var(--line); counter-reset: service; }
.service, .service:first-child { position: relative; background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 32px 28px; }
.service:first-child { padding-left: 0; }
.service:last-child { border-right: 0; padding-right: 0; }
.service-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--gold-dark); }
.service-top:before { counter-increment: service; content: '0' counter(service); color: var(--gold-dark); font: 400 31px/1 Georgia, serif; letter-spacing: 0; }
.service-icon { display: none; }
.service h3 { font-size: 21px; margin-top: 25px; }
.service > p, .service-points { color: var(--muted); font-size: 15px; }
.service-points li { border-color: var(--line); }
.service-link { color: var(--blue); }
.work-section { background: var(--surface-tint); border-color: var(--line); }
.framework { background: var(--deep); color: var(--on-dark); border: 1px solid var(--dark-line); border-radius: 1px; padding: 48px; }
.framework-intro .eyebrow, .method-hero .eyebrow, .method-dark .eyebrow, .method-contact .eyebrow { color: var(--signal); }
.framework-origin { color: var(--cyan); border-color: var(--dark-line); border-radius: 1px; }
.framework-intro h3 { font-family: var(--display); color: var(--on-dark); }
.framework-intro p, .framework-step p, .framework-end p { color: var(--on-dark-muted); }
.framework-intro .framework-principle { color: var(--on-dark); }
.framework-step { border-color: var(--dark-line); }
.framework-step:before { color: var(--signal); }
.framework-step p { font-size: 14px; }
.framework-end { border-color: var(--dark-line); }
.framework-links { min-width: 0; flex-shrink: 1; }
.method-detail-link { color: var(--cyan); }
.framework .btn.secondary { color: var(--on-dark); border-color: var(--on-dark-muted); }
.framework .btn.secondary:hover { background: var(--surface); color: var(--deep); }
.method-example, .github-card, .github-grid { border-color: var(--line); }
.github-card { padding: 29px 8px; }
.github-card:hover { background: rgba(255,253,250,.65); }
.repo-type, .github-card a, .github-all a { color: var(--blue); }

/* Publications, biography and contact */
.reading-path .project { border-color: var(--line); border-radius: 1px; }
.project-cover { background: #e1e5de; color: var(--deep); }
.project-cover strong { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.04em; }
.project-meta, .book-label { color: var(--gold-dark); }
.book { background: var(--surface); border-color: var(--line); border-radius: 1px; }
.book a { border-color: var(--line); color: var(--blue); }
.profile-block { background: var(--surface); border-color: var(--line); border-radius: 1px; }
.profile-block li, .consultation-path, .process-grid > li, .faq details { border-color: var(--line); }
.profile-tags > span { color: var(--blue); background: #e4eae4; border-radius: 1px; }
.process-grid li > span, .faq summary::marker, .profile-block summary::marker { color: var(--gold-dark); }
.contact { background: var(--deep); color: var(--on-dark); }
.contact .eyebrow { color: var(--signal); }
.contact-inner > div > p, .booking-context p { color: var(--on-dark-muted); }
.booking-context { border-color: var(--dark-line); }
.booking-context strong { color: var(--cyan); }
.contact-details a, .contact-details p { color: var(--on-dark); }
.contact-details a > span:first-child, .contact-details p > span:first-child { color: var(--on-dark-muted); }
.booking-panel { background: var(--surface); color: var(--ink); border-radius: 1px; border: 1px solid var(--line); }
.booking-panel .booking-intro, .booking-panel .form-hint { color: var(--muted); }
.field input, .field select, .field textarea, #request-draft { color: var(--ink); border-color: #a3afaa; border-radius: 1px; }
.booking-button { background: var(--deep); border-color: var(--deep); color: var(--on-dark); }
.booking-button:hover { background: var(--blue); border-color: var(--blue); }
.booking-panel a, .copy-request { color: var(--blue); }
.footer { background: var(--deep); color: var(--on-dark-muted); }
.footer-inner { border-color: var(--dark-line); }

/* Original framework detail page */
.method-hero, .method-dark, .method-contact { background: var(--deep); color: var(--on-dark); }
.method-hero {
  padding-top: 82px;
  padding-bottom: 78px;
  background-image: linear-gradient(90deg, transparent 73%, rgba(221,197,154,.07) 73%, rgba(221,197,154,.07) calc(73% + 1px), transparent calc(73% + 1px));
}
.method-hero h1 { margin: 26px 0 22px; }
.method-lead { color: var(--cyan); }
.method-summary, .method-byline, .method-dark .method-section-head > p, .method-dimensions p, .method-contact p { color: var(--on-dark-muted); }
.method-sequence { background: transparent; border: 0; border-left: 1px solid var(--dark-line); border-radius: 0; padding: 8px 0 8px 40px; }
.method-sequence > div > span, .method-dimensions li > span { color: var(--signal); }
.method-sequence h2 { color: var(--on-dark); }
.method-sequence p { color: var(--on-dark-muted); }
.method-sequence .sequence-note { border-color: var(--dark-line); }
.method-anchors { border-color: var(--line); color: var(--blue); }
.method-section-head > p, .method-scenarios p, .method-risk-lines p, .hypothesis-intro > p,
.hypothesis-list p, .method-gate p, .method-footnote, .method-experiment dd,
.method-decisions p > span, .method-faq details p { color: var(--muted); }
.method-scenarios article, .method-risk-lines article { border-color: var(--gold-dark); border-top-width: 1px; }
.method-scenarios article > span, .method-risk-lines article > span, .method-stage,
.hypothesis-list li > span, .method-experiment dt, .method-faq summary::marker { color: var(--gold-dark); }
.method-scenarios h3 { font-family: var(--display); font-weight: 600; }
.method-canvas { background: var(--surface-tint); border-color: var(--line); }
.hypothesis-list li { border-color: #c8cec5; }
.hypothesis-list li > span { flex: 0 0 40px; min-height: 40px; display: grid; place-items: center; border: 1px solid #c0c9bf; font-size: 12px; }
.hypothesis-list h4 { color: var(--ink); }
.hypothesis-list p, .method-dimensions p { font-size: 15px; }
.method-gate { background: #e5e8df; border-color: var(--blue); }
.method-dimensions li { border-color: var(--dark-line); }
.method-experiment, .method-experiment dl > div, .method-decisions p, .method-faq details { border-color: var(--line); }
.method-contact .method-text-link { color: var(--on-dark); }

@media (max-width: 1024px) and (min-width: 801px) {
  .hero { gap: 40px; }
  .framework { padding: 36px; }
  .framework-end { flex-wrap: wrap; }
  .service, .service:first-child { padding: 26px 18px; }
  .service:first-child { padding-left: 0; }
  .service:last-child { padding-right: 0; }
}
@media (max-width: 800px) {
  .header-inner { min-height: 72px; }
  .js nav { background: var(--surface); border-color: var(--line); }
  .hero { padding-top: 52px; padding-bottom: 42px; gap: 40px; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 50px); line-height: 1.45; letter-spacing: 0; }
  .hero .eyebrow { line-height: 1.8; }
  .portrait-frame { max-width: 300px; }
  .hero-foot { gap: 12px; }
  .section { padding-top: 68px; padding-bottom: 68px; }
  .section-head, .work-head { margin-bottom: 30px; }
  .service-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
  .service, .service:first-child, .service:last-child { border: 0; border-bottom: 1px solid var(--line); padding: 26px 0; }
  .service:last-child { border-bottom: 0; }
  .service h3 { font-size: 22px; }
  .service > p, .service-points { font-size: 16px; }
  .framework { padding: 28px 24px; }
  .framework-step p { font-size: 16px; }
  .framework-end { align-items: flex-start; }
  .method-hero { padding-top: 48px; padding-bottom: 48px; }
  .method-hero h1 { font-size: clamp(34px, 9vw, 50px); line-height: 1.4; letter-spacing: 0; }
  .method-sequence { padding: 20px 0 20px 24px; }
  .method-sequence p, .hypothesis-list p, .method-dimensions p { font-size: 16px; }
  .method-section, .method-canvas, .method-dark { padding-top: 60px; padding-bottom: 60px; }
  .method-section-head h2, .method-contact h2 { font-size: 28px; }
  .hypothesis-list li > span { min-height: 44px; flex-basis: 44px; }
  .booking-panel { padding: 28px 22px; }
}
@media (max-width: 360px) {
  .brand { gap: 6px; }
  .brand-mark { width: 30px; height: 30px; font-size: 19px; }
  .brand-name { font-size: 12px; }
  .brand-name small { font-size: 7px; letter-spacing: .03em; }
  .header-inner { gap: 6px; }
  .header-tools { gap: 5px; }
  .nav-toggle { padding-inline: 7px; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}