/* Desinti — asymmetric-ledger */

:root{
  --bg:#f1e9dc;
  --bg-alt:#e5d8c4;
  --bg-dark:#3a2a1d;
  --ink:#2a2018;
  --ink-soft:#7a6a57;
  --ink-inv:#f1e9dc;
  --accent:#9c5a2c;
  --accent2:#59705b;
  --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(--ink);
  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(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible,
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;}
h1{font-size:clamp(2.3rem,5.6vw,4.1rem);line-height:1.05;margin:0 0 1.6rem;}
h2{font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.12;margin:0 0 1.1rem;}
h3{font-size:1.16rem;line-height:1.3;margin:2.2rem 0 .6rem;}
p{margin:0 0 1.15rem;}
p:last-child{margin-bottom:0;}

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

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

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

.site-head{border-bottom:1px solid var(--accent);}
.site-head .wrap{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:10px 28px;
  padding-top:22px;padding-bottom:18px;
}
.brand{
  font-family:var(--serif);font-size:1.5rem;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
}
.brand:hover{color:var(--accent);}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;}
.site-nav a{font-size:15px;color:var(--ink);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;}
.site-nav a:hover{color:var(--accent);border-bottom-color:var(--accent);}

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

.sec{padding:96px 0;}
.sec--alt{background:var(--bg-alt);}
.sec--dark{background:var(--bg-dark);color:var(--ink-inv);}
.sec--dark h2,.sec--dark h3{color:var(--ink-inv);}
.sec--dark .num{color:#a9bda9;}
.sec--dark .cap{color:#c6b49b;}
.sec--dark a{color:#e8a86f;}

.num{
  grid-column:1 / 2;
  font-size:13px;letter-spacing:.14em;color:var(--accent2);
  padding-top:.6rem;
}

.col-left6{grid-column:2 / 8;}
.col-mid8{grid-column:3 / 11;}
.col-wide{grid-column:2 / 12;}

.rule{height:1px;background:var(--accent);opacity:.5;border:0;margin:0;}

.lead{font-size:1.12rem;}
.cap{font-size:13px;line-height:1.55;color:var(--ink-soft);margin-top:.7rem;}
figcaption.cap{font-style:italic;}

ul.plain,ol.plain{margin:1.1rem 0;padding-left:1.15rem;}
ul.plain li,ol.plain li{margin-bottom:.55rem;padding-left:.25rem;}
ul.plain li::marker{color:var(--accent);}
ol.plain li::marker{color:var(--accent);font-variant-numeric:tabular-nums;}

.two-col{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;}
.two-col ul{margin-top:0;}

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

.hero{padding:84px 0 96px;}
.hero .kicker{
  grid-column:1 / 9;font-size:13px;letter-spacing:.16em;
  color:var(--accent2);margin:0 0 1.4rem;
}
.hero h1{grid-column:1 / 9;}
.hero .hero-text{grid-column:1 / 5;}
.hero figure{
  grid-column:9 / 13;grid-row:3 / 4;
  margin:0 0 0 auto;align-self:start;
  margin-top:-3.9rem;max-width:480px;
}

/* ---------- dark detail section ---------- */

.detail-fig{grid-column:8 / 12;margin:0;}
.detail-fig img{width:100%;}
.detail-text{grid-column:2 / 7;}

/* ---------- about ---------- */

.about-labels{grid-column:1 / 5;}
.about-labels p{
  font-size:13px;color:var(--ink-soft);line-height:1.5;
  margin:0;padding:14px 0;border-bottom:1px solid var(--accent);
}
.about-labels p:first-child{border-top:1px solid var(--accent);}
.about-body{grid-column:6 / 13;}

/* ---------- legal ---------- */

.legal{grid-column:2 / 10;}
.legal h2{margin-top:2.6rem;}
.legal h2:first-of-type{margin-top:1.2rem;}

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

.site-foot{background:var(--bg-dark);color:var(--ink-inv);padding:64px 0 52px;}
.foot-grid{display:grid;grid-template-columns:5fr 4fr 3fr;column-gap:32px;align-items:start;}
.foot-name{font-family:var(--serif);font-size:2rem;line-height:1.1;margin:0 0 .6rem;}
.foot-note{font-size:13px;color:#c6b49b;line-height:1.6;margin:0;max-width:34ch;}
.site-foot nav ul{list-style:none;margin:0;padding:0;}
.site-foot nav li{margin-bottom:.5rem;}
.site-foot a{color:var(--ink-inv);text-decoration:none;border-bottom:1px solid #7d5a3c;}
.site-foot a:hover{border-bottom-color:#e8a86f;color:#e8a86f;}
.foot-mail{font-size:15px;}
.foot-mail span{display:block;font-size:13px;color:#c6b49b;margin-bottom:.4rem;}
.foot-bottom{margin-top:44px;padding-top:18px;border-top:1px solid #7d5a3c;font-size:13px;color:#c6b49b;}

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

@media (max-width:900px){
  .hero h1,.hero .hero-text,.hero .kicker{grid-column:1 / 13;}
  .hero figure{grid-column:1 / 13;grid-row:auto;margin:40px 0 0;max-width:420px;}
  .num{grid-column:1 / 13;padding-top:0;margin-bottom:.4rem;}
  .col-left6,.col-mid8,.col-wide,.legal,
  .detail-fig,.detail-text,.about-labels,.about-body{grid-column:1 / 13;}
  .detail-fig{margin-top:36px;max-width:440px;}
  .about-body{margin-top:32px;}
  .foot-grid{grid-template-columns:1fr;row-gap:34px;}
}

@media (max-width:640px){
  body{font-size:16px;line-height:1.75;}
  .wrap{padding:0 20px;}
  .sec{padding:56px 0;}
  .hero{padding:44px 0 56px;}
  .two-col{grid-template-columns:1fr;column-gap:0;}
  .site-head .wrap{padding-top:18px;padding-bottom:14px;}
  .site-nav ul{gap:6px 18px;}
  .foot-name{font-size:1.7rem;}
}