/* Zeseso — tessera-modules */

:root{
  --bg:#f5f4f0;
  --bg-alt:#e2ded4;
  --dark:#14456b;
  --ink:#1c1e20;
  --muted:#6a6d6e;
  --acc:#c2522f;
  --acc2:#1d6b8f;
  --seam:4px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */

.site-head{background:var(--bg);border-bottom:var(--seam) solid var(--bg-alt)}
.head-in{
  max-width:1180px;margin:0 auto;padding:20px 24px;
  display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;justify-content:space-between;
}
.brand{font-size:26px;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--acc)}
.brand span{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:.04em}

.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.site-nav a{
  font-family:var(--sans);font-size:13px;color:var(--ink);
  text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--acc);color:var(--acc)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--acc2)}

/* ---------- mosaic grid ---------- */

.mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(78px,auto);
  gap:var(--seam);
}
.m{padding:28px 30px;background:var(--bg-alt)}
.m > :first-child{margin-top:0}
.m > :last-child{margin-bottom:0}

.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c12{grid-column:1/-1}
.r2{grid-row:span 2}
.r3{grid-row:span 3}

.tile{padding:0}
.tile-a{background:var(--acc)}
.tile-b{background:var(--acc2)}
.tile-c{background:var(--dark)}
.tile-d{background:var(--bg-alt)}

/* ---------- sections ---------- */

.band{padding:96px 0}
.band-alt{background:var(--bg-alt)}
.band-alt .m{background:var(--bg)}
.band-dark{background:var(--dark);color:var(--bg)}
.band-dark .m{background:rgba(245,244,240,.07)}
.band-dark .caption,.band-dark .lead-note{color:#c9d6e2}
.band-dark a{color:#f0b39c}

.sep{
  height:24px;
  background:repeating-linear-gradient(to right,
    var(--acc) 0 24px, transparent 24px 28px,
    var(--acc2) 28px 52px, transparent 52px 56px,
    var(--dark) 56px 80px, transparent 80px 112px,
    var(--acc) 112px 136px, transparent 136px 168px);
}

/* ---------- hero ---------- */

.hero{padding:56px 0 0}
.hero .mosaic{grid-auto-rows:auto}
.hero-h1{grid-column:1/span 8;background:var(--bg-alt);display:flex;align-items:center}
.hero-intro{grid-column:9/span 4}
.hero-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--seam)}
.hero-strip div{height:24px}
.hero-left{grid-column:1/span 2;padding:0}
.hero-img{grid-column:3/span 6;padding:0;background:var(--bg-alt)}
.hero-img img{width:100%}
.hero-cap{grid-column:9/span 4}

/* ---------- typography ---------- */

h1{
  font-family:var(--serif);
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.14;
  margin:0;
  font-weight:400;
  letter-spacing:-.01em;
}
h2{
  font-size:clamp(23px,2.5vw,31px);
  line-height:1.25;
  font-weight:400;
  margin:0 0 18px;
}
h3{
  font-style:italic;
  font-size:21px;
  font-weight:400;
  margin:28px 0 10px;
}
p{margin:0 0 22px}
.lead{font-size:20px}
.caption{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.snum{font-family:var(--sans);font-size:12px;color:var(--acc2);display:block;margin-bottom:10px}
.lead-note{color:var(--muted);font-size:16px}

ul.list,ol.list{margin:0 0 22px;padding-left:0;list-style:none}
ul.list li{position:relative;padding-left:24px;margin-bottom:10px}
ul.list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;background:var(--acc);
}
ol.list{counter-reset:s;}
ol.list li{position:relative;padding-left:34px;margin-bottom:10px;counter-increment:s}
ol.list li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:var(--sans);font-size:12px;color:var(--acc2);
}

.text-block{max-width:68ch}

/* ---------- footer ---------- */

.site-foot{background:var(--bg);padding:64px 0 56px;border-top:var(--seam) solid var(--bg-alt)}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--seam);margin-top:24px}
.foot-grid > div{background:var(--bg-alt);padding:24px}
.foot-grid h2{font-size:16px;font-style:italic;margin:0 0 10px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:6px}
.foot-grid a{font-family:var(--sans);font-size:14px}
.foot-grid p{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.foot-name{font-size:22px;margin:0 0 8px}

/* ---------- responsive ---------- */

@media (max-width:960px){
  .band{padding:64px 0}
  .c4,.c5,.c6,.c7,.c8{grid-column:span 6}
  .hero-h1{grid-column:1/-1}
  .hero-intro{grid-column:1/-1}
  .hero-img{grid-column:1/span 9}
  .hero-left{grid-column:10/span 3}
  .hero-cap{grid-column:1/-1}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  body{font-size:17px}
  .band{padding:48px 0}
  .hero{padding:32px 0 0}
  .wrap{padding:0 16px}
  .head-in{padding:16px}
  .mosaic{grid-auto-rows:auto}
  .c4,.c5,.c6,.c7,.c8,.hero-img,.hero-cap,.hero-left,.hero-h1,.hero-intro{grid-column:1/-1}
  .r2,.r3{grid-row:auto}
  .hero-left{min-height:24px}
  .m{padding:22px 20px}
  .tile{min-height:24px}
  .hero-left{min-height:24px}
  .foot-grid{grid-template-columns:1fr}
}

main .sep{margin-top:48px}
.foot-grid h2{font-size:16px}