/* Shared typography and spacing for public portfolio pages (both languages). */
:root {
  --type-display: clamp(44px, 6.3vw, 90px);
  --type-section: clamp(32px, 4.1vw, 60px);
  --type-subheading: clamp(24px, 2.2vw, 32px);
  --type-body: clamp(18px, 1.6vw, 23px);
  --type-small: 16px;
  --tracking-heading: -.025em;
  --space-section: clamp(56px, 7vw, 100px);
  --space-content: clamp(24px, 3vw, 40px);
  --space-heading: 24px;
  --space-grid: 24px;
}
body {letter-spacing:0;line-height:1.5}
p,li,button,a,figcaption,span {letter-spacing:0}
h1,h2,h3,h4 {line-height:1.1;letter-spacing:var(--tracking-heading);font-weight:500}
.intro h1,.wake-intro h1,.ar-intro h1,.case-intro h1 {font-size:var(--type-display);line-height:1.1;letter-spacing:var(--tracking-heading);font-weight:500}
body h2,.ar-case h2,.wake-about h2,.oh-section>h2,.oh-section-head h2,.case-section h2,.case-result h2 {font-size:var(--type-section);line-height:1.1;letter-spacing:var(--tracking-heading);font-weight:500}
body h3,.ar-case h3,.ar-curated-copy h3,.background-grid h3,.jobs h3,.landing-notes h3 {font-size:var(--type-subheading);line-height:1.1;letter-spacing:var(--tracking-heading);font-weight:500}
.project h3,html[lang="ru"] .project h3 {font-size:clamp(20px,2.2vw,28px);line-height:1.1;letter-spacing:0}
.intro-copy p:last-child,.about-heading p,.jobs p:not(.role),.background-grid p,.cap-grid ul {font-size:var(--type-small);line-height:1.5;letter-spacing:0}
.about-heading .lead,.jobs .role {font-size:var(--type-body);line-height:1.5}
.manifesto p {line-height:1.2;letter-spacing:var(--tracking-heading)}
.cap-grid h3 {font-size:18px;letter-spacing:0;line-height:1.1}
.date {font-size:var(--type-subheading);line-height:1.1;letter-spacing:var(--tracking-heading)}
.date small {letter-spacing:0;line-height:1.5}
/* Body copy has one scale, regardless of the project or the section's layout. */
.ohana-case p,.ar-case p,.wake-intro p,.wake-about p,.oh-brief p,.oh-section-head p,.oh-web .oh-section-head p,.case-lead,.case-brief p,.case-section-heading p,.case-result p,.landing-notes p,.campaign-description p {
  font-size:var(--type-body);line-height:1.5;letter-spacing:0;font-weight:400;
}
.oh-brief h2,.case-brief h2 {font-size:var(--type-subheading);line-height:1.1;letter-spacing:var(--tracking-heading);font-weight:500;color:var(--gold);margin:0 0 var(--space-heading)}
.oh-intro,.wake-intro,.ar-intro,.case-intro {padding-top:var(--space-section);padding-bottom:var(--space-content)}
.wake-intro,.oh-intro {gap:var(--space-content);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.wake-intro h1 {overflow-wrap:normal}
.ar-intro h1 {margin:0 0 var(--space-heading)}
.case-lead {margin-top:var(--space-heading);max-width:960px}
.oh-brief,.case-brief {padding-block:var(--space-section);gap:var(--space-content)}
.wake-about {padding-top:var(--space-section);gap:var(--space-content)}
.wake-result {padding-top:0;padding-bottom:var(--space-section)}
.oh-section {padding-top:0;padding-bottom:var(--space-section)}
.oh-visuals,.ar-section,.case-section {padding-top:var(--space-section)}
.oh-section>h2,.ar-case h2 {margin-bottom:var(--space-heading)}
.oh-section-head {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-content);align-items:start;margin-bottom:var(--space-content)}
.oh-section-head h2,.oh-web .oh-section-head h2 {margin:0}
.oh-section-head p {max-width:100%;margin:0}
.wake-about h2 {margin:0}
.oh-brand-grid,.wake-art-grid,.case-gallery {gap:var(--space-grid)}
.ar-columns,.ar-curated-row,.ar-edge-grid,.ar-wire-comparison,.ar-3d-stages {gap:var(--space-content)}
.ar-curated-row,.ar-3d-art,.ar-3d-stages,.ar-scores,.ar-options {margin-top:var(--space-content)}
.ar-case h3 {margin-bottom:16px}
.ar-role {margin-top:var(--space-content);padding-block:var(--space-content)}
.ar-role>p+p,.ar-columns p+p {margin-top:24px}
.ar-prototype {padding-top:var(--space-section)}
.ar-case .oh-footer {margin-top:var(--space-section)}
.oh-footer,.case-footer {padding-block:var(--space-content);gap:24px}
.case-section-heading {margin-bottom:var(--space-content);gap:24px}
.case-meta {margin-top:var(--space-content);gap:24px}
.case-image figcaption,.ar-screen-row figcaption,.oh-story-note {font-size:var(--type-small);line-height:1.5;letter-spacing:0}
.case-eyebrow,.ar-case .ar-eyebrow,.campaign-index,.ar-index {letter-spacing:0;line-height:1.5}
/* Smaller supporting UI retains its scale, including the existing navigation. */
.oh-dialog-head h2,.dialog-top h2,.ar-case .ar-flow-toolbar h2 {font-size:var(--type-subheading);line-height:1.1;letter-spacing:var(--tracking-heading)}
.portfolio-button,.contact-button,.ar-prototype-button {line-height:1.1;letter-spacing:0;gap:8px}
.oh-header>a.portfolio-button,.case-header .portfolio-button {line-height:1.1}
.section-head {margin-bottom:var(--space-content)}
.cases,.about,.experience,.background {padding-top:var(--space-section);padding-bottom:var(--space-section)}
.cap-grid,.jobs,.background-grid,.portrait {margin-top:var(--space-content)}
.jobs {gap:var(--space-content)}
.about-heading,.cap-grid {gap:var(--space-content)}
.cap-grid h3,.background-grid h3 {margin-bottom:16px}
@media(max-width:760px) {
  :root {--space-heading:20px;--space-grid:16px}
  .wake-intro,.oh-intro,.wake-about,.oh-brief,.oh-section-head {grid-template-columns:minmax(0,1fr);gap:var(--space-heading)}
  .oh-section-head {margin-bottom:var(--space-content)}
  .oh-brief {gap:32px}
  .wake-intro h1 {font-size:var(--type-display)}
  .project h3,html[lang="ru"] .project h3 {font-size:24px}
}
@media print { .cases,.about,.experience,.background{padding-block:20px} }