:root{
  --tan:#f5e6c8;
  --brown:#d4a574;
  --ink:#262117;
  --paper:#fbf3e2;
  --deep:#8a5b2c;
  --dim:rgba(38,33,23,.66);
  --line:rgba(38,33,23,.32);
  --serif:'Libre Baskerville',Georgia,'Songti SC','Noto Serif SC','Source Han Serif SC',serif;
  --display:'Cormorant Garamond','Libre Baskerville',Georgia,'Songti SC',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--serif);
  font-size:17px;
  line-height:1.8;
  color:var(--ink);
  background:var(--tan);
  background-image:linear-gradient(180deg,#f8eed7 0%,#f5e6c8 34%,#f2e0bd 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  opacity:.2;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:69;
  pointer-events:none;
  mix-blend-mode:soft-light;
  background:
    radial-gradient(58% 38% at 86% 4%,rgba(255,209,142,.55),transparent 72%),
    radial-gradient(48% 40% at 2% 94%,rgba(212,165,116,.4),transparent 70%);
}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
::selection{background:var(--brown);color:var(--ink)}

.topnav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.7rem clamp(.8rem,3vw,2rem);
  border-bottom:2px solid var(--ink);
  background:linear-gradient(180deg,#fdf6e7,#efdcb6);
}
.topnav ol{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin:0;
  padding:0;
  list-style:none;
}
.topnav .nav-a{order:1;justify-content:flex-end}
.topnav .nav-b{order:3;justify-content:flex-start}
.topnav .brand{
  order:2;
  margin:0 clamp(.6rem,2vw,1.6rem);
  font-family:var(--display);
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  white-space:nowrap;
  text-shadow:1px 1px 0 rgba(212,165,116,.9);
}
.topnav a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:.25rem .85rem;
  font-size:16px;
  line-height:1.3;
  text-decoration:none;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.42);
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.topnav a:hover{
  background:var(--ink);
  color:var(--tan);
  border-color:var(--ink);
  transform:translateY(-1px);
}

.anchors{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.4rem clamp(.8rem,3vw,2rem);
  background:rgba(38,33,23,.95);
  color:var(--tan);
  border-bottom:2px solid var(--ink);
}
.anchors-list{
  display:flex;
  gap:.25rem;
  margin:0;
  padding:0;
  list-style:none;
  flex:1 1 auto;
  overflow-x:auto;
  scrollbar-width:none;
}
.anchors-list::-webkit-scrollbar{display:none}
.anchors-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.15rem .7rem;
  font-size:16px;
  white-space:nowrap;
  text-decoration:none;
  border-radius:999px;
  color:var(--tan);
  opacity:.86;
  transition:background .2s ease,color .2s ease,opacity .2s ease;
}
.anchors-list a:hover{background:var(--brown);color:var(--ink);opacity:1}
.search{display:flex;align-items:center;gap:.3rem;margin:0;flex:0 0 auto}
.search input{
  width:9.5rem;
  min-height:40px;
  padding:.15rem .7rem;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:var(--tan);
  border:1.5px solid var(--brown);
  border-radius:999px;
}
.search button{
  min-height:40px;
  padding:.15rem .8rem;
  font:inherit;
  font-size:16px;
  cursor:pointer;
  color:var(--ink);
  background:var(--brown);
  border:0;
  border-radius:999px;
}

.stage{display:block}

.hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;
  gap:clamp(1.2rem,4vw,3rem);
  min-height:45vh;
  padding:clamp(1.3rem,4vw,2.8rem) clamp(.9rem,4vw,3rem);
  border-bottom:2px solid var(--ink);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 58%,rgba(255,206,138,.35) 76%,transparent 92%);
}
.hero .badge{
  position:absolute;
  top:.9rem;
  right:clamp(.9rem,4vw,3rem);
  z-index:2;
  padding:.2rem .8rem;
  font-size:16px;
  letter-spacing:.08em;
  color:var(--tan);
  background:var(--ink);
  border-radius:999px;
  transform:rotate(2.4deg);
}
.hero-txt{position:relative;z-index:1;max-width:34ch}
.hero h1{
  margin:.2rem 0 .7rem;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,5vw,3.05rem);
  line-height:1.24;
  letter-spacing:.01em;
}
.lede{margin:0 0 1.2rem;font-size:1.03rem;color:var(--dim);max-width:30ch}
.cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.25rem 1.2rem;
  font-size:16px;
  text-decoration:none;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--brown);
  transition:background .22s ease,color .22s ease;
}
.cta:hover{background:var(--ink);color:var(--tan)}
.hero-fig{
  position:relative;
  z-index:1;
  margin:0;
  padding:.7rem .7rem 2.5rem;
  background:#fdf8ec;
  border:1px solid rgba(38,33,23,.42);
  border-radius:10px;
  transform:rotate(1.4deg);
  animation:vhs 9s ease-in-out infinite;
}
.hero-fig img{display:block;width:100%;height:auto;border-radius:4px;filter:sepia(.28) contrast(1.08) saturate(.85)}
.hero-plate{
  width:100%;
  height:225px;
  border-radius:4px;
  background:repeating-linear-gradient(135deg,#e7d1a6,#e7d1a6 12px,#f1dfba 12px,#f1dfba 24px);
}
@keyframes vhs{
  0%,86%,100%{transform:rotate(1.4deg) skewX(0)}
  89%{transform:rotate(1.4deg) skewX(-.9deg) translateX(2px)}
  92%{transform:rotate(1.4deg) skewX(.7deg)}
  95%{transform:rotate(1.4deg) translateY(-1px)}
}

.grid{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.2rem,4vw,3.2rem);
  align-items:start;
  padding:clamp(1.3rem,4vw,2.6rem) clamp(.9rem,4vw,3rem) clamp(2rem,6vw,4rem);
}
.rail{
  position:sticky;
  top:4.4rem;
  padding:1rem;
  background:rgba(255,255,255,.42);
  border:1.5px solid var(--line);
  border-radius:10px;
}
small{
  display:block;
  margin-bottom:.1rem;
  font-size:16px;
  letter-spacing:.16em;
  color:var(--deep);
}
.rail h2{
  margin:.05rem 0 .7rem;
  font-family:var(--display);
  font-weight:600;
  font-size:1.3rem;
  line-height:1.3;
}
.rail-list{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.1rem}
.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.15rem .05rem;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  border-bottom:1px dashed rgba(38,33,23,.22);
  transition:color .2s ease,padding-left .2s ease;
}
.rail-list a:hover{color:var(--deep);padding-left:.35rem}
.totop{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  margin-top:.4rem;
  font-size:16px;
  text-decoration:none;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:rgba(212,165,116,.35);
}
.totop:hover{background:var(--ink);color:var(--tan)}

.reading{max-width:70ch;overflow-wrap:break-word}
.reading section{padding:1.6rem 0 2rem;border-top:1px dashed rgba(38,33,23,.28);scroll-margin-top:5.2rem}
.reading section:first-child{border-top:0;padding-top:.3rem}
.reading h2{
  margin:.2rem 0 1rem;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.32;
}
.reading h3{
  margin:1.3rem 0 .55rem;
  font-family:var(--display);
  font-weight:600;
  font-size:1.28rem;
  line-height:1.4;
}
.reading p{margin:0 0 1.05rem}
.reading ul,.reading ol{margin:0 0 1.1rem;padding-left:1.35rem}
.reading li{margin:.25rem 0}
.reading li::marker{color:var(--deep)}
.reading a{color:#7c4a1c;text-underline-offset:3px;text-decoration-thickness:1px}
.reading a:hover{color:var(--ink);background:rgba(212,165,116,.35)}
.reading strong{background:linear-gradient(transparent 62%,rgba(212,165,116,.65) 62%)}
.reading figure{
  margin:1.4rem 0;
  padding:.6rem .6rem 1rem;
  background:#fdf8ec;
  border:1px solid var(--line);
  border-radius:10px;
}
.reading img{display:block;max-width:100%;height:auto;border-radius:4px;filter:sepia(.22) contrast(1.05) saturate(.88)}
.reading blockquote{
  margin:1.2rem 0;
  padding:.55rem 1rem;
  border-left:3px solid var(--brown);
  background:rgba(212,165,116,.22);
}
.reading blockquote p:last-child{margin-bottom:0}
.reading table{width:100%;border-collapse:collapse;font-size:16px}
.reading th,.reading td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top}
.reading th{background:rgba(212,165,116,.3)}

.js .reading section{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js .reading section.is-in{opacity:1;transform:none}

.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:clamp(1.3rem,4vw,2.4rem) clamp(.9rem,4vw,3rem) 1.2rem;
  background:var(--ink);
  color:var(--tan);
}
.foot section{margin:0}
.foot-brand{flex:1 1 100%}
.foot-brand a{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(2.2rem,9vw,4.4rem);
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--tan);
  opacity:.95;
}
.foot-brand a:hover{color:var(--brown)}
.foot-nav{flex:1 1 auto}
.foot-nav ol{display:flex;flex-wrap:wrap;gap:.15rem .45rem;margin:0;padding:0;list-style:none}
.foot-nav a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.1rem .3rem;
  font-size:16px;
  text-decoration:none;
  color:rgba(245,230,200,.86);
}
.foot-nav a:hover{color:var(--tan);text-decoration:underline}
.foot-legal{flex:0 0 auto}
.foot-legal p{margin:0;font-size:16px;color:rgba(245,230,200,.72)}

@media (max-width:880px){
  .topnav{gap:.3rem;padding-inline:.7rem}
  .topnav .brand{order:0;flex:1 1 100%;margin:0 0 .45rem;text-align:center}
  .topnav .nav-a,.topnav .nav-b{order:1;justify-content:center}
  .anchors{flex-wrap:wrap;gap:.35rem;padding-block:.45rem}
  .search{flex:1 1 100%}
  .search input{flex:1 1 auto;width:auto;min-width:0}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:2rem}
  .hero .badge{position:static;display:inline-block;width:max-content;transform:rotate(-2deg);margin-bottom:.6rem}
  .hero-txt{max-width:none}
  .hero-fig{transform:rotate(.8deg);animation:none}
  .grid{grid-template-columns:1fr}
  .rail{position:static}
  .reading{max-width:none}
  .reading table{display:block;overflow-x:auto}
  .reading section{scroll-margin-top:7.6rem}
  .foot{flex-direction:column;align-items:flex-start;gap:.7rem}
  .foot-brand{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-fig{animation:none}
  .js .reading section{opacity:1;transform:none}
  .topnav a,.rail-list a,.cta{transition:none}
}
</style-does-not-apply>

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