/* Brondanta — stepped-poster */

:root{
  --bg:#eef0f2;
  --bg-alt:#dfe3e7;
  --bg-dark:#1b2733;
  --tx:#151a20;
  --tx-2:#636d78;
  --tx-inv:#eef0f2;
  --ac:#2c4a7c;
  --ac2:#a35a2a;
  --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(--tx);
  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(--ac);text-decoration:none;border-bottom:1px solid rgba(44,74,124,.42)}
a:hover{border-bottom-color:var(--ac)}
a:focus-visible,
:focus-visible{outline:3px solid var(--ac);outline-offset:3px}

.wrap{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 28px;
}

/* ---------- meta labels ---------- */
.label{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tx-2);
  font-family:var(--sans);
}
.num{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--ac2);
  text-transform:uppercase;
}

/* ---------- header ---------- */
.site-head{
  border-bottom:1px solid #c9cfd6;
  padding:22px 0 20px;
}
.site-head .inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 32px;
}
.brand{
  font-family:var(--serif);
  font-size:25px;
  letter-spacing:.01em;
  color:var(--tx);
  border:0;
}
.brand:hover{color:var(--ac)}
.site-nav ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
}
.site-nav a{
  font-size:14px;
  letter-spacing:.05em;
  color:var(--tx);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{
  color:var(--ac);
  border-bottom-color:var(--ac);
}

/* ---------- hero ---------- */
.hero{padding:104px 0 0}
.hero-head{position:relative;padding-left:34px}
.hero-head::before{
  content:"";
  position:absolute;left:0;top:6px;bottom:6px;
  width:3px;background:var(--ac);
}
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,5.6vw,68px);
  line-height:1.07;
  margin:14px 0 0;
  letter-spacing:-.012em;
}
.hero h1 span{display:block}
.hero h1 .l2{margin-left:8.33%}
.hero h1 .l3{margin-left:16.66%}

.hero-intro{margin-top:46px}
.hero-intro p{
  grid-column:1 / span 5;
  margin:0;
  font-size:18px;
}
.topic-line{
  margin:26px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--tx-2);
  text-transform:uppercase;
}
.topic-line li:not(:last-child)::after{
  content:"/";
  color:var(--ac2);
  margin:0 12px;
}

.hero-figure{
  margin:60px 0 0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 28px;
  align-items:start;
}
.hero-figure .cap{
  grid-column:1 / span 1;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--tx-2);
  text-transform:uppercase;
  justify-self:end;
  margin-top:8px;
}
.hero-figure img{
  grid-column:5 / span 8;
  width:100%;
}

/* ---------- sections ---------- */
.s-loose{padding:120px 0}
.s-tight{padding:56px 0}
.s-alt{background:var(--bg-alt)}
.s-dark{background:var(--bg-dark);color:var(--tx-inv)}
.s-dark .label,.s-dark .num{color:#9aa7b4}
.s-dark .num{color:#c98a5c}
.s-dark a{color:#9fb8dd;border-bottom-color:rgba(159,184,221,.5)}
.s-dark h2,.s-dark h3{color:var(--tx-inv)}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3.2vw,38px);
  line-height:1.2;
  margin:10px 0 22px;
  letter-spacing:-.008em;
}
h3{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:22px;
  line-height:1.32;
  margin:38px 0 10px;
}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}

.col-5{grid-column:1 / span 5}
.col-7{grid-column:1 / span 7}
.col-9{grid-column:1 / span 9}
.col-7r{grid-column:6 / span 7}
.col-5r{grid-column:8 / span 5}
.col-9r{grid-column:4 / span 9}
.col-6{grid-column:1 / span 6}
.head-side{grid-column:1 / span 3}
.body-side{grid-column:4 / span 8}

/* ---------- separators ---------- */
.rule{
  height:3px;
  background:var(--ac);
  border:0;
  margin:0;
  width:33.33%;
}
.rule-c{margin-left:33.33%}
.rule-r{margin-left:66.66%}
.rule-2{background:var(--ac2)}

/* ---------- lists ---------- */
.steps{
  list-style:none;
  counter-reset:st;
  margin:30px 0 0;
  padding:0;
}
.steps li{
  counter-increment:st;
  position:relative;
  padding-left:74px;
  margin-bottom:26px;
  border-top:1px solid #c9cfd6;
  padding-top:16px;
}
.s-dark .steps li{border-top-color:#33404e}
.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;
  left:0;top:12px;
  font-family:var(--serif);
  font-size:34px;
  line-height:1;
  color:var(--ac2);
}
.steps strong{
  display:block;
  font-weight:600;
  font-size:15px;
  letter-spacing:.02em;
  margin-bottom:2px;
}

.plain{
  margin:24px 0 0;
  padding:0 0 0 22px;
  list-style:none;
}
.plain li{
  position:relative;
  margin-bottom:12px;
  padding-left:4px;
}
.plain li::before{
  content:"";
  position:absolute;
  left:-22px;top:.72em;
  width:11px;height:2px;
  background:var(--ac);
}
.s-dark .plain li::before{background:#c98a5c}

.defs{margin:26px 0 0}
.defs dt{
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
  margin-top:24px;
}
.defs dd{margin:6px 0 0}

/* ---------- dark section figure ---------- */
.detail-block{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:44px 28px;
  align-items:start;
  margin-top:46px;
}
.detail-block figure{
  grid-column:1 / span 4;
  margin:0;
}
.detail-block figcaption{
  margin-top:12px;
  font-size:12px;
  letter-spacing:.1em;
  color:#9aa7b4;
  line-height:1.6;
}
.detail-block .txt{grid-column:6 / span 6}

/* ---------- about ---------- */
.page-head{padding:88px 0 0}
.page-head h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(32px,4.6vw,54px);
  line-height:1.1;
  margin:12px 0 0;
  max-width:16ch;
  padding-left:34px;
  border-left:3px solid var(--ac);
}
.lede{
  font-size:22px;
  line-height:1.56;
  margin:36px 0 0;
}
.prose{max-width:none}
.legal h2{font-size:clamp(22px,2.5vw,28px);margin-top:0}
.legal .block{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 28px;
  padding:38px 0;
  border-top:1px solid #c9cfd6;
}
.legal .block:first-of-type{border-top:0}
.legal .block .h{grid-column:1 / span 3}
.legal .block .b{grid-column:4 / span 7}

/* ---------- contact ---------- */
.contact-box{
  margin-top:30px;
  border-left:3px solid var(--ac2);
  padding-left:24px;
}
.contact-box .mail{
  font-family:var(--serif);
  font-size:clamp(20px,2.6vw,30px);
  word-break:break-word;
}

/* ---------- footer ---------- */
.site-foot{
  border-top:3px solid var(--ac);
  margin-top:0;
  padding:44px 0 60px;
  background:var(--bg-alt);
}
.foot-name{
  font-family:var(--serif);
  font-size:clamp(38px,8vw,88px);
  line-height:1;
  margin:0 0 34px;
  letter-spacing:-.02em;
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:26px 28px;
}
.foot-nav{grid-column:1 / span 5}
.foot-info{grid-column:7 / span 6}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav li{margin-bottom:8px}
.foot-nav a{font-size:15px;color:var(--tx)}
.foot-info p{font-size:15px;color:var(--tx-2)}
.foot-info .mail{font-size:17px;color:var(--ac)}
.foot-bottom{
  margin-top:34px;
  padding-top:16px;
  border-top:1px solid #c9cfd6;
  font-size:13px;
  color:var(--tx-2);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid,.hero-figure,.detail-block,.foot-grid,.legal .block{
    grid-template-columns:repeat(6,1fr);
  }
  .col-5,.col-7,.col-9,.col-6,.head-side,.body-side,
  .col-7r,.col-5r,.col-9r,
  .hero-intro p,
  .detail-block figure,.detail-block .txt,
  .legal .block .h,.legal .block .b,
  .foot-nav,.foot-info{grid-column:1 / span 6}
  .hero-figure img{grid-column:1 / span 6}
  .hero-figure .cap{
    grid-column:1 / span 6;
    writing-mode:horizontal-tb;
    transform:none;
    justify-self:start;
    order:2;
    margin-top:12px;
  }
  .detail-block figure{max-width:420px}
  .rule{width:60%}
  .rule-c{margin-left:20%}
  .rule-r{margin-left:40%}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .s-loose{padding:64px 0}
  .s-tight{padding:40px 0}
  .hero{padding:56px 0 0}
  .page-head{padding:52px 0 0}
  .hero h1 .l2{margin-left:6%}
  .hero h1 .l3{margin-left:12%}
  .hero-head,.page-head h1{padding-left:20px}
  .steps li{padding-left:56px}
  .steps li::before{font-size:26px}
  .lede{font-size:19px}
}