:root{
  --bg:#eef1e8;
  --bg-alt:#e2e7dc;
  --bg-dark:#2c3a2c;
  --ink:#1f2620;
  --ink-2:#6d7468;
  --ink-inv:#eef1e8;
  --acc:#5f7a46;
  --acc-2:#b4655a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::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:18px;
  line-height:1.9;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(95,122,70,.45)}
a:hover{border-bottom-color:var(--acc)}
a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

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

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}

.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:28px;
  row-gap:32px;
}

.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}
.c6-mid{grid-column:4 / span 6}
.c4-l{grid-column:2 / span 4}
.c4-r{grid-column:8 / span 4}
.c3-l{grid-column:2 / span 3}
.c3-r{grid-column:9 / span 3}
.c7-l{grid-column:1 / span 7}
.c6-l{grid-column:1 / span 6}
.c5-r{grid-column:8 / span 5}

/* section rhythm: 64 / 80 / 96 / 64 */
.s-a{padding:64px 0}
.s-b{padding:80px 0}
.s-c{padding:96px 0}
.alt{background:var(--bg-alt)}

.dark{background:var(--bg-dark);color:var(--ink-inv)}
.dark .num,.dark .cap{color:#c9d2c0}
.dark h2,.dark h3{color:var(--ink-inv)}
.dark a{color:#cfe0bd;border-bottom-color:rgba(207,224,189,.5)}
.dark a:focus-visible{outline-color:#cfe0bd}

/* vertical axis */
.axis{position:relative}
.axis::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;
  background:linear-gradient(to bottom,rgba(95,122,70,0),rgba(95,122,70,.55) 12%,rgba(95,122,70,.55) 88%,rgba(95,122,70,0));
  pointer-events:none;
}

/* ---------- typography ---------- */

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.3;margin:0 0 22px}
h1{font-size:clamp(30px,4.2vw,44px);letter-spacing:.005em}
h1 .line{display:block}
h2{font-size:clamp(24px,2.6vw,31px);margin-bottom:18px}
h3{font-size:clamp(19px,1.7vw,21px);margin:34px 0 12px}

p{margin:0 0 26px}
p:last-child{margin-bottom:0}

.lead{font-size:19px}

.num{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--acc-2);
  display:block;
  margin-bottom:14px;
}

.cap{
  font-size:14px;
  line-height:1.65;
  color:var(--ink-2);
  margin:16px auto 0;
  text-align:center;
  max-width:520px;
}

.side{font-size:16px;line-height:1.8;color:var(--ink-2)}
.side strong{display:block;font-family:var(--serif);font-weight:400;font-size:17px;color:var(--ink);margin-bottom:6px}

.center{text-align:center}

/* ---------- separator arc ---------- */

.arc{
  width:33.333%;
  max-width:330px;
  min-width:180px;
  height:28px;
  margin:0 auto;
  border-top:1px solid var(--acc-2);
  border-left:1px solid rgba(180,101,90,.3);
  border-right:1px solid rgba(180,101,90,.3);
  border-radius:220px 220px 0 0;
}
.arc-sp{padding:8px 0 0}
.dark .arc{border-top-color:#b4655a;border-left-color:rgba(180,101,90,.4);border-right-color:rgba(180,101,90,.4)}

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

.site-head{padding:30px 0 26px;border-bottom:1px solid rgba(109,116,104,.25)}
.brand{
  display:block;
  text-align:center;
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:0;
}
.brand:hover{color:var(--acc)}

.site-nav ul{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 0;
  font-size:15px;
}
.site-nav li{display:flex;align-items:center}
.site-nav li+li::before{
  content:"";
  width:1px;height:12px;
  background:rgba(109,116,104,.5);
  margin:0 16px;
}
.site-nav a{color:var(--ink-2);border-bottom:1px solid transparent;padding-bottom:2px}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--acc);border-bottom-color:var(--acc)}

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

.hero{padding:76px 0 64px}
.hero h1{text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.hero .lead{text-align:left}
.hero-sides{margin-top:44px}

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

.fig-main{margin:0 auto;max-width:680px;padding:0 0 8px}
.fig-main img{width:100%;border-radius:2px}

.fig-detail{margin:0}
.fig-detail img{width:100%;border-radius:2px}
.fig-detail .cap{text-align:left;margin-left:0;font-size:13px}

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

ul.check,ul.plain{list-style:none;margin:0 0 26px;padding:0}
ul.check li,ul.plain li{position:relative;padding-left:26px;margin-bottom:12px}
ul.check li::before{
  content:"";
  position:absolute;left:0;top:14px;
  width:9px;height:1px;
  background:var(--acc);
}
ul.plain li::before{
  content:"";
  position:absolute;left:2px;top:12px;
  width:5px;height:5px;
  border:1px solid var(--acc);
  border-radius:50%;
}
.dark ul.check li::before{background:#a8bd8e}

ol.steps{margin:0 0 26px;padding-left:22px}
ol.steps li{margin-bottom:12px;padding-left:6px}
ol.steps li::marker{color:var(--acc-2);font-size:15px}

.toc{columns:2;column-gap:40px}
.toc li{break-inside:avoid}

dl.pairs{margin:0}
dl.pairs dt{font-family:var(--serif);font-size:18px;margin-top:22px}
dl.pairs dt:first-child{margin-top:0}
dl.pairs dd{margin:4px 0 0;color:var(--ink-2);font-size:17px;line-height:1.8}

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

.site-foot{padding:56px 0 64px;background:var(--bg-alt)}
.foot-in{text-align:center}
.foot-brand{
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:26px 0 18px;
}
.foot-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  font-size:15px;gap:6px 0;
}
.foot-nav li{display:flex;align-items:center}
.foot-nav li+li::before{
  content:"";width:1px;height:12px;
  background:rgba(109,116,104,.5);margin:0 14px;
}
.foot-nav a{color:var(--ink-2);border-bottom:1px solid transparent;padding-bottom:2px}
.foot-nav a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.foot-mail{margin:22px 0 10px;font-size:17px}
.foot-note{font-size:14px;line-height:1.7;color:var(--ink-2);max-width:560px;margin:0 auto}

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

@media (max-width:900px){
  .grid{column-gap:22px;row-gap:26px}
  .c6-mid{grid-column:2 / span 10}
  .c4-l{grid-column:1 / span 6}
  .c4-r{grid-column:7 / span 6}
  .c3-l{grid-column:1 / span 6}
  .c3-r{grid-column:7 / span 6}
  .c7-l{grid-column:1 / span 9}
  .c6-l{grid-column:1 / span 12}
  .c5-r{grid-column:1 / span 12}
  .c5,.c7{grid-column:span 12}
}

@media (max-width:640px){
  body{font-size:17px;line-height:1.85}
  .wrap{padding:0 20px}
  .grid{column-gap:0;row-gap:24px}
  .grid>*{grid-column:1 / -1 !important}
  .axis::before{display:none}
  .s-a,.s-b,.s-c{padding:44px 0}
  .s-c{padding:56px 0}
  .hero{padding:48px 0 40px}
  .hero-sides{margin-top:30px}
  .toc{columns:1}
  .fig-detail .cap{text-align:center;margin-left:auto}
  .site-head{padding:24px 0 20px}
  .site-nav li+li::before{margin:0 11px}
  .site-nav ul{font-size:14px}
  .foot-nav li+li::before{margin:0 10px}
  .site-foot{padding:44px 0 48px}
}