/* Rivepezo — light-axis */

:root{
  --bg:#f4f0e8;
  --bg-alt:#e7e1d5;
  --bg-dark:#20242a;
  --ink:#22201b;
  --ink-soft:#776f62;
  --ink-inv:#f4f0e8;
  --accent:#2c4668;
  --accent-2:#a06a2c;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --step:80px;
}

*,*::before,*::after{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:700;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.05}
h2{font-size:clamp(1.5rem,2.2vw,1.85rem);line-height:1.15}
h3{font-size:1.15rem;line-height:1.25;margin:0 0 .4em}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* ---------- layout ---------- */

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

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

.band{padding:var(--step) 0}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--bg-dark);color:var(--ink-inv)}
.band--dark h2,.band--dark h3{color:var(--ink-inv)}
.band--dark a{color:#b9cbe4}
.band--dark .caption{color:#a79e8f}

/* heading column + text column, sharing one baseline */
.duo{position:relative}
.duo > .head{grid-column:1 / 4}
.duo > .body{grid-column:4 / 11}

.head{position:relative}
.head::before{
  content:"";
  position:absolute;
  left:-18px;
  top:.62em;
  width:8px;height:8px;
  background:var(--accent);
}
.band--dark .head::before{background:var(--accent-2)}

.num{
  display:block;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.4;
  color:var(--accent-2);
  margin-bottom:.9em;
  letter-spacing:.02em;
}
.band--dark .num{color:#c99a5f}

.caption{
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
  font-family:var(--sans);
}

.lede{font-size:19px;line-height:1.7}

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

.site-head{padding:26px 0 0}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px 34px;justify-content:space-between}

.brand{
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{text-decoration:none;color:var(--accent)}

.nav ul{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:0;padding:0}
.nav a{
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}

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

.hero{padding:64px 0 var(--step)}
.hero .title{grid-column:1 / 8}
.hero .intro{grid-column:9 / 13;align-self:start;padding-top:.4em}

.axis{margin-top:36px;width:100%}
.axis .bar{height:2px;background:var(--accent);width:100%}
.axis .legs{display:flex;gap:0;height:78px}
.axis .leg{position:relative;width:26%}
.axis .leg span{
  position:absolute;left:0;top:0;width:1px;background:var(--accent);
}
.axis .leg::after{
  content:"";position:absolute;left:-3px;width:7px;height:7px;background:var(--accent-2);
}
.axis .leg--a span{height:76px}
.axis .leg--a::after{top:76px}
.axis .leg--b span{height:44px}
.axis .leg--b::after{top:44px}
.axis .leg--c span{height:60px}
.axis .leg--c::after{top:60px}

/* ---------- main image ---------- */

.figure-main{margin:0;padding:0 0 var(--step)}
.figure-main .shot{grid-column:4 / 13}
.figure-main figcaption{grid-column:1 / 4;align-self:end;padding-bottom:4px}

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

.list{list-style:none;margin:0 0 1.15em;padding:0}
.list li{position:relative;padding-left:22px;margin-bottom:.55em}
.list li::before{
  content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;background:var(--accent);
}
.band--dark .list li::before{background:var(--accent-2)}

.list--check li::before{width:9px;height:2px;top:.95em;background:var(--accent-2)}

ol.list{counter-reset:s}
ol.list li{counter-increment:s;padding-left:34px}
ol.list li::before{
  content:counter(s,decimal-leading-zero);
  background:none;width:auto;height:auto;top:0;
  font-family:var(--sans);font-size:13px;color:var(--accent-2);
}

.sub{margin-top:2.2em}

/* ---------- detail block in dark band ---------- */

.detail .shot{grid-column:1 / 6}
.detail .text{grid-column:7 / 13}
.detail figcaption{margin-top:14px}
.detail figure{margin:0}

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

.about-grid{position:relative}
.about-grid .head{grid-column:1 / 4}
.about-grid .body{grid-column:5 / 12}
.about-grid::after{
  content:"";
  position:absolute;
  left:calc((100% - 26px*11)/12*3 + 26px*3 + 13px);
  top:0;bottom:0;width:1px;background:#d6cfc0;
}
.band--alt .about-grid::after{background:#cdc5b4}

/* ---------- contact ---------- */

.contact-line{font-size:19px;margin-top:.8em}

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

.site-foot{background:var(--bg-dark);color:var(--ink-inv);padding:60px 0 46px;margin-top:0}
.foot-top{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;align-items:baseline}
.foot-name{font-family:var(--serif);font-size:1.5rem;font-weight:700}
.foot-mail a{color:var(--ink-inv);text-decoration:underline;text-underline-offset:4px}
.foot-rule{height:1px;background:#3b4048;margin:26px 0 22px}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:0 0 18px;padding:0}
.foot-links a{color:var(--ink-inv);font-size:15px;text-decoration:none;border-bottom:1px solid #4d545e;padding-bottom:2px}
.foot-links a:hover{border-bottom-color:var(--accent-2)}
.foot-note{color:#a79e8f;font-size:13px;line-height:1.7;max-width:62ch;margin:0}
.site-foot :focus-visible{outline-color:#c99a5f}

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

.page-head{padding:56px 0 46px}
.page-head .title{grid-column:1 / 9}
.page-head .meta{grid-column:10 / 13;align-self:end}
.page-head h1{font-size:clamp(2rem,3.8vw,2.9rem)}

.prose h2{margin-top:0}
.prose .body > h3{margin-top:1.8em}

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

@media (max-width:980px){
  .wrap{padding:0 28px}
  .hero .title,.hero .intro,
  .figure-main .shot,.figure-main figcaption,
  .detail .shot,.detail .text,
  .duo > .head,.duo > .body,
  .about-grid .head,.about-grid .body,
  .page-head .title,.page-head .meta{grid-column:1 / 13}
  .about-grid::after{display:none}
  .hero .intro{padding-top:26px}
  .duo > .body{margin-top:18px}
  .figure-main figcaption{margin-top:12px;padding-bottom:0}
  .detail .text{margin-top:30px}
  .page-head .meta{margin-top:20px}
}

@media (max-width:640px){
  :root{--step:48px}
  body{font-size:16px}
  .wrap{padding:0 20px}
  .site-head{padding:20px 0 0}
  .site-head .wrap{gap:14px}
  .nav ul{gap:8px 18px}
  .hero{padding:34px 0 var(--step)}
  .head::before{left:-14px}
  .axis .legs{height:58px}
  .axis .leg--a span{height:56px}.axis .leg--a::after{top:56px}
  .axis .leg--b span{height:32px}.axis .leg--b::after{top:32px}
  .axis .leg--c span{height:44px}.axis .leg--c::after{top:44px}
  .lede{font-size:17px}
  .foot-top{display:block}
  .foot-mail{margin-top:8px}
  .site-foot{padding:44px 0 36px}
}