@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand&display=swap');

:root{
  --paper:#F6F0E3;
  --paper-2:#EFE7D6;
  --ink:#23201B;
  --ink-soft:#4C453A;
  --accent:#C8552C;
  --hand:"Kalam","Patrick Hand",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --body:"Patrick Hand",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
}

img{max-width:100%}
a{color:var(--accent)}
p{margin:0 0 .9em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.topline{background:var(--ink);color:var(--paper)}
.topline p{
  margin:0 auto;
  max-width:1120px;
  padding:8px 20px;
  font-size:16px;
  line-height:1.45;
  letter-spacing:.03em;
  text-align:center;
}

.mast{
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.mast-brand{
  max-width:1120px;
  margin:0 auto;
  padding:10px 20px 4px;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--hand);
  font-weight:700;
  font-size:24px;
  letter-spacing:.04em;
}
.logo .mark{
  display:block;
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:4px;
  background:var(--accent);
  object-fit:cover;
  transform:rotate(-7deg);
}
.mast-nav{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px 12px;
}
.mast-nav p{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}
.mast-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:6px 13px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  line-height:1.2;
  transition:background .18s ease,color .18s ease;
}
.mast-nav a:hover{background:var(--ink);color:var(--paper)}
.mast-nav a[aria-current="page"]{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:330px;
  height:45vh;
  background:var(--ink);
}
.hero-media{
  position:absolute;
  inset:-12% 0 0 0;
  z-index:0;
  will-change:transform;
}
.hero-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-wash{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(35,32,27,.10) 0%,rgba(35,32,27,.66) 55%,rgba(35,32,27,.92) 100%);
}
.hero-in{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:26px 20px 30px;
  color:var(--paper);
  text-align:left;
}
.hero-in h1{
  margin:0 0 8px;
  font-family:var(--hand);
  font-size:clamp(27px,5.4vw,44px);
  line-height:1.25;
  letter-spacing:.01em;
}
.hero-in p{
  margin:0;
  max-width:46ch;
  font-size:16px;
  line-height:1.6;
  color:#F0E8D8;
}
.cue{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  margin-top:14px;
  padding:6px 16px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-size:16px;
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:22px 20px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  align-items:start;
}

main article[id]{scroll-margin-top:24px}
.ledger{min-width:0}

section{
  counter-reset:chap;
  overflow-wrap:break-word;
}
section > article{
  position:relative;
  padding:26px 0;
}
section > article + article{margin-top:18px}
section > article::before{
  counter-increment:chap;
  content:counter(chap,decimal-leading-zero);
  display:block;
  margin-bottom:4px;
  font-family:var(--hand);
  font-size:16px;
  letter-spacing:.16em;
  color:var(--accent);
}
section > article:nth-child(odd){
  padding:26px 16px;
  background:var(--paper-2);
  border-radius:4px;
}

section small{
  display:block;
  margin-bottom:3px;
  font-family:var(--hand);
  font-size:16px;
  letter-spacing:.14em;
  color:var(--accent);
}
section h2{
  margin:0 0 .45em;
  font-family:var(--hand);
  font-weight:700;
  font-size:clamp(22px,3.6vw,30px);
  line-height:1.3;
}
section h3{
  margin:1.2em 0 .4em;
  font-family:var(--hand);
  font-weight:700;
  font-size:20px;
  line-height:1.35;
}
section p{font-size:17px;line-height:1.75}
section ul,
section ol{
  margin:0 0 1em;
  padding-left:1.3em;
}
section li{margin:.28em 0;line-height:1.7}
section img{
  height:auto;
  border-radius:4px;
}
section blockquote{
  margin:1em 0;
  padding:10px 14px;
  background:var(--paper);
  border-left:4px solid var(--accent);
  border-radius:4px;
}
section blockquote p:last-child{margin:0}
section figure{margin:1em 0}
section table{
  width:100%;
  border-collapse:collapse;
  font-size:16px;
}
section th,
section td{
  padding:8px 10px;
  border-bottom:2px dashed rgba(35,32,27,.35);
  text-align:left;
}
section pre{
  overflow-x:auto;
  padding:12px;
  border-radius:4px;
  background:var(--ink);
  color:var(--paper);
}

.rail{position:relative}
.rail small{
  display:block;
  font-family:var(--hand);
  font-size:16px;
  letter-spacing:.14em;
  color:var(--accent);
}
.rail-t{
  margin:2px 0 10px;
  font-family:var(--hand);
  font-weight:700;
  font-size:20px;
  line-height:1.3;
}
.rail-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:8px 12px;
  border-radius:4px;
  background:var(--paper-2);
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  line-height:1.3;
  transition:background .2s ease,color .2s ease;
}
.rail-list a:hover,
.rail-list a:focus-visible,
.rail-list a.is-hot{
  background:var(--ink);
  color:var(--paper);
}

.foot{
  margin-top:36px;
  border-top:3px solid var(--ink);
  background:var(--paper-2);
}
.foot-row{
  max-width:1120px;
  margin:0 auto;
  padding:16px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 18px;
  text-align:center;
}
.foot address{
  font-style:normal;
  font-family:var(--hand);
  font-size:17px;
  letter-spacing:.04em;
}
.foot ul{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
}
.foot ul a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:4px 8px;
  color:var(--ink);
  font-size:16px;
  text-decoration:underline;
  text-underline-offset:4px;
}
.foot-copy{
  width:100%;
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:var(--ink-soft);
  text-align:center;
}

.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .55s ease,transform .55s ease;
}
.js .reveal.is-in{
  opacity:1;
  transform:none;
}

@media (min-width:760px){
  .mast{
    position:sticky;
    top:0;
    z-index:50;
  }
  main article[id]{scroll-margin-top:170px}
}

@media (min-width:920px){
  .wrap{
    grid-template-columns:minmax(0,1fr) 258px;
    padding-top:34px;
    padding-bottom:44px;
  }
  .rail{
    position:sticky;
    top:170px;
  }
}

@media (max-width:420px){
  .hero-in h1{font-size:26px}
  .hero-in p{font-size:16px}
  .topline p{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

button[aria-expanded]{min-width:44px;min-height:44px}