/* Graldandezi — tessera-modules */

:root{
  --bg:#f1f2f0;
  --bg-alt:#e3e5e2;
  --ink:#141614;
  --text:#171917;
  --muted:#6a6e6a;
  --on-dark:#f1f2f0;
  --accent:#2a6b3c;
  --accent2:#8a6a20;
  --seam:4px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{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.72;
  overflow-x:hidden;
}

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

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

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

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

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

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:2.55rem;line-height:1.16;letter-spacing:-.01em}
h2{font-size:1.72rem;line-height:1.25;margin-bottom:16px}
h3{font-size:1.18rem;font-style:italic;line-height:1.35;margin:24px 0 8px}
p{margin:0 0 16px;max-width:66ch}
p:last-child{margin-bottom:0}

.label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 12px;
}
.num{color:var(--accent2);font-family:var(--sans);font-size:12px;letter-spacing:.14em;display:block;margin-bottom:10px}
.caption{font-size:13px;line-height:1.55;color:var(--muted);margin:0}

ul,ol{margin:0 0 16px;padding-left:20px;max-width:64ch}
li{margin-bottom:8px}
ul{list-style:none;padding-left:0}
ul li{position:relative;padding-left:22px}
ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;background:var(--accent);
}
ol{padding-left:24px}
ol li::marker{color:var(--accent2)}

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

.mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--seam);
  align-items:stretch;
}
.mod{background:var(--bg-alt);padding:28px}
.mod > :first-child{margin-top:0}
.mod.plain{background:transparent;padding:28px 0}
.mod.light{background:var(--bg)}

.s2{grid-column:span 2}
.s3{grid-column:span 3}
.s4{grid-column:span 4}
.s5{grid-column:span 5}
.s6{grid-column:span 6}
.s7{grid-column:span 7}
.s8{grid-column:span 8}
.s12{grid-column:span 12}
.r2{grid-row:span 2}
.r3{grid-row:span 3}

.tile{min-height:72px}
.tile-green{background:var(--accent)}
.tile-dark{background:var(--ink)}
.tile-gold{background:var(--accent2)}
.tile-soft{background:var(--bg-alt)}

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

.site-head{border-bottom:var(--seam) solid var(--bg-alt);padding:20px 0}
.head-inner{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;justify-content:space-between}
.brand{font-family:var(--serif);font-size:1.3rem;color:var(--text);text-decoration:none;letter-spacing:.01em}
.brand:hover{text-decoration:underline}
.site-nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none}
.site-nav li{margin:0;padding:0}
.site-nav li::before{display:none}
.site-nav a{font-size:15px;color:var(--text);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--accent2);color:var(--muted)}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:5}
.skip:focus{left:8px;top:8px}

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

.hero{padding:48px 0 0}
.hero-title{grid-column:1/9;grid-row:1/3;background:var(--bg-alt);padding:40px 36px;display:flex;flex-direction:column;justify-content:center}
.hero-t1{grid-column:9/11;grid-row:1/2}
.hero-t2{grid-column:11/13;grid-row:1/2}
.hero-t3{grid-column:9/13;grid-row:2/3}
.hero-cap{grid-column:1/3;grid-row:3/6;background:var(--bg-alt);padding:24px 18px;display:flex;flex-direction:column;justify-content:flex-end}
.hero-fig{grid-column:3/9;grid-row:3/6;margin:0;background:var(--bg-alt)}
.hero-fig img{width:100%}
.hero-intro{grid-column:9/13;grid-row:3/5;background:var(--bg-alt);padding:28px}
.hero-t4{grid-column:9/13;grid-row:5/6}
.hero-title h1{max-width:18ch}

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

.band{padding:96px 0}
.band-alt{background:var(--bg-alt);padding:96px 0}
.band-alt .mod{background:var(--bg)}
.band-tight{padding:72px 0}

.dark{background:var(--ink);color:var(--on-dark);padding:96px 0}
.dark h2,.dark h3{color:var(--on-dark)}
.dark .mod{background:#1e211e}
.dark .caption{color:#9aa09a}
.dark .label{color:#9aa09a}
.dark a{color:#8fc39c}
.dark ul li::before{background:#8fc39c}
.dark-fig{grid-column:2/7;margin:0}
.dark-fig img{width:100%}
.dark-text{grid-column:8/13}

.seam-row{display:flex;gap:var(--seam);overflow:hidden;margin:0 0 40px;list-style:none;padding:0}
.seam-row span{flex:0 0 24px;width:24px;height:24px}
.seam-row span:nth-child(4n+1){background:var(--accent)}
.seam-row span:nth-child(4n+2){background:var(--bg-alt)}
.seam-row span:nth-child(4n+3){background:var(--accent2)}
.seam-row span:nth-child(4n+4){background:var(--bg-alt)}
.band-alt .seam-row span:nth-child(4n+2),
.band-alt .seam-row span:nth-child(4n+4){background:var(--bg)}
.dark .seam-row span:nth-child(4n+2),
.dark .seam-row span:nth-child(4n+4){background:#2b2f2b}

.lead{font-size:1.12rem;line-height:1.66}

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

.site-foot{background:var(--bg);padding:72px 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:32px}
.foot-grid > div{background:var(--bg-alt);padding:24px}
.foot-grid h2{font-size:1.15rem;margin-bottom:10px}
.foot-grid p{font-size:14px;line-height:1.6;margin:0 0 8px}
.foot-grid ul{margin:0;padding:0}
.foot-grid li{margin-bottom:6px;padding-left:0}
.foot-grid li::before{display:none}
.foot-grid a{font-size:14px}

/* ---------- article pages ---------- */

.page-head{padding:48px 0 0}
.page-head .mod h1{max-width:20ch}

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

@media (max-width:1000px){
  h1{font-size:2.15rem}
  h2{font-size:1.5rem}
  .band,.band-alt,.dark{padding:72px 0}
  .hero-cap{grid-column:1/13;grid-row:auto}
  .hero-fig{grid-column:1/13;grid-row:auto}
  .hero-intro{grid-column:1/13;grid-row:auto}
  .hero-title{grid-column:1/13;grid-row:auto}
  .hero-t1,.hero-t2,.hero-t3,.hero-t4{grid-row:auto}
  .hero-t1{grid-column:1/5}
  .hero-t2{grid-column:5/9}
  .hero-t3{grid-column:9/13}
  .hero-t4{display:none}
  .dark-fig{grid-column:1/8}
  .dark-text{grid-column:1/13}
  .mosaic > .s4,.mosaic > .s5,.mosaic > .s6,.mosaic > .s7,.mosaic > .s8{grid-column:span 12}
  .mosaic > .r2,.mosaic > .r3{grid-row:auto}
  .mosaic > .s3{grid-column:span 6}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:1.82rem}
  h2{font-size:1.36rem}
  .wrap{padding:0 16px}
  .hero{padding:32px 0 0}
  .band,.band-alt,.dark{padding:48px 0}
  .band-tight{padding:48px 0}
  .mod{padding:22px}
  .hero-title{padding:26px 22px}
  .mosaic > .mod,.mosaic > .tile,.mosaic > figure{grid-column:1/-1;grid-row:auto}
  .mosaic > .tile{min-height:48px}
  .site-foot{padding:48px 0 40px}
  .foot-grid{grid-template-columns:1fr}
  .seam-row{margin-bottom:28px}
  p{max-width:none}
}

.dark-cap{margin-top:12px}