/* Palmozi — tessera-modules */

:root{
  --bg:#171514;
  --bg-alt:#201c19;
  --bg-contrast:#ede9e3;
  --text:#e6e1da;
  --text-dim:#9a9088;
  --text-contrast:#171514;
  --amber:#f08a24;
  --teal:#2f7a6e;
  --seam:4px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

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

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

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

.mod{
  background:var(--bg-alt);
  padding:28px 26px;
  min-width:0;
}

.mod--plain{background:var(--bg);}
.mod--amber{background:var(--amber);}
.mod--teal{background:var(--teal);}
.mod--paper{background:var(--bg-contrast);color:var(--text-contrast);}
.mod--fill{padding:0;min-height:64px;}
.mod--flat{padding: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;}

.off2{grid-column:3 / span 6;}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.14;}

h1{font-size:58px;letter-spacing:-0.01em;}
h2{font-size:30px;line-height:1.2;}
h3{font-size:20px;line-height:1.3;}

p{margin:0 0 18px;}
p:last-child{margin-bottom:0;}

.lead{font-size:19px;line-height:1.75;}

.cap{
  font-size:12px;
  line-height:1.6;
  color:var(--text-dim);
  letter-spacing:0.06em;
  text-transform:uppercase;
}

.num{
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:0.18em;
  color:var(--teal);
  display:block;
  margin-bottom:12px;
}

.mod--paper .num{color:var(--teal);}
.mod--paper .cap{color:#5c554e;}
.mod--paper a{color:#a8560c;}

.mod--amber h2,.mod--amber h3,.mod--amber p,.mod--amber .num,
.mod--teal h2,.mod--teal h3,.mod--teal p,.mod--teal .num{color:#171514;}
.mod--amber .cap,.mod--teal .cap{color:#171514;}

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

.site-head{
  border-bottom:var(--seam) solid var(--bg-alt);
  padding:20px 0;
}

.head-inner{
  display:flex;
  flex-wrap:wrap;
  gap:16px 28px;
  align-items:baseline;
  justify-content:space-between;
}

.brand{
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:0.02em;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{color:var(--amber);}

.site-nav ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
}
.site-nav a{
  color:var(--text-dim);
  text-decoration:none;
  font-size:15px;
  padding:2px 0;
  border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{
  color:var(--text);
  border-bottom-color:var(--amber);
}

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

.hero{padding:72px 0 0;}

.hero .mod--title{
  grid-column:span 8;
  background:var(--bg-alt);
  padding:40px 34px;
  display:flex;
  align-items:center;
}
.hero .mod--intro{grid-column:span 4;background:var(--bg-alt);}

.tile-a,.tile-b,.tile-c,.tile-d{min-height:56px;}

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

.band{padding:96px 0;}
.band--alt{background:var(--bg-alt);}
.band--alt .mod{background:var(--bg);}
.band--paper{background:var(--bg-contrast);color:var(--text-contrast);}
.band--paper .mod{background:#e2ddd5;color:var(--text-contrast);}
.band--paper .mod--flat{background:transparent;}
.band--paper h2,.band--paper h3{color:var(--text-contrast);}
.band--paper a{color:#a8560c;}
.band--paper .cap{color:#5c554e;}

.band-head{margin-bottom:32px;}

/* separators: small square tiles */
.strip{
  display:grid;
  grid-template-columns:repeat(auto-fill,24px);
  gap:var(--seam);
  margin:0;
  padding:0;
  list-style:none;
}
.strip span{width:24px;height:24px;background:var(--bg-alt);display:block;}
.strip span:nth-child(3n+1){background:var(--amber);}
.strip span:nth-child(7n+3){background:var(--teal);}
.band--paper .strip span{background:#d6d0c7;}
.band--paper .strip span:nth-child(3n+1){background:var(--amber);}
.band--paper .strip span:nth-child(7n+3){background:var(--teal);}

.strip-wrap{padding:48px 0;}

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

ul.check,ol.steps{
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
ul.check li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
}
ul.check li::before{
  content:"";
  position:absolute;
  left:0;top:11px;
  width:10px;height:10px;
  background:var(--amber);
}
ol.steps{counter-reset:s;}
ol.steps li{
  position:relative;
  padding-left:38px;
  margin-bottom:14px;
  counter-increment:s;
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;
  left:0;top:0;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:0.12em;
  color:var(--teal);
}

dl.spec{margin:18px 0 0;}
dl.spec dt{
  font-family:var(--serif);
  font-size:18px;
  margin-top:18px;
}
dl.spec dd{margin:4px 0 0;color:var(--text-dim);}
.band--paper dl.spec dd{color:#5c554e;}

/* ---------- figures ---------- */

figure{margin:0;}
figure img{width:100%;}
figcaption{margin-top:12px;}

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

.site-foot{
  background:var(--bg);
  padding:0 0 56px;
}
.foot-strip{padding:0 0 40px;}
.foot-grid .mod{background:var(--bg-alt);padding:26px 24px;}
.foot-grid h2{font-size:20px;margin-bottom:12px;}
.foot-grid ul{list-style:none;margin:0;padding:0;}
.foot-grid li{margin-bottom:8px;}
.foot-grid a{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(240,138,36,.5);}
.foot-grid a:hover{color:var(--amber);}
.foot-note{
  margin-top:var(--seam);
  background:var(--bg-alt);
  padding:20px 24px;
}

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

@media (max-width:900px){
  h1{font-size:42px;}
  h2{font-size:26px;}
  .hero{padding:48px 0 0;}
  .band{padding:48px 0;}
  .strip-wrap{padding:32px 0;}
  .c4,.c5,.c6,.c7,.c8,.off2{grid-column:span 12;}
  .hero .mod--title,.hero .mod--intro{grid-column:span 12;}
  .mod--fill{min-height:40px;}
  .hero .mod--title{padding:28px 22px;}
}

@media (max-width:600px){
  body{font-size:16px;}
  h1{font-size:34px;}
  h2{font-size:23px;}
  .mod{padding:22px 20px;}
  .strip{grid-template-columns:repeat(auto-fill,16px);}
  .strip span{width:16px;height:16px;}
}