/* Phone-first reading and original-ratio photography. Desktop rules stay upstream. */
@media (max-width: 760px) {
  :root {
    --w48-gutter: 22px;
    --gutter: var(--w48-gutter);
    --w38-header: 72px;
    --w38-header-height: 72px;
  }

  body.world38 { font-size: 16px; line-height: 1.8; }
  body.world38 .w38-wrap { width: calc(100% - 2 * var(--w48-gutter)); }
  body.world38 main :is(section, article, header, figure, div, nav) { min-width: 0; }
  body.world38 main :is(h1, h2, h3, p, dt, dd, a, button, summary) { overflow-wrap: anywhere; }
  body.world38 main h1 { font-size: clamp(34px, 8.5vw, 42px); line-height: 1.16; letter-spacing: -.035em; }
  body.world38 main h2 { font-size: clamp(28px, 7.4vw, 34px); line-height: 1.25; }
  body.world38 main h3 { font-size: 23px; line-height: 1.35; }
  body.world38 main p { font-size: 16px; line-height: 1.8; }
  body.world38 main .w38-eyebrow { font-size: 12px; line-height: 1.5; letter-spacing: .06em; }
  body.world38 main :is(figcaption, .w38-card-meta, .w38-image-note, .mono, .w38-back) { font-size: 12px; line-height: 1.65; }
  html[lang^="zh"] body.world38 main :is(h1, h2, h3) { line-height: 1.35; letter-spacing: -.015em; }
  html[dir="rtl"] body.world38 main :is(h1, h2, h3, .w38-eyebrow) { letter-spacing: 0; }
  body.world38 main .w38-button { min-height: 48px; max-width: 100%; gap: 20px; font-size: 15px; line-height: 1.5; }
  body.world38 main .w38-button .w38-icon { flex-shrink: 0; }
  body.world38 .w38-section { padding-block: 60px; }

  /* A compact, readable header with generous touch targets. */
  body.world38 .w38-header .w38-wrap { width: calc(100% - 32px); }
  body.world38 .w38-nav { height: 72px; gap: 8px; }
  body.world38 .w38-brand { width: 140px; flex-basis: 140px; }
  body.world38 .w38-actions { gap: 2px; }
  body.world38 .w38-icon-button { width: 44px; height: 48px; padding: 11px; }
  body.world38 .w38-language { font-size: 13px; }
  body.world38 .w38-language > summary { min-width: 52px; min-height: 48px; padding-inline: 4px; }
  body.world38 .w38-language nav { inset-inline-end: -42px; width: 190px; }
  body.world38 .w38-language nav > a { font-size: 15px; min-height: 44px; }
  body.world38 .w38-mobile-panel { padding: 12px var(--w48-gutter) 28px; }
  body.world38 .w38-mobile-panel > a,
  body.world38 .w38-mobile-panel > details > summary { font-size: 21px; min-height: 64px; gap: 20px; }
  body.world38 .w38-mobile-panel .w38-mega-grid section > a { font-size: 15px; min-height: 44px; }
  body.world38 .w38-mobile-panel .w38-mega-family { font-size: 18px !important; }

  /* Mobile-only portrait sources fill the opening without cropping their frames. */
  body.world38 main > .w46-home .w38-hero-image[data-w41-carousel] {
    width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 3 / 4;
    background: #fff;
  }
  body.world38 main > .w46-home .w38-hero-image[data-w41-carousel] .w41-hero-slide img {
    width: 100%; height: 100%; padding: 0; object-fit: contain; object-position: center;
  }
  body.world38 main > .w46-home .w38-hero-inner {
    width: calc(100% - 2 * var(--w48-gutter)); padding-block: 32px 38px;
  }
  body.world38 main > .w46-home .w38-hero-copy h1 {
    font-size: clamp(34px, 8.5vw, 42px); line-height: 1.14; margin-bottom: 22px;
    max-width: 18ch;
  }
  html[lang^="zh"] body.world38 main > .w46-home .w38-hero-copy h1 { line-height: 1.3; }
  body.world38 main > .w46-home .w38-hero-copy .w38-eyebrow { font-size: 12px; margin-bottom: 18px; }
  body.world38 main > .w46-home .w38-hero-copy > p:not(.w38-eyebrow) {
    font-size: 16px; line-height: 1.8; margin-bottom: 25px; max-width: 45ch;
  }
  body.world38 main > .w46-home .w45-hero-secondary { margin-top: 12px; }
  body.world38 .w38-quicklinks { grid-template-columns: minmax(0, 1fr); }
  body.world38 .w38-quicklinks > a {
    padding: 18px 0 !important; min-height: 62px; font-size: 16px;
    border-inline: 0; border-bottom: 1px solid var(--line); gap: 24px;
  }
  body.world38 .w38-quicklinks > a:last-child { border-bottom: 0; }

  /* Native-ratio images break out of text gutters, just as a photo essay does. */
  body.world38 main :is(.w38-system-grid, .w38-case-grid) { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  body.world38 main :is(.w38-system-image, .w38-case-image) {
    width: calc(100% + 2 * var(--w48-gutter)); margin-inline: calc(-1 * var(--w48-gutter));
    height: auto; min-height: 0; max-height: none; aspect-ratio: auto; background: #f5f5f3;
  }
  body.world38 main :is(.w38-system-image, .w38-case-image) img {
    width: 100%; height: auto; max-height: none; padding: 0; object-fit: contain; transform: none;
  }
  body.world38 main .w38-card-title { margin-top: 17px; gap: 24px; }
  body.world38 main .w38-card-title :is(h2, h3),
  body.world38 main .w38-case-card .w38-card-title h2,
  body.world38 main .w38-system-grid .w38-card-title h3 { font-size: 24px; line-height: 1.35; max-width: none; }
  body.world38 main .w38-card-meta { margin-top: 16px; }
  body.world38 main .w38-section-heading { margin-bottom: 30px; }
  body.world38 main .w38-section-heading h2 { font-size: 31px; }
  body.world38 main .w38-section-heading .w38-button { margin-top: 18px; font-size: 15px; }
  body.world38 main .w38-page-intro { padding-block: 36px 30px; }
  body.world38 main .w45-intro-lead { font-size: 16px; line-height: 1.8; margin-top: 22px; }

  /* Browsing controls stay accessible but stop pushing the first project far down. */
  body.world38 main .w38-reference-filter { padding-block: 24px; }
  body.world38 main .w38-filter-top { margin-bottom: 16px; }
  body.world38 main .w38-filter-top h2 { font-size: 23px; line-height: 1.4; }
  body.world38 main .w38-filter-top > span { font-size: 13px; }
  body.world38 main .w48-filter-summary {
    display: flex !important; align-items: center; justify-content: space-between; gap: 24px;
    min-height: 50px; padding: 12px 16px; border: 1px solid #bcc4bf; background: #fff;
    font-size: 16px; line-height: 1.5; list-style: none;
  }
  body.world38 main .w48-filter-summary::-webkit-details-marker { display: none; }
  body.world38 main .w48-filter-summary .w38-icon { width: 18px; height: 18px; flex-basis: 18px; }
  body.world38 main .w48-filter-disclosure[open] .w48-filter-summary .w38-icon { transform: rotate(180deg); }
  body.world38 main .w48-filter-disclosure[open] .w38-filter-controls { margin-top: 24px; }
  body.world38 main .w38-filter-controls { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body.world38 main .w38-filter-controls label > span { font-size: 13px; margin-bottom: 8px; }
  body.world38 main .w38-filter-controls :is(input, select) { min-height: 50px; font-size: 16px; padding: 12px; }
  body.world38 main .w38-filter-controls .w38-reset { grid-column: auto; font-size: 14px; min-height: 44px; }
  body.world38 main .w38-case-results { padding-top: 34px; }
  body.world38 main .w38-project-intro { padding-block: 26px 30px; }
  body.world38 main .w38-project-intro h1 { font-size: 34px; }
  body.world38 main .w38-project-intro > p:last-child { font-size: 16px; }
  body.world38 main .w38-project-picture { width: 100%; }
  body.world38 main .w38-project-picture img { width: 100%; height: auto; max-height: none; object-fit: contain; }
  body.world38 main .w38-project-picture figcaption { padding: 14px var(--w48-gutter); }
  body.world38 main .w38-project-end { display: block; }
  body.world38 main .w38-next-project { grid-template-columns: 96px minmax(0, 1fr) 20px; gap: 5px 16px; }
  body.world38 main .w38-next-project img { width: 96px; height: 88px; object-fit: contain; }
  body.world38 main .w38-next-project > span { font-size: 12px; }
  body.world38 main .w38-next-project h3 { font-size: 20px; }

  /* Short paragraphs, full-size controls, and stable typewriter text. */
  body.world38 main .w39-planning { display: block; padding-block: 56px 4px; }
  body.world38 main .w41-planning > header > h2 { font-size: 30px; line-height: 1.35; max-width: none; }
  body.world38 main .w41-planning > header > p:last-child { font-size: 16px; line-height: 1.8; }
  body.world38 main .w41-planning > .w39-topics { padding: 4px 18px; }
  body.world38 main .w41-planning .w39-topic > summary { font-size: 19px; min-height: 68px; }
  body.world38 main .w41-planning .w39-topic > div > p { font-size: 16px; line-height: 1.8; }
  body.world38 main .w41-planning .w39-topic > div > a { font-size: 14px; min-height: 44px; }
  body.world38 main .w39-process { padding-block: 54px; }
  body.world38 main .w39-process header { display: block; }
  body.world38 main .w39-process h2 { font-size: 30px; }
  body.world38 main .w39-process-steps { display: block; }
  body.world38 main .w39-process h3 { font-size: 23px; }
  body.world38 main .w39-process :is(header > p:last-child, article > p) { font-size: 16px; line-height: 1.8; }
  body.world38 main .w38-material-band { padding-block: 54px; }
  body.world38 main .w38-material-band > .w38-wrap { display: block; }
  body.world38 main .w38-material-links > a { font-size: 20px; min-height: 62px; }
  body.world38 main .w38-line .industrial-section-head { grid-template-columns: minmax(0, 1fr); }
  body.world38 main .w38-line .industrial-section-head > div { font-size: 16px; }
  body.world38 main .w38-line .section-number,
  body.world38 main .w38-line .study-presets button { font-size: 12px; }
  body.world38 main .w38-line .study-presets { flex-wrap: wrap; gap: 10px 22px; }
  body.world38 main .w38-line .study-presets button { min-height: 44px; }
  body.world38 main .w38-line .draft-stage { width: calc(100% + 2 * var(--w48-gutter)); max-width: none; margin-inline: calc(-1 * var(--w48-gutter)); }
  body.world38 main .w38-line .draft-caption { font-size: 12px; line-height: 1.6; gap: 16px; }
  body.world38 main .w38-line .draft-caption > span:last-child { display: none; }
  body.world38 main .w38-contact-band { padding-block: 48px; }
  body.world38 main .w38-contact-band > .w38-wrap { display: block; }
  body.world38 main .w38-contact-band h2 { font-size: 30px; }
  body.world38 main .w38-contact-band p:not(.w38-eyebrow) { font-size: 16px; line-height: 1.8; }

  /* About: the original portrait opens the page, with the introduction below. */
  body.world38 main .w46-about .w46-about-opening { padding-block: 0 44px; gap: 32px; }
  body.world38 main .w46-about .w46-centre-photo { grid-row: 1; width: calc(100% + 2 * var(--w48-gutter)); max-width: none; margin-inline: calc(-1 * var(--w48-gutter)); }
  body.world38 main .w46-about .w38s-about-intro { grid-row: 2; }
  body.world38 main .w46-about .w38s-about-intro h1 { font-size: 36px; margin-bottom: 24px; }
  body.world38 main .w46-about .w38s-about-lead > p { font-size: 16px; line-height: 1.8; }
  body.world38 main .w38-about :is(.a29-chapters, .a29-tab-list) { gap: 24px; scroll-padding-inline: var(--w48-gutter); }
  body.world38 main .w38-about :is(.a29-chapters a, .a29-tab-list button) { min-height: 48px; font-size: 15px; }
  body.world38 main .w38-about :is(.a29-approach-tabs, .a29-experience, .a29-section-heading) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.world38 main .w38-about .a29-approach-copy p { font-size: 16px; line-height: 1.8; }
  body.world38 main .w38-about :is(.a29-lihe-photo, .a29-factory-photo, .a29-workshop .a29-tab-panel figure) { width: calc(100% + 2 * var(--w48-gutter)); margin-inline: calc(-1 * var(--w48-gutter)); }
  body.world38 main .w38-about :is(.a29-lihe-photo img, .a29-factory-photo img, .a29-workshop .a29-tab-panel figure img) { width: 100%; height: auto; max-height: none; object-fit: contain; }
  body.world38 main .w38-about .a29-service-steps { grid-template-columns: minmax(0, 1fr); }
  body.world38 main .w38-about .a29-contact { display: block; }
  body.world38 main .w38-about .a29-contact > div { flex-direction: column; margin-top: 24px; }

  /* Materials and contact use the same mobile reading scale. */
  body.world38 main .w38-support :is(.w38s-page-intro, .configuration-hero, .configuration-heading, .configuration-split, .configuration-grid, .configuration-wood-grid, .configuration-glass-grid, .configuration-hardware-grid, .configuration-timber-finish, .configuration-thermal-study, .configuration-warm-edge, .visit-grid, .contact-grid) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.world38 main .w38-support p,
  body.world38 main .w38-configuration .configuration-copy :is(p, ul) { font-size: 16px; line-height: 1.8; }
  body.world38 main .w38-support.w38-configuration .configuration-hero .configuration-lead { font-size: 16px; line-height: 1.8; }
  body.world38 main .w38-configuration .configuration-cover { width: calc(100% + 2 * var(--w48-gutter)); margin-inline: calc(-1 * var(--w48-gutter)); }
  body.world38 main .w38-configuration .configuration-cover img { width: 100%; height: auto; max-height: none; object-fit: contain; }
  body.world38 main .w38-configuration .configuration-index { grid-template-columns: minmax(0, 1fr); }
  body.world38 main .w38-configuration .configuration-index > a { min-height: 100px; padding: 20px 0; border-inline: 0; }
  body.world38 main .w38-configuration .configuration-index > a:last-child { grid-column: auto; min-height: 100px; }
  body.world38 main .w38-configuration .configuration-index strong { font-size: 20px; line-height: 1.4; }
  body.world38 main .w38-configuration .configuration-index .c6-jump-desc { font-size: 14px; line-height: 1.7; }
  body.world38 main .w38-configuration .configuration-tab-list { flex-wrap: wrap; gap: 8px 22px; }
  body.world38 main .w38-configuration .configuration-tab-list button { min-height: 48px; font-size: 15px; }
  body.world38 main .w38-configuration .configuration-photo { max-width: none; }
  body.world38 main .w38-configuration .configuration-photo img { width: 100%; height: auto; max-height: none; object-fit: contain; }
  body.world38 main .w38-configuration .configuration-pair { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.world38 main .w38-configuration .configuration-details > summary { min-height: 56px; font-size: 18px; }
  body.world38 main .w38-configuration :is(.configuration-metrics dt, .configuration-table th) { font-size: 13px; line-height: 1.6; }
  body.world38 main .w38-configuration :is(.configuration-metrics dd, .configuration-table td) { font-size: 15px; line-height: 1.7; }
  body.world38 main .w38-contact .visit-grid > figure { width: calc(100% + 2 * var(--w48-gutter)); margin-inline: calc(-1 * var(--w48-gutter)); }
  body.world38 main .w38-contact .visit-grid > figure > img { width: 100%; height: auto; max-height: none; object-fit: contain; }
  body.world38 main .w38-search-dialog { width: calc(100% - 24px); padding: 22px; }
  body.world38 .w38-search-field input { font-size: 16px; min-height: 44px; }
  body.world38 .w38-search-results :is(span, p) { font-size: 13px; }
  body.world38 .w38-search-results h3 { font-size: 22px; }

  /* Useful footer links remain comfortably readable. */
  body.world38 .w38-footer { padding: 44px var(--w48-gutter) 28px; }
  body.world38 .w38-footer .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.world38 .w38-footer .footer-statement { display: block; grid-column: auto; }
  body.world38 .w38-footer .footer-statement p { margin-top: 22px; font-size: 23px; }
  body.world38 .w38-footer h2 { font-size: 14px; margin-bottom: 12px; }
  body.world38 .w38-footer .footer-grid > div > a:not(.brand) { display: flex; align-items: center; min-height: 44px; margin-top: 0; font-size: 15px; line-height: 1.6; }
  body.world38 .w38-footer p { font-size: 14px; line-height: 1.8; }
  body.world38 .w38-footer .footer-address { grid-column: auto; }
  body.world38 .w38-footer .footer-bottom { display: flex; align-items: flex-start; flex-direction: column; gap: 15px; font-size: 12px; line-height: 1.65; }
  body.world38 .w38-footer .footer-bottom a { min-height: 36px; }
  body.world38 .w45-add-system { font-size: 14px; min-height: 46px; }
  body.world38 .w45-shortlist { inset-inline: 12px; padding: 14px; }
  body.world38 .w45-shortlist-title strong { font-size: 12px; }
  body.world38 .w45-shortlist-chips a { font-size: 13px; padding-block: 10px; }
  body.world38 .w45-shortlist-chips button { min-height: 40px; width: 36px; }
  body.world38 .w45-shortlist-actions :is(button, a) { min-height: 44px; font-size: 13px; }
  body.world38 .w45-shortlist-actions button[data-w45-clear] { font-size: 12px; }
  body.world38 .w45-comparison-table { font-size: 14px; }
}

@media (max-width: 360px) {
  :root { --w48-gutter: 18px; }
  body.world38 .w38-brand { width: 116px; flex-basis: 116px; }
  body.world38 main > .w46-home .w38-hero-copy h1 { font-size: 33px; }
}