/* Trorodura — registration-marks */

:root{
  --bg:#f3eeea;
  --bg-alt:#e6ddd6;
  --bg-dark:#3b2029;
  --ink:#241b1d;
  --ink-soft:#7b6a68;
  --on-dark:#f3eeea;
  --accent:#8b2f45;
  --accent2:#a8642e;
  --step:84px;
  --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:18px;
  line-height:1.9;
  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;}

/* ---------- grid ---------- */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

/* ---------- registration marks ---------- */
.mark{
  position:absolute;
  width:22px;height:22px;
  pointer-events:none;
}
.mark::before,.mark::after{
  content:"";position:absolute;background:var(--accent2);
}
.mark::before{left:0;right:0;top:50%;height:1px;}
.mark::after{top:0;bottom:0;left:50%;width:1px;}
.mark.tl{top:-11px;left:-11px;}
.mark.tr{top:-11px;right:-11px;}
.mark.bl{bottom:-11px;left:-11px;}
.mark.br{bottom:-11px;right:-11px;}

/* ---------- header / nav ---------- */
.site-head{
  border-bottom:1px solid rgba(36,27,29,.18);
}
.site-head .wrap{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:12px 32px;
  padding-top:22px;padding-bottom:22px;
}
.brand{
  font-family:var(--serif);
  font-size:21px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{text-decoration:none;color:var(--accent);}
.site-nav{margin-left:auto;}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 26px;
}
.site-nav a{
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{
  border-bottom-color:var(--accent);
  color:var(--accent);
}

/* ---------- separators ---------- */
.sep{margin:var(--step) 0;}
.sep span{display:block;height:2px;max-width:520px;background:var(--accent);}
.sep span+span{background:var(--accent2);margin-left:24px;margin-top:8px;}

/* ---------- hero ---------- */
.hero{padding:calc(var(--step) - 12px) 0 var(--step);}
.hero-frame{position:relative;}
h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px,4.4vw,50px);
  line-height:1.3;
  margin:0;
  grid-column:1 / span 9;
  position:relative;
}
h1 .row2{position:relative;display:inline-block;}
h1 .row2::after{
  content:"";position:absolute;left:-4px;right:-10px;
  bottom:.16em;height:2px;background:var(--accent);
}
.hero-lead{grid-column:1 / span 5;margin:52px 0 0;}
.hero-lead p{margin:0 0 22px;}
.hero-topics{grid-column:8 / span 4;margin:56px 0 0;}
.hero-topics h2{
  font-family:var(--sans);
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent2);font-weight:600;line-height:1.6;margin:0 0 14px;
}
.hero-topics ul{list-style:none;margin:0;padding:0;font-size:16px;line-height:1.75;}
.hero-topics li{padding-left:20px;position:relative;margin-bottom:10px;color:var(--ink-soft);}
.hero-topics li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;background:var(--accent);
}

/* ---------- main image ---------- */
.figure-main{
  margin:0 0 var(--step);
  grid-column:3 / span 8;
  position:relative;
}
.figure-main .shot{position:relative;}
.figure-main img{width:100%;aspect-ratio:3/2;object-fit:cover;}
figcaption{
  font-size:14px;line-height:1.6;color:var(--ink-soft);
  margin-top:16px;max-width:46ch;
}

/* ---------- text sections ---------- */
.band{padding:var(--step) 0;}
.band-alt{background:var(--bg-alt);}
.tsec{grid-column:1 / span 7;}
.tsec.o1{grid-column:2 / span 7;}
.tsec.o2{grid-column:3 / span 7;}
.tsec.o3{grid-column:4 / span 7;}
.tsec+.tsec{margin-top:var(--step);}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(23px,2.5vw,30px);
  line-height:1.3;
  margin:0 0 26px;
}
h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:20px;line-height:1.35;
  margin:38px 0 14px;
}
p{margin:0 0 26px;}
.snum{
  display:block;
  font-size:14px;letter-spacing:.16em;
  color:var(--accent2);
  margin-bottom:12px;
}

ul.list,ol.list{margin:0 0 26px;padding-left:0;list-style:none;}
ul.list li,ol.list li{position:relative;padding-left:26px;margin-bottom:14px;}
ul.list li::before{
  content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;background:var(--accent);
}
ol.list{counter-reset:n;}
ol.list li::before{
  counter-increment:n;content:counter(n,decimal-leading-zero);
  position:absolute;left:0;top:0;font-size:14px;color:var(--accent2);
}
dl{margin:0 0 26px;}
dt{font-family:var(--serif);font-size:19px;margin-top:22px;}
dd{margin:4px 0 0;color:var(--ink-soft);}

/* ---------- dark section ---------- */
.dark{
  background:var(--bg-dark);
  color:var(--on-dark);
  padding:var(--step) 0;
}
.dark h2,.dark h3{color:var(--on-dark);}
.dark p{color:#e3d6d3;}
.dark .snum{color:var(--accent2);}
.dark a{color:#e8b8a0;}
.dark .mark::before,.dark .mark::after{background:var(--accent2);}
.figure-detail{margin:0;grid-column:1 / span 5;position:relative;}
.figure-detail .shot{position:relative;}
.figure-detail img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.dark figcaption{color:#b39a97;}
.dark-text{grid-column:7 / span 6;}
.dark ul.list li::before{background:var(--accent2);}
.dark ul.list li{color:#e3d6d3;}

/* ---------- about page ---------- */
.about-body{grid-column:3 / span 7;position:relative;}
.about-body section{position:relative;}
.about-body section::before{
  content:"";position:absolute;left:-52px;top:12px;
  width:18px;height:18px;
  background:
    linear-gradient(var(--accent2),var(--accent2)) center/100% 1px no-repeat,
    linear-gradient(var(--accent2),var(--accent2)) center/1px 100% no-repeat;
}
.about-body section+section{margin-top:var(--step);}

/* ---------- legal pages ---------- */
.legal{grid-column:2 / span 8;}
.legal section+section{margin-top:56px;}
.page-head{padding:calc(var(--step) - 20px) 0 12px;}
.page-head .kicker{
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent2);margin:0 0 14px;
}

/* ---------- footer ---------- */
.site-foot{
  background:var(--bg-dark);
  color:var(--on-dark);
  padding:var(--step) 0 56px;
}
.site-foot .rule{margin-bottom:44px;}
.site-foot .rule span{display:block;height:2px;background:var(--accent);}
.site-foot .rule span+span{background:var(--accent2);margin-left:24px;margin-top:8px;}
.foot-a{grid-column:1 / span 7;}
.foot-b{grid-column:8 / span 5;}
.foot-a .name{
  font-family:var(--serif);font-size:22px;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 16px;
}
.foot-a p{color:#c9b7b4;font-size:16px;margin:0;max-width:46ch;}
.site-foot h2{
  font-family:var(--sans);font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent2);font-weight:600;margin:0 0 14px;
}
.site-foot ul{list-style:none;margin:0 0 24px;padding:0;font-size:16px;line-height:2;}
.site-foot a{color:var(--on-dark);}
.site-foot a:hover{color:#e8b8a0;}
.site-foot .mail{font-size:16px;color:#c9b7b4;margin:0;}
.site-foot .fine{
  grid-column:1 / span 12;
  margin:48px 0 0;font-size:14px;color:#9c8683;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--step:50px;}
  body{font-size:17px;line-height:1.8;}
  .wrap{padding:0 20px;}
  .grid{column-gap:16px;}
  h1,.hero-lead,.hero-topics,.figure-main,.tsec,.tsec.o1,.tsec.o2,.tsec.o3,
  .figure-detail,.dark-text,.about-body,.legal,.foot-a,.foot-b{
    grid-column:1 / span 12;
  }
  .hero-lead{margin-top:34px;}
  .hero-topics{margin-top:34px;}
  .figure-detail{margin-bottom:34px;}
  .dark-text{margin-top:0;}
  .foot-b{margin-top:40px;}
  .about-body section::before{display:none;}
  .site-head .wrap{padding-top:16px;padding-bottom:16px;}
  .site-nav{margin-left:0;width:100%;}
  .site-nav ul{gap:4px 20px;}
  .sep span{max-width:100%;}
}