:root{
  --powder:#f5e9e7; --powder-2:#ecd8d5; --satin:#fffbfa; --line:#e2cbc8;
  --plum:#2f1b2c; --plum-2:#4a2c45; --mauve:#76626f;
  --mulberry:#86305a; --mulberry-d:#6a2246; --gold:#c9a24a; --gold-l:#e6cc86;
  --display:Didot,"Bodoni 72","Bodoni MT","Bodoni 72 Oldstyle","Big Caslon","Hoefler Text",Georgia,serif;
  --body:"Avenir Next",Avenir,"Segoe UI","Helvetica Neue",system-ui,sans-serif;
  --w:74rem; --text:40rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--powder);color:var(--plum);font:1.0625rem/1.7 var(--body)}
a{color:var(--mulberry);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--mulberry-d);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--mulberry);outline-offset:3px}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--plum);color:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem}

/* tape measure */
.tape{height:14px;background:url(tape.svg) left top/200px 14px repeat-x}

/* header */
.top{background:var(--satin)}
.top-inner{max-width:var(--w);margin:0 auto;padding:1.1rem 1.4rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.brand{text-decoration:none;color:var(--plum);display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.brand:hover{color:var(--plum)}
.brand-name{font:italic 400 2.3rem/1 var(--display);letter-spacing:-.01em}
.brand-name b{font-weight:400;color:var(--mulberry)}
.brand small{font:400 .85rem/1.3 var(--body);color:var(--mauve)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.3rem}
.nav li{position:relative}
.nav a,.nav .lbl{display:block;padding:.3rem 0;color:var(--plum);text-decoration:none;font:500 .95rem/1.3 var(--body);border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current],.nav .trail>a{border-bottom-color:var(--gold);color:var(--mulberry)}
.nav li ul{display:none;position:absolute;left:0;top:100%;background:var(--satin);min-width:13rem;flex-direction:column;padding:.5rem 1rem;box-shadow:0 12px 30px -16px rgba(47,27,44,.4);z-index:20}
.nav li:hover>ul,.nav li:focus-within>ul{display:flex}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.navbtn{display:none;cursor:pointer;font:500 .95rem var(--body);border:1px solid var(--plum);padding:.35rem .9rem;border-radius:2rem}
.navtoggle:focus-visible+.navbtn{outline:2px solid var(--mulberry);outline-offset:3px}
@media (max-width:820px){
  .top-inner{align-items:center}
  .navbtn{display:inline-block}
  .nav{width:100%}
  .nav>ul{display:none;flex-direction:column;margin-top:.6rem}
  .navtoggle:checked~ul{display:flex}
  .nav li ul{display:flex;position:static;box-shadow:none;padding:0 0 0 1rem;background:none}
}

/* hero */
.hero{max-width:var(--w);margin:0 auto;padding:4rem 1.4rem 3rem;display:grid;grid-template-columns:minmax(0,1fr) 9rem;gap:3rem;align-items:stretch}
.hero-text{align-self:end}
.kicker{font:italic 400 1.15rem/1.3 var(--display);color:var(--mulberry);margin:0 0 1rem}
.hero h1{font:400 clamp(2.6rem,7vw,5.6rem)/.98 var(--display);letter-spacing:-.025em;margin:0 0 1.4rem;max-width:13ch}
.hero .lede{font-size:1.2rem;max-width:36rem;color:var(--plum-2);margin:0}
.hero-links{margin:2rem 0 0;display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-block;padding:.75rem 1.4rem;border-radius:2rem;background:var(--plum);color:var(--satin);text-decoration:none;font:500 .95rem/1 var(--body)}
.btn:hover{background:var(--mulberry);color:#fff;text-decoration:none}
.btn.ghost{background:transparent;color:var(--plum);border:1px solid var(--plum)}
.btn.ghost:hover{background:var(--plum);color:var(--satin)}
.measure{min-height:22rem}
.measure svg{width:100%;height:100%;display:block}
.measure .horiz{display:none}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:2rem;padding-top:2.6rem}.measure{min-height:0;height:2.2rem;order:-1}.measure .vert{display:none}.measure .horiz{display:block}}

/* page head */
.pagehead{max-width:var(--w);margin:0 auto;padding:3rem 1.4rem 1rem}
.pagehead-inner{max-width:48rem}
.crumbs{font-size:.88rem;color:var(--mauve);margin:0 0 1.2rem}
.crumbs a{color:var(--mauve)}
.pagehead h1{font:400 clamp(2.2rem,5vw,3.8rem)/1.02 var(--display);letter-spacing:-.02em;margin:0 0 1rem}
.pagehead .lede{font:italic 400 1.3rem/1.45 var(--display);color:var(--plum-2);margin:0}
.meta{font-size:.9rem;color:var(--mauve);margin:0 0 1rem}
.meta a{color:var(--mulberry)}

/* article */
.sheet{max-width:var(--w);margin:0 auto;padding:0 1.4rem}
.content{background:var(--satin);max-width:52rem;padding:2.6rem clamp(1.2rem,5vw,4rem) 3rem;margin:1.6rem 0 3.5rem;position:relative}
.content::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:url(tape.svg) left top/160px 10px repeat-x}
.content>*{max-width:var(--text)}
.content h2{font:400 2rem/1.15 var(--display);letter-spacing:-.01em;margin:2.6rem 0 .8rem}
.content h2:first-child{margin-top:.6rem}
.content h3{font:600 1.12rem/1.35 var(--body);margin:1.9rem 0 .4rem;color:var(--plum)}
.content p{margin:0 0 1.1rem}
.content ul,.content ol{padding-left:1.3rem;margin:0 0 1.2rem}
.content li{margin:.35rem 0}
.content ul li::marker{color:var(--gold)}
.content ol li::marker{color:var(--mulberry);font-family:var(--display);font-style:italic}
.content strong{color:var(--plum);font-weight:600}
.content blockquote{margin:2rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--gold);font:italic 400 1.35rem/1.45 var(--display);color:var(--plum-2)}
.content blockquote p{margin:.3rem 0}
.content table{width:100%;max-width:none;border-collapse:collapse;margin:1.4rem 0 1.8rem;font-size:.95rem;display:block;overflow-x:auto}
@media (min-width:640px){.content table{display:table}}
.content th,.content td{padding:.6rem .7rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.content th{font-weight:600;border-bottom:2px solid var(--plum)}
.content tbody tr:nth-child(odd) td{background:rgba(245,233,231,.55)}
.content hr{border:0;height:10px;background:url(tape.svg) left top/160px 10px repeat-x;margin:2.4rem 0;opacity:.8}
.tags{margin-top:2.4rem;font-size:.92rem;color:var(--mauve)}
.tags a,.tags span.t{display:inline-block;margin:.2rem .2rem 0 0;padding:.15rem .7rem;border:1px solid var(--line);border-radius:2rem;text-decoration:none;color:var(--plum)}
.tags a:hover{border-color:var(--mulberry);color:var(--mulberry)}

/* home & listings */
.section{max-width:var(--w);margin:0 auto;padding:1rem 1.4rem 2rem}
.section-title{font:400 2rem/1.1 var(--display);margin:0 0 1.6rem;display:flex;gap:1.2rem;align-items:center}
.section-title::after{content:"";flex:1;height:10px;background:url(tape.svg) left top/160px 10px repeat-x;opacity:.8}
.spread{display:grid;grid-template-columns:1.25fr 1fr;gap:0 3rem}
@media (max-width:820px){.spread{grid-template-columns:1fr}}
.feature{background:var(--plum);color:var(--powder);padding:2.2rem 2rem 2.4rem;display:flex;flex-direction:column;justify-content:flex-end;min-height:22rem;margin-bottom:1.6rem}
.feature .cat{color:var(--gold-l)}
.feature h3{font:400 clamp(1.9rem,3.4vw,2.7rem)/1.05 var(--display);margin:.6rem 0 .9rem;letter-spacing:-.01em}
.feature h3 a{color:#fff;text-decoration:none}
.feature h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.feature p{margin:0;color:var(--powder-2)}
.cat{font:italic 400 1rem/1.2 var(--display);color:var(--mulberry)}
.entries{list-style:none;margin:0;padding:0}
.entry{padding:1.1rem 0 1.2rem;border-top:1px solid var(--line)}
.entry:first-child{border-top:0;padding-top:0}
.entry h3,.entry h2{font:400 1.45rem/1.15 var(--display);margin:.3rem 0 .4rem}
.entry h3 a,.entry h2 a{color:var(--plum);text-decoration:none}
.entry h3 a:hover,.entry h2 a:hover{color:var(--mulberry);text-decoration:underline;text-decoration-color:var(--gold)}
.entry p{margin:0;color:var(--mauve);font-size:.97rem}
.entry .meta{margin:0 0 .3rem}
.all{margin:.4rem 0 0}
.related{max-width:48rem}
.home-body{max-width:var(--w);margin:0 auto;padding:0 1.4rem}
.home-body .content{margin-top:1rem}
.chips{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{display:block;padding:.3rem .9rem;border:1px solid var(--plum);border-radius:2rem;color:var(--plum);text-decoration:none;font-size:.92rem}
.chips a:hover,.chips a[aria-current]{background:var(--plum);color:var(--satin)}
.list-wrap{max-width:var(--w);margin:0 auto;padding:1.4rem 1.4rem 3rem}
.list-wrap .entries{max-width:48rem;background:var(--satin);padding:2.2rem clamp(1.2rem,4vw,2.6rem) 1.6rem;position:relative}
.list-wrap .entries::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:url(tape.svg) left top/160px 10px repeat-x}
.pager{max-width:48rem;display:flex;justify-content:space-between;gap:1rem;margin-top:1.4rem}
.big404{font:italic 400 clamp(5rem,14vw,9rem)/.9 var(--display);color:var(--mulberry);margin:0 0 .5rem}

/* footer */
.foot{background:var(--plum);color:var(--powder-2);margin-top:3rem}
.foot-inner{max-width:var(--w);margin:0 auto;padding:2.8rem 1.4rem 1.4rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
@media (max-width:760px){.foot-inner{grid-template-columns:1fr}}
.foot-name{font:italic 400 2rem/1 var(--display);color:#fff;margin:0 0 .7rem}
.foot-h{font:italic 400 1.15rem var(--display);color:var(--gold-l);margin:0 0 .5rem}
.footlinks{list-style:none;margin:0;padding:0}
.footlinks li{margin:.3rem 0}
.footlinks a{color:var(--powder);text-decoration:none}
.footlinks a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--gold)}
.copy{max-width:var(--w);margin:0 auto;padding:1.1rem 1.4rem 1.8rem;font-size:.88rem;color:#c8b3bf;border-top:1px solid var(--plum-2)}

/* the one orchestrated moment: the tape unrolls */
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.measure .vert{animation:unroll 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
@media (prefers-reduced-motion:reduce){.measure .vert{animation:none}}