:root{--ink:#18262f;--paper:#f7f3eb;--aqua:#2a9d8f;--coral:#fe4a55;--sand:#e7d8bd}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.65 Georgia,serif}header{display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:2rem;align-items:center;padding:1.4rem clamp(1.25rem,5vw,5rem);border-top:8px solid var(--coral);background:#fff}.brand img{display:block;width:190px;height:auto}nav{display:flex;gap:1.25rem;flex-wrap:wrap}a{color:#116d67;text-decoration-thickness:.12em;text-underline-offset:.16em}nav a{text-decoration:none;font:700 .8rem/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}nav a:hover,nav a:focus-visible{color:var(--coral)}main{max-width:920px;margin:0 auto;padding:clamp(3rem,10vw,8rem) clamp(1.25rem,5vw,5rem);position:relative}main:before{content:"";position:absolute;inset:2rem 1rem auto auto;width:150px;height:150px;border:20px solid var(--sand);border-radius:50%;z-index:-1}.eyebrow{font:700 .78rem/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8e3d40}h1{font:800 clamp(2.7rem,7vw,5.6rem)/.92 Arial,sans-serif;letter-spacing:-.06em;max-width:14ch;margin:.4rem 0 3rem}h2{font:800 1.7rem/1.12 Arial,sans-serif;margin:3rem 0 1rem}.article-image{display:block;max-width:100%;width:100%;max-height:470px;object-fit:cover;margin:2.5rem 0;border:10px solid #fff;box-shadow:14px 14px 0 var(--aqua)}.disclosure{padding:1rem 1.2rem;background:#dff2eb;border-left:6px solid var(--aqua);font:700 .95rem/1.5 Arial,sans-serif}footer{display:grid;grid-template-columns:80px 1fr auto;gap:1.5rem;align-items:center;padding:2.5rem clamp(1.25rem,5vw,5rem);background:var(--ink);color:#fff}footer img{width:68px;height:68px;object-fit:contain}footer p{margin:.2rem 0}footer nav a{color:#fff}.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:1rem;z-index:3}@media(max-width:650px){header,footer{grid-template-columns:1fr}header{gap:1rem}h1{letter-spacing:-.07em}footer nav{gap:1rem}}

/* Home hero: TypeUI atlas elevated as a light typographic poster. */
.home-hero{
  --spring-snappy:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067 22.5%,1.089 26%,1.079 30.3%,1.049 36%,1.024 42.6%,1.011 50.3%,1.004 59.2%,1.001 69.3%,1);
  --ease-snap:cubic-bezier(.22,1,.36,1);
  width:min(100%,1600px);
  max-width:none;
  min-height:calc(100dvh - 116px);
  padding:clamp(3rem,6vh,5.5rem) clamp(1.25rem,5vw,5rem) clamp(2.5rem,5vh,4.5rem);
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:start;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 78% 30%,rgba(231,216,189,.72) 0 9%,transparent 9.2%),
    radial-gradient(ellipse 45% 55% at 76% 30%,rgba(255,255,255,.55),transparent 70%);
}
.home-hero:before{
  inset:clamp(2.5rem,8vh,7rem) clamp(-4rem,-2vw,-1rem) auto auto;
  width:clamp(15rem,34vw,34rem);
  height:clamp(15rem,34vw,34rem);
  border:clamp(2rem,5vw,5.5rem) solid rgba(231,216,189,.72);
  z-index:-1;
  transform:rotate(-8deg);
  transition:transform .7s var(--spring-snappy);
}
.home-hero .eyebrow{margin:0 0 clamp(2rem,6vh,5rem)}
.home-hero h1{
  align-self:center;
  font-size:clamp(4rem,9.25vw,10.5rem);
  line-height:.82;
  letter-spacing:-.078em;
  max-width:10.8ch;
  margin:0;
  text-wrap:balance;
}
.home-hero h1 span{display:block}
.home-hero .hero-accent{
  color:#116d67;
  transform-origin:left center;
  transition:transform .45s var(--ease-snap),color .3s var(--ease-snap);
}
.home-hero h1:hover .hero-accent{transform:translateX(.035em);color:#0d5d58}
.hero-copy{
  justify-self:end;
  width:min(100%,58rem);
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(14rem,1fr);
  gap:clamp(1.5rem,4vw,4.5rem);
  align-items:start;
  border-top:1px solid rgba(24,38,47,.25);
  padding-top:1rem;
}
.hero-copy p{margin:0;font-size:clamp(.92rem,1.25vw,1.08rem);line-height:1.55}
.hero-copy p:last-child{font-family:Arial,sans-serif;font-weight:700;color:#116d67}
.hero-enter{
  animation:hero-enter .55s var(--spring-snappy) both;
  will-change:transform,opacity;
}
.hero-enter-1{animation-delay:0ms}
.hero-enter-2{animation-delay:100ms}
.hero-enter-3{animation-delay:220ms}
@keyframes hero-enter{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@media (hover:hover){
  .home-hero:hover:before{transform:rotate(0deg) scale(1.015)}
}
@media(max-width:800px){
  .home-hero{
    min-height:calc(100dvh - 154px);
    grid-template-rows:auto auto 1fr;
    gap:clamp(2rem,6vh,4rem);
    padding-top:2.5rem;
    background:radial-gradient(circle at 92% 27%,rgba(231,216,189,.72) 0 12%,transparent 12.2%);
  }
  .home-hero:before{
    inset:4.5rem -7rem auto auto;
    width:19rem;
    height:19rem;
    border-width:3rem;
  }
  .home-hero .eyebrow{margin:0}
  .home-hero h1{align-self:start;font-size:clamp(3.5rem,15vw,7rem);line-height:.84;max-width:9ch}
  .hero-copy{align-self:end;grid-template-columns:1fr;gap:1rem}
}
@media(max-width:650px){
  .home-hero{min-height:calc(100dvh - 183px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-enter{animation:hero-fade .18s cubic-bezier(.16,1,.3,1) both;animation-delay:0ms;will-change:auto}
  .home-hero:before,.home-hero .hero-accent{transition:none}
  .home-hero:hover:before,.home-hero h1:hover .hero-accent{transform:none}
}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}