:root {
  --paper: #f4f5f2;
  --white: #ffffff;
  --surface: #e7ebe7;
  --ink: #152832;
  --secondary: #4b5a60;
  --brass: #7a6334;
  --field: #1a3039;
  --field-ink: #f4f5f2;
  --form-border: #8b9697;
  --error: #963c36;
  --sans: 'Noto Sans SC', 'PingFang SC', sans-serif;
  --serif: 'Noto Serif SC', 'Songti SC', serif;
  --small: 1rem;
  --body: clamp(1rem, .95rem + .22vw, 1.1875rem);
  --lead: clamp(1.25rem, 1rem + .55vw, 1.625rem);
  --heading: clamp(2rem, 1.4rem + 2.4vw, 3.75rem);
  --display: clamp(3.25rem, 7.4vw, 7.25rem);
  --margin: clamp(20px, 2.8vw, 48px);
  --gap: clamp(28px, 4vw, 64px);
  --section: clamp(80px, 10vw, 156px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; -webkit-font-smoothing: antialiased; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: var(--body); line-height: 1.75; }
::selection { color: var(--paper); background: var(--ink); }
h1,h2,h3,h4,p,figure,ul,ol,dl { margin: 0; }
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 500; line-height: 1.4; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: var(--heading); }
h2 { font-size: var(--heading); }
h3 { font-size: var(--lead); }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
a:hover { text-decoration: underline; }
button,input,select,textarea { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline: 3px solid var(--brass); outline-offset: 5px; }
img { display: block; width: 100%; height: auto; object-fit: cover; }
img[src*="editorial"] { filter: grayscale(1) contrast(1.03); }
button:disabled { cursor: wait; opacity: .65; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 16px; padding: 12px 20px; background: var(--ink); color: var(--paper); transform: translateY(-160%); z-index: 100; }
.skip-link:focus { transform: none; }
.site-header { display: flex; align-items: stretch; justify-content: space-between; min-height: 88px; background: var(--paper); position: relative; z-index: 10; }
.wordmark { background: var(--ink); color: var(--paper); padding: 21px var(--margin); display: flex; align-items: center; gap: 11px; font-size: var(--lead); font-weight: 600; letter-spacing: -.055em; }
.wordmark:hover { text-decoration: none; }
.wordmark img { width: 30px; height: 30px; flex-shrink: 0; }
.wordmark-description { font-size: var(--small); font-weight: 400; letter-spacing: 0; margin-left: 24px; }
.navigation { display: none; }
.navigation summary { display: none; }
.desktop-nav,.navigation nav { display: flex; align-items: center; gap: clamp(20px, 3.2vw, 52px); height: 100%; padding-right: var(--margin); font-size: 16px; }
.desktop-nav { height: auto; }
.desktop-nav a,.navigation nav a { padding: 14px 0; }
.desktop-nav a[aria-current],.navigation nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav-contact { color: var(--brass); display: flex; gap: 28px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 56px; padding: 14px 24px; background: var(--ink); color: var(--paper); border: 0; font-size: 16px; font-weight: 500; text-decoration: none; transition: transform 160ms var(--ease), opacity 180ms; }
.button:hover { opacity: .88; text-decoration: none; transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button-light { background: var(--paper); color: var(--ink); }
.text-link { display: inline-block; padding: 8px 0; font-size: 16px; }
.text-link:hover { text-decoration-thickness: 2px; }
.section-space { padding: var(--section) var(--margin); }
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); height: clamp(300px, 46vh, 450px); overflow: hidden; background: var(--surface); }
.mosaic figure { min-width: 0; min-height: 0; overflow: hidden; }
.mosaic img { width: 100%; height: 100%; }
.mosaic-harbour { grid-area: 1 / 1 / 3 / 3; }
.mosaic-harbour img { object-position: 20% 50%; }
.mosaic-note { grid-area: 1 / 3 / 3 / 4; display: flex; align-items: flex-end; background: var(--field); color: var(--field-ink); padding: 24px; font-family: var(--serif); font-size: clamp(14px, 1.3vw, 20px); }
.mosaic-singapore { grid-area: 1 / 4 / 2 / 6; }
.mosaic-buildings { grid-area: 2 / 4 / 3 / 5; }
.mosaic-newyork { grid-area: 2 / 5 / 3 / 7; }
.mosaic-solid { grid-area: 1 / 6 / 2 / 7; background: var(--surface); }
.masthead-type { display: grid; grid-template-columns: 42% 58%; gap: 0; padding: 46px var(--margin) 64px; }
.masthead-deck { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding-right: 60px; }
.masthead-deck p { max-width: 27em; font-size: var(--body); line-height: 1.9; margin-bottom: 28px; }
.hero-title { font-size: var(--display); line-height: 1.27; letter-spacing: -.06em; }
.line { display: block; overflow: hidden; padding: .08em 0; margin: -.08em 0; }
.line > span { display: block; }
.case-feature { background: var(--ink); color: var(--paper); }
.case-feature-header { display: grid; grid-template-columns: 42% 58%; align-items: end; }
.case-feature-header p { max-width: 29em; font-size: var(--lead); padding-left: var(--gap); }
.case-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: 74px; }
.case-comparison > div { padding: 30px 0; }
.case-comparison > div:last-child { background: var(--surface); color: var(--ink); padding: 30px var(--gap); }
.case-comparison p:not(.case-figure) { font-size: 16px; }
.case-figure { font-size: var(--display); line-height: 1.35; font-family: var(--serif); letter-spacing: -.06em; margin: 0 0 24px; font-variant-numeric: lining-nums tabular-nums; }
.case-comparison .case-figure + p { margin-bottom: 18px; }
.case-foot { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; margin-top: 40px; }
.case-foot p { max-width: 57em; font-size: var(--small); line-height: 1.85; }
.case-foot a { white-space: nowrap; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 64px; }
.section-heading p { font-size: 16px; }
.library-layout { display: grid; grid-template-columns: 24% 76%; }
.reading-filters { padding-right: var(--gap); }
.reading-filters label { display: block; font-size: 16px; margin-bottom: 14px; }
.reading-filters input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--form-border); background: var(--white); font-size: var(--small); }
.topic-options { display: flex; flex-direction: column; gap: 7px; margin: 30px 0; }
.topic-options button { display: flex; justify-content: space-between; border: 0; text-align: left; padding: 15px 20px; color: var(--ink); background: var(--surface); font-size: 16px; transition: transform 180ms var(--ease); }
.topic-options button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.topic-options button:hover { transform: translateX(3px); }
.filter-status { font-size: var(--small); }
.reading-item { display: grid; grid-template-columns: 32% 68%; margin-bottom: 18px; background: var(--white); }
.reading-picture { display: block; overflow: hidden; }
.reading-picture img { width: 100%; height: 100%; min-height: 260px; transition: transform 600ms var(--ease); }
.reading-picture:hover img { transform: scale(1.045); }
.reading-item-content { padding: 28px 36px; }
.reading-meta { display: flex; justify-content: space-between; gap: 12px; font-size: var(--small); color: var(--secondary); margin-top: 20px; }
.reading-item h3 { font-size: var(--lead); margin-bottom: 16px; }
.reading-item-content > p:not(.reading-meta) { font-size: 16px; max-width: 35em; line-height: 1.9; }
.reading-item .text-link { margin-top: 12px; }
.reading-list > .reading-item:nth-of-type(even) { background: var(--surface); }
.reading-item:not(:has(.reading-picture)) { display: block; }
.no-results { padding: 64px 32px; background: var(--surface); }
.source-section { background: var(--surface); }
.axis-heading { display: grid; grid-template-columns: 42% 58%; margin-bottom: 64px; }
.axis-heading > p { padding-right: 64px; max-width: 29em; align-self: end; }
.source-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--body); }
.source-table th { font-size: var(--small); font-weight: 400; padding: 16px 20px; }
.source-table td { padding: 26px 20px; }
.source-table tbody tr:nth-child(odd) { background: var(--paper); }
.source-link { margin-top: 32px; margin-left: 42%; }
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); height: 32vw; max-height: 420px; overflow: hidden; }
.photo-strip img { width: 100%; height: 100%; }
.service-close-body { display: grid; grid-template-columns: 42% 58%; padding: 80px var(--margin) 96px; background: var(--surface); }
.service-close-body > div { padding-left: var(--gap); }
.service-close-body p { font-size: var(--lead); max-width: 30em; margin-bottom: 30px; }
.service-list { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
.service-list a { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--paper); font-size: 16px; }
.site-footer { background: var(--ink); color: var(--paper); padding: 60px var(--margin) 32px; }
.footer-top { display: grid; grid-template-columns: 42% 1fr auto; gap: 32px; font-size: 16px; }
.footer-name { font-size: var(--lead); font-weight: 600; letter-spacing: -.05em; }
.footer-top > a:last-child { align-self: start; }
.contact-display { display: block; margin: 88px 0 64px; font-family: var(--serif); font-size: var(--display); letter-spacing: -.065em; line-height: 1.2; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: var(--small); }
.footer-bottom > div { display: flex; flex-wrap: wrap; gap: 24px; }
.page-intro { display: grid; grid-template-columns: 42% 58%; padding: 96px var(--margin) 80px; align-items: end; gap: 32px 0; }
.page-intro h1 { grid-column: 2; font-size: clamp(32px, 4.1vw, 64px); }
.page-intro > p { grid-column: 2; max-width: 31em; font-size: var(--lead); }
.index-photo { height: 290px; position: relative; overflow: hidden; }
.index-photo img { width: 100%; height: 100%; object-position: 50% 54%; }
.index-photo p { position: absolute; bottom: 0; left: var(--margin); background: var(--ink); color: var(--paper); padding: 10px 20px; font-size: 16px; }
.article-header { padding: 40px var(--margin) 0; }
.article-heading-grid { display: grid; grid-template-columns: 30% 70%; align-items: end; padding: 62px 0; }
.article-meta { display: flex; flex-direction: column; gap: 12px; font-size: var(--small); }
.article-heading-grid h1 { font-size: clamp(32px, 4vw, 60px); }
.article-original-title { font-size: var(--lead); max-width: 34em; margin-top: 24px; }
.article-cover { position: relative; }
.article-cover img { height: 330px; width: 100%; }
.article-cover figcaption { display: inline-block; background: var(--ink); color: var(--paper); padding: 12px 24px; position: absolute; bottom: 0; left: 0; font-size: var(--small); }
.article-layout { display: grid; grid-template-columns: minmax(200px, 24%) minmax(0, 1fr); gap: var(--gap); padding: 80px var(--margin) 0; max-width: 1440px; margin: auto; }
.article-aside { font-size: var(--small); }
.article-toc { margin-bottom: 30px; }
.article-toc summary { font-size: 16px; cursor: pointer; margin-bottom: 24px; }
.article-toc nav { display: flex; flex-direction: column; gap: 20px; max-width: 19em; }
.article-toc nav a { line-height: 1.8; }
.article-toc a[aria-current] { color: var(--brass); text-decoration: underline; }
.article-body { font-family: var(--serif); font-size: var(--body); line-height: 2.05; max-width: 47em; min-width: 0; }
.article-body > p { margin-bottom: 1.6em; }
.article-body h2 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.6; margin: 64px 0 24px; font-weight: 600; letter-spacing: -.02em; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: var(--lead); margin: 30px 0 18px; }
.article-body a { text-decoration: underline; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.article-body blockquote { background: var(--surface); padding: 24px 30px; margin: 0 0 36px; font-family: var(--sans); font-size: 16px; line-height: 1.9; }
.article-body ul,.article-body ol { padding-left: 1.6em; margin: 24px 0; }
.article-body li { margin-bottom: 12px; }
.article-body strong { font-weight: 600; }
.table-scroll { width: 100%; overflow-x: auto; margin: 32px 0; background: var(--white); }
.article-body table { width: 100%; border-collapse: collapse; min-width: 560px; font-family: var(--sans); font-size: 16px; line-height: 1.8; }
.article-body th,.article-body td { text-align: left; vertical-align: top; padding: 16px 18px; }
.article-body th { background: var(--ink); color: var(--paper); font-weight: 500; }
.article-body tr:nth-child(even) { background: var(--surface); }
.article-body td { border-bottom: 1px solid var(--surface); }
.article-endnote { margin: 60px 0 0; background: var(--surface); padding: 26px 30px; font-family: var(--sans); font-size: var(--small); }
.article-endnote a { display: inline-block; margin-top: 16px; }
.related-reading { margin-top: 64px; background: var(--surface); }
.related-reading > div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 42px; }
.related-reading .reading-item { background: var(--paper); }
.calculator-section { display: grid; grid-template-columns: 42% 58%; padding: 24px var(--margin) var(--section); gap: 0; }
.calculator-section > div:first-child { padding-right: var(--gap); }
.calculator-section h2 { font-size: var(--lead); margin-bottom: 24px; }
.calculator-section p { margin-bottom: 24px; }
.calculator { padding: 40px; background: var(--surface); }
.calculator label { display: block; margin-bottom: 12px; }
.calculator input { display: block; border: 1px solid var(--form-border); padding: 16px; font-size: 24px; background: var(--white); width: 100%; margin-bottom: 20px; }
.calculation-results { margin-top: 36px; }
.calculation-results > p { font-size: 16px; margin-bottom: 8px; }
.calculation-results output { display: block; font-family: var(--serif); font-size: clamp(32px,4.6vw,72px); letter-spacing: -.045em; line-height: 1.6; overflow-wrap: anywhere; }
.calculation-results dl { font-size: 16px; margin-top: 32px; }
.calculation-results dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 16px; background: var(--paper); margin-bottom: 8px; }
.calculation-results dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.plain-section { padding: 0 var(--margin) var(--section); max-width: 1440px; margin: auto; }
.plain-section > h2 { margin-bottom: 36px; }
.plain-section > p { max-width: 45em; margin-bottom: 26px; }
.service-overview { display: grid; grid-template-columns: 42% 58%; background: var(--surface); }
.service-photo img { height: 100%; min-height: 460px; }
.service-overview > div:last-child { padding: 60px var(--gap); }
.service-overview h2 { font-size: clamp(26px,2.8vw,42px); margin-bottom: 32px; }
.service-overview p { margin-bottom: 32px; }
.service-overview + .plain-section { padding-top: var(--section); }
.service-row { display: grid; grid-template-columns: 42% 58%; padding: 30px 0; }
.service-row:nth-child(odd) { background: var(--surface); padding-left: 24px; padding-right: 24px; }
.service-row p { max-width: 32em; }
.service-detail { display: grid; grid-template-columns: 58% 42%; padding: 0 var(--margin) var(--section); }
.service-detail > div { padding-right: var(--gap); }
.service-detail h2 { font-size: var(--lead); margin-bottom: 24px; }
.service-detail p { margin-bottom: 26px; }
.service-detail aside { background: var(--surface); padding: 32px; }
.big-list { list-style: none; padding: 0; margin-bottom: 32px; }
.big-list li { padding: 18px 24px; margin-bottom: 8px; background: var(--surface); }
.contact-layout { display: grid; grid-template-columns: 42% 58%; gap: 0; padding: 0 var(--margin) var(--section); }
.contact-layout aside { padding-right: var(--gap); }
.contact-layout aside h2 { font-size: clamp(28px,3vw,46px); margin-bottom: 32px; }
.contact-layout aside p { max-width: 23em; margin-bottom: 24px; }
.contact-layout aside a { display: block; }
.contact-related { margin-top: 26px; padding: 20px; background: var(--surface); font-size: 16px; }
.consultation-form { padding: 40px; background: var(--surface); }
.consultation-form label { display: block; margin: 0 0 12px; font-size: 16px; }
.consultation-form input:not([type=checkbox]),.consultation-form select,.consultation-form textarea { display: block; width: 100%; padding: 14px; min-height: 52px; background: var(--white); border: 1px solid var(--form-border); margin-bottom: 28px; font-size: 16px; }
.consultation-form textarea { resize: vertical; min-height: 180px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.consultation-form .consent { display: flex; gap: 14px; align-items: start; line-height: 1.8; }
.consent input { width: 20px; height: 20px; accent-color: var(--ink); flex-shrink: 0; margin-top: 4px; }
.consent a { text-decoration: underline; }
.form-hint { font-size: var(--small); margin: 16px 0 28px; }
.form-status { margin-top: 24px; font-size: 16px; }
.form-status[data-error] { color: var(--error); }
.honeypot { display: none; }
.about-picture { height: 440px; overflow: hidden; }
.about-picture img { height: 100%; }
.axis-section { display: grid; grid-template-columns: 42% 58%; }
.axis-section p { margin-bottom: 30px; max-width: 33em; }
.editorial-policy,.legal-copy { margin: 0 auto; padding: 0 var(--margin) var(--section); max-width: 920px; }
.editorial-policy { padding-bottom: 32px; }
.sources-directory { background: var(--surface); }
.sources-directory > p { max-width: 48em; margin-top: 30px; }
.sources-directory ol { list-style: none; padding: 0; margin: 48px 0 0; }
.sources-directory li { padding: 26px; background: var(--paper); margin-bottom: 14px; overflow-wrap: anywhere; }
.sources-directory li p { font-size: var(--small); margin-top: 12px; }
.sources-directory a:hover { text-decoration: underline; }
.credits-page { padding: 0 var(--margin) var(--section); }
.credits-page > p { max-width: 50em; margin-bottom: 48px; }
.credits-page figure { display: grid; grid-template-columns: 42% 58%; margin-bottom: 42px; background: var(--surface); }
.credits-page figure img { height: 320px; }
.credits-page figcaption { padding: 32px; overflow-wrap: anywhere; }
.credits-page h2 { font-size: var(--lead); margin-bottom: 24px; }
.credits-page figcaption p { margin: 12px 0; }
.credits-page figcaption a { text-decoration: underline; }
@keyframes title-enter { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes first-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes photograph-drift { from { transform: scale(1.015); } to { transform: scale(1.075); } }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-line] { animation: title-enter 900ms var(--ease) both; }
  .motion-ready .line:nth-child(2) [data-line] { animation-delay: 110ms; }
  .motion-ready [data-rise] { animation: first-enter 760ms var(--ease) both; animation-delay: 280ms; }
  .motion-ready a[data-rise] { animation-delay: 360ms; }
  .motion-ready .mosaic-harbour img { animation: photograph-drift 24s ease-in-out infinite alternate; }
  .button span,.text-link span { transition: transform 180ms var(--ease); }
  .button:hover span,.text-link:hover span { transform: translate(2px,-2px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
}
@media (min-width: 901px) {
  .article-aside { align-self: start; }
}
@media (max-width: 1100px) {
  .wordmark-description { display: none; }
  .desktop-nav,.navigation nav { gap: 26px; }
  .masthead-deck { padding-right: 28px; }
  .reading-item-content { padding: 24px; }
  .reading-picture img { min-height: 290px; }
  .article-heading-grid { grid-template-columns: 24% 76%; }
}
@media (max-width: 900px) {
  .library-layout { grid-template-columns: 26% 74%; }
  .reading-filters { padding-right: 24px; }
  .reading-item { grid-template-columns: 1fr; }
  .reading-picture img { height: 220px; min-height: 0; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 24px; }
  .mosaic-note { padding: 18px; }
  .hero-title { font-size: 7.4vw; }
  .article-layout { grid-template-columns: 1fr; padding-top: 48px; }
  .article-aside { max-width: none; }
  .article-toc { padding: 24px; background: var(--surface); }
  .article-toc nav { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .article-toc:not([open]) { margin-bottom: 16px; }
  .article-toc:not([open]) summary { margin-bottom: 0; }
  .article-aside > .text-link { display: none; }
  .article-body { max-width: none; }
  .article-heading-grid { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .article-meta { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
  .article-cover img { height: 300px; }
  .page-intro { grid-template-columns: 30% 70%; }
  .service-detail { grid-template-columns: 1fr; gap: 48px; }
  .service-detail > div { padding-right: 0; }
  .service-close-body > div { padding-left: 32px; }
  .service-close-body p { font-size: var(--body); }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-layout aside { padding-right: 0; }
  .contact-layout aside p { max-width: 36em; }
  .contact-layout aside a { display: inline-block; margin-right: 32px; }
  .calculator-section { grid-template-columns: 1fr; gap: 40px; }
  .calculator-section > div:first-child { padding-right: 0; }
  .footer-bottom { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  :root { --margin: 20px; --small: 14px; --body: 17px; --heading: 34px; --lead: 24px; --display: 12vw; --section: 80px; }
  .site-header { min-height: 72px; }
  .wordmark { padding-top: 16px; padding-bottom: 16px; font-size: var(--lead); }
  .wordmark img { width: 26px; height: 26px; }
  .navigation { display: block; }
  .desktop-nav { display: none; }
  .navigation summary { display: flex; list-style: none; gap: 18px; padding: 23px 20px; cursor: pointer; font-size: var(--body); }
  .navigation summary::-webkit-details-marker { display: none; }
  .navigation nav { display: none; }
  .navigation[open] nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; left: 0; right: 0; top: 72px; height: auto; padding: 20px; background: var(--surface); }
  .navigation nav a { padding: 14px; }
  .navigation[open] summary span { transform: rotate(45deg); }
  .navigation .nav-contact { justify-content: space-between; }
  .mosaic { height: 240px; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); }
  .mosaic-harbour { grid-area: 1 / 1 / 2 / 3; }
  .mosaic-note { grid-area: 1 / 3 / 2 / 4; padding: 14px; font-size: var(--small); }
  .mosaic-singapore { grid-area: 2 / 1 / 3 / 2; }
  .mosaic-buildings { grid-area: 2 / 2 / 3 / 3; }
  .mosaic-newyork { grid-area: 2 / 3 / 3 / 4; }
  .mosaic-solid { display: none; }
  .masthead-type { display: flex; flex-direction: column-reverse; padding: 32px var(--margin) 48px; gap: 30px; }
  .hero-title { font-size: 12vw; line-height: 1.34; }
  .masthead-deck { padding-right: 0; }
  .masthead-deck p { font-size: var(--body); line-height: 1.9; margin-bottom: 24px; }
  .masthead-deck .button { min-width: 185px; }
  .case-feature-header { grid-template-columns: 1fr; gap: 32px; }
  .case-feature-header p { padding-left: 0; font-size: var(--body); }
  .case-comparison { grid-template-columns: 1fr; padding-top: 24px; gap: 20px; }
  .case-comparison > div { padding: 24px 0; }
  .case-comparison > div:last-child { padding: 26px 24px; }
  .case-figure { font-size: 22vw; margin: 12px 0; }
  .case-comparison p:not(.case-figure) { font-size: var(--body); }
  .case-foot { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .section-heading { margin-bottom: 36px; }
  .library-layout { grid-template-columns: 1fr; }
  .reading-filters { padding-right: 0; }
  .reading-filters input { font-size: var(--body); }
  .topic-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 18px 0; }
  .topic-options button { padding: 13px 12px; justify-content: center; font-size: var(--body); }
  .topic-options button span { display: none; }
  .filter-status { margin-bottom: 28px; }
  .reading-picture img { height: 200px; }
  .reading-item-content { padding: 24px; }
  .reading-item h3 { font-size: 24px; }
  .reading-meta { font-size: var(--small); }
  .reading-item-content > p:not(.reading-meta) { font-size: var(--body); }
  .axis-heading { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
  .axis-heading > p { padding-right: 0; max-width: none; order: 1; }
  .source-table thead { display: none; }
  .source-table tbody,.source-table tr,.source-table td { display: block; }
  .source-table tr { padding: 18px 20px; }
  .source-table td { padding: 4px 0; }
  .source-table td:first-child { font-family: var(--serif); font-size: var(--lead); margin-bottom: 8px; }
  .source-table td:last-child { font-size: var(--small); }
  .source-link { margin-left: 0; }
  .photo-strip { grid-template-columns: 1fr 1fr; height: 360px; grid-template-rows: 200px 160px; }
  .photo-strip img:first-child { grid-column: 1 / 3; }
  .service-close-body { grid-template-columns: 1fr; gap: 32px; padding: 48px var(--margin) 64px; }
  .service-close-body > div { padding-left: 0; }
  .service-close-body p { font-size: 17px; }
  .site-footer { padding-top: 44px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; font-size: var(--body); }
  .footer-top p { grid-column: 1 / 3; grid-row: 2; }
  .footer-top > a:last-child { text-align: right; }
  .contact-display { font-size: 12vw; margin: 48px 0 40px; line-height: 1.4; }
  .contact-display span { display: block; }
  .footer-bottom { align-items: start; flex-direction: column; gap: 18px; }
  .footer-bottom > div { gap: 16px 22px; }
  .page-intro { display: block; padding: 52px var(--margin) 48px; }
  .page-intro h1 { font-size: 34px; }
  .page-intro > p { font-size: 19px; margin-top: 28px; }
  .index-photo { height: 220px; }
  .index-photo p { font-size: var(--small); padding: 8px 16px; }
  .article-header { padding-top: 24px; }
  .article-heading-grid { padding: 32px 0; gap: 24px; }
  .article-meta { gap: 8px 16px; font-size: 13px; }
  .article-heading-grid h1 { font-size: 32px; }
  .article-original-title { font-size: 19px; margin-top: 20px; }
  .article-cover img { height: 210px; }
  .article-cover figcaption { position: static; display: block; font-size: 13px; padding: 10px 14px; }
  .article-layout { padding-top: 28px; gap: 16px; }
  .article-toc { padding: 20px; }
  .article-toc nav { grid-template-columns: 1fr; gap: 16px; }
  .article-body { font-size: 17px; line-height: 2.05; }
  .article-body h2 { font-size: 23px; margin-top: 48px; line-height: 1.6; }
  .article-body blockquote { padding: 22px; font-size: 15px; }
  .article-body th,.article-body td { padding: 14px; }
  .article-body table { font-size: 15px; }
  .article-endnote { padding: 22px; }
  .related-reading > div { grid-template-columns: 1fr; gap: 8px; }
  .related-reading { margin-top: 48px; }
  .calculator { padding: 24px 20px; }
  .calculation-results output { font-size: 42px; }
  .calculation-results dl > div { padding: 14px 12px; font-size: 14px; gap: 12px; }
  .calculation-results dd { flex-shrink: 0; }
  .service-overview { grid-template-columns: 1fr; }
  .service-photo img { min-height: 0; height: 240px; }
  .service-overview > div:last-child { padding: 40px 24px; }
  .service-overview h2 { font-size: 29px; }
  .service-row { grid-template-columns: 1fr; gap: 20px; }
  .service-detail aside { padding: 24px; }
  .contact-layout aside h2 { font-size: 32px; }
  .consultation-form { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .about-picture { height: 260px; }
  .axis-section { grid-template-columns: 1fr; gap: 36px; }
  .sources-directory li { padding: 22px; }
  .credits-page figure { grid-template-columns: 1fr; }
  .credits-page figure img { height: 220px; }
  .credits-page figcaption { padding: 24px; }
}