/* Page compositions: common scale, twelve tracks, responsive content order. */
.page-intro { padding-top: clamp(3.5rem, 7vw, 7.5rem); padding-bottom: clamp(3rem, 5vw, 5.5rem); }
.page-intro h1 { white-space: pre-line; max-width: 16em; }
.intro-heading { display: flex; align-items: baseline; gap: 1rem; }
.count { color: var(--color-muted); font-size: 1.25rem; }
.intro-description { font-size: var(--text-lead); line-height: 1.65; max-width: 42em; margin-top: var(--space-5); }
.home-hero { position: relative; min-height: 35rem; height: calc(100svh - var(--header-height)); max-height: 72rem; overflow: hidden; color: white; background: #090a0d; }
.hero-slide { position: absolute; inset: 0; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.home-hero::after,.project-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 40%,#0009 100%); pointer-events: none; }
.hero-content { position: absolute; z-index: 1; bottom: 3.5rem; left: var(--page-gutter); right: var(--page-gutter); }
.hero-content h1 { font-size: var(--text-hero); line-height: 1.05; font-weight: 400; text-wrap: balance; }
.hero-content p { margin-top: var(--space-5); font-size: 1.125rem; line-height: 1.7; }
.hero-controls { position: absolute; bottom: 2rem; right: var(--page-gutter); z-index: 2; display: flex; align-items: center; gap: .6rem; background: #151515b3; padding: .15rem .5rem; }
.hero-controls button { min-width: 44px; min-height: 44px; display: grid; place-items: center; font-size: var(--text-min); }
.hero-controls span { font-size: var(--text-min); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-controls [data-slide-pause] { padding-inline: .5rem; border-left: 1px solid #ffffff40; }
.work-tools { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; padding-bottom: var(--space-6); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-line); }
.studio-image { aspect-ratio: 2.25; }
.studio-image img { width: 100%; height: 100%; object-fit: cover; }
.studio-summary h2 { font-size: clamp(1.375rem,2vw,2rem); }
.studio-summary p+p { margin-top: var(--space-6); }
.history-year { border-top: 1px solid var(--color-line); }
.history-year:last-child { border-bottom: 1px solid var(--color-line); }
.history-year summary { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--grid-gap); cursor: pointer; list-style: none; padding-block: 1.5rem; align-items: baseline; }
.history-year summary::-webkit-details-marker { display: none; }
.history-year summary > :first-child { grid-column: span 4; font-size: 1.75rem; }
.history-count { grid-column: span 7; font-size: var(--text-caption); color: var(--color-muted); }
.details-symbol { justify-self: end; font-size: 1.5rem; }
.history-year[open] .details-symbol { font-size: 0; }
.history-year[open] .details-symbol::after { content: "−"; font-size: 1.5rem; }
.history-year ul { margin: 0 0 2.5rem 33.8%; padding-left: 0; list-style: none; max-width: 60rem; }
.history-year li { padding-bottom: 1rem; line-height: 1.8; }
.update-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.home-update h2 { font-size: var(--text-lead); line-height: 1.5; }
.home-update h2+p { margin-block: var(--space-5); }
.project-hero { position: relative; min-height: 32rem; height: min(80svh,56rem); background: #111; color: white; }
.project-hero > img,.project-hero > video { width: 100%; height: 100%; object-fit: cover; }
.project-hero-title { position: absolute; z-index: 1; left: var(--page-gutter); right: var(--page-gutter); bottom: var(--space-7); max-width: 70rem; }
.project-hero-title > p { font-size: clamp(1.0625rem,1rem + 1vw,1.75rem); line-height: 1.5; margin-bottom: 1rem; }
.project-hero-title h1 { font-size: clamp(2.25rem,1.2rem + 3.5vw,5rem); line-height: 1.2; }
.project-overview { padding-block: var(--section-space); }
.project-facts { display: flex; flex-direction: column; gap: var(--space-6); }
.project-facts h2 { font-size: var(--text-caption); color: var(--color-muted); line-height: 1.5; margin-bottom: .5rem; }
.project-facts p { font-size: var(--text-body); }
.project-description { max-width: 70rem; }
.project-description > p+p { margin-top: var(--space-5); }
.project-credits { margin-top: var(--space-7); color: var(--color-muted); font-size: var(--text-caption); line-height: 1.8; }
.case-gallery { row-gap: var(--space-6); align-items: start; }
.case-image { display: block; width: 100%; text-align: left; }
.case-image img { width: 100%; height: auto; }
.case-image-1 { margin-top: 0; }
.project-pagination { display: flex; justify-content: space-between; gap: 1rem; margin-block: var(--section-space); }
.project-pagination a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: 1rem; }
.news-list { display: grid; row-gap: var(--space-8); }
.news-row { padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-line); align-items: start; }
.news-image img { aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.news-row h2 { font-size: var(--text-lead); line-height: 1.45; margin-bottom: var(--space-5); }
.news-row .text-link { margin-top: var(--space-5); }
.journal-tools { display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-line); }
.journal-tools .search-field { width: min(20rem, 50%); }
.current-tag { display: inline-block; color: var(--color-accent); margin-left: 1.5rem; }
.search-status { min-height: 2.5rem; padding-block: .5rem; }
.journal-grid { column-gap: var(--grid-gap); row-gap: var(--space-8); }
.journal-image { aspect-ratio: 16/10; margin-bottom: 1.5rem; }
.journal-image img { width: 100%; height: 100%; object-fit: cover; }
.journal-card h2 { font-size: var(--text-lead); margin-block: .75rem; }
.journal-card > a > p:last-child { max-width: 35em; }
.journal-actions { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-5); border-top: 1px solid var(--color-line); padding-top: .75rem; font-size: var(--text-caption); }
.journal-actions button { min-width: 44px; min-height: 44px; }
.journal-actions [aria-pressed=true] { color: var(--color-accent); }
.rich-content { max-width: 64rem; line-height: var(--line-body); }
.rich-content > *+* { margin-top: var(--space-5); }
.rich-content h2 { font-size: var(--text-lead); margin-top: var(--space-8); }
.rich-content h3,.rich-content h4 { font-size: 1.3125rem; margin-top: var(--space-7); }
.rich-content p,.rich-content li { font-size: var(--text-body); }
.rich-content img { width: 100%; height: auto; margin-block: var(--space-7); }
.rich-content a { text-decoration: underline; text-underline-offset: .2em; }
.rich-content > a:has(img) { display: block; }
.rich-content video { width: 100%; }
.rich-content blockquote { padding: var(--space-6); background: var(--color-soft); }
.article-footer { max-width: 64rem; display: flex; justify-content: space-between; gap: 1rem; padding-top: var(--space-8); }
.contact-layout { padding-bottom: var(--space-7); }
.contact-info { display: flex; flex-direction: column; gap: var(--space-8); }
.contact-info h2 { font-size: var(--text-caption); color: var(--color-muted); margin-bottom: 1rem; }
.contact-info p+p { margin-top: 1rem; color: var(--color-muted); }
.contact-email { font-size: var(--text-lead); color: var(--color-accent); overflow-wrap: anywhere; }
.contact-form label { display: flex; flex-direction: column; gap: .5rem; font-size: var(--text-body); }
.contact-form label > span { display: none; }
.contact-form input,.contact-form textarea { border: 0; border-bottom: 1px solid var(--color-line); background: var(--color-soft); padding: .9rem 1rem; font-size: max(16px,var(--text-body)); line-height: 1.65; }
.contact-form ::placeholder { color: var(--color-muted); opacity: 1; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6) var(--space-5); margin-bottom: var(--space-6); }
.form-note { font-size: var(--text-caption); line-height: 1.75; color: var(--color-muted); margin-block: var(--space-5); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.form-feedback { margin-top: var(--space-5); font-size: var(--text-caption); }
.form-feedback.is-error { color: var(--color-error); }
.system-page > section { padding-block: var(--space-7); border-top: 1px solid var(--color-line); }
.system-page h2 { font-size: 1.5rem; margin-bottom: 2rem; }
.system-page p+p { margin-top: 1.5rem; }
.swatch-grid,.system-components { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.swatch { padding: var(--space-5); min-height: 10rem; min-width: 12rem; display: flex; align-items: end; font-size: var(--text-caption); }
.swatch-paper { background: var(--color-paper); border: 1px solid var(--color-line); }
.swatch-ink { background: var(--color-ink); color: white; }
.swatch-accent { background: var(--color-accent); color: white; }
.swatch-muted { background: var(--color-muted); color: white; }
.system-page .search-field { max-width: 24rem; margin-top: 2rem; }
.all-pages-list { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1rem; }
.all-pages-list li { grid-column: span 6; padding: 1rem; border-bottom: 1px solid var(--color-line); }
@media (max-width: 1000px) {
  .hero-content { bottom: 6rem; }
  .hero-controls { bottom: 1.5rem; }
  .history-year ul { margin-left: 0; }
}
@media (max-width: 700px) {
  .home-hero { height: calc(85svh - var(--header-height)); min-height: 32rem; max-height: 48rem; }
  .hero-content { bottom: 6.5rem; }
  .hero-content h1 { font-size: clamp(2.2rem,7.2vw,3.6rem); line-height: 1.12; }
  .hero-content h1 br { display: none; }
  .hero-content p { font-size: 1.0625rem; max-width: 19em; }
  .hero-controls { left: var(--page-gutter); right: auto; }
  .home-intro { padding-block: var(--space-7) var(--space-8); }
  .home-intro .statement { font-size: 1.875rem; }
  .work-tools { flex-direction: column; gap: .5rem; }
  .studio-image { aspect-ratio: 4/3; }
  .project-hero { height: 65svh; min-height: 29rem; }
  .project-hero-title { bottom: 2rem; }
  .project-hero-title h1 { font-size: clamp(2rem,6vw,3rem); line-height: 1.3; }
  .project-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .project-facts > .text-link { grid-column: span 2; }
  .project-description { border-top: 1px solid var(--color-line); padding-top: var(--space-6); }
  .case-gallery { row-gap: 1rem; }
  .news-row { row-gap: var(--space-5); }
  .contact-info { gap: var(--space-6); }
  .contact-form { margin-top: var(--space-6); }
  .all-pages-list li { grid-column: span 12; }
}
@media (max-width: 600px) {
  .journal-tools { align-items: start; flex-direction: column; gap: 1rem; }
  .journal-tools .search-field { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; }
  .form-actions .button { width: 100%; }
  .project-pagination { flex-wrap: wrap; }
  .project-pagination a { font-size: var(--text-caption); }
  .page-intro .eyebrow { margin-bottom: 1rem; }
  .page-intro h1 { font-size: 2.5rem; }
  .news-list { row-gap: var(--space-7); }
  .news-row { padding-bottom: var(--space-7); }
  .history-year summary > :first-child { font-size: 1.5rem; }
}