/* Reference-aligned type scale: Instrument Serif for display, Inter for UI. */
.wordmark{font:italic 400 22px/35.2px var(--serif);letter-spacing:normal}
.wordmark span{color:var(--blue);font-style:normal}
h1,h2,h3{font-weight:400;letter-spacing:normal}
.hero-copy h1{font-size:clamp(56px,8vw,81.92px);line-height:.92;letter-spacing:-.01em}
h2{font-size:clamp(40px,5vw,51.2px);line-height:1}
h3{font-size:clamp(27px,2.8vw,34px);line-height:.98}
.pronunciation{font-size:15px;line-height:24px;letter-spacing:normal}
.ticker{font-size:22px;line-height:35.2px;letter-spacing:normal}
.site-header{padding-top:2rem;padding-bottom:2rem}
.home-hero{min-height:0;padding-top:4rem;padding-bottom:4.5rem}
.hero-portrait img{height:500px}
.section{padding-top:clamp(4rem,7vw,6.5rem);padding-bottom:clamp(4rem,7vw,6.5rem)}
.feature,.card{min-height:410px}
.feature .card-image,.card-image{height:190px}
.journal-cards .card{min-height:410px}
.callout{margin-bottom:0}
footer{padding-top:3.5rem;padding-bottom:7rem}

@media(max-width:980px){
  .home-hero{gap:clamp(2rem,5vw,3.5rem)}
  .hero-portrait{max-width:370px}
  .hero-portrait img{height:465px}
  .feature-grid,.cards{grid-template-columns:repeat(2,1fr)}
  .feature,.card{min-height:400px}
}

@media(max-width:820px){
  .site-header{padding-top:1.35rem;padding-bottom:1.35rem}
  .home-hero{grid-template-columns:1fr;gap:2.5rem;padding-top:2.8rem}
  .hero-copy{max-width:620px}
  .hero-copy h1{font-size:clamp(54px,14vw,72px);line-height:.9}
  .hero-portrait{justify-self:start;width:min(100%,410px);margin:0 auto}
  .hero-portrait img{height:min(118vw,510px)}
  .landing-intro{grid-template-columns:1fr;gap:2rem}
  .intro-photo{max-width:560px}
  .intro-photo img{height:280px}
  .section-heading,.journal-band{align-items:flex-start;flex-direction:column}
  .section-heading>a,.journal-band>a{margin-bottom:0}
  .callout-grid{grid-template-columns:1fr;gap:2rem}
  .callout-grid img{max-width:520px;height:280px}
}

@media(max-width:580px){
  main{padding-left:1.25rem;padding-right:1.25rem}
  .site-header{padding-left:1.25rem;padding-right:1.25rem}
  .wordmark{font-size:20px;line-height:30px}
  .header-tools{gap:1.1rem}
  .hero-copy h1{font-size:clamp(52px,16vw,64px);line-height:.9}
  h2{font-size:clamp(38px,12vw,46px);line-height:.96}
  h3{font-size:30px;line-height:.98}
  .section-number{font-size:10px}
  .lede{font-size:16px}
  .hero-portrait{width:min(88%,360px)}
  .hero-portrait img{height:430px;padding:8px}
  .tag-row span{font-size:12px;padding:.32rem .6rem}
  .actions{gap:1rem;flex-wrap:wrap}
  .ticker{margin-left:-1.25rem;margin-right:-1.25rem;padding-left:1.25rem;font-size:20px}
  .section{padding-top:4rem;padding-bottom:4rem}
  .feature-grid,.cards{grid-template-columns:1fr;margin-top:2rem}
  .feature,.card,.journal-cards .card{min-height:385px}
  .feature .card-image,.card-image{height:180px}
  .callout{padding:2rem 1.5rem}
  .callout-grid img{height:220px}
  footer{padding:3rem 1.25rem 6.3rem}
  .dock{bottom:.7rem;width:calc(100vw - 1rem);padding:.38rem;overflow-x:auto}
  .dock a{padding:.52rem .68rem;font-size:12px}
}

/* Reference-sized desktop type: the original site is deliberately restrained. */
.home-hero{min-height:0;padding-block:clamp(3.75rem,6vw,5.5rem)}
.hero-copy h1{font-size:clamp(3.9rem,8vw,5.12rem)}
h1{font-size:clamp(3.25rem,5vw,4.25rem)}
h2{font-size:clamp(2.35rem,5vw,3.2rem)}
h3{font-size:clamp(1.55rem,2.25vw,2rem)}
.section{padding-block:clamp(4rem,7vw,6.5rem)}
.landing-intro{gap:clamp(2rem,6vw,5rem)}
.hero-portrait{max-width:390px}
.hero-portrait img{height:510px}
.feature,.card{min-height:410px}
.feature .card-image{height:205px}
.card-image{height:180px}
.journal-cards .card{min-height:390px}
.callout-grid{gap:clamp(2rem,5vw,4rem)}
.callout-grid img{height:280px}

@media (max-width: 900px){
  .home-hero{gap:2.5rem}
  .hero-portrait{max-width:330px}
  .hero-portrait img{height:440px}
  .landing-intro{grid-template-columns:.85fr 1fr}
  .feature-grid,.cards{grid-template-columns:repeat(2,1fr)}
  .feature-grid .feature:last-child,.journal-cards .card:last-child{grid-column:1/-1}
}

@media (max-width: 680px){
  .site-header{padding:1.15rem var(--side)}
  .header-tools{gap:1.1rem}
  .home-hero{grid-template-columns:1fr;gap:2.75rem;padding-block:2.5rem 3.5rem}
  .hero-copy h1{font-size:clamp(3.65rem,16vw,4.75rem);line-height:.9}
  h1{font-size:clamp(3rem,13vw,3.8rem)}
  h2{font-size:clamp(2.55rem,12vw,3.4rem);line-height:.94}
  h3{font-size:1.85rem}
  .lede{font-size:1rem;line-height:1.55}
  .hero-portrait{width:min(84vw,355px);justify-self:center}
  .hero-portrait img{height:440px}
  .ticker{font-size:1.3rem}
  .section{padding-block:4rem}
  .landing-intro{grid-template-columns:1fr;gap:1.5rem}
  .landing-intro .intro-photo{order:2}
  .intro-photo img{height:250px}
  .section-heading,.journal-band{gap:1rem}
  .feature-grid,.cards{grid-template-columns:1fr}
  .feature-grid .feature:last-child,.journal-cards .card:last-child{grid-column:auto}
  .feature,.card,.journal-cards .card{min-height:0}
  .feature .card-image,.card-image{height:220px}
  .card-copy{padding:1.2rem 1.2rem 3.7rem}
  .callout{margin-bottom:3.5rem;padding:2rem 1.5rem}
  .callout-grid{grid-template-columns:1fr;gap:2rem}
  .callout-grid img{height:240px}
  footer{padding-block:3rem 6.5rem}
}