/* Reading type is separate from the outlined name and each project's identity. */
@font-face {
  font-family: "Folio Sans SC";
  src: url("assets/fonts/folio-sans-sc.woff2?v=20") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+2000-206F, U+2E80-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
:root {
  --font-ui: "Folio Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --muted: #62685f;
}
body { font-family: var(--font-ui); font-size: 15px; font-weight: 400; line-height: 1.7; letter-spacing: 0; }
button, input, select, textarea { font-family: var(--font-ui); }
.header nav a, .header nav button { font-size: 14px; font-weight: 400; letter-spacing: 0; }
.header sup, .filters sup { font-size: 10px; }
.hero-top, .hero-top > span:last-child { font-size: 11px; letter-spacing: .04em; line-height: 1.7; }
.hero-line > p { font-size: 11px; line-height: 1.8; }
.hero-intro > p { font-size: 17px; letter-spacing: 0; color: #444b40; line-height: 1.8; }
.hero-intro > p > span { color: #697062; }
.hero-intro > a { font-size: 13px; color: #59624f; }
.section-index, .section-index span { font-size: 12px; letter-spacing: .02em; }
.filters button { font-size: 13px; color: #62685e; line-height: 1.6; }
.view-switch button { font-size: 12px; letter-spacing: 0; padding: 7px 12px; }
.project .cover-action { font-size: 12px; }
.caption { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 16px; align-items: start; padding-top: 17px; }
.caption h2 { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0; gap: 12px; }
.caption h2::before { font-size: 10px; font-weight: 400; letter-spacing: 0; color: #707769; flex-shrink: 0; width: 14px; }
.caption > span:not(.caption-arrow) { grid-column: 1; grid-row: 2; margin-left: 26px; font-size: 12px; color: #697160; letter-spacing: 0; white-space: normal; line-height: 1.7; }
.caption-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 18px; }
.index-heading, .index-heading > span:last-child, .index-hint { font-size: 12px; color: #65705a; letter-spacing: 0; }
.index-row { min-height: 48px; gap: 12px; }
.index-row strong { font-size: 16px; letter-spacing: 0; font-weight: 400; }
.index-row small, .index-row > span { font-size: 11px; color: #6b755f; }
.index-meta h2 { font-size: 18px; font-weight: 500; }
.index-meta > span:last-child { font-size: 11px; color: #65705b; }
.index-open-label { font-size: 13px; }
.about-content > h2 { font-size: clamp(30px,3.3vw,46px); font-weight: 500; letter-spacing: 0; line-height: 1.55; }
.about-content > h2 > span { color: #747d6c; }
.about-content > p { font-size: 16px; color: #5f6857; line-height: 1.85; letter-spacing: .01em; max-width: 36em; }
.about-practice { gap: 9px; }
.about-practice > span { font-size: 12px; color: #59694b; padding: 7px 11px; line-height: 1.6; }
.about .contact-link { font-size: 14px; letter-spacing: 0; }
.about-portrait > figcaption { font-size: 11px; line-height: 1.6; color: #626d58; flex-wrap: wrap; gap: 3px 8px; padding-top: 9px; }
.about-portrait small { font-size: 9px; letter-spacing: .04em; color: #747e6a; }
.contact-block .contact-mail { font-size: clamp(24px,3.1vw,42px); font-weight: 400; letter-spacing: -.025em; color: #495d3c; line-height: 1.45; }
.contact-public-phone { font-size: 13px; color: #67765a; }
.contact-public-phone a { font-size: 16px; letter-spacing: .02em; }
.footer { font-size: 12px; letter-spacing: 0; gap: 18px; }
.footer > span { font-size: 11px; color: #6d7664; line-height: 1.8; }
.dialog-toolbar > span { font-size: 12px; color: #6e7c60; }
.dialog-toolbar button, .dialog-toolbar .dialog-close { font-size: 13px; line-height: 1.5; }
.project-link-status { font-size: 12px; }
.detail-head .small-label { font-size: 12px; color: #6a745e; letter-spacing: .035em; }
.detail-head h2 { font-size: clamp(32px,4.2vw,56px); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; }
.detail-head p { font-size: 16px; line-height: 1.85; color: #606858; }
.case-meta dt { font-size: 11px; letter-spacing: .035em; color: #718061; }
.case-meta dd { font-size: 14px; line-height: 1.8; color: #59634f; }
.case-overline { font-size: 11px; color: #6a7c57; letter-spacing: .04em; }
.case-context h3 { font-size: 26px; font-weight: 500; line-height: 1.6; letter-spacing: 0; }
.case-context p { font-size: 15px; line-height: 1.85; letter-spacing: .01em; color: #616c56; }
.studio-toolbar > span { font-size: 13px; }
.studio-toolbar > span > i { font-size: 11px; color: #6d7c5d; }
.studio-controls button { font-size: 12px; }
.identity-scope > p { font-size: 14px; line-height: 1.85; }
.identity-scope > .small-label, .identity-logo > .small-label, .identity-logo > span:last-child { font-size: 10px; }
.detail-strip > span { font-size: 12px; line-height: 1.85; color: #6d7e5d; }
.detail-next > small { font-size: 11px; color: #71825f; }
.detail-next > strong { font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.contact-dialog > .small-label { font-size: 11px; letter-spacing: .04em; }
.contact-dialog h2 { font-size: 30px; font-weight: 500; letter-spacing: 0; line-height: 1.55; }
.contact-dialog > .contact-focus { font-size: 14px; color: #637951; }
.contact-options small { font-size: 12px; color: #6b7e5a; }
.contact-options strong { font-size: 16px; line-height: 1.7; letter-spacing: 0; }
.contact-copy-status, .contact-dialog .solid-button { font-size: 13px; }
.task-row, .task-form input { font-size: 15px; }
.task-progress, .task-feedback, .task-form button, .chart-readout, .chart-legend, .terrain-toolbar, .terrain-toolbar button, .terrain-help { font-size: 12px; }
.range-tabs button { font-size: 12px; }
.showcase-project .caption h2 { font-size: 16px; }
.showcase-project .caption > span:not(.caption-arrow) { font-size: 12px; }
dialog[data-project=terrain] .terrain-help,
dialog[data-project=pulse] .chart-readout,
dialog[data-project=pulse] .chart-legend,
dialog[data-project=pulse] .range-tabs button { font-size: 12px; }

@media (max-width:1100px) {
  .hero-intro > p { font-size: 16px; }
  .caption h2 { font-size: 15px; }
  .work-controls { gap: 22px; }
  .work-controls .filters { gap: 20px; }
  .about-content > h2 { font-size: 36px; }
  .index-row small { font-size: 10px; }
}
@media (max-width:760px) {
  .header nav { gap: 20px; }
  .header nav a, .header nav button { font-size: 13px; }
  .hero-top { flex-direction: column; gap: 6px; }
  .hero-top, .hero-top > span:last-child { font-size: 10px; text-align: left; }
  .hero-intro { align-items: center; }
  .hero-intro > p { font-size: 15px; line-height: 1.8; }
  .hero-intro > a { font-size: 12px; gap: 12px; }
  .work-nav { flex-wrap: wrap; gap: 16px; }
  .work-controls { width: 100%; justify-content: space-between; gap: 14px; }
  .work-controls .filters { gap: 18px; }
  .filters button { font-size: 12px; }
  .filters sup { font-size: 9px; }
  .view-switch button { font-size: 11px; padding: 6px 9px; }
  .section-index, .section-index span { font-size: 12px; }
  .project .cover-action { font-size: 11px; }
  .caption { gap: 3px 12px; }
  .caption h2 { font-size: 15px; gap: 10px; }
  .caption h2::before { font-size: 10px; }
  .caption > span:not(.caption-arrow) { margin-left: 24px; font-size: 11px; }
  .showcase-project .caption h2 { font-size: 15px; }
  .showcase-project .caption > span:not(.caption-arrow) { font-size: 11px; }
  .index-row strong { font-size: 15px; }
  .index-row small { font-size: 11px; }
  .index-meta { flex-wrap: wrap; gap: 8px 12px; }
  .index-meta h2 { font-size: 17px; }
  .index-meta > span:last-child { margin-left: 0; }
  .index-open-label { font-size: 12px; }
  .about-content { grid-template-columns: minmax(0,1fr) 110px; column-gap: 22px; }
  .about-content > h2 { font-size: clamp(26px,6.5vw,34px); line-height: 1.65; letter-spacing: 0; margin-bottom: 24px; }
  .about-content > p { font-size: 15px; line-height: 1.85; margin-bottom: 18px; }
  .about-practice { gap: 7px; }
  .about-practice > span { font-size: 11px; padding: 5px 8px; }
  .about .contact-link { font-size: 13px; margin-top: 18px; }
  .about-portrait > figcaption { font-size: 10px; padding: 8px 1px 2px; }
  .about-portrait small { font-size: 8px; letter-spacing: 0; }
  .contact-block .contact-mail { font-size: clamp(22px,6vw,29px); letter-spacing: -.03em; }
  .contact-public-phone { font-size: 12px; }
  .contact-public-phone a { font-size: 15px; margin-left: 18px; }
  .footer { font-size: 11px; }
  .footer > span { font-size: 10px; }
  #project-dialog > .dialog-toolbar { gap: 8px; padding: 10px 12px; }
  .dialog-toolbar > span { font-size: 11px; white-space: nowrap; }
  .dialog-toolbar button, .dialog-toolbar .dialog-close { font-size: 12px; padding: 9px; }
  .toolbar-link { font-size: 12px !important; }
  .detail-head .small-label { font-size: 11px; }
  .detail-head h2 { font-size: 30px; letter-spacing: 0; line-height: 1.5; }
  .detail-head p { font-size: 15px; line-height: 1.85; }
  .case-meta { grid-template-columns: 1fr; gap: 18px; }
  .case-meta dt { font-size: 10px; }
  .case-meta dd { font-size: 13px; }
  .case-overline { font-size: 10px; }
  .case-context h3 { font-size: 23px; line-height: 1.65; }
  .case-context p { font-size: 14px; line-height: 1.9; }
  .studio-toolbar { flex-wrap: wrap; gap: 12px; }
  .studio-toolbar > span { font-size: 12px; }
  .studio-toolbar > span > i { font-size: 10px; }
  .studio-controls button { font-size: 11px; padding: 7px 9px; }
  .identity-scope { flex-direction: column; align-items: flex-start; gap: 14px; }
  .identity-scope > p { font-size: 13px; line-height: 1.85; }
  .identity-scope > .small-label, .identity-logo > .small-label, .identity-logo > span:last-child { font-size: 9px; }
  .detail-strip > span { font-size: 11px; }
  .detail-next > small { font-size: 10px; }
  .detail-next > strong { font-size: 26px; }
  .contact-dialog h2 { font-size: 26px; }
  .contact-dialog > .small-label { font-size: 10px; }
  .contact-dialog > .contact-focus { font-size: 13px; }
  .contact-options > a, .contact-options > button { flex-direction: column; align-items: flex-start; gap: 6px; }
  .contact-options small { font-size: 11px; }
  .contact-options strong { font-size: 15px; }
  .contact-copy-status, .contact-dialog .solid-button { font-size: 12px; }
  .task-row, .task-form input { font-size: 14px; }
  .task-form button { font-size: 12px; }
  .terrain-toolbar label { font-size: 12px; }
}
@media (max-width:370px) {
  .wordmark img { width: 108px; }
  .header nav { gap: 13px; }
  .header nav a, .header nav button { font-size: 12px; }
  .hero-intro > p { font-size: 14px; }
  .hero-intro > a { font-size: 11px; gap: 8px; }
  .work-controls { flex-wrap: wrap; gap: 14px; }
  .work-controls .filters { width: 100%; gap: 23px; }
  .about-content { grid-template-columns: minmax(0,1fr) 90px; column-gap: 18px; }
  .about-content > h2 { font-size: 25px; }
  .about-practice > span { font-size: 11px; padding: 5px 7px; }
  .about-portrait small { font-size: 7px; }
  .dialog-toolbar > span { font-size: 10px; }
  .dialog-toolbar button, .dialog-toolbar .dialog-close { font-size: 11px; padding: 8px; }
  .toolbar-link { font-size: 11px !important; }
  .detail-head h2 { font-size: 27px; }
}