/* Depobri — depobri.world */

:root{
  --paper:#faf7f0;
  --stone:#dde2e4;
  --deep:#1f4a4a;
  --ink:#14120f;
  --muted:#6c6659;
  --red:#d2402f;
  --ochre:#a97f18;
  --line:5px;
  --rule:6px;
  --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(--paper);
  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(--red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;}
a:hover{background:var(--red);color:var(--paper);text-decoration-color:var(--red);}

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

p{margin:0 0 1.15em;max-width:74ch;}
p:last-child{margin-bottom:0;}

h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;line-height:1.08;letter-spacing:-.01em;}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem);}
h2{font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.15;margin:0 0 .7em;}
h3{font-size:1.09rem;line-height:1.35;margin:0 0 .45em;}

.cap{
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
  font-family:var(--sans);
  letter-spacing:.01em;
}

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

/* ---------- skeleton ---------- */

.wrap{max-width:1320px;margin:0 auto;border-left:var(--line) solid var(--ink);border-right:var(--line) solid var(--ink);}

.band{
  border-bottom:var(--rule) solid var(--ink);
  display:grid;
  grid-template-columns:repeat(12,1fr);
}

.band.paper{background:var(--paper);}
.band.stone{background:var(--stone);}
.band.deep{background:var(--deep);color:var(--paper);}
.band.deep h1,.band.deep h2,.band.deep h3{color:var(--paper);}
.band.deep .cap{color:#c3d0cf;}
.band.deep a{color:#f0b8ae;}
.band.deep a:hover{background:#f0b8ae;color:var(--deep);}
.band.deep .num{color:#dbb45c;}

.cell{padding:72px 44px;min-width:0;}
.cell + .cell{border-left:var(--line) solid var(--ink);}

.c3{grid-column:span 3;}
.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;}

/* ---------- masthead ---------- */

.masthead{
  border-bottom:var(--rule) solid var(--ink);
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  background:var(--paper);
}
.masthead .brand{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:700;
  padding:16px 24px;
  text-decoration:none;
  color:var(--ink);
  border-right:var(--line) solid var(--ink);
  letter-spacing:.02em;
}
.masthead .brand:hover{background:var(--ink);color:var(--paper);}
.masthead nav{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;}
.masthead nav a{
  font-size:14px;
  padding:16px 20px;
  color:var(--ink);
  text-decoration:none;
  border-right:1px solid rgba(20,18,15,.22);
}
.masthead nav a:hover{background:var(--red);color:var(--paper);}
.masthead nav a[aria-current="page"]{box-shadow:inset 0 -5px 0 var(--red);}

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

.hero{border-bottom:var(--rule) solid var(--ink);}
.hero-top{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:var(--line) solid var(--ink);}
.hero-left{grid-column:span 7;padding:76px 44px 64px;background:var(--paper);}
.hero-left h1{max-width:14ch;}
.hero-left .lede{margin-top:26px;font-size:1.02rem;color:var(--muted);max-width:46ch;}
.hero-right{grid-column:span 5;border-left:var(--line) solid var(--ink);display:grid;grid-template-rows:auto 92px;}
.hero-intro{padding:44px;background:var(--red);color:var(--paper);border-bottom:var(--line) solid var(--ink);}
.hero-intro p{font-size:1.04rem;max-width:34ch;}
.hero-block{background:var(--deep);}

.hero-nav{
  display:flex;
  flex-wrap:wrap;
  background:var(--stone);
  padding:0;
}
.hero-nav span{
  padding:14px 22px;
  font-size:12px;
  color:var(--muted);
  border-right:1px solid rgba(20,18,15,.2);
}
.hero-nav a{
  padding:14px 22px;
  font-size:13px;
  color:var(--ink);
  text-decoration:none;
  border-right:1px solid rgba(20,18,15,.2);
  box-shadow:inset 0 -3px 0 var(--ochre);
}
.hero-nav a:hover{background:var(--ink);color:var(--paper);}

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

.figmain{margin:0;}
.figmain img{border:var(--line) solid var(--ink);width:100%;}

.figdetail{margin:0;}
.figdetail img{border:var(--line) solid var(--ink);width:100%;}
.figdetail figcaption{margin-top:14px;}

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

ul,ol{margin:0 0 1.15em;padding-left:1.3em;max-width:72ch;}
li{margin-bottom:.55em;}
li::marker{color:var(--red);}
.band.deep li::marker{color:#dbb45c;}

.checks{list-style:none;padding-left:0;}
.checks li{
  padding-left:26px;
  position:relative;
  border-bottom:1px solid rgba(20,18,15,.16);
  padding-bottom:.6em;
}
.band.deep .checks li{border-bottom-color:rgba(250,247,240,.25);}
.checks li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:11px;height:11px;
  background:var(--red);
}
.band.deep .checks li::before{background:#dbb45c;}

dl{margin:0;}
dt{font-family:var(--serif);font-weight:700;font-size:1.02rem;margin-top:1.1em;}
dt:first-child{margin-top:0;}
dd{margin:.2em 0 0;color:var(--muted);max-width:70ch;}
.band.deep dd{color:#c3d0cf;}

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

.panel{border-bottom:var(--rule) solid var(--ink);}
.panel .row{border-bottom:var(--line) solid var(--ink);display:grid;grid-template-columns:repeat(12,1fr);}
.panel .row:last-child{border-bottom:0;}
.panel .row .cell{grid-column:span 7;}
.panel .row .side{grid-column:span 5;border-left:var(--line) solid var(--ink);padding:72px 44px;}

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

.doc h2{margin-top:2.2em;}
.doc h2:first-of-type{margin-top:0;}
.doc h3{margin-top:1.7em;}

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

footer.site{
  border-top:var(--rule) solid var(--ink);
  display:grid;
  grid-template-columns:repeat(12,1fr);
}
footer.site .fcell{padding:44px;min-width:0;}
footer.site .fcell + .fcell{border-left:var(--line) solid var(--ink);}
.f1{grid-column:span 4;background:var(--paper);}
.f2{grid-column:span 3;background:var(--stone);}
.f3{grid-column:span 5;background:var(--deep);color:var(--paper);}
.f3 a{color:#f0b8ae;}
.f3 a:hover{background:#f0b8ae;color:var(--deep);}
.f3 .cap{color:#c3d0cf;}
.f1 .mark{font-family:var(--serif);font-size:1.5rem;font-weight:700;display:block;margin-bottom:10px;}
footer.site nav{display:flex;flex-direction:column;gap:8px;}
footer.site nav a{font-size:14px;color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--ochre);align-self:flex-start;}
footer.site nav a:hover{background:var(--ink);color:var(--paper);}

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

@media (max-width:1000px){
  .cell{padding:56px 32px;}
  .hero-left{padding:56px 32px 48px;}
  .hero-intro{padding:32px;}
  .panel .row .side{padding:56px 32px;}
  footer.site .fcell{padding:32px;}
}

@media (max-width:820px){
  body{font-size:16px;}
  .wrap{border-left:0;border-right:0;}
  .band{grid-template-columns:1fr;}
  .cell,.c3,.c4,.c5,.c6,.c7,.c8,.c12{grid-column:auto;}
  .cell + .cell{border-left:0;border-top:var(--line) solid var(--ink);}
  .hero-top{grid-template-columns:1fr;}
  .hero-left,.hero-right{grid-column:auto;}
  .hero-right{border-left:0;border-top:var(--line) solid var(--ink);grid-template-rows:auto 56px;}
  .panel .row{grid-template-columns:1fr;}
  .panel .row .cell,.panel .row .side{grid-column:auto;}
  .panel .row .side{border-left:0;border-top:var(--line) solid var(--ink);}
  footer.site{grid-template-columns:1fr;}
  .f1,.f2,.f3{grid-column:auto;}
  footer.site .fcell + .fcell{border-left:0;border-top:var(--line) solid var(--ink);}
  .masthead .brand{width:100%;border-right:0;border-bottom:var(--line) solid var(--ink);}
}

@media (max-width:520px){
  .cell{padding:40px 20px;}
  .hero-left{padding:40px 20px 34px;}
  .hero-intro{padding:24px 20px;}
  .panel .row .side{padding:40px 20px;}
  footer.site .fcell{padding:26px 20px;}
  .masthead nav a{padding:12px 14px;}
  .hero-nav span,.hero-nav a{padding:11px 14px;}
  p{max-width:none;}
}