:root{
  --bg:#d8d4ca;
  --ink:#151410;
  --text:#25231d;
  --muted:#6b675d;
  --line:#8f897c;
  --light:#b9b2a5;
  --link:#3b2a1f;
  --visited:#4b3a32;
  --accent:#5c2f24;
  --w:min(100% - clamp(24px,5vw,96px),1160px);
  --body-font:"Palatino Linotype","Book Antiqua",Palatino,serif;
  --jp-font:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","MS PMincho",serif;
  --ui-font:"Helvetica Neue",Arial,sans-serif;
  --mono:"Courier New",Courier,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-width:320px;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body-font) !important;
  font-size:clamp(15px,.45vw + 13px,16px);
  line-height:1.66;
}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:visited{color:var(--visited)}
a:hover{color:var(--accent);background:rgba(92,47,36,.08)}
.page{
  width:100%;
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  padding:0 0 clamp(28px,4vw,48px);
}
header,nav,main,footer{width:var(--w);margin-left:auto;margin-right:auto}
header{
  margin-top:clamp(14px,2.2vw,28px);
  padding:16px 0 14px;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);
}
h1{
  margin:0 0 8px;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,3vw,54px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
}
.header-statement{
  max-width:780px;
  margin:0;
  color:var(--ink);
  font-family:var(--ui-font);
  font-size:clamp(14px,.35vw + 12px,15px);
  font-weight:700;
  line-height:1.5;
}
.header-statement a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.header-statement a:hover{color:var(--accent);background:transparent}
nav{
  padding:9px 0;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}
nav a{
  display:inline-block;
  margin-right:22px;
  text-decoration:none;
  color:var(--link);
}
nav a:hover{text-decoration:underline}
main{padding:clamp(48px,9vh,110px) 0}
.intro,.content,.article{max-width:860px}
.kicker,.label,.no,.small,figcaption{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}
.kicker{margin:0 0 10px}
h2{
  margin:0 0 16px;
  color:var(--ink);
  font-family:var(--body-font) !important;
  font-size:clamp(26px,2vw + 14px,44px);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.015em;
  max-width:860px;
}
h3{
  margin:26px 0 8px;
  color:var(--ink);
  font-family:var(--body-font) !important;
  font-size:clamp(20px,.65vw + 17px,26px);
  font-weight:400;
  line-height:1.22;
}
p,li,.row p,.work p,.info-row,.article p{
  font-family:var(--body-font) !important;
}
p{margin:0 0 12px}
.jp{
  color:var(--muted);
  font-family:var(--jp-font) !important;
  font-size:14px;
  line-height:1.82;
}
.rows,.info,.works{
  max-width:860px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:18px;
}
.row,.info-row,.work{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:16px;
  border-top:1px solid var(--light);
  padding:13px 0 14px;
}
.row:first-child,.info-row:first-child,.work:first-child{border-top:0}
.row p,.work p{max-width:720px;font-size:14px}
.info-row{
  grid-template-columns:minmax(130px,170px) minmax(0,1fr);
  padding:8px 0;
  font-size:14px;
}
.work{
  grid-template-columns:minmax(150px,220px) minmax(0,1fr);
  font-size:14px;
}
.work-title{
  color:var(--ink);
  font-family:var(--body-font) !important;
  font-size:16px;
}
.hero-photo{margin:24px 0 8px}
.hero-photo img{
  display:block;
  width:100%;
  max-width:860px;
  height:auto;
  border:1px solid var(--line);
  background:#e4e0d7;
}
figcaption{margin-top:6px;line-height:1.5}
.diagram{margin:28px 0 10px}
.diagram svg{
  display:block;
  width:100%;
  max-width:860px;
  height:auto;
  border:1px solid var(--line);
  background:#e4e0d7;
}
.article p{max-width:780px}
.article .jp{max-width:780px}
.article-end{
  margin-top:24px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
footer{
  padding:14px 0 0;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.65;
  color:var(--muted);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,360px);
  gap:24px;
  align-items:start;
}
.footer-name{color:var(--ink)}
.footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.button{
  display:inline-block;
  border:1px solid var(--line);
  padding:5px 9px;
  color:var(--link);
  text-decoration:none;
  background:transparent;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.2;
}
.button:hover{color:var(--accent);border-color:var(--accent);background:rgba(92,47,36,.08)}
.small-links{margin-top:8px}
.small-links a{margin-right:12px}
ul{margin:0 0 10px;padding-left:20px}
li{margin-bottom:6px}
@media (min-width:1100px) and (min-aspect-ratio:16/9){
  :root{--w:min(100% - 112px,1240px)}
}
@media (max-width:760px){
  :root{--w:calc(100% - 24px)}
  header{margin-top:14px}
  main{padding:48px 0 80px}
  .footer-grid{grid-template-columns:1fr;gap:12px}
  .row,.info-row,.work{grid-template-columns:1fr;gap:4px}
}
@media (max-width:380px){
  :root{--w:calc(100% - 18px)}
  body{font-size:14px}
  nav,footer,.button,.label,.no,.kicker,.small,figcaption{font-size:11px}
}