/* Bardontu — tessera-modules */

:root{
  --bg:#f4f2ed;
  --bg-alt:#e6e3dc;
  --bg-dark:#16151a;
  --ink:#16151a;
  --ink-soft:#6d6a63;
  --ink-invert:#f4f2ed;
  --blue:#1f3fa8;
  --red:#c0452e;
  --seam:4px;
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}

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

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

.wrap{max-width:1240px;margin:0 auto;padding:0 20px;}

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

h1,h2,h3{margin:0 0 .5em;line-height:1.12;}
h1{
  font-size:clamp(2.35rem,6.2vw,4.5rem);
  font-weight:700;
  letter-spacing:-.035em;
}
h2{
  font-size:clamp(1.5rem,3vw,2.05rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
}
h3{
  font-size:1.115rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.35;
}
p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}

.lead{font-size:1.09rem;}
.cap{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0;
}
.num{
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 12px;
  display:block;
}

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

.masthead{
  background:var(--bg-dark);
  color:var(--ink-invert);
}
.masthead-in{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px 28px;
  padding-top:16px;
  padding-bottom:16px;
}
.brand{
  font-size:1.28rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink-invert);
  text-decoration:none;
  margin-right:auto;
}
.brand:hover{text-decoration:none;color:#fff;}
.brand span{color:var(--red);}
.masthead nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;
  padding:0;
  font-size:15px;
}
.masthead nav a{
  color:var(--ink-invert);
  text-decoration:none;
  padding:2px 0;
  border-bottom:2px solid transparent;
}
.masthead nav a:hover,.masthead nav a[aria-current="page"]{
  border-bottom-color:var(--red);
}
.masthead nav a:focus-visible{outline:3px solid #7f95e0;outline-offset:3px;}

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

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--seam);
}

.mod{padding:28px;}
.mod > :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:span 12;}

.paper{background:var(--bg);}
.paper-alt{background:var(--bg-alt);}
.blue{background:var(--blue);color:#fff;}
.red{background:var(--red);color:#fff;}
.dark{background:var(--bg-dark);color:var(--ink-invert);}
.blue a,.red a,.dark a{color:#fff;}
.dark .cap,.blue .cap,.red .cap{color:rgba(244,242,237,.72);}
.dark .num{color:#e8836e;}
.solid{min-height:60px;}

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

section{padding:72px 0;}
.band{background:var(--bg-alt);}
.band-dark{background:var(--bg-dark);color:var(--ink-invert);}
.band-dark h2,.band-dark h3{color:var(--ink-invert);}
.band-dark .paper-alt{background:#232128;}
.band-dark .cap{color:#a29e97;}
.band-dark .num{color:#e8836e;}
.band-dark a{color:#c5cff0;}

/* tile separator row */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,24px);
  grid-auto-rows:24px;
  gap:var(--seam);
  overflow:hidden;
  height:24px;
  margin:0;
  padding:0;
  list-style:none;
}
.tiles li{background:var(--bg-alt);}
.tiles li:nth-child(3n+1){background:var(--blue);}
.tiles li:nth-child(7n+3){background:var(--red);}
.band .tiles li{background:var(--bg);}
.band .tiles li:nth-child(3n+1){background:var(--blue);}
.band .tiles li:nth-child(7n+3){background:var(--red);}
.band-dark .tiles li{background:#2c2a32;}
.band-dark .tiles li:nth-child(3n+1){background:var(--blue);}
.band-dark .tiles li:nth-child(7n+3){background:var(--red);}
.sep{padding:0;margin:0 0 48px;}

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

.hero{padding:56px 0 24px;}
.hero .grid{grid-auto-rows:minmax(76px,auto);}
.hero-title{
  grid-column:span 8;
  grid-row:span 2;
  background:var(--bg-alt);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:36px 32px 32px;
}
.hero-title h1{margin-bottom:0;}
.hero-title .num{margin-bottom:18px;}
.hero-intro{
  grid-column:span 4;
  grid-row:span 2;
  background:var(--bg);
  border-top:4px solid var(--blue);
  padding:32px 28px;
  display:flex;
  align-items:center;
}
.t-a{grid-column:span 2;background:var(--blue);}
.t-b{grid-column:span 1;background:var(--red);}
.t-c{grid-column:span 3;background:var(--bg-alt);}
.t-d{grid-column:span 1;background:var(--bg-dark);}
.t-e{grid-column:span 2;background:var(--red);}
.t-f{grid-column:span 3;background:var(--blue);}

/* main image module 6x3, offset 2 columns */
.figure-main{
  grid-column:3 / span 6;
  margin:0;
  background:var(--bg-alt);
}
.figure-main img{width:100%;}
.figure-side{
  grid-column:span 4;
  background:var(--bg-alt);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.figure-mark{grid-column:span 2;background:var(--blue);}

/* ---------- detail image in dark band ---------- */

.figure-detail{
  grid-column:1 / span 5;
  margin:0;
  background:#232128;
}
.figure-detail img{width:100%;}
.figure-detail figcaption{padding:14px 18px 18px;}

/* ---------- lists ---------- */

ul.check,ol.steps{margin:0 0 1.05em;padding-left:0;list-style:none;}
ul.check li{
  position:relative;
  padding-left:26px;
  margin-bottom:10px;
}
ul.check li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:10px;height:10px;
  background:var(--blue);
}
.dark ul.check li::before,.band-dark ul.check li::before{background:#7f95e0;}
ol.steps{counter-reset:s;}
ol.steps li{
  position:relative;
  padding-left:38px;
  margin-bottom:12px;
  counter-increment:s;
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-size:13px;font-weight:700;
  letter-spacing:.08em;
  color:var(--red);
  line-height:1.95;
}
ul.plain{margin:0 0 1.05em;padding-left:20px;}
ul.plain li{margin-bottom:8px;}

.hr-red{border:0;border-top:2px solid var(--red);margin:22px 0;width:56px;}

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

.site-footer{background:var(--bg-dark);color:var(--ink-invert);padding:0 0 56px;}
.site-footer .tiles{margin-bottom:48px;}
.site-footer .tiles li{background:#2c2a32;}
.site-footer .tiles li:nth-child(3n+1){background:var(--blue);}
.site-footer .tiles li:nth-child(7n+3){background:var(--red);}
.site-footer h2{font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:#a29e97;margin-bottom:14px;font-weight:700;}
.site-footer .mod{background:#1d1c22;padding:26px 24px;}
.site-footer .c3{grid-column:span 3;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:7px;}
.site-footer a{color:var(--ink-invert);}
.site-footer .fname{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;}
.site-footer .fname span{color:var(--red);}

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

@media (max-width:1000px){
  .hero-title{grid-column:span 12;}
  .hero-intro{grid-column:span 12;grid-row:auto;}
  .figure-main{grid-column:span 8;}
  .figure-side{grid-column:span 4;}
  .figure-mark{display:none;}
  .figure-detail{grid-column:span 6;}
  .c4,.c5,.c6,.c7,.c8{grid-column:span 6;}
  .site-footer .c3{grid-column:span 6;}
}

@media (max-width:680px){
  body{font-size:16px;}
  section{padding:48px 0;}
  .sep{margin-bottom:32px;}
  .hero{padding:36px 0 16px;}
  .mod{padding:22px;}
  .hero-title{padding:26px 22px;}
  .grid > *{grid-column:1 / -1 !important;}
  .figure-main,.figure-detail,.figure-side{grid-column:1 / -1;}
  .t-a,.t-b,.t-c,.t-d,.t-e,.t-f{display:none;}
  .masthead-in{flex-direction:column;align-items:flex-start;gap:12px;}
  .masthead nav ul{gap:6px 18px;}
  .tiles{height:16px;grid-template-columns:repeat(auto-fill,16px);grid-auto-rows:16px;}
}